mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 23:50:52 +01:00
Add room-info to room-tools
This commit is contained in:
MyNameIsBatman
parent
f41aafaae9
commit
9666a4103a
@ -2,50 +2,61 @@
|
||||
position: absolute;
|
||||
bottom: 125px;
|
||||
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;
|
||||
|
||||
&.open {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
background: transparent;
|
||||
padding: 3px 0px;
|
||||
color: $white;
|
||||
border-color: rgba($black, 0.3);
|
||||
cursor: pointer;
|
||||
.nitro-room-tools-content {
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
.list-group-item {
|
||||
background: transparent;
|
||||
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 {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.tools-item {
|
||||
.icon {
|
||||
width: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .5;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools-item {
|
||||
.icon {
|
||||
width: 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.nitro-room-tools-info {
|
||||
background: rgba($dark,.95);
|
||||
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
|
||||
transition: all .2s ease;
|
||||
pointer-events: none;
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
|
||||
import { GetGuestRoomResultEvent, RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
|
||||
import { NavigatorEvent } from '../../../../events';
|
||||
import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent';
|
||||
import { dispatchUiEvent } from '../../../../hooks/events';
|
||||
import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
|
||||
import { useRoomContext } from '../../context/RoomContext';
|
||||
|
||||
export const RoomToolsWidgetView: FC<{}> = props =>
|
||||
@ -16,6 +16,12 @@ export const RoomToolsWidgetView: FC<{}> = props =>
|
||||
const [ isZoomedIn, setIsZoomedIn ] = 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) =>
|
||||
{
|
||||
switch(action)
|
||||
@ -43,27 +49,81 @@ export const RoomToolsWidgetView: FC<{}> = props =>
|
||||
}
|
||||
}, [ 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 (
|
||||
<div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
|
||||
<div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
|
||||
<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 className={ 'nitro-room-tools align-items-center d-flex gap-3' + classNames({ ' open': isExpended }) }>
|
||||
<div className="nitro-room-tools-content ps-3 d-flex">
|
||||
<div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
|
||||
<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 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 className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
|
||||
<i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
|
||||
<i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
|
||||
<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' } }>
|
||||
<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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user