Implement ingest playback queryparam for Livepeer TV (#587)

Author: mjh1

apps/lvpr-tv/src/app/page.tsx

@@ -15,6 +15,7 @@ type LowLatency = Booleanish | "force";
 type ObjectFit = "contain" | "cover";
 type Constant = Booleanish;
 type Debug = Booleanish;
+type IngestPlayback = Booleanish;
 
 type PlayerSearchParams = {
   v?: string;
@@ -31,6 +32,7 @@ type PlayerSearchParams = {
   jwt?: string;
   accessKey?: string;
   debug?: Debug;
+  ingestPlayback?: IngestPlayback;
 };
 
 export default async function PlayerPage({
@@ -60,6 +62,7 @@ export default async function PlayerPage({
     jwt: searchParams?.jwt ?? null,
     accessKey: searchParams?.accessKey ?? null,
     debug: coerceToBoolean(searchParams?.debug, false),
+    ingestPlayback: coerceToBoolean(searchParams?.ingestPlayback, false),
   };
 
   return (

apps/lvpr-tv/src/components/player/Player.tsx

@@ -37,6 +37,7 @@ export type PlayerProps = Partial<{
   jwt: string | null;
   accessKey: string | null;
   debug: boolean;
+  ingestPlayback: boolean;
 }>;
 
 const getPlaybackInfoUncached = cache(async (playbackId: string) => {
@@ -106,6 +107,7 @@ export async function PlayerWithControls(props: PlayerProps) {
       src={src}
       aspectRatio={null}
       storage={null}
+      ingestPlayback={props.ingestPlayback}
     >
       <Player.Container className="flex-1 h-full w-full overflow-hidden bg-black outline-none transition-all">
         <Player.Video

packages/core/src/media/controller.ts

@@ -154,6 +154,8 @@ export type InitialProps = {
    * The viewerId for the viewer. A unique identifier for the user or session watching the media.
    */
   viewerId: string | null;
+
+  ingestPlayback: boolean;
 };
 
 export type DeviceInformation = {
@@ -538,6 +540,7 @@ export const createControllerStore = ({
     hasRecentWebRTCTimeout: getHasRecentWebRTCTimeout(
       initialProps.cacheWebRTCFailureMs,
     ),
+    ingestPlayback: initialProps.ingestPlayback ?? false,
   });
 
   const initialControls: ControlsState = {
@@ -658,6 +661,7 @@ export const createControllerStore = ({
             videoQuality: initialVideoQuality,
             viewerId: initialProps.viewerId ?? null,
             volume: initialVolume ?? null,
+            ingestPlayback: initialProps.ingestPlayback ?? false,
           },
 
           __device: device,
@@ -856,6 +860,7 @@ export const createControllerStore = ({
                   hasRecentWebRTCTimeout: getHasRecentWebRTCTimeout(
                     __initialProps.cacheWebRTCFailureMs,
                   ),
+                  ingestPlayback: __initialProps.ingestPlayback,
                 });
 
                 return {
@@ -1178,6 +1183,7 @@ export const createControllerStore = ({
                     sessionToken: __controls.sessionToken,
                     source: nextSource,
                     videoQuality,
+                    ingestPlayback: __initialProps.ingestPlayback,
                   });
 
                   return {

packages/core/src/media/utils.ts

@@ -226,6 +226,7 @@ export const parseCurrentSourceAndPlaybackId = ({
   sessionToken,
   source,
   videoQuality,
+  ingestPlayback,
 }: {
   accessKey: InitialProps["accessKey"];
   aspectRatio: InitialProps["aspectRatio"];
@@ -235,6 +236,7 @@ export const parseCurrentSourceAndPlaybackId = ({
   sessionToken: string;
   source: Src | null;
   videoQuality: VideoQuality;
+  ingestPlayback: InitialProps["ingestPlayback"];
 }) => {
   if (!source) {
     return null;
@@ -277,6 +279,10 @@ export const parseCurrentSourceAndPlaybackId = ({
     }
   }
 
+  if (ingestPlayback) {
+    url.searchParams.append("ingestpb", String(ingestPlayback));
+  }
+
   // override the url with the new URL
   const newSrc = {
     ...source,
@@ -309,6 +315,7 @@ export const getNewSource = ({
   src,
   videoQuality,
   hasRecentWebRTCTimeout,
+  ingestPlayback,
 }: {
   accessKey: InitialProps["accessKey"] | undefined;
   aspectRatio: InitialProps["aspectRatio"] | undefined;
@@ -321,6 +328,7 @@ export const getNewSource = ({
   src: Src[] | string | null | undefined;
   videoQuality: VideoQuality;
   hasRecentWebRTCTimeout: boolean;
+  ingestPlayback: InitialProps["ingestPlayback"];
 }) => {
   const sortedSources = sortSources({
     src,
@@ -340,6 +348,7 @@ export const getNewSource = ({
     sessionToken: sessionToken,
     source: sortedSources?.[0] ?? null,
     videoQuality,
+    ingestPlayback,
   });
 
   return {