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 { 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
|
||||||
|
|||||||
Reference in New Issue
Block a user