livepeer / ui-kit

Livepeer UI Kit: Video primitives for React
https://docs.livepeer.org/sdks/react/getting-started
MIT License
64 stars 28 forks source link

Player should error when content is token gated or inactive #167

Closed pglowacky closed 1 year ago

pglowacky commented 1 year ago

Currently, when the player is using an HLS URL that contains either content that has not begun yet or the user is not using a signed URL for token-gated content, the player will display an infinite spinner. This gives the impression that the content will begin shortly; when it doesn't, the user assumes that something has gone wrong.

An ideal solution looks like:

EDITED by @0xcadams:

Future iterations might include:

0xcadams commented 1 year ago

The problem is, we can't distinguish between "started" and "inactive" from the Player with only the playbackId. Unless we add additional info to the playback info endpoint, we will not be able to implement this cc @victorges

0xcadams commented 1 year ago

Related, here is the approach api.video takes

Screenshot 2022-11-30 at 3 56 42 PM
0xcadams commented 1 year ago

I think I was wrong on this, feedback from Victor let me know that this info is returned from the playback info endpoint here: https://github.com/livepeer/livepeer-com/blob/919536ffd76df4b6f81d8040e65e934284cbef28/packages/api/src/controllers/playback.ts#L16

pglowacky commented 1 year ago

@0xcadams Added a note above -- we should report via telemetry when users receive errors and what kind of errors they get.

pglowacky commented 1 year ago

@0xcadams Thinking about this more...is the player able to differentiate between livestreams and VOD assets? The error message "Stream is Offline" only applies to livestreams, so we'd want the error message to be different if we're unable to give a different experience between live and VOD.

0xcadams commented 1 year ago

Yes, we get a response including "live" | "vod" | "recording" from the backend, so we can distinguish

adamsoffer commented 1 year ago

Here are the "Offline" and "Private" view designs by Vadym.

https://www.figma.com/file/dgNNV2zARuwL0hizYqdJxl/UI?node-id=410%3A234&t=pUf3uCp9Gpfnw9t9-1