nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add room-info to room-tools

Browse Source
This commit is contained in:
MyNameIsBatman 2022-02-13 16:50:14 -03:00
parent f41aafaae9
commit 9666a4103a
2 changed files with 127 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
View File

@ -2,50 +2,61 @@
position: absolute; position: absolute;
bottom: 125px; bottom: 125px;
left: -145px; left: -145px;
background: rgba($dark,.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
transition: all .2s ease; transition: all .2s ease;
&.open { &.open {
left: 0px; left: 0px;
} }
.list-group-item { .nitro-room-tools-content {
background: transparent; background: rgba($dark,.95);
padding: 3px 0px; box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
color: $white; border-top-right-radius: $border-radius;
border-color: rgba($black, 0.3); border-bottom-right-radius: $border-radius;
cursor: pointer;
.list-group-item {
&:hover { background: transparent;
text-decoration: underline; padding: 3px 0px;
color: $white;
border-color: rgba($black, 0.3);
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:first-child {
padding-top: 8px;
}
&:last-child {
border-bottom: none;
padding-bottom: 8px;
}
&.disabled {
opacity: .5;
}
} }
&:first-child { .tools-item {
padding-top: 8px; .icon {
} width: 22px;
background-repeat: no-repeat;
&:last-child { background-position: center;
border-bottom: none; }
padding-bottom: 8px;
} &:hover {
text-decoration: underline;
&.disabled { }
opacity: .5;
} }
} }
.tools-item { .nitro-room-tools-info {
.icon { background: rgba($dark,.95);
width: 22px; box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
background-repeat: no-repeat; transition: all .2s ease;
background-position: center; pointer-events: none;
} max-width: 250px;
&:hover {
text-decoration: underline;
}
} }
} }

98
src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -1,11 +1,11 @@
import { RoomLikeRoomComposer } from '@nitrots/nitro-renderer'; import { GetGuestRoomResultEvent, RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames'; import classNames from 'classnames';
import { FC, useCallback, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api'; import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
import { NavigatorEvent } from '../../../../events'; import { NavigatorEvent } from '../../../../events';
import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent'; import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent';
import { dispatchUiEvent } from '../../../../hooks/events'; import { dispatchUiEvent } from '../../../../hooks/events';
import { SendMessageHook } from '../../../../hooks/messages'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
import { useRoomContext } from '../../context/RoomContext'; import { useRoomContext } from '../../context/RoomContext';
export const RoomToolsWidgetView: FC<{}> = props => export const RoomToolsWidgetView: FC<{}> = props =>
@ -16,6 +16,12 @@ export const RoomToolsWidgetView: FC<{}> = props =>
const [ isZoomedIn, setIsZoomedIn ] = useState(false); const [ isZoomedIn, setIsZoomedIn ] = useState(false);
const [ isLiked, setIsLiked ] = useState(false); const [ isLiked, setIsLiked ] = useState(false);
const [ roomName, setRoomName ] = useState(null);
const [ roomOwner, setRoomOwner ] = useState(null);
const [ roomTags, setRoomTags ] = useState(null);
const [ roomInfoOpacity, setRoomInfoOpacity ] = useState(false);
const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
const handleToolClick = useCallback((action: string) => const handleToolClick = useCallback((action: string) =>
{ {
switch(action) switch(action)
@ -42,28 +48,82 @@ export const RoomToolsWidgetView: FC<{}> = props =>
return; return;
} }
}, [ isZoomedIn, isLiked, widgetHandler ]); }, [ isZoomedIn, isLiked, widgetHandler ]);
const onGetGuestRoomResultEvent = useCallback((event: GetGuestRoomResultEvent) =>
{
const parser = event.getParser();
let updated = false;
if(roomName !== parser.data.roomName)
{
updated = true;
setRoomName(parser.data.roomName);
}
if(roomOwner !== parser.data.ownerName)
{
updated = true;
setRoomOwner(parser.data.ownerName);
}
if(roomTags !== parser.data.tags)
{
updated = true;
setRoomTags(parser.data.tags);
}
if(updated)
{
setRoomInfoOpacity(true);
setRoomInfoDisplay(true);
setTimeout(() =>
{
setRoomInfoOpacity(false);
setTimeout(() => setRoomInfoDisplay(false), 1000);
}, 3000);
}
}, [ roomName, roomOwner, roomTags ]);
CreateMessageHook(GetGuestRoomResultEvent, onGetGuestRoomResultEvent);
return ( return (
<div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}> <div className={ 'nitro-room-tools align-items-center d-flex gap-3' + classNames({ ' open': isExpended }) }>
<div className="d-flex flex-column gap-2 w-100 py-2 pe-2"> <div className="nitro-room-tools-content ps-3 d-flex">
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }> <div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
<i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') } <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
<i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
<i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
<i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
</div>
<div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
<i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
<i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
</div>
</div> </div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }> <div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
<i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') } <i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
<i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
</div>
<div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
<i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
</div>
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
<i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
</div> </div>
</div> </div>
<div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}> <div className="nitro-room-tools-info rounded py-2 px-3 d-flex flex-column gap-2" style={ { 'opacity': roomInfoOpacity ? '1' : '0', 'display': roomInfoDisplay ? 'block' : 'none' } }>
<i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } /> <div className="d-flex flex-column gap-1">
<div className="h4 m-0">{ roomName }</div>
<div className="h4 text-muted m-0">{ roomOwner }</div>
</div>
{ roomTags && roomTags.length > 0 && <div className="d-flex gap-2">
{ roomTags.map(tag =>
{
return <div className="rounded bg-primary text-white p-1 text-sm">#{ tag }</div>
}) }
</div> }
</div> </div>
</div> </div>
); );