@100mslive/roomkit-react 0.3.9 → 0.3.10-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.9",
+  "version": "0.3.10-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,8 @@
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./index.css": "./dist/index.css"
   },
   "sideEffects": false,
   "scripts": {
@@ -50,11 +51,6 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.1",
     "@storybook/addon-a11y": "^7.0.27",
     "@storybook/addon-actions": "^7.0.27",
     "@storybook/addon-essentials": "^7.0.27",
@@ -72,21 +68,18 @@
     "babel-plugin-react-require": "3.1.3",
     "esbuild-loader": "^4.0.2",
     "react": "^18.1.0",
-    "rollup": "^2.70.1",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-import-css": "^3.3.1",
-    "rollup-plugin-terser": "^7.0.2",
     "storybook-dark-mode": "^3.0.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.9",
+    "@100mslive/hls-player": "0.3.10-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.9",
-    "@100mslive/react-icons": "0.10.9",
-    "@100mslive/react-sdk": "0.10.9",
+    "@100mslive/hms-virtual-background": "1.13.10-alpha.1",
+    "@100mslive/hms-whiteboard": "0.0.0-alpha.2",
+    "@100mslive/react-icons": "0.10.10-alpha.1",
+    "@100mslive/react-sdk": "0.10.10-alpha.1",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "b0a949da447e2dae0ed46087699ca18e9cd3537e"
+  "gitHead": "6d26007639e3d5088d8f47681590b58698e934f4"
 }

package/src/Modal/DialogContent.tsx

