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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.8-alpha.7",
+  "version": "0.2.8-alpha.9",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.8-alpha.7",
+    "@100mslive/hls-player": "0.2.8-alpha.9",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.8-alpha.7",
-    "@100mslive/react-icons": "0.9.8-alpha.7",
-    "@100mslive/react-sdk": "0.9.8-alpha.7",
+    "@100mslive/hms-virtual-background": "1.12.8-alpha.9",
+    "@100mslive/react-icons": "0.9.8-alpha.9",
+    "@100mslive/react-sdk": "0.9.8-alpha.9",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "48bc1b57113a4245b79055a80f4f1f5d3b8795aa"
+  "gitHead": "2a735b6edf0b63927744abb555b47ab9be6e5891"
 }

package/src/Button/Button.tsx

@@ -20,22 +20,22 @@ const getOutlinedVariants = (
   textDisabled: string,
 ) => {
   return {
-    bg: '$transparent',
+    bg: 'transparent',
     border: `solid $space$px $colors${base}`,
     c: text,
     '&[disabled]': {
       c: textDisabled,
-      bg: '$transparent',
+      bg: 'transparent',
       border: `solid $space$px $colors${disabled}`,
       cursor: 'not-allowed',
     },
     '&:not([disabled]):hover': {
       border: `solid $space$px $colors${hover}`,
-      bg: '$transparent',
+      bg: 'transparent',
     },
     '&:not([disabled]):active': {
       border: `solid $space$px $colors${active}`,
-      bg: '$transparent',
+      bg: 'transparent',
     },
     '&:not([disabled]):focus-visible': {
       boxShadow: `0 0 0 3px $colors${base}`,

package/src/Fieldset/Fieldset.tsx

@@ -5,7 +5,7 @@ const StyledFieldset = styled('fieldset', {
   alignItems: 'center',
   justifyContent: 'space-between',
   border: 'none',
-  backgroundColor: '$transparent',
+  backgroundColor: 'transparent',
 });
 
 export const Fieldset = StyledFieldset;

package/src/Input/PasswordInput.stories.tsx

@@ -25,7 +25,7 @@ const Template: ComponentStory<typeof PasswordInput.Root> = args => {
           showPassword={showPassword}
           onChange={e => setText(e.target.value)}
         />
-        <PasswordInput.Icons ref={ref} css={{ bg: '$transparent' }}>
+        <PasswordInput.Icons ref={ref} css={{ bg: 'transparent' }}>
           <PasswordInput.ShowIcon
             showPassword={showPassword}
             onClick={() => {

package/src/Pagination/StyledPagination.stories.tsx

@@ -41,7 +41,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
         disabled={disableLeft}
         onClick={prevPage}
         type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
       >
         <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>
@@ -54,7 +54,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
         disabled={disableRight}
         onClick={nextPage}
         type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
       >
         <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>

package/src/Prebuilt/IconButton.tsx

@@ -11,7 +11,7 @@ const IconButton = styled(BaseIconButton, {
     active: {
       true: {
         color: '$on_surface_high',
-        backgroundColor: '$transparent',
+        backgroundColor: 'transparent',
       },
       false: {
         border: '1px solid transparent',

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -2,16 +2,20 @@ import React, { MutableRefObject, useCallback, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { VariableSizeList } from 'react-window';
 import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
+import { match } from 'ts-pattern';
 import { selectHMSMessagesCount, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
-import { Flex } from '../../../Layout';
+import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit any
+import { EmojiReaction } from '../EmojiReaction';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 export const Chat = () => {
@@ -21,6 +25,9 @@ export const Chat = () => {
   const vanillaStore = useHMSVanillaStore();
   const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
   const isMobile = useMedia(cssConfig.media.md);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
+
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -46,6 +53,7 @@ export const Chat = () => {
     >
       {isMobile && elements?.chat?.is_overlay ? null : <PinnedMessage />}
       <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
+
       <ChatPaused />
       <ChatBlocked />
       {isMobile && elements?.chat?.is_overlay ? <PinnedMessage /> : null}
@@ -54,6 +62,38 @@ export const Chat = () => {
           <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
         </ChatFooter>
       ) : null}
+      {(isMobileHLSStream || isLandscapeStream) && (
+        <Box
+          css={{
+            position: 'absolute',
+            ...match({ isLandscapeStream, isChatEnabled })
+              .with(
+                {
+                  isLandscapeStream: true,
+                  isChatEnabled: true,
+                },
+                () => ({ bottom: '$19', right: '$10' }),
+              )
+              .with(
+                {
+                  isLandscapeStream: true,
+                  isChatEnabled: false,
+                },
+                () => ({ bottom: '$20', right: '$10' }),
+              )
+              .with(
+                {
+                  isLandscapeStream: false,
+                  isChatEnabled: true,
+                },
+                () => ({ bottom: '$19', right: '$8' }),
+              )
+              .otherwise(() => ({})),
+          }}
+        >
+          <EmojiReaction />
+        </Box>
+      )}
     </Flex>
   );
 };

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -8,16 +8,16 @@ import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover,
 import { IconButton } from '../../../IconButton';
 import { MoreSettings } from '../MoreSettings/MoreSettings';
 import { RaiseHand } from '../RaiseHand';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { ToastManager } from '../Toast/ToastManager';
 import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useChatDraftMessage } from '../AppData/useChatState';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
@@ -148,7 +148,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   }
 
   return (
-    <Box>
+    <Box css={{ position: 'relative' }}>
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
@@ -202,10 +202,12 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             align="center"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
+              minHeight: '$16',
               maxHeight: '$24',
               position: 'relative',
+              py: '$6',
               pl: '$8',
-              flexGrow: '1',
+              flexGrow: 1,
               r: '$1',
               '@md': {
                 minHeight: 'unset',
@@ -266,15 +268,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             </BaseIconButton>
           </Flex>
           {(isMwebHLSStream || isLandscapeHLSStream) && (
-            <Flex
-              css={{
-                alignItems: 'center',
-              }}
-              gap="1"
-            >
-              {noAVPermissions ? <RaiseHand /> : null}
-              <MoreSettings elements={elements} screenType={screenType} />
-            </Flex>
+            <>
+              <Flex
+                css={{
+                  alignItems: 'center',
+                }}
+                gap="1"
+              >
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
+                <MoreSettings elements={elements} screenType={screenType} />
+              </Flex>
+            </>
           )}
         </Flex>
       )}

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -7,9 +7,7 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  // useHMSActions,
   useHMSStore,
-  // useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
@@ -20,6 +18,7 @@ import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useDropdownList } from './hooks/useDropdownList';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
@@ -33,6 +32,9 @@ export const EmojiReaction = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
 
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
@@ -65,24 +67,32 @@ export const EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return isMobile ? (
-    <EmojiCard sendReaction={sendReaction} />
-  ) : (
-    <Fragment>
-      <Dropdown.Root open={open} onOpenChange={setOpen}>
-        <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
-          <IconButton>
-            <Tooltip title="Emoji reaction">
-              <Box>
-                <EmojiIcon />
-              </Box>
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
-          <EmojiCard sendReaction={sendReaction} />
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Fragment>
+
+  if ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+    return <EmojiCard sendReaction={sendReaction} />;
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={setOpen}>
+      <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
+        <IconButton
+          css={
+            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}
+          }
+        >
+          <Tooltip title="Emoji reaction">
+            <Box>
+              <EmojiIcon />
+            </Box>
+          </Tooltip>
+        </IconButton>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        sideOffset={5}
+        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}
+        css={{ p: '$8', bg: '$surface_default' }}
+      >
+        <EmojiCard sendReaction={sendReaction} />
+      </Dropdown.Content>
+    </Dropdown.Root>
   );
 };

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>
   );
 };