diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx index 8b2d7dcae3..57139cb9ad 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx +++ b/packages/roomkit-react/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 ( + + 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', + }, + }} + > + + + + + e.stopPropagation()} + css={{ w: 'max-content', bg: '$surface_default', py: 0 }} + align="end" + > + {children} + + + ); +}; + +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 ? ( - setTrackEnabled('audio', false)}> - - - Mute Audio for All - - - ) : null} - - {!isAudioOnForSomePeers && permissions?.unmute ? ( - setTrackEnabled('audio', true)}> - - - Request to Unmute Audio for All - - - ) : null} - - )} - - {role.publishParams.allowed.includes('video') && ( - <> - {isVideoOnForSomePeers && permissions?.mute ? ( - setTrackEnabled('video', false)}> - - - Mute Video for All - - - ) : null} - - {!isVideoOnForSomePeers && permissions?.unmute ? ( - setTrackEnabled('video', true)}> - - - Request to Unmute Video for All - - - ) : 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 ( - - 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', - }, - }} - > - - - - - e.stopPropagation()} - css={{ w: 'max-content', bg: '$surface_default', py: 0 }} - align="end" - > - {canRemoveRoleFromStage && ( - - - - Remove all from Stage - - - )} - - {canMuteOrUnmute && } - - {canRemoveRoleFromRoom && ( - - - - Remove all from Room - - - )} - - + + {canRemoveRoleFromStage ? ( + + + + Remove all from Stage + + + ) : null} + + {match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute }) + .with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => { + return ( + setTrackEnabled('audio', false)}> + + + Mute Audio for All + + + ); + }) + .with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => { + return ( + setTrackEnabled('audio', true)}> + + + Request to Unmute Audio for All + + + ); + }) + .otherwise(() => null)} + {match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute }) + .with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => { + return ( + setTrackEnabled('video', false)}> + + + Mute Video for All + + + ); + }) + .with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => { + return ( + setTrackEnabled('video', true)}> + + + Request to Unmute Video for All + + + ); + }) + .otherwise(() => null)} + + {canRemoveRoleFromRoom ? ( + + + + Remove all from Room + + + ) : null} + ); };