@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/Toast/ToastManager.js

@@ -1,44 +0,0 @@
-import { v4 } from 'uuid';
-
-export const ToastManager = {
-  toasts: new Map(),
-  listeners: new Map(),
-  addToast(toast) {
-    const id = toast.id ? toast.id : v4();
-    this.toasts.set(id, { ...toast, id });
-    this.onChange();
-    return id;
-  },
-
-  clearAllToast() {
-    this.toasts.clear();
-    this.onChange();
-  },
-
-  removeToast(id) {
-    this.toasts.delete(id);
-    this.onChange();
-  },
-  replaceToast(id, toast) {
-    if (this.isActive(id)) {
-      this.toasts.set(id, { ...this.toasts.get(id), ...toast });
-      this.onChange();
-      return id;
-    } else {
-      return this.addToast(toast);
-    }
-  },
-  addListener(cb) {
-    this.listeners.set(cb, cb);
-  },
-  removeListener(cb) {
-    this.listeners.delete(cb);
-  },
-  isActive(id) {
-    return this.toasts.has(id);
-  },
-  onChange() {
-    const toasts = Array.from(this.toasts.values());
-    this.listeners.forEach(listener => listener(toasts));
-  },
-};

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

@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import { PeopleAddIcon } from '@100mslive/react-icons';
-import { Flex } from '../../../Layout';
-import { config as cssConfig } from '../../../Theme';
-import { WaitingView } from '../../layouts/WaitingView';
-import { InsetTile } from '../InsetTile';
-import { Pagination } from '../Pagination';
-import { Grid } from './Grid';
-import { LayoutProps } from './interface';
-// @ts-ignore: No implicit Any
-import { useUISettings } from '../AppData/useUISettings';
-import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
-import { UI_SETTINGS } from '../../common/constants';
-
-export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
-  const isMobile = useMedia(cssConfig.media.md);
-  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  const pageList = usePagesWithTiles({
-    peers,
-    maxTileCount,
-  });
-
-  const { ref, pagesWithTiles } = useTileLayout({
-    pageList,
-    maxTileCount,
-    edgeToEdge,
-  });
-  const [page, setPage] = useState(0);
-  const pageSize = pagesWithTiles[0]?.length || 0;
-
-  useEffect(() => {
-    if (pageSize > 0) {
-      onPageSize?.(pageSize);
-    }
-  }, [pageSize, onPageSize]);
-
-  return (
-    <Flex direction="column" css={{ flex: '1 1 0', h: '100%', position: 'relative', minWidth: 0 }}>
-      <Grid tiles={pagesWithTiles[page]} ref={ref} edgeToEdge={edgeToEdge} />
-      {!edgeToEdge && (
-        <Pagination
-          page={page}
-          onPageChange={page => {
-            setPage(page);
-            onPageChange?.(page);
-          }}
-          numPages={pagesWithTiles.length}
-        />
-      )}
-      {pageList.length === 0 ? (
-        <WaitingView
-          title="You're the only one here"
-          subtitle="Sit back and relax till others join"
-          icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
-        />
-      ) : null}
-      {isInsetEnabled && <InsetTile />}
-    </Flex>
-  );
-}

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
-import { Box } from '../../../Layout';
-// @ts-ignore: No implicit Any
-import VideoTile from '../VideoTile';
-import { useVideoTileContext } from '../hooks/useVideoTileLayout';
-
-export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>(
-  ({ tiles, edgeToEdge }, ref) => {
-    const videoTileProps = useVideoTileContext();
-    return (
-      <Box
-        ref={ref}
-        css={{
-          flex: '1 1 0',
-          gap: '$4',
-          display: 'flex',
-          placeContent: 'center',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexFlow: 'row wrap',
-          minHeight: 0,
-          '@lg': { gap: edgeToEdge ? 0 : '$4' },
-        }}
-      >
-        {tiles?.map(tile => {
-          return (
-            <VideoTile
-              key={tile.track?.id || tile.peer?.id}
-              width={tile.width}
-              height={tile.height}
-              peerId={tile.peer?.id}
-              trackId={tile.track?.id}
-              rootCSS={{ padding: 0 }}
-              objectFit="contain"
-              {...videoTileProps}
-            />
-          );
-        })}
-      </Box>
-    );
-  },
-);

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

