Spectator Mode

src/components/room/RoomView.scss

@@ -1 +1,2 @@
+@import "./spectator/RoomSpectatorView";
 @import "./widgets/RoomWidgets";

src/components/room/RoomView.tsx

@@ -5,12 +5,14 @@ import { Base } from '../../common';
 import { UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks';
 import { RoomColorView } from './RoomColorView';
 import { RoomContextProvider } from './RoomContext';
+import { RoomSpectatorView } from './spectator/RoomSpectatorView';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
 
 export const RoomView: FC<{}> = props =>
 {
     const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
     const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
+    const [ isSpectator, setIsSpectator ] = useState<boolean>(false);
     const elementRef = useRef<HTMLDivElement>();
 
     const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
@@ -143,6 +145,7 @@ export const RoomView: FC<{}> = props =>
         stage.addChild(displayObject);
 
         SetActiveRoomId(roomSession.roomId);
+        setIsSpectator(roomSession.isSpectator);
     }, [ roomSession, resize ]);
 
     useEffect(() =>
@@ -184,6 +187,7 @@ export const RoomView: FC<{}> = props =>
                     <>
                         <RoomColorView />
                         <RoomWidgetsView />
+                        { isSpectator && <RoomSpectatorView /> }
                     </> }
             </Base>
         </RoomContextProvider>

src/components/room/spectator/RoomSpectatorView.scss

@@ -0,0 +1,26 @@
+.room-spectator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 50px);
+  user-select: none;
+  pointer-events: none;
+  opacity: 0.8;
+  background: url("../../../assets/images/room-spectator/room_spectator_top_left.png") no-repeat top left,
+              url("../../../assets/images/room-spectator/room_spectator_top_right.png") no-repeat top right,
+              url("../../../assets/images/room-spectator/room_spectator_bottom_right.png") no-repeat bottom right,
+              url("../../../assets/images/room-spectator/room_spectator_bottom_left.png") no-repeat bottom left,
+              url("../../../assets/images/room-spectator/room_spectator_middle_left.png") repeat-y left,
+              url("../../../assets/images/room-spectator/room_spectator_middle_top.png") repeat-x top,
+              url("../../../assets/images/room-spectator/room_spectator_middle_right.png") repeat-y right,
+              url("../../../assets/images/room-spectator/room_spectator_middle_bottom.png") repeat-x bottom
+  ;
+}
+/*
+border-image-slice: 91 91 110 91 fill;
+border-image-width: 79px 79px 79px 79px;
+border-image-outset: 0px 0px 0px 0px;
+border-image-repeat: repeat repeat;
+border-image-source: url("../../../assets/images/room-spectator/room_spectator.png");
+*/

src/components/room/spectator/RoomSpectatorView.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+export const RoomSpectatorView: FC<{}> = props =>
+{
+    return (
+        <div className="room-spectator"></div>
+    );
+};

src/components/room/widgets/chat-input/ChatInputView.tsx

@@ -1,7 +1,7 @@
 import { HabboClubLevelEnum, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetFloodControlEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
+import { GetClubMemberLevel, GetConfiguration, GetRoomSession, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetFloodControlEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
 import { Text } from '../../../../common';
 import { UseEventDispatcherHook } from '../../../../hooks';
 import { useRoomContext } from '../../RoomContext';
@@ -355,6 +355,8 @@ export const ChatInputView: FC<{}> = props =>
         inputRef.current.parentElement.dataset.value = chatValue;
     }, [ chatValue ]);
 
+    if(GetRoomSession().isSpectator) return null;
+
     return (
         createPortal(
             <div className="nitro-chat-input-container">