From 37df1141e514b8aff54626bff190277025647717 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Fri, 1 Mar 2024 11:41:09 +0530 Subject: [PATCH 1/2] fix: don't render dropdown trigger if no options --- .../components/Footer/RoleOptions.tsx | 134 ++++++++++-------- 1 file changed, 76 insertions(+), 58 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx index 8b2d7dcae3..e31444ba6a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx @@ -64,9 +64,16 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam return null; } + const canPublishAudio = role.publishParams.allowed.includes('audio'); + const canPublishVideo = role.publishParams.allowed.includes('video'); + + if (!canPublishAudio && !canPublishVideo) { + return null; + } + return ( <> - {role.publishParams.allowed.includes('audio') && ( + {canPublishAudio && ( <> {isAudioOnForSomePeers && permissions?.mute ? ( setTrackEnabled('audio', false)}> @@ -88,7 +95,7 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam )} - {role.publishParams.allowed.includes('video') && ( + {canPublishVideo && ( <> {isVideoOnForSomePeers && permissions?.mute ? ( setTrackEnabled('video', false)}> @@ -113,8 +120,47 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam ); }; -export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => { +const DropdownWrapper = ({ children }: { children: React.ReactNode }) => { const [openOptions, setOpenOptions] = useState(false); + if (React.Children.count(children) === 0) { + return null; + } + 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(); @@ -157,60 +203,32 @@ 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 + + + )} + + {canMuteOrUnmute && } + + {canRemoveRoleFromRoom && ( + + + + Remove all from Room + + + )} + ); }; From 204eeab923981d56d82c2373a728bda6680a1a8c Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Fri, 1 Mar 2024 13:48:55 +0530 Subject: [PATCH 2/2] fix: dropdown showing without any options --- .../components/Footer/RoleOptions.tsx | 175 ++++++++---------- 1 file changed, 78 insertions(+), 97 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx index e31444ba6a..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,99 +33,14 @@ const optionTextCSS = { whiteSpace: 'nowrap', }; -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 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; - isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn; - isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn; - }); - - const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => { - try { - await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled }); - } catch (e) { - console.error(e); - } - }; - - if (!role) { - return null; - } - - const canPublishAudio = role.publishParams.allowed.includes('audio'); - const canPublishVideo = role.publishParams.allowed.includes('video'); - - if (!canPublishAudio && !canPublishVideo) { - return null; - } - - return ( - <> - {canPublishAudio && ( - <> - {isAudioOnForSomePeers && permissions?.mute ? ( - setTrackEnabled('audio', false)}> - - - Mute Audio for All - - - ) : null} - - {!isAudioOnForSomePeers && permissions?.unmute ? ( - setTrackEnabled('audio', true)}> - - - Request to Unmute Audio for All - - - ) : null} - - )} - - {canPublishVideo && ( - <> - {isVideoOnForSomePeers && permissions?.mute ? ( - setTrackEnabled('video', false)}> - - - Mute Video for All - - - ) : null} - - {!isVideoOnForSomePeers && permissions?.unmute ? ( - setTrackEnabled('video', true)}> - - - Request to Unmute Video for All - - - ) : null} - - )} - - ); -}; - const DropdownWrapper = ({ children }: { children: React.ReactNode }) => { const [openOptions, setOpenOptions] = useState(false); - if (React.Children.count(children) === 0) { + if (React.Children.toArray(children).length === 0) { return null; } + React.Children.map(children, child => { + console.log({ child }); + }); return ( { + if (peer.isLocal) { + return; + } + 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) => { + try { + await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled }); + } catch (e) { + console.error(e); + } + }; // 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) || @@ -204,7 +142,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList return ( - {canRemoveRoleFromStage && ( + {canRemoveRoleFromStage ? ( - )} + ) : null} - {canMuteOrUnmute && } + {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 && ( + {canRemoveRoleFromRoom ? ( - )} + ) : null} ); };