@100mslive/roomkit-react 0.2.8-alpha.8 → 0.3.0

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -152,7 +152,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
-          <Flex align="center" justify="end" css={{ mb: '$4' }}>
+          <Flex align="center" justify="end" css={{ mb: '$4' }} onClick={e => e.stopPropagation()}>
             <Popover.Root>
               <Popover.Trigger asChild>
                 <IconButton css={{ border: '1px solid $border_bright' }}>
@@ -273,7 +273,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 css={{
                   alignItems: 'center',
                 }}
-                gap="1"
+                gap="2"
               >
                 {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />

package/src/Prebuilt/components/Chat/EmptyChat.tsx

@@ -7,6 +7,7 @@ import { config as cssConfig } from '../../../Theme';
 import emptyChat from '../../images/empty-chat.svg';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
 export const EmptyChat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
@@ -18,8 +19,11 @@ export const EmptyChat = () => {
       elements.chat.private_chat_enabled ||
       (elements.chat.roles_whitelist && elements.chat.roles_whitelist.length)) &&
     !isLocalPeerBlacklisted;
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
+  const streaming = isMobileHLSStream || isLandscapeStream;
 
-  if (isMobile && elements?.chat?.is_overlay) return <></>;
+  if (isMobile && elements?.chat?.is_overlay && !streaming) return <></>;
 
   return (
     <Flex

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -22,6 +22,8 @@ import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
+import { EmojiReaction } from './EmojiReaction';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
@@ -195,12 +197,22 @@ export const ConferenceScreen = () => {
               alignItems: 'center',
               pr: '$4',
               pb: '$4',
+              position: 'relative',
             }}
             justify="end"
-            gap="1"
+            gap="2"
           >
             {noAVPermissions ? <RaiseHand /> : null}
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
+            <Box
+              css={{
+                position: 'absolute',
+                bottom: '100%',
+                mb: '$4',
+              }}
+            >
+              <EmojiReaction />
+            </Box>
           </Flex>
         )}
         <RoleChangeRequestModal />

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -23,7 +23,7 @@ import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
-export const EmojiReaction = () => {
+export const EmojiReaction = ({ showCard = false }) => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
@@ -68,7 +68,7 @@ export const EmojiReaction = () => {
     return null;
   }
 
-  if ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+  if (showCard) {
     return <EmojiCard sendReaction={sendReaction} />;
   }
   return (

package/src/Prebuilt/components/Footer/RoleOptions.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   HMSPeer,
   selectPermissions,
   selectRoleByRoleName,
+  selectTracksMap,
   useHMSActions,
   useHMSStore,
-  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import {
   MicOffIcon,
@@ -32,12 +33,59 @@ const optionTextCSS = {
   whiteSpace: 'nowrap',
 };
 
-const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleName: string }) => {
-  const vanillaStore = useHMSVanillaStore();
-  const store = vanillaStore.getState();
-  const hmsActions = useHMSActions();
+const DropdownWrapper = ({ children }: { children: React.ReactNode }) => {
+  const [openOptions, setOpenOptions] = useState(false);
+  if (React.Children.toArray(children).length === 0) {
+    return null;
+  }
+  return (
+    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
+      <Dropdown.Trigger
+        data-testid="role_group_options"
+        onClick={e => e.stopPropagation()}
+        className="role_actions"
+        asChild
+        css={{
+          p: '$1',
+          r: '$0',
+          c: '$on_surface_high',
+          visibility: openOptions ? 'visible' : 'hidden',
+          '&:hover': {
+            c: '$on_surface_medium',
+          },
+          '@md': {
+            visibility: 'visible',
+          },
+        }}
+      >
+        <Flex>
+          <VerticalMenuIcon />
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        onClick={e => e.stopPropagation()}
+        css={{ w: 'max-content', bg: '$surface_default', py: 0 }}
+        align="end"
+      >
+        {children}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+};
+
+export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
   const permissions = useHMSStore(selectPermissions);
+  const hmsActions = useHMSActions();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
+  const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
   const role = useHMSStore(selectRoleByRoleName(roleName));
+  const tracks = useHMSStore(selectTracksMap);
+  if (!role) {
+    return null;
+  }
+  const canPublishAudio = role.publishParams.allowed.includes('audio');
+  const canPublishVideo = role.publishParams.allowed.includes('video');
 
   let isVideoOnForSomePeers = false;
   let isAudioOnForSomePeers = false;
@@ -46,8 +94,8 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
     if (peer.isLocal) {
       return;
     }
-    const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled;
-    const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled;
+    const isAudioOn = !!peer.audioTrack && tracks[peer.audioTrack]?.enabled;
+    const isVideoOn = !!peer.videoTrack && tracks[peer.videoTrack]?.enabled;
     isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
     isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
   });
@@ -60,75 +108,11 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
     }
   };
 
