Livepeer for JS 🧰

This could mean only documentation, but maybe some improvements will be necessary on the plugin logic so it's easier to use (ideally 1 function call).

Description

Added picture in picture mode to the Player (demo below)

#51

Additional Information

• [X] I read the contributing docs (if this is your first contribution)

Demo

https://user-images.githubusercontent.com/56798748/196104524-bea638a9-d148-4e0f-bc37-c5efb130e7b5.mov

Description

Added support for multiple files at once using useCreateAsset

Demo

https://user-images.githubusercontent.com/56798748/197220113-0cca4493-c7ce-4bd1-9e95-2f518c545299.mov

Description

Next.js 13 added Server Components, which allows components to be completely rendered on the server. To use useEffect/useState/browser APIs, any imported components must be marked with the use client directive. This makes it easy for users to use the Player and LivepeerConfig in a Server Component.

The metrics reporting url should be constructed according to this discord discussion

https://discord.com/channels/423160867534929930/1011290512419999895

Description

This is to increment the LivepeerProvider for the Studio API to also include a bunch of other APIs that are (currently) specific to Studio so not exposed as a generic interface on the provider interface. These are necessary to use the full power of the Studio API to build applications, and some of them actually need to be called from a proper backend with access to a full-powered API key as well.

Some of the changes include:

• Cleaning up internal fields from the schema (cc @adamsoffer helpful when we do the OpenAPI schema cleanup as well)
• Document all fields and reorganize them in the types
• Implement some Task awareness in Studio provider, including an easy way to wait for a task completion when starting them (e.g. upload or changing asset storage)
• Implement List and Delete APIs for assets and streams

Additional Information

• [x] I read the contributing docs (if this is your first contribution)

We currently support autoupload for IPFS CIDs - the backend supports Arweave and this should be added to the SDK

https://livepeerjs.org/react/Player#autourlupload

Description

Added automatic fetching/importing of IPFS URLs to the Player.

An IPFS v0 or v1 CID or URL (such as ipfs://<CID>, https://<CID>.ipfs.dweb.link/ or https://cloudflare-ipfs.com/ipfs/<CID>, but cannot be a directory) can be passed as the src or playbackID to the Player, and it will automatically detect if it is a valid CID and attempt to fetch the playback info for the CID. If the API does not have an Asset with the corresponding CID, the Player will automatically attempt to import the CID from IPFS, and then play the transcoded content back.

Description

Updated the metrics reporting url for the video player.

Additional Information

• I updated the base url as per discussion
• Updated the code that generates the final metrics reporting url
• Added a log in case it fails to generate a metrics reporting url
• Added unit tests

Story

As a user I want to be able to export a Player component from the @livepeer/react package so that I can stream videos using livepeer.js without having to install third party dependencies. Example: import { Player } from "@livepeer/react";

Task

• [ ] Move the VideoPlayer component out of the docs app and into react package.

Description

Added z-index to the default variant of the player. To evaluate how good is to force 3rd party devs to have a player with a fixed z-index.

Additional Information

https://user-images.githubusercontent.com/161903/199962175-b043b1f2-227a-4d49-a53a-e0adc6c300f7.mov

For more info: https://www.notion.so/livepeer/VOD-Stoner-Gating-6eb2f7d40d374b788a60e5d20ebb44f5#dfd648b8c7264c1ea17a084581e8feb2

But it should basically get the UACC from the API, generate the missing chain signatures (not provided by the SDK consumer), and call the corresponding Lit SDK methods.

For VOD token gating: https://www.notion.so/livepeer/VOD-Stoner-Gating-6eb2f7d40d374b788a60e5d20ebb44f5#a7dbe0dcca9443a2abf0281edeeb34b8

Spec as of writing this is:

POST /asset/... 
{ 
  "playbackPoliy": { 
    "type": "lit_signing_condition", // can be just "lit"
    "unifiedAccessControlConditions": {
      // As defined by Lit protocol
    }
    "resourceId": { // optional
      // As defined by Lit protocol
    }
  }
}

Description

Currently we experience a lot of issues on Safari with the native media element. We should move to use HLS.js to avoid these Safari-specific issues and simplify our Player implementation.

Continuation of ticket #167 where we added Stream Offline and Private Steam errors to the web/react player. Now we want to add it to React Native package too.