diff --git a/packages/roomkit-react/src/Prebuilt/components/GoLiveButton.jsx b/packages/roomkit-react/src/Prebuilt/components/GoLiveButton.jsx deleted file mode 100644 index 2a1c7ec4ca..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/GoLiveButton.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { useRecordingStreaming } from '@100mslive/react-sdk'; -import { GoLiveIcon } from '@100mslive/react-icons'; -import { Button } from '../../Button'; -import { Tooltip } from '../../Tooltip'; -import { useIsSidepaneTypeOpen, useSidepaneToggle } from './AppData/useSidepane'; -import { useIsHLSStartedFromUI, useIsRTMPStartedFromUI } from './AppData/useUISettings'; -import { SIDE_PANE_OPTIONS } from './../common/constants'; - -const GoLiveButton = () => { - const isStreamingSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING); - const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING); - const { isStreamingOn, isBrowserRecordingOn } = useRecordingStreaming(); - const isHLSStartedFromUI = useIsHLSStartedFromUI(); - const isRTMPStartedFromUI = useIsRTMPStartedFromUI(); - let tooltipText = 'Start streaming'; - if (isHLSStartedFromUI || isRTMPStartedFromUI) { - if (isHLSStartedFromUI) { - tooltipText = 'HLS start in progress'; - } - if (isRTMPStartedFromUI) { - tooltipText = 'RTMP start in progress'; - } - } - return ( - - - - ); -}; - -export default GoLiveButton; diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/HLSFailureModal.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/HLSFailureModal.jsx index 2395667c42..7dc4955cb7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/HLSFailureModal.jsx +++ b/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 ? ( 0) { + return resolution; + } +} + const StartRecording = ({ open, onOpenChange }) => { const permissions = useHMSStore(selectPermissions); const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION); diff --git a/packages/roomkit-react/src/Prebuilt/components/Streaming/HLSStreaming.jsx b/packages/roomkit-react/src/Prebuilt/components/Streaming/HLSStreaming.jsx deleted file mode 100644 index d1001b2cd8..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/Streaming/HLSStreaming.jsx +++ /dev/null @@ -1,220 +0,0 @@ -import React, { Fragment, useCallback, useEffect, useState } from 'react'; -import { selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk'; -import { - EndStreamIcon, - EyeOpenIcon, - GoLiveIcon, - InfoIcon, - LinkIcon, - PeopleIcon, - SupportIcon, - WrenchIcon, -} from '@100mslive/react-icons'; -import { Box, Button, Flex, Loading, Text } from '../../../'; -import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common'; -import { useSetAppDataByKey } from '../AppData/useUISettings'; -import { useFilteredRoles } from '../../common/hooks'; -import { APP_DATA } from '../../common/constants'; - -const getCardData = (roleName, roomId) => { - let data = {}; - const formattedRoleName = roleName[0].toUpperCase() + roleName.slice(1); - - switch (roleName) { - case 'broadcaster': { - data = { - title: formattedRoleName, - content: 'Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.', - icon: , - }; - break; - } - case 'hls-viewer': { - data = { - title: 'HLS Viewer', - content: - 'Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.', - icon: , - }; - break; - } - default: - data = { - title: formattedRoleName, - content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`, - icon: , - order: 1, - }; - } - data['link'] = `/${roomId}/${roleName}`; - return data; -}; - -const Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => { - const [copied, setCopied] = useState(false); - return isHLSRunning ? ( - - - {icon} - - {title} - - - - {content} - - - - ) : null; -}; - -export const HLSStreaming = ({ onBack }) => { - const roleNames = useFilteredRoles(); - const roomId = useHMSStore(selectRoomID); - const cards = roleNames.map(roleName => getCardData(roleName, roomId)); - - const { isHLSRunning } = useRecordingStreaming(); - const [showLinks, setShowLinks] = useState(false); - return !showLinks ? ( - - - - Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this - platform. - - {isHLSRunning ? : } - - ) : ( - - setShowLinks(false)} /> - - - {cards.map(card => ( - - ))} - - - ); -}; - -const StartHLS = () => { - const [record, setRecord] = useState(false); - const [error, setError] = useState(false); - const hmsActions = useHMSActions(); - const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted); - const startHLS = useCallback( - async variants => { - try { - if (isHLSStarted) { - return; - } - setHLSStarted(true); - setError(''); - await hmsActions.startHLSStreaming({ - variants, - recording: { hlsVod: record, singleFilePerLayer: record }, - }); - } catch (error) { - setHLSStarted(false); - setError(error.message); - } - }, - [hmsActions, record, isHLSStarted, setHLSStarted], - ); - - return ( - - - - - - - - - - - - You cannot start recording once the stream starts, you will have to stop the stream to enable recording. - - - - ); -}; - -const EndHLS = ({ setShowLinks }) => { - const hmsActions = useHMSActions(); - - const [inProgress, setInProgress] = useState(false); - const [error, setError] = useState(''); - const { isHLSRunning } = useRecordingStreaming(); - - useEffect(() => { - if (inProgress && !isHLSRunning) { - setInProgress(false); - } - }, [inProgress, isHLSRunning]); - - return ( - - - - - - ); -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/Streaming/RTMPStreaming.jsx b/packages/roomkit-react/src/Prebuilt/components/Streaming/RTMPStreaming.jsx deleted file mode 100644 index 58f426e68c..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/Streaming/RTMPStreaming.jsx +++ /dev/null @@ -1,334 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { useHMSActions, useRecordingStreaming } from '@100mslive/react-sdk'; -import { AddCircleIcon, EndStreamIcon, GoLiveIcon, PencilIcon, SettingsIcon, TrashIcon } from '@100mslive/react-icons'; -import { Accordion, Box, Button, Flex, Input, Label, Loading, Text } from '../../../'; -import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common'; -import { ResolutionInput } from './ResolutionInput'; -import { useSetAppDataByKey } from '../AppData/useUISettings'; -import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences'; -import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants'; - -export const RTMPStreaming = ({ onBack }) => { - const { isRTMPRunning } = useRecordingStreaming(); - - return ( - - - - Live Stream your call to Twitch, YouTube, Facebook and any app which supports RTMP, all at the same time - - {!isRTMPRunning ? : } - - ); -}; - -const StartRTMP = () => { - const [rtmpPreference = [], setRTMPPreference] = useUserPreferences(UserPreferencesKeys.RTMP_URLS); - const [rtmpStreams, setRTMPStreams] = useState( - rtmpPreference.length > 0 - ? rtmpPreference - : [ - { - name: 'Stream', - id: Date.now(), - rtmpURL: '', - streamKey: '', - }, - ], - ); - const hmsActions = useHMSActions(); - const [error, setError] = useState(false); - const [record, setRecord] = useState(false); - const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION); - const [isRTMPStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted); - const hasRTMPURL = rtmpStreams.some(value => value.rtmpURL && value.streamKey); - - return ( - { - e.preventDefault(); - }} - > - {rtmpStreams.length > 0 && ( - - - {rtmpStreams.map((rtmp, index) => { - return ( - - - - - - - ); - })} - - - )} - - - - {rtmpStreams.length < 3 && ( - - )} - - - - - - ); -}; - -const EndRTMP = () => { - const hmsActions = useHMSActions(); - const [inProgress, setInProgress] = useState(false); - const [error, setError] = useState(''); - const { isRTMPRunning } = useRecordingStreaming(); - - useEffect(() => { - if (inProgress && !isRTMPRunning) { - setInProgress(false); - } - }, [inProgress, isRTMPRunning]); - - return ( - - - - - ); -}; - -const ActionIcon = ({ icon: Icon, onClick }) => { - return ( - - - - ); -}; - -const FormLabel = ({ id, children }) => { - return ( - - ); -}; - -const RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => { - const formRef = useRef(null); - return ( - - - RTMP URL - - - { - setRTMPStreams(streams => - updateStream({ - streams, - id, - value: e.target.value, - key: e.target.name, - }), - ); - }} - required - /> - - Stream Key - - - { - setRTMPStreams(streams => - updateStream({ - streams, - id, - value: e.target.value, - key: e.target.name, - }), - ); - }} - required - /> - - ); -}; - -const Asterik = () => { - return ( - - * - - ); -}; -const AccordionHeader = ({ rtmp, setRTMPStreams }) => { - const [edit, setEdit] = useState(false); - return ( - - {edit ? ( - { - const value = e.currentTarget.value.trim(); - if (value) { - setRTMPStreams(streams => - streams.map(stream => { - if (stream.id === rtmp.id) { - stream.name = value; - } - return stream; - }), - ); - setEdit(false); - } - }} - /> - ) : ( - {rtmp.name} - )} - - { - e.stopPropagation(); - setEdit(true); - }} - icon={PencilIcon} - /> - { - setRTMPStreams(streams => streams.filter(stream => stream.id !== rtmp.id)); - }} - icon={TrashIcon} - /> - - - ); -}; - -const updateStream = ({ streams, id, key, value }) => - streams.map(stream => { - if (stream.id === id) { - return { - ...stream, - [key]: value, - }; - } - return stream; - }); - -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; - } -} diff --git a/packages/roomkit-react/src/Prebuilt/components/Streaming/StreamingLanding.jsx b/packages/roomkit-react/src/Prebuilt/components/Streaming/StreamingLanding.jsx deleted file mode 100644 index 09783c4238..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/Streaming/StreamingLanding.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { Fragment, useState } from 'react'; -import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk'; -import { ColoredHandIcon, CrossIcon, GoLiveIcon } from '@100mslive/react-icons'; -import { Box, Flex } from '../../../Layout'; -import { Text } from '../../../Text'; -import IconButton from '../../IconButton'; -import RTMPIcon from '../../images/rtmp.png'; -import { StreamCard } from './Common'; -import { HLSStreaming } from './HLSStreaming'; -import { RTMPStreaming } from './RTMPStreaming'; -import { useSidepaneToggle } from '../AppData/useSidepane'; -import { SIDE_PANE_OPTIONS } from '../../common/constants'; - -export const StreamingLanding = () => { - const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING); - const { isHLSRunning, isRTMPRunning } = useRecordingStreaming(); - const permissions = useHMSStore(selectPermissions); - const [showHLS, setShowHLS] = useState(isHLSRunning); - const [showRTMP, setShowRTMP] = useState(isRTMPRunning); - - if (!permissions?.hlsStreaming && !permissions?.rtmpStreaming) { - toggleStreaming(); - return null; - } - - return ( - - - - - - - Welcome ! - Let’s get you started - - - - - - - Start Streaming - - {permissions?.hlsStreaming && ( - setShowHLS(true)} - Icon={GoLiveIcon} - /> - )} - {permissions?.rtmpStreaming && ( - { - setShowRTMP(true); - }} - imgSrc={RTMPIcon} - /> - )} - {showHLS && setShowHLS(false)} />} - {showRTMP && setShowRTMP(false)} />} - - ); -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx index 571c799f81..ca22197581 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx @@ -20,12 +20,12 @@ export const useAutoStartStreaming = () => { const showStreamingUI = useShowStreamingUI(); const hmsActions = useHMSActions(); const isConnected = useHMSStore(selectIsConnectedToRoom); - const { isHLSRunning } = useRecordingStreaming(); + const { isHLSRunning, isRTMPRunning } = useRecordingStreaming(); const streamStartedRef = useRef(false); const startHLS = useCallback(async () => { try { - if (isHLSStarted || !showStreamingUI || isHLSRunning) { + if (isHLSStarted || !showStreamingUI || isHLSRunning || isRTMPRunning) { return; } setHLSStarted(true); @@ -38,7 +38,7 @@ export const useAutoStartStreaming = () => { streamStartedRef.current = false; setHLSStarted(false); } - }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]); + }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI, isRTMPRunning]); useEffect(() => { if (!isHLSStarted && !isHLSRunning) { diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index 23d52e059b..ad4c75dd3c 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -4,8 +4,6 @@ import { ConferencingScreen } from '@100mslive/types-prebuilt'; import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk'; import { Polls } from '../components/Polls/Polls'; import { SidePaneTabs } from '../components/SidePaneTabs'; -// @ts-ignore: No implicit Any -import { StreamingLanding } from '../components/Streaming/StreamingLanding'; import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout'; // @ts-ignore: No implicit Any import VideoTile from '../components/VideoTile'; @@ -35,8 +33,6 @@ const SidePane = ({ } if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) { ViewComponent = ; - } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) { - ViewComponent = ; } if (!ViewComponent && !trackId) { return null;