-  if (!role) {
-    return null;
-  }
-
-  return (
-    <>
-      {role.publishParams.allowed.includes('audio') && (
-        <>
-          {isAudioOnForSomePeers && permissions?.mute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
-              <MicOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Audio for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {!isAudioOnForSomePeers && permissions?.unmute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
-              <MicOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Request to Unmute Audio for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-        </>
-      )}
-
-      {role.publishParams.allowed.includes('video') && (
-        <>
-          {isVideoOnForSomePeers && permissions?.mute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
-              <VideoOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Video for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {!isVideoOnForSomePeers && permissions?.unmute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
-              <VideoOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Request to Unmute Video for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-        </>
-      )}
-    </>
-  );
-};
-
-export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
-  const [openOptions, setOpenOptions] = useState(false);
-  const permissions = useHMSStore(selectPermissions);
-  const hmsActions = useHMSActions();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
-  const canMuteOrUnmute = permissions?.mute || permissions?.unmute;
-  const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
-  const role = useHMSStore(selectRoleByRoleName(roleName));
-
   // on stage and off stage roles
   const canRemoveRoleFromRoom =
     permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
 
   if (
-    !(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) ||
     peerList.length === 0 ||
     // if only local peer is present no need to show any options
     (peerList.length === 1 && peerList[0].isLocal) ||
@@ -157,60 +141,75 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   };
 
   return (
-    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
-      <Dropdown.Trigger
-        data-testid="role_group_options"
-        onClick={e => e.stopPropagation()}
-        className="role_actions"
-        asChild
-        css={{
-          p: '$1',
-          r: '$0',
-          c: '$on_surface_high',
-          visibility: openOptions ? 'visible' : 'hidden',
-          '&:hover': {
-            c: '$on_surface_medium',
-          },
-          '@md': {
-            visibility: 'visible',
-          },
-        }}
-      >
-        <Flex>
-          <VerticalMenuIcon />
-        </Flex>
-      </Dropdown.Trigger>
-      <Dropdown.Content
-        onClick={e => e.stopPropagation()}
-        css={{ w: 'max-content', bg: '$surface_default', py: 0 }}
-        align="end"
-      >
-        {canRemoveRoleFromStage && (
-          <Dropdown.Item
-            css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
-            onClick={removeAllFromStage}
-          >
-            <PersonRectangleIcon />
-            <Text variant="sm" css={optionTextCSS}>
-              Remove all from Stage
-            </Text>
-          </Dropdown.Item>
-        )}
-
-        {canMuteOrUnmute && <MuteUnmuteOption peerList={peerList} roleName={roleName} />}
-
-        {canRemoveRoleFromRoom && (
-          <Dropdown.Item
-            css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
-            onClick={removePeersFromRoom}
-          >
-            <RemoveUserIcon />
-            <Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
-              Remove all from Room
-            </Text>
-          </Dropdown.Item>
-        )}
-      </Dropdown.Content>
-    </Dropdown.Root>
+    <DropdownWrapper>
+      {canRemoveRoleFromStage ? (
+        <Dropdown.Item
+          css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
+          onClick={removeAllFromStage}
+        >
+          <PersonRectangleIcon />
+          <Text variant="sm" css={optionTextCSS}>
+            Remove all from Stage
+          </Text>
+        </Dropdown.Item>
+      ) : null}
+
+      {match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
+        .with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
+              <MicOffIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Mute Audio for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
+              <MicOnIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Request to Unmute Audio for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .otherwise(() => null)}
+      {match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
+        .with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
+              <VideoOffIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Mute Video for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
+              <VideoOnIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Request to Unmute Video for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .otherwise(() => null)}
+
+      {canRemoveRoleFromRoom ? (
+        <Dropdown.Item
+          css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
+          onClick={removePeersFromRoom}
+        >
+          <RemoveUserIcon />
+          <Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
+            Remove all from Room
+          </Text>
+        </Dropdown.Item>
+      ) : null}
+    </DropdownWrapper>
   );
 };

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -1,17 +1,20 @@
 import React, { forwardRef } from 'react';
-import { useMedia } from 'react-use';
-import { config, Flex } from '../../../';
-import { useIsLandscape } from '../../common/hooks';
+import { Flex } from '../../../Layout';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia(config.media.md);
   return (
     <Flex
       data-testid="hms-video"
       css={{
         size: '100%',
         position: 'relative',
+        justifyContent: 'center',
+        '@md': {
+          height: 'auto',
+          '& video': {
+            height: '$60 !important',
+          },
+        },
         '& video::cue': {
           color: 'white',
           whiteSpace: 'pre-line',
@@ -34,16 +37,16 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     >
       <video
         style={{
-          flex: '1 1 0',
           margin: '0 auto',
-          minHeight: '0',
           objectFit: 'contain',
-          width: 'inherit',
-          height: isLandscape || isMobile ? '100%' : '',
-          position: isLandscape || isMobile ? 'absolute' : '',
+          width: 'auto',
+          height: 'auto',
+          maxWidth: '100%',
+          maxHeight: '100%',
         }}
         ref={videoRef}
         playsInline
+        disablePictureInPicture
       />
       {children}
     </Flex>

package/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx

@@ -17,7 +17,7 @@ import { SIDE_PANE_OPTIONS } from '../../common/constants';
 	half page will have chat or participant view
 */
 export const HLSViewTitle = () => {
-  const { title, details } = useRoomLayoutHeader();
+  const { title, details, description } = useRoomLayoutHeader();
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
 
@@ -74,9 +74,11 @@ export const HLSViewTitle = () => {
         ) : null}
         <Flex>
           <RoomDetailsRow details={details} />
-          <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
-            &nbsp;...more
-          </Text>
+          {description ? (
+            <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
+              &nbsp;...more
+            </Text>
+          ) : null}
         </Flex>
       </Flex>
     </Flex>

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -1,54 +1,66 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
 import { getPercentage } from './utils';
 
-export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
+export const VideoProgress = ({
+  seekProgress,
+  setSeekProgress,
+}: {
+  seekProgress: boolean;
+  setSeekProgress: (value: boolean) => void;
+}) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState<number>(0);
   const [bufferProgress, setBufferProgress] = useState(0);
   const videoEl = hlsPlayer?.getVideoElement();
 
-  const onValueChange = (time: number) => {
-    hlsPlayer?.seekTo(time);
-  };
+  const setProgress = useCallback(() => {
+    if (!videoEl) {
+      return;
+    }
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration));
+    let bufferProgress = 0;
+    if (videoEl.buffered.length > 0) {
+      bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
+    }
+    setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
+    setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
+  }, [videoEl]);
+  const timeupdateHandler = useCallback(() => {
+    if (!videoEl || seekProgress) {
+      return;
+    }
+    setProgress();
+  }, [seekProgress, setProgress, videoEl]);
   useEffect(() => {
     if (!videoEl) {
       return;
     }
-    const timeupdateHandler = () => {
-      if (!videoEl) {
-        return;
-      }
-      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
-      let bufferProgress = 0;
-      if (videoEl.buffered.length > 0) {
-        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration));
-      }
-
-      setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
-      setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
-    };
     videoEl.addEventListener('timeupdate', timeupdateHandler);
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);
     };
-  }, [videoEl]);
+  }, [timeupdateHandler, videoEl]);
 
   const onProgress = (progress: number[]) => {
     const progress1 = Math.floor(getPercentage(progress[0], 100));
     const videoEl = hlsPlayer?.getVideoElement();
-    const currentTime = (progress1 * (videoEl?.duration || 0)) / 100;
-    if (onValueChange) {
-      onValueChange(currentTime);
+    if (!videoEl) {
+      return;
     }
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const currentTime = (progress1 * duration) / 100;
+    hlsPlayer?.seekTo(currentTime);
+    setProgress();
   };
 
   if (!videoEl) {
     return null;
   }
   return (
-    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch', pointerEvents: isDvr ? '' : 'none' }}>
+    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>
       <Slider
         id="video-actual-rest"
         css={{
@@ -56,7 +68,6 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
           h: '$2',
           zIndex: 1,
           transition: `all .2s ease .5s`,
-          pointerEvents: isDvr ? '' : 'none',
         }}
         min={0}
         max={100}
@@ -64,7 +75,9 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
         value={[videoProgress]}
         showTooltip={false}
         onValueChange={onProgress}
-        thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }}
+        onPointerDown={() => setSeekProgress(true)}
+        onPointerUp={() => setSeekProgress(false)}
+        thumbStyles={{ w: '$6', h: '$6' }}
       />
       <Box
         id="video-buffer"

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -343,7 +343,7 @@ export const MwebOptions = ({
             mx: '$4',
           }}
         >
