enhancement: use Vidstack instead of video.js

mazz commented 4 months ago

Vidstack is an up-and-coming JS-based web video player that has recently hit 1.0-RC and already far-outshines video.js as a web player.

https://www.vidstack.io/

zcesur commented 2 months ago

Does it support LL-HLS? I'm down to give it a try once #60 lands

mazz commented 2 months ago

Does it support LL-HLS? I'm down to give it a try once #60 lands

Yes, apparently it does.

https://www.vidstack.io/docs/player/core-concepts/loading#stream-type

it looks like you do

<MediaPlayer streamType="ll-live">

or

<MediaPlayer streamType="ll-live:dvr">

if you want dvr-like features like back-seeking.

zcesur commented 1 month ago

Adding a /bounty $100 if anyone wants to tackle this. To make sure the new player behaves like the current, we need to:

Use the appropriate provider based on video type (YouTube, HLS, MP4)
Autoplay all videos with sound on (except the ones with an analytics- prefix). Most browsers won't allow autoplay with sound so we should fallback to muted autoplay. More info here
Enable seeking for all video types including livestreams
Enable picture-in-picture (PiP) mode and fullscreen on rotation
Start videos at the specified timestamp if provided (via ?t=123 query param)

Relevant files:

assets/vendor/video.js: replace with a minimized Vidstack JavaScript build w/o framework
assets/js/app.ts: rewrite VideoPlayer hook to use the new player
lib/algora_web/live/player_component.ex: see params passed to the player

algora-pbc[bot] commented 1 month ago

~~## 💎 $100 bounty • Algora~~

~~### Steps to solve:~~ ~~1. Start working: Comment /attempt #45 with your implementation plan~~ ~~2. Submit work: Create a pull request including /claim #45 in the PR body to claim the bounty~~ ~~3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts~~

~~### ❗ Important guidelines:~~ ~~- To claim a bounty, you need to provide a short demo video of your changes in your pull request~~ ~~- If anything is unclear, ask for clarification before starting as this will help avoid potential rework~~ - For assistance or questions, join our Discord

~~Thank you for contributing to algora-io/tv!~~

~~Add a bounty • Share on socials~~

Attempt	Started (GMT+0)	Solution
🟢 @kaf-lamed-beyt	Sep 2, 2024, 4:51:35 AM	#84

kaf-lamed-beyt commented 1 month ago

hi @zcesur, I'd love to try this. Please assign me.

/attempt #45

Algora profile	Completed bounties	Tech	Active attempts	Options
@kaf-lamed-beyt	7 bounties from 3 projects	JavaScript, HTML, TypeScript & more		Cancel attempt

kaf-lamed-beyt commented 1 month ago

BTW @zcesur, any idea how i can see the changes I'm making to the player?

I followed the guide here. I've been able to do that successfully. Can I get any info on how to see the player in the browser?

zcesur commented 1 month ago

Hi @kaf-lamed-beyt, thanks for attempting and consider yourself assigned! (I'm away from my laptop rn)

To test the player, you can create a video by streaming into your local server via OBS. You can find your RTMP URL in your user settings

On Mon, Sep 2, 2024, 10:40 null (for now) @.***> wrote:

BTW @zcesur https://github.com/zcesur, any idea how i can see the changes I'm making to the player?

I followed the guide here https://github.com/algora-io/tv?tab=readme-ov-file#setting-up-the-project. I've been able to do that successfully. Can I get any info on how to see the player in the browser?

— Reply to this email directly, view it on GitHub https://github.com/algora-io/tv/issues/45#issuecomment-2324030576, or unsubscribe https://github.com/notifications/unsubscribe-auth/AECBOW4YMLDH3I3NO7YROXDZUQI5HAVCNFSM6AAAAABITTKQZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRUGAZTANJXGY . You are receiving this because you were mentioned.Message ID: @.***>

kaf-lamed-beyt commented 1 month ago

Ayy! Thank you, @zcesur!

I've installed OBS on my PC. But, I have no idea why it keeps failing to start up. Lemme make some findings and get back to this.

[EDIT]: I've fixed it now. I was missing a wayland plugin.

zcesur commented 1 month ago

Awesome, let me know if I can help with anything else!

kaf-lamed-beyt commented 1 month ago

Yes. If you're free now... can i DM you on discord?

zcesur commented 1 month ago

I'm heading out soon but I'll reply once I can, feel free to DM any time

kaf-lamed-beyt commented 1 month ago

Okay... sounds good!

I've somewhat been able to setup a RTMP server with nginx. I'm trying to see if it is possible to stream to my VLC player.

algora-pbc[bot] commented 1 month ago

💡 @kaf-lamed-beyt submitted a pull request that claims the bounty. You can visit your bounty board to reward.

algora-pbc[bot] commented 1 month ago

🎉🎈 @kaf-lamed-beyt has been awarded $100! 🎈🎊

algora-io / tv

enhancement: use Vidstack instead of video.js #45

Relevant files: