Trovo Fix (#515)

* fix: added disableProgressListener to metrics * fix: package json * fix: add testcase * fix: docs
livepeer · Mar 20, 2024 · 922ff14 · 922ff14
1 parent 1be735d
commit 922ff14
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 127 deletions.
diff --git a/.changeset/slow-bikes-dress.md b/.changeset/slow-bikes-dress.md
@@ -0,0 +1,8 @@
+---
+"@livepeer/core-web": patch
+"@livepeer/core": patch
+"@livepeer/core-react": patch
+"@livepeer/react": patch
+---
+
+**Feature:** added `disableProgressListener` to `addMediaMetrics` so progress events from an HTML5 video element can be ignored when monitoring for playing/paused.
diff --git a/examples/next-pages/src/pages/alternative-player.tsx b/examples/next-pages/src/pages/alternative-player.tsx
@@ -1,38 +1,40 @@
-import { livepeer } from "@/lib/livepeer";
 import { addMediaMetrics } from "@livepeer/core-web/browser";
-import { getSrc } from "@livepeer/react/external";
 
-import type { InferGetServerSidePropsType } from "next";
 import { useEffect, useRef } from "react";
 
-const playbackId = "b7f3rvvf5rnzzy29";
+export default function Page() {
+  const ref = useRef<HTMLVideoElement | null>(null);
 
-export const getServerSideProps = async () => {
-  const playbackInfo = await livepeer.playback.get(playbackId);
+  useEffect(() => {
+    const videoElement = ref.current;
 
-  const src = getSrc(playbackInfo.playbackInfo);
+    const handlePause = () => {
+      if (videoElement) {
+        videoElement.currentTime = 0;
+      }
+    };
 
-  return { props: { src } };
-};
+    videoElement?.addEventListener("pause", handlePause);
 
-export default function Page({
-  src,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const ref = useRef<HTMLVideoElement | null>(null);
-
-  useEffect(() => {
-    const { destroy } = addMediaMetrics(ref.current);
+    const { destroy } = addMediaMetrics(videoElement, {
+      disableProgressListener: true,
+    });
 
-    return () => destroy();
-  });
+    // Cleanup function to remove event listener and destroy metrics when component unmounts
+    return () => {
+      videoElement?.removeEventListener("pause", handlePause);
+      destroy();
+    };
+  }, []);
 
   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
         ref={ref}
-        src={src?.find((s) => s.type === "hls")?.src}
+        src="https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/0b79ukgd9vf7t0ae/static2160p0.mp4"
         autoPlay
       />
     </main>

diff --git a/packages/core-react/package.json b/packages/core-react/package.json
@@ -13,9 +13,7 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -31,12 +29,8 @@
   },
   "typesVersions": {
     "*": {
-      "crypto": [
-        "./dist/crypto/index.d.ts"
-      ],
-      "*": [
-        "./dist/index.d.ts"
-      ]
+      "crypto": ["./dist/crypto/index.d.ts"],
+      "*": ["./dist/index.d.ts"]
     }
   },
   "scripts": {
@@ -61,10 +55,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "keywords": [
-    "livepeer",
-    "video",
-    "streaming",
-    "livestream"
-  ]
+  "keywords": ["livepeer", "video", "streaming", "livestream"]
 }
diff --git a/packages/core-web/package.json b/packages/core-web/package.json
@@ -13,9 +13,7 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -56,27 +54,13 @@
   },
   "typesVersions": {
     "*": {
-      "broadcast": [
-        "./dist/broadcast/index.d.ts"
-      ],
-      "browser": [
-        "./dist/browser/index.d.ts"
-      ],
-      "external": [
-        "./dist/external/index.d.ts"
-      ],
-      "hls": [
-        "./dist/hls/index.d.ts"
-      ],
-      "media": [
-        "./dist/media/index.d.ts"
-      ],
-      "webrtc": [
-        "./dist/webrtc/index.d.ts"
-      ],
-      "*": [
-        "./dist/index.d.ts"
-      ]
+      "broadcast": ["./dist/broadcast/index.d.ts"],
+      "browser": ["./dist/browser/index.d.ts"],
+      "external": ["./dist/external/index.d.ts"],
+      "hls": ["./dist/hls/index.d.ts"],
+      "media": ["./dist/media/index.d.ts"],
+      "webrtc": ["./dist/webrtc/index.d.ts"],
+      "*": ["./dist/index.d.ts"]
     }
   },
   "scripts": {
@@ -90,10 +74,5 @@
     "hls.js": "^1.5.2",
     "zustand": "^4.5.0"
   },
-  "keywords": [
-    "livepeer",
-    "video",
-    "streaming",
-    "livestream"
-  ]
+  "keywords": ["livepeer", "video", "streaming", "livestream"]
 }
diff --git a/packages/core-web/src/media/metrics.ts b/packages/core-web/src/media/metrics.ts
@@ -21,6 +21,11 @@ export type MediaMetricsOptions = Pick<InitialProps, "onError" | "viewerId"> & {
    * If not specified, the function defaults to parsing the `src` attribute of the HTMLMediaElement to get the playback ID.
    */
   playbackId?: string;
+
+  /**
+   * Disables the `progress` event listener, which is used to monitor when media is in a "playing" state.
+   */
+  disableProgressListener?: boolean;
 };
 
 /**
@@ -62,7 +67,9 @@ export function addMediaMetrics(
 
     const { destroy: destroyListeners } = addEventListeners(element, store);
 
-    const { metrics, destroy: destroyMetrics } = addMediaMetricsToStore(store);
+    const { metrics, destroy: destroyMetrics } = addMediaMetricsToStore(store, {
+      disableProgressListener: opts.disableProgressListener,
+    });
 
     store
       .getState()

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -13,9 +13,7 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -56,27 +54,13 @@
   },
   "typesVersions": {
     "*": {
-      "crypto": [
-        "./dist/crypto/index.d.ts"
-      ],
-      "errors": [
-        "./dist/errors/index.d.ts"
-      ],
-      "media": [
-        "./dist/media/index.d.ts"
-      ],
-      "storage": [
-        "./dist/storage/index.d.ts"
-      ],
-      "utils": [
-        "./dist/utils/index.d.ts"
-      ],
-      "version": [
-        "./dist/version/index.d.ts"
-      ],
-      "*": [
-        "./dist/index.d.ts"
-      ]
+      "crypto": ["./dist/crypto/index.d.ts"],
+      "errors": ["./dist/errors/index.d.ts"],
+      "media": ["./dist/media/index.d.ts"],
+      "storage": ["./dist/storage/index.d.ts"],
+      "utils": ["./dist/utils/index.d.ts"],
+      "version": ["./dist/version/index.d.ts"],
+      "*": ["./dist/index.d.ts"]
     }
   },
   "scripts": {
@@ -92,10 +76,5 @@
   "devDependencies": {
     "jose": "^5.2.3"
   },
-  "keywords": [
-    "livepeer",
-    "video",
-    "streaming",
-    "livestream"
-  ]
+  "keywords": ["livepeer", "video", "streaming", "livestream"]
 }
diff --git a/packages/core/src/media/metrics.ts b/packages/core/src/media/metrics.ts
@@ -2,6 +2,13 @@ import type { MediaControllerStore } from "./controller";
 import { getMetricsReportingUrl } from "./metrics-utils";
 import type { MimeType } from "./mime";
 
+type MetricsOpts = {
+  /**
+   * Disables the `progress` event listener, which is used to monitor when media is in a "playing" state.
+   */
+  disableProgressListener?: boolean;
+};
+
 type RawMetrics = {
   preloadTime: number | null;
   ttff: number | null;
@@ -201,7 +208,7 @@ export class MetricsStatus {
   timeStalled = new Timer();
   timeUnpaused = new Timer();
 
-  constructor(store: MediaControllerStore) {
+  constructor(store: MediaControllerStore, opts: MetricsOpts | undefined) {
     const currentState = store.getState();
 
     this.store = store;
@@ -285,6 +292,7 @@ export class MetricsStatus {
       }
 
       if (
+        opts?.disableProgressListener !== true &&
         state.progress !== prevState.progress &&
         !this.timeUnpaused.startTime
       ) {
@@ -386,6 +394,7 @@ export type MediaMetrics = {
  */
 export function addMediaMetricsToStore(
   store: MediaControllerStore | undefined | null,
+  opts?: MetricsOpts,
 ): MediaMetrics {
   const defaultResponse: MediaMetrics = {
     metrics: null,
@@ -408,7 +417,7 @@ export function addMediaMetricsToStore(
   let timeOut: NodeJS.Timeout | null = null;
   let enabled = true;
 
-  const metricsStatus = new MetricsStatus(store);
+  const metricsStatus = new MetricsStatus(store, opts);
   const monitor = new PlaybackMonitor(store);
 
   const report = async () => {

diff --git a/packages/core/src/version.ts b/packages/core/src/version.ts
@@ -1,5 +1,5 @@
-const core = "@livepeer/core@3.1.9";
-const react = "@livepeer/react@4.1.9";
+const core = "@livepeer/core@3.1.10";
+const react = "@livepeer/react@4.1.10";
 
 export const version = {
   core,

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -13,9 +13,7 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -51,24 +49,12 @@
   },
   "typesVersions": {
     "*": {
-      "assets": [
-        "./dist/assets/index.d.ts"
-      ],
-      "broadcast": [
-        "./dist/broadcast/index.d.ts"
-      ],
-      "crypto": [
-        "./dist/crypto/index.d.ts"
-      ],
-      "external": [
-        "./dist/external/index.d.ts"
-      ],
-      "player": [
-        "./dist/player/index.d.ts"
-      ],
-      "*": [
-        "./dist/index.d.ts"
-      ]
+      "assets": ["./dist/assets/index.d.ts"],
+      "broadcast": ["./dist/broadcast/index.d.ts"],
+      "crypto": ["./dist/crypto/index.d.ts"],
+      "external": ["./dist/external/index.d.ts"],
+      "player": ["./dist/player/index.d.ts"],
+      "*": ["./dist/index.d.ts"]
     }
   },
   "scripts": {
@@ -114,11 +100,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "keywords": [
-    "livepeer",
-    "react",
-    "video",
-    "streaming",
-    "livestream"
-  ]
+  "keywords": ["livepeer", "react", "video", "streaming", "livestream"]
 }