@100mslive/roomkit-react 0.2.8-alpha.5 → 0.2.8-alpha.6

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,5 +1,6 @@
 // @ts-check
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { match } from 'ts-pattern';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, Text } from '../../../../';
@@ -92,20 +93,30 @@ export const QuestionCard = ({
         <Text
           variant="caption"
           css={{
-            color:
-              respondedToQuiz && !isLive
-                ? isCorrectAnswer
-                  ? '$alert_success'
-                  : '$alert_error_default'
-                : '$on_surface_low',
+            color: match({ respondedToQuiz, isLive, isCorrectAnswer })
+              .when(
+                ({ respondedToQuiz, isLive }) => respondedToQuiz && !isLive,
+                ({ isCorrectAnswer }) => (isCorrectAnswer ? '$alert_success' : '$alert_error_default'),
+              )
+              .otherwise(() => '$on_surface_low'),
             fontWeight: '$semiBold',
             display: 'flex',
             alignItems: 'center',
             gap: '$4',
           }}
         >
-          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={16} width={16} /> : null}
-          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={16} width={16} /> : null}
+          {match({ respondedToQuiz, pollEnded, isCorrectAnswer })
+            .when(
+              ({ respondedToQuiz, pollEnded }) => respondedToQuiz && pollEnded,
+              ({ isCorrectAnswer }) => {
+                return isCorrectAnswer ? (
+                  <CheckCircleIcon height={16} width={16} />
+                ) : (
+                  <CrossCircleIcon height={16} width={16} />
+                );
+              },
+            )
+            .otherwise(() => null)}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
       </Flex>

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon } from '@100mslive/react-icons';
-// @ts-ignore: No implicit Any
 import { Chat } from './Chat/Chat';
 import { PaginatedParticipants } from './Footer/PaginatedParticipants';
 import { ParticipantList } from './Footer/ParticipantList';
 import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
 import { Tooltip } from '../../Tooltip';
 import { ChatSettings } from './ChatSettings';
