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

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;
+  }
+  React.Children.map(children, child => {
+    console.log({ child });
+  });
+  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 canPublishAudio = role.publishParams.allowed.includes('audio');
+  const canPublishVideo = role.publishParams.allowed.includes('video');
+  const tracks = useHMSStore(selectTracksMap);
 
   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/VideoProgress.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
 import { getPercentage } from './utils';
 
-export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
+export const VideoProgress = () => {
   const { hlsPlayer } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState<number>(0);
   const [bufferProgress, setBufferProgress] = useState(0);
@@ -20,10 +20,11 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
       if (!videoEl) {
         return;
       }
-      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
+      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), videoEl.duration));
+        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
       }
 
       setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
@@ -48,7 +49,7 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
     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 +57,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 +64,7 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
         value={[videoProgress]}
         showTooltip={false}
         onValueChange={onProgress}
-        thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }}
+        thumbStyles={{ w: '$6', h: '$6' }}
       />
       <Box
         id="video-buffer"

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/layouts/HLSView.jsx

@@ -299,7 +299,7 @@ const HLSView = () => {
   }, []);
   const onDoubleClickHandler = useCallback(
     event => {
-      if (!(isMobile || isLandscape)) {
+      if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) {
         return;
       }
       const sidePercentage = (event.screenX * 100) / event.target.clientWidth;
@@ -314,7 +314,7 @@ const HLSView = () => {
         setIsSeekEnabled(false);
       }, 200);
     },
-    [isLandscape, isMobile, onSeekTo],
+    [hlsState?.variants, isLandscape, isMobile, onSeekTo],
   );
   const onClickHandler = useCallback(() => {
     if (!(isMobile || isLandscape)) {
@@ -401,7 +401,7 @@ const HLSView = () => {
                 <>
                   {isMobile || isLandscape ? (
                     <>
-                      {!showLoader && (
+                      {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
                         <Flex
                           align="center"
                           justify="center"
@@ -511,7 +511,7 @@ const HLSView = () => {
                       opacity: controlsVisible ? `1` : '0',
                     }}
                   >
-                    <HMSVideoPlayer.Progress isDvr={hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR} />
+                    {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? <HMSVideoPlayer.Progress /> : null}
                     <HMSVideoPlayer.Controls.Root
                       css={{
                         p: '$4 $8',
@@ -520,24 +520,28 @@ const HLSView = () => {
                       <HMSVideoPlayer.Controls.Left>
                         {!(isMobile || isLandscape) && (
                           <>
-                            <HMSVideoPlayer.Seeker
-                              onClick={() => {
-                                onSeekTo(-10);
-                              }}
-                              title="backward"
-                            >
-                              <BackwardArrowIcon width={20} height={20} />
-                            </HMSVideoPlayer.Seeker>
-                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
-                            <HMSVideoPlayer.Seeker
-                              onClick={() => {
-                                onSeekTo(10);
-                              }}
-                              title="forward"
-                            >
-                              <ForwardArrowIcon width={20} height={20} />
-                            </HMSVideoPlayer.Seeker>
-                            {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                            {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                              <>
+                                <HMSVideoPlayer.Seeker
+                                  onClick={() => {
+                                    onSeekTo(-10);
+                                  }}
+                                  title="backward"
+                                >
+                                  <BackwardArrowIcon width={20} height={20} />
+                                </HMSVideoPlayer.Seeker>
+                                <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
+                                <HMSVideoPlayer.Seeker
+                                  onClick={() => {
+                                    onSeekTo(10);
+                                  }}
+                                  title="forward"
+                                >
+                                  <ForwardArrowIcon width={20} height={20} />
+                                </HMSVideoPlayer.Seeker>
+                                {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                              </>
+                            ) : null}
                             <HMSVideoPlayer.Volume />
                           </>
                         )}
@@ -572,7 +576,11 @@ const HLSView = () => {
                             </Flex>
                           </Tooltip>
                         </IconButton>
-                        {(isMobile || isLandscape) && !isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                        {(isMobile || isLandscape) &&
+                        !isVideoLive &&
+                        hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                          <HMSVideoPlayer.Duration />
+                        ) : null}
                       </HMSVideoPlayer.Controls.Left>
 
                       <HMSVideoPlayer.Controls.Right>