fix: chat not shown for hls viewer

100mslive · Oct 22, 2024 · 8e66e16 · 8e66e16
1 parent 970e9cc
commit 8e66e16
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git 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
@@ -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,15 +56,15 @@ 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, '');
  })
  .otherwise(() => {
  //do nothing
  });
- }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
+ }, [sidepane, isMobile, showChat, hmsActions, isFullScreen]);
  return null;
 };
 const HLSView = () => {