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

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,5 +1,4 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
   selectIsPeerAudioEnabled,
@@ -19,7 +18,7 @@ import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { Avatar } from '../../Avatar';
 import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig, keyframes } from '../../Theme';
+import { keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
@@ -40,6 +39,7 @@ const Tile = ({
   hideParticipantNameOnTile = false,
   roundedVideoTile = true,
   hideAudioMuteOnTile = false,
+  hideMetadataOnTile = false,
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
@@ -81,7 +81,6 @@ const Tile = ({
     }
     return 'large';
   }, [width, height]);
-  const isMobile = useMedia(cssConfig.media.md);
 
   return (
     <StyledVideoTile.Root
@@ -103,44 +102,42 @@ const Tile = ({
             <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
           ) : null}
 
-          {track ? (
-            <Video
-              trackId={track?.id}
-              attach={isLocal ? undefined : !isAudioOnly}
-              mirror={
-                mirrorLocalVideo &&
-                peerId === localPeerID &&
-                track?.source === 'regular' &&
-                track?.facingMode !== 'environment'
-              }
-              noRadius={!roundedVideoTile}
-              data-testid="participant_video_tile"
-              css={{
-                objectFit,
-                filter: isVideoDegraded ? 'blur($space$2)' : undefined,
-                bg: 'transparent',
-              }}
-            />
-          ) : null}
+          <Video
+            trackId={track?.id}
+            attach={isLocal ? undefined : !isAudioOnly}
+            mirror={
+              mirrorLocalVideo &&
+              peerId === localPeerID &&
+              track?.source === 'regular' &&
+              track?.facingMode !== 'environment'
+            }
+            noRadius={!roundedVideoTile}
+            data-testid="participant_video_tile"
+            css={{
+              objectFit,
+              filter: isVideoDegraded ? 'blur($space$2)' : undefined,
+              bg: 'transparent',
+            }}
+          />
+
           {isVideoMuted || (!isLocal && isAudioOnly) ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
             </StyledVideoTile.AvatarContainer>
           ) : null}
 
-          {showAudioMuted({
-            hideAudioMute: hideAudioMuteOnTile,
-            isAudioMuted,
-          }) ? (
-            <StyledVideoTile.AudioIndicator
-              data-testid="participant_audio_mute_icon"
-              size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
-            >
-              <MicOffIcon />
-            </StyledVideoTile.AudioIndicator>
-          ) : (
-            <AudioLevel trackId={audioTrack?.id} />
-          )}
+          {!hideAudioMuteOnTile ? (
+            isAudioMuted ? (
+              <StyledVideoTile.AudioIndicator
+                data-testid="participant_audio_mute_icon"
+                size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
+              >
+                <MicOffIcon />
+              </StyledVideoTile.AudioIndicator>
+            ) : (
+              <AudioLevel trackId={audioTrack?.id} />
+            )
+          ) : null}
           {isMouseHovered || isDragabble ? (
             <TileMenu
               peerID={peerId}
@@ -150,25 +147,24 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          <PeerMetadata peerId={peerId} />
-          {isMobile ? null : (
-            <TileConnection
-              hideLabel={hideParticipantNameOnTile}
-              name={label}
-              isTile
-              peerId={peerId}
-              width={width}
-              pinned={pinned}
-              spotlighted={spotlighted}
-            />
-          )}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
+
+          <TileConnection
+            hideLabel={hideParticipantNameOnTile}
+            name={label}
+            isTile
+            peerId={peerId}
+            width={width}
+            pinned={pinned}
+            spotlighted={spotlighted}
+          />
         </StyledVideoTile.Container>
       ) : null}
     </StyledVideoTile.Root>
   );
 };
 
