@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.1

package/src/Prebuilt/components/Footer/{RoleAccordion.jsx → RoleAccordion.tsx}

@@ -1,53 +1,61 @@
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
+import { HMSPeer } from '@100mslive/react-sdk';
 import { Accordion } from '../../../Accordion';
 import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
+import { RoleOptions } from './RoleOptions';
+// @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 
 const ROW_HEIGHT = 50;
 
-function itemKey(index, data) {
+interface ItemData {
+  peerList: HMSPeer[];
+  isConnected: boolean;
+}
+
+function itemKey(index: number, data: ItemData) {
   return data.peerList[index].id;
 }
 
-const VirtualizedParticipantItem = React.memo(({ index, data }) => {
-  return (
-    <Participant
-      key={data.peerList[index].id}
-      peer={data.peerList[index]}
-      isConnected={data.isConnected}
-      setSelectedPeerId={data.setSelectedPeerId}
-    />
-  );
+const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
+  return <Participant key={data.peerList[index].id} peer={data.peerList[index]} isConnected={data.isConnected} />;
 });
 
 export const RoleAccordion = ({
   peerList = [],
   roleName,
-  setSelectedPeerId,
   isConnected,
   filter,
   isHandRaisedAccordion = false,
+}: ItemData & {
+  roleName: string;
+  isHandRaisedAccordion?: boolean;
+  filter?: { search: string };
 }) => {
-  const [ref, { width }] = useMeasure();
-  const height = ROW_HEIGHT * peerList.length;
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
   const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
+
   if (!showAcordion || (isHandRaisedAccordion && filter?.search) || peerList.length === 0) {
     return null;
   }
+  const height = ROW_HEIGHT * peerList.length;
 
   return (
-    <Flex direction="column" css={{ flexGrow: 1 }} ref={ref}>
+    <Flex direction="column" css={{ flexGrow: 1, '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
       <Accordion.Root
         type="single"
         collapsible
         defaultValue={roleName}
-        css={{ borderRadius: '$3', border: '1px solid $border_bright' }}
+        css={{ borderRadius: '$1', border: '1px solid $border_bright' }}
       >
         <Accordion.Item value={roleName}>
           <Accordion.Header
+            iconStyles={{ c: '$on_surface_high' }}
             css={{
               textTransform: 'capitalize',
               p: '$6 $8',
@@ -56,13 +64,21 @@ export const RoleAccordion = ({
               c: '$on_surface_medium',
             }}
           >
-            {roleName} {`(${getFormattedCount(peerList.length)})`}
+            <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
+              <Text
+                variant="sm"
+                css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}
+              >
+                {roleName} {`(${getFormattedCount(peerList.length)})`}
+              </Text>
+              <RoleOptions roleName={roleName} peerList={peerList} />
+            </Flex>
           </Accordion.Header>
           <Accordion.Content>
             <Box css={{ borderTop: '1px solid $border_default' }} />
             <FixedSizeList
               itemSize={ROW_HEIGHT}
-              itemData={{ peerList, isConnected, setSelectedPeerId }}
+              itemData={{ peerList, isConnected }}
               itemKey={itemKey}
               itemCount={peerList.length}
               width={width}

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

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { HMSPeer, selectPermissions, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import {
+  MicOffIcon,
+  MicOnIcon,
+  PersonRectangleIcon,
+  RemoveUserIcon,
+  VerticalMenuIcon,
+  VideoOffIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { getMetadata } from '../../common/utils';
+
+const dropdownItemCSS = { backgroundColor: '$surface_default', gap: '$4', p: '$8' };
+const optionTextCSS = { fontWeight: '$semiBold', color: '$on_surface_high', textTransform: 'none' };
+
+export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
+  const [openOptions, setOpenOptions] = useState(false);
+  const permissions = useHMSStore(selectPermissions);
+  const hmsActions = useHMSActions();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
+
+  const vanillaStore = useHMSVanillaStore();
+  const store = vanillaStore.getState();
+
+  let allPeersHaveVideoOn = true;
+  let allPeersHaveAudioOn = true;
+
+  peerList.forEach(peer => {
+    const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled;
+    const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled;
+    allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
+    allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+  });
+
+  const canMuteRole = permissions?.mute && roleName === on_stage_role;
+  const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
+  // on stage and off stage roles
+  const canRemoveRoleFromRoom =
+    permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
+
+  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) {
+    return null;
+  }
+
+  const removeAllFromStage = () => {
+    peerList.forEach(peer => {
+      const prevRole = getMetadata(peer.metadata).prevRole;
+      if (prevRole) {
+        hmsActions.changeRoleOfPeer(peer.id, prevRole, true);
+      }
+    });
+  };
+
+  const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
+    try {
+      await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const removePeersFromRoom = async () => {
+    try {
+      peerList.forEach(async peer => {
+        await hmsActions.removePeer(peer.id, '');
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
+      <Dropdown.Trigger
+        onClick={e => e.stopPropagation()}
+        className="role_actions"
+        asChild
+        css={{
+          p: '$1',
+          r: '$0',
+          c: '$on_surface_high',
+          visibility: openOptions ? 'visible' : 'hidden',
+          '&:hover': {
+            c: '$on_surface_medium',
+          },
+          '@md': {
+            visibility: 'visible',
+          },
+        }}
+      >
+        <Flex>
+          <VerticalMenuIcon />
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        onClick={e => e.stopPropagation()}
+        css={{ w: 'max-content', maxWidth: '$64', bg: '$surface_default', py: 0 }}
+        align="end"
+      >
+        {canRemoveRoleFromStage && (
+          <Dropdown.Item
+            css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
+            onClick={removeAllFromStage}
+          >
+            <PersonRectangleIcon />
+            <Text variant="sm" css={optionTextCSS}>
+              Remove all from Stage
+            </Text>
+          </Dropdown.Item>
+        )}
+
+        {canMuteRole && (
+          <>
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', !allPeersHaveAudioOn)}>
+              {allPeersHaveAudioOn ? <MicOffIcon /> : <MicOnIcon />}
+              <Text variant="sm" css={optionTextCSS}>
+                {allPeersHaveAudioOn ? 'Mute' : 'Unmute'} Audio
+              </Text>
+            </Dropdown.Item>
+
+            <Dropdown.Item
+              css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright' }}
+              onClick={() => setTrackEnabled('video', !allPeersHaveVideoOn)}
+            >
+              {allPeersHaveVideoOn ? <VideoOffIcon /> : <VideoOnIcon />}
+              <Text variant="sm" css={optionTextCSS}>
+                {allPeersHaveVideoOn ? 'Mute' : 'Unmute'} Video
+              </Text>
+            </Dropdown.Item>
+          </>
+        )}
+
+        {canRemoveRoleFromRoom && (
+          <Dropdown.Item
+            css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
+            onClick={removePeersFromRoom}
+          >
+            <RemoveUserIcon />
+            <Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
+              Remove all from Room
+            </Text>
+          </Dropdown.Item>
+        )}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+};

package/src/Prebuilt/components/FullPageProgress.jsx

@@ -3,10 +3,10 @@ import { Flex } from '../../Layout';
 import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 
-const FullPageProgress = ({ loaderColor = '$primary_default', loadingText = '' }) => (
-  <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor }}>
+const FullPageProgress = ({ loaderColor = '$primary_default', text = '', css = {} }) => (
+  <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor, ...css }}>
     <Loading color="currentColor" size={100} />
-    {loadingText ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{loadingText}</Text> : null}
+    {text ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{text}</Text> : null}
   </Flex>
 );
 

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

@@ -3,6 +3,7 @@ import { Flex, styled } from '../../../';
 export const VideoControls = styled(Flex, {
   justifyContent: 'center',
   alignItems: 'center',
+  alignSelf: 'stretch',
   width: '100%',
   gap: '$2',
 });

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

@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
-import { CheckCircleIcon, SettingsIcon } from '@100mslive/react-icons';
+import React from 'react';
+import { CheckIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
 
-export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);
-
+export function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
   return (
-    <Dropdown.Root open={qualityDropDownOpen} onOpenChange={value => setQualityDropDownOpen(value)}>
+    <Dropdown.Root open={open} onOpenChange={value => onOpen(value)}>
       <Dropdown.Trigger asChild data-testid="quality_selector">
         <Flex
           css={{
@@ -24,6 +22,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                   h: '$9',
                   display: 'inline-flex',
                   alignItems: 'center',
+                  c: '$on_surface_high',
                 }}
               >
                 <SettingsIcon />
@@ -44,7 +43,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                         mx: '$2',
                         w: '$2',
                         h: '$2',
-                        background: '$on_primary_high',
+                        background: '$on_surface_medium',
                         r: '$1',
                       }}
                     />
@@ -60,7 +59,15 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
         <Dropdown.Content
           sideOffset={5}
           align="end"
-          css={{ height: 'auto', maxHeight: '$96', w: '$64', bg: '$surface_bright' }}
+          css={{
+            height: 'auto',
+            maxHeight: '$52',
+            w: '$40',
+            bg: '$surface_bright',
+            py: '$4',
+            gap: '$4',
+            display: 'grid',
+          }}
         >
           {layers.map(layer => {
             return (
@@ -68,16 +75,26 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                 onClick={() => onQualityChange(layer)}
                 key={layer.width}
                 css={{
-                  bg: '$surface_bright',
+                  bg:
+                    !isAuto && layer.width === selection?.width && layer.height === selection?.height
+                      ? '$surface_default'
+                      : '$surface_bright',
                   '&:hover': {
-                    bg: '$surface_default',
+                    bg: '$surface_brighter',
                   },
+                  p: '$2 $4 $2 $8',
+                  h: '$12',
+                  gap: '$2',
                 }}
               >
-                <Text>{getQualityText(layer)}</Text>
-                <Text css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>{getBitrateText(layer)}</Text>
+                <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 && (
-                  <CheckCircleIcon />
+                  <CheckIcon width="16px" height="16px" />
                 )}
               </Dropdown.Item>
             );
@@ -86,14 +103,19 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
             onClick={() => onQualityChange({ height: 'auto' })}
             key="auto"
             css={{
-              bg: '$surface_bright',
+              bg: !isAuto ? '$surface_bright' : '$surface_default',
               '&:hover': {
-                bg: '$surface_default',
+                bg: '$surface_brighter',
               },
+              p: '$2 $4 $2 $8',
+              h: '$12',
+              gap: '$2',
             }}
           >
-            <Text css={{ flex: '1 1 0' }}>Auto</Text>
-            {isAuto && <CheckCircleIcon />}
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
           </Dropdown.Item>
         </Dropdown.Content>
       )}

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

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import { Flex } from '../../../';
 
-export const HMSVideo = forwardRef(({ children }, videoRef) => {
+export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
   return (
-    <Flex data-testid="hms-video" css={{ size: '100%' }} direction="column">
+    <Flex data-testid="hms-video" css={{ size: '100%', position: 'relative' }} direction="column" {...props}>
       <video style={{ flex: '1 1 0', margin: '0 auto', minHeight: '0' }} ref={videoRef} playsInline />
       {children}
     </Flex>

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

@@ -44,7 +44,7 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
   return hlsPlayer.getVideoElement() ? (
     <Flex
       ref={progressRootRef}
-      css={{ paddingLeft: '$8', paddingRight: '$8', cursor: 'pointer' }}
+      css={{ cursor: 'pointer', h: '$4', alignSelf: 'stretch' }}
       onClick={onProgressChangeHandler}
     >
       <Box
@@ -53,23 +53,22 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
           display: 'inline',
           width: `${videoProgress}%`,
           background: '$primary_default',
-          height: '0.3rem',
         }}
       />
       <Box
         id="video-buffer"
         css={{
           width: `${bufferProgress - videoProgress}%`,
-          background: '$primary_dim',
-          height: '0.3rem',
+          background: '$on_surface_high',
+          opacity: '25%',
         }}
       />
       <Box
         id="video-rest"
         css={{
           width: `${100 - bufferProgress}%`,
-          background: '$surface_brighter',
-          height: '0.3rem',
+          background: '$on_surface_high',
+          opacity: '10%',
         }}
       />
     </Flex>

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

@@ -9,7 +9,7 @@ export const VolumeControl = ({ hlsPlayer }) => {
   return (
     <Flex
       align="center"
-      css={{ color: '$on_primary_high' }}
+      css={{ color: '$on_surface_high' }}
       onMouseOver={event => {
         event.stopPropagation();
         setShowSlider(true);

package/src/Prebuilt/components/Header/{StreamActions.jsx → StreamActions.tsx}

@@ -11,26 +11,31 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { AlertTriangleIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
-import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../../';
+import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../..';
 import { Sheet } from '../../../Sheet';
+// @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
+// @ts-ignore
 import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore
 import { formatTime } from '../../common/utils';
+// @ts-ignore
 import { APP_DATA } from '../../common/constants';
 
 export const LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const hlsState = useHMSStore(selectHLSState);
   const isMobile = useMedia(cssConfig.media.md);
-  const intervalRef = useRef(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const [liveTime, setLiveTime] = useState(0);
 
   const startTimer = useCallback(() => {
     intervalRef.current = setInterval(() => {
-      if (hlsState?.running) {
-        setLiveTime(Date.now() - hlsState?.variants[0]?.startedAt.getTime());
+      if (hlsState?.running && hlsState?.variants[0]?.startedAt) {
+        setLiveTime(Date.now() - hlsState.variants[0].startedAt.getTime());
       }
     }, 1000);
   }, [hlsState?.running, hlsState?.variants]);
@@ -90,6 +95,7 @@ export const RecordingStatus = () => {
 
   return (
     <Tooltip
+      boxCss={{ zIndex: 1 }}
       title={getRecordingText({
         isBrowserRecordingOn,
         isServerRecordingOn,
@@ -130,7 +136,7 @@ const StartRecording = () => {
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
-            <Text variant="body" css={{ color: '$on_surface_medium' }}>
+            <Text variant="body1" css={{ color: '$on_surface_medium' }}>
               Are you sure you want to end the recording?
             </Text>
             <Button
@@ -142,8 +148,9 @@ const StartRecording = () => {
                 try {
                   await hmsActions.stopRTMPAndRecording();
                 } catch (error) {
+                  const err = error as Error;
                   ToastManager.addToast({
-                    title: error.message,
+                    title: err.message,
                     variant: 'error',
                   });
                 }
@@ -170,14 +177,15 @@ const StartRecording = () => {
             record: true,
           });
         } catch (error) {
-          if (error.message.includes('stream already running')) {
+          const err = error as Error;
+          if (err.message.includes('stream already running')) {
             ToastManager.addToast({
               title: 'Recording already running',
               variant: 'error',
             });
           } else {
             ToastManager.addToast({
-              title: error.message,
+              title: err.message,
               variant: 'error',
             });
           }
@@ -215,7 +223,13 @@ export const StreamActions = () => {
   );
 };
 
-export const StopRecordingInSheet = ({ onStopRecording, onClose }) => {
+export const StopRecordingInSheet = ({
+  onStopRecording,
+  onClose,
+}: {
+  onStopRecording: () => void;
+  onClose: () => void;
+}) => {
   return (
     <Sheet.Root open={true}>
       <Sheet.Content>

package/src/Prebuilt/components/Header/common.jsx

@@ -25,11 +25,13 @@ export const CamaraFlipActions = () => {
 
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-
+  if (!videoInput || !videoInput?.length || !localVideoTrack?.facingMode) {
+    return null;
+  }
   return (
     <Box>
       <IconButton
-        disabled={!videoInput?.length || !isVideoOn || !localVideoTrack?.facingMode}
+        disabled={!isVideoOn}
         onClick={async () => {
           try {
             await actions.switchCamera();
@@ -117,6 +119,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch
           {outputDevices.map(audioDevice => {
             return (
               <SelectWithLabel
+                key={audioDevice.deviceId}
                 label={audioDevice.label}
                 id={audioDevice.deviceId}
                 checked={audioDevice.deviceId === outputSelected}

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -14,6 +14,10 @@ const IconSection = styled(IconButton, {
   borderTopRightRadius: 0,
   borderColor: '$border_default',
   borderBottomRightRadius: 0,
+  position: 'relative',
+  '&:not([disabled]):focus-visible': {
+    zIndex: 1,
+  },
   '@md': {
     mx: 0,
     borderTopRightRadius: '$1',
@@ -30,8 +34,9 @@ const OptionsSection = styled(IconButton, {
   borderColor: '$border_default',
   borderBottomLeftRadius: 0,
   borderLeftWidth: 0,
+  position: 'relative',
   '&:not([disabled]):focus-visible': {
-    boxShadow: 'none',
+    zIndex: 1,
   },
   '@md': {
     display: 'none',

package/src/Prebuilt/components/InsetTile.tsx

@@ -14,6 +14,7 @@ import { AudioVideoToggle } from './AudioVideoToggle';
 import VideoTile from './VideoTile';
 // @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from './AppData/useUISettings';
+import { useVideoTileContext } from './hooks/useVideoTileLayout';
 // @ts-ignore: No implicit Any
 import { APP_DATA } from '../common/constants';
 
@@ -22,7 +23,11 @@ const MinimisedTile = ({ setMinimised }: { setMinimised: (value: boolean) => voi
     <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
       <AudioVideoToggle hideOptions={true} />
       <Text>You</Text>
-      <IconButton onClick={() => setMinimised(false)} css={{ bg: 'transparent', border: 'transparent' }}>
+      <IconButton
+        className="__cancel-drag-event"
+        onClick={() => setMinimised(false)}
+        css={{ bg: 'transparent', border: 'transparent' }}
+      >
         <ExpandIcon />
       </IconButton>
     </Flex>
@@ -41,12 +46,11 @@ export const InsetTile = () => {
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
   const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
   const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const aspectRatio =
-    videoTrack?.width && videoTrack?.height
-      ? videoTrack.width / videoTrack.height
-      : isMobile
-      ? defaultMobileAspectRatio
-      : desktopAspectRatio;
+  const videoTileProps = useVideoTileContext();
+  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
+  if (videoTrack?.width && videoTrack?.height && !isMobile) {
+    aspectRatio = videoTrack.width / videoTrack.height;
+  }
   let height = insetHeightPx;
   let width = height * aspectRatio;
   // Convert to 16/9 in landscape mode with a max width of 240
@@ -82,7 +86,7 @@ export const InsetTile = () => {
   }
 
   return (
-    <Draggable bounds="parent" nodeRef={nodeRef}>
+    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
       <Box
         ref={nodeRef}
         css={{
@@ -114,6 +118,8 @@ export const InsetTile = () => {
             height={height}
             containerCSS={{ background: '$surface_default' }}
             canMinimise
+            isDragabble
+            {...videoTileProps}
           />
         )}
       </Box>