v3: try to autoplay media opened in global player
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 44s

This commit is contained in:
khannurien
2026-08-22 09:25:57 +00:00
parent 89314b1b6e
commit eb323a8ba8

View File

@@ -1,8 +1,10 @@
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import { PlayerContext } from "../contexts/PlayerContext.ts"; import { PlayerContext, type PlayerItem } from "../contexts/PlayerContext.ts";
import { MediaPlayer } from "./MediaPlayer.tsx"; import { MediaPlayer } from "./MediaPlayer.tsx";
type EmbedItem = Extract<PlayerItem, { kind: "embed" }>;
function itemKey( function itemKey(
item: { kind: string; embedUrl?: string; fileUrl?: string } | null, item: { kind: string; embedUrl?: string; fileUrl?: string } | null,
) { ) {
@@ -10,6 +12,26 @@ function itemKey(
return item.kind === "embed" ? item.embedUrl : item.fileUrl; return item.kind === "embed" ? item.embedUrl : item.fileUrl;
} }
// The stored embedUrl is the canonical, non-playing form — it is also rendered
// outside the player, so the autoplay parameter is added here at playback time
// rather than baked into rich_content. Only a fresh play() sets autoplay: a
// session restored from localStorage has no user gesture behind it, so it stays
// paused, matching how MediaPlayer treats file items.
// Bandcamp's EmbeddedPlayer has no autoplay parameter, so it is left alone.
function playbackUrl(item: EmbedItem, autoplay: boolean) {
if (!autoplay) return item.embedUrl;
try {
const url = new URL(item.embedUrl);
if (item.type === "youtube") url.searchParams.set("autoplay", "1");
else if (item.type === "soundcloud") {
url.searchParams.set("auto_play", "true");
} else return item.embedUrl;
return url.toString();
} catch {
return item.embedUrl; // malformed stored URL — hand it to the iframe as-is
}
}
export function GlobalPlayer() { export function GlobalPlayer() {
const { const {
current, current,
@@ -99,7 +121,7 @@ export function GlobalPlayer() {
? ( ? (
<div className="global-player-iframe-wrap"> <div className="global-player-iframe-wrap">
<iframe <iframe
src={current.embedUrl} src={playbackUrl(current, autoplay)}
className={`global-player-iframe--${current.type}`} className={`global-player-iframe--${current.type}`}
allow="autoplay; encrypted-media" allow="autoplay; encrypted-media"
allowFullScreen allowFullScreen