@@ -1,155 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
-import {
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  selectPeers,
-  selectPeerScreenSharing,
-  selectWhiteboard,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { EqualProminence } from './EqualProminence';
-import { RoleProminence } from './RoleProminence';
-import { ScreenshareLayout } from './ScreenshareLayout';
-import { WhiteboardLayout } from './WhiteboardLayout';
-// @ts-ignore: No implicit Any
-import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
-import { VideoTileContext } from '../hooks/useVideoTileLayout';
-import PeersSorter from '../../common/PeersSorter';
-import { APP_DATA } from '../../common/constants';
-
-export type TileCustomisationProps = {
-  hide_participant_name_on_tile: boolean;
-  rounded_video_tile: boolean;
-  hide_audio_mute_on_tile: boolean;
-  video_object_fit: 'contain' | 'cover';
-  edge_to_edge: boolean;
-  hide_metadata_on_tile: boolean;
-};
-
-export type GridLayoutProps = GridVideoTileLayout & TileCustomisationProps;
-
-export const GridLayout = ({
-  enable_local_tile_inset: isInsetEnabled = false,
-  prominent_roles: prominentRoles = [],
-  enable_spotlighting_peer = false,
-  hide_participant_name_on_tile = false,
-  rounded_video_tile = true,
-  hide_audio_mute_on_tile = false,
-  video_object_fit = 'contain',
-  edge_to_edge = false,
-  hide_metadata_on_tile = false,
-}: GridLayoutProps) => {
-  const peerSharing = useHMSStore(selectPeerScreenSharing);
-  const whiteboard = useHMSStore(selectWhiteboard);
-  const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore(selectPeers);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const localPeerID = useHMSStore(selectLocalPeerID);
-
-  const [activeScreensharePeerId] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const isRoleProminence =
-    (prominentRoles.length &&
-      peers.some(
-        peer => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack),
-      )) ||
-    pinnedTrack;
-  const updatedPeers = useMemo(() => {
-    // remove screenshare/whiteboard peer from active speaker sorting
-    if (activeScreensharePeerId || whiteboard?.open) {
-      return peers.filter(peer => peer.id !== activeScreensharePeerId || peer.customerUserId !== whiteboard?.owner);
-    }
-    if (isInsetEnabled) {
-      const isLocalPeerPinned = localPeerID === pinnedTrack?.peerId;
-      // if localPeer role is prominent role, it shows up in the center or local peer is pinned, so allow it in active speaker sorting
-      if ((localPeerRole && prominentRoles.includes(localPeerRole)) || isLocalPeerPinned) {
-        return peers;
-      } else {
-        return peers.filter(peer => !peer.isLocal);
-      }
-    }
-    return peers;
-  }, [
-    isInsetEnabled,
-    whiteboard,
-    activeScreensharePeerId,
-    localPeerRole,
-    localPeerID,
-    prominentRoles,
-    peers,
-    pinnedTrack,
-  ]);
-  const vanillaStore = useHMSVanillaStore();
-  const [sortedPeers, setSortedPeers] = useState(updatedPeers);
-  const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState(0);
-  const [mainPage, setMainPage] = useState(0);
-  const tileLayout = {
-    enableSpotlightingPeer: enable_spotlighting_peer,
-    hideParticipantNameOnTile: hide_participant_name_on_tile,
-    roundedVideoTile: rounded_video_tile,
-    hideAudioMuteOnTile: hide_audio_mute_on_tile,
-    hideMetadataOnTile: hide_metadata_on_tile,
-    objectFit: video_object_fit,
-  };
-
-  useEffect(() => {
-    if (mainPage !== 0) {
-      return;
-    }
-    peersSorter.setPeersAndTilesPerPage({
-      peers: updatedPeers,
-      tilesPerPage: pageSize,
-    });
-    peersSorter.onUpdate(setSortedPeers);
-  }, [mainPage, peersSorter, updatedPeers, pageSize]);
-
-  if (peerSharing) {
-    return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <ScreenshareLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
-    );
-  } else if (whiteboard?.open) {
-    return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <WhiteboardLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
-    );
-  } else if (isRoleProminence) {
-    return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <RoleProminence
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          prominentRoles={prominentRoles}
-          isInsetEnabled={isInsetEnabled}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
-    );
-  }
-  return (
-    <VideoTileContext.Provider value={tileLayout}>
-      <EqualProminence
-        peers={sortedPeers}
-        onPageSize={setPageSize}
-        onPageChange={setMainPage}
-        isInsetEnabled={isInsetEnabled}
-        edgeToEdge={edge_to_edge}
-      />
-    </VideoTileContext.Provider>
-  );
-};

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
-import { Box, Flex } from '../../../Layout';
-import { CSS } from '../../../Theme';
-// @ts-ignore: No implicit Any
-import VideoTile from '../VideoTile';
-import { useVideoTileContext } from '../hooks/useVideoTileLayout';
-
-const Root = ({
-  children,
-  edgeToEdge,
-  hasSidebar,
-}: React.PropsWithChildren<{ edgeToEdge?: boolean; hasSidebar?: boolean }>) => {
-  return (
-    <Flex
-      direction={hasSidebar ? 'row' : 'column'}
-      css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-const ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?: CSS }>) => {
-  return (
-    <Flex direction="column" css={{ flex: '1 1 0', gap: '$2', minHeight: 0, ...css }}>
-      {children}
-    </Flex>
-  );
-};
-
-const SecondarySection = ({
-  tiles,
-  children,
-  edgeToEdge,
-  hasSidebar,
-}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean; hasSidebar?: boolean }>) => {
-  const tileLayoutProps = useVideoTileContext();
-  if (!tiles?.length) {
-    return null;
-  }
-  const gridStyles = hasSidebar
-    ? {
-        gridTemplateColumns: '1fr',
-        gridTemplateRows: `repeat(${tiles.length}, minmax(0, 1fr))`,
-        maxHeight: '100%',
-        width: 240,
-      }
-    : {
-        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',
-        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
-      };
-  return (
-    <Box
-      css={{
-        display: 'grid',
-        margin: 'auto',
-        gap: hasSidebar ? '$8' : '$2 $4',
-        placeItems: 'center',
-        ...gridStyles,
-        '@md': { gap: edgeToEdge ? 0 : '$4' },
-      }}
-    >
-      {tiles.map(tile => {
-        return (
-          <VideoTile
-            key={tile.track?.id || tile.peer?.id}
-            peerId={tile.peer?.id}
-            trackId={tile.track?.id}
-            rootCSS={{
-              padding: 0,
-              maxWidth: 240,
-              aspectRatio: '16 / 9',
-              ...(hasSidebar ? { w: '100%' } : { h: '100%' }),
-              '@md': { aspectRatio: '1' },
-            }}
-            objectFit="contain"
-            {...tileLayoutProps}
-          />
-        );
-      })}
-      {children && <Box css={{ gridColumn: hasSidebar ? 1 : `1/span ${tiles.length}` }}>{children}</Box>}
-    </Box>
-  );
-};
-
-export const ProminenceLayout = {
-  Root,
-  ProminentSection,
-  SecondarySection,
-};

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