-const metaStyles = { top: '$4', left: '$4' };
+const metaStyles = { top: '$4', left: '$4', width: '$14', height: '$14' };
 
 const heightAnimation = value =>
   keyframes({
@@ -233,7 +229,7 @@ const PeerMetadata = ({ peerId }) => {
       ) : null}
       {isBRB ? (
         <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
-          <BrbTileIcon width={24} height={24} />
+          <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}
     </Fragment>
@@ -242,8 +238,4 @@ const PeerMetadata = ({ peerId }) => {
 
 const VideoTile = React.memo(Tile);
 
-const showAudioMuted = ({ hideAudioMute, isAudioMuted }) => {
-  return isAudioMuted && !hideAudioMute;
-};
-
 export default VideoTile;

package/src/Prebuilt/components/conference.jsx

@@ -23,14 +23,13 @@ import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useAuthToken, useIsHeadless, useSetAppDataByKey } from './AppData/useUISettings';
-import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
+import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 const Conference = () => {
   const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const isHeadless = useIsHeadless();
-  const { userName } = useHMSPrebuiltContext();
+  const { userName, endpoints } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
@@ -42,11 +41,11 @@ const Conference = () => {
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef();
   const footerRef = useRef();
+  const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef();
-  const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const toggleControls = () => {
-    if (dropdownListRef.current?.length === 0) {
+    if (dropdownListRef.current?.length === 0 && isMobileDevice) {
       setHideControls(value => !value);
     }
   };
@@ -58,14 +57,14 @@ const Conference = () => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         if (dropdownListRef.current.length === 0) {
-          setHideControls(true);
+          setHideControls(isMobileDevice);
         }
       }, 5000);
     }
     return () => {
       clearTimeout(timeout);
     };
-  }, [dropdownList, hideControls]);
+  }, [dropdownList, hideControls, isMobileDevice]);
 
   useEffect(() => {
     if (!roomId) {
@@ -90,9 +89,7 @@ const Conference = () => {
         .join({
           userName,
           authToken: authTokenInAppData,
-          initEndpoint: process.env.REACT_APP_ENV
-            ? `https://${process.env.REACT_APP_ENV}-init.100ms.live/init`
-            : undefined,
+          initEndpoint: endpoints?.init,
           initialSettings: {
             isAudioMuted: !isPreviewScreenEnabled,
             isVideoMuted: !isPreviewScreenEnabled,
@@ -101,14 +98,7 @@ const Conference = () => {
         })
         .catch(console.error);
     }
-  }, [authTokenInAppData, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-
-  useEffect(() => {
-    // beam doesn't need to store messages, saves on unnecessary store updates in large calls
-    if (isHeadless) {
-      hmsActions.ignoreMessageTypes(['chat', EMOJI_REACTION_TYPE]);
-    }
-  }, [isHeadless, hmsActions]);
+  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
     return () => {
@@ -117,71 +107,78 @@ const Conference = () => {
   }, []);
 
   if (!isConnectedToRoom) {
-    return <FullPageProgress loadingText="Joining..." />;
-  }
-
-  if (isHLSStarted) {
-    return <FullPageProgress loadingText="Starting live stream..." />;
+    return <FullPageProgress text="Joining..." />;
   }
 
   return (
-    <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-      {!screenProps.hideSections.includes('header') && (
-        <Box
-          ref={headerRef}
-          css={{
-            h: '$18',
-            transition: 'margin 0.3s ease-in-out',
-            marginTop: performAutoHide ? `-${headerRef.current?.clientHeight}px` : 'none',
-            '@md': {
-              h: '$17',
-            },
-          }}
-          data-testid="header"
-        >
-          <Header elements={screenProps.elements} screenType={screenProps.screenType} />
+    <>
+      {isHLSStarted ? (
+        <Box css={{ position: 'fixed', zIndex: 100, w: '100%', h: '100%', left: 0, top: 0 }}>
+          <FullPageProgress text="Starting live stream..." css={{ opacity: 0.8, bg: '$background_dim' }} />
         </Box>
-      )}
-      <Box
-        css={{
-          w: '100%',
-          flex: '1 1 0',
-          minHeight: 0,
-          px: '$10',
-          paddingBottom: 'env(safe-area-inset-bottom)',
-          '@lg': {
-            px: '$4',
-          },
-        }}
-        id="conferencing"
-        data-testid="conferencing"
-        onClick={toggleControls}
-      >
-        <VideoStreamingSection screenType={screenProps.screenType} elements={screenProps.elements} />
-      </Box>
-      {!screenProps.hideSections.includes('footer') && (
+      ) : null}
+      <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
+        {!screenProps.hideSections.includes('header') && (
+          <Box
+            ref={headerRef}
+            css={{
+              h: '$18',
+              transition: 'margin 0.3s ease-in-out',
+              marginTop: hideControls ? `-${headerRef.current?.clientHeight}px` : 'none',
+              '@md': {
+                h: '$17',
+              },
+            }}
+            data-testid="header"
+          >
+            <Header elements={screenProps.elements} screenType={screenProps.screenType} />
+          </Box>
+        )}
         <Box
-          ref={footerRef}
           css={{
-            flexShrink: 0,
-            maxHeight: '$24',
-            transition: 'margin 0.3s ease-in-out',
-            bg: '$background_dim',
-            marginBottom: performAutoHide ? `-${footerRef.current?.clientHeight}px` : undefined,
-            '@md': {
-              maxHeight: 'unset',
-              bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
+            w: '100%',
+            flex: '1 1 0',
+            minHeight: 0,
+            px: screenProps?.elements?.video_tile_layout?.grid?.edge_to_edge ? 0 : '$10', // TODO: padding to be controlled by section/element
+            paddingBottom: 'env(safe-area-inset-bottom)',
+            '@lg': {
+              px: 0,
             },
           }}
-          data-testid="footer"
+          id="conferencing"
+          data-testid="conferencing"
+          onClick={toggleControls}
         >
-          <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
+          <VideoStreamingSection
+            screenType={screenProps.screenType}
+            elements={screenProps.elements}
+            hideControls={hideControls}
+          />
         </Box>
-      )}
-      <RoleChangeRequestModal />
-      <HLSFailureModal />
-      <ActivatedPIP />
-    </Flex>
+        {!screenProps.hideSections.includes('footer') && (
+          <Box
+            ref={footerRef}
+            css={{
+              flexShrink: 0,
+              maxHeight: '$24',
+              transition: 'margin 0.3s ease-in-out',
+              bg: '$background_dim',
+              marginBottom: hideControls ? `-${footerRef.current?.clientHeight}px` : undefined,
+              '@md': {
+                maxHeight: 'unset',
+                bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
+              },
+            }}
+            data-testid="footer"
+          >
+            <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
+          </Box>
+        )}
+        <RoleChangeRequestModal />
+        <HLSFailureModal />
+        <ActivatedPIP />
+      </Flex>
+    </>
   );
 };
 

package/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  HMSException,
+  selectIsConnectedToRoom,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
+import { useShowStreamingUI } from '../../common/hooks';
+// @ts-ignore: No implicit Any
+import { APP_DATA } from '../../common/constants';
+
+export const useAutoStartStreaming = () => {
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const permissions = useHMSStore(selectPermissions);
+  const showStreamingUI = useShowStreamingUI();
+  const hmsActions = useHMSActions();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { isHLSRunning } = useRecordingStreaming();
+  const streamStartedRef = useRef(false);
+
+  const startHLS = useCallback(async () => {
+    try {
+      if (isHLSStarted || !showStreamingUI || isHLSRunning) {
+        return;
+      }
+      setHLSStarted(true);
+      streamStartedRef.current = true;
+      await hmsActions.startHLSStreaming();
+    } catch (error) {
+      if ((error as HMSException).message?.includes('beam already started')) {
+        return;
+      }
+      streamStartedRef.current = false;
+      setHLSStarted(false);
+    }
+  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
+
+  useEffect(() => {
+    if (!isHLSStarted && !isHLSRunning) {
+      streamStartedRef.current = false;
+    }
+  }, [isHLSStarted, isHLSRunning]);
+
+  useEffect(() => {
+    if (!isConnected || streamStartedRef.current || !permissions?.hlsStreaming) {
+      return;
+    }
+    // Is a streaming kit and broadcaster joins
+    startHLS();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected]);
+};

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -1,19 +1,28 @@
 import { useCallback, useState } from 'react';
-import { selectLocalPeerID, selectPeerMetadata, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectLocalPeerID,
+  selectPeerMetadata,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 
 export const useMyMetadata = () => {
   const hmsActions = useHMSActions();
   const localPeerId = useHMSStore(selectLocalPeerID);
+  const vanillaStore = useHMSVanillaStore();
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
   const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);
   const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back
 
   const update = async updatedFields => {
     try {
-      await hmsActions.changeMetadata(Object.assign(metaData, updatedFields));
+      // get current state from store and merge updated fields
+      const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
+      await hmsActions.changeMetadata(Object.assign(currentMetadata, updatedFields));
       return true;
     } catch (error) {
-      console.error('failed to update metadata ', metaData, updatedFields);
+      console.error('failed to update metadata ', updatedFields);
     }
   };
 

package/src/Prebuilt/components/hooks/useRedirectToLeave.tsx

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore: No implicit Any
+import { PictureInPicture } from '../PIP/PIPManager';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const useRedirectToLeave = () => {
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { onLeave } = useHMSPrebuiltContext();
+  const params = useParams();
+  const navigate = useNavigate();
+
+  const redirect = useCallback(
+    (timeout = 0) => {
+      setTimeout(() => {
+        const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
+        if (params.role) {
+          navigate(prefix + params.roomId + '/' + params.role);
+        } else {
+          navigate(prefix + params.roomId);
+        }
+        PictureInPicture.stop().catch(() => console.error('stopping pip'));
+        ToastManager.clearAllToast();
+        onLeave?.();
+      }, timeout);
+    },
+    [isLeaveScreenEnabled, navigate, onLeave, params.role, params.roomId],
+  );
+
+  return { redirectToLeave: redirect };
+};

package/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx

@@ -12,7 +12,7 @@ export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[
         if (pinnedTrack) {
           if (pinnedTrack.peerId === peer.id) {
             acc[0].push(peer);
-          } else {
+          } else if (!(isInsetEnabled && peer.isLocal)) {
             acc[1].push(peer);
           }
           return acc;

package/src/Prebuilt/components/hooks/useTileLayout.tsx

@@ -10,7 +10,6 @@ import {
 import { config as cssConfig } from '../../../Theme';
 
 const aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
-const gap = 8; // gap between flex items
 
 export const usePagesWithTiles = ({ peers, maxTileCount }: { peers: HMSPeer[]; maxTileCount: number }) => {
   const vanillaStore = useHMSVanillaStore();
@@ -39,9 +38,11 @@ export const usePagesWithTiles = ({ peers, maxTileCount }: { peers: HMSPeer[]; m
 export const useTileLayout = ({
   pageList,
   maxTileCount,
+  edgeToEdge = false,
 }: {
   pageList: TrackWithPeerAndDimensions[][];
   maxTileCount: number;
+  edgeToEdge?: boolean;
 }) => {
   const vanillaStore = useHMSVanillaStore();
   const [ref, { width, height }] = useMeasure<HTMLDivElement>();
@@ -76,6 +77,7 @@ export const useTileLayout = ({
         return rowElements;
       });
 
+      const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items
       const maxHeight = height - (maxRows - 1) * gap;
       const maxRowHeight = maxHeight / matrix.length;
       const aspectRatios =
@@ -86,25 +88,29 @@ export const useTileLayout = ({
       for (const row of matrix) {
         let tileWidth = (width - (row.length - 1) * gap) / row.length;
         let tileHeight = 0;
-        const calcHeights = aspectRatios.map(aR => tileWidth / aR);
-        for (const h of calcHeights) {
-          if (h < maxRowHeight) {
-            if (tileHeight < h) {
-              tileHeight = h;
+        if (edgeToEdge) {
+          tileHeight = maxRowHeight;
+        } else {
+          const calcHeights = aspectRatios.map(aR => tileWidth / aR);
+          for (const h of calcHeights) {
+            if (h < maxRowHeight) {
+              if (tileHeight < h) {
+                tileHeight = h;
+              }
             }
           }
-        }
 
-        // tileHeight is not calculated as it could be exceeding the max possible height
-        // find the max possible width instead
-        if (tileHeight === 0) {
-          tileHeight = maxRowHeight;
-          const calcWidths = aspectRatios.map(aR => tileHeight * aR);
-          tileWidth = 0;
-          for (const w of calcWidths) {
-            if (w < width) {
-              if (tileWidth < w) {
-                tileWidth = w;
+          // tileHeight is not calculated as it could be exceeding the max possible height
+          // find the max possible width instead
+          if (tileHeight === 0) {
+            tileHeight = maxRowHeight;
+            const calcWidths = aspectRatios.map(aR => tileHeight * aR);
+            tileWidth = 0;
+            for (const w of calcWidths) {
+              if (w < width) {
+                if (tileWidth < w) {
+                  tileWidth = w;
+                }
               }
             }
           }
@@ -116,6 +122,6 @@ export const useTileLayout = ({
       }
     }
     setPagesWithTiles([...pageList]);
-  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile]);
+  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile, edgeToEdge]);
   return { pagesWithTiles, ref };
 };

package/src/Prebuilt/components/hooks/useVideoTileLayout.ts

@@ -5,7 +5,9 @@ type TileContextType = {
   hideParticipantNameOnTile?: boolean;
   roundedVideoTile?: boolean;
   hideAudioMuteOnTile?: boolean;
+  hideAudioLevelOnTile?: boolean;
   objectFit?: 'cover' | 'contain';
+  hideMetadataOnTile?: boolean;
 };
 
 export const VideoTileContext = React.createContext<TileContextType>({
@@ -13,7 +15,9 @@ export const VideoTileContext = React.createContext<TileContextType>({
   hideParticipantNameOnTile: false,
   roundedVideoTile: true,
   hideAudioMuteOnTile: false,
+  hideAudioLevelOnTile: false,
   objectFit: 'contain',
+  hideMetadataOnTile: false,
 });
 
 export const useVideoTileContext = () => {

package/src/Prebuilt/layouts/EmbedView.jsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
   selectPeers,
   selectPeerScreenSharing,
   throwErrorHandler,
@@ -25,21 +23,13 @@ export const EmbedView = () => {
 export const EmbebScreenShareView = ({ children }) => {
   const peers = useHMSStore(selectPeers);
 
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const peerPresenting = useHMSStore(selectPeerScreenSharing);
-  const isPresenterFromMyRole = peerPresenting?.roleName?.toLowerCase() === localPeerRole?.toLowerCase();
-  const amIPresenting = localPeerID === peerPresenting?.id;
-  const showPresenterInSmallTile = amIPresenting || isPresenterFromMyRole;
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
 
   const smallTilePeers = useMemo(() => {
     const smallTilePeers = peers.filter(peer => peer.id !== peerPresenting?.id);
-    if (showPresenterInSmallTile && peerPresenting) {
-      smallTilePeers.unshift(peerPresenting); // put presenter on first page
-    }
     return smallTilePeers;
-  }, [peers, peerPresenting, showPresenterInSmallTile]);
+  }, [peers, peerPresenting]);
 
   useEffect(() => {
     setActiveScreenSharePeer(peerPresenting?.id);