From eb323a8ba859abd3d5fc2c716505ef940da76fb3 Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Sat, 22 Aug 2026 09:25:57 +0000
Subject: [PATCH] v3: try to autoplay media opened in global player

---
 src/components/GlobalPlayer.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/GlobalPlayer.tsx b/src/components/GlobalPlayer.tsx
index cf1d866..994e75d 100644
--- a/src/components/GlobalPlayer.tsx
+++ b/src/components/GlobalPlayer.tsx
@@ -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