From efa0994d3038e52380cc5173418705225a8154d3 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Fri, 2 Jul 2021 01:37:31 -0300 Subject: [PATCH] updates --- public/configuration.json | 2 +- src/assets/images/icons/arrows.png | Bin 0 -> 222 bytes src/assets/images/icons/camera-small.png | Bin 0 -> 296 bytes src/assets/images/icons/house-small.png | Bin 0 -> 361 bytes .../navigator/thumbnail_placeholder.png | Bin 3313 -> 1801 bytes src/assets/styles/icons.scss | 18 +++ src/events/navigator/NavigatorEvent.ts | 2 + .../navigator/NavigatorMessageHandler.tsx | 61 ++++++--- src/views/navigator/NavigatorView.tsx | 14 ++ src/views/navigator/common/RoomInfoData.ts | 60 ++++++++ .../navigator/reducers/NavigatorReducer.tsx | 21 ++- src/views/navigator/views/NavigatorViews.scss | 2 + .../room-info/NavigatorRoomInfoView.scss | 20 +++ .../views/room-info/NavigatorRoomInfoView.tsx | 129 ++++++++++++++++++ .../room-info/NavigatorRoomInfoView.types.ts | 5 + .../room-link/NavigatorRoomLinkView.scss | 14 ++ .../views/room-link/NavigatorRoomLinkView.tsx | 70 ++++++++++ .../room-link/NavigatorRoomLinkView.types.ts | 5 + .../room-tools/RoomToolsWidgetView.tsx | 18 ++- 19 files changed, 416 insertions(+), 25 deletions(-) create mode 100644 src/assets/images/icons/arrows.png create mode 100644 src/assets/images/icons/camera-small.png create mode 100644 src/assets/images/icons/house-small.png create mode 100644 src/views/navigator/common/RoomInfoData.ts create mode 100644 src/views/navigator/views/room-info/NavigatorRoomInfoView.scss create mode 100644 src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx create mode 100644 src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts create mode 100644 src/views/navigator/views/room-link/NavigatorRoomLinkView.scss create mode 100644 src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx create mode 100644 src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts diff --git a/public/configuration.json b/public/configuration.json index 965bc29c..35ba1570 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -19,7 +19,7 @@ "avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro", "avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro", "furni.extras.url": "${asset.url}/images/furniextras/%image%.png", - "url.prefix": "", + "url.prefix": "http://localhost:3000", "chat.viewer.height.percentage": 0.40, "auth.system.enabled": true, "auth.system.http.enabled": true, diff --git a/src/assets/images/icons/arrows.png b/src/assets/images/icons/arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..47a833ce7ac60dea4318cfe4659d7876fec1db7d GIT binary patch literal 222 zcmeAS@N?(olHy`uVBq!ia0vp^fanMpx^{g z7srr_TgeqaKPfVEFdwX!kd}Qsnfdf#5z8-Y{`dPD+F7cY3b=OOewUanMpx`Y} z7srr_TggApf0*Cc*!a@E?o3ZG-y-=F6<=NmdP=O|>^%ELe!b!eGbQN-nK_*19Lp77 zNL@U-VHb;Rvx>M*Y?Bh(qr*pRn4K?tVc=YUAYcc}CdRONj{kLSnGc$nH4C&k@;-bj z&cdzJqP6J@$DjM=x!3;RTWS2ze*;i#dn0VMaPS0RS zX1J-~(KF$J&4{_+Xc+UuoWirlCoaA^TiDwDlYVQe#Ra=yn3rDO;IKro? qDYjcGKy4921FxcpG8%ab#RCwB*l1~o7KorJ%50urP_03t*v%M6j@s zXhi2_X+HZj)0tS<40t3`I`Xwi8yqf-H27P&1ajGlb+57&h;CN(~)7YwlwK z7`EK*U@#u(gg689pf74E>>3xqRtapfSwM8YSi6T^4|)ppygC$rhGq3I$83-+XGO<6 z=;|ekjrf@8j_g2qjnz!va1 zi&rtbrvN=&*+ZUjAtK!i%B6Cy$K4IJE>H1iLjd2d2}@+dIv`n_{;__5mLq z9WDO5^~@pDXaU{?yA`qz`0()11wv!A2Cs_U0yzZigB}9B8g@-&O9oq@TZ0#eu9eLe zV2p!HGVi z{l55N87a_bXJ@_OQ!aQ`R+m7w07LdtY|LgFfQ-=anhRY6JQ+I&IVOX7S0UA84h>NP zx-@t+bZR!o4060KYlGi?0$c+cBe#Y}XLT%cN*5v3WnV^1*fpR_44PG-t$T9Pj)#=p zp-#h?&4_JO5Br+}NwhlXqgrk#V9$)TMRUpbMW zHLz4@{+Sg#2(4vvs6=3!CY1%gD=jS}wRO^lfaP+bL!WD9$Oj&k)uC+0Rwz_cIT~N) z=JpF0A3u2^{yjIh|LM)+dx}Fs^R^KFJ<(a63vH>n0LX)`&*w@1OInr=ZNnr%hXz3o z9qJlx{sF7+K!F|x`%D)G^C6U)l{i$NZ1q==lkmUMS%8Zbu6@2 zlO=4r49{kY&r6Y%^(zIf^~;tvjsnuGrr5rky^r<}n{N<|3kz-C z8}yY9X@`T>U9B_W87sAZysn3!wN7CuXoqb%wxMOTY0v~Nem*NxED4?p|mi>Dn3{CU#Q+VNxlXWquq z8tlX7T?w{!2u*{7O){hD0VSzCz|+pRP&9bJY4_%eKho(~W+n;+-Ea>Icke*Nl?E)d*O zI!XNc;_(ySc1mD4$H5q zKKbj03+)&N1^)8i&s|)5u(SB!!JlSeTpp**%}p1jU}FyaSKDFnwR;Zv?~gj{^O=1f zmFDBheZ~$1mvP7l{rVNl$>uk2x>)SKB?iTY_xnFzTI~IFsRIUF zK&GgCBhjfecouZZ(YwQ~^*%Hk5PQ(e2my0!{uy8+Fh|v(W5GimO7uac+ynm<_~7BX z*jEGayWhRj0|qb%D>PjmKEM9-stb}qd5&sqfcO@K>*`E>8f9T($-raLE|(t*IfL5>H2(hTMAL%~6L220l{(%|4F zOGi;?c!h|m!BXI$XBi~Vl?iEm12PA<)bMO*(|H|Rq!vGtfh{#yD|C`(4^L2YX-x73drHQlA-;4rG#)`YnRgGOeOdM8(+tjh^UP9 ztna|JK~Bm3*cu)JF9I!{5P5#1No)~{TH5j+Ms8`^SZ z7XAZ{AHM=e^b}xPbHxp&Oi;6Px{8zx&c3KK=Q=~o@RO4h7nTgt2DK1a?)+TftZTw^ zE>Z3>{P_6QzzJQ703HGkEk8sJ9_97m6da%tedsw<~^0LoM1^ATMce@^Qzjn zW1|_4=$4XFt4*8yz3-$9xAfsHfhTo0$Jjx$74T&5Pbz`a3~vd%5_jC?B?Vqv0i~F00000NkvXXu0mjfBEV%1 literal 3313 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 = props => { - const { dispatchNavigatorState = null } = useNavigatorContext(); + const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext(); const onUserInfoEvent = useCallback((event: UserInfoEvent) => { @@ -28,8 +28,19 @@ export const NavigatorMessageHandler: FC = props = { const parser = event.getParser(); + const roomInfoData = navigatorState.roomInfoData; + roomInfoData.currentRoomOwner = parser.isOwner; + roomInfoData.currentRoomId = parser.roomId; + + dispatchNavigatorState({ + type: NavigatorActions.SET_ROOM_INFO_DATA, + payload: { + roomInfoData: roomInfoData + } + }); + SendMessageHook(new RoomInfoComposer(parser.roomId, true, false)); - }, []); + }, [ navigatorState, dispatchNavigatorState ]); const onRoomInfoEvent = useCallback((event: RoomInfoEvent) => { @@ -37,17 +48,15 @@ export const NavigatorMessageHandler: FC = props = if(parser.roomEnter) { - // this._data.enteredGuestRoom = parser.data; - // this._data.staffPick = parser.data.roomPicker; + const roomInfoData = navigatorState.roomInfoData; + roomInfoData.enteredGuestRoom = parser.data; - // const isCreatedRoom = (this._data.createdRoomId === parser.data.roomId); - - // if(!isCreatedRoom && parser.data.displayRoomEntryAd) - // { - // // display ad - // } - - // this._data.createdRoomId = 0; + dispatchNavigatorState({ + type: NavigatorActions.SET_ROOM_INFO_DATA, + payload: { + roomInfoData: roomInfoData + } + }); } else if(parser.roomForward) { @@ -66,10 +75,17 @@ export const NavigatorMessageHandler: FC = props = } else { - // this._data.enteredGuestRoom = parser.data; - // this._data.staffPick = parser.data.roomPicker; + const roomInfoData = navigatorState.roomInfoData; + roomInfoData.enteredGuestRoom = parser.data; + + dispatchNavigatorState({ + type: NavigatorActions.SET_ROOM_INFO_DATA, + payload: { + roomInfoData: roomInfoData + } + }); } - }, []); + }, [ dispatchNavigatorState, navigatorState ]); const onRoomDoorbellEvent = useCallback((event: RoomDoorbellEvent) => { @@ -146,6 +162,18 @@ export const NavigatorMessageHandler: FC = props = VisitRoom(parser.roomId); }, []); + const onNavigatorHomeRoomEvent = useCallback((event: NavigatorHomeRoomEvent) => + { + const parser = event.getParser(); + + dispatchNavigatorState({ + type: NavigatorActions.SET_HOME_ROOM_ID, + payload: { + homeRoomId: parser.homeRoomId + } + }); + }, [ dispatchNavigatorState ]); + CreateMessageHook(UserInfoEvent, onUserInfoEvent); CreateMessageHook(RoomForwardEvent, onRoomForwardEvent); CreateMessageHook(RoomInfoOwnerEvent, onRoomInfoOwnerEvent); @@ -157,6 +185,7 @@ export const NavigatorMessageHandler: FC = props = CreateMessageHook(NavigatorSearchEvent, onNavigatorSearchEvent); CreateMessageHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent); CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent); + CreateMessageHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent); return null; } diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index e1c1ecb3..123b4044 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -11,6 +11,8 @@ import { NavigatorMessageHandler } from './NavigatorMessageHandler'; import { NavigatorViewProps } from './NavigatorView.types'; import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer'; import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView'; +import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView'; +import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView'; import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView'; import { NavigatorSearchView } from './views/search/NavigatorSearchView'; @@ -18,6 +20,8 @@ export const NavigatorView: FC = props => { const [ isVisible, setIsVisible ] = useState(false); const [ isCreatorOpen, setCreatorOpen ] = useState(false); + const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false); + const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false); const [ navigatorState, dispatchNavigatorState ] = useReducer(NavigatorReducer, initialNavigator); const { needsNavigatorUpdate = false, topLevelContext = null, topLevelContexts = null } = navigatorState; @@ -34,12 +38,20 @@ export const NavigatorView: FC = props => case NavigatorEvent.TOGGLE_NAVIGATOR: setIsVisible(value => !value); return; + case NavigatorEvent.TOGGLE_ROOM_INFO: + setRoomInfoOpen(value => !value); + return; + case NavigatorEvent.TOGGLE_ROOM_LINK: + setRoomLinkOpen(value => !value); + return; } }, []); useUiEvent(NavigatorEvent.SHOW_NAVIGATOR, onNavigatorEvent); useUiEvent(NavigatorEvent.HIDE_NAVIGATOR, onNavigatorEvent); useUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent); + useUiEvent(NavigatorEvent.TOGGLE_ROOM_INFO, onNavigatorEvent); + useUiEvent(NavigatorEvent.TOGGLE_ROOM_LINK, onNavigatorEvent); const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => { @@ -110,6 +122,8 @@ export const NavigatorView: FC = props => } + { isRoomInfoOpen && setRoomInfoOpen(false) } /> } + { isRoomLinkOpen && setRoomLinkOpen(false) } /> } ); } diff --git a/src/views/navigator/common/RoomInfoData.ts b/src/views/navigator/common/RoomInfoData.ts new file mode 100644 index 00000000..3b251b1c --- /dev/null +++ b/src/views/navigator/common/RoomInfoData.ts @@ -0,0 +1,60 @@ +import { RoomDataParser } from 'nitro-renderer'; + +export class RoomInfoData +{ + private _enteredGuestRoom: RoomDataParser = null; + private _createdRoomId: number = 0; + private _currentRoomId: number = 0; + private _currentRoomOwner: boolean = false; + private _canRate: boolean = false; + + public get enteredGuestRoom(): RoomDataParser + { + return this._enteredGuestRoom; + } + + public set enteredGuestRoom(data: RoomDataParser) + { + this._enteredGuestRoom = data; + } + + public get createdRoomId(): number + { + return this._createdRoomId; + } + + public set createdRoomId(id: number) + { + this._createdRoomId = id; + } + + public get currentRoomId(): number + { + return this._currentRoomId; + } + + public set currentRoomId(id: number) + { + this._currentRoomId = id; + } + + public get currentRoomOwner(): boolean + { + return this._currentRoomOwner; + } + + public set currentRoomOwner(flag: boolean) + { + this._currentRoomOwner = flag; + } + + public get canRate(): boolean + { + return this._canRate; + } + + public set canRate(flag: boolean) + { + this._canRate = flag; + } +} diff --git a/src/views/navigator/reducers/NavigatorReducer.tsx b/src/views/navigator/reducers/NavigatorReducer.tsx index f6da40e4..16cdce5d 100644 --- a/src/views/navigator/reducers/NavigatorReducer.tsx +++ b/src/views/navigator/reducers/NavigatorReducer.tsx @@ -1,5 +1,6 @@ import { NavigatorCategoryDataParser, NavigatorSearchResultSet, NavigatorTopLevelContext } from 'nitro-renderer'; import { Reducer } from 'react'; +import { RoomInfoData } from '../common/RoomInfoData'; export interface INavigatorState { @@ -8,6 +9,8 @@ export interface INavigatorState topLevelContexts: NavigatorTopLevelContext[]; searchResult: NavigatorSearchResultSet; categories: NavigatorCategoryDataParser[]; + roomInfoData: RoomInfoData; + homeRoomId: number; } export interface INavigatorAction @@ -19,6 +22,8 @@ export interface INavigatorAction topLevelContexts?: NavigatorTopLevelContext[]; searchResult?: NavigatorSearchResultSet; categories?: NavigatorCategoryDataParser[]; + roomInfoData?: RoomInfoData; + homeRoomId?: number; } } @@ -29,6 +34,8 @@ export class NavigatorActions public static SET_TOP_LEVEL_CONTEXTS: string = 'NA_SET_TOP_LEVEL_CONTEXTS'; public static SET_SEARCH_RESULT: string = 'NA_SET_SEARCH_RESULT'; public static SET_CATEGORIES: string = 'NA_SET_CATEGORIES'; + public static SET_ROOM_INFO_DATA: string = 'NA_SET_ROOM_INFO_DATA'; + public static SET_HOME_ROOM_ID: string = 'NA_SET_HOME_ROOM_ID'; } export const initialNavigator: INavigatorState = { @@ -36,7 +43,9 @@ export const initialNavigator: INavigatorState = { topLevelContext: null, topLevelContexts: null, searchResult: null, - categories: null + categories: null, + roomInfoData: new RoomInfoData(), + homeRoomId: null } export const NavigatorReducer: Reducer = (state, action) => @@ -90,6 +99,16 @@ export const NavigatorReducer: Reducer = (sta return { ...state, categories }; } + case NavigatorActions.SET_ROOM_INFO_DATA: { + const roomInfoData = (action.payload.roomInfoData || state.roomInfoData || null); + + return { ...state, roomInfoData }; + } + case NavigatorActions.SET_HOME_ROOM_ID: { + const homeRoomId = (action.payload.homeRoomId || state.homeRoomId || null); + + return { ...state, homeRoomId }; + } default: return state; } diff --git a/src/views/navigator/views/NavigatorViews.scss b/src/views/navigator/views/NavigatorViews.scss index 60c10722..174445ad 100644 --- a/src/views/navigator/views/NavigatorViews.scss +++ b/src/views/navigator/views/NavigatorViews.scss @@ -2,3 +2,5 @@ @import './search/NavigatorSearchView'; @import './search-result/NavigatorSearchResultView'; @import './search-result-item/NavigatorSearchResultItemView'; +@import './room-info/NavigatorRoomInfoView'; +@import './room-link/NavigatorRoomLinkView'; diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.scss b/src/views/navigator/views/room-info/NavigatorRoomInfoView.scss new file mode 100644 index 00000000..9763a4fc --- /dev/null +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.scss @@ -0,0 +1,20 @@ +.nitro-room-info { + width: 230px; + + .gray { + filter: grayscale(1); + opacity: .5; + } + + .room-thumbnail { + position: relative; + width: 110px; + height: 110px; + margin: 0 auto; + background-image: url(../../../../assets/images/navigator/thumbnail_placeholder.png); + background-repeat: no-repeat; + background-position: center; + background-color: rgba($black, .125); + border-color: $black !important; + } +} diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx new file mode 100644 index 00000000..1f0e656d --- /dev/null +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx @@ -0,0 +1,129 @@ +import classNames from 'classnames'; +import { RoomMuteComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { GetConfiguration } from '../../../../api'; +import { NavigatorEvent } from '../../../../events'; +import { dispatchUiEvent } from '../../../../hooks/events'; +import { SendMessageHook } from '../../../../hooks/messages'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { useNavigatorContext } from '../../context/NavigatorContext'; +import { NavigatorActions } from '../../reducers/NavigatorReducer'; +import { NavigatorRoomInfoViewProps } from './NavigatorRoomInfoView.types'; + +export const NavigatorRoomInfoView: FC = props => +{ + const { onCloseClick = null } = props; + + const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext(); + const { roomInfoData = null, homeRoomId = null } = navigatorState; + const [ roomThumbnail, setRoomThumbnail ] = useState(null); + const [ isRoomPicked, setIsRoomPicked ] = useState(false); + const [ isRoomMuted, setIsRoomMuted ] = useState(false); + + useEffect(() => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + if(roomInfoData.enteredGuestRoom.officialRoomPicRef) + { + setRoomThumbnail(GetConfiguration('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef); + } + + setIsRoomPicked(roomInfoData.enteredGuestRoom.roomPicker); + setIsRoomMuted(roomInfoData.enteredGuestRoom.allInRoomMuted); + }, [ roomInfoData ]); + + const processAction = useCallback((action: string) => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + switch(action) + { + case 'set_home_room': + let newRoomId = -1; + + if(homeRoomId !== roomInfoData.enteredGuestRoom.roomId) + { + newRoomId = roomInfoData.enteredGuestRoom.roomId; + } + + dispatchNavigatorState({ + type: NavigatorActions.SET_HOME_ROOM_ID, + payload: { + homeRoomId: newRoomId + } + }); + + SendMessageHook(new UserHomeRoomComposer(newRoomId)); + return; + case 'toggle_room_link': + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)); + return; + case 'toggle_pick': + setIsRoomPicked(value => !value); + SendMessageHook(new RoomStaffPickComposer(roomInfoData.enteredGuestRoom.roomId)); + return; + case 'toggle_mute': + setIsRoomMuted(value => !value); + SendMessageHook(new RoomMuteComposer()); + return; + case 'close': + onCloseClick(); + return; + } + + }, [ onCloseClick, dispatchNavigatorState, roomInfoData, homeRoomId ]); + + if(!roomInfoData) return null; + + return ( + + processAction('close') } /> + + { roomInfoData.enteredGuestRoom && <> +
+
+ { roomInfoData.enteredGuestRoom.roomName } +
+ processAction('set_home_room') } className={ 'icon icon-house-small cursor-pointer' + classNames({' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } /> +
+
+ { roomInfoData.enteredGuestRoom.showOwner && <> +
{ LocalizeText('navigator.roomownercaption') }
+
+ +
{ roomInfoData.enteredGuestRoom.ownerName }
+
+ } +
+
+ { LocalizeText('navigator.roomrating') } { roomInfoData.enteredGuestRoom.score } +
+
+ { roomInfoData.enteredGuestRoom.tags.map(tag => + { + return
#{ tag }
+ }) } +
+
{ roomInfoData.enteredGuestRoom.description }
+
+ + { roomThumbnail && } +
+
processAction('toggle_room_link') }> + + { LocalizeText('navigator.embed.caption') } +
+ + + + + + + } + + + + ); +}; diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts b/src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts new file mode 100644 index 00000000..a4b6b81b --- /dev/null +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts @@ -0,0 +1,5 @@ + +export class NavigatorRoomInfoViewProps +{ + onCloseClick: () => void; +} diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.scss b/src/views/navigator/views/room-link/NavigatorRoomLinkView.scss new file mode 100644 index 00000000..ae215535 --- /dev/null +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.scss @@ -0,0 +1,14 @@ +.nitro-room-link { + width: 400px; + + .room-thumbnail { + position: relative; + width: 110px; + height: 110px; + background-image: url(../../../../assets/images/navigator/thumbnail_placeholder.png); + background-repeat: no-repeat; + background-position: center; + background-color: rgba($black, .125); + border-color: $black !important; + } +} diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx b/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx new file mode 100644 index 00000000..c36f9d86 --- /dev/null +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx @@ -0,0 +1,70 @@ +import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { GetConfiguration } from '../../../../api'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { useNavigatorContext } from '../../context/NavigatorContext'; +import { NavigatorRoomLinkViewProps } from './NavigatorRoomLinkView.types'; + +export const NavigatorRoomLinkView: FC = props => +{ + const { onCloseClick = null } = props; + const { navigatorState = null } = useNavigatorContext(); + const { roomInfoData = null } = navigatorState; + + const [ roomThumbnail, setRoomThumbnail ] = useState(null); + const [ roomLink, setRoomLink ] = useState(null); + + const elementRef = useRef(); + + useEffect(() => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + if(roomInfoData.enteredGuestRoom.officialRoomPicRef) + { + setRoomThumbnail(GetConfiguration('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef); + } + + const urlPrefix = GetConfiguration('url.prefix'); + const roomLinkRaw = LocalizeText('navigator.embed.src', ['roomId'], [roomInfoData.enteredGuestRoom.roomId.toString()]).replace('${url.prefix}', urlPrefix); + + setRoomLink(roomLinkRaw); + }, [ roomInfoData ]); + + const processAction = useCallback((action: string) => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + switch(action) + { + case 'copy_room_link': + elementRef.current.select(); + document.execCommand('copy'); + return; + case 'close': + onCloseClick(); + return; + } + + }, [onCloseClick, roomInfoData]); + + if(!roomInfoData) return null; + + return ( + + processAction('close') } /> + +
+
+ { roomThumbnail && } +
+
+
+
{ LocalizeText('navigator.embed.headline') }
+
{ LocalizeText('navigator.embed.info') }
+ { roomLink && } +
+ + + ); +}; diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts b/src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts new file mode 100644 index 00000000..3c206b6f --- /dev/null +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts @@ -0,0 +1,5 @@ + +export class NavigatorRoomLinkViewProps +{ + onCloseClick: () => void; +} diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx index 0ce23306..1146b4a4 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,6 +1,8 @@ import classNames from 'classnames'; import { RoomLikeRoomComposer } from 'nitro-renderer'; import { FC, useCallback, useState } from 'react'; +import { NavigatorEvent } from '../../../../events'; +import { dispatchUiEvent } from '../../../../hooks/events'; import { SendMessageHook } from '../../../../hooks/messages'; import { LocalizeText } from '../../../../utils/LocalizeText'; import { useRoomContext } from '../../context/RoomContext'; @@ -13,13 +15,14 @@ export const RoomToolsWidgetView: FC = props => const [ isExpended, setIsExpanded ] = useState(false); const [ isZoomedIn, setIsZoomedIn ] = useState(false); - const [ liked, setLiked ] = useState(false); + const [ isLiked, setIsLiked ] = useState(false); const handleToolClick = useCallback((action: string) => { switch(action) { case 'settings': + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_INFO)); return; case 'zoom': widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn)); @@ -28,15 +31,16 @@ export const RoomToolsWidgetView: FC = props => case 'chat_history': return; case 'like_room': - if(liked) return; + if(isLiked) return; SendMessageHook(new RoomLikeRoomComposer(1)); - setLiked(true); + setIsLiked(true); return; - case 'room_link': + case 'toggle_room_link': + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)); return; } - }, [ isZoomedIn, liked, widgetHandler ]); + }, [ isZoomedIn, isLiked, widgetHandler ]); return (
@@ -50,10 +54,10 @@ export const RoomToolsWidgetView: FC = props =>
handleToolClick('chat_history') }> { LocalizeText('room.chathistory.button.text') }
-
handleToolClick('like_room') }> +
handleToolClick('like_room') }> { LocalizeText('room.like.button.text') }
-
handleToolClick('room_link') }> +
handleToolClick('toggle_room_link') }> { LocalizeText('navigator.embed.caption') }