feat: empty screen for viewers

packages/roomkit-react/src/Prebuilt/common/constants.ts

@@ -1,6 +1,5 @@
 import { parsedUserAgent } from '@100mslive/react-sdk';
 
-export const DEFAULT_WAITING_VIEWER_ROLE = 'waiting-room';
 export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
 export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
 export const QUERY_PARAM_NAME = 'name';
@@ -30,7 +29,6 @@ export const APP_DATA = {
   appConfig: 'appConfig',
   sidePane: 'sidePane',
   hlsStats: 'hlsStats',
-  waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
   hlsStarted: 'hlsStarted',

packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx

@@ -21,7 +21,6 @@ import { useSetAppDataByKey } from './useUISettings';
 import {
   APP_DATA,
   CHAT_SELECTOR,
-  DEFAULT_WAITING_VIEWER_ROLE,
   POLL_STATE,
   SIDE_PANE_OPTIONS,
   UI_MODE_GRID,
@@ -56,7 +55,6 @@ const initialAppData = {
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,
-  [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,

packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js

@@ -48,9 +48,6 @@ export const useSetUiSettings = uiSettingKey => {
   return [value, setValue];
 };
 
-export const useWaitingViewerRole = () => {
-  return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
-};
 export const useIsHLSStartedFromUI = () => {
   return useHMSStore(selectAppData(APP_DATA.hlsStarted));
 };

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+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';
@@ -13,26 +14,14 @@ import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
 import { UI_SETTINGS } from '../../common/constants';
 
 export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
-  const localPeer = useHMSStore(selectLocalPeer);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  let pageList = usePagesWithTiles({
+  const pageList = usePagesWithTiles({
     peers,
     maxTileCount,
   });
-  // useMemo is needed to prevent recursion as new array is created for localPeer
-  const inputPeers = useMemo(() => {
-    if (pageList.length === 0) {
-      return localPeer ? [localPeer] : [];
-    }
-    return peers;
-  }, [pageList.length, peers, localPeer]);
-  // Pass local peer to main grid if no other peer has tiles
-  pageList = usePagesWithTiles({
-    peers: inputPeers,
-    maxTileCount,
-  });
+
   const { ref, pagesWithTiles } = useTileLayout({
     pageList,
     maxTileCount,
@@ -60,7 +49,14 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
           numPages={pagesWithTiles.length}
         />
       )}
-      {isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== localPeer?.id && <InsetTile />}
+      {pageList.length === 0 ? (
+        <WaitingView
+          title="Waiting for Host to join"
+          subTitle="Sit back and relax till others join"
+          icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+        />
+      ) : null}
+      {isInsetEnabled && <InsetTile />}
     </Flex>
   );
 }

packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx

@@ -34,6 +34,7 @@ import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
+import { WaitingView } from './WaitingView';
 import { useSidepaneToggle } from '../components/AppData/useSidepane';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsLandscape, useKeyboardHandler } from '../common/hooks';
@@ -457,17 +458,19 @@ const HLSView = () => {
             flex: isLandscape ? '2 1 0' : '1 1 0',
           }}
         >
-          <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
-            <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
-              {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
-            </Flex>
-            <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
-              {streamEnded ? 'Stream has ended' : 'Stream yet to start'}
-            </Text>
-            <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
-              {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}
-            </Text>
-          </Flex>
+          {streamEnded ? (
+            <WaitingView
+              icon={<ColoredHandIcon height={56} width={56} />}
+              title="Stream has ended"
+              subTitle="Have a nice day!"
+            />
+          ) : (
+            <WaitingView
+              icon={<GoLiveIcon height={56} width={56} style={{ color: 'white' }} />}
+              title="Stream yet to start"
+              subTitle="Sit back and relax"
+            />
+          )}
         </Flex>
       </>
     );

packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -1,11 +1,21 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect, useMemo } from 'react';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
-import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectIsConnectedToRoom,
+  selectIsLocalScreenShared,
+  selectLocalPeerRole,
+  selectLocalPeerRoleName,
+  selectPeersByRoles,
+  selectRolesMap,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
@@ -21,7 +31,6 @@ import { CaptionsViewer } from '../plugins/CaptionsViewer';
 import {
   usePDFConfig,
   useUrlToEmbed,
-  useWaitingViewerRole,
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
@@ -39,17 +48,33 @@ export const VideoStreamingSection = ({
   elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
   hideControls: boolean;
 }) => {
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+  const localPeerRole = useHMSStore(selectLocalPeerRole);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const isSharingScreen = useHMSStore(selectIsLocalScreenShared);
 
   const hmsActions = useHMSActions();
-  const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
 
+  const roles = useHMSStore(selectRolesMap);
+  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));
+  const isNotAllowedToPublish = localPeerRole?.publishParams?.allowed.length === 0;
+  const isScreenOnlyPublishParams =
+    localPeerRole?.publishParams?.allowed.some(value => value === 'screen') &&
+    localPeerRole?.publishParams?.allowed.length === 1;
+  const hasSubscribedRolePublishing = useMemo(() => {
+    return peersByRoles.some(peer => {
+      if (peer.roleName && roles[peer.roleName]) {
+        return !!roles[peer.roleName].publishParams?.allowed.length;
+      }
+      return true;
+    });
+  }, [peersByRoles, roles]);
+
   useEffect(() => {
     if (!isConnected) {
       return;
@@ -64,7 +89,7 @@ export const VideoStreamingSection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, hmsActions]);
 
-  if (!localPeerRole) {
+  if (!localPeerRoleName) {
     // we don't know the role yet to decide how to render UI
     return null;
   }
@@ -82,16 +107,42 @@ export const VideoStreamingSection = ({
           .with({ isMobileHLSStream: true }, () => 'column')
           .otherwise(() => 'row')}
       >
-        {match({ screenType, localPeerRole, pdfAnnotatorActive, urlToIframe })
+        {match({
+          screenType,
+          isNotAllowedToPublish,
+          isScreenOnlyPublishParams,
+          hasSubscribedRolePublishing,
+          isSharingScreen,
+          pdfAnnotatorActive,
+          urlToIframe,
+        })
           .with(
             {
               screenType: 'hls_live_streaming',
             },
             () => <HLSView />,
           )
           .when(
-            ({ localPeerRole }) => localPeerRole === waitingViewerRole,
-            () => <WaitingView />,
+            ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
+              isNotAllowedToPublish && !hasSubscribedRolePublishing,
+            () => (
+              <WaitingView
+                title="Waiting for Host to join"
+                subTitle="Sit back and relax"
+                icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+              />
+            ),
+          )
+          .when(
+            ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
+              isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
+            () => (
+              <WaitingView
+                title="Ready to present"
+                subTitle="Select the Screenshare button to start presenting"
+                icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
+              />
+            ),
           )
           .when(
             ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,