fix: chat count in landscape and fullscreen

100mslive · Mar 19, 2024 · 6808696 · 6808696
1 parent 49b134d
commit 6808696
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx
@@ -9,7 +9,7 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = () => {
+export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -21,7 +21,7 @@ export const ChatToggle = () => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
           <ChatIcon />
         </IconButton>
       </Tooltip>

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -42,7 +42,7 @@ import { APP_DATA, EMOJI_REACTION_TYPE, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTION
 let hlsPlayer;
 const toastMap = {};
 
-const ToggleChat = () => {
+const ToggleChat = ({ isFullScreen = false }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -51,7 +51,10 @@ const ToggleChat = () => {
   const hmsActions = useHMSActions();
 
   useEffect(() => {
-    match({ sidepane, isMobile, showChat })
+    match({ sidepane, isMobile, showChat, isFullScreen })
+      .with({ isFullScreen: true }, () => {
+        hmsActions.setAppData(APP_DATA.sidePane, '');
+      })
       .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
         toggleChat();
       })
@@ -61,12 +64,13 @@ const ToggleChat = () => {
       .otherwise(() => {
         //do nothing
       });
-  }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
+  }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
   return null;
 };
 const HLSView = () => {
   const videoRef = useRef(null);
   const hlsViewRef = useRef();
+  const { elements } = useRoomLayoutConferencingScreen();
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
@@ -97,6 +101,8 @@ const HLSView = () => {
   const controlsTimerRef = useRef();
   const [seekProgress, setSeekProgress] = useState(false);
   const isFullScreenSupported = screenfull.isEnabled;
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showChat = !!elements?.chat;
 
   const isMobile = useMedia(config.media.md);
   const isLandscape = useIsLandscape();
@@ -589,7 +595,16 @@ const HLSView = () => {
                       }}
                     >
                       <HMSVideoPlayer.Controls.Right>
-                        {isLandscape && <ChatToggle />}
+                        {(isLandscape || (isMobile && isFullScreen)) && showChat && (
+                          <ChatToggle
+                            onClick={() => {
+                              if (isFullScreen) {
+                                toggle();
+                              }
+                              toggleChat();
+                            }}
+                          />
+                        )}
                         {hasCaptions && !isHlsAutoplayBlocked && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
                         {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                           <HLSQualitySelector
@@ -711,7 +726,7 @@ const HLSView = () => {
           </HMSVideoPlayer.Root>
         </Flex>
       </HMSPlayerContext.Provider>
-      <ToggleChat />
+      <ToggleChat isFullScreen={isFullScreen} />
       {isMobile && !isFullScreen && <HLSViewTitle />}
     </Flex>
   );