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
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 44s
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
import { useContext, useEffect, useRef, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { PlayerContext } from "../contexts/PlayerContext.ts";
|
||||
import { PlayerContext, type PlayerItem } from "../contexts/PlayerContext.ts";
|
||||
import { MediaPlayer } from "./MediaPlayer.tsx";
|
||||
|
||||
type EmbedItem = Extract<PlayerItem, { kind: "embed" }>;
|
||||
|
||||
function itemKey(
|
||||
item: { kind: string; embedUrl?: string; fileUrl?: string } | null,
|
||||
) {
|
||||
@@ -10,6 +12,26 @@ function itemKey(
|
||||
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() {
|
||||
const {
|
||||
current,
|
||||
@@ -99,7 +121,7 @@ export function GlobalPlayer() {
|
||||
? (
|
||||
<div className="global-player-iframe-wrap">
|
||||
<iframe
|
||||
src={current.embedUrl}
|
||||
src={playbackUrl(current, autoplay)}
|
||||
className={`global-player-iframe--${current.type}`}
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
|
||||
Reference in New Issue
Block a user