feat: global media controls in sidebar

[pip-owl]

Summary

• Adds a Global Media Controls widget to the sidebar that displays now-playing info (title, artist, artwork) extracted from web pages and provides play/pause, skip track, and mute controls without switching tabs
• Uses a preload-based push approach (MutationObserver + contextBridge.executeInMainWorld()) to watch navigator.mediaSession metadata changes and send them to the main process via IPC — no polling from renderer
• Each media tab gets its own card in the sidebar; cards for the currently focused tab are hidden to avoid redundancy

Changes

Area	Files	What
Design	design/GLOBAL_MEDIA_CONTROLS.md	Feature design document (source of truth)
Shared types	tabs.ts, interfaces/browser/tabs.ts	Added mediaTitle, mediaArtist, mediaArtwork, mediaPlaybackState to TabData; added mediaPlayPause/mediaNextTrack/mediaPreviousTrack to FlowTabsAPI
Main process	tab.ts, tabs.ts (IPC), serialization.ts	Media metadata properties on Tab class, IPC handlers for control commands + metadata updates, serialization of new fields
Preload	index.ts	setupMediaSessionWatcher() with MutationObserver + setTimeout throttling + 3s fallback poll + play/pause event listeners; monkey-patches navigator.mediaSession.setActionHandler() to capture handler refs for skip track support; media control bridge methods
Renderer	global-media-controls.tsx (new), inner.tsx	GlobalMediaControls component with per-tab MediaCard components, AnimatePresence animations, active tab filtering

Key Design Decisions

• Preload push (not polling): MediaSession metadata is observed via MutationObserver + play/pause event listeners in the page context and pushed to main process via IPC, rather than polling with executeJavaScript
• Action handler monkey-patching: navigator.mediaSession.setActionHandler() is monkey-patched in the preload to capture handler references, allowing skip track/play/pause to call the page's actual handlers directly instead of dispatching fake keyboard events
• setTimeout over rAF: Uses setTimeout for debouncing because Chromium completely suspends requestAnimationFrame in background tabs (the exact use case for media controls)
• Media element as ground truth: Playback state is derived from <video>/<audio> element's .paused property, not navigator.mediaSession.playbackState (many sites never update the latter)
• Play/pause events sent immediately: Not debounced, for instant UI response when toggling playback

Notes

• Phase 3 (hardware media keys) was cancelled — Chromium/OS handles this natively
• Known TODO: MediaSession watcher currently only monitors the main frame, not iframes (e.g. YouTube embeds)

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ee1b7e91-48f0-4875-b080-f31d7cc1097a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}