feat: Implement smart autoplay with click-to-unmute fallback and enhanced control icons#632
Conversation
Co-authored-by: rabilrbl <63334479+rabilrbl@users.noreply.github.com>
|
@copilot The implementation looks good. |
Co-authored-by: rabilrbl <63334479+rabilrbl@users.noreply.github.com>
Done! I've increased the control icons size from 24px to 28px in both HLS and DRM player files. The icons are now 17% larger and more visible on both mobile and desktop. This enhancement works alongside the unmute button feature to improve overall video player usability. Changes in commit d60b9f1:
Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot Can you also make muted autoplay to be smart? If possible, request the permission for the first time. |
…toplay is blocked Co-authored-by: rabilrbl <63334479+rabilrbl@users.noreply.github.com>
... I've implemented smart autoplay functionality that respects browser permissions! The video players now:
The implementation intelligently detects autoplay permissions by attempting unmuted playback first, then gracefully falling back to muted playback with the unmute button if needed. This provides the best user experience based on their browser settings. Technical details:
User experience:
Changes in commit 93f0306. Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot I'm seeing this error always in an alert box.
|
…ove autoplay timing Co-authored-by: rabilrbl <63334479+rabilrbl@users.noreply.github.com>
... Fixed the "Shaka Error code: undefined" issue! The problem was that error objects from video.play() failures don't always have a I've enhanced the error handling to:
The fix is in commit 40cfb34. All tests continue passing (80/80). Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements smart autoplay functionality with a click-to-unmute fallback and enhanced control icons for the JioTV Go video players. The implementation provides an intelligent autoplay system that attempts unmuted playback first and gracefully falls back to muted playback with an unmute button when browser policies restrict autoplay.
- Smart autoplay logic that respects browser autoplay permissions
- Click-to-unmute button overlay for muted autoplay scenarios
- Enhanced control icon sizing for better visibility
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| web/views/player_hls.html | Adds unmute button overlay styling, functionality, and increased control icon size for HLS player |
| web/views/player_drm.html | Adds identical unmute button overlay styling, functionality, and increased control icon size for DRM player |
| web/test/unmute-button.test.js | Comprehensive Jest tests for unmute button functionality and DOM structure validation |
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
|
|
||
| // Initial state | ||
| updateUnmuteButton(); | ||
|
|
There was a problem hiding this comment.
The smart autoplay implementation mentioned in the PR description is missing from the code. The current implementation only handles the unmute button but doesn't include the intelligent autoplay logic that attempts unmuted playback first and falls back to muted autoplay.
| // Smart autoplay: try unmuted, fallback to muted if blocked | |
| (async () => { | |
| try { | |
| video.muted = false; | |
| await video.play(); | |
| } catch (e) { | |
| // Autoplay with sound failed, try muted autoplay | |
| video.muted = true; | |
| try { | |
| await video.play(); | |
| } catch (err) { | |
| // Even muted autoplay failed; show unmute button and let user interact | |
| updateUnmuteButton(); | |
| console.warn("Autoplay failed:", err); | |
| } | |
| } | |
| })(); |
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
|
|
There was a problem hiding this comment.
The unmute button styling is duplicated between player_hls.html and player_drm.html. This CSS should be extracted to a shared stylesheet to avoid code duplication and ensure consistency.
| video.addEventListener("volumechange", updateUnmuteButton); | ||
|
|
||
| // Initial state | ||
| updateUnmuteButton(); |
There was a problem hiding this comment.
The unmute button functionality is duplicated between player_hls.html and player_drm.html. This JavaScript code should be extracted to a shared module to avoid code duplication and ensure consistent behavior.
| updateUnmuteButton(); | |
| setupUnmuteButton(video, unmuteBtn); |
This PR enhances the video player experience by implementing intelligent autoplay behavior that respects browser permissions, along with a click-to-unmute fallback and improved control visibility.
Smart Autoplay Implementation
The video players now intelligently handle autoplay based on browser permissions:
Click-to-Unmute Button
For cases where muted autoplay is required, provides users with an easy way to unmute:
rgb(234, 67, 53)) with smooth hover effectsEnhanced Control Icons
Improves visibility and usability of video player controls:
Technical Implementation
The implementation provides the optimal user experience based on individual browser settings while maintaining full backward compatibility for users with strict autoplay policies.
Before (muted autoplay with unmute button):
After (smart autoplay hides button when unmuted autoplay succeeds):
All tests continue to pass (80/80 tests passing).
Fixes #631.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.