Update Next with Latest (#523)

* Trovo Fix (#515) * fix: added disableProgressListener to metrics * fix: package json * fix: add testcase * fix: docs * chore: version packages (#516) * 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: added force enabled (#517) * fix: remove element load (#518) * chore: version packages (#519) * 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> * feat: added broadcast config (#521) * fix: types * chore: version packages (#522) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: styling * fix: changeset * fix: fixed merge and exposed further attrs --------- 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 · Mar 28, 2024 · f05608e · f05608e
1 parent 882d6f5
commit f05608e
Show file tree

Hide file tree

Showing 24 changed files with 263 additions and 156 deletions.
diff --git a/.changeset/nervous-pots-agree.md b/.changeset/nervous-pots-agree.md
@@ -0,0 +1,8 @@
+---
+"@livepeer/core-react": patch
+"@livepeer/core-web": patch
+"@livepeer/react": patch
+"@livepeer/core": patch
+---
+
+**Fix:** merged fixes from `main`.
diff --git a/apps/docs-embed/src/lib/broadcast-components.ts b/apps/docs-embed/src/lib/broadcast-components.ts
@@ -758,4 +758,3 @@ export default () => {
     </Broadcast.Root>
   );
 };`;
-
diff --git a/apps/docs-embed/src/lib/code-components.ts b/apps/docs-embed/src/lib/code-components.ts
@@ -67,4 +67,3 @@ 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
@@ -1411,4 +1411,3 @@ export default () => {
     </Player.Root>
   );
 };`;
-
diff --git a/apps/lvpr-tv/src/app/broadcast/[key]/page.tsx b/apps/lvpr-tv/src/app/broadcast/[key]/page.tsx
@@ -1,9 +1,16 @@
 import { BroadcastWithControls } from "@/components/broadcast/Broadcast";
+import type { Booleanish } from "@/lib/types";
+import { coerceToBoolean } from "@/lib/utils";
 import { getIngest } from "@livepeer/react/external";
 
+type BroadcastSearchParams = {
+  forceEnabled?: Booleanish;
+};
+
 export default async function BroadcastPage({
   params,
-}: { params: { key?: string } }) {
+  searchParams,
+}: { params: { key?: string }; searchParams: Partial<BroadcastSearchParams> }) {
   const ingestUrl = getIngest(params.key, {
     baseUrl:
       process.env.NEXT_PUBLIC_WEBRTC_INGEST_BASE_URL ??
@@ -12,7 +19,10 @@ export default async function BroadcastPage({
 
   return (
     <main className="absolute inset-0 gap-2 flex flex-col justify-center items-center bg-black">
-      <BroadcastWithControls ingestUrl={ingestUrl} />
+      <BroadcastWithControls
+        ingestUrl={ingestUrl}
+        forceEnabled={coerceToBoolean(searchParams?.forceEnabled, true)}
+      />
     </main>
   );
 }
diff --git a/apps/lvpr-tv/src/components/broadcast/Broadcast.tsx b/apps/lvpr-tv/src/components/broadcast/Broadcast.tsx
@@ -21,7 +21,8 @@ import { Settings } from "./Settings";
 
 export function BroadcastWithControls({
   ingestUrl,
-}: { ingestUrl: string | null }) {
+  ...rest
+}: { ingestUrl: string | null } & Partial<Broadcast.BroadcastProps>) {
   return !ingestUrl ? (
     <BroadcastLoading
       title="Invalid stream key"
@@ -30,6 +31,7 @@ export function BroadcastWithControls({
   ) : (
     <>
       <Broadcast.Root
+        {...rest}
         onError={(error) =>
           error?.type === "permissions"
             ? toast.error(

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/CHANGELOG.md b/packages/core-react/CHANGELOG.md
@@ -177,6 +177,33 @@
 - Updated dependencies [[`92d67e1`](https://github.com/livepeer/ui-kit/commit/92d67e1d0e89c52ea8bde16b735f2400e8897bde)]:
   - @livepeer/core@3.2.0-next.0
 
+## 3.1.13
+
+### Patch Changes
+
+- [#521](https://github.com/livepeer/ui-kit/pull/521) [`6082120`](https://github.com/livepeer/ui-kit/commit/6082120c32e2f0417fb6473637840ccda18f1225) Thanks [@0xcadams](https://github.com/0xcadams)! - **Feature:** added audio and video constraints to the Broadcast Root component.
+
+- Updated dependencies [[`6082120`](https://github.com/livepeer/ui-kit/commit/6082120c32e2f0417fb6473637840ccda18f1225)]:
+  - @livepeer/core@3.1.13
+
+## 3.1.12
+
+### Patch Changes
+
+- [#518](https://github.com/livepeer/ui-kit/pull/518) [`95b9592`](https://github.com/livepeer/ui-kit/commit/95b959276dd5d23b1a26baa2ba881e149492c9f7) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** removed `element.load()` side effect from the `addEventListeners` function.
+
+- Updated dependencies [[`95b9592`](https://github.com/livepeer/ui-kit/commit/95b959276dd5d23b1a26baa2ba881e149492c9f7)]:
+  - @livepeer/core@3.1.12
+
+## 3.1.11
+
+### Patch Changes
+
+- [#515](https://github.com/livepeer/ui-kit/pull/515) [`922ff14`](https://github.com/livepeer/ui-kit/commit/922ff141ce496f78843b6fc211847725d2e57d80) Thanks [@0xcadams](https://github.com/0xcadams)! - **Feature:** added `disableProgressListener` to `addMediaMetrics` so progress events from an HTML5 video element can be ignored when monitoring for playing/paused.
+
+- Updated dependencies [[`922ff14`](https://github.com/livepeer/ui-kit/commit/922ff141ce496f78843b6fc211847725d2e57d80)]:
+  - @livepeer/core@3.1.11
+
 ## 3.1.10
 
 ### Patch Changes

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/CHANGELOG.md b/packages/core-web/CHANGELOG.md
@@ -177,6 +177,33 @@
 - Updated dependencies [[`92d67e1`](https://github.com/livepeer/ui-kit/commit/92d67e1d0e89c52ea8bde16b735f2400e8897bde)]:
   - @livepeer/core@3.2.0-next.0
 
+## 4.1.13
+
+### Patch Changes
+
+- [#521](https://github.com/livepeer/ui-kit/pull/521) [`6082120`](https://github.com/livepeer/ui-kit/commit/6082120c32e2f0417fb6473637840ccda18f1225) Thanks [@0xcadams](https://github.com/0xcadams)! - **Feature:** added audio and video constraints to the Broadcast Root component.
+
+- Updated dependencies [[`6082120`](https://github.com/livepeer/ui-kit/commit/6082120c32e2f0417fb6473637840ccda18f1225)]:
+  - @livepeer/core@3.1.13
+
+## 4.1.12
+
+### Patch Changes
+
+- [#518](https://github.com/livepeer/ui-kit/pull/518) [`95b9592`](https://github.com/livepeer/ui-kit/commit/95b959276dd5d23b1a26baa2ba881e149492c9f7) Thanks [@0xcadams](https://github.com/0xcadams)! - **Fix:** removed `element.load()` side effect from the `addEventListeners` function.
+
+- Updated dependencies [[`95b9592`](https://github.com/livepeer/ui-kit/commit/95b959276dd5d23b1a26baa2ba881e149492c9f7)]:
+  - @livepeer/core@3.1.12
+
+## 4.1.11
+
+### Patch Changes
+
+- [#515](https://github.com/livepeer/ui-kit/pull/515) [`922ff14`](https://github.com/livepeer/ui-kit/commit/922ff141ce496f78843b6fc211847725d2e57d80) Thanks [@0xcadams](https://github.com/0xcadams)! - **Feature:** added `disableProgressListener` to `addMediaMetrics` so progress events from an HTML5 video element can be ignored when monitoring for playing/paused.
+
+- Updated dependencies [[`922ff14`](https://github.com/livepeer/ui-kit/commit/922ff141ce496f78843b6fc211847725d2e57d80)]:
+  - @livepeer/core@3.1.11
+
 ## 4.1.10
 
 ### Patch Changes

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/broadcast.ts b/packages/core-web/src/broadcast.ts
@@ -110,7 +110,7 @@ export type InitialBroadcastProps = {
    *
    * Set to false to initialize the broadcast to not request an audio track.
    */
-  audio: boolean;
+  audio: boolean | Omit<MediaTrackConstraints, "deviceId">;
 
   /**
    * The creatorId for the current broadcast.
@@ -138,7 +138,7 @@ export type InitialBroadcastProps = {
    *
    * Set to false to initialize the broadcast to not request a video track.
    */
-  video: boolean;
+  video: boolean | Omit<MediaTrackConstraints, "deviceId">;
 };
 
 export type BroadcastAriaText = {
@@ -312,7 +312,7 @@ export const createBroadcastStore = ({
 
           __initialProps: {
             aspectRatio: initialProps?.aspectRatio ?? null,
-            audio: initialProps?.video ?? true,
+            audio: initialProps?.audio ?? true,
             creatorId: initialProps.creatorId ?? null,
             forceEnabled: initialProps?.forceEnabled ?? false,
             hotkeys: initialProps.hotkeys ?? true,
@@ -806,6 +806,8 @@ const addEffectsToStore = (
       audio: state.audio,
       requestedAudioDeviceId: state.__controls.requestedAudioInputDeviceId,
       requestedVideoDeviceId: state.__controls.requestedVideoInputDeviceId,
+      initialAudioConfig: state.__initialProps.audio,
+      initialVideoConfig: state.__initialProps.video,
       previousMediaStream: state.mediaStream,
     }),
     async ({
@@ -816,6 +818,8 @@ const addEffectsToStore = (
       requestedAudioDeviceId,
       requestedVideoDeviceId,
       previousMediaStream,
+      initialAudioConfig,
+      initialVideoConfig,
     }) => {
       try {
         if (!mounted || !hydrated) {
@@ -832,6 +836,11 @@ const addEffectsToStore = (
           video = true;
         }
 
+        const audioConstraints =
+          typeof initialAudioConfig !== "boolean" ? initialAudioConfig : null;
+        const videoConstraints =
+          typeof initialVideoConfig !== "boolean" ? initialVideoConfig : null;
+
         const stream = await (requestedVideoDeviceId === "screen"
           ? getDisplayMedia({
               // for now, only the microphone audio track is supported - we don't support multiple
@@ -840,31 +849,43 @@ const addEffectsToStore = (
 
               // we assume that if the user is requested to share screen, they want to enable video,
               // and we don't listen to the `video` enabled state
-              video: true,
+              //
+              // we apply the video constraints to the video track
+              video: videoConstraints ?? true,
             })
           : getUserMedia({
               audio:
                 audio &&
                 requestedAudioDeviceId &&
                 requestedAudioDeviceId !== "default"
                   ? {
+                      ...(audioConstraints ? audioConstraints : {}),
                       deviceId: {
                         // we pass ideal here, so we don't get overconstrained errors
                         ideal: requestedAudioDeviceId,
                       },
                     }
-                  : Boolean(audio),
+                  : audio
+                    ? {
+                        ...(audioConstraints ? audioConstraints : {}),
+                      }
+                    : false,
               video:
                 video &&
                 requestedVideoDeviceId &&
                 requestedVideoDeviceId !== "default"
                   ? {
+                      ...(videoConstraints ? videoConstraints : {}),
                       deviceId: {
                         // we pass ideal here, so we don't get overconstrained errors
                         ideal: requestedVideoDeviceId,
                       },
                     }
-                  : Boolean(video),
+                  : video
+                    ? {
+                        ...(videoConstraints ? videoConstraints : {}),
+                      }
+                    : false,
             }));
 
         if (stream) {