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

package/src/Prebuilt/layouts/SidePane.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { Chat } from '../components/Chat/Chat';
+// @ts-ignore: No implicit Any
+import { ParticipantList } from '../components/Footer/ParticipantList';
+// @ts-ignore: No implicit Any
+import { StreamingLanding } from '../components/Streaming/StreamingLanding';
+import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
+// @ts-ignore: No implicit Any
+import VideoTile from '../components/VideoTile';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
+
+const SidePane = ({
+  screenType,
+  tileProps,
+  hideControls = false,
+}: {
+  screenType: keyof ConferencingScreen;
+  tileProps: TileCustomisationProps;
+  hideControls: boolean;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
+  const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
+  const { elements } = useRoomLayoutConferencingScreen();
+  let ViewComponent;
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
+    ViewComponent = <ParticipantList />;
+  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = <Chat screenType={screenType} hideControls={hideControls} />;
+  } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
+    ViewComponent = <StreamingLanding />;
+  }
+  if (!ViewComponent && !trackId) {
+    return null;
+  }
+
+  const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay;
+
+  return (
+    <Flex
+      direction="column"
+      justify="center"
+      css={{
+        w: '$100',
+        h: '100%',
+        flexShrink: 0,
+        gap: '$4',
+        '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 12 },
+      }}
+    >
+      {trackId && (
+        <VideoTile
+          peerId={activeScreensharePeerId}
+          trackId={trackId}
+          width="100%"
+          height={225}
+          rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
+          objectFit="contain"
+          {...tileProps}
+        />
+      )}
+      {!!ViewComponent && (
+        <Box
+          css={{
+            w: '$100',
+            h: mwebStreamingChat ? '0' : '100%',
+            p: '$10',
+            flex: '1 1 0',
+            minHeight: 0,
+            maxHeight: mwebStreamingChat ? '300px' : 'unset',
+            background: mwebStreamingChat
+              ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'
+              : '$surface_dim',
+            r: '$1',
+            position: 'relative',
+            '@lg': {
+              w: '100%',
+              h: '100%',
+              ml: 0,
+              right: 0,
+              position: 'fixed',
+              bottom: 0,
+              borderRadius: 0,
+              zIndex: 10,
+            },
+            '@md': {
+              p: '$6 $8',
+              pb: mwebStreamingChat ? '$20' : '$12',
+            },
+          }}
+        >
+          {ViewComponent}
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default SidePane;

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -0,0 +1,96 @@
+import React, { Suspense, useEffect } from 'react';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import FullPageProgress from '../components/FullPageProgress';
+import { GridLayout } from '../components/VideoLayouts/GridLayout';
+import { Flex } from '../../Layout';
+// @ts-ignore: No implicit Any
+import { EmbedView } from './EmbedView';
+// @ts-ignore: No implicit Any
+import { PDFView } from './PDFView';
+import SidePane from './SidePane';
+// @ts-ignore: No implicit Any
+import { WaitingView } from './WaitingView';
+// import { useWhiteboardMetadata } from '../plugins/whiteboard';
+import {
+  usePDFAnnotator,
+  useUrlToEmbed,
+  useWaitingViewerRole,
+  // @ts-ignore: No implicit Any
+} from '../components/AppData/useUISettings';
+// @ts-ignore: No implicit Any
+import { SESSION_STORE_KEY } from '../common/constants';
+
+// const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
+// @ts-ignore: No implicit Any
+const HLSView = React.lazy(() => import('./HLSView'));
+
+export const VideoStreamingSection = ({
+  screenType,
+  elements,
+  hideControls = false,
+}: {
+  screenType: keyof ConferencingScreen;
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+  hideControls: boolean;
+}) => {
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  // const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const hmsActions = useHMSActions();
+  const waitingViewerRole = useWaitingViewerRole();
+  const urlToIframe = useUrlToEmbed();
+  const pdfAnnotatorActive = usePDFAnnotator();
+
+  useEffect(() => {
+    if (!isConnected) {
+      return;
+    }
+    hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected, hmsActions]);
+
+  if (!localPeerRole) {
+    // we don't know the role yet to decide how to render UI
+    return null;
+  }
+
+  let ViewComponent;
+  if (screenType === 'hls_live_streaming') {
+    ViewComponent = <HLSView />;
+  } else if (localPeerRole === waitingViewerRole) {
+    ViewComponent = <WaitingView />;
+  } else if (pdfAnnotatorActive) {
+    ViewComponent = <PDFView />;
+  } else if (urlToIframe) {
+    ViewComponent = <EmbedView />;
+  } else {
+    //@ts-ignore
+    ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+  }
+
+  return (
+    <Suspense fallback={<FullPageProgress />}>
+      <Flex
+        css={{
+          size: '100%',
+          position: 'relative',
+          gap: '$4',
+        }}
+      >
+        {ViewComponent}
+        <SidePane
+          screenType={screenType}
+          // @ts-ignore
+          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
+          hideControls={hideControls}
+        />
+      </Flex>
+    </Suspense>
+  );
+};

package/src/Prebuilt/layouts/WhiteboardView.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { useMedia } from 'react-use';
 import { selectPeers, selectRoomID, useHMSStore } from '@100mslive/react-sdk';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { SidePane } from './screenShareView';
+import { SecondaryTiles } from '../components/SecondaryTiles';
+import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
+import { Box } from '../../Layout';
 // import { Whiteboard } from '../plugins/whiteboard';
 
-const Editor = React.memo(({ roomId }) => {
+const Editor = React.memo(() => {
   return (
     <Box
       css={{
@@ -26,38 +25,15 @@ const Editor = React.memo(({ roomId }) => {
 });
 
 const WhiteboardView = () => {
-  // for smaller screen we will show sidebar in bottom
-  const mediaQueryLg = cssConfig.media.lg;
-  const showSidebarInBottom = useMedia(mediaQueryLg);
   const peers = useHMSStore(selectPeers);
   const roomId = useHMSStore(selectRoomID);
   return (
-    <Flex
-      css={{
-        size: '100%',
-      }}
-      direction={showSidebarInBottom ? 'column' : 'row'}
-    >
-      <Editor roomId={roomId} />
-      <Flex
-        direction={{ '@initial': 'column', '@lg': 'row' }}
-        css={{
-          overflow: 'hidden',
-          p: '$4',
-          flex: '0 0 20%',
-          '@lg': {
-            flex: '1 1 0',
-          },
-        }}
-      >
-        <SidePane
-          showSidebarInBottom={showSidebarInBottom}
-          isPresenterInSmallTiles={true}
-          smallTilePeers={peers}
-          totalPeers={peers.length}
-        />
-      </Flex>
-    </Flex>
+    <ProminenceLayout.Root>
+      <ProminenceLayout.ProminentSection>
+        <Editor roomId={roomId} />
+      </ProminenceLayout.ProminentSection>
+      <SecondaryTiles peers={peers} />
+    </ProminenceLayout.Root>
   );
 };
 

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -1,9 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeerID, selectPeerNameByID, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import {
+  selectLocalPeerID,
+  selectPeerNameByID,
+  useCustomEvent,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { config as cssConfig, keyframes } from '../../Theme';
+import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 let emojiCount = 1;
 
@@ -42,7 +49,7 @@ export function FlyingEmoji() {
   const startingPoints = useMemo(() => getStartingPoints(isMobile), [isMobile]);
 
   const showFlyingEmoji = useCallback(
-    (emojiId, senderId) => {
+    ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
       }
@@ -67,6 +74,11 @@ export function FlyingEmoji() {
     [localPeerId, vanillaStore, startingPoints],
   );
 
+  useCustomEvent({
+    type: EMOJI_REACTION_TYPE,
+    onEvent: showFlyingEmoji,
+  });
+
   useEffect(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -13,9 +13,7 @@ import { ActionTile } from '../../components/MoreSettings/ActionTile';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
-import { useIsFeatureEnabled } from '../../components/hooks/useFeatures';
 import { getRandomVirtualBackground } from './vbutils';
-import { FEATURE_LIST } from '../../common/constants';
 
 export const VirtualBackground = ({
   asActionTile = false,
@@ -32,7 +30,6 @@ export const VirtualBackground = ({
   const [isVBOn, setIsVBOn] = useState(false);
   const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
   const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.VIDEO_PLUGINS);
 
   async function createPlugin() {
     if (!pluginRef.current) {
@@ -72,7 +69,7 @@ export const VirtualBackground = ({
     }
   }
 
-  if (!isAllowedToPublish.video || !isVBSupported || !isFeatureEnabled) {
+  if (!isAllowedToPublish.video || !isVBSupported) {
     return null;
   }
   if (asActionTile) {

package/src/Prebuilt/plugins/whiteboard/{ToggleWhiteboard.jsx → ToggleWhiteboard.tsx}

@@ -1,25 +1,21 @@
 import React from 'react';
-import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../../Tooltip';
+// @ts-ignore: No implicit any
 import IconButton from '../../IconButton';
-import { useHLSViewerRole } from '../../components/AppData/useUISettings';
-import { useIsFeatureEnabled } from '../../components/hooks/useFeatures';
+// @ts-ignore: No implicit any
 import { useWhiteboardMetadata } from './useWhiteboardMetadata';
-import { FEATURE_LIST } from '../../common/constants';
 
-export const ToggleWhiteboard = () => {
+export const ToggleWhiteboard = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
   const {
     whiteboardEnabled,
     whiteboardOwner: whiteboardActive,
     amIWhiteboardOwner,
     toggleWhiteboard,
   } = useWhiteboardMetadata();
-  const hlsViewerRole = useHLSViewerRole();
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.WHITEBOARD);
 
-  if (!whiteboardEnabled || localPeerRole === hlsViewerRole || !isFeatureEnabled) {
+  if (!whiteboardEnabled || screenType === 'hls_live_streaming') {
     return null;
   }
 

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -67,17 +67,21 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
           {Icon ? Icon : null}
           <Text variant="h6">{title}</Text>
         </Dialog.Title>
-        <Text
-          variant="md"
-          css={{
-            fontWeight: 400,
-            mt: '$4',
-            mb: '$10',
-            c: '$on_surface_medium',
-          }}
-        >
-          {body}
-        </Text>
+        {typeof body === 'string' ? (
+          <Text
+            variant="md"
+            css={{
+              fontWeight: 400,
+              mt: '$4',
+              mb: '$10',
+              c: '$on_surface_medium',
+            }}
+          >
+            {body}
+          </Text>
+        ) : (
+          <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
+        )}
         <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
           <Box css={{ width: '50%' }}>
             <Dialog.Close css={{ width: '100%' }}>

package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts

@@ -20,14 +20,29 @@ export const defaultLayout: Layout = {
             sub_title: 'Setup your audio and video before joining',
           },
           join_form: {
-            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE,
+            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY,
             join_btn_label: 'Join Now',
             go_live_btn_label: 'Go Live',
           },
         },
       },
     },
-    conferencing: {},
+    conferencing: {
+      default: {
+        elements: {
+          chat: {},
+          participant_list: {},
+          video_tile_layout: {
+            grid: {
+              enable_local_tile_inset: true,
+              prominent_roles: [],
+              enable_spotlighting_peer: true,
+            },
+          },
+          emoji_reactions: {},
+        },
+      },
+    },
     leave: {},
   },
 };

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { GetResponse, Layout } from '@100mslive/types-prebuilt';
 import { defaultLayout } from '../constants';
 
@@ -25,33 +25,56 @@ export type useFetchRoomLayoutProps = {
 
 export type useFetchRoomLayoutResponse = {
   layout: Layout | undefined;
+  updateRoomLayoutForRole: (role: string) => void;
 };
 
 export const useFetchRoomLayout = ({
-  endpoint = '',
+  endpoint = 'https://api.100ms.live/v2/layouts/ui',
   authToken = '',
 }: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {
   const [layout, setLayout] = useState<Layout | undefined>(undefined);
+  const layoutResp = useRef<GetResponse>();
   const isFetchInProgress = useRef(false);
+  const updateRoomLayoutForRole = useCallback((role: string) => {
+    if (!layoutResp.current) {
+      return;
+    }
+    const [layout] = (layoutResp.current?.data || []).filter(layout => layout.role === role);
+    if (layout) {
+      setLayout(layout);
+    }
+  }, []);
   useEffect(() => {
     (async () => {
       if (isFetchInProgress.current || !authToken) {
         return;
       }
-      if (!endpoint) {
-        setLayout(defaultLayout);
-      }
       isFetchInProgress.current = true;
-      const resp = await fetchWithRetry(endpoint, {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-        },
-      });
-      const layoutResp: GetResponse = await resp.json();
-      setLayout(layoutResp.data[0]);
+      try {
+        const resp = await fetchWithRetry(endpoint, {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        });
+        layoutResp.current = await resp.json();
+      } catch (e) {
+        console.error('[Room Layout API]: Failed to fetch / process room layout. Resorting to default layout.', e);
+        layoutResp.current = {
+          data: [defaultLayout],
+        };
+      }
+      let layoutForRole = layoutResp.current?.data?.[0];
+      if (!layoutForRole) {
+        console.error(
+          '[Room Layout API]: Unable to figure out room layout from API response. Resorting to default layout.',
+        );
+        layoutForRole = defaultLayout;
+      }
+      const layout = layoutForRole;
+      setLayout(layout);
       isFetchInProgress.current = false;
     })();
   }, [authToken, endpoint]);
 
-  return { layout };
+  return { layout, updateRoomLayoutForRole };
 };

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useInsetEnabled.ts

@@ -0,0 +1,10 @@
+import { useRoomLayout } from '..';
+
+export const useInsetEnabled = (): boolean => {
+  const layout = useRoomLayout();
+  const { enable_local_tile_inset = true } =
+    //@ts-ignore
+    layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {};
+
+  return enable_local_tile_inset;
+};

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts

@@ -0,0 +1,65 @@
+import {
+  ConferencingScreen,
+  DefaultPreviewScreen_Elements,
+  LeaveScreen,
+  PreviewScreen,
+  Screens,
+} from '@100mslive/types-prebuilt';
+import { useRoomLayout } from '..';
+
+export type useRoomLayoutScreenProps = {
+  screen: keyof Screens;
+};
+
+type useRoomLayoutScreenReturnType<T extends useRoomLayoutScreenProps> = T['screen'] extends 'conferencing'
+  ? ConferencingScreen
+  : T['screen'] extends 'leave'
+  ? LeaveScreen
+  : T['screen'] extends 'preview'
+  ? PreviewScreen
+  : undefined;
+
+function useRoomLayoutScreen<T extends useRoomLayoutScreenProps>({
+  screen,
+}: T): useRoomLayoutScreenReturnType<T> | undefined {
+  const roomLayout = useRoomLayout();
+  const screenProps = roomLayout?.screens?.[screen] as useRoomLayoutScreenReturnType<T> | undefined;
+  return screenProps;
+}
+
+export function useRoomLayoutPreviewScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: 'preview' });
+  const isPreviewScreenEnabled = !!screenProps;
+  let elements: DefaultPreviewScreen_Elements | undefined;
+  let screenType: keyof PreviewScreen | undefined;
+  if (isPreviewScreenEnabled) {
+    screenType = Object.keys(screenProps)[0] as keyof PreviewScreen;
+    elements = screenProps[screenType]?.elements;
+  }
+  return {
+    isPreviewScreenEnabled,
+    elements,
+    screenType,
+  };
+}
+
+export function useRoomLayoutConferencingScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: 'conferencing' }) || {};
+  const screenType = Object.keys(screenProps)[0] as keyof ConferencingScreen;
+  const elements = screenProps[screenType]?.elements;
+  // @ts-ignore
+  const hideSections: string[] = screenProps[screenType]?.hideSections || [];
+  return {
+    hideSections,
+    elements,
+    screenType,
+  };
+}
+
+export function useRoomLayoutLeaveScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: 'leave' });
+  const isLeaveScreenEnabled = !!screenProps;
+  return {
+    isLeaveScreenEnabled,
+  };
+}

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -3,14 +3,20 @@ import type { Layout } from '@100mslive/types-prebuilt';
 import merge from 'lodash.merge';
 // @ts-ignore: fix types
 import { useAuthToken } from '../../components/AppData/useUISettings';
-import { useFetchRoomLayout } from './hooks/useFetchRoomLayout';
+import { useFetchRoomLayout, useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
 
 export type RoomLayoutProviderProps = {
   roomLayoutEndpoint?: string;
   overrideLayout?: Partial<Layout>;
 };
 
-export const RoomLayoutContext = React.createContext<Layout | undefined>(undefined);
+export const RoomLayoutContext = React.createContext<
+  | {
+      layout: Layout | undefined;
+      updateRoomLayoutForRole: useFetchRoomLayoutResponse['updateRoomLayoutForRole'] | undefined;
+    }
+  | undefined
+>(undefined);
 
 export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
   children,
@@ -18,9 +24,14 @@ export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProv
   overrideLayout,
 }) => {
   const authToken: string = useAuthToken();
-  let { layout } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
-  layout = merge(layout, overrideLayout);
-  return <RoomLayoutContext.Provider value={layout}>{children}</RoomLayoutContext.Provider>;
+  const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
+  const mergedLayout = authToken && layout ? merge(layout, overrideLayout) : layout;
+  return (
+    <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole }}>
+      {children}
+    </RoomLayoutContext.Provider>
+  );
 };
 
-export const useRoomLayout = (): Layout | undefined => React.useContext(RoomLayoutContext);
+export const useRoomLayout = () => React.useContext(RoomLayoutContext)?.layout;
+export const useUpdateRoomLayout = () => React.useContext(RoomLayoutContext)?.updateRoomLayoutForRole;

package/src/Prebuilt/services/FeatureFlags.jsx

@@ -8,7 +8,6 @@ export class FeatureFlags {
     process.env.REACT_APP_ENABLE_WHITEBOARD &&
     process.env.REACT_APP_PUSHER_APP_KEY &&
     process.env.REACT_APP_PUSHER_AUTHENDPOINT;
-  static enableBeamSpeakersLogging = process.env.REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING === 'true';
 
   static init(roomId) {
     if (!window.HMS) {

package/src/VideoTile/StyledVideoTile.tsx

@@ -14,6 +14,7 @@ const Container = styled('div', {
   width: '100%',
   height: '100%',
   position: 'relative',
+  overflow: 'hidden',
   borderRadius: '$2',
   display: 'flex',
   justifyContent: 'center',