-          <EmojiReaction />
+          <EmojiReaction showCard />
         </Box>
       )}
       {showRecordingOn && (

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { RefreshIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
@@ -22,21 +23,26 @@ export const MwebLandscapePrompt = () => {
     }
 
     if (!window.screen?.orientation) {
-      setShowMwebLandscapePrompt(isLandscape);
+      setShowMwebLandscapePrompt(isLandscape && !isLandscapeHLSStream);
       return;
     }
     const handleRotation = () => {
       const angle = window.screen.orientation.angle;
       const type = window.screen.orientation.type || '';
       // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape);
+      setShowMwebLandscapePrompt(
+        match({ angle, isLandscapeHLSStream, isLandscape, type })
+          .with({ isLandscapeHLSStream }, () => false)
+          .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
+          .otherwise(() => isLandscape),
+      );
     };
     handleRotation();
     window.screen.orientation.addEventListener('change', handleRotation);
     return () => {
       window.screen.orientation.removeEventListener('change', handleRotation);
     };
-  }, [isLandscape]);
+  }, [isLandscape, isLandscapeHLSStream]);
 
   if (isLandscapeHLSStream) {
     return null;

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -16,7 +16,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   if (!precise && (hours || minutes)) {
     return formattedTime;
   }
-  formattedTime += `${minutes >= 1 ? Math.floor(seconds) : seconds.toFixed(3)}s`;
+  formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`;
 
   return formattedTime;
 };

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -41,9 +41,8 @@ const ParticipantCount = ({ count }: { count: number }) => {
 
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
-  hideControls?: boolean;
   hideTab?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = false }) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
@@ -85,7 +84,6 @@ export const SidePaneTabs = React.memo<{
         css={{
           color: '$on_primary_high',
           h: '100%',
-          marginTop: hideControls && isOverlayChat ? '$17' : '0',
           transition: 'margin 0.3s ease-in-out',
           position: 'relative',
         }}
@@ -103,7 +101,6 @@ export const SidePaneTabs = React.memo<{
       css={{
         color: '$on_primary_high',
         h: '100%',
-        marginTop: hideControls && isOverlayChat ? '$17' : '0',
         transition: 'margin 0.3s ease-in-out',
       }}
     >