From 8e66e169c1f540912d36c2f020f840ff82d524b8 Mon Sep 17 00:00:00 2001
From: Ravi theja <ravi.theja@100ms.live>
Date: Tue, 22 Oct 2024 11:32:27 +0530
Subject: [PATCH] fix: chat not shown for hls viewer

---
 .../src/Prebuilt/components/HMSVideo/HMSVideo.jsx           | 6 +++---
 packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx     | 5 ++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
index 5ba399c1d4..d48854ab21 100644
--- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { Flex } from '../../../Layout';
 
-export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
+export const HMSVideo = forwardRef(({ children, isFullScreen, ...props }, videoRef) => {
   const [width, setWidth] = useState('auto');
 
   useEffect(() => {
@@ -22,7 +22,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     return () => {
       videoEl.removeEventListener('loadedmetadata', updatingVideoWidth);
     };
-  }, []);
+  }, [videoRef, width]);
   return (
     <Flex
       data-testid="hms-video"
@@ -33,7 +33,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         transition: 'all 0.3s ease-in-out',
         '@md': {
           '& video': {
-            height: props.isFullScreen ? '' : '$60 !important',
+            height: isFullScreen ? '' : '$60 !important',
           },
         },
         '& video::cue': {
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
index 941e7caec3..405f16fd3c 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -46,7 +46,6 @@ const toastMap = {};
 const ToggleChat = ({ isFullScreen = false }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const showChat = !!elements?.chat;
   const isMobile = useMedia(config.media.md);
   const hmsActions = useHMSActions();
@@ -57,7 +56,7 @@ const ToggleChat = ({ isFullScreen = false }) => {
         hmsActions.setAppData(APP_DATA.sidePane, '');
       })
       .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
-        toggleChat();
+        hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.CHAT);
       })
       .with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
         hmsActions.setAppData(APP_DATA.sidePane, '');
@@ -65,7 +64,7 @@ const ToggleChat = ({ isFullScreen = false }) => {
       .otherwise(() => {
         //do nothing
       });
-  }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
+  }, [sidepane, isMobile, showChat, hmsActions, isFullScreen]);
   return null;
 };
 const HLSView = () => {