fix: resolved metrics listener error on fallback (#553)

* fix: resolved metrics listener error on fallback

* lint: fix

* fix: broken lockfile?

.changeset/tall-oranges-crash.md

@@ -0,0 +1,8 @@
+---
+"@livepeer/core": patch
+"@livepeer/core-react": patch
+"@livepeer/core-web": patch
+"@livepeer/react": patch
+---
+
+**Fix:** fixes a bug where the metrics listener would not send logs in some situations after the player fell back to HLS playback.

apps/docs-embed/src/lib/broadcast-components.ts

@@ -758,3 +758,4 @@ export default () => {
     </Broadcast.Root>
   );
 };`;
+

apps/docs-embed/src/lib/code-components.ts

@@ -67,3 +67,4 @@ export const CodeWithExampleServer = async ({
     </div>
   );
 };`;
+

apps/docs-embed/src/lib/player-components.ts

@@ -1411,3 +1411,4 @@ export default () => {
     </Player.Root>
   );
 };`;
+

apps/lvpr-tv/next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: false,
+  reactStrictMode: true,
 };
 
 module.exports = nextConfig;

examples/next-pages/src/pages/alternative-player.tsx

@@ -29,7 +29,6 @@ export default function Page() {
 
   return (
     <main className="flex flex-col md:flex-row min-h-screen justify-center items-center bg-black gap-12 p-10">
-      {/* biome-ignore lint/a11y/useMediaCaption: <explanation> */}
       <video
         controls
         muted

examples/with-pubnub/src/components/chat/context/ChatContext.tsx

@@ -2,7 +2,7 @@
 
 import { type Channel, Chat, type User } from "@pubnub/chat";
 import { usePathname } from "next/navigation";
-import React, { type ReactNode, useEffect, useState } from "react";
+import React, { type ReactNode, useEffect, useState, useCallback } from "react";
 
 export interface ChatType {
   chatInstance: Chat | undefined;
@@ -23,7 +23,7 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
   /// Initializes the PubNub Chat Component
   /// The secret key is used to add admin functionality such as muting and banning a user from a channel
   /// ATTENTION: Muting / banning shoulbe be done entirely server-side it is done on the client in this case to simplify things
-  const initChat = async () => {
+  const initChat = useCallback(async () => {
     // Set the userId to admin if the URL path is "/" else you are a viewer and should have a random userId
     const userId =
       pathname === "/"
@@ -41,7 +41,7 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
     } catch (error) {
       console.error("Failed to initialize PubNub:", error);
     }
-  };
+  }, [pathname]);
 
   // Initialize the PubNub instance
   useEffect(() => {

packages/core/src/media/metrics.ts

@@ -436,16 +436,16 @@ export function addMediaMetricsToStore(
 
   let websocketPromise: Promise<WebSocket | null> | null = null;
 
-  let timeOut: NodeJS.Timeout | null = null;
-  let enabled = true;
+  let timer: NodeJS.Timeout | null = null;
+  let reportingActive = true;
 
   const metricsStatus = new MetricsStatus(store, bootMs, opts);
   const monitor = new PlaybackMonitor(store);
 
   const report = async () => {
     const ws = await websocketPromise;
 
-    if (!enabled || !ws) {
+    if (!reportingActive || !ws) {
       return;
     }
 
@@ -476,7 +476,11 @@ export function addMediaMetricsToStore(
       send(ws, d);
     }
 
-    timeOut = setTimeout(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = setTimeout(() => {
       report();
     }, 1e3);
   };
@@ -508,6 +512,7 @@ export function addMediaMetricsToStore(
           // enable active statistics reporting
           report();
         });
+
         newWebSocket.addEventListener("message", (event) => {
           try {
             if (event?.data) {
@@ -528,18 +533,17 @@ export function addMediaMetricsToStore(
             console.warn("Failed to parse metadata from websocket.");
           }
         });
+
         newWebSocket.addEventListener("close", () => {
           // disable active statistics gathering
-          if (timeOut) {
-            clearTimeout(timeOut);
-            timeOut = null;
-            enabled = false;
+          if (timer) {
+            clearTimeout(timer);
           }
 
           // auto-reconnect with exponential backoff
           setTimeout(
             () => {
-              if (enabled) {
+              if (reportingActive) {
                 websocketPromise = createNewWebSocket(
                   playbackId,
                   currentSource,
@@ -574,11 +578,7 @@ export function addMediaMetricsToStore(
     {
       fireImmediately: true,
       equalityFn: (a, b) => {
-        return (
-          a.type === b.type &&
-          a.playbackId === b.playbackId &&
-          Boolean(a.finalUrl)
-        );
+        return a.playbackId === b.playbackId && Boolean(a.finalUrl);
       },
     },
   );
@@ -629,7 +629,7 @@ export function addMediaMetricsToStore(
     });
 
     const destroy = () => {
-      enabled = false;
+      reportingActive = false;
 
       destroyMetricsListener?.();
       destroyMonitorListener?.();
@@ -638,8 +638,8 @@ export function addMediaMetricsToStore(
       monitor?.destroy?.();
       metricsStatus?.destroy?.();
 
-      if (timeOut) {
-        clearTimeout(timeOut);
+      if (timer) {
+        clearTimeout(timer);
       }
 
       if (websocketPromise) {

packages/core/src/version.ts

@@ -1,5 +1,5 @@
-const core = "@livepeer/[email protected].17";
-const react = "@livepeer/[email protected].17";
+const core = "@livepeer/[email protected].18";
+const react = "@livepeer/[email protected].18";
 
 export const version = {
   core,