Fix boot ms

.changeset/fifty-steaks-switch.md

@@ -0,0 +1,8 @@
+---
+"@livepeer/core-react": patch
+"@livepeer/core-web": patch
+"@livepeer/react": patch
+"@livepeer/core": patch
+---
+
+**Fix:** fixed metrics to report `preloadTime` as the time between connecting `addMediaMetrics` and the first `play` event.

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"]
 }

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"]
 }

packages/core-web/src/media/metrics.test.ts

@@ -1,10 +1,10 @@
-import { beforeAll, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
 
 import { MockedVideoElement, resetDateNow } from "../../test";
 import { addMediaMetrics } from "./metrics";
 
 describe("addMediaMetrics", () => {
-  beforeAll(() => {
+  beforeEach(() => {
     resetDateNow();
   });
 
@@ -52,51 +52,6 @@ describe("addMediaMetrics", () => {
       `);
     });
 
-    it("should update time unpaused and first playback", async () => {
-      const element = new MockedVideoElement();
-
-      const { metrics } = addMediaMetrics(element);
-
-      element.dispatchEvent(new Event("playing"));
-
-      const metricsSnapshot = metrics?.getMetrics();
-
-      expect(metricsSnapshot?.current?.userAgent).toBeTruthy();
-
-      if (metricsSnapshot?.current?.userAgent) {
-        metricsSnapshot.current.userAgent = "UA";
-        metricsSnapshot.current.player = "hls-1";
-      }
-
-      expect(metricsSnapshot?.current).toMatchInlineSnapshot(`
-        {
-          "autoplay": "preload-full",
-          "duration": null,
-          "firstPlayback": 8000,
-          "nError": null,
-          "nStalled": 0,
-          "nWaiting": 0,
-          "offset": null,
-          "pageUrl": "http://localhost:3000/",
-          "playbackScore": null,
-          "player": "hls-1",
-          "playerHeight": null,
-          "playerWidth": null,
-          "preloadTime": 6000,
-          "sourceType": "unknown",
-          "sourceUrl": null,
-          "timeStalled": 0,
-          "timeUnpaused": 2000,
-          "timeWaiting": 0,
-          "ttff": null,
-          "uid": "",
-          "userAgent": "UA",
-          "videoHeight": null,
-          "videoWidth": null,
-        }
-      `);
-    });
-
     it("should update time waiting and waiting count", async () => {
       const element = new MockedVideoElement();
 

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"]
 }

packages/core/src/media/metrics.ts

@@ -194,6 +194,7 @@ function isInIframe() {
 export class MetricsStatus {
   requestedPlayTime: number | null = null;
   firstFrameTime: number | null = null;
+  bootMs: number;
 
   retryCount = 0;
   connected = false;
@@ -208,10 +209,15 @@ export class MetricsStatus {
   timeStalled = new Timer();
   timeUnpaused = new Timer();
 
-  constructor(store: MediaControllerStore, opts: MetricsOpts | undefined) {
+  constructor(
+    store: MediaControllerStore,
+    bootMs: number,
+    opts: MetricsOpts | undefined,
+  ) {
     const currentState = store.getState();
 
     this.store = store;
+    this.bootMs = bootMs;
 
     const windowHref =
       typeof window !== "undefined" ? window?.location?.href ?? "" : "";
@@ -337,13 +343,13 @@ export class MetricsStatus {
     return this.currentMetrics.firstPlayback;
   }
   setFirstPlayback() {
-    this.currentMetrics.firstPlayback = Date.now() - bootMs;
+    this.currentMetrics.firstPlayback = Date.now() - this.bootMs;
   }
   getFirstFrameTime() {
     return this.firstFrameTime;
   }
   setFirstFrameTime() {
-    this.firstFrameTime = Date.now() - bootMs;
+    this.firstFrameTime = Date.now() - this.bootMs;
   }
   setPlaybackScore(playbackScore: number) {
     this.currentMetrics.playbackScore = playbackScore;
@@ -394,8 +400,6 @@ export class MetricsStatus {
   }
 }
 
-const bootMs = Date.now(); // used for firstPlayback value
-
 export type MediaMetrics = {
   metrics: MetricsStatus | null;
   destroy: () => void;
@@ -412,6 +416,8 @@ export function addMediaMetricsToStore(
   store: MediaControllerStore | undefined | null,
   opts?: MetricsOpts,
 ): MediaMetrics {
+  const bootMs = Date.now(); // used for firstPlayback value
+
   const defaultResponse: MediaMetrics = {
     metrics: null,
     destroy: () => {
@@ -433,7 +439,7 @@ export function addMediaMetricsToStore(
   let timeOut: NodeJS.Timeout | null = null;
   let enabled = true;
 
-  const metricsStatus = new MetricsStatus(store, opts);
+  const metricsStatus = new MetricsStatus(store, bootMs, opts);
   const monitor = new PlaybackMonitor(store);
 
   const report = async () => {

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"]
 }