Add unmute overlay for autoplayed muted videos

[zcesur]

When a video is autoplayed in a muted state, we should overlay a large muted icon on the video. Clicking this icon should unmute the video and remove the overlay.

Relevant files:

• assets/js/app.ts: VideoPlayer hook
• lib/algora_web/live/hero_component.ex: renders the video player on homepage
• lib/algora_web/live/player_component.ex: renders the video player on other pages

[zcesur]

/bounty $25

[algora-pbc[bot]]

💎 $25 bounty • Algora

Steps to solve:

1. Start working: Comment /attempt #102 with your implementation plan
2. Submit work: Create a pull request including /claim #102 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
🟢 @Mubashirshariq	Sep 19, 2024, 3:34:43 PM	WIP
🟢 @GauravBurande	Oct 10, 2024, 5:01:31 PM	#112
🟢 @Dibou8988	Oct 28, 2024, 11:24:00 AM	WIP
🟢 @Rushhaabhhh	Nov 24, 2024, 9:53:20 PM	WIP

[Mubashirshariq]

@zcesur can I get this assigned,then I will start working on this

[Mubashirshariq]

/attempt #102

Algora profile	Completed bounties	Tech	Active attempts	Options
@Mubashirshariq	3 bounties from 3 projects	JavaScript, TypeScript, HTML		Cancel attempt

[GauravBurande]

/attempt #102

Algora profile	Completed bounties	Tech	Active attempts	Options
@GauravBurande	1 bounty from 1 project	JavaScript, TypeScript, Python & more		Cancel attempt

[GauravBurande]

any feedback on the pull request: #112?

[algora-pbc[bot]]

💡 @GauravBurande submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[Dibou8988]

/attempt #102

Options

• Cancel my attempt

[shrahul520]

@zcesur can I get this assigned,then I will start working on this

[GauravBurande]

I've added a pull request #112, any updates?

[Rushhaabhhh]

/attempt #102

Implementation Plan :

1. State Tracking : Add a muted state in both HeroComponent and PlayerComponent.
2. Overlay Icon : Show a large muted icon overlay when the video is muted.
3. Click to Unmute : On click, unmute the video and remove the overlay.
4. JavaScript Hook : Handle the unmute action in the VideoPlayer hook and communicate the change to the backend.

Options

• Cancel my attempt