@100mslive/roomkit-react 0.2.8-alpha.3 → 0.2.8-alpha.5

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.8-alpha.3",
+  "version": "0.2.8-alpha.5",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.8-alpha.3",
+    "@100mslive/hls-player": "0.2.8-alpha.5",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.8-alpha.3",
-    "@100mslive/react-icons": "0.9.8-alpha.3",
-    "@100mslive/react-sdk": "0.9.8-alpha.3",
+    "@100mslive/hms-virtual-background": "1.12.8-alpha.5",
+    "@100mslive/react-icons": "0.9.8-alpha.5",
+    "@100mslive/react-sdk": "0.9.8-alpha.5",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -121,5 +121,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "74f622b36302db0279d3b0eb4c87278ae8fdf9db"
+  "gitHead": "6ba28232c0bb10f4ba990777369c5c5b132203b1"
 }

package/src/Prebuilt/common/hooks.ts

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  parsedUserAgent,
   selectAvailableRoleNames,
   selectIsConnectedToRoom,
   selectPeerCount,
@@ -10,6 +12,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { config } from '../../Theme';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { CHAT_SELECTOR } from './constants';
@@ -100,3 +103,21 @@ export const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }
   }
   return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
 };
+
+export const useIsLandscape = () => {
+  const isMobile = parsedUserAgent.getDevice().type === 'mobile';
+  const isLandscape = useMedia(config.media.ls);
+  return isMobile && isLandscape;
+};
+
+export const useLandscapeHLSStream = () => {
+  const isLandscape = useIsLandscape();
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isLandscape && screenType === 'hls_live_streaming';
+};
+
+export const useMobileHLSStream = () => {
+  const isMobile = useMedia(config.media.md);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isMobile && screenType === 'hls_live_streaming';
+};

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,10 +2,12 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
 import { ChatSelectorContainer } from './ChatSelectorContainer';
@@ -17,7 +19,7 @@ import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppDa
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
-import { useDefaultChatSelection } from '../../common/hooks';
+import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
@@ -77,7 +79,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
   const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
@@ -87,18 +89,21 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
+  const isMwebHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useEffect(() => {
     if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
       setRoleSelector(defaultSelection);
     } else {
       // @ts-ignore
-      if (!elements?.chat?.disable_autofocus) {
+      if (!(isMobile || isLandscapeHLSStream) || !elements?.chat?.disable_autofocus) {
         inputRef.current?.focus();
       }
     }
-    // @ts-ignore
-  }, [defaultSelection, elements?.chat?.disable_autofocus, selectedPeer, selectedRole, setRoleSelector]);
+  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements?.chat]);
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -197,18 +202,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             align="center"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
-              minHeight: '$16',
               maxHeight: '$24',
               position: 'relative',
-              py: '$6',
               pl: '$8',
-              flexGrow: 1,
+              flexGrow: '1',
               r: '$1',
               '@md': {
                 minHeight: 'unset',
                 h: '$14',
                 boxSizing: 'border-box',
               },
+              ...(isLandscapeHLSStream ? { minHeight: '$14', py: 0 } : {}),
             }}
           >
             {children}
@@ -223,6 +227,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               placeholder={message_placeholder}
               ref={inputRef}
               required
