fix: page becoming unresponsive after starting stream

packages/roomkit-react/src/Prebuilt/App.tsx

@@ -40,6 +40,7 @@ import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 // @ts-ignore: No implicit Any
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
+import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming';
 import {
   useRoomLayoutLeaveScreen,
   useRoomLayoutPreviewScreen,
@@ -261,6 +262,7 @@ const Redirector = ({ showPreview }: { showPreview: boolean }) => {
 const RouteList = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  useAutoStartStreaming();
   return (
     <Routes>
       {isPreviewScreenEnabled ? (

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

@@ -152,6 +152,7 @@ const ResetStreamingStart = () => {
    */
   useEffect(() => {
     if (roomState === HMSRoomState.Disconnected) {
+      console.log('hls streaming reset on disconnected');
       setHLSStarted(false);
       setRecordingStarted(false);
       setRTMPStarted(false);
@@ -160,6 +161,7 @@ const ResetStreamingStart = () => {
   useEffect(() => {
     if (isHLSRunning || hlsError) {
       if (hlsStarted) {
+        console.log('hls streaming reset');
         setHLSStarted(false);
         if (isStreamingOpen) {
           toggleStreaming();

packages/roomkit-react/src/Prebuilt/components/conference.jsx

@@ -124,6 +124,8 @@ const Conference = () => {
     return <FullPageProgress loadingText="Starting live stream..." />;
   }
 
+  console.log('conference rendering');
+
   return (
     <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
       {!screenProps.hideSections.includes('header') && (

packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  HMSException,
+  selectIsConnectedToRoom,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
+import { useShowStreamingUI } from '../../common/hooks';
+// @ts-ignore: No implicit Any
+import { APP_DATA } from '../../common/constants';
+
+export const useAutoStartStreaming = () => {
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const permissions = useHMSStore(selectPermissions);
+  const showStreamingUI = useShowStreamingUI();
+  const hmsActions = useHMSActions();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { isHLSRunning } = useRecordingStreaming();
+  const streamStartedRef = useRef(false);
+
+  const startHLS = useCallback(async () => {
+    try {
+      if (isHLSStarted || !showStreamingUI || isHLSRunning) {
+        return;
+      }
+      console.log('starting hls called');
+      setHLSStarted(true);
+      streamStartedRef.current = true;
+      await hmsActions.startHLSStreaming();
+    } catch (error) {
+      if ((error as HMSException).message?.includes('beam already started')) {
+        return;
+      }
+      streamStartedRef.current = false;
+      setHLSStarted(false);
+    }
+  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
+
+  useEffect(() => {
+    if (!isHLSStarted && !isHLSRunning) {
+      streamStartedRef.current = false;
+    }
+  }, [isHLSStarted, isHLSRunning]);
+
+  useEffect(() => {
+    if (!isConnected || streamStartedRef.current || !permissions?.hlsStreaming) {
+      return;
+    }
+    // Is a streaming kit and broadcaster joins
+    console.log('start hls called');
+    startHLS();
+  }, [isConnected, permissions?.hlsStreaming, startHLS]);
+};

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

@@ -1,43 +1,30 @@
-import React, { Suspense, useCallback, useEffect } from 'react';
-import { HMSException } from '@100mslive/hms-video';
+import React, { Suspense, useEffect } from 'react';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
-import {
-  selectIsConnectedToRoom,
-  selectLocalPeerRoleName,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
+import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
-// @ts-ignore: No implicit Any
 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';
-// @ts-ignore: No implicit Any
 import SidePane from './SidePane';
 // @ts-ignore: No implicit Any
 import { WaitingView } from './WaitingView';
 // import { useWhiteboardMetadata } from '../plugins/whiteboard';
 import {
   usePDFAnnotator,
-  useSetAppDataByKey,
   useUrlToEmbed,
   useWaitingViewerRole,
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 // @ts-ignore: No implicit Any
-import { useShowStreamingUI } from '../common/hooks';
-// @ts-ignore: No implicit Any
-import { APP_DATA, SESSION_STORE_KEY } from '../common/constants';
+import { SESSION_STORE_KEY } from '../common/constants';
 
 // const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
 // @ts-ignore: No implicit Any
@@ -57,36 +44,6 @@ export const VideoStreamingSection = ({
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-  const { isHLSRunning } = useRecordingStreaming();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore(selectPermissions);
-  const showStreamingUI = useShowStreamingUI();
-
-  const startHLS = useCallback(async () => {
-    try {
-      if (isHLSStarted) {
-        return;
-      }
-      setHLSStarted(true);
-      await hmsActions.startHLSStreaming();
-    } catch (error) {
-      if ((error as HMSException).message?.includes('beam already started')) {
-        return;
-      }
-      setHLSStarted(false);
-    }
-  }, [hmsActions, isHLSStarted, setHLSStarted]);
-
-  useEffect(() => {
-    if (!isConnected) {
-      return;
-    }
-    // Is a streaming kit and broadcaster joins
-    if (permissions?.hlsStreaming && !isHLSRunning && showStreamingUI) {
-      startHLS();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected]);
 
   useEffect(() => {
     if (!isConnected) {