@100mslive/roomkit-react 0.3.14 → 0.3.15-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.14",
+  "version": "0.3.15-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -67,6 +67,7 @@
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
     "esbuild-loader": "^4.0.2",
+    "knip": "^5.11.0",
     "react": "^18.1.0",
     "storybook-dark-mode": "^3.0.0"
   },
@@ -74,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.14",
+    "@100mslive/hls-player": "0.3.15-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.14",
-    "@100mslive/hms-whiteboard": "0.0.4",
-    "@100mslive/react-icons": "0.10.14",
-    "@100mslive/react-sdk": "0.10.14",
+    "@100mslive/hms-virtual-background": "1.13.15-alpha.1",
+    "@100mslive/hms-whiteboard": "0.0.5-alpha.1",
+    "@100mslive/react-icons": "0.10.15-alpha.1",
+    "@100mslive/react-sdk": "0.10.15-alpha.1",
     "@100mslive/types-prebuilt": "0.12.9",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +116,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "0e76f9d5dee8b4eec991bda145a3157c5a45593c"
+  "gitHead": "d841ae70e97bfd176bcfc86b44f6ad939832fe13"
 }

package/src/Diagnostics/AudioTest.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   HMSException,
   selectDevices,
@@ -11,14 +11,13 @@ import {
 } from '@100mslive/react-sdk';
 import { MicOnIcon, SpeakerIcon, StopIcon } from '@100mslive/react-icons';
 import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
+import { DiagnosticsContext, TestContainer, TestFooter } from './components';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
 import { Progress } from '../Progress';
 import { Text } from '../Text';
 // @ts-ignore: No implicit any
 import { DeviceSelector } from './DeviceSelector';
-import { hmsDiagnostics } from './hms';
 import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
 import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
 