+              autoFocus={!(isMobile || isLandscapeHLSStream)}
               onKeyPress={async event => {
                 if (event.key === 'Enter') {
                   if (!event.shiftKey) {
@@ -237,7 +242,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               onCut={e => e.stopPropagation()}
               onCopy={e => e.stopPropagation()}
             />
-            {!isMobile ? (
+            {!isMobile && !isLandscapeHLSStream ? (
               <EmojiPicker
                 onSelect={emoji => {
                   if (inputRef.current) {
@@ -260,6 +265,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               <SendIcon />
             </BaseIconButton>
           </Flex>
+          {(isMwebHLSStream || isLandscapeHLSStream) && (
+            <Flex
+              css={{
+                alignItems: 'center',
+              }}
+              gap="1"
+            >
+              {noAVPermissions ? <RaiseHand /> : null}
+              <MoreSettings elements={elements} screenType={screenType} />
+            </Flex>
+          )}
         </Flex>
       )}
     </Box>

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,10 +6,13 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { Footer } from './Footer/Footer';
+import { LeaveRoom } from './Leave/LeaveRoom';
+import { MoreSettings } from './MoreSettings/MoreSettings';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
 // @ts-ignore: No implicit Any
 import { ActivatedPIP } from './PIP/PIPComponent';
@@ -23,12 +26,14 @@ import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
+import { RaiseHand } from './RaiseHand';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 // @ts-ignore: No implicit Any
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
@@ -47,12 +52,20 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
+  // using it in hls stream to show action button when chat is disabled
+  const showChat = !!screenProps.elements?.chat;
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0 && isMobileDevice) {
       setHideControls(value => !value);
     }
   };
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
 
   useEffect(() => {
     let timeout: undefined | ReturnType<typeof setTimeout>;
@@ -113,7 +126,7 @@ export const ConferenceScreen = () => {
         </Box>
       ) : null}
       <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-        {!screenProps.hideSections.includes('header') && (
+        {!(screenProps.hideSections.includes('header') || isMwebHLSStream) && (
           <Box
             ref={headerRef}
             css={{
@@ -129,6 +142,11 @@ export const ConferenceScreen = () => {
             <Header />
           </Box>
         )}
+        {isMwebHLSStream && (
+          <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
+            <LeaveRoom screenType={screenProps.screenType} />
+          </Flex>
+        )}
         <Box
           css={{
             w: '100%',
@@ -155,7 +173,7 @@ export const ConferenceScreen = () => {
             />
           ) : null}
         </Box>
-        {!screenProps.hideSections.includes('footer') && screenProps.elements && (
+        {!screenProps.hideSections.includes('footer') && screenProps.elements && !isMwebHLSStream && (
           <Box
             ref={footerRef}
             css={{
@@ -174,6 +192,20 @@ export const ConferenceScreen = () => {
             <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
           </Box>
         )}
+        {isMwebHLSStream && !showChat && (
+          <Flex
+            css={{
+              alignItems: 'center',
+              pr: '$4',
+              pb: '$4',
+            }}
+            justify="end"
+            gap="1"
+          >
+            {noAVPermissions ? <RaiseHand /> : null}
+            <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
+          </Flex>
+        )}
         <RoleChangeRequestModal />
         <HLSFailureModal />
         <ActivatedPIP />

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -12,7 +12,6 @@ import { EmojiReaction } from '../EmojiReaction';
 import { LeaveRoom } from '../Leave/LeaveRoom';
 // @ts-ignore: No implicit Any
 import { MoreSettings } from '../MoreSettings/MoreSettings';
-// @ts-ignore: No implicit Any
 import { RaiseHand } from '../RaiseHand';
 // @ts-ignore: No implicit Any
 import { ScreenshareToggle } from '../ScreenShareToggle';

package/src/Prebuilt/components/HMSVideo/Controls.jsx

@@ -1,4 +1,4 @@
-import { Flex, styled } from '../../../';
+import { Flex, styled } from '../../..';
 
 export const VideoControls = styled(Flex, {
   justifyContent: 'center',

package/src/Prebuilt/components/HMSVideo/FullscreenButton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { Flex, IconButton, Tooltip } from '../../..';
+
+export const FullScreenButton = ({ isFullScreen, onToggle }: { isFullScreen: boolean; onToggle: () => void }) => {
+  return (
+    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side="top">
+      <IconButton css={{ margin: '0px' }} onClick={onToggle} key="fullscreen_btn" data-testid="fullscreen_btn">
+        <Flex>{isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}</Flex>
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/HMSVideo/{HLSAutoplayBlockedPrompt.jsx → HLSAutoplayBlockedPrompt.tsx}

@@ -1,14 +1,21 @@
 import React from 'react';
-import { Button, Dialog, Text } from '../../../';
+import { Button, Dialog, Text } from '../../..';
+// @ts-ignore
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
 
-export function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
+export function HLSAutoplayBlockedPrompt({
+  open,
+  unblockAutoPlay,
+}: {
+  open: boolean;
+  unblockAutoPlay: () => Promise<void>;
+}) {
   return (
     <Dialog.Root
       open={open}
-      onOpenChange={value => {
+      onOpenChange={async value => {
         if (!value) {
-          unblockAutoPlay();
+          await unblockAutoPlay();
         }
       }}
     >
@@ -22,8 +29,8 @@ export function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
         <DialogRow justify="end">
           <Button
             variant="primary"
-            onClick={() => {
-              unblockAutoPlay();
+            onClick={async () => {
+              await unblockAutoPlay();
             }}
           >
             Play stream

package/src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
 import { IconButton, Tooltip } from '../../../';
+import { useHMSPlayerContext } from './PlayerContext';
 
-export function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {
+export function HLSCaptionSelector({ isEnabled }: { isEnabled: boolean }) {
+  const { hlsPlayer } = useHMSPlayerContext();
   return (
     <Tooltip title="Subtitles/closed captions" side="top">
-      <IconButton css={{ p: '$2' }} onClick={() => onClick()}>
+      <IconButton css={{ p: '$2' }} onClick={() => hlsPlayer?.toggleCaption()}>
         {isEnabled ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { HMSHLSLayer } from '@100mslive/hls-player';
+import { CheckIcon, CrossIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, Text, Tooltip } from '../../..';
+import { Sheet } from '../../../Sheet';
+import { config } from '../../../Theme';
+import { useIsLandscape } from '../../common/hooks';
+
+export function HLSQualitySelector({
+  open,
+  onOpenChange,
+  layers,
+  onQualityChange,
+  selection,
+  isAuto,
+}: {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  layers: HMSHLSLayer[];
+  onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
+  selection: HMSHLSLayer;
+  isAuto: boolean;
+}) {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+  if (isMobile || isLandscape) {
+    return (
+      <Sheet.Root open={open} onOpenChange={onOpenChange}>
+        <Sheet.Trigger asChild data-testid="quality_selector">
+          <Flex
+            css={{
+              color: '$on_primary_high',
+              r: '$1',
+              cursor: 'pointer',
+              p: '$2',
+            }}
+          >
+            <SettingsIcon />
+          </Flex>
+        </Sheet.Trigger>
+
+        {layers.length > 0 && (
+          <Sheet.Content css={{ bg: '$surface_default', pb: '$1' }} onClick={() => onOpenChange(false)}>
+            <Sheet.Title
+              css={{
+                display: 'flex',
+                color: '$on_surface_high',
+                w: '100%',
+                justifyContent: 'space-between',
+                mt: '$8',
+                fontSize: '$md',
+                px: '$10',
+                pb: '$8',
+                borderBottom: '1px solid $border_bright',
+                alignItems: 'center',
+              }}
+            >
+              Quality
+              <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
+                <CrossIcon />
+              </Sheet.Close>
+            </Sheet.Title>
+            {layers.map(layer => {
+              return (
+                <Flex
+                  align="center"
+                  css={{
+                    w: '100%',
+                    bg: '$surface_default',
+                    '&:hover': {
+                      bg: '$surface_brighter',
+                    },
+                    cursor: 'pointer',
+                    gap: '$4',
+                    py: '$8',
+                    px: '$10',
+                  }}
+                  key={layer.width}
+                  onClick={() => onQualityChange(layer)}
+                >
+                  <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                    {getQualityText(layer)}
+                  </Text>
+                  <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                    {getBitrateText(layer)}
+                  </Text>
+                  {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                    <CheckIcon width="16px" height="16px" />
+                  )}
+                </Flex>
+              );
+            })}
+            <Flex
+              align="center"
+              css={{
+                w: '100%',
+                bg: '$surface_default',
+                '&:hover': {
+                  bg: '$surface_brighter',
+                },
+                cursor: 'pointer',
+                gap: '$4',
+                py: '$8',
+                px: '$10',
+              }}
+              key="auto"
+              onClick={() => onQualityChange({ height: 'auto' })}
+            >
+              <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+                Auto
+              </Text>
+              {isAuto && <CheckIcon width="16px" height="16px" />}
+            </Flex>
+          </Sheet.Content>
+        )}
+      </Sheet.Root>
+    );
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)}>
+      <Dropdown.Trigger asChild data-testid="quality_selector">
+        <Flex
+          css={{
+            color: '$on_primary_high',
+            r: '$1',
+            cursor: 'pointer',
+            p: '$2',
+          }}
+        >
+          <Tooltip title="Select Quality" side="top">
+            <Flex align="center">
+              <Box
+                css={{
+                  w: '$9',
+                  h: '$9',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  c: '$on_surface_high',
+                }}
+              >
+                <SettingsIcon />
+              </Box>
+              <Text
+                variant={{
+                  '@md': 'sm',
+                  '@sm': 'xs',
+                  '@xs': 'tiny',
+                }}
+                css={{ display: 'flex', alignItems: 'center', ml: '$2', c: '$on_surface_medium' }}
+              >
+                {isAuto && (
+                  <>
+                    Auto
+                    <Box
+                      css={{
+                        mx: '$2',
+                        w: '$2',
+                        h: '$2',
+                        background: '$on_surface_medium',
+                        r: '$1',
+                      }}
+                    />
+                  </>
+                )}
+                {selection && Math.min(selection.width || 0, selection.height || 0)}p
+              </Text>
+            </Flex>
+          </Tooltip>
+        </Flex>
+      </Dropdown.Trigger>
+      {layers.length > 0 && (
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{
+            height: 'auto',
+            maxHeight: '$52',
+            w: '$40',
+            bg: '$surface_bright',
+            py: '$4',
+            gap: '$4',
+            display: 'grid',
+          }}
+        >
+          {layers.map(layer => {
+            return (
+              <Dropdown.Item
+                onClick={() => onQualityChange(layer)}
+                key={layer.width}
+                css={{
+                  bg:
+                    !isAuto && layer.width === selection?.width && layer.height === selection?.height
+                      ? '$surface_default'
+                      : '$surface_bright',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  p: '$2 $4 $2 $8',
+                  h: '$12',
+                  gap: '$2',
+                }}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Dropdown.Item>
+            );
+          })}
+          <Dropdown.Item
+            onClick={() => onQualityChange({ height: 'auto' })}
+            key="auto"
+            css={{
+              bg: !isAuto ? '$surface_bright' : '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              p: '$2 $4 $2 $8',
+              h: '$12',
+              gap: '$2',
+            }}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Dropdown.Item>
+        </Dropdown.Content>
+      )}
+    </Dropdown.Root>
+  );
+}
+
+const getQualityText = (layer: HMSHLSLayer) => `${Math.min(layer.height || 0, layer.width || 0)}p `;
+const getBitrateText = (layer: HMSHLSLayer) => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -20,6 +20,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         },
         '& video::-webkit-media-text-track-display': {
           padding: '0 $4',
+          boxShadow: '0px 1px 3px 0px #000000A3',
         },
         '& video::-webkit-media-text-track-container': {
           fontSize: '$space$10 !important',
@@ -33,6 +34,8 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
           flex: '1 1 0',
           margin: '0 auto',
           minHeight: '0',
+          objectFit: 'contain',
+          width: 'inherit',
         }}
         ref={videoRef}
         playsInline