From 2018b0900f6f8eadd069ee0697ba166357ccd77d Mon Sep 17 00:00:00 2001
From: Chase Adams <c@cadams.io>
Date: Mon, 10 Jun 2024 16:21:55 -0700
Subject: [PATCH] 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              |  8 ++++
 .../src/lib/broadcast-components.ts           |  1 +
 apps/docs-embed/src/lib/code-components.ts    |  1 +
 apps/docs-embed/src/lib/player-components.ts  |  1 +
 apps/lvpr-tv/next.config.js                   |  2 +-
 .../src/pages/alternative-player.tsx          |  1 -
 .../components/chat/context/ChatContext.tsx   |  6 +--
 packages/core/src/media/metrics.ts            | 34 +++++++-------
 packages/core/src/version.ts                  |  4 +-
 pnpm-lock.yaml                                | 47 ++++++++++++-------
 10 files changed, 65 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/tall-oranges-crash.md

diff --git a/.changeset/tall-oranges-crash.md b/.changeset/tall-oranges-crash.md
new file mode 100644
index 00000000..418531c9
--- /dev/null
+++ b/.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.
diff --git a/apps/docs-embed/src/lib/broadcast-components.ts b/apps/docs-embed/src/lib/broadcast-components.ts
index 071b6a64..8200cec2 100644
--- a/apps/docs-embed/src/lib/broadcast-components.ts
+++ b/apps/docs-embed/src/lib/broadcast-components.ts
@@ -758,3 +758,4 @@ export default () => {
     </Broadcast.Root>
   );
 };`;
+
diff --git a/apps/docs-embed/src/lib/code-components.ts b/apps/docs-embed/src/lib/code-components.ts
index d55966e1..74cc81aa 100644
--- a/apps/docs-embed/src/lib/code-components.ts
+++ b/apps/docs-embed/src/lib/code-components.ts
@@ -67,3 +67,4 @@ export const CodeWithExampleServer = async ({
     </div>
   );
 };`;
+
diff --git a/apps/docs-embed/src/lib/player-components.ts b/apps/docs-embed/src/lib/player-components.ts
index 66648286..c9684728 100644
--- a/apps/docs-embed/src/lib/player-components.ts
+++ b/apps/docs-embed/src/lib/player-components.ts
@@ -1411,3 +1411,4 @@ export default () => {
     </Player.Root>
   );
 };`;
+
diff --git a/apps/lvpr-tv/next.config.js b/apps/lvpr-tv/next.config.js
index 24f1a900..91ef62f0 100644
--- a/apps/lvpr-tv/next.config.js
+++ b/apps/lvpr-tv/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: false,
+  reactStrictMode: true,
 };
 
 module.exports = nextConfig;
diff --git a/examples/next-pages/src/pages/alternative-player.tsx b/examples/next-pages/src/pages/alternative-player.tsx
index 620d678a..369d74fb 100644
--- a/examples/next-pages/src/pages/alternative-player.tsx
+++ b/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
diff --git a/examples/with-pubnub/src/components/chat/context/ChatContext.tsx b/examples/with-pubnub/src/components/chat/context/ChatContext.tsx
index 6a1e95a3..8a0efabf 100644
--- a/examples/with-pubnub/src/components/chat/context/ChatContext.tsx
+++ b/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(() => {
diff --git a/packages/core/src/media/metrics.ts b/packages/core/src/media/metrics.ts
index 9ba94f5c..ce163f54 100644
--- a/packages/core/src/media/metrics.ts
+++ b/packages/core/src/media/metrics.ts
@@ -436,8 +436,8 @@ 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);
@@ -445,7 +445,7 @@ export function addMediaMetricsToStore(
   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) {
diff --git a/packages/core/src/version.ts b/packages/core/src/version.ts
index bc7ee7c4..3039fefb 100644
--- a/packages/core/src/version.ts
+++ b/packages/core/src/version.ts
@@ -1,5 +1,5 @@
-const core = "@livepeer/core@3.1.17";
-const react = "@livepeer/react@4.1.17";
+const core = "@livepeer/core@3.1.18";
+const react = "@livepeer/react@4.1.18";
 
 export const version = {
   core,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 746fc2c1..e2897bee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,3 @@
-
 lockfileVersion: '6.0'
 
 settings:
@@ -334,6 +333,9 @@ importers:
       '@types/react-modal':
         specifier: ^3.16.3
         version: 3.16.3
+      axios:
+        specifier: ^1.7.2
+        version: 1.7.2
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1793,6 +1795,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+    dev: false
 
   /@babel/preset-env@7.24.5(@babel/core@7.24.5):
     resolution: {integrity: sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==}
@@ -1941,23 +1947,11 @@ packages:
     resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
     dev: false
 
-  /@babel/traverse@7.24.5:
-    resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==}
+  /@babel/runtime@7.23.9:
+    resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+      regenerator-runtime: 0.14.1
 
   /@babel/runtime@7.24.5:
     resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
@@ -4804,6 +4798,16 @@ packages:
       possible-typed-array-names: 1.0.0
     dev: true
 
+  /axios@1.7.2:
+    resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==}
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /babel-core@7.0.0-bridge.0(@babel/core@7.24.5):
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
     peerDependencies:
@@ -6284,6 +6288,16 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -9010,6 +9024,7 @@ packages:
 
   /rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3