@@ -27,6 +26,7 @@ const SelectContainer = ({ children }: { children: React.ReactNode }) => (
 );
 
 const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<Error | undefined>> }) => {
+  const { hmsDiagnostics } = useContext(DiagnosticsContext);
   const devices = useHMSStore(selectDevices);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
@@ -45,8 +45,9 @@ const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<E
         selection={selectedMic}
         icon={<MicOnIcon />}
         onChange={(deviceId: string) => {
+          setError(undefined);
           setSelectedMic(deviceId);
-          hmsDiagnostics.stopMicCheck();
+          hmsDiagnostics?.stopMicCheck();
         }}
       />
       <Flex css={{ gap: '$6', alignItems: 'center' }}>
@@ -55,9 +56,9 @@ const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<E
           icon
           onClick={() => {
             isRecording
-              ? hmsDiagnostics.stopMicCheck()
+              ? hmsDiagnostics?.stopMicCheck()
               : hmsDiagnostics
-                  .startMicCheck({
+                  ?.startMicCheck({
                     inputDevice: selectedMic,
                     onError: (err: Error) => {
                       setError(err);
@@ -79,14 +80,14 @@ const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<E
         <Button
           icon
           variant="standard"
-          outlined={hmsDiagnostics.getRecordedAudio() === TEST_AUDIO_URL}
+          outlined={hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
           onClick={() => {
             if (audioRef.current) {
-              audioRef.current.src = hmsDiagnostics.getRecordedAudio() || '';
+              audioRef.current.src = hmsDiagnostics?.getRecordedAudio() || '';
               audioRef.current.play();
             }
           }}
-          disabled={playing || hmsDiagnostics.getRecordedAudio() === TEST_AUDIO_URL}
+          disabled={playing || hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
         >
           <SpeakerIcon />
           {playing ? 'Playing...' : 'Playback'}
@@ -141,10 +142,11 @@ const SpeakerTest = () => {
 };
 
 export const AudioTest = () => {
+  const { hmsDiagnostics } = useContext(DiagnosticsContext);
   const [error, setError] = useState<Error | undefined>();
   useEffect(() => {
-    hmsDiagnostics.requestPermission({ audio: true }).catch(error => setError(error));
-  }, []);
+    hmsDiagnostics?.requestPermission({ audio: true }).catch(error => setError(error));
+  }, [hmsDiagnostics]);
 
   return (
     <>

package/src/Diagnostics/BrowserTest.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { parsedUserAgent } from '@100mslive/react-sdk';
-import { TestContainer, TestFooter } from './components';
+import { DiagnosticsContext, TestContainer, TestFooter } from './components';
 import { Box, Flex } from '../Layout';
 import { Text } from '../Text';
-import { hmsDiagnostics } from './hms';
 
 const CMS_MEDIA_SERVER = 'https://storage.googleapis.com/100ms-cms-prod/';
 
@@ -103,14 +102,15 @@ const CheckDetails = ({ title, value, iconURL }: { title: string; value: string;
 );
 
 export const BrowserTest = () => {
+  const { hmsDiagnostics } = useContext(DiagnosticsContext);
   const [error, setError] = useState<Error | undefined>();
   useEffect(() => {
     try {
-      hmsDiagnostics.checkBrowserSupport();
+      hmsDiagnostics?.checkBrowserSupport();
     } catch (err) {
       setError(err as Error);
     }
-  }, []);
+  }, [hmsDiagnostics]);
   return (
     <>
       <TestContainer css={{ display: 'flex', gap: '$8', '@lg': { display: 'block' } }}>

package/src/Diagnostics/ConnectivityTest.tsx

@@ -7,7 +7,6 @@ import { Box, Flex } from '../Layout';
 import { Loading } from '../Loading';
 import { formatBytes } from '../Stats';
 import { Text } from '../Text';
-import { hmsDiagnostics } from './hms';
 
 const Regions = {
   in: 'India',
@@ -237,7 +236,7 @@ const ConnectivityTestReport = ({
   if (progress !== undefined) {
     return (
       <TestContainer css={{ textAlign: 'center' }}>
-        <Text css={{ c: '$primary_bright', textAlign: 'center' }}>
+        <Text css={{ c: '$primary_bright', display: 'flex', justifyContent: 'center' }}>
           <Loading size="3.5rem" color="currentColor" />
         </Text>
         <Text variant="h6" css={{ mt: '$8' }}>
@@ -310,7 +309,7 @@ const RegionSelector = ({
 };
 
 export const ConnectivityTest = () => {
-  const { setConnectivityTested } = useContext(DiagnosticsContext);
+  const { hmsDiagnostics, setConnectivityTested } = useContext(DiagnosticsContext);
   const [region, setRegion] = useState<string | undefined>(Object.keys(Regions)[0]);
   const [error, setError] = useState<Error | undefined>();
   const [progress, setProgress] = useState<ConnectivityState>();
@@ -321,7 +320,7 @@ export const ConnectivityTest = () => {
     setError(undefined);
     setResult(undefined);
     hmsDiagnostics
-      .startConnectivityCheck(
+      ?.startConnectivityCheck(
         state => {
           setProgress(state);
         },

package/src/Diagnostics/Diagnostics.tsx

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import { HMSRoomProvider } from '@100mslive/react-sdk';
+import React, { useContext, useRef, useState } from 'react';
+import { HMSRoomProvider, useHMSActions } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ConnectivityIcon, GlobeIcon, MicOnIcon, VideoOnIcon } from '@100mslive/react-icons';
 import { DiagnosticsContext, DiagnosticsSteps } from './components';
 import { Box, Flex } from '../Layout';
@@ -8,7 +8,6 @@ import { HMSThemeProvider } from '../Theme';
 import { AudioTest } from './AudioTest';
 import { BrowserTest } from './BrowserTest';
 import { ConnectivityTest } from './ConnectivityTest';
-import { hmsActions, hmsNotifications, hmsStats, hmsStore } from './hms';
 import { VideoTest } from './VideoTest';
 
 const DiagnosticsStepIcon: Record<string, React.ReactNode> = {
@@ -110,24 +109,41 @@ const DiagnosticsStepsList = () => {
   );
 };
 
+const DiagnosticsProvider = () => {
+  const actions = useHMSActions();
+  const [activeStep, setActiveStep] = useState(Object.keys(DiagnosticsSteps)[0]);
+  const [connectivityTested, setConnectivityTested] = useState(false);
+  const diagnosticsRef = useRef(actions.initDiagnostics());
+
+  return (
+    <DiagnosticsContext.Provider
+      value={{
+        hmsDiagnostics: diagnosticsRef.current,
+        activeStep,
+        setActiveStep,
+        connectivityTested,
+        setConnectivityTested,
+      }}
+    >
+      <Container>
+        <Text variant="h4">Pre-call Test</Text>
+        <Text variant="md" css={{ c: '$on_primary_medium' }}>
+          Make sure your devices and network are good to go, let's get started.
+        </Text>
+        <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
+          <DiagnosticsStepsList />
+          <DiagnosticsStep />
+        </Flex>
+      </Container>
+    </DiagnosticsContext.Provider>
+  );
+};
+
 export const Diagnostics = () => {
-  const [activeStep, setActiveStep] = React.useState(Object.keys(DiagnosticsSteps)[0]);
-  const [connectivityTested, setConnectivityTested] = React.useState(false);
   return (
-    <HMSRoomProvider store={hmsStore} actions={hmsActions} notifications={hmsNotifications} stats={hmsStats}>
+    <HMSRoomProvider>
       <HMSThemeProvider themeType="default">
-        <DiagnosticsContext.Provider value={{ activeStep, setActiveStep, connectivityTested, setConnectivityTested }}>
-          <Container>
-            <Text variant="h4">Pre-call Test</Text>
-            <Text variant="md" css={{ c: '$on_primary_medium' }}>
-              Make sure your devices and network are good to go, let's get started.
-            </Text>
-            <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
-              <DiagnosticsStepsList />
-              <DiagnosticsStep />
-            </Flex>
-          </Container>
-        </DiagnosticsContext.Provider>
+        <DiagnosticsProvider />
       </HMSThemeProvider>
     </HMSRoomProvider>
   );

package/src/Diagnostics/VideoTest.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   HMSException,
   selectDevices,
@@ -8,16 +8,16 @@ import {
 } from '@100mslive/react-sdk';
 import { VideoOnIcon } from '@100mslive/react-icons';
 import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
+import { DiagnosticsContext, TestContainer, TestFooter } from './components';
 import { Flex } from '../Layout';
 import { Text } from '../Text';
 import { Video } from '../Video';
 import { StyledVideoTile } from '../VideoTile';
 // @ts-ignore: No implicit any
 import { DeviceSelector } from './DeviceSelector';
-import { hmsDiagnostics } from './hms';
 
 export const VideoTest = () => {
+  const { hmsDiagnostics } = useContext(DiagnosticsContext);
   const allDevices = useHMSStore(selectDevices);
   const { videoInput } = allDevices;
   const trackID = useHMSStore(selectLocalVideoTrackID);
@@ -25,8 +25,8 @@ export const VideoTest = () => {
   const [error, setError] = useState<HMSException | undefined>();
 
   useEffect(() => {
-    hmsDiagnostics.startCameraCheck().catch(err => setError(err));
-  }, []);
+    hmsDiagnostics?.startCameraCheck().catch(err => setError(err));
+  }, [hmsDiagnostics]);
 
   return (
     <>
@@ -55,8 +55,8 @@ export const VideoTest = () => {
             icon={<VideoOnIcon />}
             selection={sdkSelectedDevices.videoInputDeviceId}
             onChange={async (deviceId: string) => {
-              hmsDiagnostics.stopCameraCheck();
-              hmsDiagnostics.startCameraCheck(deviceId);
+              hmsDiagnostics?.stopCameraCheck();
+              hmsDiagnostics?.startCameraCheck(deviceId);
             }}
           />
         </Flex>

package/src/Diagnostics/components.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
+import { HMSDiagnosticsInterface } from '@100mslive/react-sdk';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
 import { Text } from '../Text';
 import { CSS } from '../Theme';
-import { hmsDiagnostics } from './hms';
 
 export const DiagnosticsSteps: Record<string, string> = {
   browser: 'Browser Support',
@@ -13,6 +13,7 @@ export const DiagnosticsSteps: Record<string, string> = {
 };
 
 export const DiagnosticsContext = React.createContext<{
+  hmsDiagnostics?: HMSDiagnosticsInterface;
   activeStep: string;
   setActiveStep: React.Dispatch<React.SetStateAction<string>>;
   connectivityTested: boolean;
@@ -41,15 +42,15 @@ export const TestFooter = ({
   error?: Error;
   children?: React.ReactNode;
 }) => {
-  const { activeStep, setActiveStep } = useContext(DiagnosticsContext);
+  const { hmsDiagnostics, activeStep, setActiveStep } = useContext(DiagnosticsContext);
 
   const onNextStep = () => {
     if (activeStep === 'audio') {
-      hmsDiagnostics.stopMicCheck();
+      hmsDiagnostics?.stopMicCheck();
     } else if (activeStep === 'video') {
-      hmsDiagnostics.stopCameraCheck();
+      hmsDiagnostics?.stopCameraCheck();
     } else if (activeStep === 'connectivity') {
-      hmsDiagnostics.stopConnectivityCheck();
+      hmsDiagnostics?.stopConnectivityCheck();
     }
 
     const keys = Object.keys(DiagnosticsSteps);

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

@@ -75,28 +75,35 @@ const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }
         ml: '$2',
         mr: '$4',
         gap: '$space$2',
+        flexWrap: 'nowrap',
       }}
     >
       {left && (
-        <SenderName
+        <Text
           variant="xs"
           as="span"
-          css={{ color: '$on_surface_medium', textTransform: 'capitalize', fontWeight: '$regular' }}
+          css={{
+            color: '$on_surface_medium',
+            textTransform: 'capitalize',
+            fontWeight: '$regular',
+            whiteSpace: 'nowrap',
+          }}
         >
           {left}
-        </SenderName>
+        </Text>
       )}
       {right && (
-        <SenderName
+        <Text
           as="span"
           variant="overline"
           css={{
             color: '$on_surface_medium',
             fontWeight: '$regular',
+            whiteSpace: 'nowrap',
           }}
         >
           {right}
-        </SenderName>
+        </Text>
       )}
     </Flex>
   );
@@ -169,7 +176,7 @@ const SenderName = styled(Text, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  maxWidth: '14ch',
+  width: '100%',
   minWidth: 0,
   color: '$on_surface_high',
   fontWeight: '$semiBold',
@@ -251,7 +258,15 @@ const ChatMessage = React.memo(
             }}
             as="div"
           >
-            <Flex align="baseline">
+            <Flex
+              align="baseline"
+              css={{
+                flexWrap: 'nowrap',
+                maxWidth: 'calc(100% - 10ch)',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
               {message.senderName === 'You' || !message.senderName ? (
                 <SenderName
                   as="span"
@@ -261,7 +276,7 @@ const ChatMessage = React.memo(
                   {message.senderName || 'Anonymous'}
                 </SenderName>
               ) : (
-                <Tooltip title={message.senderName} side="top" align="start">
+                <Tooltip title={message.senderName} side="top" align="start" boxCss={{ zIndex: 50 }}>
                   <SenderName
                     as="span"
                     variant="sub2"

package/src/Prebuilt/components/Header/AdditionalRoomState.jsx

@@ -1,16 +1,8 @@
 import React, { useState } from 'react';
-import { selectLocalPeerID, selectPeerSharingVideoPlaylist, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
-import {
-  AudioPlayerIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  MusicIcon,
-  ShareScreenIcon,
-  VideoPlayerIcon,
-} from '@100mslive/react-icons';
+import { selectLocalPeerID, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { ChevronDownIcon, ChevronUpIcon, MusicIcon, ShareScreenIcon, VideoPlayerIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
 import { useUISettings } from '../AppData/useUISettings';
-import { usePlaylistMusic } from '../hooks/usePlaylistMusic';
 import { useScreenshareAudio } from '../hooks/useScreenshareAudio';
 import { UI_SETTINGS } from '../../common/constants';
 
@@ -35,29 +27,21 @@ export const getRecordingText = ({ isBrowserRecordingOn, isServerRecordingOn, is
  * Display state of recording, streaming, playlist, whiteboard
  */
 export const AdditionalRoomState = () => {
-  const playlist = usePlaylistMusic();
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const screenshareAudio = useScreenshareAudio();
   const [open, setOpen] = useState(false);
-  const isPlaylistInactive = [
-    !playlist.peer || !playlist.track,
-    !playlist.peer?.isLocal && !playlist.track?.enabled,
-    playlist.peer?.isLocal && !playlist.selection,
-  ].some(Boolean);
   const isAudioshareInactive = [
     !screenshareAudio.peer || !screenshareAudio.track,
     !screenshareAudio.peer?.isLocal && !screenshareAudio.track?.enabled,
   ].some(Boolean);
 
-  const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
   const localPeerID = useHMSStore(selectLocalPeerID);
-  const isVideoPlayListPlaying = !!peerSharingPlaylist?.id;
   const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();
 
   const isVideoScreenSharingOn = !!screenShareVideoTrackId;
   const shouldShowScreenShareState = isAudioOnly && isVideoScreenSharingOn;
-  const shouldShowVideoState = isAudioOnly && isVideoPlayListPlaying;
-  if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
+  const shouldShowVideoState = isAudioOnly;
+  if (isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
     return null;
   }
 
@@ -96,50 +80,12 @@ export const AdditionalRoomState = () => {
               </Flex>
             </Tooltip>
           )}
-          {!isPlaylistInactive && (
-            <Tooltip title="Playlist Music">
-              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
-                <AudioPlayerIcon width={24} height={24} />
-              </Flex>
-            </Tooltip>
-          )}
           <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </Box>
         </Flex>
       </Dropdown.Trigger>
       <Dropdown.Content sideOffset={5} align="end" css={{ w: '$60' }}>
-        {!isPlaylistInactive && (
-          <Dropdown.Item css={{ color: '$on_primary_high' }}>
-            <AudioPlayerIcon width={24} height={24} />
-            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
-              Playlist is playing
-            </Text>
-            {playlist.peer.isLocal ? (
-              <Text
-                variant="sm"
-                css={{ color: '$alert_error_default', cursor: 'pointer', ml: '$2' }}
-                onClick={e => {
-                  e.preventDefault();
-                  playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);
-                }}
-              >
-                {playlist.selection.playing ? 'Pause' : 'Play'}
-              </Text>
-            ) : (
-              <Text
-                variant="sm"
-                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
-                onClick={e => {
-                  e.preventDefault();
-                  playlist.setVolume(!playlist.track.volume ? 100 : 0);
-                }}
-              >
-                {playlist.track.volume === 0 ? 'Unmute' : 'Mute'}
-              </Text>
-            )}
-          </Dropdown.Item>
-        )}
         {!isAudioshareInactive && (
           <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <MusicIcon width={24} height={24} />
@@ -166,14 +112,6 @@ export const AdditionalRoomState = () => {
             </Text>
           </Dropdown.Item>
         )}
-        {shouldShowVideoState && (
-          <Dropdown.Item css={{ color: '$on_primary_high' }}>
-            <VideoPlayerIcon width={24} height={24} />
-            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
-              {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}
-            </Text>
-          </Dropdown.Item>
-        )}
       </Dropdown.Content>
     </Dropdown.Root>
   );

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

@@ -49,11 +49,11 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
     };
   }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {
-    setActiveScreenSharePeer(isMobile ? '' : activeSharePeer?.id);
+    setActiveScreenSharePeer(activeSharePeer?.id);
     return () => {
       setActiveScreenSharePeer('');
     };
-  }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
+  }, [activeSharePeer?.id, setActiveScreenSharePeer]);
 
   return (
     <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>

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

@@ -19,6 +19,10 @@ const WhiteboardEmbed = () => {
   const isMobile = useMedia(cssConfig.media.md);
   const { token, endpoint, zoomToContent } = useWhiteboard(isMobile);
 
+  if (!token) {
+    return null;
+  }
+
   return (
     <Box
       css={{

package/dist/Diagnostics/hms.d.ts

@@ -1,9 +0,0 @@
-export declare const hmsStore: import("@100mslive/hms-video-store").HMSStoreWrapper<{
-    sessionStore: Record<string, any>;
-}>;
-export declare const hmsActions: import("@100mslive/hms-video-store").HMSActions<{
-    sessionStore: Record<string, any>;
-}>;
-export declare const hmsNotifications: import("@100mslive/hms-video-store").HMSNotifications;
-export declare const hmsStats: import("@100mslive/hms-video-store").HMSStatsStoreWrapper;
-export declare const hmsDiagnostics: import("@100mslive/hms-video-store").HMSDiagnosticsInterface;

package/dist/Prebuilt/components/HMSVideo/PlayButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const PlayButton: ({ isPaused, width, height, }: {
-    isPaused: boolean;
-    width: number;
-    height: number;
-}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/VoterList.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const VoterList: ({ voters }: {
-    voters: string[];
-}) => React.JSX.Element[];