Latest (#538)

* Fix boot ms (#533) * fix: moved boot time into addmediametrics * chore: changeset * test: fix tests * test: fix tests * test: fix * test: remove flaky test * chore: version packages (#534) * chore: version packages * ci: bump --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Chase Adams <c@cadams.io> * fix: resolve issue with onError (#535) * chore: version packages (#536) * chore: version packages * ci: bump --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Chase Adams <c@cadams.io> * iframe Force Enabled (#537) * fix: force enabled * fix: default to true * fix: added hideEnabled --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
livepeer · Apr 24, 2024 · 7f210eb · 7f210eb
1 parent fb6146a
commit 7f210eb
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 77 deletions.
diff --git a/apps/lvpr-tv/src/app/broadcast/[key]/page.tsx b/apps/lvpr-tv/src/app/broadcast/[key]/page.tsx
@@ -5,6 +5,7 @@ import { getIngest } from "@livepeer/react/external";
 
 type BroadcastSearchParams = {
   forceEnabled?: Booleanish;
+  hideEnabled?: Booleanish;
   idealWidth?: string | number;
   idealHeight?: string | number;
 };
@@ -24,6 +25,7 @@ export default async function BroadcastPage({
       <BroadcastWithControls
         ingestUrl={ingestUrl}
         forceEnabled={coerceToBoolean(searchParams?.forceEnabled, true)}
+        hideEnabled={coerceToBoolean(searchParams?.hideEnabled, false)}
         video={
           searchParams.idealHeight || searchParams.idealWidth
             ? {

diff --git a/apps/lvpr-tv/src/components/broadcast/Broadcast.tsx b/apps/lvpr-tv/src/components/broadcast/Broadcast.tsx
@@ -21,8 +21,12 @@ import { Settings } from "./Settings";
 
 export function BroadcastWithControls({
   ingestUrl,
+  hideEnabled,
   ...rest
-}: { ingestUrl: string | null } & Partial<Broadcast.BroadcastProps>) {
+}: {
+  ingestUrl: string | null;
+  hideEnabled: boolean;
+} & Partial<Broadcast.BroadcastProps>) {
   return !ingestUrl ? (
     <BroadcastLoading
       title="Invalid stream key"
@@ -117,21 +121,25 @@ export function BroadcastWithControls({
                 </Broadcast.FullscreenTrigger>
               </div>
             </div>
-            <Broadcast.EnabledIndicator
-              matcher={false}
-              className="flex flex-1 items-center justify-center"
-            >
-              <Broadcast.EnabledTrigger className="rounded-md px-4 py-2 bg-black/60 hover:bg-black/70 gap-1 flex items-center justify-center">
-                <EnableVideoIcon className="w-7 h-7" />
-                <span className="text-sm">Start broadcast</span>
-              </Broadcast.EnabledTrigger>
-            </Broadcast.EnabledIndicator>
-            <Broadcast.EnabledIndicator asChild>
-              <Broadcast.EnabledTrigger className="top-1 right-2 absolute flex items-center justify-center gap-1 rounded-md px-4 py-2 bg-white/5 hover:bg-white/10">
-                <StopIcon className="w-7 h-7" />
-                <span className="text-sm">Stop broadcast</span>
-              </Broadcast.EnabledTrigger>
-            </Broadcast.EnabledIndicator>
+            {!hideEnabled && (
+              <>
+                <Broadcast.EnabledIndicator
+                  matcher={false}
+                  className="flex flex-1 items-center justify-center"
+                >
+                  <Broadcast.EnabledTrigger className="rounded-md px-4 py-2 bg-black/60 hover:bg-black/70 gap-1 flex items-center justify-center">
+                    <EnableVideoIcon className="w-7 h-7" />
+                    <span className="text-sm">Start broadcast</span>
+                  </Broadcast.EnabledTrigger>
+                </Broadcast.EnabledIndicator>
+                <Broadcast.EnabledIndicator asChild>
+                  <Broadcast.EnabledTrigger className="top-1 right-2 absolute flex items-center justify-center gap-1 rounded-md px-4 py-2 bg-white/5 hover:bg-white/10">
+                    <StopIcon className="w-7 h-7" />
+                    <span className="text-sm">Stop broadcast</span>
+                  </Broadcast.EnabledTrigger>
+                </Broadcast.EnabledIndicator>
+              </>
+            )}
           </Broadcast.Controls>
 
           <Broadcast.LoadingIndicator asChild matcher={false}>

diff --git a/packages/core-react/CHANGELOG.md b/packages/core-react/CHANGELOG.md
@@ -1,12 +1,30 @@
 # @livepeer/core-react
 
+## 3.1.17
+
+### Patch Changes
+
+- [#535](https://github.com/livepeer/ui-kit/pull/535) [`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed an issue where `onError` gets called with `null` in the `addMediaMetrics` plugin, when there is no error. 
+
+- Updated dependencies [[`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311)]:
+  - @livepeer/core@3.1.17
+
+## 3.1.16
+
+### Patch Changes
+
+- [#533](https://github.com/livepeer/ui-kit/pull/533) [`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed metrics to report `preloadTime` as the time between connecting `addMediaMetrics` and the first `play` event.
+
+- Updated dependencies [[`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed)]:
+  - @livepeer/core@3.1.16
+
 ## 3.1.15
 
 ### Patch Changes
 
 - [#530](https://github.com/livepeer/ui-kit/pull/530) [`adbd11b`](https://github.com/livepeer/ui-kit/commit/adbd11b404888af813c7dcea04a76c9e9a450124) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fix for metrics using `disableProgressListener` where the metrics does not register a `playing` event.
 
-- Updated dependencies [[`adbd11b`](https://github.com/livepeer/ui-kit/commit/adbd11b404888af813c7dcea04a76c9e9a450124)]: 
+- Updated dependencies [[`adbd11b`](https://github.com/livepeer/ui-kit/commit/adbd11b404888af813c7dcea04a76c9e9a450124)]:
   - @livepeer/core@3.1.15
 
 ## 3.1.14

diff --git a/packages/core-react/package.json b/packages/core-react/package.json
@@ -2,7 +2,7 @@
   "name": "@livepeer/core-react",
   "description": "Internal library used for livepeer react primitives.",
   "license": "MIT",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "type": "module",
   "repository": {
     "type": "git",

diff --git a/packages/core-web/CHANGELOG.md b/packages/core-web/CHANGELOG.md
@@ -1,5 +1,23 @@
 # livepeer
 
+## 4.1.17
+
+### Patch Changes
+
+- [#535](https://github.com/livepeer/ui-kit/pull/535) [`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed an issue where `onError` gets called with `null` in the `addMediaMetrics` plugin, when there is no error.
+
+- Updated dependencies [[`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311)]:
+  - @livepeer/core@3.1.17
+
+## 4.1.16
+
+### Patch Changes
+
+- [#533](https://github.com/livepeer/ui-kit/pull/533) [`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed metrics to report `preloadTime` as the time between connecting `addMediaMetrics` and the first `play` event.
+
+- Updated dependencies [[`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed)]:
+  - @livepeer/core@3.1.16
+
 ## 4.1.15
 
 ### Patch Changes

diff --git a/packages/core-web/package.json b/packages/core-web/package.json
@@ -2,7 +2,7 @@
   "name": "@livepeer/core-web",
   "description": "Livepeer UI Kit's core web library, for adding reactive stores to video elements.",
   "license": "MIT",
-  "version": "4.1.15",
+  "version": "4.1.17",
   "type": "module",
   "repository": {
     "type": "git",

diff --git a/packages/core-web/src/media/metrics.test.ts b/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();
 

diff --git a/packages/core-web/src/media/metrics.ts b/packages/core-web/src/media/metrics.ts
@@ -1,14 +1,15 @@
 import {
   type InitialProps,
   type MediaMetrics,
+  type PlaybackError,
   addMediaMetricsToStore,
   createControllerStore,
 } from "@livepeer/core/media";
 import { createStorage, noopStorage } from "@livepeer/core/storage";
 import { version } from "@livepeer/core/version";
 import { addEventListeners, getDeviceInfo } from "./controls";
 
-export type MediaMetricsOptions = Pick<InitialProps, "onError" | "viewerId"> & {
+export type MediaMetricsOptions = Pick<InitialProps, "viewerId"> & {
   /**
    * Sets a custom source URL for playback, such as `https://livepeercdn.studio/hls/{playbackId}/index.m3u8`.
    * If not specified, the function defaults to using the `src` attribute of the HTMLMediaElement.
@@ -26,6 +27,11 @@ export type MediaMetricsOptions = Pick<InitialProps, "onError" | "viewerId"> & {
    * Disables the `progress` event listener, which is used to monitor when media is in a "playing" state.
    */
   disableProgressListener?: boolean;
+
+  /**
+   * Callback called when there is an error.
+   */
+  onError?: ((error: PlaybackError) => any) | null | undefined;
 };
 
 /**
@@ -62,6 +68,11 @@ export function addMediaMetrics(
         hotkeys: false,
         posterLiveUpdate: 0,
         ...opts,
+        onError(error) {
+          if (error) {
+            opts?.onError?.(error);
+          }
+        },
       },
     });
 

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @livepeer/core
 
+## 3.1.17
+
+### Patch Changes
+
+- [#535](https://github.com/livepeer/ui-kit/pull/535) [`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed an issue where `onError` gets called with `null` in the `addMediaMetrics` plugin, when there is no error.
+
+## 3.1.16
+
+### Patch Changes
+
+- [#533](https://github.com/livepeer/ui-kit/pull/533) [`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed metrics to report `preloadTime` as the time between connecting `addMediaMetrics` and the first `play` event.
+
 ## 3.1.15
 
 ### Patch Changes

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -3,7 +3,7 @@
   "description": "Livepeer UI Kit's core vanilla JS library.",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "repository": {
     "type": "git",
     "url": "https://github.com/livepeer/ui-kit.git",

diff --git a/packages/core/src/media/metrics.ts b/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 () => {

diff --git a/packages/core/src/version.ts b/packages/core/src/version.ts
@@ -1,5 +1,5 @@
-const core = "@livepeer/core@3.1.15";
-const react = "@livepeer/react@4.1.15";
+const core = "@livepeer/core@3.1.16";
+const react = "@livepeer/react@4.1.16";
 
 export const version = {
   core,

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @livepeer/react
 
+## 4.1.17
+
+### Patch Changes
+
+- [#535](https://github.com/livepeer/ui-kit/pull/535) [`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed an issue where `onError` gets called with `null` in the `addMediaMetrics` plugin, when there is no error.
+
+- Updated dependencies [[`8684ce1`](https://github.com/livepeer/ui-kit/commit/8684ce1ad8ba8afeaadaa394e71306f697c13311)]:
+  - @livepeer/core-react@3.1.17
+  - @livepeer/core-web@4.1.17
+  - @livepeer/core@3.1.17
+
+## 4.1.16
+
+### Patch Changes
+
+- [#533](https://github.com/livepeer/ui-kit/pull/533) [`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** fixed metrics to report `preloadTime` as the time between connecting `addMediaMetrics` and the first `play` event.
+
+- Updated dependencies [[`c0aa640`](https://github.com/livepeer/ui-kit/commit/c0aa640ceba06187d964e66c1be174f4bae801ed)]:
+  - @livepeer/core-react@3.1.16
+  - @livepeer/core-web@4.1.16
+  - @livepeer/core@3.1.16
+
 ## 4.1.15
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@livepeer/react",
   "description": "React primitives for video apps.",
   "license": "MIT",
-  "version": "4.1.15",
+  "version": "4.1.17",
   "type": "module",
   "repository": {
     "type": "git",