Kinora Player Wrapper

Wrap your Livepeer Players.

Wrap each Livepeer Player Component in your App with the Kinora Player Wrapper for seamless videometric logging.

The Kinora Player Wrapper performs two core functions:

1. Metric Logging: For crafting personalized video feeds and documenting Player Quest Milestone progression.

2. Refined Control: For Livepeer Player style customization and direct video element interaction via callback props and instance methods.

Some NextJS App Architectures may need to import the KinoraPlayerWrapper dynamically with ssr: false to ensure the wrapper is only rendered on the client side.

import { Player } from "@livepeer/react";
import { KinoraPlayerWrapper } from "kinora-sdk";

function Page() {

return (
  <div id="uniqueParentId" className="w-20 h-20 flex">
    <KinoraPlayerWrapper
      parentId={"uniqueParentId"}
      postId={postId}
      customControls={true}
      fillWidthHeight={true}
      >
      {(setMediaElement: (node: HTMLVideoElement) => void) => (
        <Player
         mediaElementRef={setMediaElement}
         playbackId="f5eese9wwl88k4g8"
         objectFit="cover"
         />
       )}
    </KinoraPlayerWrapper>
   </div>
  );
}

Metric Logging

To initiate the logging of player interactions for each unique playback Id played by your Livepeer Player Components, ensure to pass in the postId that the video is linked to (i.e. the post Id of the video on Lens). Metrics will not be logged if this prop is not provided.

Refer to the Send Metrics On-Chain section for comprehensive instructions on accurately receiving and sending the transmission of logged player metrics on-chain.

Refined Control

All generic Video HTML Element callback props and instance methods are readily configurable and accessible via the wrapper, enabling comprehensive style customization for controls, aspect ratio and general CSS styling of the Livepeer Player component.

If you possess the publication Id of a Lens Post associated with the playback Id, this prop can also be passed in along with the user's profile Id to simultaneously retrieve and display publication data related to the video.

Kinora Player Wrapper Props

/* The Livepeer Player Component passed as an argument to the setMediaElement function, which is used to set a reference to the HTMLVideoElement. */
children: (
    setMediaElement: (node: HTMLVideoElement) => void,
  ) => React.ReactNode;
 
/* The Id assigned to the parent div surrounding the Kinora Player Wrapper. For each new Kinora Player Wrapper instantiated around a unique Livepeer Player Component provide a unique parent Id to ensure control is correctly assigned. */
parentId: string

/* Lens post Id associated with the video. */
postId?: string;

/** Triggered when the video starts to play */
onPlay?: (event: Event) => void;

/** Triggered when the video is paused */
onPause?: (event: Event) => void;

/** Triggered when the video is aborted either by the user or programmatically */
onAbort?: (event: Event) => void;

/** Triggered when the video is ready to start playing */
onCanPlay?: (event: Event) => void;

/** Triggered when the video can be played all the way through without stopping */
onCanPlayThrough?: (event: Event) => void;

/** Triggered when the duration of the video changes */
onDurationChange?: (event: Event) => void;

/** Triggered when the media element is reset and becomes empty */
onEmptied?: (event: Event) => void;

/** Triggered when the video has ended */
onEnded?: (event: Event) => void;

/** Triggered when an error occurs during the loading of a video */
onError?: (event: Event) => void;

/** Triggered when the browser has loaded the current frame of the video */
onLoadedData?: (event: Event) => void;

/** Triggered when the browser has loaded meta data for the video */
onLoadedMetadata?: (event: Event) => void;

/** Triggered when the browser starts looking for the video */
onLoadStart?: (event: Event) => void;

/** Triggered when the video is playing */
onPlaying?: (event: Event) => void;

/** Triggered when the browser is downloading the video */
onProgress?: (event: Event) => void;

/** Triggered when the playing speed of the video changes */
onRateChange?: (event: Event) => void;

/** Triggered when the user is finished moving/skipping to a new position in the video */
onSeeked?: (event: Event) => void;

/** Triggered when the user begins moving/skipping to a new position in the video */
onSeeking?: (event: Event) => void;

/** Triggered when the browser is trying to get media data, but data is not available */
onStalled?: (event: Event) => void;

/** Triggered when the browser is intentionally not getting media data */
onSuspend?: (event: Event) => void;

/** Triggered when the current playback position has changed */
onTimeUpdate?: (event: Event) => void;

/** Triggered when the volume changes */
onVolumeChange?: (event: Event) => void;

/** Triggered when the video is waiting for more data to continue playing */
onWaiting?: (event: Event) => void;

/** Triggered when the video enters or exits full screen mode */
onFullScreenChange?: (event: Event) => void;

/** Sets the volume level; 'level' is the volume level, 'id' is an identifier for the volume change request to avoid caching, you can use uuid() to generate a random value. The default value is 0.5.*/
volume?: { level: number; id: number };

/** Seeks to a specified time in the video; 'time' is the time in seconds, 'id' is an identifier for the seek request to avoid caching, you can use uuid() to generate a random value. */
seekTo?: { time: number; id: number };

/** Initiates video playback when set to true */
play?: boolean;

/** Pauses video playback when set to true */
pause?: boolean;

/** Displays the video to fullscreen when set to true */
fullscreen?: boolean;

/* Set true to overide the default Livepeer Player aspect ratio sizing and have the Video fill up the custom width and height styled in the parent div. */
fillWidthHeight?: boolean;

/* Set true to completely hide the Livepeer Player controls. */
customControls?: boolean;

/* A call back function to receive Lens publication data associated with the video data. */
onLensVideoData?: (
    data: Post | Mirror | Comment | Quote,
    error: ApolloError | undefined,
  ) => void;

/* Lens profile address of the player signed in on the App. Only required in onLensVideoData function is to be used. */
playerProfile?: string;

/* Custom CSS styles class to override default LivePeer Player styling. */
styles?: React.CSSProperties;