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

package/src/Prebuilt/components/Notifications/PollNotificationModal.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+import {
+  HMSNotificationTypes,
+  selectLocalPeerID,
+  selectPeerNameByID,
+  useHMSNotifications,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { Button } from '../../../Button';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { usePollViewToggle } from '../AppData/useSidepane';
+
+const notificationTypes = [HMSNotificationTypes.POLL_STARTED, HMSNotificationTypes.POLL_STOPPED];
+
+const pollToastKey: Record<string, string> = {};
+
+export const PollNotificationModal = () => {
+  const togglePollView = usePollViewToggle();
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const vanillaStore = useHMSVanillaStore();
+  const screenProps = useRoomLayoutConferencingScreen();
+
+  const notification = useHMSNotifications(notificationTypes);
+
+  useEffect(() => {
+    switch (notification?.type) {
+      case HMSNotificationTypes.POLL_STARTED:
+        if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
+          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
+
+          const pollToastID = ToastManager.addToast({
+            title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
+            action: (
+              <Button
+                onClick={() => togglePollView(notification.data.id)}
+                variant="standard"
+                css={{
+                  backgroundColor: '$surface_bright',
+                  fontWeight: '$semiBold',
+                  color: '$on_surface_high',
+                  p: '$xs $md',
+                }}
+              >
+                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
+              </Button>
+            ),
+            duration: Infinity,
+          });
+          pollToastKey[notification.data.id] = pollToastID;
+        }
+        break;
+      case HMSNotificationTypes.POLL_STOPPED:
+        {
+          const pollID = notification?.data.id;
+          if (pollID && pollToastKey?.[pollID]) {
+            ToastManager.removeToast(pollToastKey?.[notification.data.id]);
+            delete pollToastKey[notification?.data.id];
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }, [notification]);
+
+  return null;
+};

package/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx

@@ -5,11 +5,7 @@ import { ToastConfig } from '../Toast/ToastConfig';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 
-const notificationTypes = [
-  HMSNotificationTypes.RECONNECTED,
-  HMSNotificationTypes.RECONNECTING,
-  HMSNotificationTypes.ERROR,
-];
+const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING];
 let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {

package/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx

@@ -9,14 +9,16 @@ import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
 
+const notificationTypes = [
+  HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
+  HMSNotificationTypes.ROOM_ENDED,
+  HMSNotificationTypes.REMOVED_FROM_ROOM,
+];
+
 export const TrackBulkUnmuteModal = () => {
   const hmsActions = useHMSActions();
   const [muteNotification, setMuteNotification] = useState<HMSChangeMultiTrackStateRequest | null>(null);
-  const notification = useHMSNotifications([
-    HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-  ]);
+  const notification = useHMSNotifications(notificationTypes);
 
   useEffect(() => {
     switch (notification?.type) {

package/src/Prebuilt/components/Notifications/TrackNotifications.tsx

@@ -1,17 +1,39 @@
 import { useEffect } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
 
 const notificationTypes = [
   HMSNotificationTypes.TRACK_ADDED,
   HMSNotificationTypes.TRACK_REMOVED,
   HMSNotificationTypes.TRACK_MUTED,
   HMSNotificationTypes.TRACK_UNMUTED,
+  HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
 ];
+
 export const TrackNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   useEffect(() => {
     if (notification) {
-      console.debug(`[${notification.type}]`, notification);
+      switch (notification.type) {
+        case HMSNotificationTypes.TRACK_ADDED:
+        case HMSNotificationTypes.TRACK_REMOVED:
+        case HMSNotificationTypes.TRACK_MUTED:
+        case HMSNotificationTypes.TRACK_UNMUTED:
+          console.debug(`[${notification.type}]`, notification);
+          break;
+        case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
+          {
+            const track = notification.data?.track;
+            if (!notification.data.enabled) {
+              ToastManager.addToast({
+                title: `Your ${track.source} ${track.type} was muted by
+                  ${notification.data.requestedBy?.name}.`,
+              });
+            }
+          }
+          break;
+      }
     }
   }, [notification]);
 

package/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx

@@ -8,20 +8,28 @@ import {
 import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+
+const notificationTypes = [
+  HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
+  HMSNotificationTypes.ROOM_ENDED,
+  HMSNotificationTypes.REMOVED_FROM_ROOM,
+];
 
 export const TrackUnmuteModal = () => {
   const hmsActions = useHMSActions();
-  const notification = useHMSNotifications([
-    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-  ]);
+  const notification = useHMSNotifications(notificationTypes);
   const [muteNotification, setMuteNotification] = useState<HMSChangeTrackStateRequest | null>(null);
 
   useEffect(() => {
     switch (notification?.type) {
       case HMSNotificationTypes.REMOVED_FROM_ROOM:
       case HMSNotificationTypes.ROOM_ENDED:
+        ToastManager.addToast({
+          title: `${notification.message}. 
+              ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
+        });
         setMuteNotification(null);
         break;
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -5,9 +5,11 @@ import {
   selectLocalPeerID,
   selectPeersMap,
   selectTracksMap,
+  useHMSActions,
   useHMSStatsStore,
   useHMSStore,
 } from '@100mslive/react-sdk';
+import { Accordion } from '../../Accordion';
 import { HorizontalDivider } from '../../Divider';
 import { Dropdown } from '../../Dropdown';
 import { Label } from '../../Label';
@@ -27,6 +29,8 @@ export const StatsForNerds = ({ onOpenChange }) => {
     () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels],
     [tracksWithLabels],
   );
+  const hmsActions = useHMSActions();
+  const details = hmsActions.getDebugInfo();
   const [selectedStat, setSelectedStat] = useState(statsOptions[0]);
   const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
   const [open, setOpen] = useState(false);
@@ -46,7 +50,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
         <Dialog.Content
           css={{
             width: 'min(500px, 95%)',
-            maxHeight: '100%',
+            height: 'min(656px, 90%)',
             overflowY: 'auto',
           }}
         >
@@ -70,6 +74,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             </Text>
           </Flex>
           {/* Select */}
+
           <Flex
             direction="column"
             css={{
@@ -119,6 +124,9 @@ export const StatsForNerds = ({ onOpenChange }) => {
           ) : (
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
+          <Flex justify="start" gap={4} css={{ m: '$10 0', w: '100%' }}>
+            <DebugInfo details={details} />
+          </Flex>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
@@ -229,8 +237,29 @@ const TrackStats = ({ trackID, layer, local }) => {
   );
 };
 
-const StatsRow = React.memo(({ label, value }) => (
-  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
+const DebugInfo = ({ details }) => {
+  return (
+    <Accordion.Root type="single" collapsible css={{ w: '100%' }}>
+      <Accordion.Item value="Debug Info">
+        <Accordion.Header>
+          <Label variant="body2" css={{ c: '$on_surface_high' }}>
+            Debug Info
+          </Label>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Flex css={{ flexWrap: 'wrap', mt: '$10', gap: '$10' }}>
+            <StatsRow css={{ w: '100%' }} label="Websocket URL" value={details?.websocketURL} />
+            <StatsRow css={{ w: '100%' }} label="Init Endpoint" value={details?.initEndpoint} />
+            <StatsRow css={{ w: '100%' }} label="Enabled flags" value={details?.enabledFlags?.join(', ')} />
+          </Flex>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+};
+
+const StatsRow = React.memo(({ label, value, css }) => (
+  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3', ...css }}>
     <Text
       variant="overline"
       css={{

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
   selectLocalPeerID,
@@ -9,16 +9,22 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
+import FullPageProgress from '../FullPageProgress';
 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';
+const RoleProminence = React.lazy(() =>
+  import('./RoleProminence').then(module => ({ default: module.RoleProminence })),
+);
+const ScreenshareLayout = React.lazy(() =>
+  import('./ScreenshareLayout').then(module => ({ default: module.ScreenshareLayout })),
+);
+const WhiteboardLayout = React.lazy(() =>
+  import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })),
+);
 
 export type TileCustomisationProps = {
   hide_participant_name_on_tile: boolean;
@@ -108,38 +114,44 @@ export const GridLayout = ({
 
   if (peerSharing) {
     return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <ScreenshareLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
+      <Suspense fallback={<FullPageProgress />}>
+        <VideoTileContext.Provider value={tileLayout}>
+          <ScreenshareLayout
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            edgeToEdge={edge_to_edge}
+          />
+        </VideoTileContext.Provider>
+      </Suspense>
     );
   } else if (whiteboard?.open) {
     return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <WhiteboardLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
+      <Suspense fallback={<FullPageProgress />}>
+        <VideoTileContext.Provider value={tileLayout}>
+          <WhiteboardLayout
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            edgeToEdge={edge_to_edge}
+          />
+        </VideoTileContext.Provider>
+      </Suspense>
     );
   } 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>
+      <Suspense fallback={<FullPageProgress />}>
+        <VideoTileContext.Provider value={tileLayout}>
+          <RoleProminence
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            prominentRoles={prominentRoles}
+            isInsetEnabled={isInsetEnabled}
+            edgeToEdge={edge_to_edge}
+          />
+        </VideoTileContext.Provider>
+      </Suspense>
     );
   }
   return (

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

@@ -70,9 +70,9 @@ const SecondarySection = ({
             rootCSS={{
               padding: 0,
               maxWidth: 240,
-              aspectRatio: 16 / 9,
+              aspectRatio: '16 / 9',
               ...(hasSidebar ? { w: '100%' } : { h: '100%' }),
-              '@md': { aspectRatio: 1 },
+              '@md': { aspectRatio: '1' },
             }}
             objectFit="contain"
             {...tileLayoutProps}

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

@@ -25,7 +25,9 @@ const Root = ({
       bg: '$surface_bright',
       border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
       cursor: 'pointer',
-      '&:hover': { border: '4px solid $primary_dim' },
+      '@media (hover:hover)': {
+        '&:hover': { border: '4px solid $primary_dim' },
+      },
       ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}),
     }}
     onClick={async () => {

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

@@ -180,6 +180,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               onClick: async () => {
                 await VBHandler.removeEffects();
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
+                if (isMobile) {
+                  toggleVB();
+                }
               },
               supported: true,
             },
@@ -235,6 +238,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
             onClick: async () => {
               await VBHandler?.setBackground(mediaURL);
               hmsActions.setAppData(APP_DATA.background, mediaURL);
+              if (isMobile) {
+                toggleVB();
+              }
             },
             supported: true,
           }))}

package/src/Prebuilt/layouts/HLSView.jsx

@@ -286,6 +286,7 @@ const HLSView = () => {
         hlsPlayer.reset();
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hlsUrl, vanillaStore, hmsActions]);
 
   /**

package/src/Prebuilt/layouts/PDFView.jsx

@@ -19,6 +19,7 @@ export const PDFView = () => {
     return () => {
       resetConfig();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     (async () => {

package/src/Prebuilt/layouts/SidePane.tsx

@@ -1,14 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { match } from 'ts-pattern';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
-import { Polls } from '../components/Polls/Polls';
-import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
 import { LayoutMode } from '../components/Settings/LayoutSettings';
-import { SidePaneTabs } from '../components/SidePaneTabs';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
 import VideoTile from '../components/VideoTile';
-import { VBPicker } from '../components/VirtualBackground/VBPicker';
 import { Flex } from '../../Layout';
 import { config as cssConfig, styled } from '../../Theme';
 // @ts-ignore: No implicit Any
@@ -22,6 +18,16 @@ import {
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
+const SidePaneTabs = React.lazy(() =>
+  import('../components/SidePaneTabs').then(module => ({ default: module.SidePaneTabs })),
+);
+const Polls = React.lazy(() => import('../components/Polls/Polls').then(module => ({ default: module.Polls })));
+const RoomDetailsPane = React.lazy(() =>
+  import('../components/RoomDetails/RoomDetailsPane').then(module => ({ default: module.RoomDetailsPane })),
+);
+const VBPicker = React.lazy(() =>
+  import('../components/VirtualBackground/VBPicker').then(module => ({ default: module.VBPicker })),
+);
 
 const Wrapper = styled('div', {
   w: '$100',
@@ -233,7 +239,7 @@ const SidePane = ({
           {...tileLayout}
         />
       )}
-      {SidepaneComponent}
+      <Suspense fallback={<></>}>{SidepaneComponent}</Suspense>
     </Flex>
   );
 };

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -19,13 +19,7 @@ import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
 import { config } from '../../Theme';
-// @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 { CaptionsViewer } from '../plugins/CaptionsViewer';
 // @ts-ignore: No implicit Any
 import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings';
@@ -34,6 +28,11 @@ import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '.
 import { SESSION_STORE_KEY } from '../common/constants';
 // @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
+// @ts-ignore: No implicit Any
+const EmbedView = React.lazy(() => import('./EmbedView').then(module => ({ default: module.EmbedView })));
+// @ts-ignore: No implicit Any
+const PDFView = React.lazy(() => import('./PDFView').then(module => ({ default: module.PDFView })));
+const WaitingView = React.lazy(() => import('./WaitingView').then(module => ({ default: module.WaitingView })));
 
 export const VideoStreamingSection = ({
   screenType,
@@ -79,18 +78,18 @@ export const VideoStreamingSection = ({
   }
 
   return (
-    <Suspense fallback={<FullPageProgress />}>
-      <Flex
-        css={{
-          size: '100%',
-          position: 'relative',
-          gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
-        }}
-        direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
-          .with({ isLandscapeHLSStream: true }, () => 'row')
-          .with({ isMobileHLSStream: true }, () => 'column')
-          .otherwise(() => 'row')}
-      >
+    <Flex
+      css={{
+        size: '100%',
+        position: 'relative',
+        gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
+      }}
+      direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
+        .with({ isLandscapeHLSStream: true }, () => 'row')
+        .with({ isMobileHLSStream: true }, () => 'column')
+        .otherwise(() => 'row')}
+    >
+      <Suspense fallback={<FullPageProgress />}>
         {match({
           screenType,
           isNotAllowedToPublish,
@@ -142,27 +141,29 @@ export const VideoStreamingSection = ({
             return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
           })}
         <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
-        <Box
-          css={{
-            flex: match({ isLandscapeHLSStream, isMobileHLSStream })
-              .with({ isLandscapeHLSStream: true }, () => '1  1 0')
-              .with({ isMobileHLSStream: true }, () => '2 1 0')
-              .otherwise(() => undefined),
-            position: 'relative',
-            height: !isMobileHLSStream ? '100%' : undefined,
-            maxHeight: '100%',
-            '&:empty': { display: 'none' },
-            overflowY: 'clip',
-          }}
-        >
+      </Suspense>
+      <Box
+        css={{
+          flex: match({ isLandscapeHLSStream, isMobileHLSStream })
+            .with({ isLandscapeHLSStream: true }, () => '1  1 0')
+            .with({ isMobileHLSStream: true }, () => '2 1 0')
+            .otherwise(() => undefined),
+          position: 'relative',
+          height: !isMobileHLSStream ? '100%' : undefined,
+          maxHeight: '100%',
+          '&:empty': { display: 'none' },
+          overflowY: 'clip',
+        }}
+      >
+        <Suspense fallback={<></>}>
           <SidePane
             screenType={screenType}
             // @ts-ignore
             tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
             hideControls={hideControls}
           />
-        </Box>
-      </Flex>
-    </Suspense>
+        </Suspense>
+      </Box>
+    </Flex>
   );
 };