nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 08:50:51 +01: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

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

@ -2,16 +2,18 @@
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;
}
.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;
.list-group-item {
background: transparent;
padding: 3px 0px;
@ -48,4 +50,13 @@
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;
}
}

66
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 { 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,8 +49,49 @@ 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={ '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') }
@ -66,5 +113,18 @@ export const RoomToolsWidgetView: FC<{}> = props =>
<i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
</div>
</div>
<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>
);
};