@@ -27,7 +27,7 @@ export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
 
 export const CustomDialogContent = styled(DialogPrimitive.Content, {
   color: '$on_surface_medium',
-  backgroundColor: '$surface_default',
+  backgroundColor: '$surface_dim',
   borderRadius: '8px',
   position: 'absolute',
   top: '50%',

package/src/Prebuilt/common/constants.ts

@@ -70,6 +70,8 @@ export const SIDE_PANE_OPTIONS = {
   ROOM_DETAILS: 'ROOM_DETAILS',
 };
 
+export type SidePaneOption = (typeof SIDE_PANE_OPTIONS)[keyof typeof SIDE_PANE_OPTIONS];
+
 export const SHEET_OPTIONS = {
   ROOM_DETAILS: 'ROOM_DETAILS',
 };

package/src/Prebuilt/components/AppData/useSidepaneResetOnLayoutUpdate.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useSidepaneReset } from './useSidepane';
+import { APP_DATA, SidePaneOption } from '../../common/constants';
+
+// Closes the sidepane if an element is removed from the layout via the customiser
+export const useSidepaneResetOnLayoutUpdate = (
+  layoutKey: keyof DefaultConferencingScreen_Elements,
+  sidepaneOption: SidePaneOption,
+) => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  const resetSidePane = useSidepaneReset();
+  useEffect(() => {
+    if (sidepane === sidepaneOption && !elements?.[layoutKey]) {
+      resetSidePane();
+    }
+  }, [elements, elements?.[layoutKey], resetSidePane, sidepane, layoutKey, sidepaneOption]);
+};

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -122,6 +122,7 @@ const NoiseCancellation = () => {
 
   return (
     <>
+      <Dropdown.ItemSeparator css={{ mx: 0 }} />
       <Dropdown.Item
         css={{
           p: '$4 $8',
@@ -256,7 +257,6 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
               </Dropdown.Group>
             </>
           )}
-          <Dropdown.ItemSeparator css={{ mx: 0 }} />
           <NoiseCancellation />
           <AudioSettings onClick={() => setShowSettings(true)} />
         </IconButtonWithOptions>

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

@@ -15,8 +15,9 @@ import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
-import { SESSION_STORE_KEY } from '../../common/constants';
+import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const Chat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
@@ -27,6 +28,7 @@ export const Chat = () => {
   const isMobile = useMedia(cssConfig.media.md);
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeStream = useLandscapeHLSStream();
+  useSidepaneResetOnLayoutUpdate('chat', SIDE_PANE_OPTIONS.CHAT);
 
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
@@ -42,9 +44,6 @@ export const Chat = () => {
     [hmsActions, vanillaStore],
   );
 
-  if (!elements?.chat) {
-    return null;
-  }
   const streaming = isMobileHLSStream || isLandscapeStream;
 
   return (

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

@@ -21,6 +21,7 @@ import {
   HandIcon,
   MicOffIcon,
   PeopleIcon,
+  PersonSettingsIcon,
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
@@ -29,10 +30,12 @@ import { Accordion, Box, Button, config as cssConfig, Dropdown, Flex, Input, Tex
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { RemoveParticipant } from '../RemoveParticipant';
+import { RoleChangeModal } from '../RoleChangeModal';
 import { RoleAccordion } from './RoleAccordion';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
 import { usePeerOnStageActions } from '../hooks/usePeerOnStageActions';
 import { useParticipants } from '../../common/hooks';
 // @ts-ignore: No implicit Any
@@ -71,6 +74,8 @@ export const ParticipantList = ({
     });
   }
 
+  useSidepaneResetOnLayoutUpdate('participant_list', SIDE_PANE_OPTIONS.PARTICIPANTS);
+
   const onSearch = useCallback((value: string) => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -365,45 +370,59 @@ const ParticipantMoreActions = ({ peerId, role }: { peerId: string; role: string
     isInStage,
     shouldShowStageRoleChange,
   } = usePeerOnStageActions({ peerId, role });
+  const canChangeRole = !!useHMSStore(selectPermissions)?.changeRole;
+  const [openRoleChangeModal, setOpenRoleChangeModal] = useState(false);
+
   return (
-    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)} modal={false}>
-      <Dropdown.Trigger
-        asChild
-        data-testid="participant_more_actions"
-        className="participant_item"
-        css={{
-          p: '$1',
-          r: '$0',
-          c: '$on_surface_high',
-          display: open ? 'flex' : 'none',
-          '&:hover': {
-            bg: '$surface_bright',
-          },
-          '@md': {
-            display: 'flex',
-          },
-        }}
-        tabIndex={0}
-      >
-        <Box css={{ my: 'auto' }}>
-          <VerticalMenuIcon />
-        </Box>
-      </Dropdown.Trigger>
-      <Dropdown.Portal>
-        <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
-          {shouldShowStageRoleChange ? (
-            <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
-              <ChangeRoleIcon />
-              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
-                {isInStage ? remove_from_stage_label : bring_to_stage_label}
-              </Text>
-            </Dropdown.Item>
-          ) : null}
+    <>
+      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)} modal={false}>
+        <Dropdown.Trigger
+          asChild
+          data-testid="participant_more_actions"
+          className="participant_item"
+          css={{
+            p: '$1',
+            r: '$0',
+            c: '$on_surface_high',
+            display: open ? 'flex' : 'none',
+            '&:hover': {
+              bg: '$surface_bright',
+            },
+            '@md': {
+              display: 'flex',
+            },
+          }}
+          tabIndex={0}
+        >
+          <Box css={{ my: 'auto' }}>
+            <VerticalMenuIcon />
+          </Box>
+        </Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
+            {shouldShowStageRoleChange ? (
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
+                <ChangeRoleIcon />
+                <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
+                  {isInStage ? remove_from_stage_label : bring_to_stage_label}
+                </Text>
+              </Dropdown.Item>
+            ) : null}
 
-          <RemoveParticipant peerId={peerId} />
-        </Dropdown.Content>
-      </Dropdown.Portal>
-    </Dropdown.Root>
+            {canChangeRole ? (
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => setOpenRoleChangeModal(true)}>
+                <PersonSettingsIcon />
+                <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
+                  Switch Role
+                </Text>
+              </Dropdown.Item>
+            ) : null}
+            <RemoveParticipant peerId={peerId} />
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+      {openRoleChangeModal && <RoleChangeModal peerId={peerId} onOpenChange={setOpenRoleChangeModal} />}
+    </>
   );
 };
 

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -116,10 +116,10 @@ export const DesktopOptions = ({
           ) : null}
 
           {screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item css={{ '&:empty': { display: 'none' } }}>
+            <Dropdown.Item css={{ p: 0, '&:empty': { display: 'none' } }}>
               <PIP
                 content={
-                  <Flex css={{ w: '100%' }}>
+                  <Flex css={{ w: '100%', h: '100%', p: '$8' }}>
                     <PipIcon />
                     <Text variant="sm" css={{ ml: '$4' }}>
                       {isPipOn ? 'Disable' : 'Enable'} Picture-in-Picture

package/src/Prebuilt/components/PIP/{PIPComponent.jsx → PIPComponent.tsx}

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { selectPeers, selectTracksMap, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { selectPeers, selectTracksMap, useHMSActions, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { PipIcon } from '@100mslive/react-icons';
-import { Flex, Tooltip } from '../../../';
+import { Flex, Tooltip } from '../../..';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
+// @ts-ignore: No implicit Any
 import { MediaSession } from './SetupMediaSession';
+// @ts-ignore: No implicit Any
 import { usePinnedTrack } from '../AppData/useUISettings';
 
 /**
@@ -50,26 +52,37 @@ const PIPComponent = ({ content = null }) => {
  * the subscriptions to store are done only if required.
  */
 export const ActivatedPIP = () => {
-  const tracksMap = useHMSStore(selectTracksMap);
-  const storePeers = useHMSStore(selectPeers);
+  const store = useHMSVanillaStore();
   const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    function updatePIP() {
-      if (!PictureInPicture.isOn()) {
-        return;
-      }
-      let pipPeers = storePeers;
-      if (pinnedTrack) {
-        pipPeers = storePeers.filter(peer => pinnedTrack.peerId === peer.id);
-      }
-      PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
-        console.error('error in updating pip', err);
-      });
+    function subscribeToStore() {
+      return store.subscribe(tracksMap => {
+        let pipPeers = store.getState(selectPeers);
+        if (pinnedTrack) {
+          pipPeers = pipPeers.filter(peer => pinnedTrack.peerId === peer.id);
+        }
+        PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
+          console.error('error in updating pip', err);
+        });
+      }, selectTracksMap);
     }
-    PictureInPicture.listenToStateChange(updatePIP);
-    updatePIP();
-  }, [storePeers, tracksMap, pinnedTrack]);
+    let unsubscribe: (() => void) | undefined = PictureInPicture.isOn() ? subscribeToStore() : undefined;
+    PictureInPicture.listenToStateChange(isOn => {
+      if (isOn) {
+        if (!unsubscribe) {
+          unsubscribe = subscribeToStore();
+        }
+      } else {
+        unsubscribe?.();
+        unsubscribe = undefined;
+      }
+    });
+    return () => {
+      unsubscribe?.();
+      unsubscribe = undefined;
+    };
+  }, [pinnedTrack, store]);
 
   return <></>;
 };