-// @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
@@ -19,12 +18,15 @@ import { getFormattedCount } from '../common/utils';
 import { SIDE_PANE_OPTIONS } from '../common/constants';
 
 const tabTriggerCSS = {
-  color: '$on_surface_high',
+  color: '$on_surface_low',
   p: '$4',
   fontWeight: '$semiBold',
   fontSize: '$sm',
   w: '100%',
   justifyContent: 'center',
+  '&[data-state="active"]': {
+    color: '$on_surface_high',
+  },
 };
 
 const ParticipantCount = ({ count }: { count: number }) => {
@@ -60,13 +62,16 @@ export const SidePaneTabs = React.memo<{
   const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
 
   useEffect(() => {
-    if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
-      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
-    } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
-      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
-    } else if (!showChat && !showParticipants) {
-      resetSidePane();
-    }
+    match({ activeTab, showChat, showParticipants })
+      .with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
+        setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
+      })
+      .with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
+        setActiveTab(SIDE_PANE_OPTIONS.CHAT);
+      })
+      .with({ showChat: false, showParticipants: false }, () => {
+        resetSidePane();
+      });
   }, [showChat, activeTab, showParticipants, resetSidePane]);
 
   useEffect(() => {
@@ -102,11 +107,10 @@ export const SidePaneTabs = React.memo<{
         transition: 'margin 0.3s ease-in-out',
       }}
     >
-      {isOverlayChat && isChatOpen && showChat ? (
-        <Chat />
-      ) : (
-        <>
-          {hideTabs ? (
+      {match({ isOverlayChat, isChatOpen, showChat, hideTabs })
+        .with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => <Chat />)
+        .with({ hideTabs: true }, () => {
+          return (
             <>
               <Flex justify="between" css={{ w: '100%', '&:empty': { display: 'none' } }}>
                 <Text
@@ -159,7 +163,10 @@ export const SidePaneTabs = React.memo<{
                 <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
               )}
             </>
-          ) : (
+          );
+        })
+        .otherwise(() => {
+          return (
             <Tabs.Root
               value={activeTab}
               onValueChange={setActiveTab}
@@ -170,24 +177,10 @@ export const SidePaneTabs = React.memo<{
             >
               <Flex css={{ w: '100%' }}>
                 <Tabs.List css={{ flexGrow: 1, borderRadius: '$2', bg: '$surface_default' }}>
-                  <Tabs.Trigger
-                    value={SIDE_PANE_OPTIONS.CHAT}
-                    onClick={toggleChat}
-                    css={{
-                      ...tabTriggerCSS,
-                      color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
-                    }}
-                  >
+                  <Tabs.Trigger value={SIDE_PANE_OPTIONS.CHAT} onClick={toggleChat} css={tabTriggerCSS}>
                     {chat_title}
                   </Tabs.Trigger>
-                  <Tabs.Trigger
-                    value={SIDE_PANE_OPTIONS.PARTICIPANTS}
-                    onClick={toggleParticipants}
-                    css={{
-                      ...tabTriggerCSS,
-                      color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
-                    }}
-                  >
+                  <Tabs.Trigger value={SIDE_PANE_OPTIONS.PARTICIPANTS} onClick={toggleParticipants} css={tabTriggerCSS}>
                     Participants&nbsp;
                     <ParticipantCount count={peerCount} />
                   </Tabs.Trigger>
@@ -217,9 +210,8 @@ export const SidePaneTabs = React.memo<{
                 <Chat />
               </Tabs.Content>
             </Tabs.Root>
-          )}
-        </>
-      )}
+          );
+        })}
     </Flex>
   );
 });

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { match, P } from 'ts-pattern';
 import {
   selectHMSStats,
   selectLocalPeerID,
@@ -188,11 +189,15 @@ const LocalPeerStats = () => {
 };
 
 const TrackStats = ({ trackID, layer, local }) => {
-  const selector = layer
-    ? selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID)
-    : local
-    ? selectHMSStats.localAudioTrackStatsByID(trackID)
-    : selectHMSStats.trackStatsByID(trackID);
+  const selector = match({ trackID, layer, local })
+    .with(
+      {
+        layer: P.when(layer => !!layer),
+      },
+      () => selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID),
+    )
+    .with({ local: P.when(local => !!local) }, () => selectHMSStats.localAudioTrackStatsByID(trackID))
+    .otherwise(() => selectHMSStats.trackStatsByID(trackID));
   const stats = useHMSStatsStore(selector);
   if (!stats) {
     return null;
@@ -215,7 +220,10 @@ const TrackStats = ({ trackID, layer, local }) => {
           {!inbound && <StatsRow label="Quality Limitation Reason" value={stats.qualityLimitationReason} />}
         </>
       )}
-      <StatsRow label="Round Trip Time" value={stats.roundTripTime ? `${stats.roundTripTime * 1000} ms` : '-'} />
+      <StatsRow
+        label="Round Trip Time"
+        value={stats.roundTripTime ? `${(stats.roundTripTime * 1000).toFixed(3)} ms` : '-'}
+      />
     </Flex>
   );
 };

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -20,7 +20,7 @@ export const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onCli
       onClick={onClick}
     >
       <Text css={{ alignSelf: 'center', p: '$4' }}>
-        {imgSrc ? <img src={imgSrc} height={40} width={40} /> : <Icon width={40} height={40} />}
+        {imgSrc ? <img src={imgSrc} height={40} width={40} alt="Streaming" /> : <Icon width={40} height={40} />}
       </Text>
       <Box css={{ flex: '1 1 0', mx: '$8' }}>
         <Text variant="h6" css={{ mb: '$4' }}>

package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx

