Merge remote-tracking branch 'origin/dev' into fix/WEB-2137-audio-level

100mslive · Sep 19, 2023 · 875b7ba · 875b7ba
2 parents 5c686fd + 5cbe08a
commit 875b7ba
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 91 deletions.
diff --git a/packages/hms-video-web/src/connection/subscribe/subscribeConnection.ts b/packages/hms-video-web/src/connection/subscribe/subscribeConnection.ts
@@ -99,6 +99,10 @@ export default class HMSSubscribeConnection extends HMSConnection {
       const remote = this.remoteStreams.get(streamId)!;
       const TrackCls = e.track.kind === 'audio' ? HMSRemoteAudioTrack : HMSRemoteVideoTrack;
       const track = new TrackCls(remote, e.track);
+      // reset the simulcast layer to none when new video tracks are added, UI will subscribe when required
+      if (e.track.kind === 'video') {
+        remote.setVideoLayerLocally(HMSSimulcastLayer.NONE, 'addTrack', 'subscribeConnection');
+      }
       track.transceiver = e.transceiver;
       const trackId = getSdpTrackIdForMid(this.remoteDescription, e.transceiver?.mid);
       trackId && track.setSdpTrackId(trackId);

diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
@@ -29,6 +29,7 @@ export const DesktopLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -38,7 +39,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
+      {showLeaveOptions ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -47,9 +48,7 @@ export const DesktopLeaveRoom = ({
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0,
             }}
-            onClick={() => {
-              leaveRoom({ endstream: false });
-            }}
+            onClick={() => setShowLeaveRoomAlert(true)}
           >
             <Tooltip title="Leave Room">
               <Box>
@@ -92,42 +91,37 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {permissions?.endRoom || permissions?.hlsStreaming ? (
-                <Dropdown.Item
-                  css={{
-                    bg: '$alert_error_dim',
-                    color: '$alert_error_bright',
-                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+
+              <Dropdown.Item
+                css={{
+                  bg: '$alert_error_dim',
+                  color: '$alert_error_bright',
+                  '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                }}
+                data-testid="end_room_btn"
+              >
+                <LeaveCard
+                  title={showStream ? 'End Stream' : 'End Session'}
+                  subtitle={`The ${
+                    showStream ? 'stream' : 'session'
+                  } will end for everyone. You can't undo this action.`}
+                  bg=""
+                  titleColor="$alert_error_brighter"
+                  icon={<StopIcon height={24} width={24} />}
+                  onClick={() => {
+                    setOpen(false);
+                    setShowEndStreamAlert(true);
                   }}
-                  data-testid="end_room_btn"
-                >
-                  <LeaveCard
-                    title={showStream ? 'End Stream' : 'End Session'}
-                    subtitle={`The ${
-                      showStream ? 'stream' : 'session'
-                    } will end for everyone. You can't undo this action.`}
-                    bg=""
-                    titleColor="$alert_error_brighter"
-                    icon={<StopIcon height={24} width={24} />}
-                    onClick={() => {
-                      setOpen(false);
-                      setShowEndStreamAlert(true);
-                    }}
-                    css={{ p: 0 }}
-                  />
-                </Dropdown.Item>
-              ) : null}
+                  css={{ p: 0 }}
+                />
+              </Dropdown.Item>
             </Dropdown.Content>
           </Dropdown.Root>
         </Flex>
       ) : (
         <LeaveIconButton
           onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
+            setShowLeaveRoomAlert(true);
           }}
           key="LeaveRoom"
           data-testid="leave_room_btn"
@@ -154,16 +148,14 @@ export const DesktopLeaveRoom = ({
         </Dialog.Portal>
       </Dialog.Root>
 
-      {screenType === 'hls_live_streaming' ? (
-        <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-          <Dialog.Portal>
-            <Dialog.Overlay />
-            <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-              <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
-            </Dialog.Content>
-          </Dialog.Portal>
-        </Dialog.Root>
-      ) : null}
+      <Dialog.Root open={showLeaveRoomAlert} modal={false}>
+        <Dialog.Portal>
+          <Dialog.Overlay />
+          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
     </Fragment>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
@@ -30,6 +30,7 @@ export const MwebLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open, name: 'LeaveRoom' });
 
@@ -39,7 +40,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' ? (
+      {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -70,36 +71,24 @@ export const MwebLeaveRoom = ({
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
 
-            {permissions?.endRoom || permissions?.hlsStreaming ? (
-              <LeaveCard
-                title={showStream ? 'End Stream' : 'End Session'}
-                subtitle={`The will end the ${
-                  showStream ? 'stream' : 'session'
-                } for everyone. You can't undo this action.`}
-                bg="$alert_error_dim"
-                titleColor="$alert_error_brighter"
-                css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
-                icon={<StopIcon height={24} width={24} />}
-                onClick={() => {
-                  setOpen(false);
-                  setShowEndStreamAlert(true);
-                }}
-              />
-            ) : null}
+            <LeaveCard
+              title={showStream ? 'End Stream' : 'End Session'}
+              subtitle={`The will end the ${
+                showStream ? 'stream' : 'session'
+              } for everyone. You can't undo this action.`}
+              bg="$alert_error_dim"
+              titleColor="$alert_error_brighter"
+              css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
+              icon={<StopIcon height={24} width={24} />}
+              onClick={() => {
+                setOpen(false);
+                setShowEndStreamAlert(true);
+              }}
+            />
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton
-          key="LeaveRoom"
-          data-testid="leave_room_btn"
-          onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
-          }}
-        >
+        <LeaveIconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => setShowLeaveRoomAlert(true)}>
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -116,13 +105,12 @@ export const MwebLeaveRoom = ({
           />
         </Sheet.Content>
       </Sheet.Root>
-      {screenType === 'hls_live_streaming' ? (
-        <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-          <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
-            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : null}
+
+      <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+          <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
+        </Sheet.Content>
+      </Sheet.Root>
     </Fragment>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.jsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.jsx
@@ -20,7 +20,7 @@ export const MwebLandscapePrompt = () => {
       setShowMwebLandscapePrompt(window.screen.orientation.type.includes('landscape') && isMobile);
       window.screen.orientation.addEventListener('change', handleOrientationChange);
     }
-    return () => window.screen.orientation.removeEventListener(handleOrientationChange);
+    return () => window.screen.orientation.removeEventListener('change', handleOrientationChange);
   }, []);
 
   return (

diff --git a/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx b/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx
@@ -1,22 +1,14 @@
 import React from 'react';
-import { selectHasPeerHandRaised, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
+import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = () => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
-  const actions = useHMSActions();
-
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton
-        active={!isHandRaised}
-        onClick={() => {
-          isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
-        }}
-      >
+      <IconButton active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
         <HandIcon />
       </IconButton>
     </Tooltip>

diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.jsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.jsx
@@ -31,12 +31,13 @@ export const useMyMetadata = () => {
       await hmsActions.lowerLocalPeerHand();
     } else {
       await hmsActions.raiseLocalPeerHand();
+      await update({ isBRBOn: false });
     }
   }, [isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
     const newValue = !metaData?.isBRBOn;
-    await update({ isBRBOn: !metaData?.isBRBOn });
+    await update({ isBRBOn: newValue });
     if (newValue) {
       await hmsActions.lowerLocalPeerHand();
     }