fix: hls should not start if rtmp is already running

packages/roomkit-react/src/Prebuilt/components/Notifications/HLSFailureModal.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectHLSState, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
@@ -12,10 +12,11 @@ export function HLSFailureModal() {
   const { hlsError } = useHMSStore(selectHLSState).error || false;
   const [openModal, setOpenModal] = useState(!!hlsError);
   const hmsActions = useHMSActions();
+  const { isRTMPRunning } = useRecordingStreaming();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback(async () => {
     try {
-      if (isHLSStarted) {
+      if (isHLSStarted || isRTMPRunning) {
         return;
       }
       setHLSStarted(true);
@@ -27,7 +28,7 @@ export function HLSFailureModal() {
       }
       setHLSStarted(false);
     }
-  }, [hmsActions, isHLSStarted, setHLSStarted]);
+  }, [hmsActions, isHLSStarted, setHLSStarted, isRTMPRunning]);
 
   return hlsError ? (
     <Dialog.Root

packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.tsx

@@ -27,10 +27,11 @@ const PreviewForm = ({
     e.preventDefault();
   };
   const isMobile = useMedia(cssConfig.media.md);
-  const { isHLSRunning } = useRecordingStreaming();
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showGoLive = joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
+  const showGoLive =
+    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning && !isRTMPRunning;
 
   return (
     <Form

packages/roomkit-react/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -4,11 +4,23 @@ import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
 import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
-import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
 
+export function getResolution(recordingResolution) {
+  const resolution = {};
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  if (Object.keys(resolution).length > 0) {
+    return resolution;
+  }
+}
+
 const StartRecording = ({ open, onOpenChange }) => {
   const permissions = useHMSStore(selectPermissions);
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);