From 1311647451b1f294a2c6f8c347b9273ce8912907 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Wed, 23 Aug 2023 16:00:07 +0530 Subject: [PATCH 1/3] fix: hide name in mweb hls, remove options --- .../src/Prebuilt/common/hooks.js | 9 +++- .../SplitComponents/MwebOptions.jsx | 45 +------------------ .../src/Prebuilt/components/VideoTile.jsx | 9 +++- 3 files changed, 18 insertions(+), 45 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.js b/packages/roomkit-react/src/Prebuilt/common/hooks.js index 82df0d3278..3705412069 100644 --- a/packages/roomkit-react/src/Prebuilt/common/hooks.js +++ b/packages/roomkit-react/src/Prebuilt/common/hooks.js @@ -1,8 +1,15 @@ // @ts-check import { useEffect, useRef, useState } from 'react'; import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form'; -import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk'; +import { + selectAvailableRoleNames, + selectIsConnectedToRoom, + selectLocalPeerRoleName, + selectPeerCount, + useHMSStore, +} from '@100mslive/react-sdk'; import { useRoomLayout } from '../provider/roomLayoutProvider'; +import { useHLSViewerRole } from '../components/AppData/useUISettings'; import { isInternalRole } from './utils'; /** diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx index d7406183bc..6533ef36c0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx @@ -9,16 +9,7 @@ import { useHMSStore, useRecordingStreaming, } from '@100mslive/react-sdk'; -import { - BrbIcon, - CrossIcon, - DragHandleIcon, - EmojiIcon, - HandIcon, - PeopleIcon, - RecordIcon, - SettingsIcon, -} from '@100mslive/react-icons'; +import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsIcon } from '@100mslive/react-icons'; import { Box, Tooltip } from '../../../../'; import { Sheet } from '../../../../Sheet'; import IconButton from '../../../IconButton'; @@ -31,10 +22,8 @@ import { ChangeNameModal } from '.././ChangeNameModal'; import { MuteAllModal } from '.././MuteAllModal'; import { useSidepaneToggle } from '../../AppData/useSidepane'; import { useDropdownList } from '../../hooks/useDropdownList'; -import { useIsFeatureEnabled } from '../../hooks/useFeatures'; -import { useMyMetadata } from '../../hooks/useMetadata'; import { getFormattedCount } from '../../../common/utils'; -import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants'; +import { SIDE_PANE_OPTIONS } from '../../../common/constants'; const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground')); @@ -57,9 +46,6 @@ export const MwebOptions = () => { const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming(); const [openModals, setOpenModals] = useState(new Set()); - const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata(); - const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); - const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB); const [openOptionsSheet, setOpenOptionsSheet] = useState(false); const [openSettingsSheet, setOpenSettingsSheet] = useState(false); @@ -67,7 +53,6 @@ export const MwebOptions = () => { const [showRecordingOn, setShowRecordingOn] = useState(false); const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); const peerCount = useHMSStore(selectPeerCount); - const emojiCardRef = useRef(null); const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); @@ -141,32 +126,6 @@ export const MwebOptions = () => { Participants - {isHandRaiseEnabled ? ( - { - toggleHandRaise(); - setOpenOptionsSheet(false); - }} - > - - Raise Hand - - ) : null} - - {isBRBEnabled ? ( - { - toggleBRB(); - setOpenOptionsSheet(false); - }} - > - - Be Right Back - - ) : null} - {isVideoOn ? ( setOpenOptionsSheet(false)} /> diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx index 19844d9e77..8f24bda3e8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx @@ -1,4 +1,5 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react'; +import { useMedia } from 'react-use'; import { selectAudioTrackByPeerID, selectIsPeerAudioEnabled, @@ -15,11 +16,13 @@ import TileMenu from './TileMenu/TileMenu'; import { useBorderAudioLevel } from '../../AudioLevel'; import { Avatar } from '../../Avatar'; import { VideoTileStats } from '../../Stats'; +import { config as cssConfig } from '../../Theme'; import { Video } from '../../Video'; import { StyledVideoTile } from '../../VideoTile'; import { getVideoTileLabel } from './peerTileUtils'; import { useAppConfig } from './AppData/useAppConfig'; import { useIsHeadless, useUISettings } from './AppData/useUISettings'; +import { useShowStreamingUI } from '../common/hooks'; import { UI_SETTINGS } from '../common/constants'; const Tile = ({ @@ -48,6 +51,8 @@ const Tile = ({ const borderAudioRef = useBorderAudioLevel(audioTrack?.id); const isVideoDegraded = track?.degraded; const isLocal = localPeerID === peerId; + const isMobile = useMedia(cssConfig.media.md); + const showStreamingUI = useShowStreamingUI(); const label = getVideoTileLabel({ peerName, track, @@ -142,7 +147,9 @@ const Tile = ({ /> ) : null} - + {showStreamingUI && isMobile ? null : ( + + )} ) : null} From 7fc62967bcfc905fea7c83fafe3466f39327b4d6 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Wed, 23 Aug 2023 16:07:23 +0530 Subject: [PATCH 2/3] fix: lint --- packages/roomkit-react/src/Prebuilt/common/hooks.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.js b/packages/roomkit-react/src/Prebuilt/common/hooks.js index 3705412069..5d14cb4b6f 100644 --- a/packages/roomkit-react/src/Prebuilt/common/hooks.js +++ b/packages/roomkit-react/src/Prebuilt/common/hooks.js @@ -4,12 +4,10 @@ import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_fo import { selectAvailableRoleNames, selectIsConnectedToRoom, - selectLocalPeerRoleName, selectPeerCount, useHMSStore, } from '@100mslive/react-sdk'; import { useRoomLayout } from '../provider/roomLayoutProvider'; -import { useHLSViewerRole } from '../components/AppData/useUISettings'; import { isInternalRole } from './utils'; /** From 8860d37aa93678681b25c6f82844eb9ba08af692 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Wed, 23 Aug 2023 16:18:56 +0530 Subject: [PATCH 3/3] fix: lint --- packages/roomkit-react/src/Prebuilt/common/hooks.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.js b/packages/roomkit-react/src/Prebuilt/common/hooks.js index 5d14cb4b6f..82df0d3278 100644 --- a/packages/roomkit-react/src/Prebuilt/common/hooks.js +++ b/packages/roomkit-react/src/Prebuilt/common/hooks.js @@ -1,12 +1,7 @@ // @ts-check import { useEffect, useRef, useState } from 'react'; import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form'; -import { - selectAvailableRoleNames, - selectIsConnectedToRoom, - selectPeerCount, - useHMSStore, -} from '@100mslive/react-sdk'; +import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk'; import { useRoomLayout } from '../provider/roomLayoutProvider'; import { isInternalRole } from './utils';