@100mslive/roomkit-react 0.3.2-alpha.0 → 0.3.2-alpha.2

package/dist/meta.esbuild.json

@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 326171,
+      "bytes": 326185,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6010,8 +6010,39 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/components/hooks/useGroupOnStageActions.tsx": {
+      "bytes": 1795,
+      "imports": [
+        {
+          "path": "ts-pattern",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
+          "kind": "import-statement",
+          "original": "../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-      "bytes": 4692,
+      "bytes": 5566,
       "imports": [
         {
           "path": "react",
@@ -6043,6 +6074,16 @@
           "kind": "import-statement",
           "original": "../../../Accordion"
         },
+        {
+          "path": "src/Button/index.tsx",
+          "kind": "import-statement",
+          "original": "../../../Button"
+        },
+        {
+          "path": "src/Divider/index.ts",
+          "kind": "import-statement",
+          "original": "../../../Divider"
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -6063,6 +6104,11 @@
           "kind": "import-statement",
           "original": "./RoleOptions"
         },
+        {
+          "path": "src/Prebuilt/components/hooks/useGroupOnStageActions.tsx",
+          "kind": "import-statement",
+          "original": "../hooks/useGroupOnStageActions"
+        },
         {
           "path": "src/Prebuilt/common/utils.js",
           "kind": "import-statement",
@@ -6076,8 +6122,39 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/components/hooks/usePeerOnStageActions.tsx": {
+      "bytes": 1672,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
+          "kind": "import-statement",
+          "original": "../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-      "bytes": 12119,
+      "bytes": 12623,
       "imports": [
         {
           "path": "react",
@@ -6104,6 +6181,11 @@
           "kind": "import-statement",
           "original": "../../.."
         },
+        {
+          "path": "src/IconButton/index.tsx",
+          "kind": "import-statement",
+          "original": "../../../IconButton"
+        },
         {
           "path": "src/Prebuilt/IconButton.tsx",
           "kind": "import-statement",
@@ -6134,6 +6216,11 @@
           "kind": "import-statement",
           "original": "../AppData/useSidepane"
         },
+        {
+          "path": "src/Prebuilt/components/hooks/usePeerOnStageActions.tsx",
+          "kind": "import-statement",
+          "original": "../hooks/usePeerOnStageActions"
+        },
         {
           "path": "src/Prebuilt/common/hooks.ts",
           "kind": "import-statement",
@@ -9321,7 +9408,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 6649,
+      "bytes": 6575,
       "imports": [
         {
           "path": "react",
@@ -10039,7 +10126,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-      "bytes": 2587,
+      "bytes": 2519,
       "imports": [
         {
           "path": "react",
@@ -12200,7 +12287,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MwebLandscapePrompt.tsx": {
-      "bytes": 3089,
+      "bytes": 3095,
       "imports": [
         {
           "path": "react",
@@ -13627,7 +13714,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-E7AEJ446.js",
+          "path": "dist/chunk-OYWNLHYU.js",
           "kind": "import-statement"
         }
       ],
@@ -13700,16 +13787,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-C5XHK2VY.js.map": {
+    "dist/HLSView-SF6SAQ5J.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 89757
     },
-    "dist/HLSView-C5XHK2VY.js": {
+    "dist/HLSView-SF6SAQ5J.js": {
       "imports": [
         {
-          "path": "dist/chunk-E7AEJ446.js",
+          "path": "dist/chunk-OYWNLHYU.js",
           "kind": "import-statement"
         },
         {
@@ -13927,13 +14014,13 @@
       },
       "bytes": 55042
     },
-    "dist/chunk-E7AEJ446.js.map": {
+    "dist/chunk-OYWNLHYU.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3171400
+      "bytes": 3179405
     },
-    "dist/chunk-E7AEJ446.js": {
+    "dist/chunk-OYWNLHYU.js": {
       "imports": [
         {
           "path": "react",
@@ -15200,6 +15287,26 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "ts-pattern",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -16301,7 +16408,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-C5XHK2VY.js",
+          "path": "dist/HLSView-SF6SAQ5J.js",
           "kind": "dynamic-import"
         },
         {
@@ -16776,7 +16883,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18234
+          "bytesInOutput": 18284
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224291
@@ -17052,7 +17159,7 @@
           "bytesInOutput": 2709
         },
         "src/Prebuilt/provider/roomLayoutProvider/index.tsx": {
-          "bytesInOutput": 1118
+          "bytesInOutput": 1121
         },
         "src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts": {
           "bytesInOutput": 2254
@@ -17214,7 +17321,7 @@
           "bytesInOutput": 10031
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48564
+          "bytesInOutput": 48592
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -17316,7 +17423,7 @@
           "bytesInOutput": 1404
         },
         "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-          "bytesInOutput": 11538
+          "bytesInOutput": 11800
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
           "bytesInOutput": 3749
@@ -17328,11 +17435,17 @@
           "bytesInOutput": 1290
         },
         "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-          "bytesInOutput": 4229
+          "bytesInOutput": 4964
         },
         "src/Prebuilt/components/Footer/RoleOptions.tsx": {
           "bytesInOutput": 7326
         },
+        "src/Prebuilt/components/hooks/useGroupOnStageActions.tsx": {
+          "bytesInOutput": 1801
+        },
+        "src/Prebuilt/components/hooks/usePeerOnStageActions.tsx": {
+          "bytesInOutput": 1806
+        },
         "src/Prebuilt/components/Footer/PollsToggle.tsx": {
           "bytesInOutput": 1073
         },
@@ -17349,7 +17462,7 @@
           "bytesInOutput": 9637
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 6345
+          "bytesInOutput": 6274
         },
         "src/Prebuilt/components/Polls/Polls.tsx": {
           "bytesInOutput": 735
@@ -17574,7 +17687,7 @@
           "bytesInOutput": 2494
         },
         "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-          "bytesInOutput": 2431
+          "bytesInOutput": 2339
         },
         "src/Prebuilt/components/hooks/useRoleProminencePeers.tsx": {
           "bytesInOutput": 1046
@@ -17646,7 +17759,7 @@
           "bytesInOutput": 491
         },
         "src/Prebuilt/components/MwebLandscapePrompt.tsx": {
-          "bytesInOutput": 2922
+          "bytesInOutput": 2928
         },
         "src/Prebuilt/components/Notifications/index.tsx": {
           "bytesInOutput": 27
@@ -17730,7 +17843,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1300139
+      "bytes": 1304788
     }
   }
 }

package/package.json

@@ -4,13 +4,14 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "type": "module",
   "keywords": [
     "100mslive",
     "react",
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.2-alpha.0",
+  "version": "0.3.2-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +83,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.2-alpha.0",
+    "@100mslive/hls-player": "0.3.2-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.13.2-alpha.0",
-    "@100mslive/react-icons": "0.10.2-alpha.0",
-    "@100mslive/react-sdk": "0.10.2-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.2-alpha.2",
+    "@100mslive/react-icons": "0.10.2-alpha.2",
+    "@100mslive/react-sdk": "0.10.2-alpha.2",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +123,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "bb718372bf21a6c1945c644902cc208c0fca4a32"
+  "gitHead": "8689984dfac962416e160878c8a5821c88cdc8dd"
 }

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

@@ -9,24 +9,30 @@ import {
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerCount,
-  selectPeerMetadata,
   selectPermissions,
-  useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { ChangeRoleIcon, HandIcon, MicOffIcon, PeopleIcon, SearchIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import {
+  AddIcon,
+  ChangeRoleIcon,
+  CrossIcon,
+  HandIcon,
+  MicOffIcon,
+  PeopleIcon,
+  SearchIcon,
+  VerticalMenuIcon,
+} from '@100mslive/react-icons';
 import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
+import { IconButton as BaseIconButton } from '../../../IconButton';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { RemoveParticipant } from '../RemoveParticipant';
 import { RoleAccordion } from './RoleAccordion';
-import {
-  ConferencingScreenElements,
-  useRoomLayoutConferencingScreen,
-} from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { usePeerOnStageActions } from '../hooks/usePeerOnStageActions';
 import { useParticipants } from '../../common/hooks';
 // @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
@@ -146,10 +152,12 @@ export const ParticipantCount = () => {
 export const Participant = ({
   peer,
   isConnected,
+  isHandRaisedAccordion,
   style,
 }: {
   peer: HMSPeer;
   isConnected: boolean;
+  isHandRaisedAccordion?: boolean;
   style: React.CSSProperties;
 }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -175,7 +183,12 @@ export const Participant = ({
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected && peer.roleName ? (
-        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
+        <ParticipantActions
+          peerId={peer.id}
+          isLocal={peer.id === localPeerId}
+          role={peer.roleName}
+          isHandRaisedAccordion={isHandRaisedAccordion}
+        />
       ) : null}
     </Flex>
   );
@@ -247,7 +260,17 @@ const VirtualizedParticipants = ({
  * shows settings to change for a participant like changing their role
  */
 const ParticipantActions = React.memo(
-  ({ peerId, role, isLocal }: { peerId: string; role: string; isLocal: boolean }) => {
+  ({
+    peerId,
+    role,
+    isLocal,
+    isHandRaisedAccordion,
+  }: {
+    peerId: string;
+    role: string;
+    isLocal: boolean;
+    isHandRaisedAccordion?: boolean;
+  }) => {
     const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
     const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
     const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
@@ -264,72 +287,73 @@ const ParticipantActions = React.memo(
           gap: '$8',
         }}
       >
-        <ConnectionIndicator peerId={peerId} />
-        {isHandRaised && (
-          <Flex
-            align="center"
-            justify="center"
-            css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-          >
-            <HandIcon height={19} width={19} />
-          </Flex>
-        )}
-        {isAudioMuted ? (
-          <Flex
-            align="center"
-            justify="center"
-            css={{ p: '$2', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-          >
-            <MicOffIcon height={19} width={19} />
-          </Flex>
-        ) : null}
+        {isHandRaisedAccordion ? (
+          <HandRaisedAccordionParticipantActions peerId={peerId} role={role} />
+        ) : (
+          <>
+            <ConnectionIndicator peerId={peerId} />
+            {isHandRaised && (
+              <Flex
+                align="center"
+                justify="center"
+                css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+              >
+                <HandIcon height={19} width={19} />
+              </Flex>
+            )}
+            {isAudioMuted ? (
+              <Flex
+                align="center"
+                justify="center"
+                css={{ p: '$2', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+              >
+                <MicOffIcon height={19} width={19} />
+              </Flex>
+            ) : null}
 
-        {shouldShowMoreActions && !isLocal ? (
-          <ParticipantMoreActions peerId={peerId} role={role} elements={elements} canChangeRole={!!canChangeRole} />
-        ) : null}
+            {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+          </>
+        )}
       </Flex>
     );
   },
 );
 
-const ParticipantMoreActions = ({
-  peerId,
-  role,
-  elements,
-  canChangeRole,
-}: {
-  peerId: string;
-  role: string;
-  canChangeRole: boolean;
-  elements: ConferencingScreenElements;
-}) => {
-  const hmsActions = useHMSActions();
+const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: string; role: string }) => {
+  const { handleStageAction, lowerPeerHand, shouldShowStageRoleChange, isInStage } = usePeerOnStageActions({
+    peerId,
+    role,
+  });
+  return (
+    <>
+      <BaseIconButton
+        css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+        onClick={() => lowerPeerHand()}
+      >
+        <CrossIcon height={19} width={19} />
+      </BaseIconButton>
+      {shouldShowStageRoleChange && !isInStage && (
+        <BaseIconButton
+          css={{ p: '$1', c: '$on_surface_high', bg: '$primary_default', borderRadius: '$round' }}
+          onClick={() => handleStageAction()}
+        >
+          <AddIcon height={19} width={19} />
+        </BaseIconButton>
+      )}
+    </>
+  );
+};
+
+const ParticipantMoreActions = ({ peerId, role }: { peerId: string; role: string }) => {
   const {
+    open,
+    setOpen,
     bring_to_stage_label,
     remove_from_stage_label,
-    on_stage_role,
-    off_stage_roles = [],
-    skip_preview_for_role_change = false,
-  } = elements.on_stage_exp || {};
-  const isInStage = role === on_stage_role;
-  const shouldShowStageRoleChange =
-    canChangeRole &&
-    ((isInStage && remove_from_stage_label) || (off_stage_roles?.includes(role) && bring_to_stage_label));
-  const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole;
-  const [open, setOpen] = useState(false);
-
-  const handleStageAction = async () => {
-    if (isInStage) {
-      prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
-    } else if (on_stage_role) {
-      await hmsActions.changeRoleOfPeer(peerId, on_stage_role, skip_preview_for_role_change);
-      if (skip_preview_for_role_change) {
-        await hmsActions.lowerRemotePeerHand(peerId);
-      }
-    }
-    setOpen(false);
-  };
-
+    handleStageAction,
+    isInStage,
+    shouldShowStageRoleChange,
+  } = usePeerOnStageActions({ peerId, role });
   return (
     <Dropdown.Root open={open} onOpenChange={value => setOpen(value)} modal={false}>
       <Dropdown.Trigger

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

@@ -4,10 +4,13 @@ import { FixedSizeList } from 'react-window';
 import { HMSPeer, selectIsLargeRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
 import { ChevronRightIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
+import { Button } from '../../../Button';
+import { HorizontalDivider } from '../../../Divider';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import { Participant } from './ParticipantList';
 import { RoleOptions } from './RoleOptions';
+import { useGroupOnStageActions } from '../hooks/useGroupOnStageActions';
 // @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 
@@ -16,6 +19,7 @@ const ITER_TIMER = 5000;
 
 export interface ItemData {
   peerList: HMSPeer[];
+  isHandRaisedAccordion?: boolean;
   isConnected: boolean;
 }
 
@@ -29,6 +33,7 @@ export const VirtualizedParticipantItem = React.memo(
       <Participant
         key={data.peerList[index].id}
         peer={data.peerList[index]}
+        isHandRaisedAccordion={data.isHandRaisedAccordion}
         isConnected={data.isConnected}
         style={style}
       />
@@ -63,6 +68,9 @@ export const RoleAccordion = ({
       peersInAccordion = peersInAccordion.filter(peer => peer.name.toLowerCase().includes(filter.search || ''));
     }
   }
+  const { bringAllToStage, bring_to_stage_label, canBringToStage, lowerAllHands } = useGroupOnStageActions({
+    peers: peersInAccordion,
+  });
 
   useEffect(() => {
     if (!isOffStageRole || !isLargeRoom) {
@@ -113,7 +121,7 @@ export const RoleAccordion = ({
       <Accordion.Content contentStyles={{ border: '1px solid $border_default', borderTop: 'none' }}>
         <FixedSizeList
           itemSize={ROW_HEIGHT}
-          itemData={{ peerList: peersInAccordion, isConnected }}
+          itemData={{ peerList: peersInAccordion, isConnected, isHandRaisedAccordion }}
           itemKey={itemKey}
           itemCount={peersInAccordion.length}
           width={width}
@@ -140,6 +148,17 @@ export const RoleAccordion = ({
             <ChevronRightIcon />
           </Flex>
         ) : null}
+        {isHandRaisedAccordion && (
+          <>
+            <HorizontalDivider />
+            <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
+              <Button variant="standard" onClick={() => lowerAllHands()}>
+                Lower All Hands
+              </Button>
+              {canBringToStage && <Button onClick={() => bringAllToStage()}>{bring_to_stage_label}</Button>}
+            </Flex>
+          </>
+        )}
       </Accordion.Content>
     </Accordion.Item>
   );

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -32,7 +32,7 @@ export const MwebLandscapePrompt = () => {
       // Angle check needed to diff bw mobile and desktop
       setShowMwebLandscapePrompt(
         match({ angle, isLandscapeHLSStream, isLandscape, type })
-          .with({ isLandscapeHLSStream }, () => false)
+          .with({ isLandscapeHLSStream: true }, () => false)
           .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
           .otherwise(() => isLandscape),
       );

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

@@ -36,7 +36,6 @@ const SecondarySection = ({
   hasSidebar,
 }: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean; hasSidebar?: boolean }>) => {
   const tileLayoutProps = useVideoTileContext();
-  console.log('secondary section', { tilesLength: tiles?.length });
   if (!tiles?.length) {
     return null;
   }