v3: added localization, use global player for uploaded audio/video files

src/components/GlobalPlayer.tsx

@@ -1,10 +1,23 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { PlayerContext } from "../contexts/PlayerContext.ts";
+import { MediaPlayer } from "./MediaPlayer.tsx";
+
+function itemKey(item: { kind: string; embedUrl?: string; fileUrl?: string } | null) {
+  if (!item) return null;
+  return item.kind === "embed" ? item.embedUrl : item.fileUrl;
+}
 
 export function GlobalPlayer() {
-  const { current, stop } = useContext(PlayerContext);
+  const { current, stop, seekRef, toggleRef, onPlayStateChange, onTimeUpdate } =
+    useContext(PlayerContext);
   const ref = useRef<HTMLDivElement>(null);
   const [reduced, setReduced] = useState(false);
+  const [prevKey, setPrevKey] = useState(itemKey(current));
+
+  if (prevKey !== itemKey(current)) {
+    setPrevKey(itemKey(current));
+    if (current) setReduced(false);
+  }
 
   useEffect(() => {
     if (!current) {
@@ -33,23 +46,21 @@ export function GlobalPlayer() {
     };
   }, [current]);
 
-  useEffect(() => {
-    if (current) setReduced(false);
-  }, [current?.embedUrl]);
-
   if (!current) return null;
 
+  const typeClass = current.kind === "embed"
+    ? current.type
+    : current.mimeType.startsWith("video/") ? "file-video" : "file-audio";
+
+  const title = current.title ?? (current.kind === "embed" ? current.embedUrl : current.fileUrl);
+
   return (
     <div
-      className={`global-player global-player--${current.type}${
-        reduced ? " global-player--reduced" : ""
-      }`}
+      className={`global-player global-player--${typeClass}${reduced ? " global-player--reduced" : ""}`}
       ref={ref}
     >
       <div className="global-player-header">
-        <span className="global-player-title">
-          {current.title ?? current.embedUrl}
-        </span>
+        <span className="global-player-title">{title}</span>
         <button
           type="button"
           className="btn btn--ghost"
@@ -62,14 +73,32 @@ export function GlobalPlayer() {
         </button>
       </div>
       <div className="global-player-body">
-        <div className="global-player-iframe-wrap">
-          <iframe
-            src={current.embedUrl}
-            className={`global-player-iframe--${current.type}`}
-            allow="autoplay; encrypted-media"
-            allowFullScreen
-          />
-        </div>
+        {current.kind === "embed"
+          ? (
+            <div className="global-player-iframe-wrap">
+              <iframe
+                src={current.embedUrl}
+                className={`global-player-iframe--${current.type}`}
+                allow="autoplay; encrypted-media"
+                allowFullScreen
+              />
+            </div>
+          )
+          : (
+            <div className="global-player-media-wrap">
+              <MediaPlayer
+                key={current.fileUrl}
+                src={current.fileUrl}
+                kind={current.mimeType.startsWith("video/") ? "video" : "audio"}
+                mime={current.mimeType}
+                autoplay
+                onPlayStateChange={onPlayStateChange}
+                onTimeUpdate={onTimeUpdate}
+                seekRef={seekRef}
+                toggleRef={toggleRef}
+              />
+            </div>
+          )}
       </div>
     </div>
   );