Skip to content

Firefox fixes: slow video loading and video player highlight - #4246

Merged
FireMasterK merged 4 commits into
TeamPiped:masterfrom
t6fb3m59:upstream-pr-firefox
May 31, 2026
Merged

Firefox fixes: slow video loading and video player highlight #4246
FireMasterK merged 4 commits into
TeamPiped:masterfrom
t6fb3m59:upstream-pr-firefox

Conversation

@t6fb3m59

@t6fb3m59 t6fb3m59 commented May 31, 2026

Copy link
Copy Markdown

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

    • Improved media capability detection on Firefox to provide more accurate playback support and reduce false negatives for some formats.
  • Style

    • Removed the browser’s default focus outline on the video player for a cleaner keyboard-focus appearance.

@coderabbitai

coderabbitai Bot commented May 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a06b491b-a592-453a-8778-d0c164a3edb3

📥 Commits

Reviewing files that changed from the base of the PR and between ce21d00 and 3b7b40b.

📒 Files selected for processing (3)
  • src/components/VideoPlayer.vue
  • src/main.js
  • src/utils/firefoxMediaCapabilitiesFix.js
✅ Files skipped from review due to trivial changes (1)
  • src/components/VideoPlayer.vue
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/main.js
  • src/utils/firefoxMediaCapabilitiesFix.js

📝 Walkthrough

Walkthrough

Adds 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.

Changes

Firefox Media Capabilities Workaround

Layer / File(s) Summary
Firefox media capabilities shim and initialization
src/utils/firefoxMediaCapabilitiesFix.js, src/main.js
Installs a Gecko-only wrapper for navigator.mediaCapabilities.decodingInfo that short-circuits media-source (no DRM) queries by checking MediaSource.isTypeSupported with caching and returns synthesized supported/smooth/powerEfficient flags; all other calls fall back to the original API. The shim is imported at app startup.

Video Player Focus Styling

Layer / File(s) Summary
Video player focus outline suppression
src/components/VideoPlayer.vue
CSS rules added to target video.shaka-video:focus and video[data-shaka-player]:focus, applying outline: none !important to remove the browser's default focus outline on the Shaka video element.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

  • #4238: Implements the same Gecko-only navigator.mediaCapabilities.decodingInfo shim using MediaSource.isTypeSupported with caching to avoid expensive native calls on Firefox.

Poem

🐰
A nimble shim for Gecko's maze,
Cached checks speed the playback phase,
Quieted rings on the video face,
Smooth hops across each media case,
A rabbit's cheer for cleaner plays.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly summarizes the two main changes: Firefox-specific fixes for slow video loading (decodingInfo shim) and video player focus outline suppression.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/VideoPlayer.vue (1)

983-986: ⚡ Quick win

Consider using :focus-visible for 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

📥 Commits

Reviewing files that changed from the base of the PR and between da7ab35 and 39f201e.

📒 Files selected for processing (3)
  • src/components/VideoPlayer.vue
  • src/main.js
  • src/utils/firefoxMediaCapabilitiesFix.js

LogicalKarma and others added 4 commits May 31, 2026 21:25
…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
@t6fb3m59
t6fb3m59 force-pushed the upstream-pr-firefox branch from ce21d00 to 3b7b40b Compare May 31, 2026 18:26
@FireMasterK
FireMasterK enabled auto-merge May 31, 2026 18:27
@FireMasterK
FireMasterK merged commit 7714f10 into TeamPiped:master May 31, 2026
5 checks passed
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.

2 participants