@100mslive/roomkit-react 0.2.7 → 0.2.8-alpha.0

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

@@ -1,6 +1,13 @@
 import React, { useState } from 'react';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
-import { HMSPeer, selectPermissions, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import {
+  HMSPeer,
+  selectPermissions,
+  selectRoleByRoleName,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 import {
   MicOffIcon,
   MicOnIcon,
@@ -20,33 +27,96 @@ import { getMetadata } from '../../common/utils';
 const dropdownItemCSS = { backgroundColor: '$surface_default', gap: '$4', p: '$8' };
 const optionTextCSS = { fontWeight: '$semiBold', color: '$on_surface_high', textTransform: 'none' };
 
-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 MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleName: string }) => {
   const vanillaStore = useHMSVanillaStore();
   const store = vanillaStore.getState();
+  const hmsActions = useHMSActions();
+  const permissions = useHMSStore(selectPermissions);
+  const role = useHMSStore(selectRoleByRoleName(roleName));
 
   let allPeersHaveVideoOn = true;
   let allPeersHaveAudioOn = true;
 
   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 canMuteRole = permissions?.mute && roleName === on_stage_role;
+  const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
+    try {
+      await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  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
+              </Text>
+            </Dropdown.Item>
+          ) : null}
+
+          {!allPeersHaveAudioOn && permissions?.unmute ? (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
+              <MicOnIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Unmute Audio
+              </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
+              </Text>
+            </Dropdown.Item>
+          ) : null}
+
+          {!allPeersHaveVideoOn && permissions?.unmute ? (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
+              <VideoOnIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Unmute Video
+              </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 (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
+  if (!(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
     return null;
   }
 
@@ -59,14 +129,6 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
     });
   };
 
-  const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
-    try {
-      await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled });
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
   const removePeersFromRoom = async () => {
     try {
       peerList.forEach(async peer => {
@@ -118,26 +180,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
           </Dropdown.Item>
         )}
 
-        {canMuteRole && (
-          <>
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', !allPeersHaveAudioOn)}>
-              {allPeersHaveAudioOn ? <MicOffIcon /> : <MicOnIcon />}
-              <Text variant="sm" css={optionTextCSS}>
-                {allPeersHaveAudioOn ? 'Mute' : 'Unmute'} Audio
-              </Text>
-            </Dropdown.Item>
-
-            <Dropdown.Item
-              css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright' }}
-              onClick={() => setTrackEnabled('video', !allPeersHaveVideoOn)}
-            >
-              {allPeersHaveVideoOn ? <VideoOffIcon /> : <VideoOnIcon />}
-              <Text variant="sm" css={optionTextCSS}>
-                {allPeersHaveVideoOn ? 'Mute' : 'Unmute'} Video
-              </Text>
-            </Dropdown.Item>
-          </>
-        )}
+        {canMuteOrUnmute && <MuteUnmuteOption peerList={peerList} roleName={roleName} />}
 
         {canRemoveRoleFromRoom && (
           <Dropdown.Item

package/src/Prebuilt/components/MoreSettings/{FullScreenItem.jsx → FullScreenItem.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExpandIcon } from '@100mslive/react-icons';
-import { Dropdown, Text } from '../../../';
+import { Dropdown, Text } from '../../..';
 import { useFullscreen } from '../hooks/useFullscreen';
 
 export const FullScreenItem = () => {

package/src/Prebuilt/components/MoreSettings/MuteAllContent.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { HMSRoleName, HMSTrackSource, HMSTrackType, selectPermissions, useHMSStore } from '@100mslive/react-sdk';
+import { Button } from '../../../Button';
+import { Label } from '../../../Label';
+import { Flex } from '../../../Layout';
+import { RadioGroup } from '../../../RadioGroup';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit any
+import { DialogRow, DialogSelect } from '../../primitives/DialogContent';
+import { trackSourceOptions, trackTypeOptions } from './constants';
+
+export const MuteAllContent = (props: {
+  muteAll: () => Promise<void>;
+  roles?: HMSRoleName[];
+  enabled: boolean;
+  setEnabled: (value: boolean) => void;
+  trackType?: HMSTrackType;
+  setTrackType: (value: HMSTrackType) => void;
+  selectedRole?: HMSRoleName;
+  setRole: (value: HMSRoleName) => void;
+  selectedSource?: HMSTrackSource;
+  setSource: (value: HMSTrackSource) => void;
+  isMobile: boolean;
+}) => {
+  const roles = props.roles || [];
+  const permissions = useHMSStore(selectPermissions);
+  return (
+    <>
+      <DialogSelect
+        title="Role"
+        options={[{ label: 'All Roles', value: '' }, ...roles.map(role => ({ label: role, value: role }))]}
+        selected={props.selectedRole}
+        keyField="value"
+        labelField="label"
+        onChange={props.setRole}
+      />
+      <DialogSelect
+        title="Track type"
+        options={trackTypeOptions}
+        selected={props.trackType}
+        onChange={props.setTrackType}
+        keyField="value"
+        labelField="label"
+      />
+      <DialogSelect
+        title="Track source"
+        options={trackSourceOptions}
+        selected={props.selectedSource}
+        onChange={props.setSource}
+        keyField="value"
+        labelField="label"
+      />
+      <DialogRow>
+        <Text variant="md">Track status</Text>
+        <RadioGroup.Root value={String(props.enabled)} onValueChange={value => props.setEnabled(value === 'true')}>
+          {permissions?.mute && (
+            <Flex align="center" css={{ mr: '$8' }}>
+              <RadioGroup.Item value="false" id="trackDisableRadio" css={{ mr: '$4' }}>
+                <RadioGroup.Indicator />
+              </RadioGroup.Item>
+              <Label htmlFor="trackDisableRadio">Mute</Label>
+            </Flex>
+          )}
+          {permissions?.unmute && (
+            <Flex align="center" css={{ cursor: 'pointer' }}>
+              <RadioGroup.Item value="true" id="trackEnableRadio" css={{ mr: '$4' }}>
+                <RadioGroup.Indicator />
+              </RadioGroup.Item>
+              <Label htmlFor="trackEnableRadio">Request Unmute</Label>
+            </Flex>
+          )}
+        </RadioGroup.Root>
+      </DialogRow>
+      <DialogRow justify="end">
+        <Button variant="primary" onClick={props.muteAll} css={{ w: props?.isMobile ? '100%' : '' }}>
+          Apply
+        </Button>
+      </DialogRow>
+    </>
+  );
+};

package/src/Prebuilt/components/MoreSettings/{MuteAllModal.jsx → MuteAllModal.tsx}

@@ -1,31 +1,32 @@
 import React, { useCallback, useState } from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
+import {
+  HMSRoleName,
+  HMSTrackSource,
+  HMSTrackType,
+  selectAvailableRoleNames,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { MicOffIcon } from '@100mslive/react-icons';
-import { Dialog } from '../../../';
+import { Dialog } from '../../..';
 import { Sheet } from '../../../Sheet';
+// @ts-ignore: No implicit any
 import { DialogContent } from '../../primitives/DialogContent';
 import { MuteAllContent } from './MuteAllContent';
-import { useFilteredRoles } from '../../common/hooks';
 
-const trackSourceOptions = [
-  { label: 'All Track Sources', value: '' },
-  { label: 'regular', value: 'regular' },
-  { label: 'screen', value: 'screen' },
-  { label: 'audioplaylist', value: 'audioplaylist' },
-  { label: 'videoplaylist', value: 'videoplaylist' },
-];
-const trackTypeOptions = [
-  { label: 'All Track Types', value: '' },
-  { label: 'audio', value: 'audio' },
-  { label: 'video', value: 'video' },
-];
-export const MuteAllModal = ({ onOpenChange, isMobile = false }) => {
-  const roles = useFilteredRoles();
+export const MuteAllModal = ({
+  onOpenChange,
+  isMobile = false,
+}: {
+  onOpenChange: (value: boolean) => void;
+  isMobile?: boolean;
+}) => {
+  const roles = useHMSStore(selectAvailableRoleNames);
   const hmsActions = useHMSActions();
   const [enabled, setEnabled] = useState(false);
-  const [trackType, setTrackType] = useState();
-  const [selectedRole, setRole] = useState();
-  const [selectedSource, setSource] = useState();
+  const [trackType, setTrackType] = useState<HMSTrackType>();
+  const [selectedRole, setRole] = useState<HMSRoleName>();
+  const [selectedSource, setSource] = useState<HMSTrackSource>();
 
   const muteAll = useCallback(async () => {
     await hmsActions.setRemoteTracksEnabled({
@@ -48,8 +49,6 @@ export const MuteAllModal = ({ onOpenChange, isMobile = false }) => {
     setRole,
     selectedSource,
     setSource,
-    trackSourceOptions,
-    trackTypeOptions,
     isMobile,
   };
 

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

@@ -8,7 +8,6 @@ import {
 import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
-// @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
 // @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
@@ -26,7 +25,6 @@ import { StatsForNerds } from '../../StatsForNerds';
 import { BulkRoleChangeModal } from '../BulkRoleChangeModal';
 // @ts-ignore: No implicit any
 import { FullScreenItem } from '../FullScreenItem';
-// @ts-ignore: No implicit any
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';

package/src/Prebuilt/components/MoreSettings/constants.ts

@@ -0,0 +1,12 @@
+export const trackSourceOptions = [
+  { label: 'All Track Sources', value: '' },
+  { label: 'regular', value: 'regular' },
+  { label: 'screen', value: 'screen' },
+  { label: 'audioplaylist', value: 'audioplaylist' },
+  { label: 'videoplaylist', value: 'videoplaylist' },
+];
+export const trackTypeOptions = [
+  { label: 'All Track Types', value: '' },
+  { label: 'audio', value: 'audio' },
+  { label: 'video', value: 'video' },
+];

package/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx

@@ -40,10 +40,12 @@ export const TrackBulkUnmuteModal = () => {
 
   const { requestedBy: peer, tracks, enabled } = muteNotification;
 
+  const types = new Set(tracks.map(track => track.type));
+
   return (
     <RequestDialog
-      title="Track Unmute Request"
-      body={`${peer?.name} has requested you to unmute your tracks.`}
+      title="Unmute request"
+      body={`${peer?.name} is requesting you to unmute your ${Array.from(types).join(',')}`}
       onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
       onAction={() => {
         tracks.forEach(track => {

package/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx

@@ -42,9 +42,9 @@ export const TrackUnmuteModal = () => {
 
   return (
     <RequestDialog
-      title="Track Unmute Request"
+      title={`Unmute your ${track.type}?`}
       onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
-      body={`${peer?.name} has requested you to unmute your ${track?.source} ${track?.type}.`}
+      body={`${peer?.name}is requesting you to unmute your ${track?.type}.`}
       onAction={() => {
         hmsActions.setEnabledTrack(track.id, enabled);
         setMuteNotification(null);

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -225,7 +225,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
     >
       {localPeer ? (
         <>
-          <TileConnection name={name} peerId={localPeer.id} hideLabel={true} />
+          <TileConnection name="" peerId={localPeer.id} hideLabel={false} />
           <Video
             mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
             trackId={localPeer.videoTrack}

package/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx

@@ -42,7 +42,8 @@ const SecondarySection = ({
   const gridStyles = hasSidebar
     ? {
         gridTemplateColumns: '1fr',
-        gridTemplateRows: `repeat(${tiles.length}, minmax(0, 135px))`,
+        gridTemplateRows: `repeat(${tiles.length}, minmax(0, 1fr))`,
+        maxHeight: '100%',
       }
     : {
         gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',

package/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
 import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { SecondaryTiles } from '../SecondaryTiles';
@@ -24,7 +26,9 @@ export function RoleProminence({
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore(selectLocalPeer);
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
-  const maxTileCount = 4;
+  const isMobile = useMedia(cssConfig.media.md);
+  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
+  maxTileCount = isMobile ? 4 : maxTileCount;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
     maxTileCount,

package/src/Prebuilt/components/hooks/{useFullscreen.js → useFullscreen.ts}

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import screenfull from 'screenfull';
+// @ts-ignore: No implicit any
 import { ToastManager } from '../Toast/ToastManager';
 import { DEFAULT_PORTAL_CONTAINER } from '../../common/constants';
 
@@ -12,13 +13,14 @@ export const useFullscreen = () => {
       return;
     }
     try {
+      const container = document.querySelector(DEFAULT_PORTAL_CONTAINER);
       if (isFullScreenEnabled) {
         await screenfull.exit();
-      } else {
-        await screenfull.request(document.querySelector(DEFAULT_PORTAL_CONTAINER));
+      } else if (container) {
+        await screenfull.request(container);
       }
     } catch (err) {
-      ToastManager.addToast({ title: err.message });
+      ToastManager.addToast({ title: (err as Error).message });
     }
   }, [isFullScreenEnabled]);
 

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -11,6 +11,7 @@ import { Dialog } from '../../Modal';
 import { Select } from '../../Select';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
+import { flexCenter } from '../../utils';
 
 export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
   return (
@@ -21,9 +22,9 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
           <Flex justify="between">
             <Flex align="center" css={{ mb: '$1' }}>
               {Icon ? (
-                <Box css={{ mr: '$2', color: '$on_primary_high', ...iconCSS }}>
+                <Flex css={{ mr: '$2', color: '$on_primary_high', ...flexCenter, ...iconCSS }}>
                   <Icon />
-                </Box>
+                </Flex>
               ) : null}
               <Text variant="h6" inline>
                 {title}