@100mslive/roomkit-react 0.2.8-alpha.1 → 0.2.8-alpha.11

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,
@@ -25,26 +26,78 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { getMetadata } from '../../common/utils';
 
 const dropdownItemCSS = { backgroundColor: '$surface_default', gap: '$4', p: '$8' };
-const optionTextCSS = { fontWeight: '$semiBold', color: '$on_surface_high', textTransform: 'none' };
+const optionTextCSS = {
+  fontWeight: '$semiBold',
+  color: '$on_surface_high',
+  textTransform: 'none',
+  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 allPeersHaveVideoOn = true;
-  let allPeersHaveAudioOn = true;
+  let isVideoOnForSomePeers = false;
+  let isAudioOnForSomePeers = false;
 
   peerList.forEach(peer => {
     if (peer.isLocal) {
       return;
     }
-    const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled;
-    const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled;
-    allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
-    allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+    const isAudioOn = !!peer.audioTrack && tracks[peer.audioTrack]?.enabled;
+    const isVideoOn = !!peer.videoTrack && tracks[peer.videoTrack]?.enabled;
+    isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
+    isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
   });
 
   const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
@@ -55,68 +108,16 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
     }
   };
 
-  return (
-    <>
-      {role.publishParams.allowed?.includes('audio') && (
-        <>
-          {allPeersHaveAudioOn && permissions?.mute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
-              <MicOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Audio for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {!allPeersHaveAudioOn && permissions?.unmute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
-              <MicOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Unmute Audio for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-        </>
-      )}
-
-      {role.publishParams.allowed?.includes('audio') && (
-        <>
-          {allPeersHaveVideoOn && permissions?.mute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
-              <VideoOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Video for All
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {!allPeersHaveVideoOn && permissions?.unmute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
-              <VideoOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                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;
   // 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 (
+    peerList.length === 0 ||
+    // if only local peer is present no need to show any options
+    (peerList.length === 1 && peerList[0].isLocal) ||
+    !role
+  ) {
     return null;
   }
 
@@ -140,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', maxWidth: '$64', 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/Controls.jsx

@@ -1,4 +1,4 @@
-import { Flex, styled } from '../../../';
+import { Flex, styled } from '../../..';
 
 export const VideoControls = styled(Flex, {
   justifyContent: 'center',

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { Flex, IconButton, Tooltip } from '../../..';
+
+export const FullScreenButton = ({ isFullScreen, onToggle }: { isFullScreen: boolean; onToggle: () => void }) => {
+  return (
+    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side="top">
+      <IconButton css={{ margin: '0px' }} onClick={onToggle} key="fullscreen_btn" data-testid="fullscreen_btn">
+        <Flex>{isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}</Flex>
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { VolumeTwoIcon } from '@100mslive/react-icons';
+import { Button, config, Dialog, IconButton, Text } from '../../..';
+// @ts-ignore
+import { DialogContent, DialogRow } from '../../primitives/DialogContent';
+import { useIsLandscape } from '../../common/hooks';
+
+export function HLSAutoplayBlockedPrompt({
+  open,
+  unblockAutoPlay,
+}: {
+  open: boolean;
+  unblockAutoPlay: () => Promise<void>;
+}) {
+  const isLandscape = useIsLandscape();
+  const isMobile = useMedia(config.media.md);
+  if ((isMobile || isLandscape) && open) {
+    return (
+      <IconButton
+        css={{
+          border: '1px solid white',
+          bg: 'white',
+          color: '#000',
+          r: '$2',
+        }}
+        onClick={async () => await unblockAutoPlay()}
+      >
+        <VolumeTwoIcon width="32" height="32" />
+        <Text
+          variant="body1"
+          css={{
+            fontWeight: '$semiBold',
+            px: '$2',
+            color: '#000',
+          }}
+        >
+          Tap To Unmute
+        </Text>
+      </IconButton>
+    );
+  }
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={async value => {
+        if (!value) {
+          await unblockAutoPlay();
+        }
+      }}
+    >
+      <DialogContent title="Attention" closeable={false}>
+        <DialogRow>
+          <Text variant="md">
+            The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to
+            proceed.
+          </Text>
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button
+            variant="primary"
+            onClick={async () => {
+              await unblockAutoPlay();
+            }}
+          >
+            Play stream
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+}

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
 import { IconButton, Tooltip } from '../../../';
+import { useHMSPlayerContext } from './PlayerContext';
 
-export function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {
+export function HLSCaptionSelector({ isEnabled }: { isEnabled: boolean }) {
+  const { hlsPlayer } = useHMSPlayerContext();
   return (
     <Tooltip title="Subtitles/closed captions" side="top">
-      <IconButton css={{ p: '$2' }} onClick={() => onClick()}>
+      <IconButton css={{ p: '$2' }} onClick={() => hlsPlayer?.toggleCaption()}>
         {isEnabled ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
       </IconButton>
     </Tooltip>

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

@@ -0,0 +1,248 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { HMSHLSLayer } from '@100mslive/hls-player';
+import { CheckIcon, CrossIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, Text, Tooltip } from '../../..';
+import { Sheet } from '../../../Sheet';
+import { config } from '../../../Theme';
+import { useIsLandscape } from '../../common/hooks';
+
+export function HLSQualitySelector({
+  open,
+  onOpenChange,
+  layers,
+  onQualityChange,
+  selection,
+  isAuto,
+  containerRef,
+}: {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  layers: HMSHLSLayer[];
+  onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
+  selection: HMSHLSLayer;
+  isAuto: boolean;
+  containerRef?: HTMLDivElement;
+}) {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+
+  if (layers.length === 0) {
+    return null;
+  }
+  if (isMobile || isLandscape) {
+    return (
+      <Sheet.Root open={open} onOpenChange={onOpenChange}>
+        <Sheet.Trigger asChild data-testid="quality_selector">
+          <Flex
+            css={{
+              color: '$on_primary_high',
+              r: '$1',
+              cursor: 'pointer',
+              p: '$2',
+            }}
+          >
+            <SettingsIcon />
+          </Flex>
+        </Sheet.Trigger>
+        <Sheet.Content
+          container={containerRef}
+          css={{ bg: '$surface_default', pb: '$1' }}
+          onClick={() => onOpenChange(false)}
+        >
+          <Sheet.Title
+            css={{
+              display: 'flex',
+              color: '$on_surface_high',
+              w: '100%',
+              justifyContent: 'space-between',
+              mt: '$8',
+              fontSize: '$md',
+              px: '$10',
+              pb: '$8',
+              borderBottom: '1px solid $border_bright',
+              alignItems: 'center',
+            }}
+          >
+            Quality
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
+              <CrossIcon />
+            </Sheet.Close>
+          </Sheet.Title>
+          {layers.map(layer => {
+            return (
+              <Flex
+                align="center"
+                css={{
+                  w: '100%',
+                  bg: '$surface_default',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  cursor: 'pointer',
+                  gap: '$4',
+                  py: '$8',
+                  px: '$10',
+                }}
+                key={layer.width}
+                onClick={() => onQualityChange(layer)}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Flex>
+            );
+          })}
+          <Flex
+            align="center"
+            css={{
+              w: '100%',
+              bg: '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              cursor: 'pointer',
+              gap: '$4',
+              py: '$8',
+              px: '$10',
+            }}
+            key="auto"
+            onClick={() => onQualityChange({ height: 'auto' })}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Flex>
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)} modal={false}>
+      <Dropdown.Trigger asChild data-testid="quality_selector">
+        <Flex
+          css={{
+            color: '$on_primary_high',
+            r: '$1',
+            cursor: 'pointer',
+            p: '$2',
+          }}
+        >
+          <Tooltip title="Select Quality" side="top">
+            <Flex align="center">
+              <Box
+                css={{
+                  w: '$9',
+                  h: '$9',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  c: '$on_surface_high',
+                }}
+              >
+                <SettingsIcon />
+              </Box>
+              <Text
+                variant={{
+                  '@md': 'sm',
+                  '@sm': 'xs',
+                  '@xs': 'tiny',
+                }}
+                css={{ display: 'flex', alignItems: 'center', ml: '$2', c: '$on_surface_medium' }}
+              >
+                {isAuto && (
+                  <>
+                    Auto
+                    <Box
+                      css={{
+                        mx: '$2',
+                        w: '$2',
+                        h: '$2',
+                        background: '$on_surface_medium',
+                        r: '$1',
+                      }}
+                    />
+                  </>
+                )}
+                {selection && Math.min(selection.width || 0, selection.height || 0)}p
+              </Text>
+            </Flex>
+          </Tooltip>
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Portal container={containerRef}>
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{
+            height: 'auto',
+            maxHeight: '$52',
+            w: '$40',
+            bg: '$surface_bright',
+            py: '$4',
+            gap: '$4',
+            display: 'grid',
+          }}
+        >
+          {layers.map(layer => {
+            return (
+              <Dropdown.Item
+                onClick={() => onQualityChange(layer)}
+                key={layer.width}
+                css={{
+                  bg:
+                    !isAuto && layer.width === selection?.width && layer.height === selection?.height
+                      ? '$surface_default'
+                      : '$surface_bright',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  p: '$2 $4 $2 $8',
+                  h: '$12',
+                  gap: '$2',
+                }}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Dropdown.Item>
+            );
+          })}
+          <Dropdown.Item
+            onClick={() => onQualityChange({ height: 'auto' })}
+            key="auto"
+            css={{
+              bg: !isAuto ? '$surface_bright' : '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              p: '$2 $4 $2 $8',
+              h: '$12',
+              gap: '$2',
+            }}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  );
+}
+
+const getQualityText = (layer: HMSHLSLayer) => `${Math.min(layer.height || 0, layer.width || 0)}p `;
+const getBitrateText = (layer: HMSHLSLayer) => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;