Skip to content

fix: default preferHls to true on Safari#4236

Open
johnpc wants to merge 5 commits into
TeamPiped:masterfrom
johnpc:fix/safari-prefer-hls-default
Open

fix: default preferHls to true on Safari#4236
johnpc wants to merge 5 commits into
TeamPiped:masterfrom
johnpc:fix/safari-prefer-hls-default

Conversation

@johnpc
Copy link
Copy Markdown
Contributor

@johnpc johnpc commented May 17, 2026

Problem

Safari users get error 3016 (Shaka Player VIDEO_ERROR / PIPELINE_ERROR_DECODE) when playing videos. This happens because:

  1. YouTube no longer provides HLS/DASH manifest URLs (both are null in the API response)
  2. The frontend generates a DASH manifest from individual streams
  3. Safari's MSE implementation has poor DASH support, causing playback to fail

Fix

Detect Safari via user agent and default preferHls to true instead of false. This makes Safari use HLS (which it supports natively) by default, while keeping DASH as the default for Chrome/Firefox where MSE works well.

Users can still override this in Preferences.

Testing

  • Safari 26.3 on macOS: videos now play without error
  • Chrome/Firefox: behavior unchanged (still uses DASH by default)
  • The preference toggle still works to override the default in either direction

Summary by CodeRabbit

  • Bug Fixes

    • Video playback now detects Safari and automatically prefers the most compatible streaming format (HLS vs DASH) for improved playback reliability.
  • Chores

    • CI workflows updated to use Node.js 22 and pin the package-manager action to a stable major version for more predictable, consistent builds.

Review Change Stack

Safari has poor DASH/MSE support, causing error 3016 (VIDEO_ERROR /
PIPELINE_ERROR_DECODE) when playing videos via generated DASH manifests.
Since Safari natively supports HLS, default preferHls to true on Safari
while keeping the existing default (false) for other browsers.

Users can still override this in preferences.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 17, 2026

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: 8269c205-d462-40f6-ba2b-e6976c71e7a6

📥 Commits

Reviewing files that changed from the base of the PR and between 2ec8e99 and 91289d5.

📒 Files selected for processing (1)
  • src/components/VideoPlayer.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/VideoPlayer.vue

📝 Walkthrough

Walkthrough

VideoPlayer now detects Safari via navigator.userAgent and uses that detection as the default for getPreferenceBoolean("preferHls", ...) in both the MSE/audioStreams and DASH fallback branches. CI workflows pin pnpm action to v10 and set actions/setup-node node-version to 22.

Changes

Safari-aware HLS preference defaulting

Layer / File(s) Summary
Safari detection and HLS preference defaults
src/components/VideoPlayer.vue
Adds isSafari derived from navigator.userAgent and uses it as the default argument to getPreferenceBoolean("preferHls", ...) in the MSE/audioStreams branch and the DASH fallback branch.

CI Node.js version pinning

Layer / File(s) Summary
Pin Node.js to v22 in workflows
.github/workflows/ci.yml, .github/workflows/reviewdog.yml
Set node-version: 22 in the actions/setup-node step for the build/publish and eslint jobs; pin pnpm/action version to 10 in CI.

Sequence Diagram

sequenceDiagram
  participant Browser
  participant VideoPlayer
  participant Preferences
  Browser->>VideoPlayer: loadVideo()
  VideoPlayer->>Browser: read navigator.userAgent (isSafari)
  VideoPlayer->>Preferences: getPreferenceBoolean("preferHls", isSafari)
  Preferences-->>VideoPlayer: preferHls value
  VideoPlayer->>VideoPlayer: select HLS or DASH playback path
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I sniff the user agent with care,
I favor HLS for Safari there,
CI pins Node to twenty-two,
Streams hop smooth and tests run true,
A tiny hop for streamingware.

🚥 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 pull request title directly aligns with the primary change: detecting Safari and defaulting preferHls to true on Safari browsers to fix video playback errors.
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.

pnpm@latest now requires Node.js v22.13+. Without an explicit
node-version, the runner uses its default which is too old.
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

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)

604-604: 💤 Low value

Consider adding a comment explaining the Safari detection logic.

The isSafari flag is used consistently in both places to intelligently default HLS preference based on browser detection. This is a good solution to the Safari DASH playback issue.

For future maintainability, consider adding a brief comment above line 590 explaining why Safari needs this special handling (e.g., "Safari has poor MSE/DASH support, default to native HLS playback").

📝 Optional: Add explanatory comment
 const MseSupport = window.MediaSource !== undefined || window.ManagedMediaSource !== undefined;
+// Safari has poor MSE/DASH support; detect it to default preferHls to true
+// Chrome includes "Safari" in UA for compatibility, so exclude "chrome" and "android"
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

Also applies to: 642-642

🤖 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` at line 604, Add a short explanatory comment
above the Safari detection and HLS preference checks (where isSafari and
getPreferenceBoolean("preferHls", isSafari) are used) stating that Safari has
limited MSE/DASH support so we default to native HLS playback; update both
occurrences that use isSafari (the HLS preference logic and the related
conditional at the other location) to include the same comment so future
maintainers understand why Safari is handled specially.
🤖 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`:
- Line 604: Add a short explanatory comment above the Safari detection and HLS
preference checks (where isSafari and getPreferenceBoolean("preferHls",
isSafari) are used) stating that Safari has limited MSE/DASH support so we
default to native HLS playback; update both occurrences that use isSafari (the
HLS preference logic and the related conditional at the other location) to
include the same comment so future maintainers understand why Safari is handled
specially.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b1e0273d-b427-4925-9e79-74013727d632

📥 Commits

Reviewing files that changed from the base of the PR and between da7ab35 and 676fd91.

📒 Files selected for processing (1)
  • src/components/VideoPlayer.vue

johnpc added 3 commits May 17, 2026 11:13
pnpm@latest now enforces onlyBuiltDependencies by default, causing
ERR_PNPM_IGNORED_BUILDS. Pin to version 10 for compatibility.
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

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

Inline comments:
In `@src/components/VideoPlayer.vue`:
- Line 643: The comment line in VideoPlayer.vue ("// Safari defaults to HLS due
to limited MSE/DASH support (see isSafari above).") is mis-indented and failing
Prettier; fix the indentation/spacing at that line to match project Prettier
rules (use four-space indent or run Prettier) so the line aligns with
surrounding code in the VideoPlayer component and the linter passes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b3ed73e9-49b9-4e23-94eb-6e714529f2ca

📥 Commits

Reviewing files that changed from the base of the PR and between d5bcc23 and 2ec8e99.

📒 Files selected for processing (3)
  • .github/workflows/ci.yml
  • .github/workflows/reviewdog.yml
  • src/components/VideoPlayer.vue
✅ Files skipped from review due to trivial changes (1)
  • .github/workflows/reviewdog.yml

Comment thread src/components/VideoPlayer.vue Outdated
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.

1 participant