Merge branch 'main' into WEB-1998-recording-design-parity

100mslive · Aug 23, 2023 · 71d02a8 · 71d02a8
2 parents 66e166b + 0fd7d45
commit 71d02a8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 44 deletions.
diff --git 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, Loading, 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);
@@ -68,7 +54,6 @@ export const MwebOptions = () => {
   const [isRecordingLoading, setIsRecordingLoading] = useState(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peerCount = useHMSStore(selectPeerCount);
-
   const emojiCardRef = useRef(null);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
@@ -142,32 +127,6 @@ export const MwebOptions = () => {
               <ActionTile.Title>Participants</ActionTile.Title>
             </ActionTile.Root>
 
-            {isHandRaiseEnabled ? (
-              <ActionTile.Root
-                active={isHandRaised}
-                onClick={() => {
-                  toggleHandRaise();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <HandIcon />
-                <ActionTile.Title>Raise Hand</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-
-            {isBRBEnabled ? (
-              <ActionTile.Root
-                active={isBRBOn}
-                onClick={() => {
-                  toggleBRB();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <BrbIcon />
-                <ActionTile.Title>Be Right Back</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-
             {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />

diff --git 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}
           <PeerMetadata peerId={peerId} />
-          <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
+          {showStreamingUI && isMobile ? null : (
+            <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
+          )}
         </StyledVideoTile.Container>
       ) : null}
     </StyledVideoTile.Root>