fix: added hook

100mslive · May 21, 2024 · b01b27a · b01b27a
1 parent 424a7e1
commit b01b27a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 28 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.ts b/packages/roomkit-react/src/Prebuilt/common/hooks.ts
@@ -1,17 +1,22 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  HMSPeer,
   HMSRecording,
   parsedUserAgent,
   selectAvailableRoleNames,
+  selectIsAllowedToPublish,
   selectIsConnectedToRoom,
+  selectLocalPeerRole,
   selectPeerCount,
   selectPeerMetadata,
   selectPeers,
+  selectPeersByRoles,
   selectRecordingState,
   selectRemotePeers,
+  selectRolesMap,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
@@ -218,3 +223,31 @@ export function getResolution(
   }
   return resolution;
 }
+
+export interface WaitingRoomInfo {
+  isNotAllowedToPublish: boolean;
+  isScreenOnlyPublishParams: boolean;
+  hasSubscribedRolePublishing: boolean;
+}
+export function useWaitingRoomInfo(): WaitingRoomInfo {
+  const localPeerRole = useHMSStore(selectLocalPeerRole);
+  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);
+  const roles = useHMSStore(selectRolesMap);
+  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));
+  const isNotAllowedToPublish = video && audio && screen;
+  const isScreenOnlyPublishParams: boolean = screen;
+  const hasSubscribedRolePublishing: boolean = useMemo(() => {
+    return peersByRoles.some((peer: HMSPeer) => {
+      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
+        return !!roles[peer.roleName].publishParams?.allowed.length;
+      }
+      return false;
+    });
+  }, [peersByRoles, roles]);
+
+  return {
+    isNotAllowedToPublish,
+    isScreenOnlyPublishParams,
+    hasSubscribedRolePublishing,
+  };
+}
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
@@ -52,7 +52,7 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
       {pageList.length === 0 ? (
         <WaitingView
           title="Waiting for Host to join"
-          subTitle="Sit back and relax till others join"
+          subtitle="Sit back and relax till others join"
           icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
         />
       ) : null}

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -462,13 +462,13 @@ const HLSView = () => {
             <WaitingView
               icon={<ColoredHandIcon height={56} width={56} />}
               title="Stream has ended"
-              subTitle="Have a nice day!"
+              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"
+              subtitle="Sit back and relax"
             />
           )}
         </Flex>

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
@@ -8,10 +8,7 @@ import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectIsLocalScreenShared,
-  selectLocalPeerRole,
   selectLocalPeerRoleName,
-  selectPeersByRoles,
-  selectRolesMap,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -34,7 +31,7 @@ import {
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
+import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks';
 import { SESSION_STORE_KEY } from '../common/constants';
 // @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
@@ -49,7 +46,6 @@ export const VideoStreamingSection = ({
   hideControls: boolean;
 }) => {
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
-  const localPeerRole = useHMSStore(selectLocalPeerRole);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const isSharingScreen = useHMSStore(selectIsLocalScreenShared);
 
@@ -60,21 +56,9 @@ export const VideoStreamingSection = ({
   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]);
+  const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
 
+  console.log('pring ', isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing);
   useEffect(() => {
     if (!isConnected) {
       return;
@@ -128,7 +112,7 @@ export const VideoStreamingSection = ({
             () => (
               <WaitingView
                 title="Waiting for Host to join"
-                subTitle="Sit back and relax"
+                subtitle="Sit back and relax"
                 icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
               />
             ),
@@ -139,7 +123,7 @@ export const VideoStreamingSection = ({
             () => (
               <WaitingView
                 title="Ready to present"
-                subTitle="Select the Screenshare button to start presenting"
+                subtitle="Select the Screenshare button to start presenting"
                 icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
               />
             ),

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx b/packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx
@@ -3,7 +3,7 @@ import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 
 export const WaitingView = React.memo(
-  ({ icon, title, subTitle }: { icon: React.ReactNode; title: string; subTitle: string }) => {
+  ({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle: string }) => {
     return (
       <Flex
         align="center"
@@ -43,7 +43,7 @@ export const WaitingView = React.memo(
             variant="body1"
             css={{ fontWeight: '$regular', color: '$on_surface_medium', '@md': { fontSize: '$sm' } }}
           >
-            {subTitle}
+            {subtitle}
           </Text>
         </Flex>
       </Flex>