@100mslive/roomkit-react 0.1.9 → 0.1.11-alpha.0

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useMeasure, useMedia } from 'react-use';
 import {
   HMSRoomState,
@@ -18,6 +18,7 @@ import { AudioLevel } from '../../../AudioLevel';
 import { useHMSPrebuiltContext } from '../../AppContext';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
+import SidePane from '../../layouts/SidePane';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -32,6 +33,8 @@ import { Logo } from '../Header/HeaderComponents';
 // @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
 // @ts-ignore: No implicit Any
+import { VBToggle } from '../VirtualBackground/VBToggle';
+// @ts-ignore: No implicit Any
 import PreviewForm from './PreviewForm';
 // @ts-ignore: No implicit Any
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
@@ -42,9 +45,6 @@ import { calculateAvatarAndAttribBoxSize, getFormattedCount } from '../../common
 // @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
-// @ts-ignore: No implicit Any
-const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
-
 const getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return 'You are the first to join';
@@ -133,60 +133,65 @@ const PreviewJoin = ({
   }, [initialName]);
 
   return roomState === HMSRoomState.Preview ? (
-    <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>
-      {toggleVideo ? null : <Box />}
-      <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '640px' }}>
-        <Logo />
-        <Text
-          variant="h4"
-          css={{ wordBreak: 'break-word', textAlign: 'center', mt: '$14', mb: '$4', '@md': { mt: '$8', mb: '$2' } }}
-        >
-          {previewHeader.title}
-        </Text>
-        <Text
-          css={{ c: '$on_surface_medium', my: '0', textAlign: 'center', maxWidth: '100%', wordWrap: 'break-word' }}
-          variant="sm"
-        >
-          {previewHeader.sub_title}
-        </Text>
-        <Flex justify="center" css={{ mt: '$14', '@md': { mt: '$8', mb: '0' }, gap: '$4' }}>
-          {isStreamingOn ? (
-            <Chip
-              content="LIVE"
-              backgroundColor="$alert_error_default"
-              textColor="#FFF"
-              icon={<Box css={{ h: '$sm', w: '$sm', backgroundColor: '$on_primary_high', borderRadius: '$round' }} />}
-            />
-          ) : null}
-          <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />
+    <Flex justify="center" css={{ size: '100%', position: 'relative' }}>
+      <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>
+        {toggleVideo ? null : <Box />}
+        <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '640px' }}>
+          <Logo />
+          <Text
+            variant="h4"
+            css={{ wordBreak: 'break-word', textAlign: 'center', mt: '$14', mb: '$4', '@md': { mt: '$8', mb: '$2' } }}
+          >
+            {previewHeader.title}
+          </Text>
+          <Text
+            css={{ c: '$on_surface_medium', my: '0', textAlign: 'center', maxWidth: '100%', wordWrap: 'break-word' }}
+            variant="sm"
+          >
+            {previewHeader.sub_title}
+          </Text>
+          <Flex justify="center" css={{ mt: '$14', '@md': { mt: '$8', mb: '0' }, gap: '$4' }}>
+            {isStreamingOn ? (
+              <Chip
+                content="LIVE"
+                backgroundColor="$alert_error_default"
+                textColor="#FFF"
+                icon={<Box css={{ h: '$sm', w: '$sm', backgroundColor: '$on_primary_high', borderRadius: '$round' }} />}
+              />
+            ) : null}
+            <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />
+          </Flex>
         </Flex>
-      </Flex>
-      {toggleVideo ? (
-        <Flex
-          align="center"
-          justify="center"
-          css={{
-            mt: '$14',
-            '@md': { mt: 0 },
-            '@sm': { width: '100%' },
-            flexDirection: 'column',
-          }}
-        >
-          <PreviewTile name={name} error={previewError} />
-        </Flex>
-      ) : null}
-      <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
-        <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
-        <PreviewForm
-          name={name}
-          onChange={setName}
-          enableJoin={enableJoin}
-          onJoin={savePreferenceAndJoin}
-          cannotPublishVideo={!toggleVideo}
-          cannotPublishAudio={!toggleAudio}
-        />
+        {toggleVideo ? (
+          <Flex
+            align="center"
+            justify="center"
+            css={{
+              mt: '$14',
+              '@md': { mt: 0 },
+              '@sm': { width: '100%' },
+              flexDirection: 'column',
+            }}
+          >
+            <PreviewTile name={name} error={previewError} />
+          </Flex>
+        ) : null}
+        <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
+          <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
+          <PreviewForm
+            name={name}
+            onChange={setName}
+            enableJoin={enableJoin}
+            onJoin={savePreferenceAndJoin}
+            cannotPublishVideo={!toggleVideo}
+            cannotPublishAudio={!toggleAudio}
+          />
+        </Box>
+      </Container>
+      <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%' }}>
+        <SidePane screenType="default" />
       </Box>
