Skip to content

feat(player): add Audio-Only mode with static thumbnail overlay (#4077)#4111

Open
Monu01123 wants to merge 1 commit into
code-charity:masterfrom
Monu01123:feature/audio-only-mode-4077
Open

feat(player): add Audio-Only mode with static thumbnail overlay (#4077)#4111
Monu01123 wants to merge 1 commit into
code-charity:masterfrom
Monu01123:feature/audio-only-mode-4077

Conversation

@Monu01123

Copy link
Copy Markdown

Summary

Resolves #4077

Adds an Audio-Only Mode to Improve YouTube! that hides the video stream and displays a clean static album art / thumbnail overlay while listening. This dramatically reduces CPU/GPU frame decoding overhead and saves >99% bandwidth by switching to the lowest video bitrate (tiny / 144p).


Features Implemented

  1. Player Controls Toggle Button (#it-audio-only-button)

    • Added a quick-toggle headphones button directly to the YouTube player controls bar alongside the repeat and screenshot buttons.
    • Allows users to switch seamlessly between video and audio-only modes without refreshing the page.
  2. Static Album Art Overlay (#it-audio-only-overlay)

    • Replaces the video rendering area with a high-resolution thumbnail / album art container layered over a smooth, blurred background.
    • Displays track title, channel/artist name, and an 🎧 Audio-Only Mode badge.
    • Styled with pointer-events: none; so all standard YouTube player interactions (play/pause clicks, double-click for fullscreen, scrubber bar dragging) function naturally.
  3. CPU, GPU & Bandwidth Optimization

    • CPU/GPU: Sets opacity: 0 !important; visibility: hidden !important; on the <video> element, signaling the browser rendering engine to skip video frame decoding and compositing during every vblank.
    • Bandwidth: Automatically forces the player quality to tiny (144p / ~30 kbps) when Audio-Only mode is enabled. Restores the user's previous quality preference when disabled.
  4. Full Playlist Support

    • Hooked into YouTube SPA navigation events (yt-navigate-finish and yt-page-data-updated).
    • When listening to playlists or albums, track transitions automatically maintain the audio-only state and dynamically update the album art and track metadata.
  5. Optional Auto-Switch for Music Videos

    • Implemented intelligent music video detection (ImprovedTube.isMusicVideo()) checking meta[itemprop=genre], microformat renderer schemas, and artist channel identifiers (VEVO / - Topic).
    • Added an optional menu toggle (Auto-switch for music category) to automatically switch to Audio-Only mode whenever a music video is played.

UI Settings & Localization

  • Added toggle switches under Player -> Settings and Player -> Buttons.
  • Added English localization strings (audioOnlyMode, audioOnlyButton, autoSwitchForMusic) to _locales/en/messages.json.

Verification & Testing

  • ✔ Verified toggle button appearance and state persistence across page navigation.
  • ✔ Verified network bandwidth drop when switching to tiny quality.
  • ✔ Verified clean UI layout in standard, cinema, and fullscreen modes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Audio-only mode (hide video, listen only)

1 participant