Firefox fixes: slow video loading and video player highlight - #4246
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds a Gecko-only shim that overrides navigator.mediaCapabilities.decodingInfo for media-source/non-DRM queries using MediaSource.isTypeSupported (memoized) and imports it at startup. Separately, CSS was added to suppress the UA focus outline on Shaka video elements. ChangesFirefox Media Capabilities Workaround
Video Player Focus Styling
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/VideoPlayer.vue (1)
983-986: ⚡ Quick winConsider using
:focus-visiblefor better keyboard accessibility.The current rule suppresses the focus outline for all focus events, including keyboard navigation. This removes visual feedback for keyboard users who tab to the video element. Modern browsers support
:focus-visible, which only shows outlines for keyboard focus, not click-driven focus:video.shaka-video:focus:not(:focus-visible), video[data-shaka-player]:focus:not(:focus-visible) { outline: none !important; }This would preserve the outline for keyboard users while suppressing it for mouse interactions, improving accessibility without the Firefox visual artifact.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/VideoPlayer.vue` around lines 983 - 986, Update the CSS selectors that currently target video.shaka-video:focus and video[data-shaka-player]:focus so they only remove the outline for non-keyboard focus; specifically replace those rules with selectors using :focus:not(:focus-visible) for both video.shaka-video and video[data-shaka-player] so keyboard users still see the focus outline while mouse/click focus is suppressed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/VideoPlayer.vue`:
- Around line 983-986: Update the CSS selectors that currently target
video.shaka-video:focus and video[data-shaka-player]:focus so they only remove
the outline for non-keyboard focus; specifically replace those rules with
selectors using :focus:not(:focus-visible) for both video.shaka-video and
video[data-shaka-player] so keyboard users still see the focus outline while
mouse/click focus is suppressed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0c0987c7-412a-4699-8c94-f3ca2389a0af
📒 Files selected for processing (3)
src/components/VideoPlayer.vuesrc/main.jssrc/utils/firefoxMediaCapabilitiesFix.js
…Info Firefox's navigator.mediaCapabilities.decodingInfo costs ~14 ms per call (out-of-process RDD decoder probe). Shaka Player calls it once per Variant in the DASH manifest while filtering supported variants, and YouTube manifests routinely have 1000+ variants, so player initialization stalls 15-20 s on Gecko-based browsers before the first SourceBuffer is added. Wrap decodingInfo to delegate "supported" checks to MediaSource.isTypeSupported (sub-ms on Firefox) with a per-MIME cache. DRM probes and non-media-source queries fall through to native. Wrapper is gated to Gecko UAs so Chromium and Safari are unaffected. Refs: shaka-project/shaka-player#4775 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
VideoPlayer calls videoEl.focus() on every seek-bar mouseup (existing upstream code, so hotkeys-js continues receiving keys). Firefox/Gecko draws the system :focus outline whenever a <video> element is focused; Chromium uses :focus-visible heuristics on media elements and doesn't render it for click-driven focus, which is why this is Gecko-only. Add a targeted CSS rule outside the Tailwind @layer so it wins the cascade against any layered author or vendor rule, and !important to override the UA focus ring. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ed perf - Replace shaka-player#4775 link (closed) with TeamPiped#4238 as the ongoing tracker. - Add measured rough per-call cost: Chromium ~0.1 ms vs Firefox ~20 ms. - Call out explicitly that this is a hack: forcing smooth/powerEfficient to true throws away signals Shaka would otherwise see. If anything in the player chain reads those fields (preferredDecodingAttributes is set, a downstream consumer ranks variants on power efficiency, or a Shaka upgrade changes filtering), Shaka will pick streams the device cannot decode in real time — frame drops, software-decode CPU spikes, battery drain. Today (Shaka 5.1, Piped default config) the fields are not read and the shim is harmless; revisit on every Shaka upgrade. Refs: TeamPiped#4238
Add the upstream Mozilla tracker bug for the slow decodingInfo path. Refs: https://bugzilla.mozilla.org/show_bug.cgi?id=2043895 TeamPiped#4238
ce21d00 to
3b7b40b
Compare
The code was written by Claude. The code itself and the source of information were verified by me.
1. decodingInfo fast-path on Firefox (a8fb96f + 39f201e)
A hack to keep video loading times low (documented in the comment). We should keep an eye on this as it may cause issues for Shaka in future updates. For now it seems harmless from what I could find.
Refs: #4238
2. Suppress Firefox blue :focus outline on <video> (d1763ff)
Clicking on Shaka UI elements causes the play to be highlighted. The fix is documented in its comment.
Summary by CodeRabbit
Bug Fixes
Style