PR for main to dev backmerge

packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts

@@ -1,5 +1,6 @@
 import { IAnalyticsPropertiesProvider } from '../../analytics/IAnalyticsPropertiesProvider';
 import { HMSFacingMode, HMSVideoCodec, HMSVideoTrackSettings as IHMSVideoTrackSettings } from '../../interfaces';
+import { isMobile } from '../../utils/support';
 
 export class HMSVideoTrackSettingsBuilder {
   private _width?: number = 320;
@@ -115,9 +116,10 @@ export class HMSVideoTrackSettings implements IHMSVideoTrackSettings, IAnalytics
     if (isScreenShare) {
       dimensionConstraintKey = 'max';
     }
+    const aspectRatio = this.improviseConstraintsAspect();
     return {
-      width: { [dimensionConstraintKey]: this.width },
-      height: { [dimensionConstraintKey]: this.height },
+      width: { [dimensionConstraintKey]: aspectRatio.width },
+      height: { [dimensionConstraintKey]: aspectRatio.height },
       frameRate: this.maxFramerate,
       deviceId: this.deviceId,
       facingMode: this.facingMode,
@@ -134,4 +136,18 @@ export class HMSVideoTrackSettings implements IHMSVideoTrackSettings, IAnalytics
       facingMode: this.facingMode,
     };
   }
+
+  // reverse the height and width if mobile as mobile web browsers override the height and width basis orientation
+  private improviseConstraintsAspect(): Partial<IHMSVideoTrackSettings> {
+    if (isMobile() && this.height && this.width && this.height > this.width) {
+      return {
+        width: this.height,
+        height: this.width,
+      };
+    }
+    return {
+      width: this.width,
+      height: this.height,
+    };
+  }
 }

packages/roomkit-react/src/Button/Button.tsx

@@ -139,12 +139,12 @@ const StyledButton = styled('button', {
   variants: {
     variant: {
       standard: getButtonVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
+        '$surface_brighter',
+        '$surface_bright',
+        '$surface_default',
+        '$surface_dim',
+        '$on_surface_high',
+        '$on_surface_low',
       ),
       danger: getButtonVariants(
         '$alert_error_default',

packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx

@@ -66,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
   ) : null;
 };
 
-export const Chat = ({ screenType, hideControls = false }) => {
+export const Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -122,8 +122,6 @@ export const Chat = ({ screenType, hideControls = false }) => {
       css={{
         size: '100%',
         gap: '$4',
-        marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0',
-        transition: 'margin 0.3s ease-in-out',
       }}
     >
       {isMobile && elements?.chat?.is_overlay ? null : (

packages/roomkit-react/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -18,6 +18,7 @@ export const useEmojiPickerStyles = showing => {
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
+            top: 0.25rem;
             background-color: var(--hms-ui-colors-surface_bright);
             margin-top: 0.5rem;
           }

packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -16,17 +16,19 @@ import { useDropdownList } from '../hooks/useDropdownList';
 export const DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
+  endRoom,
 }: {
   leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
+  endRoom: () => void;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStream = permissions?.hlsStreaming && isStreamingOn;
+  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -36,7 +38,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {permissions.hlsStreaming ? (
+      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -46,11 +48,7 @@ export const DesktopLeaveRoom = ({
               borderBottomRightRadius: 0,
             }}
             onClick={() => {
-              if (screenType === 'hls_live_streaming') {
-                setShowLeaveRoomAlert(true);
-              } else {
-                leaveRoom({ endstream: false });
-              }
+              leaveRoom({ endstream: false });
             }}
           >
             <Tooltip title="Leave Room">
@@ -94,7 +92,7 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {isStreamingOn && permissions?.hlsStreaming ? (
+              {permissions?.endRoom || permissions?.hlsStreaming ? (
                 <Dropdown.Item
                   css={{
                     bg: '$alert_error_dim',
@@ -148,7 +146,7 @@ export const DesktopLeaveRoom = ({
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
               setShowEndStreamAlert={setShowEndStreamAlert}
-              leaveRoom={leaveRoom}
+              leaveRoom={isStreamingOn ? leaveRoom : endRoom}
               isStreamingOn={isStreamingOn}
               isModal
             />

packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx

@@ -46,6 +46,10 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
       ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
     }
   };
+  const endRoom = () => {
+    hmsActions.endRoom(false, 'End Room');
+    redirectToLeave();
+  };
 
   const leaveRoom = async ({ endstream = false }) => {
     if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) {
@@ -59,8 +63,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
     return null;
   }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   );
 };

packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx

@@ -17,18 +17,20 @@ import { useDropdownList } from '../hooks/useDropdownList';
 export const MwebLeaveRoom = ({
   leaveRoom,
   screenType,
+  endRoom,
 }: {
   leaveRoom: (args: { endstream: boolean }) => void;
   screenType: keyof ConferencingScreen;
+  endRoom: () => void;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
+  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
 
-  const showStream = permissions?.hlsStreaming && isStreamingOn;
   useDropdownList({ open, name: 'LeaveRoom' });
 
   if (!permissions || !isConnected) {
@@ -37,7 +39,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {permissions?.hlsStreaming ? (
+      {screenType !== 'hls_live_streaming' ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -67,7 +69,8 @@ export const MwebLeaveRoom = ({
               onClick={() => leaveRoom({ endstream: false })}
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
-            {isStreamingOn && permissions?.hlsStreaming ? (
+
+            {permissions?.endRoom || permissions?.hlsStreaming ? (
               <LeaveCard
                 title={showStream ? 'End Stream' : 'End Session'}
                 subtitle={`The will end the ${
@@ -108,7 +111,7 @@ export const MwebLeaveRoom = ({
         <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
           <EndSessionContent
             setShowEndStreamAlert={setShowEndStreamAlert}
-            leaveRoom={leaveRoom}
+            leaveRoom={isStreamingOn ? leaveRoom : endRoom}
             isStreamingOn={isStreamingOn}
           />
         </Sheet.Content>