package/src/Prebuilt/components/PIP/{PIPManager.js → PIPManager.ts}

@@ -1,4 +1,6 @@
 import * as workerTimers from 'worker-timers';
+import { HMSActions, HMSPeer, HMSTrack, HMSVideoTrack } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit any
 import { drawVideoElementsOnCanvas, dummyChangeInCanvas, resetPIPCanvasColors } from './pipUtils';
 import { isIOS, isMacOS, isSafari } from '../../common/constants';
 const MAX_NUMBER_OF_TILES_IN_PIP = 4;
@@ -7,12 +9,12 @@ const DEFAULT_CANVAS_WIDTH = 480;
 const DEFAULT_CANVAS_HEIGHT = 320;
 const LEAVE_EVENT_NAME = 'leavepictureinpicture';
 
-const PIPStates = {
-  starting: 'starting',
-  started: 'started',
-  stopping: 'stopping',
-  stopped: 'stopped',
-};
+enum PIPStates {
+  starting = 'starting',
+  started = 'started',
+  stopping = 'stopping',
+  stopped = 'stopped',
+}
 
 /**
  * video elements are stitched together as a canvas which is converted to
@@ -24,12 +26,21 @@ const PIPStates = {
  * tracks which should be shown.
  */
 class PipManager {
-  listeners = new Set();
+  private listeners = new Set<(value: boolean) => void>();
+  private canvas: HTMLCanvasElement | null = null;
+  private pipVideo: HTMLVideoElement | null = null;
+  private hmsActions: HMSActions | null = null;
+  private timeoutRef = 0;
+  private videoElements: HTMLVideoElement[] = [];
+  private onStateChange: ((value: boolean) => void) | null = null;
+  private tracksToShow: Array<string> = [];
+  private state: PIPStates = PIPStates.stopped;
+
   constructor() {
     this.reset();
   }
 
-  listenToStateChange(cb) {
+  listenToStateChange(cb: (value: boolean) => void) {
     this.listeners.add(cb);
   }
 
@@ -41,12 +52,11 @@ class PipManager {
     resetPIPCanvasColors();
     this.canvas = null; // where stitching will take place
     this.pipVideo = null; // the element which will be sent in PIP
-    this.timeoutRef = null; // setTimeout reference so it can be cancelled
+    this.timeoutRef = 0; // setTimeout reference so it can be cancelled
     this.hmsActions = null; // for attaching detaching
     this.videoElements = []; // for attaching tracks
     this.tracksToShow = [];
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    this.onStateChange = () => {}; // for user of this class to listen to changes
+    this.onStateChange = null; // for user of this class to listen to changes
     this.state = PIPStates.stopped;
   }
 
@@ -70,7 +80,7 @@ class PipManager {
    * @param hmsActions
    * @param onStateChangeFn {function(bool):void} callback called to notify change in pip state
    */
-  async start(hmsActions, onStateChangeFn) {
+  async start(hmsActions: HMSActions, onStateChangeFn: (value: boolean) => void): Promise<void> {
     if (!this.isSupported()) {
       throw new Error('pip is not supported on this browser');
     }
@@ -84,14 +94,14 @@ class PipManager {
     try {
       await this.init(hmsActions, onStateChangeFn);
       // when user closes pip, call internal stop
-      this.pipVideo.addEventListener(LEAVE_EVENT_NAME, this.stop);
+      this.pipVideo?.addEventListener(LEAVE_EVENT_NAME, this.stop);
       this.renderLoop();
       if (!this.isOn()) {
         await this.requestPIP();
       }
       console.debug('pip started');
       this.state = PIPStates.started;
-      this.onStateChange(true);
+      this.onStateChange?.(true);
       this.callListeners(true);
     } catch (err) {
       console.error('error in request pip', err);
@@ -107,14 +117,14 @@ class PipManager {
     this.pipVideo?.removeEventListener(LEAVE_EVENT_NAME, this.stop);
     if (this.timeoutRef) {
       workerTimers.clearTimeout(this.timeoutRef);
-      this.timeoutRef = null;
+      this.timeoutRef = 0;
     }
     if (this.isOn()) {
       this.exitPIP();
     }
     // detach all to avoid bandwidth consumption
     await this.detachOldAttachNewTracks(this.tracksToShow, []);
-    this.onStateChange(false); // notify parent about this
+    this.onStateChange?.(false); // notify parent about this
     this.callListeners(false);
     this.reset(); // cleanup
     this.state = PIPStates.stopped;
@@ -124,8 +134,9 @@ class PipManager {
    * @param peers {Array} All Remote Peers present in call.
    * @param tracksMap {Object} map of track id to track
    * */
-  async updatePeersAndTracks(peers, tracksMap) {
+  async updatePeersAndTracks(peers: HMSPeer[], tracksMap: Record<string, HMSTrack>) {
     if (!this.canvas) {
+      console.log('no canvas to render video to');
       return;
     }
     const newTracksToShowUnordered = this.pickTracksToShow(peers, tracksMap);
@@ -142,14 +153,14 @@ class PipManager {
   /**
    * @private {boolean} on - whether pip is on/off
    */
-  callListeners = on => {
+  callListeners = (on: boolean) => {
     this.listeners.forEach(listener => listener?.(on));
   };
 
   /**
    * @private
    */
-  async init(hmsActions, onStateChangeFn) {
+  async init(hmsActions: HMSActions, onStateChangeFn: (value: boolean) => void) {
     await this.initMediaElements();
     this.hmsActions = hmsActions;
     this.onStateChange = onStateChangeFn;
@@ -180,11 +191,11 @@ class PipManager {
   }
 
   initializeVideoElements() {
-    let videoElements = [];
+    const videoElements = [];
     for (let i = 0; i < MAX_NUMBER_OF_TILES_IN_PIP; i++) {
       const videoElement = document.createElement('video');
       videoElement.autoplay = true;
-      videoElement.playsinline = true;
+      videoElement.playsInline = true;
       videoElements.push(videoElement);
     }
     return videoElements;
@@ -212,6 +223,9 @@ class PipManager {
       if (this.isOn()) {
         this.exitPIP(); // is this really needed?
       }
+      if (!this.pipVideo) {
+        return;
+      }
       await this.pipVideo.requestPictureInPicture();
     } catch (error) {
       console.error('error in requestpip', error, 'state', this.state);
@@ -228,16 +242,16 @@ class PipManager {
    * @param peers {Array<any>}
    * @param tracksMap {Record<string, any>}
    */
-  pickTracksToShow(peers, tracksMap) {
-    const tracksToShow = [];
+  pickTracksToShow(peers: HMSPeer[], tracksMap: Record<string, HMSTrack>) {
+    const tracksToShow = new Set<string>();
     for (const peer of peers) {
-      if (tracksToShow.length === MAX_NUMBER_OF_TILES_IN_PIP) {
+      if (tracksToShow.size === MAX_NUMBER_OF_TILES_IN_PIP) {
         break;
-      } else if (peer.videoTrack && tracksMap[peer.videoTrack]?.enabled) {
-        tracksToShow.push(peer.videoTrack);
+      } else if (peer.videoTrack && this.showTrack(tracksMap[peer.videoTrack] as HMSVideoTrack)) {
+        tracksToShow.add(peer.videoTrack);
       }
     }
-    return tracksToShow;
+    return Array.from(tracksToShow);
   }
 
   /**
@@ -252,9 +266,9 @@ class PipManager {
    * @param newTracks {Array}
    * @return {Array}
    */
-  orderNewTracksToShow(newTracks, oldTracks) {
-    const betterNewTracks = [];
-    const leftOvers = [];
+  orderNewTracksToShow(newTracks: string[], oldTracks: string[]) {
+    const betterNewTracks: Array<string> = new Array(newTracks.length);
+    const leftOvers: Array<string> = [];
     // put the common ones in right position
     newTracks.forEach(track => {
       const oldPosition = oldTracks.indexOf(track);
@@ -268,10 +282,17 @@ class PipManager {
     // put the left overs in remaining empty positions
     for (let i = 0; i < newTracks.length; i++) {
       if (!betterNewTracks[i]) {
-        betterNewTracks[i] = leftOvers.shift();
+        const newEntry = leftOvers.shift();
+        if (newEntry) {
+          betterNewTracks[i] = newEntry;
+        }
       }
     }
-    return betterNewTracks;
+    return Array.from(new Set(betterNewTracks));
+  }
+
+  private showTrack(track: HMSVideoTrack | undefined) {
+    return track && track.enabled && !track.degraded;
   }
 
   /**
@@ -283,7 +304,11 @@ class PipManager {
    * @param tracksMap {Record<String, any>}
    */
   // eslint-disable-next-line complexity
-  async detachOldAttachNewTracks(oldTracks, newTracks, tracksMap = null) {
+  async detachOldAttachNewTracks(
+    oldTracks: Array<string>,
+    newTracks: Array<string>,
+    tracksMap: Record<string, HMSTrack> | null = null,
+  ) {
     const numTracks = Math.max(oldTracks.length, newTracks.length);
     for (let i = 0; i < numTracks; i++) {
       if (oldTracks[i] === newTracks[i]) {
@@ -292,7 +317,7 @@ class PipManager {
         // old track is there but not equal to new track, detach
         // no need to call detach if we know for sure track is no longer in store
         if (!tracksMap || tracksMap[oldTracks[i]]) {
-          await this.hmsActions.detachVideo(oldTracks[i], this.videoElements[i]);
+          await this.hmsActions?.detachVideo(oldTracks[i], this.videoElements[i]);
         }
         if (this.videoElements[i]) {
           // even if old track got removed from the room, element needs to be cleaned up
@@ -300,7 +325,7 @@ class PipManager {
         }
       }
       if (newTracks[i]) {
-        await this.hmsActions.attachVideo(newTracks[i], this.videoElements[i]);
+        await this.hmsActions?.attachVideo(newTracks[i], this.videoElements[i]);
       }
     }
   }