@@ -1,66 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig } from '../../../Theme';
-import { InsetTile } from '../InsetTile';
-import { Pagination } from '../Pagination';
-import { SecondaryTiles } from '../SecondaryTiles';
-import { Grid } from './Grid';
-import { LayoutProps } from './interface';
-import { ProminenceLayout } from './ProminenceLayout';
-// @ts-ignore: No implicit Any
-import { useUISettings } from '../AppData/useUISettings';
-import { useRoleProminencePeers } from '../hooks/useRoleProminencePeers';
-import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
-import { UI_SETTINGS } from '../../common/constants';
-
-export function RoleProminence({
-  isInsetEnabled = false,
-  prominentRoles = [],
-  peers,
-  onPageChange,
-  onPageSize,
-  edgeToEdge,
-}: LayoutProps) {
-  const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isMobile = useMedia(cssConfig.media.md);
-  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  maxTileCount = isMobile ? 4 : maxTileCount;
-  const pageList = usePagesWithTiles({
-    peers: prominentPeers,
-    maxTileCount,
-  });
-  const { ref, pagesWithTiles } = useTileLayout({
-    pageList,
-    maxTileCount,
-  });
-  const [page, setPage] = useState(0);
-  const pageSize = pagesWithTiles[0]?.length || 0;
-
-  useEffect(() => {
-    if (pageSize > 0) {
-      onPageSize?.(pageSize);
-    }
-  }, [pageSize, onPageSize]);
-
-  return (
-    <ProminenceLayout.Root>
-      <ProminenceLayout.ProminentSection>
-        <Grid ref={ref} tiles={pagesWithTiles[page]} />
-      </ProminenceLayout.ProminentSection>
-      {!edgeToEdge && (
-        <Pagination
-          page={page}
-          onPageChange={page => {
-            setPage(page);
-            onPageChange?.(page);
-          }}
-          numPages={pagesWithTiles.length}
-        />
-      )}
-      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} edgeToEdge={edgeToEdge} />
-      {isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && <InsetTile />}
-    </ProminenceLayout.Root>
-  );
-}

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

