feat: add handler for HLS buffer-eos event (#1690)

oliverlaz · web-flow · commit e03f8a366269 · 2025-02-21T11:43:02.000+01:00
Adds HLS.BUFFER_EOS event handling to our live streaming sample app. ref: https://getstream.slack.com/archives/C040262MY9K/p1739873779558179 ref: GetStream/docs-content#196
diff --git a/sample-apps/react/audio-rooms/package.json b/sample-apps/react/audio-rooms/package.json
@@ -13,7 +13,7 @@
     "@stream-io/video-react-sdk": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.29.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
diff --git a/sample-apps/react/cookbook-participant-list/package.json b/sample-apps/react/cookbook-participant-list/package.json
@@ -9,9 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.14",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.5",
     "@stream-io/video-react-sdk": "workspace:^",
     "@stream-io/video-styling": "workspace:^",
     "react": "^18.3.1",
diff --git a/sample-apps/react/egress-composite/package.json b/sample-apps/react/egress-composite/package.json
@@ -11,7 +11,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@emotion/css": "^11.11.2",
+    "@emotion/css": "^11.13.5",
     "@sentry/react": "^8.30.0",
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.0.0",
diff --git a/sample-apps/react/livestream-app/package.json b/sample-apps/react/livestream-app/package.json
@@ -11,15 +11,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.14",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.5",
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.0.0",
-    "hls.js": "^1.4.3",
+    "hls.js": "^1.5.20",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.29.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
diff --git a/sample-apps/react/livestream-app/src/hosts/ui/BackstageControls.tsx b/sample-apps/react/livestream-app/src/hosts/ui/BackstageControls.tsx
@@ -19,16 +19,16 @@ export const BackstageControls = () => {
       <ToggleVideoPublishingButton caption="" />
       <CancelCallButton />
       <ToggleLivestreamButton call={call} />
+      <ToggleHLSBroadcastButton call={call} />
     </div>
   );
 };
 
 const ToggleLivestreamButton = (props: { call: Call }) => {
   const { call } = props;
-  const { useIsCallHLSBroadcastingInProgress, useCallIngress } =
-    useCallStateHooks();
+  const { useCallIngress, useIsCallLive } = useCallStateHooks();
   const ingress = useCallIngress();
-  const isBroadcasting = useIsCallHLSBroadcastingInProgress();
+  const isBroadcasting = useIsCallLive();
   const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
   useEffect(() => {
     setIsAwaitingResponse((isAwaiting) => {
@@ -71,6 +71,54 @@ const ToggleLivestreamButton = (props: { call: Call }) => {
   );
 };
 
+const ToggleHLSBroadcastButton = (props: { call: Call }) => {
+  const { call } = props;
+  const { useIsCallHLSBroadcastingInProgress, useCallIngress } =
+    useCallStateHooks();
+  const ingress = useCallIngress();
+  const isBroadcasting = useIsCallHLSBroadcastingInProgress();
+  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
+  useEffect(() => {
+    setIsAwaitingResponse((isAwaiting) => {
+      if (isAwaiting) return false;
+      return isAwaiting;
+    });
+  }, [isBroadcasting]);
+  useEffect(() => {
+    if (!ingress) return;
+    console.log(`RTMP address: ${ingress.rtmp.address}`);
+  }, [ingress]);
+  return (
+    <button
+      type="button"
+      className={`livestream-toggle-button ${
+        isBroadcasting ? 'broadcasting' : ''
+      }`}
+      onClick={async () => {
+        if (isBroadcasting) {
+          call.stopHLS().catch((err) => {
+            console.error('Error stopping HLS livestream', err);
+          });
+        } else {
+          call.startHLS().catch((err) => {
+            console.error('Error stopping HLS livestream', err);
+          });
+        }
+        setIsAwaitingResponse(true);
+      }}
+    >
+      {isAwaitingResponse ? (
+        <LoadingIndicator />
+      ) : isBroadcasting ? (
+        <EndBroadcastIcon />
+      ) : (
+        <StartBroadcastIcon />
+      )}
+      <span>{isBroadcasting ? 'End HLS' : 'Start HLS'}</span>
+    </button>
+  );
+};
+
 const StartBroadcastIcon = () => {
   return (
     <svg
diff --git a/sample-apps/react/livestream-app/src/viewers/HLSLivestream.scss b/sample-apps/react/livestream-app/src/viewers/HLSLivestream.scss
@@ -1,20 +1,19 @@
 .hls-video-player {
   width: 100%;
-  height: 100%;
+  height: auto;
 }
 
 .video-player-container--wrapper {
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .video-player-container {
   display: flex;
+  flex-direction: column;
   height: 100%;
   align-items: center;
+  justify-content: center;
 }
 
 .loading-indicator {
@@ -30,3 +29,9 @@
   justify-content: center;
   gap: 5px;
 }
+
+.hls-stream-ended {
+  flex-direction: row;
+  justify-content: center;
+  padding-bottom: 20px;
+}
diff --git a/sample-apps/react/livestream-app/src/viewers/HLSLivestream.tsx b/sample-apps/react/livestream-app/src/viewers/HLSLivestream.tsx
@@ -11,38 +11,46 @@ import { ViewerControls } from './ui/ViewerControls';
 import { Lobby } from './ui/Lobby';
 
 export const HLSLivestreamUI = () => {
-  const { useIsCallHLSBroadcastingInProgress, useCallEgress } =
+  const { useIsCallHLSBroadcastingInProgress, useCallEgress, useIsCallLive } =
     useCallStateHooks();
   const isBroadcasting = useIsCallHLSBroadcastingInProgress();
+  const isLive = useIsCallLive();
   const egress = useCallEgress();
   const hls = useMemo(() => new HLS(), []);
 
   const [autoJoin, setAutoJoin] = useState(false);
   const [videoRef, setVideoRef] = useState<HTMLVideoElement | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [hlsStreamEnded, setHlsStreamEnded] = useState(false);
+  const playlist_url = egress?.hls?.playlist_url;
   useEffect(() => {
-    if (!videoRef) return;
+    if (!videoRef || !playlist_url) return;
+
     let timeoutId: NodeJS.Timeout;
-    if (autoJoin && isBroadcasting && egress && egress.hls) {
-      const { playlist_url } = egress.hls;
+    if (autoJoin && isBroadcasting) {
       hls.on(HLS.Events.ERROR, (e, data) => {
         console.error('HLS error, attempting to recover', e, data);
 
         setIsPlaying(false);
+        clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
           hls.loadSource(playlist_url);
         }, 1000);
       });
       hls.on(HLS.Events.LEVELS_UPDATED, (e, data) => {
         console.error('HLS levels updated', e, data);
       });
+      hls.on(HLS.Events.BUFFER_EOS, (e, data) => {
+        console.error('HLS buffer eos', e, data);
+        setHlsStreamEnded(true);
+      });
       hls.loadSource(playlist_url);
       hls.attachMedia(videoRef);
     }
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [autoJoin, hls, isBroadcasting, egress, videoRef]);
+  }, [autoJoin, hls, isBroadcasting, videoRef, playlist_url]);
 
   useEffect(() => {
     if (!videoRef) return;
@@ -53,11 +61,11 @@ export const HLSLivestreamUI = () => {
     };
   }, [videoRef]);
 
-  if (!isBroadcasting || !autoJoin) {
+  if (!hlsStreamEnded && (!isLive || !autoJoin)) {
     return (
       <Lobby
         autoJoin={autoJoin}
-        isStreaming={isBroadcasting}
+        isStreaming={isLive}
         setAutoJoin={setAutoJoin}
       />
     );
@@ -71,6 +79,9 @@ export const HLSLivestreamUI = () => {
       )}
       <div className="video-player-container--wrapper">
         <div className="video-player-container">
+          {hlsStreamEnded && (
+            <div className="hls-stream-ended">The HLS stream has ended.</div>
+          )}
           <video
             className="hls-video-player"
             autoPlay
diff --git a/sample-apps/react/messenger-clone/package.json b/sample-apps/react/messenger-clone/package.json
@@ -12,15 +12,15 @@
     "scripts:generate-url-params": "node scripts/generateUrlParams.js"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.14.14",
+    "@mui/icons-material": "^6.4.5",
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.6",
     "immer": "^9.0.16",
     "nanoid": "^5.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.29.0",
     "sass": "^1.69.5",
     "stream-chat": "^8.45.1",
     "stream-chat-react": "12.6.0"
diff --git a/sample-apps/react/zoom-clone/package.json b/sample-apps/react/zoom-clone/package.json
@@ -16,7 +16,7 @@
     "nanoid": "^5.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.29.0",
     "stream-chat": "^8.45.1",
     "stream-chat-react": "12.6.0"
   },
diff --git a/yarn.lock b/yarn.lock