@@ -289,7 +289,7 @@ export const TileMenuContent = ({
           data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
         >
           {isVideoEnabled ? <VideoOnIcon height={20} width={20} /> : <VideoOffIcon height={20} width={20} />}
-          <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
+          <span>{isVideoEnabled ? 'Mute Video' : 'Request to Unmute Video'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
 
@@ -304,7 +304,7 @@ export const TileMenuContent = ({
           data-testid={isAudioEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
         >
           {isAudioEnabled ? <MicOnIcon height={20} width={20} /> : <MicOffIcon height={20} width={20} />}
-          <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
+          <span>{isAudioEnabled ? 'Mute Audio' : 'Request to Unmute Audio'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
 

package/src/Prebuilt/components/Toast/ToastBatcher.js

@@ -3,6 +3,7 @@ import { ToastManager } from './ToastManager';
 
 export const ToastBatcher = {
   toastsType: new Map(),
+  toastCache: {},
   showToastInternal({ notification, duration, type }) {
     let notificationType = type;
     if (!type) {
@@ -40,7 +41,13 @@ export const ToastBatcher = {
   },
   showToast({ notification, duration = 3000, type }) {
     try {
-      this.showToastInternal({ notification, duration, type });
+      if (!this.toastCache[notification.id]) {
+        this.showToastInternal({ notification, duration, type });
+      }
+      this.toastCache[notification.id] = true;
+      if (Object.keys(this.toastCache).length > 100) {
+        this.toastCache = {};
+      }
     } catch (err) {
       console.debug('Notifications', err);
     }

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -123,6 +123,23 @@ export const ToastConfig = {
     },
   },
   RAISE_HAND: {
+    single: notification => {
+      return {
+        title: `${notification.data?.name} raised hand`,
+        icon: <HandIcon />,
+      };
+    },
+    multiple: notifications => {
+      const count = new Set(notifications.map(notification => notification.data?.id)).size;
+      return {
+        title: `${notifications[notifications.length - 1].data?.name} ${
+          count > 1 ? `${count} and others` : ''
+        } raised hand`,
+        icon: <HandIcon />,
+      };
+    },
+  },
+  RAISE_HAND_HLS: {
     single: notification => {
       return {
         title: `${notification.data?.name} raised hand`,

package/src/Prebuilt/layouts/HLSView.jsx

@@ -14,7 +14,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { ColoredHandIcon, GoLiveIcon, PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, GoLiveIcon } from '@100mslive/react-icons';
 import { ChatToggle } from '../components/Footer/ChatToggle';
 import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
 import { HMSVideoPlayer } from '../components/HMSVideo';
@@ -24,6 +24,7 @@ import { HLSCaptionSelector } from '../components/HMSVideo/HLSCaptionSelector';
 import { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';
 import { HLSViewTitle } from '../components/HMSVideo/MwebHLSViewTitle';
 import { HMSPlayerContext } from '../components/HMSVideo/PlayerContext';
+import { LeaveRoom } from '../components/Leave/LeaveRoom';
 import { ToastManager } from '../components/Toast/ToastManager';
 import { Button } from '../../Button';
 import { IconButton } from '../../IconButton';
@@ -58,6 +59,7 @@ const HLSView = () => {
   const [hasCaptions, setHasCaptions] = useState(false);
   const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);
   const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);
+  const [isSeekEnabled, setIsSeekEnabled] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
@@ -276,13 +278,13 @@ const HLSView = () => {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
       }
-      controlsTimerRef.current = setTimeout(() => {
-        setControlsVisible(false);
-      }, 5000);
     }
     if (!isFullScreen && controlsTimerRef.current) {
       clearTimeout(controlsTimerRef.current);
     }
+    controlsTimerRef.current = setTimeout(() => {
+      setControlsVisible(false);
+    }, 5000);
     return () => {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
@@ -290,31 +292,43 @@ const HLSView = () => {
     };
   }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
 
-  const onTouchHandler = useCallback(
+  const onSeekTo = useCallback(seek => {
+    hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
+  }, []);
+  const onDoubleClickHandler = useCallback(
     event => {
-      event.preventDefault();
-      // logic for invisible when tapping
-      if (event.type === 'ontouchstart' && controlsVisible) {
-        setControlsVisible(false);
+      if (!(isMobile || isLandscape)) {
         return;
       }
-      // normal scemnario
-      if (event.type === 'ontouchstart' || qualityDropDownOpen) {
-        setControlsVisible(true);
-        return;
-      }
-      if (isFullScreen && !controlsVisible && event.type === 'touchmove') {
-        setControlsVisible(true);
-        if (controlsTimerRef.current) {
-          clearTimeout(controlsTimerRef.current);
-        }
+      const sidePercentage = (event.screenX * 100) / event.target.clientWidth;
+      setIsSeekEnabled(true);
+      // there is space for pause/unpause button
+      if (sidePercentage < 45) {
+        onSeekTo(-10);
+      } else {
+        onSeekTo(10);
       }
+      setTimeout(() => {
+        setIsSeekEnabled(false);
+      }, 200);
     },
-    [controlsVisible, isFullScreen, qualityDropDownOpen],
+    [isLandscape, isMobile, onSeekTo],
   );
+  const onClickHandler = useCallback(() => {
+    if (!(isMobile || isLandscape)) {
+      return;
+    }
+    setControlsVisible(value => !value);
+    if (controlsTimerRef.current) {
+      clearTimeout(controlsTimerRef.current);
+    }
+  }, [isLandscape, isMobile]);
   const onHoverHandler = useCallback(
     event => {
-      // normal scemnario
+      event.preventDefault();
+      if (isMobile || isLandscape) {
+        return;
+      }
       if (event.type === 'mouseenter' || qualityDropDownOpen) {
         setControlsVisible(true);
         return;
@@ -328,7 +342,7 @@ const HLSView = () => {
         }
       }
     },
-    [controlsVisible, isFullScreen, qualityDropDownOpen],
+    [controlsVisible, isFullScreen, isLandscape, isMobile, qualityDropDownOpen],
   );
 
   return (
@@ -338,8 +352,9 @@ const HLSView = () => {
       ref={hlsViewRef}
       direction={isMobile || isLandscape ? 'column' : 'row'}
       css={{
-        w: sidepane !== '' && isLandscape ? '55%' : '100%',
+        w: sidepane !== '' && isLandscape ? '' : '100%',
         h: sidepane !== '' && isMobile ? '36%' : '100%',
+        flex: '1 1 0',
       }}
     >
       {hlsUrl && !streamEnded ? (
@@ -357,7 +372,9 @@ const HLSView = () => {
                 margin: '0 auto',
               }}
             >
-              <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+              {!(isMobile || isLandscape) && (
+                <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+              )}
               {showLoader && (
                 <Flex
                   align="center"
@@ -374,49 +391,55 @@ const HLSView = () => {
                 onMouseEnter={onHoverHandler}
                 onMouseMove={onHoverHandler}
                 onMouseLeave={onHoverHandler}
-                onTouchStart={onTouchHandler}
-                onTouchMove={onTouchHandler}
+                onClick={onClickHandler}
+                onDoubleClick={e => {
+                  onDoubleClickHandler(e);
+                }}
               >
                 <>
                   {isMobile || isLandscape ? (
                     <>
                       {!showLoader && (
-                        <Box
+                        <Flex
+                          align="center"
+                          justify="center"
                           css={{
-                            position: 'absolute',
-                            top: '40%',
-                            left: '50%',
-                            transform: 'translateY(-40%) translateX(-50%)',
-                            padding: '$4',
+                            bg: '#00000066',
                             display: 'inline-flex',
-                            r: '$round',
-                            gap: '$1',
-                            bg: 'rgba(0, 0, 0, 0.6)',
+                            gap: '$2',
                             zIndex: 1,
+                            size: '100%',
                             visibility: controlsVisible ? `` : `hidden`,
                             opacity: controlsVisible ? `1` : '0',
                           }}
                         >
-                          {isPaused ? (
-                            <IconButton
-                              onClick={async () => {
-                                await hlsPlayer?.play();
-                              }}
-                              data-testid="play_btn"
-                            >
-                              <PlayIcon width="48px" height="48px" />
-                            </IconButton>
-                          ) : (
-                            <IconButton
-                              onClick={async () => {
-                                await hlsPlayer?.pause();
-                              }}
-                              data-testid="pause_btn"
-                            >
-                              <PauseIcon width="48px" height="48px" />
-                            </IconButton>
-                          )}
-                        </Box>
+                          <HMSVideoPlayer.Seeker
+                            title="backward"
+                            css={{
+                              visibility: isSeekEnabled ? `` : `hidden`,
+                              opacity: isSeekEnabled ? `1` : '0',
+                            }}
+                          >
+                            <BackwardArrowIcon width={32} height={32} />
+                          </HMSVideoPlayer.Seeker>
+                          <Box
+                            css={{
+                              bg: 'rgba(0, 0, 0, 0.6)',
+                              r: '$round',
+                            }}
+                          >
+                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} width={48} height={48} />
+                          </Box>
+                          <HMSVideoPlayer.Seeker
+                            title="forward"
+                            css={{
+                              visibility: isSeekEnabled ? `` : `hidden`,
+                              opacity: isSeekEnabled ? `1` : '0',
+                            }}
+                          >
+                            <ForwardArrowIcon width={32} height={32} />
+                          </HMSVideoPlayer.Seeker>
+                        </Flex>
                       )}
                       <Flex
                         ref={controlsRef}
@@ -429,6 +452,7 @@ const HLSView = () => {
                           left: '0',
                           width: '100%',
                           flexShrink: 0,
+                          zIndex: 1,
                           visibility: controlsVisible ? `` : `hidden`,
                           opacity: controlsVisible ? `1` : '0',
                         }}
@@ -438,10 +462,15 @@ const HLSView = () => {
                             p: '$4 $8',
                           }}
                         >
+                          <HMSVideoPlayer.Controls.Left>
+                            <LeaveRoom screenType={screenType} />
+                          </HMSVideoPlayer.Controls.Left>
                           <HMSVideoPlayer.Controls.Right>
                             {isLandscape && <ChatToggle />}
-                            {hasCaptions && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
-                            {availableLayers.length > 0 ? (
+                            {hasCaptions && !isHlsAutoplayBlocked && (
+                              <HLSCaptionSelector isEnabled={isCaptionEnabled} />
+                            )}
+                            {availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                               <HLSQualitySelector
                                 layers={availableLayers}
                                 onOpenChange={setQualityDropDownOpen}
@@ -451,6 +480,7 @@ const HLSView = () => {
                                 isAuto={isUserSelectedAuto}
                               />
                             ) : null}
+                            <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
                           </HMSVideoPlayer.Controls.Right>
                         </HMSVideoPlayer.Controls.Root>
                       </Flex>
@@ -458,13 +488,14 @@ const HLSView = () => {
                   ) : null}
                   <Flex
                     ref={controlsRef}
-                    direction="column"
+                    direction={isMobile ? 'columnReverse' : 'column'}
                     justify="end"
                     align="start"
                     css={{
                       position: 'absolute',
                       bottom: '0',
                       left: '0',
+                      zIndex: 1,
                       background:
                         isMobile || isLandscape
                           ? ''
@@ -477,9 +508,7 @@ const HLSView = () => {
                       opacity: controlsVisible ? `1` : '0',
                     }}
                   >
-                    {!(isMobile || isLandscape) && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
-                      <HMSVideoPlayer.Progress />
-                    )}
+                    <HMSVideoPlayer.Progress isDvr={hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR} />
                     <HMSVideoPlayer.Controls.Root
                       css={{
                         p: '$4 $8',
@@ -488,12 +517,23 @@ const HLSView = () => {
                       <HMSVideoPlayer.Controls.Left>
                         {!(isMobile || isLandscape) && (
                           <>
-                            <HMSVideoPlayer.PlayButton
-                              onClick={async () => {
-                                isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+                            <HMSVideoPlayer.Seeker
+                              onClick={() => {
+                                onSeekTo(-10);
+                              }}
+                              title="backward"
+                            >
+                              <BackwardArrowIcon width={20} height={20} />
+                            </HMSVideoPlayer.Seeker>
+                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
+                            <HMSVideoPlayer.Seeker
+                              onClick={() => {
+                                onSeekTo(10);
                               }}
-                              isPaused={isPaused}
-                            />
+                              title="forward"
+                            >
+                              <ForwardArrowIcon width={20} height={20} />
+                            </HMSVideoPlayer.Seeker>
                             {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
                             <HMSVideoPlayer.Volume />
                           </>
@@ -551,9 +591,6 @@ const HLSView = () => {
                         ) : null}
                       </HMSVideoPlayer.Controls.Right>
                     </HMSVideoPlayer.Controls.Root>
-                    {(isMobile || isLandscape) && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
-                      <HMSVideoPlayer.Progress />
-                    ) : null}
                   </Flex>
                 </>
               </HMSVideoPlayer.Root>
@@ -564,6 +601,9 @@ const HLSView = () => {
         </>
       ) : (
         <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
+          <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
+            <LeaveRoom screenType={screenType} />
+          </Flex>
           <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
             {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
           </Flex>