@@ -1,74 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectPeersScreenSharing, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig } from '../../../Theme';
-import { InsetTile } from '../InsetTile';
-import { Pagination } from '../Pagination';
-// @ts-ignore: No implicit Any
-import ScreenshareTile from '../ScreenshareTile';
-import { SecondaryTiles } from '../SecondaryTiles';
-import { LayoutMode } from '../Settings/LayoutSettings';
-import { LayoutProps } from './interface';
-import { ProminenceLayout } from './ProminenceLayout';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey, useSetUiSettings } from '../AppData/useUISettings';
-import { APP_DATA, UI_SETTINGS } from '../../common/constants';
-
-export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
-  const peersSharing = useHMSStore(selectPeersScreenSharing);
-  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const [page, setPage] = useState(0);
-  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia(cssConfig.media.md);
-  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
-  const secondaryPeers = useMemo(() => {
-    if (layoutMode === LayoutMode.SPOTLIGHT) {
-      return [];
-    }
-    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
-      return activeSharePeer
-        ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)] //keep active sharing peer as first tile
-        : peers;
-    }
-    return peers.filter(p => p.id !== activeSharePeer?.id);
-  }, [activeSharePeer, peers, isMobile, layoutMode]);
-
-  useEffect(() => {
-    if (isMobile) {
-      setLayoutMode(LayoutMode.GALLERY);
-      return;
-    }
-    if (layoutMode === LayoutMode.SIDEBAR) {
-      return;
-    }
-    setLayoutMode(LayoutMode.SIDEBAR);
-    return () => {
-      // reset to gallery once screenshare is stopped
-      setLayoutMode(LayoutMode.GALLERY);
-    };
-  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    setActiveScreenSharePeer(activeSharePeer?.id);
-    return () => {
-      setActiveScreenSharePeer('');
-    };
-  }, [activeSharePeer?.id, setActiveScreenSharePeer]);
-
-  return (
-    <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
-      <ProminenceLayout.ProminentSection>
-        <ScreenshareTile peerId={peersSharing[page]?.id} />
-        {!edgeToEdge && <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />}
-      </ProminenceLayout.ProminentSection>
-      <SecondaryTiles
-        peers={secondaryPeers}
-        onPageChange={onPageChange}
-        onPageSize={onPageSize}
-        edgeToEdge={edgeToEdge}
-        hasSidebar={hasSidebar}
-      />
-      {layoutMode === LayoutMode.SPOTLIGHT && activeSharePeer && <InsetTile peerId={activeSharePeer?.id} />}
-    </ProminenceLayout.Root>
-  );
-};

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

@@ -1,93 +0,0 @@
-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';
-import { InsetTile } from '../InsetTile';
-import { SecondaryTiles } from '../SecondaryTiles';
-import { LayoutMode } from '../Settings/LayoutSettings';
-import { LayoutProps } from './interface';
-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);
-
-  if (!token) {
-    return null;
-  }
-
-  return (
-    <Box
-      css={{
-        mx: '$8',
-        flex: '3 1 0',
-        '@lg': {
-          flex: '2 1 0',
-          display: 'flex',
-          alignItems: 'center',
-        },
-      }}
-    >
-      <Box css={{ size: '100%' }}>
-        <Whiteboard token={token} endpoint={`https://${endpoint}`} zoomToContent={zoomToContent} />
-      </Box>
-    </Box>
-  );
-};
-
-export const WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
-  const whiteboard = useHMSStore(selectWhiteboard);
-  const whiteboardOwner = useHMSStore(selectPeerByCondition(peer => peer.customerUserId === whiteboard?.owner));
-  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const isMobile = useMedia(cssConfig.media.md);
-  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
-  const secondaryPeers = useMemo(() => {
-    if (layoutMode === LayoutMode.SPOTLIGHT) {
-      return [];
-    }
-    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
-      return whiteboardOwner
-        ? [whiteboardOwner, ...peers.filter(p => p.id !== whiteboardOwner?.id)] //keep active sharing peer as first tile
-        : peers;
-    }
-    return peers.filter(p => p.id !== whiteboardOwner?.id);
-  }, [whiteboardOwner, peers, isMobile, layoutMode]);
-
-  useEffect(() => {
-    if (isMobile) {
-      setLayoutMode(LayoutMode.GALLERY);
-      return;
-    }
-    if (layoutMode === LayoutMode.SIDEBAR) {
-      return;
-    }
-    setLayoutMode(LayoutMode.SIDEBAR);
-    return () => {
-      // reset to gallery once whiteboard is stopped
-      setLayoutMode(LayoutMode.GALLERY);
-    };
-  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return (
-    <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
-      <ProminenceLayout.ProminentSection>
-        <WhiteboardEmbed />
-      </ProminenceLayout.ProminentSection>
-      <SecondaryTiles
-        peers={secondaryPeers}
-        onPageChange={onPageChange}
-        onPageSize={onPageSize}
-        edgeToEdge={edgeToEdge}
-        hasSidebar={hasSidebar}
-      />
-      {layoutMode === LayoutMode.SPOTLIGHT && whiteboardOwner && <InsetTile peerId={whiteboardOwner?.id} />}
-    </ProminenceLayout.Root>
-  );
-};

package/src/Prebuilt/components/VideoLayouts/interface.ts

@@ -1,11 +0,0 @@
-import { HMSPeer } from '@100mslive/react-sdk';
-
-export interface LayoutProps {
-  isInsetEnabled?: boolean;
-  edgeToEdge?: boolean;
-  prominentRoles?: string[];
-  hasSidebar?: boolean;
-  peers: HMSPeer[];
-  onPageChange?: (page: number) => void;
-  onPageSize?: (size: number) => void;
-}