@100mslive/roomkit-react 0.3.10-alpha.0 → 0.3.10-alpha.2

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.10-alpha.0",
+  "version": "0.3.10-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -27,8 +27,7 @@
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    },
-    "./index.css": "./dist/index.css"
+    }
   },
   "sideEffects": false,
   "scripts": {
@@ -74,12 +73,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.10-alpha.0",
+    "@100mslive/hls-player": "0.3.10-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.10-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.0-alpha.1",
-    "@100mslive/react-icons": "0.10.10-alpha.0",
-    "@100mslive/react-sdk": "0.10.10-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.10-alpha.2",
+    "@100mslive/react-icons": "0.10.10-alpha.2",
+    "@100mslive/react-sdk": "0.10.10-alpha.2",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +113,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "c705b5b8ce729747f28c7aff242057ac8178d338"
+  "gitHead": "303a4fc9e47b81f2171e8dfb89ceaa98f52e2c25"
 }

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/RoleChangeModal.tsx

@@ -0,0 +1,187 @@
+import React, { useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import { HMSPeer, selectAvailableRoleNames, selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Dropdown } from '../../Dropdown';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Sheet } from '../../Sheet';
+import { Text } from '../../Text';
+import { config as cssConfig } from '../../Theme';
+import { Tooltip } from '../../Tooltip';
+
+const HighlightTerm = ({ value }: { value: string | undefined }) => {
+  return value ? (
+    <Tooltip side="top" title={value}>
+      <Text
+        variant="body2"
+        css={{
+          color: '$on_surface_medium',
+          fontWeight: '$semiBold',
+        }}
+      >
+        '{value.slice(0, 100)}
+        {value.length > 100 ? '...' : ''}'
+      </Text>
+    </Tooltip>
+  ) : (
+    <></>
+  );
+};
+
+const RoleChangeContent = ({
+  peer,
+  onOpenChange,
+  isMobile = false,
+}: {
+  peer: HMSPeer;
+  onOpenChange: (open: boolean) => void;
+  isMobile?: boolean;
+}) => {
+  const roles = useHMSStore(selectAvailableRoleNames).filter(role => role !== peer?.roleName);
+  const [selectedRole, setRole] = useState(roles.filter(role => role !== peer?.roleName)?.[0] || peer?.roleName);
+  const hmsActions = useHMSActions();
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | undefined>();
+
+  return (
+    <>
+      <Flex align="center" justify="between" css={{ w: '100%' }}>
+        <Text as="h6" variant="h6">
+          Switch Role
+        </Text>
+        {isMobile && <CrossIcon onClick={() => onOpenChange(false)} />}
+      </Flex>
+
+      <Box>
+        <Text
+          variant="body2"
+          css={{
+            mt: '$4',
+            mb: '$8',
+            c: '$on_surface_medium',
+            display: 'flex',
+            flexWrap: 'wrap',
+            columnGap: '4px',
+          }}
+        >
+          Switch the role of
+          <HighlightTerm value={peer.name} />
+          from <HighlightTerm value={peer.roleName} />
+        </Text>
+      </Box>
+      <Flex
+        align="center"
+        css={{
+          w: '100%',
+          mb: '$10',
+        }}
+      >
+        <Box
+          css={{
+            position: 'relative',
+            flex: '1 1 0',
+            minWidth: 0,
+          }}
+        >
+          <Dropdown.Root open={open} onOpenChange={setOpen} css={{ width: '100%' }}>
+            <Dropdown.Trigger
+              // @ts-ignore
+              ref={triggerRef}
+              data-testid="open_role_selection_dropdown"
+              asChild
+              css={{
+                border: '1px solid $border_bright',
+                bg: '$surface_default',
+                r: '$1',
+                p: '$6 $9',
+              }}
+            >
+              <Flex align="center" justify="between" css={{ width: '100%' }}>
+                <Text>{selectedRole}</Text>
+                {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </Flex>
+            </Dropdown.Trigger>
+
+            <Dropdown.Content align="start" sideOffset={8} css={{ zIndex: 1000, w: '100%' }}>
+              {roles.map(role => (
+                <Dropdown.Item
+                  data-testid={role}
+                  key={role}
+                  onSelect={() => setRole(role)}
+                  css={{ w: `${triggerRef.current?.clientWidth}px` }}
+                >
+                  {role}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Box>
+      </Flex>
+      <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
+        {!isMobile && (
+          <Button
+            variant="standard"
+            outlined
+            css={{ width: '100%' }}
+            onClick={() => onOpenChange(false)}
+            data-testid="cancel_button"
+          >
+            Cancel
+          </Button>
+        )}
+
+        <Button
+          data-testid="change_button"
+          variant="primary"
+          css={{ width: '100%' }}
+          onClick={async () => {
+            if (selectedRole) {
+              await hmsActions.changeRoleOfPeer(peer.id, selectedRole, true);
+              onOpenChange(false);
+            }
+          }}
+        >
+          Switch Role
+        </Button>
+      </Flex>
+    </>
+  );
+};
+
+export const RoleChangeModal = ({
+  peerId,
+  onOpenChange,
+}: {
+  peerId: string;
+  onOpenChange: (open: boolean) => void;
+}) => {
+  const peer = useHMSStore(selectPeerByID(peerId));
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (!peer) {
+    return null;
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet.Root open={true} onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ p: '$12 $8', background: '$surface_dim' }}>
+          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} isMobile />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
+          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/TileMenu/TileMenu.tsx

@@ -17,6 +17,7 @@ import { Text } from '../../../Text';
 import { config as cssConfig, useTheme } from '../../../Theme';
 import { StyledMenuTile } from '../../../TileMenu';
 import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
+import { RoleChangeModal } from '../RoleChangeModal';
 import { TileMenuContent } from './TileMenuContent';
 import { useDropdownList } from '../hooks/useDropdownList';
 import { getDragClassName } from './utils';
@@ -56,6 +57,7 @@ const TileMenu = ({
   const isMobile = useMedia(cssConfig.media.md);
   const peer = useHMSStore(selectPeerByID(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState(false);
+  const [showRoleChangeModal, setShowRoleChangeModal] = useState(false);
   useDropdownList({ open, name: 'TileMenu' });
   const dragClassName = getDragClassName();
 
@@ -64,6 +66,7 @@ const TileMenu = ({
   }
 
   const openNameChangeModal = () => setShowNameChangeModal(true);
+  const openRoleChangeModal = () => setShowRoleChangeModal(true);
 
   const props = {
     isLocal,
@@ -76,6 +79,7 @@ const TileMenu = ({
     showPinAction,
     canMinimise,
     openNameChangeModal,
+    openRoleChangeModal,
   };
 
   return (
@@ -133,6 +137,7 @@ const TileMenu = ({
         )}
       </StyledMenuTile.Root>
       {showNameChangeModal && <ChangeNameModal onOpenChange={setShowNameChangeModal} />}
+      {showRoleChangeModal && <RoleChangeModal peerId={peerID} onOpenChange={setShowRoleChangeModal} />}
     </>
   );
 };

package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx

@@ -17,6 +17,7 @@ import {
   MicOffIcon,
   MicOnIcon,
   PencilIcon,
+  PersonSettingsIcon,
   PinIcon,
   RemoveUserIcon,
   ShareScreenIcon,
@@ -224,6 +225,9 @@ export const TileMenuContent = ({
   openNameChangeModal = () => {
     return;
   },
+  openRoleChangeModal = () => {
+    return;
+  },
 }: {
   videoTrackID: string;
   audioTrackID: string;
@@ -235,10 +239,13 @@ export const TileMenuContent = ({
   canMinimise?: boolean;
   closeSheetOnClick?: () => void;
   openNameChangeModal?: () => void;
+  openRoleChangeModal?: () => void;
 }) => {
   const actions = useHMSActions();
   const dragClassName = getDragClassName();
-  const removeOthers: boolean | undefined = useHMSStore(selectPermissions)?.removeOthers;
+  const permissions = useHMSStore(selectPermissions);
+  const canChangeRole = !!permissions?.changeRole;
+  const removeOthers = !!permissions?.removeOthers;
   const { userName } = useHMSPrebuiltContext();
 
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
@@ -308,6 +315,21 @@ export const TileMenuContent = ({
         </StyledMenuTile.ItemButton>
       ) : null}
 
+      {canChangeRole ? (
+        <StyledMenuTile.ItemButton
+          className={dragClassName}
+          css={spacingCSS}
+          onClick={() => {
+            openRoleChangeModal();
+            closeSheetOnClick();
+          }}
+          data-testid="change_role_btn"
+        >
+          <PersonSettingsIcon height={20} width={20} />
+          <span>Switch Role</span>
+        </StyledMenuTile.ItemButton>
+      ) : null}
+
       {audioTrackID ? (
         <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
           <Flex align="center" gap={1}>

package/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
 import { useMedia } from 'react-use';
-import { Whiteboard } from '@100mslive/hms-whiteboard';
 import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
@@ -12,12 +11,10 @@ import { ProminenceLayout } from './ProminenceLayout';
 // @ts-ignore: No implicit Any
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { UI_SETTINGS } from '../../common/constants';
-// eslint-disable-next-line import/no-unresolved
-import '@100mslive/hms-whiteboard/index.css';
 
 const WhiteboardEmbed = () => {
   const isMobile = useMedia(cssConfig.media.md);
-  const { token, endpoint, zoomToContent } = useWhiteboard(isMobile);
+  const { iframeRef } = useWhiteboard(isMobile);
 
   return (
     <Box
@@ -31,9 +28,18 @@ const WhiteboardEmbed = () => {
         },
       }}
     >
-      <Box css={{ size: '100%' }}>
-        <Whiteboard token={token} endpoint={`https://${endpoint}`} zoomToContent={zoomToContent} />
-      </Box>
+      <iframe
+        title="Whiteboard View"
+        ref={iframeRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          borderRadius: '0.75rem',
+        }}
+        allow="autoplay; clipboard-write;"
+        referrerPolicy="no-referrer"
+      />
     </Box>
   );
 };

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -26,6 +26,7 @@ import { VBCollection } from './VBCollection';
 import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
+import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
 // @ts-ignore
 import { useSetAppDataByKey, useUISettings } from '../AppData/useUISettings';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
@@ -113,6 +114,8 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
     return () => setLoadingEffects(false);
   }, [isVideoOn, setLoadingEffects, toggleVB]);
 
+  useSidepaneResetOnLayoutUpdate('virtual_background', SIDE_PANE_OPTIONS.VB);
+
   return (
     <Flex css={{ pr: '$6', size: '100%' }} direction="column">
       <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>

package/src/Prebuilt/layouts/SidePane.tsx

@@ -141,14 +141,6 @@ const SidePane = ({
     ? preview_elements?.virtual_background?.background_media
     : elements?.virtual_background?.background_media || [];
 
-  const resetSidePane = useSidepaneReset();
-
-  useEffect(() => {
-    return () => {
-      resetSidePane();
-    };
-  }, [resetSidePane]);
-
   const tileLayout = {
     hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
     roundedVideoTile: tileProps?.rounded_video_tile,
@@ -199,7 +191,15 @@ const SidePane = ({
       return null;
     });
 
-  if (!trackId && !SidepaneComponent) {
+  const resetSidePane = useSidepaneReset();
+
+  useEffect(() => {
+    return () => {
+      resetSidePane();
+    };
+  }, [resetSidePane]);
+
+  if (!SidepaneComponent && !trackId) {
     return null;
   }