-    </Container>
+    </Flex>
   ) : (
     <FullPageProgress />
   );
@@ -274,7 +279,7 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        <Suspense fallback="">{!isMobile ? <VirtualBackground /> : null}</Suspense>
+        {!isMobile ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -33,10 +33,9 @@ export const RequestPrompt = ({
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Root open={open} modal={false} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ p: '$10' }}>
+        <Dialog.Content css={{ p: '$10' }} onInteractOutside={e => e.preventDefault()}>
           <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
             <Text variant="h6">{title}</Text>
           </Dialog.Title>

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -1,14 +1,17 @@
 import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   DeviceType,
   selectIsLocalVideoEnabled,
   selectLocalVideoTrackID,
   selectVideoTrackByID,
   useDevices,
+  useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { MicOnIcon, SpeakerIcon, VideoOnIcon } from '@100mslive/react-icons';
 import { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../../../';
+import { config as cssConfig } from '../../../Theme';
 import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
 import { useUISettings } from '../AppData/useUISettings';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
@@ -30,7 +33,15 @@ const Settings = ({ setHide }) => {
   const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID(videoTrackId);
+  const hmsActions = useHMSActions();
   const track = useHMSStore(trackSelector);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  useEffect(() => {
+    if (isMobile) {
+      hmsActions.refreshDevices();
+    }
+  }, [hmsActions, isMobile]);
 
   /**
    * Chromium browsers return an audioOutput with empty label when no permissions are given

package/src/Prebuilt/components/VirtualBackground/VBCollection.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box } from '../../../Layout';
+import { Text } from '../../../Text';
+import { VBOption } from './VBOption';
+import { VB_EFFECT } from './constants';
+
+export const VBCollection = ({
+  options,
+  title,
+  activeBackgroundType = '',
+  activeBackground = '',
+}: {
+  options: {
+    title?: string;
+    icon?: React.JSX.Element;
+    onClick?: () => Promise<void>;
+    mediaURL?: string;
+    type: string;
+  }[];
+  title: string;
+  activeBackground: HTMLImageElement | string;
+  activeBackgroundType: string;
+}) => {
+  if (options.length === 0) {
+    return null;
+  }
+  return (
+    <Box css={{ mt: '$10' }}>
+      <Text variant="sm" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+        {title}
+      </Text>
+      <Box css={{ py: '$4', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '$8' }}>
+        {options.map(option => (
+          <VBOption.Root
+            key={option?.mediaURL || option?.title}
+            {...option}
+            isActive={
+              ([VB_EFFECT.NONE, VB_EFFECT.BLUR].includes(activeBackgroundType) &&
+                option.type === activeBackgroundType) ||
+              activeBackground === option?.mediaURL
+            }
+          >
+            <VBOption.Icon>{option?.icon}</VBOption.Icon>
+            <VBOption.Title>{option?.title}</VBOption.Title>
+          </VBOption.Root>
+        ))}
+      </Box>
+    </Box>
+  );
+};

package/src/Prebuilt/components/VirtualBackground/VBOption.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+
+const Root = ({
+  onClick,
+  mediaURL,
+  isActive,
+  children,
+}: {
+  onClick?: () => Promise<void>;
+  mediaURL?: string;
+  isActive: boolean;
+  children?: React.JSX.Element[];
+}) => (
+  <Flex
+    direction="column"
+    align="center"
+    css={{
+      p: '$5',
+      borderRadius: '$1',
+      bg: '$surface_bright',
+      border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
+      cursor: 'pointer',
+      '&:hover': { border: '4px solid $primary_dim' },
+      ...(mediaURL ? { height: '$20', backgroundImage: `url(${mediaURL})`, backgroundSize: 'cover' } : {}),
+    }}
+    onClick={async () => await onClick?.()}
+  >
+    {children}
+  </Flex>
+);
+
+const Title = ({ children }: { children?: string }) => {
+  return children ? (
+    <Text variant="xs" css={{ color: '$on_surface_medium' }}>
+      {children}
+    </Text>
+  ) : null;
+};
+
+const Icon = ({ children }: { children?: React.JSX.Element }) => {
+  return children ? <Box css={{ color: '$on_surface_high' }}>{children}</Box> : null;
+};
+
+export const VBOption = {
+  Root,
+  Title,
+  Icon,
+};

package/src/Prebuilt/components/VirtualBackground/VBPicker.jsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  HMSRoomState,
+  selectIsLargeRoom,
+  selectIsLocalVideoEnabled,
+  selectLocalPeer,
+  selectLocalPeerRole,
+  selectLocalVideoTrackID,
+  selectRoomState,
+  selectVideoTrackByID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { BlurPersonHighIcon, CloseIcon, CrossCircleIcon } from '@100mslive/react-icons';
+import { Box, Flex, Video } from '../../../index';
+import { Text } from '../../../Text';
+import { VBCollection } from './VBCollection';
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { useUISettings } from '../AppData/useUISettings';
+import { SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
+import { defaultMedia, VB_EFFECT, vbPlugin } from './constants';
+
+const iconDims = { height: '40px', width: '40px' };
+const MAX_RETRIES = 2;
+
+export const VBPicker = () => {
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const hmsActions = useHMSActions();
+  const role = useHMSStore(selectLocalPeerRole);
+  const [isVBSupported, setIsVBSupported] = useState(false);
+  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const [background, setBackground] = useState(vbPlugin.background);
+  const [backgroundType, setBackgroundType] = useState(vbPlugin.backgroundType);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
+  const track = useHMSStore(trackSelector);
+  const roomState = useHMSStore(selectRoomState);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
+  const addedPluginToVideoTrack = useRef(false);
+
+  // Hidden in preview as the effect will be visible in the preview tile. Needed inside the room because the peer might not be on-screen
+  const showVideoTile = isVideoOn && isLargeRoom && roomState !== HMSRoomState.Preview;
+
+  const clearVBState = () => {
+    setBackground(VB_EFFECT.NONE);
+    setBackgroundType(VB_EFFECT.NONE);
+  };
+
+  useEffect(() => {
+    if (!localPeerVideoTrackID) {
+      return;
+    }
+
+    //check support of plugin
+    if (vbPlugin) {
+      const pluginSupport = hmsActions.validateVideoPluginSupport(vbPlugin);
+      setIsVBSupported(pluginSupport.isSupported);
+    }
+  }, [hmsActions, localPeerVideoTrackID]);
+
+  async function disableEffects() {
+    if (vbPlugin) {
+      vbPlugin.setBackground(VB_EFFECT.NONE, VB_EFFECT.NONE);
+      clearVBState();
+    }
+  }
+
+  async function addPlugin({ mediaURL = '', blurPower = 0 }) {
+    let retries = 0;
+    try {
+      if (mediaURL) {
+        const img = document.createElement('img');
+        img.alt = 'VB';
+        img.src = mediaURL;
+        try {
+          await vbPlugin.setBackground(img, VB_EFFECT.MEDIA);
+        } catch (e) {
+          console.error(e);
+          if (retries++ < MAX_RETRIES) {
+            await vbPlugin.setBackground(img, VB_EFFECT.MEDIA);
+          }
+        }
+      } else if (blurPower) {
+        await vbPlugin.setBackground(VB_EFFECT.BLUR, VB_EFFECT.BLUR);
+      }
+      setBackground(mediaURL || VB_EFFECT.BLUR);
+      setBackgroundType(mediaURL ? VB_EFFECT.MEDIA : VB_EFFECT.BLUR);
+      if (role && !addedPluginToVideoTrack.current) {
+        await hmsActions.addPluginToVideoTrack(vbPlugin, Math.floor(role.publishParams.video.frameRate / 2));
+        addedPluginToVideoTrack.current = true;
+      }
+    } catch (err) {
+      console.error('Failed to apply VB', err);
+      disableEffects();
+    }
+  }
+
+  useEffect(() => {
+    if (!isVideoOn) {
+      toggleVB();
+    }
+  }, [isVideoOn, toggleVB]);
+
+  if (!isVBSupported) {
+    return null;
+  }
+
+  return (
+    <Box css={{ maxHeight: '100%', overflowY: 'auto', pr: '$6' }}>
+      <Flex align="center" justify="between" css={{ w: '100%', position: 'sticky', top: 0 }}>
+        <Text variant="h6" css={{ color: '$on_surface_high' }}>
+          Virtual Background
+        </Text>
+        <Box
+          css={{ color: '$on_surface_high', '&:hover': { color: '$on_surface_medium' }, cursor: 'pointer' }}
+          onClick={toggleVB}
+        >
+          <CloseIcon />
+        </Box>
+      </Flex>
+
+      {showVideoTile ? (
+        <Video
+          mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
+          trackId={localPeer?.videoTrack}
+          data-testid="preview_tile"
+          css={{ width: '100%', height: '16rem', position: 'sticky', top: '$17' }}
+        />
+      ) : null}
+
+      <VBCollection
+        title="Effects"
+        options={[
+          {
+            title: 'No effect',
+            icon: <CrossCircleIcon style={iconDims} />,
+            type: VB_EFFECT.NONE,
+            onClick: async () => await disableEffects(),
+          },
+          {
+            title: 'Blur',
+            icon: <BlurPersonHighIcon style={iconDims} />,
+            type: VB_EFFECT.BLUR,
+            onClick: async () => await addPlugin({ blurPower: 0.5 }),
+          },
+        ]}
+        activeBackgroundType={backgroundType || VB_EFFECT.NONE}
+        activeBackground={vbPlugin.background?.src || vbPlugin.background || VB_EFFECT.NONE}
+      />
+
+      <VBCollection
+        title="Backgrounds"
+        options={defaultMedia.map(mediaURL => ({
+          type: VB_EFFECT.MEDIA,
+          mediaURL,
+          onClick: async () => await addPlugin({ mediaURL }),
+        }))}
+        activeBackgroundType={backgroundType || VB_EFFECT.NONE}
+        activeBackground={background?.src || background || VB_EFFECT.NONE}
+      />
+    </Box>
+  );
+};

package/src/Prebuilt/components/VirtualBackground/VBToggle.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import { VirtualBackgroundIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const VBToggle = () => {
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+
+  if (!isVideoOn || isSafari) {
+    return null;
+  }
+
+  return (
+    <Tooltip side="top" disabled={isVBOpen} title="Configure Virtual Background">
+      <IconButton active={!isVBOpen} onClick={toggleVB}>
+        <VirtualBackgroundIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/VirtualBackground/constants.ts

@@ -0,0 +1,26 @@
+import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+
+// Will support all media, setting to image here to test with current plugin interface
+export const VB_EFFECT = {
+  BLUR: 'blur',
+  BEAUTIFY: 'BEAUTIFY',
+  NONE: 'none',
+  MEDIA: 'image',
+};
+
+export const defaultMedia = [
+  'https://assets.100ms.live/webapp/vb-mini/vb-1.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-2.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-3.png',
+  'https://assets.100ms.live/webapp/vb-mini/vb-4.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-5.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-6.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-7.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-8.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-9.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-10.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-11.jpg',
+  'https://assets.100ms.live/webapp/vb-mini/vb-12.jpg',
+];
+
+export const vbPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);

package/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
 import {
-  HMSException,
   selectIsConnectedToRoom,
   selectPermissions,
   useHMSActions,
@@ -20,21 +19,26 @@ export const useAutoStartStreaming = () => {
   const showStreamingUI = useShowStreamingUI();
   const hmsActions = useHMSActions();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
+  const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming();
   const streamStartedRef = useRef(false);
 
   const startHLS = useCallback(async () => {
     try {
-      if (isHLSStarted || !showStreamingUI || isHLSRunning || isRTMPRunning) {
+      if (
+        isHLSStarted ||
+        !showStreamingUI ||
+        isHLSRunning ||
+        isRTMPRunning ||
+        isHLSRecordingOn ||
+        isBrowserRecordingOn
+      ) {
         return;
       }
       setHLSStarted(true);
       streamStartedRef.current = true;
       await hmsActions.startHLSStreaming();
     } catch (error) {
-      if ((error as HMSException).message?.includes('beam already started')) {
-        return;
-      }
+      console.error(error);
       streamStartedRef.current = false;
       setHLSStarted(false);
     }
@@ -50,7 +54,7 @@ export const useAutoStartStreaming = () => {
     if (!isConnected || streamStartedRef.current || !permissions?.hlsStreaming) {
       return;
     }
-    // Is a streaming kit and broadcaster joins
+    // Is a streaming kit and peer with streaming permissions joins
     startHLS();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected]);

package/src/Prebuilt/layouts/HLSView.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useFullscreen, useMedia, useToggle } from 'react-use';
+import { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import screenfull from 'screenfull';
 import { selectAppData, selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
@@ -42,6 +42,7 @@ const HLSView = () => {
   const controlsRef = useRef();
   const controlsTimerRef = useRef();
   const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);
+  const lastHlsUrl = usePrevious(hlsUrl);
 
   const isMobile = useMedia(config.media.md);
   const isFullScreen = useFullscreen(hlsViewRef, show, {
@@ -64,6 +65,11 @@ const HLSView = () => {
       videoEl?.removeEventListener('waiting', showLoader);
     };
   }, []);
+  useEffect(() => {
+    if (streamEnded && lastHlsUrl !== hlsUrl) {
+      setStreamEnded(false);
+    }
+  }, [hlsUrl, streamEnded, lastHlsUrl]);
 
   useEffect(() => {
     const videoElem = videoRef.current;