From 4c93a51cc74077a436eb3dca7bd467d0c19211e9 Mon Sep 17 00:00:00 2001
From: codey <codey@code.ee>
Date: Fri, 27 Feb 2026 10:37:03 -0500
Subject: [PATCH] - Introduced a shared HLS configuration in `hlsConfig.ts` to
 standardize playback settings across players. - Implemented a one-shot live
 catch-up mechanism in `liveCatchup.ts` to enhance user experience during live
 streaming. - Created a global radio state management system in
 `radioState.ts` to maintain playback continuity and metadata across different
 components and tabs. - Bumped version 1.0 -> 1.1

---
 src/assets/styles/global.css              |    5 +-
 src/components/Footer.astro               |   39 +-
 src/components/MiniRadioPlayer.tsx        | 1120 ++++++++++++++++++
 src/components/Radio.tsx                  | 1249 +++++++++++++++------
 src/components/RandomMsg.tsx              |    6 +
 src/components/TRip/BreadcrumbNav.tsx     |    1 -
 src/components/TRip/MediaRequestForm.tsx  |  689 ++++++++++--
 src/components/TRip/RequestManagement.tsx |    4 +-
 src/config.ts                             |    2 +-
 src/layouts/Base.astro                    |    6 +-
 src/layouts/Nav.astro                     |    2 +-
 src/pages/TRip/index.astro                |    4 +-
 src/pages/TRip/requests.astro             |    3 +-
 src/utils/hlsConfig.ts                    |   38 +
 src/utils/liveCatchup.ts                  |  134 +++
 src/utils/radioState.ts                   |  577 ++++++++++
 16 files changed, 3449 insertions(+), 430 deletions(-)
 create mode 100644 src/components/MiniRadioPlayer.tsx
 create mode 100644 src/utils/hlsConfig.ts
 create mode 100644 src/utils/liveCatchup.ts
 create mode 100644 src/utils/radioState.ts

diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
index d8a4011..ab00084 100644
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -178,9 +178,8 @@ blockquote p:first-of-type::after {
   text-wrap: balance;
 }
 
-.hidden {
-  display: none;
-}
+/* Removed .hidden { display: none; } - Tailwind already provides this utility
+   and the custom rule was breaking responsive variants like sm:flex */
 
 [data-theme="dark"] .astro-code,
 [data-theme="dark"] .astro-code span {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index b9a63f2..ddbd3e6 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -21,8 +21,8 @@ const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
   {!whitelabel && <RandomMsg client:only="react" />}
   <div class="footer-version" data-build-time={buildTime} title={`Built: ${buildTime}`}>
     <span class="version-pill">
-      {envBadge && <span class="env-dot" title="Development build"></span>}
-      {!envBadge && <span class="version-dot"></span>}
+      {envBadge && <span class="env-dot api-status-dot" title="Development build"></span>}
+      {!envBadge && <span class="version-dot api-status-dot"></span>}
       <span class="version-text">{versionDisplay}:{buildNumber}</span>
       <span class="build-time-text" aria-hidden="true"></span>
     </span>
@@ -30,6 +30,34 @@ const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
 </div>
 
 <script>
+  function applyApiStatus(reachable) {
+    const dot = document.querySelector('.api-status-dot');
+    if (!dot) return;
+    dot.classList.toggle('api-offline', reachable === false);
+  }
+
+  function bindApiStatusListener() {
+    const guard = window as any;
+    if (guard.__footerApiStatusBound) return;
+    guard.__footerApiStatusBound = true;
+
+    // Restore last known state across Astro client navigation
+    try {
+      const cached = sessionStorage.getItem('api-reachable');
+      if (cached === '0') applyApiStatus(false);
+      if (cached === '1') applyApiStatus(true);
+    } catch {}
+
+    window.addEventListener('api:status', (event) => {
+      const customEvent = event as CustomEvent<{ reachable?: boolean }>;
+      const reachable = Boolean(customEvent?.detail?.reachable);
+      applyApiStatus(reachable);
+      try {
+        sessionStorage.setItem('api-reachable', reachable ? '1' : '0');
+      } catch {}
+    });
+  }
+
   function initBuildTooltip() {
     const el = document.querySelector('.footer-version[data-build-time]');
     if (!el) return;
@@ -59,6 +87,8 @@ const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
       });
     }
   }
+
+  bindApiStatusListener();
   
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initBuildTooltip);
@@ -144,6 +174,11 @@ const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
     box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
   }
 
+  .api-status-dot.api-offline {
+    background: #ef4444 !important;
+    box-shadow: 0 0 4px rgba(239, 68, 68, 0.45) !important;
+  }
+
   .env-dot {
     width: 6px;
     height: 6px;
diff --git a/src/components/MiniRadioPlayer.tsx b/src/components/MiniRadioPlayer.tsx
new file mode 100644
index 0000000..f72488f
--- /dev/null
+++ b/src/components/MiniRadioPlayer.tsx
@@ -0,0 +1,1120 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import type Hls from "hls.js";
+import { API_URL, metaData } from "@/config";
+import { authFetch } from "@/utils/authFetch";
+import { SHARED_HLS_CONFIG } from "@/utils/hlsConfig";
+import { installOneShotLiveCatchup, triggerOneShotLiveCatchup } from "@/utils/liveCatchup";
+import {
+  getGlobalRadioState,
+  getOrCreateAudio,
+  getOrCreateVideo,
+  updateGlobalStation,
+  updateGlobalQuality,
+  updateGlobalPlayingState,
+  requestGlobalPauseAll,
+  requestOwnerTabResume,
+  updateGlobalTrackInfo,
+  destroyGlobalHls,
+  setGlobalHls,
+  setGlobalQualityLevels,
+  onRadioEvent,
+  emitRadioEvent,
+  RADIO_EVENTS,
+  isVideoStation,
+  getStreamUrl,
+  type QualityLevel,
+} from "@/utils/radioState";
+
+const STATIONS: Record<string, { label: string; color: string }> = {
+  main: { label: "Main", color: "#6366f1" },
+  rock: { label: "Rock", color: "#ef4444" },
+  rap: { label: "Rap", color: "#f59e0b" },
+  electronic: { label: "Electronic", color: "#06b6d4" },
+  pop: { label: "Pop", color: "#ec4899" },
+  videos: { label: "Videos", color: "#8b5cf6" },
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// MARQUEE COMPONENT - for scrolling long text
+// ═══════════════════════════════════════════════════════════════════════════════
+function MarqueeText({ text, className = "" }: { text: string; className?: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [shouldScroll, setShouldScroll] = useState(false);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (containerRef.current && textRef.current) {
+        const containerWidth = containerRef.current.offsetWidth;
+        const textWidth = textRef.current.scrollWidth;
+        setShouldScroll(textWidth > containerWidth);
+      }
+    };
+
+    checkOverflow();
+    // Re-check when text changes
+    const timeout = setTimeout(checkOverflow, 100);
+    window.addEventListener('resize', checkOverflow);
+    return () => {
+      window.removeEventListener('resize', checkOverflow);
+      clearTimeout(timeout);
+    };
+  }, [text]);
+
+  return (
+    <div ref={containerRef} className={`overflow-hidden relative w-full ${className}`}>
+      <span
+        ref={textRef}
+        className={`inline-block whitespace-nowrap ${shouldScroll ? 'animate-marquee' : ''}`}
+        style={shouldScroll ? { paddingRight: '2rem' } : undefined}
+      >
+        {text}
+        {shouldScroll && <span className="pl-8">{text}</span>}
+      </span>
+      <style>{`
+        @keyframes marquee {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+        .animate-marquee {
+          animation: marquee 12s linear infinite;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ICONS
+// ═══════════════════════════════════════════════════════════════════════════════
+const PlayIcon = () => (
+  <svg viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+    <path d="M8 5v14l11-7z" />
+  </svg>
+);
+
+const PauseIcon = () => (
+  <svg viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+  </svg>
+);
+
+const ExpandIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-4 h-4">
+    <path d="M7 17L17 7M17 7H7M17 7V17" />
+  </svg>
+);
+
+const ChevronUpIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-4 h-4">
+    <path d="M18 15l-6-6-6 6" />
+  </svg>
+);
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+export default function MiniRadioPlayer() {
+  const [station, setStation] = useState<string>(() => {
+    if (typeof window === "undefined") return "main";
+    return getGlobalRadioState().station;
+  });
+  const [isPlaying, setIsPlaying] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return getGlobalRadioState().isPlaying;
+  });
+  const [isReady, setIsReady] = useState(false);
+  const [trackTitle, setTrackTitle] = useState("");
+  const [trackArtist, setTrackArtist] = useState("");
+  const [trackAlbum, setTrackAlbum] = useState("");
+  const [coverArt, setCoverArt] = useState("/images/radio_art_default.jpg");
+  const [nextTrack, setNextTrack] = useState<{ artist: string; song: string } | null>(null);
+  const [qualityLevels, setQualityLevels] = useState<QualityLevel[]>([]);
+  const [selectedQuality, setSelectedQuality] = useState<number>(-1);
+  const [isHidden, setIsHidden] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return localStorage.getItem("miniPlayerHidden") === "true";
+  });
+  const [stationDropdownOpen, setStationDropdownOpen] = useState(false);
+  const [qualityDropdownOpen, setQualityDropdownOpen] = useState(false);
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [trackDuration, setTrackDuration] = useState(0);
+  const [hiddenByMobileNav, setHiddenByMobileNav] = useState(false);
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const stationDropdownRef = useRef<HTMLDivElement | null>(null);
+  const qualityDropdownRef = useRef<HTMLDivElement | null>(null);
+  const stationRef = useRef(station);
+  const stationChangeSeqRef = useRef(0);
+  const trackUuidRef = useRef<string | null>(null);
+  const originalTitleRef = useRef<string>("");
+  const baseTrackElapsed = useRef<number>(0);
+  const lastUpdateTimestamp = useRef<number>(Date.now());
+  const playerRef = useRef<HTMLDivElement | null>(null);
+
+  // Store original page title on mount
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      originalTitleRef.current = document.title;
+    }
+  }, []);
+
+  // Update page title when playing
+  const updatePageTitle = useCallback((artist: string, title: string, stationName: string) => {
+    if (typeof window === "undefined") return;
+    document.title = `${metaData.title} - Radio - ${artist} - ${title} [${stationName}]`;
+  }, []);
+
+  const restorePageTitle = useCallback(() => {
+    if (typeof window === "undefined") return;
+    // Restore to site default, not the captured title (in case user navigated)
+    document.title = metaData.title;
+  }, []);
+
+  // Manage page title based on playing state
+  useEffect(() => {
+    if (isPlaying && trackArtist && trackTitle && trackTitle !== "serious.FM" && trackTitle !== "Loading...") {
+      updatePageTitle(trackArtist, trackTitle, STATIONS[station]?.label || station);
+    } else if (!isPlaying) {
+      restorePageTitle();
+    }
+  }, [isPlaying, trackArtist, trackTitle, station, updatePageTitle, restorePageTitle]);
+
+  // Restore title when hidden
+  useEffect(() => {
+    if (isHidden) {
+      restorePageTitle();
+    }
+  }, [isHidden, restorePageTitle]);
+
+  // Auto-hide mini player when mobile nav is open, restore on close
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    
+    const mobileMenu = document.getElementById("mobile-menu");
+    if (!mobileMenu) return;
+    
+    const wasExpandedRef = { current: false };
+    
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          const isNavOpen = mobileMenu.classList.contains("open");
+          
+          if (isNavOpen && !isHidden) {
+            // Nav opened and player is visible - hide it
+            wasExpandedRef.current = true;
+            setHiddenByMobileNav(true);
+            setIsHidden(true);
+          } else if (!isNavOpen && hiddenByMobileNav) {
+            // Nav closed and we had hidden the player - restore it
+            setHiddenByMobileNav(false);
+            if (wasExpandedRef.current) {
+              setIsHidden(false);
+              wasExpandedRef.current = false;
+            }
+          }
+        }
+      }
+    });
+    
+    observer.observe(mobileMenu, { attributes: true });
+    
+    return () => observer.disconnect();
+  }, [isHidden, hiddenByMobileNav]);
+
+  // Keep ref in sync
+  useEffect(() => {
+    stationRef.current = station;
+  }, [station]);
+
+  // Keep global video element mounted offscreen outside /radio so playback persists across navigation.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const parkVideoOffscreen = () => {
+      if (!isVideoStation(stationRef.current)) return;
+      const video = getOrCreateVideo();
+      video.style.position = "fixed";
+      video.style.left = "-9999px";
+      video.style.top = "-9999px";
+      video.style.width = "1px";
+      video.style.height = "1px";
+      video.style.opacity = "0";
+      video.style.pointerEvents = "none";
+      video.setAttribute("aria-hidden", "true");
+      if (video.parentNode !== document.body) {
+        document.body.appendChild(video);
+      }
+    };
+
+    const syncVideoMount = () => {
+      if (!isVideoStation(stationRef.current)) return;
+
+      // Let the full radio page own/render the video element on /radio.
+      if (window.location.pathname === "/radio") return;
+
+      const video = getOrCreateVideo();
+
+      // Keep it in DOM but invisible so browsers don't suspend detached element playback.
+      video.style.position = "fixed";
+      video.style.left = "-9999px";
+      video.style.top = "-9999px";
+      video.style.width = "1px";
+      video.style.height = "1px";
+      video.style.opacity = "0";
+      video.style.pointerEvents = "none";
+      video.setAttribute("aria-hidden", "true");
+
+      if (video.parentNode !== document.body) {
+        document.body.appendChild(video);
+      }
+    };
+
+    syncVideoMount();
+    // Ensure the video element is detached from page-local DOM before Astro swaps pages.
+    document.addEventListener("astro:before-swap", parkVideoOffscreen as EventListener);
+    document.addEventListener("astro:page-load", syncVideoMount as EventListener);
+    window.addEventListener("popstate", syncVideoMount);
+
+    return () => {
+      // Keep playing across unmount when leaving the current page.
+      parkVideoOffscreen();
+      document.removeEventListener("astro:before-swap", parkVideoOffscreen as EventListener);
+      document.removeEventListener("astro:page-load", syncVideoMount as EventListener);
+      window.removeEventListener("popstate", syncVideoMount);
+    };
+  }, [station]);
+
+  // Update elapsed time smoothly (interpolation between WebSocket updates)
+  // Continue updating even when paused to reflect current stream position
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const now = Date.now();
+      const deltaSec = (now - lastUpdateTimestamp.current) / 1000;
+      let liveElapsed = (typeof baseTrackElapsed.current === 'number' && !isNaN(baseTrackElapsed.current) ? baseTrackElapsed.current : 0) + deltaSec;
+      if (trackDuration && liveElapsed > trackDuration) liveElapsed = trackDuration;
+      setElapsedTime(liveElapsed);
+    }, 200);
+    return () => clearInterval(intervalId);
+  }, [trackDuration]);
+
+  // Helper to format time as MM:SS
+  const formatTime = (seconds: number): string => {
+    if (!seconds || isNaN(seconds) || seconds < 0) return "00:00";
+    const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
+    const secs = String(Math.floor(seconds % 60)).padStart(2, "0");
+    return `${mins}:${secs}`;
+  };
+
+  const cleanupWs = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.onclose = null;
+      wsRef.current.onerror = null;
+      wsRef.current.onmessage = null;
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+  }, []);
+
+  const fetchNextTrack = useCallback(async (forStation: string) => {
+    try {
+      const response = await authFetch(`${API_URL}/radio/get_queue`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ station: forStation, start: 0, length: 1, search: "" }),
+      });
+      const data = await response.json();
+      if (data.items && data.items.length > 0) {
+        setNextTrack({ artist: data.items[0].artist, song: data.items[0].song });
+      } else {
+        setNextTrack(null);
+      }
+    } catch {
+      setNextTrack(null);
+    }
+  }, []);
+
+  const connectMetadata = useCallback((nextStation: string) => {
+    cleanupWs();
+    const wsUrl = `${API_URL.replace(/^https?:/, "wss:")}/radio/ws/${nextStation}`;
+    const ws = new WebSocket(wsUrl);
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data?.type === "pong" || data?.type === "ping" || data?.type === "status" || data?.type === "error") return;
+
+        const payload = data?.data || data;
+        const song = payload?.song || payload?.title;
+        const artist = payload?.artist;
+        const album = payload?.album;
+        const uuid = payload?.uuid;
+        const elapsed = payload?.elapsed;
+        const duration = payload?.duration;
+
+        // Update duration/elapsed regardless of track change
+        if (typeof duration === 'number' && !isNaN(duration)) {
+          setTrackDuration(duration);
+        }
+        if (typeof elapsed === 'number' && !isNaN(elapsed)) {
+          baseTrackElapsed.current = elapsed;
+          lastUpdateTimestamp.current = Date.now();
+          setElapsedTime(elapsed);
+        }
+
+        if (song || artist) {
+          const title = song || "Unknown Title";
+          const artistName = artist || "Unknown Artist";
+          const albumName = album || "";
+          
+          setTrackTitle(title);
+          setTrackArtist(artistName);
+          setTrackAlbum(albumName);
+          
+          // Update cover art and next track on track change
+          if (uuid && uuid !== trackUuidRef.current) {
+            trackUuidRef.current = uuid;
+            const newCoverArt = `${API_URL}/radio/album_art?station=${stationRef.current}&_=${Date.now()}`;
+            setCoverArt(newCoverArt);
+            fetchNextTrack(stationRef.current);
+
+            // Apply subtle one-shot catch-up on track transition (audio stations only).
+            if (!isVideoStation(stationRef.current)) {
+              const state = getGlobalRadioState();
+              triggerOneShotLiveCatchup(state.hls, getOrCreateAudio());
+            }
+            
+            // Reset elapsed time on track change
+            baseTrackElapsed.current = typeof elapsed === 'number' && !isNaN(elapsed) ? elapsed : 0;
+            lastUpdateTimestamp.current = Date.now();
+            setElapsedTime(baseTrackElapsed.current);
+            
+            // Update global state for seamless handoff to full Radio page
+            updateGlobalTrackInfo({
+              title,
+              artist: artistName,
+              album: albumName,
+              coverArt: newCoverArt,
+              uuid,
+            });
+          }
+        }
+      } catch {
+        // no-op
+      }
+    };
+
+    ws.onerror = () => {};
+    ws.onclose = () => {
+      // Reconnect after a delay
+      setTimeout(() => {
+        if (stationRef.current === nextStation) {
+          connectMetadata(nextStation);
+        }
+      }, 3000);
+    };
+
+    wsRef.current = ws;
+  }, [cleanupWs, fetchNextTrack]);
+
+  const initStream = useCallback(async (nextStation: string): Promise<boolean> => {
+    const isVideo = isVideoStation(nextStation);
+    const media = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+    const state = getGlobalRadioState();
+
+    // Ensure no carry-over speed adjustment from previous HLS catch-up.
+    media.playbackRate = 1;
+
+    // Clean up old HLS
+    destroyGlobalHls();
+
+    const streamUrl = getStreamUrl(nextStation);
+
+    const { default: Hls } = await import("hls.js");
+
+    if (Hls.isSupported()) {
+      const hls = new Hls(SHARED_HLS_CONFIG);
+
+      setGlobalHls(hls);
+      hls.attachMedia(media);
+      installOneShotLiveCatchup(hls, media);
+
+      return new Promise((resolve) => {
+        hls.on(Hls.Events.MEDIA_ATTACHED, () => hls.loadSource(streamUrl));
+        hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+          const levelsRaw = data?.levels ?? [];
+          
+          // For video stations, use video quality labels
+          if (isVideo) {
+            const levels: QualityLevel[] = levelsRaw.map((level: any, index: number) => {
+              const height = level.height || 0;
+              const name = height ? `${height}p` : `Level ${index + 1}`;
+              return { index, bitrate: level.bitrate || 0, name, isLossless: false };
+            });
+            levels.sort((a, b) => b.bitrate - a.bitrate);
+            setQualityLevels(levels);
+            setGlobalQualityLevels(levels);
+            setSelectedQuality(-1); // Auto for video
+          } else {
+            const standards = [64, 96, 128, 160, 192, 256, 320];
+            
+            const levels: QualityLevel[] = levelsRaw.map((level: any, index: number) => {
+              const kbps = (level.bitrate || 0) / 1000;
+              const codec = level.audioCodec || level.codecs || "";
+              const isLossless = codec.toLowerCase().includes("flac") || codec.toLowerCase().includes("alac") || kbps > 500;
+              let name: string;
+              if (isLossless) {
+                name = "Lossless";
+              } else if (level.bitrate) {
+                const friendly = standards.reduce((prev, curr) => Math.abs(curr - kbps) < Math.abs(prev - kbps) ? curr : prev);
+                name = `${friendly}k`;
+              } else {
+                name = `Level ${index + 1}`;
+              }
+              return { index, bitrate: level.bitrate || 0, name, isLossless };
+            });
+
+            levels.sort((a, b) => {
+              if (a.isLossless && !b.isLossless) return -1;
+              if (!a.isLossless && b.isLossless) return 1;
+              return b.bitrate - a.bitrate;
+            });
+
+            setQualityLevels(levels);
+            setGlobalQualityLevels(levels);
+
+            // Apply saved quality
+            const savedQuality = state.qualityLevel;
+            if (savedQuality !== -1 && levels.some((l) => l.index === savedQuality)) {
+              hls.currentLevel = savedQuality;
+              setSelectedQuality(savedQuality);
+            } else {
+              setSelectedQuality(-1);
+            }
+          }
+
+          setIsReady(true);
+          resolve(true);
+        });
+
+        hls.on(Hls.Events.ERROR, (_e, errData) => {
+          if (!errData?.fatal) return;
+          if (errData.type === Hls.ErrorTypes.MEDIA_ERROR) {
+            try {
+              hls.recoverMediaError();
+              return;
+            } catch {
+              // fallthrough
+            }
+          }
+          destroyGlobalHls();
+          setIsReady(false);
+          resolve(false);
+        });
+      });
+    }
+
+    // Fallback for Safari
+    if (media.canPlayType("application/vnd.apple.mpegurl")) {
+      media.src = streamUrl;
+      media.load();
+      setQualityLevels([]);
+      setSelectedQuality(-1);
+      setIsReady(true);
+      return true;
+    }
+
+    return false;
+  }, []);
+
+  const handleQualityChange = useCallback((levelIndex: number) => {
+    const state = getGlobalRadioState();
+    setSelectedQuality(levelIndex);
+    updateGlobalQuality(levelIndex);
+    if (state.hls) {
+      state.hls.currentLevel = levelIndex;
+    }
+    emitRadioEvent(RADIO_EVENTS.QUALITY_CHANGED, { quality: levelIndex });
+  }, []);
+
+  const handlePlayPause = useCallback(async () => {
+    const isVideo = isVideoStation(station);
+    const media = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+    const state = getGlobalRadioState();
+    const actuallyPlaying = !media.paused && !media.ended;
+
+    if (actuallyPlaying) {
+      media.pause();
+      setIsPlaying(false);
+      updateGlobalPlayingState(false);
+      emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: false });
+      return;
+    }
+
+    // Passive tab case: another tab is currently playing. Pause globally instead of starting local playback.
+    if (state.isPlaying) {
+      requestGlobalPauseAll();
+      setIsPlaying(false);
+      return;
+    }
+
+    // If playback is currently stopped but another tab still owns the media session,
+    // ask that owner tab to resume so video does not remain frozen there.
+    if (requestOwnerTabResume()) {
+      setIsPlaying(true);
+      return;
+    }
+
+    // Initialize stream if needed
+    if (!isReady || !state.hls) {
+      const ok = await initStream(station);
+      if (!ok) {
+        setTrackTitle("Offline");
+        setTrackArtist("Stream unavailable");
+        setIsPlaying(false);
+        updateGlobalPlayingState(false);
+        return;
+      }
+    }
+
+    try {
+      media.playbackRate = 1;
+      await media.play();
+      setIsPlaying(true);
+      updateGlobalPlayingState(true);
+      emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
+    } catch {
+      setIsPlaying(false);
+      updateGlobalPlayingState(false);
+    }
+  }, [isReady, station, initStream]);
+
+  const handleStationChange = useCallback(async (newStation: string) => {
+    // Pause current media (audio or video)
+    const wasVideo = isVideoStation(station);
+    const oldMedia = wasVideo ? getOrCreateVideo() : getOrCreateAudio();
+    const wasPlaying = !oldMedia.paused && !oldMedia.ended;
+    const seq = ++stationChangeSeqRef.current;
+
+    // Stop current playback immediately
+    oldMedia.pause();
+    setIsPlaying(false);
+    updateGlobalPlayingState(false);
+
+    // Update state
+    setStation(newStation);
+    updateGlobalStation(newStation);
+
+    // Reset track info
+    const isVideo = isVideoStation(newStation);
+    setTrackTitle("");
+    setTrackArtist("");
+    setTrackAlbum("");
+    setCoverArt("/images/radio_art_default.jpg");
+    setNextTrack(null);
+    trackUuidRef.current = null;
+
+    // Connect to new station's metadata
+    connectMetadata(newStation);
+
+    // Emit station change event
+    emitRadioEvent(RADIO_EVENTS.STATION_CHANGED, { station: newStation });
+
+    // Always prepare the new station stream to keep selected station and audio in sync
+    const ok = await initStream(newStation);
+    if (!ok) return;
+
+    // Ignore stale async completion if user changed station again quickly
+    if (seq !== stationChangeSeqRef.current || stationRef.current !== newStation) return;
+
+    // Resume playback only if it was previously playing
+    if (wasPlaying) {
+      const newMedia = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+      try {
+        newMedia.playbackRate = 1;
+        await newMedia.play();
+        setIsPlaying(true);
+        updateGlobalPlayingState(true);
+      } catch {
+        // ignore
+      }
+    }
+  }, [connectMetadata, initStream]);
+
+  // On mount: sync with global state and connect metadata
+  useEffect(() => {
+    const state = getGlobalRadioState();
+    const isVideo = isVideoStation(state.station);
+    const media = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+
+    // Sync from global
+    setStation(state.station);
+    setIsPlaying(state.isPlaying || (!media.paused && !media.ended));
+    setQualityLevels(state.qualityLevels);
+    setSelectedQuality(state.qualityLevel);
+
+    // If already playing, mark ready
+    if (state.hls && state.isPlaying) {
+      setIsReady(true);
+    }
+
+    // Restore track info from global state if available
+    if (state.trackTitle) {
+      setTrackTitle(state.trackTitle);
+      setTrackArtist(state.trackArtist);
+      setTrackAlbum(state.trackAlbum);
+      setCoverArt(state.coverArt);
+      trackUuidRef.current = state.trackUuid;
+    }
+
+    // Connect metadata WebSocket
+    connectMetadata(state.station);
+    
+    // Fetch next track and cover art (only for audio stations)
+    if (!isVideo) {
+      fetchNextTrack(state.station);
+      // Initial cover art (only if not restored from global)
+      if (!state.trackTitle) {
+        setCoverArt(`${API_URL}/radio/album_art?station=${state.station}&_=${Date.now()}`);
+      }
+    }
+
+    // Sync isPlaying state with actual media element state
+    const audio = getOrCreateAudio();
+    const video = getOrCreateVideo();
+    const handlePlay = () => {
+      setIsPlaying(true);
+      updateGlobalPlayingState(true);
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+      updateGlobalPlayingState(false);
+    };
+    audio.addEventListener('play', handlePlay);
+    audio.addEventListener('pause', handlePause);
+    video.addEventListener('play', handlePlay);
+    video.addEventListener('pause', handlePause);
+
+    // Listen for events from the full Radio page
+    const unsubPlayback = onRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, (data) => {
+      setIsPlaying(data.isPlaying);
+    });
+    const unsubStation = onRadioEvent(RADIO_EVENTS.STATION_CHANGED, (data) => {
+      setStation(data.station);
+      const stationIsVideo = isVideoStation(data.station);
+      // Reset track info when station changes externally
+      if (stationIsVideo) {
+        setTrackTitle("");
+        setTrackArtist("");
+        setTrackAlbum("");
+        setCoverArt("/images/radio_art_default.jpg");
+        setElapsedTime(0);
+        setTrackDuration(0);
+        baseTrackElapsed.current = 0;
+        lastUpdateTimestamp.current = Date.now();
+      } else {
+        setTrackTitle("");
+        setTrackArtist("");
+        setTrackAlbum("");
+        setCoverArt("/images/radio_art_default.jpg");
+        setElapsedTime(0);
+        setTrackDuration(0);
+        baseTrackElapsed.current = 0;
+        lastUpdateTimestamp.current = Date.now();
+        fetchNextTrack(data.station);
+      }
+      // Connect metadata for all stations (video included)
+      connectMetadata(data.station);
+    });
+    const unsubQuality = onRadioEvent(RADIO_EVENTS.QUALITY_CHANGED, (data) => {
+      setSelectedQuality(data.quality);
+    });
+    const unsubTrack = onRadioEvent(RADIO_EVENTS.TRACK_CHANGED, (data) => {
+      const isNewTrack = !!data?.uuid && data.uuid !== trackUuidRef.current;
+      if (data.title) setTrackTitle(data.title);
+      if (data.artist) setTrackArtist(data.artist);
+      if (data.album) setTrackAlbum(data.album);
+      if (data.coverArt) setCoverArt(data.coverArt);
+      if (data.uuid) trackUuidRef.current = data.uuid;
+
+      // On cross-tab track switch (e.g., skip), clear stale prior-track progress immediately.
+      if (isNewTrack) {
+        const nextElapsed = typeof data?.elapsed === "number" && !isNaN(data.elapsed) ? data.elapsed : 0;
+        const nextDuration = typeof data?.duration === "number" && !isNaN(data.duration) ? data.duration : 0;
+        baseTrackElapsed.current = nextElapsed;
+        lastUpdateTimestamp.current = Date.now();
+        setElapsedTime(nextElapsed);
+        setTrackDuration(nextDuration);
+      }
+
+      fetchNextTrack(stationRef.current);
+    });
+
+    return () => {
+      cleanupWs();
+      audio.removeEventListener('play', handlePlay);
+      audio.removeEventListener('pause', handlePause);
+      video.removeEventListener('play', handlePlay);
+      video.removeEventListener('pause', handlePause);
+      unsubPlayback();
+      unsubStation();
+      unsubQuality();
+      unsubTrack();
+      // Restore page title on unmount
+      restorePageTitle();
+      // Note: We do NOT cleanup audio/HLS here - they persist across navigation
+    };
+  }, [connectMetadata, fetchNextTrack, cleanupWs, restorePageTitle]);
+
+  // Reconcile play/pause state with actual media element to avoid stale UI state.
+  useEffect(() => {
+    const syncPlaybackState = () => {
+      const state = getGlobalRadioState();
+      const isVideo = isVideoStation(stationRef.current);
+      const media = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+      const actuallyPlaying = !media.paused && !media.ended;
+
+      // If this tab is actively playing, publish that.
+      if (actuallyPlaying) {
+        setIsPlaying(true);
+        if (!state.isPlaying) {
+          updateGlobalPlayingState(true);
+        }
+        return;
+      }
+
+      // Passive tab: mirror shared playback state without forcing it to false.
+      setIsPlaying(!!state.isPlaying);
+    };
+
+    syncPlaybackState();
+    const interval = setInterval(syncPlaybackState, 1000);
+    document.addEventListener('visibilitychange', syncPlaybackState);
+    document.addEventListener('astro:page-load', syncPlaybackState as EventListener);
+
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', syncPlaybackState);
+      document.removeEventListener('astro:page-load', syncPlaybackState as EventListener);
+    };
+  }, []);
+
+  // Periodic next track refresh
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchNextTrack(stationRef.current);
+    }, 15000);
+    return () => clearInterval(interval);
+  }, [fetchNextTrack]);
+
+  // Dynamic spacing: add margin to footer to make room for player
+  useEffect(() => {
+    const footer = document.querySelector('.footer') as HTMLElement | null;
+    if (!footer) return;
+
+    const updateFooterSpacing = () => {
+      if (isHidden) {
+        footer.style.marginBottom = '';
+        return;
+      }
+      const playerHeight = playerRef.current?.offsetHeight || 140;
+      const gap = 24; // space between footer and player
+      footer.style.marginBottom = `${playerHeight + gap}px`;
+    };
+
+    updateFooterSpacing();
+
+    // Recalculate when player might resize
+    window.addEventListener('resize', updateFooterSpacing, { passive: true });
+    document.addEventListener('astro:page-load', updateFooterSpacing);
+
+    return () => {
+      footer.style.marginBottom = '';
+      window.removeEventListener('resize', updateFooterSpacing);
+      document.removeEventListener('astro:page-load', updateFooterSpacing);
+    };
+  }, [isHidden]);
+
+  const stationColor = STATIONS[station]?.color || "#6366f1";
+  const displayTrackTitle = trackTitle || (isVideoStation(station) ? "Videos" : "Loading...");
+  const displayTrackArtist = trackArtist || "";
+
+  // Get current quality label
+  const currentQualityLabel = selectedQuality === -1 
+    ? "Auto" 
+    : qualityLevels.find(l => l.index === selectedQuality)?.name || "Auto";
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    if (!stationDropdownOpen && !qualityDropdownOpen) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (stationDropdownOpen && stationDropdownRef.current && !stationDropdownRef.current.contains(e.target as Node)) {
+        setStationDropdownOpen(false);
+      }
+      if (qualityDropdownOpen && qualityDropdownRef.current && !qualityDropdownRef.current.contains(e.target as Node)) {
+        setQualityDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [stationDropdownOpen, qualityDropdownOpen]);
+
+  const selectStation = (key: string) => {
+    handleStationChange(key);
+    setStationDropdownOpen(false);
+  };
+
+  // Select quality from dropdown
+  const selectQuality = (levelIndex: number) => {
+    handleQualityChange(levelIndex);
+    setQualityDropdownOpen(false);
+  };
+
+  // Get color for quality level
+  const getQualityColor = (level: QualityLevel | null) => {
+    if (!level) return "#6b7280"; // gray for Auto
+    if (level.isLossless) return "#22c55e"; // green for lossless
+    if (level.bitrate >= 256000) return "#3b82f6"; // blue for high quality
+    if (level.bitrate >= 128000) return "#f59e0b"; // amber for medium
+    return "#ef4444"; // red for low
+  };
+
+  const currentQualityLevel = selectedQuality === -1 ? null : qualityLevels.find(l => l.index === selectedQuality) || null;
+  const currentQualityColor = getQualityColor(currentQualityLevel);
+
+  const toggleHidden = () => {
+    setIsHidden((prev) => {
+      const next = !prev;
+      localStorage.setItem("miniPlayerHidden", next.toString());
+      return next;
+    });
+  };
+
+  // Hidden state - show small button to restore
+  if (isHidden) {
+    return (
+      <div className="fixed bottom-3 right-3 z-[60]">
+        <button
+          onClick={toggleHidden}
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl border border-neutral-200/60 dark:border-neutral-700/60 shadow-lg hover:shadow-xl transition-all text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100"
+          title="Show radio player"
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
+            <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+          </svg>
+          <span className="text-xs font-medium">Radio</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      ref={playerRef}
+      className="fixed bottom-3 left-1/2 -translate-x-1/2 z-[60] w-[min(680px,calc(100vw-1rem))]"
+    >
+      <div
+        className="rounded-2xl border border-neutral-200/70 dark:border-neutral-700/50 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-2xl shadow-2xl shadow-black/8 dark:shadow-black/40"
+        style={{
+          boxShadow: isPlaying
+            ? `0 8px 32px -4px ${stationColor}25, 0 4px 16px -2px rgba(0,0,0,0.1)`
+            : undefined,
+        }}
+      >
+        <div className="flex items-center gap-3 p-3">
+          {/* Album art */}
+          <div className="relative flex-shrink-0">
+            <img
+              src={coverArt}
+              alt="Album art"
+              className="w-14 h-14 rounded-lg object-cover shadow-md"
+              onError={(e) => {
+                (e.target as HTMLImageElement).src = "/images/radio_art_default.jpg";
+              }}
+            />
+            {isPlaying && (
+              <span
+                className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white dark:border-neutral-900 animate-pulse"
+                style={{ backgroundColor: stationColor }}
+              />
+            )}
+          </div>
+
+          {/* Track info & controls */}
+          <div className="min-w-0 flex-1 space-y-1">
+            {/* Top row: station badge + album */}
+            <div className="flex items-center gap-2">
+              <div className="relative" ref={stationDropdownRef}>
+                <button
+                  onClick={() => setStationDropdownOpen(!stationDropdownOpen)}
+                  className="text-[11px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded hover:opacity-80 transition-opacity flex items-center gap-1 cursor-pointer"
+                  style={{ backgroundColor: `${stationColor}25`, color: stationColor }}
+                  title="Click to change station"
+                >
+                  {STATIONS[station]?.label || station}
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="w-2.5 h-2.5">
+                    <path d="M6 9l6 6 6-6" />
+                  </svg>
+                </button>
+                {stationDropdownOpen && (
+                  <div className="absolute bottom-full left-0 mb-2 py-1 rounded-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 shadow-xl min-w-[120px] z-[70]">
+                    {Object.entries(STATIONS).map(([key, { label, color }]) => (
+                      <button
+                        key={key}
+                        onClick={() => selectStation(key)}
+                        className={`w-full text-left px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer ${
+                          station === key
+                            ? "bg-neutral-100 dark:bg-neutral-700"
+                            : "hover:bg-neutral-50 dark:hover:bg-neutral-700/50"
+                        }`}
+                        style={{ color: station === key ? color : undefined }}
+                      >
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {trackAlbum && (
+                <span className="text-[11px] text-neutral-600 dark:text-neutral-300 truncate">
+                  {trackAlbum}
+                </span>
+              )}
+            </div>
+            
+            {/* Song title */}
+            <div className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 truncate leading-tight">
+              {displayTrackTitle}
+            </div>
+            
+            {/* Artist */}
+            <div className="text-xs text-neutral-600 dark:text-neutral-400 truncate">
+              {displayTrackArtist}
+            </div>
+
+            {/* Progress bar */}
+            {trackDuration > 0 && (
+              <div className="pt-1">
+                <div className="flex justify-between items-center text-[10px] text-neutral-600 dark:text-neutral-300 mb-0.5">
+                  <span>{formatTime(elapsedTime)}</span>
+                  <span>-{formatTime(trackDuration - elapsedTime)}</span>
+                </div>
+                <div className="w-full h-1 rounded-full bg-neutral-300 dark:bg-neutral-700 overflow-hidden">
+                  <div
+                    className={`h-full transition-all duration-200 ${
+                      (elapsedTime / trackDuration) * 100 >= 90
+                        ? "bg-red-500 dark:bg-red-400"
+                        : (elapsedTime / trackDuration) * 100 >= 75 || (trackDuration - elapsedTime) <= 20
+                          ? "bg-yellow-400 dark:bg-yellow-300"
+                          : "bg-blue-500 dark:bg-blue-400"
+                    }`}
+                    style={{ width: `${trackDuration > 0 ? (elapsedTime / trackDuration) * 100 : 0}%` }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Bottom row: next track + quality */}
+            <div className="flex items-center gap-2 pt-0.5">
+              {nextTrack ? (
+                <div className="flex-1 min-w-0 text-[11px] text-neutral-600 dark:text-neutral-300 flex items-center">
+                  <span className="flex-shrink-0 mr-1">Next:</span>
+                  <MarqueeText 
+                    text={`${nextTrack.artist} — ${nextTrack.song}`}
+                    className="text-[11px]"
+                  />
+                </div>
+              ) : (
+                <span className="flex-1" />
+              )}
+              {qualityLevels.length > 0 && (
+                <div className="relative flex-shrink-0" ref={qualityDropdownRef}>
+                  <button
+                    onClick={() => setQualityDropdownOpen(!qualityDropdownOpen)}
+                    className="text-[11px] font-semibold px-1.5 py-0.5 rounded hover:opacity-80 transition-opacity flex items-center gap-1 cursor-pointer"
+                    style={{ backgroundColor: `${currentQualityColor}20`, color: currentQualityColor }}
+                    title="Click to change quality"
+                  >
+                    {currentQualityLabel}
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="w-2.5 h-2.5">
+                      <path d="M6 9l6 6 6-6" />
+                    </svg>
+                  </button>
+                  {qualityDropdownOpen && (
+                    <div className="absolute bottom-full right-0 mb-2 py-1 rounded-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 shadow-xl min-w-[100px] z-[70]">
+                      <button
+                        onClick={() => selectQuality(-1)}
+                        className={`w-full text-left px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer ${
+                          selectedQuality === -1
+                            ? "bg-neutral-100 dark:bg-neutral-700"
+                            : "hover:bg-neutral-50 dark:hover:bg-neutral-700/50"
+                        }`}
+                        style={{ color: selectedQuality === -1 ? "#6b7280" : undefined }}
+                      >
+                        Auto
+                      </button>
+                      {qualityLevels.map((level) => {
+                        const color = getQualityColor(level);
+                        return (
+                          <button
+                            key={level.index}
+                            onClick={() => selectQuality(level.index)}
+                            className={`w-full text-left px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer ${
+                              selectedQuality === level.index
+                                ? "bg-neutral-100 dark:bg-neutral-700"
+                                : "hover:bg-neutral-50 dark:hover:bg-neutral-700/50"
+                            }`}
+                            style={{ color: selectedQuality === level.index ? color : undefined }}
+                          >
+                            {level.name}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Play button */}
+          <button
+            type="button"
+            onClick={handlePlayPause}
+            aria-label={isPlaying ? "Pause" : "Play"}
+            className="flex-shrink-0 w-14 h-14 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg"
+            style={{
+              background: isPlaying
+                ? `linear-gradient(135deg, ${stationColor} 0%, ${stationColor}dd 100%)`
+                : "linear-gradient(135deg, #525252 0%, #262626 100%)",
+              color: "white",
+            }}
+          >
+            {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          </button>
+
+          {/* Full player link */}
+          <a
+            href="/radio"
+            className="flex-shrink-0 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-500 dark:text-neutral-400 transition-colors"
+            title="Open full player"
+          >
+            <ExpandIcon />
+          </a>
+
+          {/* Hide button */}
+          <button
+            onClick={toggleHidden}
+            className="flex-shrink-0 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+            title="Hide player"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-4 h-4">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
index 4fad9d3..2bb9d92 100644
--- a/src/components/Radio.tsx
+++ b/src/components/Radio.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, Suspense, lazy, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useRef, Suspense, lazy, useCallback } from "react";
 import type Hls from "hls.js";
 import "@styles/player.css";
 import "@/components/TRip/RequestManagement.css";
@@ -13,9 +13,31 @@ import { toast } from "react-toastify";
 import { ENVIRONMENT } from "../config";
 import { API_URL } from "@/config";
 import { authFetch } from "@/utils/authFetch";
+import { SHARED_HLS_CONFIG } from "@/utils/hlsConfig";
 import { requireAuthHook } from "@/hooks/requireAuthHook";
 import { useHtmlThemeAttr } from "@/hooks/useHtmlThemeAttr";
 import { useAutoCompleteScrollFix } from "@/hooks/useAutoCompleteScrollFix";
+import { installOneShotLiveCatchup, triggerOneShotLiveCatchup } from "@/utils/liveCatchup";
+import {
+  getGlobalRadioState,
+  getOrCreateAudio,
+  getOrCreateVideo,
+  updateGlobalStation,
+  updateGlobalQuality,
+  updateGlobalPlayingState,
+  requestGlobalPauseAll,
+  requestOwnerTabResume,
+  updateGlobalTrackInfo,
+  destroyGlobalHls,
+  setGlobalHls,
+  setGlobalQualityLevels,
+  onRadioEvent,
+  emitRadioEvent,
+  RADIO_EVENTS,
+  isVideoStation,
+  getStreamUrl,
+  type QualityLevel,
+} from "@/utils/radioState";
 
 interface LyricLine {
   timestamp: number;
@@ -38,8 +60,12 @@ const STATIONS = {
   rap: { label: "Rap" },
   electronic: { label: "Electronic" },
   pop: { label: "Pop" },
+  videos: { label: "Videos" },
 };
 
+// LRC timing calibration: show lyrics slightly ahead (or behind) to better match perceived audio output.
+const LRC_TIMING_OFFSET_SEC = -0.04;
+
 // Marquee component for long text that scrolls on mobile
 function MarqueeText({ text, className = "" }: { text: string; className?: string }) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -145,29 +171,57 @@ export default function Player({ user }: PlayerProps) {
   };
   const theme = useHtmlThemeAttr();
 
-  const [activeStation, setActiveStation] = useState("main");
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [trackTitle, setTrackTitle] = useState("");
-  const [trackArtist, setTrackArtist] = useState("");
+  // Initialize state from global radio state (to continue playback from mini player)
+  const [activeStation, setActiveStation] = useState(() => {
+    if (typeof window === "undefined") return "main";
+    return getGlobalRadioState().station;
+  });
+  const [isPlaying, setIsPlaying] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return getGlobalRadioState().isPlaying;
+  });
+  const [trackTitle, setTrackTitle] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return getGlobalRadioState().trackTitle || "";
+  });
+  const [trackArtist, setTrackArtist] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return getGlobalRadioState().trackArtist || "";
+  });
   const [trackGenre, setTrackGenre] = useState("");
-  const [trackAlbum, setTrackAlbum] = useState("");
+  const [trackAlbum, setTrackAlbum] = useState(() => {
+    if (typeof window === "undefined") return "";
+    return getGlobalRadioState().trackAlbum || "";
+  });
   const [nextTrack, setNextTrack] = useState<{ artist: string; song: string } | null>(null);
-  const [coverArt, setCoverArt] = useState("/images/radio_art_default.jpg");
+  const [coverArt, setCoverArt] = useState(() => {
+    if (typeof window === "undefined") return "/images/radio_art_default.jpg";
+    return getGlobalRadioState().coverArt || "/images/radio_art_default.jpg";
+  });
   const [lyrics, setLyrics] = useState<LyricLine[]>([]);
-  const [currentLyricIndex, setCurrentLyricIndex] = useState(0);
+  const [currentLyricIndex, setCurrentLyricIndex] = useState(-1);
   const [elapsedTime, setElapsedTime] = useState(0);
   // Update currentLyricIndex as song progresses
   useEffect(() => {
     if (!lyrics || lyrics.length === 0) return;
-    // Find the last lyric whose timestamp is <= elapsedTime
-    let idx = 0;
-    for (let i = 0; i < lyrics.length; i++) {
-      if (lyrics[i].timestamp <= elapsedTime) {
-        idx = i;
+
+    const adjustedElapsed = Math.max(0, elapsedTime + LRC_TIMING_OFFSET_SEC);
+
+    // Binary search for the last lyric whose timestamp is <= adjustedElapsed
+    let left = 0;
+    let right = lyrics.length - 1;
+    let idx = -1;
+
+    while (left <= right) {
+      const mid = (left + right) >> 1;
+      if (lyrics[mid].timestamp <= adjustedElapsed) {
+        idx = mid;
+        left = mid + 1;
       } else {
-        break;
+        right = mid - 1;
       }
     }
+
     setCurrentLyricIndex(idx);
   }, [elapsedTime, lyrics]);
   const [trackDuration, setTrackDuration] = useState(0);
@@ -188,9 +242,13 @@ export default function Player({ user }: PlayerProps) {
   const [requestInputUuid, setRequestInputUuid] = useState("");
   const { attachScrollFix: handleTypeaheadShow, cleanupScrollFix: handleTypeaheadHide } = useAutoCompleteScrollFix();
 
+  // Use shared audio/video elements from global state - don't create our own
   const audioElement = useRef<HTMLAudioElement | null>(null);
+  const videoElement = useRef<HTMLVideoElement | null>(null);
   const hlsInstance = useRef<Hls | null>(null);
-  const currentTrackUuid = useRef<string | null>(null);
+  const currentTrackUuid = useRef<string | null>(
+    typeof window === "undefined" ? null : getGlobalRadioState().trackUuid
+  );
   const baseTrackElapsed = useRef<number>(0);
   const lastUpdateTimestamp = useRef<number>(Date.now());
   const activeStationRef = useRef<string>(activeStation);
@@ -198,19 +256,29 @@ export default function Player({ user }: PlayerProps) {
   const wsReconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const wsConnectionCheckTimer = useRef<ReturnType<typeof setInterval> | null>(null);
   const wsLastMessageTime = useRef<number>(Date.now());
-  const [isStreamReady, setIsStreamReady] = useState(false);
+  const [isStreamReady, setIsStreamReady] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const state = getGlobalRadioState();
+    // If we have an existing HLS instance and are playing, we're ready
+    return !!(state.hls && state.isPlaying);
+  });
   
-  // Quality selection state
-  const [qualityLevels, setQualityLevels] = useState<{index: number, bitrate: number, name: string, isLossless?: boolean}[]>([]);
-  const [selectedQuality, setSelectedQuality] = useState<number>(-1); // -1 = auto
+  // Flag to track if we took over from mini player
+  const tookOverFromMiniPlayer = useRef(false);
+  
+  // Quality selection state - initialize from global state
+  const [qualityLevels, setQualityLevels] = useState<{index: number, bitrate: number, name: string, isLossless?: boolean}[]>(() => {
+    if (typeof window === "undefined") return [];
+    return getGlobalRadioState().qualityLevels || [];
+  });
+  const [selectedQuality, setSelectedQuality] = useState<number>(() => {
+    if (typeof window === "undefined") return -1;
+    return getGlobalRadioState().qualityLevel;
+  });
   const [currentBitrate, setCurrentBitrate] = useState<number | null>(null); // Stream's declared bitrate
   const [liveDownloadRate, setLiveDownloadRate] = useState<number | null>(null); // Actual download speed
   const [actualPlayingLevel, setActualPlayingLevel] = useState<number>(-1); // Actual HLS.js level being played
 
-  useEffect(() => {
-    return () => {};
-  }, []);
-
   const formatTime = (seconds: number): string => {
     if (!seconds || isNaN(seconds) || seconds < 0) return "00:00";
     const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
@@ -221,10 +289,11 @@ export default function Player({ user }: PlayerProps) {
   // Change stream quality
   const handleQualityChange = (levelIndex: number) => {
     setSelectedQuality(levelIndex);
-    localStorage.setItem('radioQuality', levelIndex.toString());
+    updateGlobalQuality(levelIndex);
     if (hlsInstance.current) {
       hlsInstance.current.currentLevel = levelIndex; // -1 = auto
     }
+    emitRadioEvent(RADIO_EVENTS.QUALITY_CHANGED, { quality: levelIndex });
   };
 
   // Format live bitrate for display (shows actual download rate)
@@ -241,233 +310,331 @@ export default function Player({ user }: PlayerProps) {
     document.title = `${metaData.title} - Radio - ${artist} - ${song} [${activeStationRef.current}]`;
   };
 
-  const isSafari = useMemo(() => {
-    if (typeof navigator === 'undefined') return false;
-    const ua = navigator.userAgent;
-    return /Safari/.test(ua) && !/Chrome|Chromium|CriOS|Edg/.test(ua);
-  }, []);
-
-  // Initialize or switch HLS stream
-  const initializeStream = (station) => {
-    setIsStreamReady(false);
+  // Initialize or switch HLS stream - uses global audio singleton
+  const initializeStream = useCallback((station: string, forceNewStream = false) => {
+    const globalState = getGlobalRadioState();
+    const isVideo = isVideoStation(station);
+    const globalMedia = isVideo ? globalState.video : globalState.audio;
     
-    const audio = audioElement.current;
-    if (!audio) {
+    // If we already have a stream playing for this station and not forcing new, reuse it
+    if (!forceNewStream && globalState.hls && globalState.station === station && globalMedia && !!globalMedia.src) {
+      // Take over existing stream - just update our refs
+      const hls = globalState.hls;
+      hlsInstance.current = hls;
+      const media = globalMedia;
+      if (isVideo) {
+        videoElement.current = globalState.video;
+        audioElement.current = null;
+      } else {
+        audioElement.current = globalState.audio;
+        videoElement.current = null;
+      }
+      if (media) {
+        media.playbackRate = 1;
+      }
+      setQualityLevels(globalState.qualityLevels);
+      setSelectedQuality(globalState.qualityLevel);
+      // Get actual playing level from HLS instance
+      if (hls.currentLevel >= 0) {
+        setActualPlayingLevel(hls.currentLevel);
+        // Also set current bitrate from the level
+        const level = hls.levels[hls.currentLevel];
+        if (level?.bitrate) {
+          setCurrentBitrate(level.bitrate);
+        }
+      }
+      
+      // Re-attach event listeners for live bitrate tracking
+      // Import Hls to get event constants
+      import('hls.js').then(({ default: Hls }) => {
+        hls.on(Hls.Events.LEVEL_SWITCHED, (_event: any, data: any) => {
+          const level = hls.levels[data.level];
+          if (level?.bitrate) {
+            setCurrentBitrate(level.bitrate);
+          }
+          setActualPlayingLevel(data.level);
+        });
+        
+        hls.on(Hls.Events.FRAG_LOADED, (_event: any, data: any) => {
+          const stats = data.frag.stats;
+          if (stats && stats.total && stats.loading) {
+            const downloadTime = stats.loading.end - stats.loading.start;
+            if (downloadTime > 0) {
+              const liveBps = (stats.total * 8 * 1000) / downloadTime;
+              setLiveDownloadRate(liveBps);
+            }
+          }
+        });
+      });
+      
+      setIsStreamReady(true);
+      const actuallyPlaying = !media.paused && !media.ended;
+      setIsPlaying(actuallyPlaying || globalState.isPlaying);
+      if (actuallyPlaying) {
+        updateGlobalPlayingState(true);
+      }
+      tookOverFromMiniPlayer.current = true;
       return;
     }
+    
+    setIsStreamReady(false);
+    
+    // Get or create the shared media element
+    const media = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+    if (isVideo) {
+      videoElement.current = media as HTMLVideoElement;
+      audioElement.current = null;
+    } else {
+      audioElement.current = media as HTMLAudioElement;
+      videoElement.current = null;
+    }
+    media.playbackRate = 1;
 
     // Ensure CORS is set before HLS attaches (Chromium is stricter than Firefox)
-    audio.crossOrigin = 'anonymous';
+    media.crossOrigin = 'anonymous';
     
-    // Clean up previous HLS instance first (synchronous but quick)
-    if (hlsInstance.current) {
-      hlsInstance.current.destroy();
-      hlsInstance.current = null;
-    }
+    // Clean up previous HLS instance via global state
+    destroyGlobalHls();
+    hlsInstance.current = null;
     
-    // Pause and reset audio element
-    audio.pause();
-    audio.removeAttribute("src");
+    // Pause and reset media element
+    media.pause();
+    media.removeAttribute("src");
     
-    // Defer the blocking audio.load() call
+    // Defer the blocking load() call
     setTimeout(() => {
-      audio.load();
+      media.load();
     }, 0);
 
-    // Handle audio load errors
-    audio.onerror = () => {
+    // Handle media load errors
+    media.onerror = () => {
       setIsPlaying(false);
+      updateGlobalPlayingState(false);
       setIsStreamReady(false);
     };
 
     // Chromium: ensure CORS + inline playback set before attaching
-    audio.crossOrigin = 'anonymous';
-    audio.setAttribute('playsinline', 'true');
-    audio.setAttribute('webkit-playsinline', 'true');
+    media.crossOrigin = 'anonymous';
+    media.setAttribute('playsinline', 'true');
+    media.setAttribute('webkit-playsinline', 'true');
 
-    const streamUrl = `https://stream.codey.horse/hls/${station}/${station}.m3u8`;
+    const streamUrl = getStreamUrl(station);
 
-    // Check for native HLS support (Safari only). Force HLS.js for Chromium so we always get quality levels.
-    if (isSafari && audio.canPlayType("application/vnd.apple.mpegurl")) {
-      // Use setTimeout to defer the blocking operations
-      setTimeout(() => {
-        audio.src = streamUrl;
-        audio.load();
-        setIsStreamReady(true);
-        audio.play().then(() => {
-          setIsPlaying(true);
-        }).catch(() => {
-          setTrackTitle("Offline");
-          setIsPlaying(false);
-        });
-      }, 0);
-      return;
-    }
-
-    // Dynamic import HLS.js for non-Safari browsers
+    // Dynamic import HLS.js and branch only on Hls.isSupported()
     import('hls.js').then(({ default: Hls }) => {
-      // Double-check audio element still exists after async import
-      if (!audioElement.current) return;
+      // Double-check media element still exists after async import
+      if (isVideo ? !videoElement.current : !audioElement.current) return;
     
-      if (!Hls.isSupported()) {
+      if (Hls.isSupported()) {
+        const hls = new Hls(SHARED_HLS_CONFIG);
+
+        hlsInstance.current = hls;
+        setGlobalHls(hls);
+        installOneShotLiveCatchup(hls, media);
+        
+        hls.attachMedia(media);
+        hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+          hls.loadSource(streamUrl);
+        });
+        hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+          const levelsRaw = data?.levels ?? [];
+          if (!levelsRaw.length) {
+            setQualityLevels([{ index: -1, bitrate: 0, name: 'Auto' }]);
+            setSelectedQuality(-1);
+            setIsStreamReady(true);
+            media.playbackRate = 1;
+            media.play().then(() => {
+              setIsPlaying(true);
+              updateGlobalPlayingState(true);
+            }).catch(() => {
+              setIsPlaying(false);
+              updateGlobalPlayingState(false);
+            });
+            return;
+          }
+
+          // For video stations, use resolution-based quality labels
+          if (isVideo) {
+            const levels = levelsRaw.map((level, index) => {
+              const height = level.height || 0;
+              const name = height ? `${height}p` : `Level ${index + 1}`;
+              return { index, bitrate: level.bitrate || 0, name, isLossless: false };
+            });
+            levels.sort((a, b) => b.bitrate - a.bitrate);
+            setQualityLevels(levels);
+            setGlobalQualityLevels(levels);
+            setSelectedQuality(-1); // Auto for video
+          } else {
+            const standards = [64, 96, 128, 160, 192, 256, 320];
+            const levels = levelsRaw.map((level, index) => {
+              const kbps = (level.bitrate || 0) / 1000;
+              const codec = level.audioCodec || level.codecs || '';
+              const isLossless = codec.toLowerCase().includes('flac') || codec.toLowerCase().includes('alac') || kbps > 500;
+
+              let name: string;
+              if (isLossless) {
+                name = 'Lossless';
+              } else if (level.bitrate) {
+                const friendly = standards.reduce((prev, curr) => Math.abs(curr - kbps) < Math.abs(prev - kbps) ? curr : prev);
+                name = `${friendly} kbps`;
+              } else {
+                name = `Level ${index + 1}`;
+              }
+
+              return { index, bitrate: level.bitrate || 0, name, isLossless };
+            });
+
+            levels.sort((a, b) => {
+              if (a.isLossless && !b.isLossless) return -1;
+              if (!a.isLossless && b.isLossless) return 1;
+              return b.bitrate - a.bitrate;
+            });
+
+            setQualityLevels(levels);
+            setGlobalQualityLevels(levels);
+
+            // Use global quality setting
+            const savedQuality = globalState.qualityLevel;
+            if (savedQuality !== -1 && levels.some(l => l.index === savedQuality)) {
+              hls.currentLevel = savedQuality;
+              setSelectedQuality(savedQuality);
+            } else {
+              const connection = (navigator as any).connection;
+              const downlink = connection?.downlink;
+              const effectiveType = connection?.effectiveType;
+              const canSupportLossless = !connection || (downlink && downlink >= 2) || (!downlink && effectiveType === '4g');
+              const losslessLevel = levels.find(l => l.isLossless);
+              if (losslessLevel && canSupportLossless) {
+                hls.currentLevel = losslessLevel.index;
+                setSelectedQuality(losslessLevel.index);
+                updateGlobalQuality(losslessLevel.index);
+              } else {
+                setSelectedQuality(-1);
+              }
+            }
+          }
+          
+          setIsStreamReady(true);
+          media.playbackRate = 1;
+          media.play().then(() => {
+            setIsPlaying(true);
+            updateGlobalPlayingState(true);
+            emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
+          }).catch(() => {
+            setIsPlaying(false);
+            updateGlobalPlayingState(false);
+          });
+        });
+        
+        // Track level switches - update current bitrate and actual playing level
+        hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
+          const level = hls.levels[data.level];
+          if (level?.bitrate) {
+            setCurrentBitrate(level.bitrate);
+          }
+          setActualPlayingLevel(data.level);
+        });
+        
+        // Track actual live download bandwidth from fragment downloads
+        hls.on(Hls.Events.FRAG_LOADED, (_event, data) => {
+          const stats = data.frag.stats;
+          if (stats && stats.total && stats.loading) {
+            const downloadTime = stats.loading.end - stats.loading.start;
+            if (downloadTime > 0) {
+              const liveBps = (stats.total * 8 * 1000) / downloadTime;
+              setLiveDownloadRate(liveBps);
+            }
+          }
+        });
+
+        hls.on(Hls.Events.ERROR, (_event, data) => {
+          const details = data?.details || 'unknown';
+
+          if (!data.fatal) {
+            if (details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
+              try { hls.startLoad(); } catch (_) { /* ignore */ }
+            }
+            return;
+          }
+
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR: {
+              destroyGlobalHls();
+              hlsInstance.current = null;
+              setIsPlaying(false);
+              updateGlobalPlayingState(false);
+              setIsStreamReady(false);
+              initializeStream(activeStationRef.current, true);
+              break;
+            }
+            case Hls.ErrorTypes.MEDIA_ERROR: {
+              try {
+                hls.recoverMediaError();
+              } catch (err) {
+                destroyGlobalHls();
+                hlsInstance.current = null;
+                initializeStream(activeStationRef.current, true);
+              }
+              break;
+            }
+            default: {
+              destroyGlobalHls();
+              hlsInstance.current = null;
+              setIsPlaying(false);
+              updateGlobalPlayingState(false);
+              setIsStreamReady(false);
+              initializeStream(activeStationRef.current, true);
+            }
+          }
+        });
+
         return;
       }
 
-      const hls = new Hls({
-        lowLatencyMode: false,
-        liveSyncDuration: 0.6,
-        liveMaxLatencyDuration: 3.0,
-      } as Partial<typeof Hls.DefaultConfig>);
-
-      hlsInstance.current = hls;
-      hls.attachMedia(audio);
-      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-        hls.loadSource(streamUrl);
-      });
-      hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
-        const levelsRaw = data?.levels ?? [];
-        if (!levelsRaw.length) {
-          // Show at least Auto so users know why the selector is missing
-          setQualityLevels([{ index: -1, bitrate: 0, name: 'Auto' }]);
-          setSelectedQuality(-1);
-          setIsStreamReady(true);
-          audio.play().then(() => setIsPlaying(true)).catch(() => setIsPlaying(false));
-          return;
-        }
-
-        // Capture available quality levels (use friendly bitrate names)
-        const standards = [64, 96, 128, 160, 192, 256, 320];
-        const levels = levelsRaw.map((level, index) => {
-          const kbps = (level.bitrate || 0) / 1000;
-          const codec = level.audioCodec || level.codecs || '';
-          const isLossless = codec.toLowerCase().includes('flac') || codec.toLowerCase().includes('alac') || kbps > 500;
-
-          let name: string;
-          if (isLossless) {
-            name = 'Lossless';
-          } else if (level.bitrate) {
-            const friendly = standards.reduce((prev, curr) => Math.abs(curr - kbps) < Math.abs(prev - kbps) ? curr : prev);
-            name = `${friendly} kbps`;
-          } else {
-            name = `Level ${index + 1}`;
-          }
-
-          return { index, bitrate: level.bitrate || 0, name, isLossless };
-        });
-
-        levels.sort((a, b) => {
-          if (a.isLossless && !b.isLossless) return -1;
-          if (!a.isLossless && b.isLossless) return 1;
-          return b.bitrate - a.bitrate;
-        });
-
-        setQualityLevels(levels);
-
-        const savedQuality = localStorage.getItem('radioQuality');
-        if (savedQuality !== null) {
-          const qualityIndex = parseInt(savedQuality, 10);
-          hls.currentLevel = qualityIndex;
-          setSelectedQuality(qualityIndex);
-        } else {
-          const connection = (navigator as any).connection;
-          const downlink = connection?.downlink;
-          const effectiveType = connection?.effectiveType;
-          const canSupportLossless = !connection || (downlink && downlink >= 2) || (!downlink && effectiveType === '4g');
-          const losslessLevel = levels.find(l => l.isLossless);
-          if (losslessLevel && canSupportLossless) {
-            hls.currentLevel = losslessLevel.index;
-            setSelectedQuality(losslessLevel.index);
-          } else {
-            setSelectedQuality(-1);
-          }
-        }
-        
+      // Fallback for engines without MSE/HLS.js support (e.g., iOS WebKit)
+      if (media.canPlayType("application/vnd.apple.mpegurl")) {
+        media.src = streamUrl;
+        media.load();
+        setQualityLevels([]);
+        setSelectedQuality(-1);
+        setCurrentBitrate(null);
+        setLiveDownloadRate(null);
+        setActualPlayingLevel(-1);
         setIsStreamReady(true);
-        audio.play().then(() => {
+        media.playbackRate = 1;
+        media.play().then(() => {
           setIsPlaying(true);
+          updateGlobalPlayingState(true);
         }).catch(() => {
+          setTrackTitle("Offline");
           setIsPlaying(false);
+          updateGlobalPlayingState(false);
         });
-      });
-      
-      // Track level switches - update current bitrate and actual playing level
-      hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
-        const level = hls.levels[data.level];
-        if (level?.bitrate) {
-          setCurrentBitrate(level.bitrate);
-        }
-        setActualPlayingLevel(data.level);
-      });
-      
-      // Track actual live download bandwidth from fragment downloads
-      hls.on(Hls.Events.FRAG_LOADED, (_event, data) => {
-        const stats = data.frag.stats;
-        if (stats && stats.total && stats.loading) {
-          const downloadTime = stats.loading.end - stats.loading.start;
-          if (downloadTime > 0) {
-            const liveBps = (stats.total * 8 * 1000) / downloadTime;
-            setLiveDownloadRate(liveBps);
-          }
-        }
-      });
-      
-      let mediaRecoveryAttempts = 0;
-      let networkRecoveryAttempts = 0;
-      const MAX_RECOVERY_ATTEMPTS = 3;
-      let networkRecoveryTimeout: ReturnType<typeof setTimeout> | null = null;
+        return;
+      }
 
-      hls.on(Hls.Events.ERROR, (_event, data) => {
-        const details = data?.details || 'unknown';
-
-        if (!data.fatal) {
-          if (details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
-            try { hls.startLoad(); } catch (_) { /* ignore */ }
-          }
-          return;
-        }
-
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR: {
-            hls.destroy();
-            hlsInstance.current = null;
-            setIsPlaying(false);
-            setIsStreamReady(false);
-            initializeStream(activeStationRef.current);
-            break;
-          }
-          case Hls.ErrorTypes.MEDIA_ERROR: {
-            try {
-              hls.recoverMediaError();
-            } catch (err) {
-              hls.destroy();
-              hlsInstance.current = null;
-              initializeStream(activeStationRef.current);
-            }
-            break;
-          }
-          default: {
-            hls.destroy();
-            hlsInstance.current = null;
-            setIsPlaying(false);
-            setIsStreamReady(false);
-            initializeStream(activeStationRef.current);
-          }
-        }
-      });
+      setTrackTitle("Offline");
+      setIsPlaying(false);
+      updateGlobalPlayingState(false);
+      setIsStreamReady(false);
     });
-  };
+  }, []);
 
-  // Update elapsed time smoothly
+  // Update elapsed time smoothly (skip for video stations)
+  // Continue updating even when paused to reflect current stream position
   useEffect(() => {
+    // Skip elapsed time tracking for video stations
+    if (isVideoStation(activeStation)) return;
+    
     const intervalId = setInterval(() => {
       const now = Date.now();
       const deltaSec = (now - lastUpdateTimestamp.current) / 1000;
       let liveElapsed = (typeof baseTrackElapsed.current === 'number' && !isNaN(baseTrackElapsed.current) ? baseTrackElapsed.current : 0) + deltaSec;
       if (trackDuration && liveElapsed > trackDuration) liveElapsed = trackDuration;
       setElapsedTime(liveElapsed);
-    }, 200);
+    }, 100);
     return () => clearInterval(intervalId);
-  }, [isPlaying, trackDuration]);
+  }, [trackDuration, activeStation]);
 
 
 
@@ -526,16 +693,103 @@ export default function Player({ user }: PlayerProps) {
 
   // Handle station changes: reset and start new stream
   useEffect(() => {
+    const globalState = getGlobalRadioState();
+    const isVideo = isVideoStation(activeStation);
+    const mediaForStation = isVideo ? globalState.video : globalState.audio;
+    
+    // Check if we're taking over an existing stream from mini player for the same station
+    const isTakeover = !!(globalState.hls && globalState.station === activeStation && mediaForStation && mediaForStation.src);
+    
+    if (isTakeover && !tookOverFromMiniPlayer.current) {
+      // Taking over from mini player - don't reset state, just sync
+      tookOverFromMiniPlayer.current = true;
+      const hls = globalState.hls;
+      hlsInstance.current = hls;
+      audioElement.current = globalState.audio;
+      videoElement.current = globalState.video;
+      const media = isVideo ? globalState.video : globalState.audio;
+      if (media) {
+        media.playbackRate = 1;
+      }
+      setQualityLevels(globalState.qualityLevels);
+      setSelectedQuality(globalState.qualityLevel);
+      // Get actual playing level from HLS instance
+      if (hls && hls.currentLevel >= 0) {
+        setActualPlayingLevel(hls.currentLevel);
+        // Also set current bitrate from the level
+        const level = hls.levels[hls.currentLevel];
+        if (level?.bitrate) {
+          setCurrentBitrate(level.bitrate);
+        }
+      }
+      
+      // Re-attach event listeners for live bitrate tracking
+      if (hls) {
+        import('hls.js').then(({ default: Hls }) => {
+          hls.on(Hls.Events.LEVEL_SWITCHED, (_event: any, data: any) => {
+            const level = hls.levels[data.level];
+            if (level?.bitrate) {
+              setCurrentBitrate(level.bitrate);
+            }
+            setActualPlayingLevel(data.level);
+          });
+          
+          hls.on(Hls.Events.FRAG_LOADED, (_event: any, data: any) => {
+            const stats = data.frag.stats;
+            if (stats && stats.loading) {
+              const downloadTime = stats.loading.end - stats.loading.start;
+              if (downloadTime > 0) {
+                const liveBps = (stats.total * 8 * 1000) / downloadTime;
+                setLiveDownloadRate(liveBps);
+              }
+            }
+          });
+        });
+      }
+      
+      setIsStreamReady(true);
+      const actuallyPlaying = !!media && !media.paused && !media.ended;
+      setIsPlaying(actuallyPlaying || globalState.isPlaying);
+      if (actuallyPlaying) {
+        updateGlobalPlayingState(true);
+      }
+      // Keep existing track info if available (audio stations only)
+      if (!isVideo && globalState.trackTitle) {
+        setTrackTitle(globalState.trackTitle);
+        setTrackArtist(globalState.trackArtist);
+        setTrackAlbum(globalState.trackAlbum);
+        setCoverArt(globalState.coverArt);
+        currentTrackUuid.current = globalState.trackUuid;
+      } else if (isVideo) {
+        setTrackTitle("");
+        setTrackArtist("");
+        setTrackAlbum("");
+        setCoverArt("/images/radio_art_default.jpg");
+      }
+      // Update page title
+      document.title = `${metaData.title} - Radio [${activeStation}]`;
+      return;
+    }
+    
+    // Reset for fresh stream (station changed or no existing stream)
+    tookOverFromMiniPlayer.current = false;
+    
     // Batch all state resets to minimize re-renders
-    // Use startTransition to mark this as a non-urgent update
     const resetState = () => {
-      setTrackTitle("");
-      setTrackArtist("");
+      if (isVideo) {
+        setTrackTitle("");
+        setTrackArtist("");
+        setLyrics([]);
+        setCurrentLyricIndex(-1);
+      } else {
+        setTrackTitle("");
+        setTrackArtist("");
+        setLyrics([]);
+        setCurrentLyricIndex(-1);
+      }
       setTrackGenre("");
       setTrackAlbum("");
       setCoverArt("/images/radio_art_default.jpg");
-      setLyrics([]);
-      setCurrentLyricIndex(0);
       setElapsedTime(0);
       setTrackDuration(0);
     };
@@ -545,34 +799,32 @@ export default function Player({ user }: PlayerProps) {
     baseTrackElapsed.current = 0;
     lastUpdateTimestamp.current = Date.now();
 
+    // Update global station
+    updateGlobalStation(activeStation);
+
     // Use requestAnimationFrame to defer state updates and stream init
     // This allows the UI to update the station button immediately
     requestAnimationFrame(() => {
       resetState();
       // Defer stream initialization to next frame to keep UI responsive
       requestAnimationFrame(() => {
-        initializeStream(activeStation);
+        initializeStream(activeStation, true); // Force new stream for station change
       });
     });
 
     // Update page title to reflect the new station
     document.title = `${metaData.title} - Radio [${activeStation}]`;
     
-    // Cleanup on unmount or station change
+    // Emit station change event for mini player sync
+    emitRadioEvent(RADIO_EVENTS.STATION_CHANGED, { station: activeStation });
+    
+    // Cleanup on unmount or station change - but DON'T destroy the global stream
+    // so mini player can continue playing
     return () => {
-      // Destroy HLS instance to stop network requests
-      if (hlsInstance.current) {
-        hlsInstance.current.destroy();
-        hlsInstance.current = null;
-      }
-      // Stop and clear audio element
-      if (audioElement.current) {
-        audioElement.current.pause();
-        audioElement.current.removeAttribute('src');
-        audioElement.current.load();
-      }
+      // We don't destroy HLS here anymore - let the global state manage it
+      // The mini player can continue using it after we unmount
     };
-  }, [activeStation]);
+  }, [activeStation, initializeStream]);
 
   const parseLrcString = useCallback((lrcString: string | undefined | null): LyricLine[] => {
     if (!lrcString || typeof lrcString !== 'string') return [];
@@ -581,7 +833,7 @@ export default function Player({ user }: PlayerProps) {
     const parsedLyrics: LyricLine[] = [];
 
     for (const line of lines) {
-      const match = line.match(/\[(\d{2}):(\d{2}\.\d{2})\]\s*(.+)/);
+      const match = line.match(/\[(\d{2}):(\d{2}(?:\.\d{1,3})?)\]\s*(.+)/);
       if (match) {
         const [, mins, secs, text] = match;
         const timestamp = Number(mins) * 60 + parseFloat(secs);
@@ -619,9 +871,14 @@ export default function Player({ user }: PlayerProps) {
 
       setTrackMetadata(trackData, requestStation);
 
+      // Apply subtle one-shot catch-up on each track transition (audio stations only).
+      if (!isVideoStation(requestStation)) {
+        triggerOneShotLiveCatchup(hlsInstance.current, getOrCreateAudio());
+      }
+
       // Clear lyrics immediately when new track is detected
       setLyrics([]);
-      setCurrentLyricIndex(0);
+      setCurrentLyricIndex(-1);
 
       // Refresh queue and next track when track changes
       fetchQueue();
@@ -701,13 +958,13 @@ export default function Player({ user }: PlayerProps) {
           if (data.type === 'track_change') {
             // Handle track change
             setLyrics([]);
-            setCurrentLyricIndex(0);
+            setCurrentLyricIndex(-1);
             handleTrackData(data.data);
           } else if (data.type === 'lrc') {
             // Handle LRC data
             const parsedLyrics = parseLrcString(data.data);
             setLyrics(parsedLyrics);
-            setCurrentLyricIndex(0);
+            setCurrentLyricIndex(-1);
           } else if (data.type === 'now_playing' || data.type === 'initial') {
             // Explicit now playing message
             handleTrackData(data.data || data);
@@ -770,11 +1027,16 @@ export default function Player({ user }: PlayerProps) {
   }, [handleTrackData, parseLrcString]);
 
   const setTrackMetadata = useCallback((trackData, requestStation) => {
-    setTrackTitle(trackData.song || 'Unknown Title');
-    setTrackArtist(trackData.artist || 'Unknown Artist');
+    const title = trackData.song || 'Unknown Title';
+    const artist = trackData.artist || 'Unknown Artist';
+    const album = trackData.album || 'Unknown Album';
+    const newCoverArt = `${API_URL}/radio/album_art?station=${requestStation}&_=${Date.now()}`;
+    
+    setTrackTitle(title);
+    setTrackArtist(artist);
     setTrackGenre(trackData.genre || '');
-    setTrackAlbum(trackData.album || 'Unknown Album');
-    setCoverArt(`${API_URL}/radio/album_art?station=${requestStation}&_=${Date.now()}`);
+    setTrackAlbum(album);
+    setCoverArt(newCoverArt);
 
     const elapsed = typeof trackData.elapsed === 'number' && !isNaN(trackData.elapsed) ? trackData.elapsed : 0;
     baseTrackElapsed.current = elapsed;
@@ -782,7 +1044,27 @@ export default function Player({ user }: PlayerProps) {
     setElapsedTime(elapsed);
 
     setTrackDuration(trackData.duration || 0);
-    setPageTitle(trackData.artist, trackData.song);
+    setPageTitle(artist, title);
+    
+    // Update global state for mini player sync
+    updateGlobalTrackInfo({
+      title,
+      artist,
+      album,
+      coverArt: newCoverArt,
+      uuid: trackData.uuid,
+    });
+    
+    // Emit track change event for mini player
+    emitRadioEvent(RADIO_EVENTS.TRACK_CHANGED, {
+      title,
+      artist,
+      album,
+      coverArt: newCoverArt,
+      uuid: trackData.uuid,
+      elapsed: typeof trackData.elapsed === 'number' && !isNaN(trackData.elapsed) ? trackData.elapsed : 0,
+      duration: trackData.duration || 0,
+    });
   }, []);
 
   useEffect(() => {
@@ -812,9 +1094,55 @@ export default function Player({ user }: PlayerProps) {
     };
   }, [activeStation, initializeWebSocket]);
 
+  // Keep button state in sync with shared playback events (same-tab + cross-tab).
+  useEffect(() => {
+    const unsubPlayback = onRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, (data) => {
+      setIsPlaying(!!data?.isPlaying);
+    });
+
+    return () => {
+      unsubPlayback();
+    };
+  }, []);
+
+  // React to station changes coming from other tabs/components (e.g., mini player).
+  useEffect(() => {
+    const unsubStation = onRadioEvent(RADIO_EVENTS.STATION_CHANGED, (data) => {
+      const nextStation = data?.station;
+      if (typeof nextStation !== "string") return;
+      setActiveStation((prev) => (prev === nextStation ? prev : nextStation));
+    });
+
+    return () => {
+      unsubStation();
+    };
+  }, []);
+
   // Cleanup WebSocket on component unmount
   useEffect(() => {
     return () => {
+      // Preserve active video playback across navigation by keeping the global video
+      // element mounted in document.body when leaving the full radio page.
+      try {
+        const state = getGlobalRadioState();
+        if (isVideoStation(state.station) && state.video && state.isPlaying) {
+          const video = state.video;
+          video.style.position = "fixed";
+          video.style.left = "-9999px";
+          video.style.top = "-9999px";
+          video.style.width = "1px";
+          video.style.height = "1px";
+          video.style.opacity = "0";
+          video.style.pointerEvents = "none";
+          video.setAttribute("aria-hidden", "true");
+          if (video.parentNode !== document.body) {
+            document.body.appendChild(video);
+          }
+        }
+      } catch {
+        // no-op
+      }
+
       if (wsReconnectTimer.current) {
         clearTimeout(wsReconnectTimer.current);
         wsReconnectTimer.current = null;
@@ -834,6 +1162,8 @@ export default function Player({ user }: PlayerProps) {
 
   const progress = trackDuration > 0 ? (elapsedTime / trackDuration) * 100 : 0;
   const remaining = trackDuration - elapsedTime;
+  const displayTrackTitle = trackTitle || (isVideoStation(activeStation) ? "Videos" : "Loading...");
+  const displayTrackArtist = trackArtist || "";
 
   const progressColorClass =
     progress >= 90
@@ -1223,26 +1553,34 @@ export default function Player({ user }: PlayerProps) {
           {/* Header - always first */}
           <h1 className="music-player__header text-2xl font-bold" title={trackGenre ? `Genre: ${trackGenre}` : undefined}>serious.FM</h1>
           
-          {/* Album cover section */}
+          {/* Album cover section - hidden for video stations */}
+          {!isVideoStation(activeStation) && (
           <section className="album-cover">
             <div className="music-player__album" title="Album">
               {trackAlbum}
             </div>
             <img src={coverArt} className="cover rounded-lg shadow-md" alt="Cover Art" />
           </section>
+          )}
 
           {/* Track info section */}
-          <section className="music-player">
-            <MarqueeText text={trackTitle} className="music-player__title text-xl font-semibold" />
-            <MarqueeText text={trackArtist} className="music-player__author text-lg font-medium" />
+          <section
+            className="music-player"
+            style={isVideoStation(activeStation) ? { flex: '1 1 100%', maxWidth: '100%', width: '100%' } : undefined}
+          >
+            <MarqueeText text={displayTrackTitle} className="music-player__title text-xl font-semibold" />
+            <MarqueeText text={displayTrackArtist} className="music-player__author text-lg font-medium" />
 
-            {/* Next track preview */}
-            {nextTrack && (
+            {/* Next track preview - hidden for video stations */}
+            {!isVideoStation(activeStation) && nextTrack && (
               <div className="next-track text-xs text-neutral-500 dark:text-neutral-400 mt-1 px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-full inline-block">
                 <span className="font-medium">Up next:</span> {nextTrack.artist} - {nextTrack.song}
               </div>
             )}
 
+            {/* Time and progress - hidden for video stations */}
+            {!isVideoStation(activeStation) && (
+            <>
             <div className="music-time flex justify-between items-center mt-4">
               <p className="music-time__current text-sm">{formatTime(elapsedTime)}</p>
               <p className="music-time__last text-sm">- {formatTime(trackDuration - elapsedTime)}</p>
@@ -1254,6 +1592,8 @@ export default function Player({ user }: PlayerProps) {
                 style={{ width: `${progress}%` }}
               ></div>
             </div>
+            </>
+            )}
 
             {/* Quality selector */}
             {qualityLevels.length > 0 && (
@@ -1280,6 +1620,107 @@ export default function Player({ user }: PlayerProps) {
               </div>
             )}
 
+            {/* Video player - only shown for video stations */}
+            {isVideoStation(activeStation) && (
+              <div 
+                className="video-container mt-4 rounded-xl overflow-hidden bg-black aspect-video relative group shadow-2xl cursor-pointer" 
+                style={{ width: '100%', maxWidth: '100%', marginLeft: 'auto', marginRight: 'auto' }}
+                onClick={(e) => {
+                  const target = e.target as HTMLElement;
+                  // Don't trigger play when clicking overlay controls
+                  if (target.closest('button')) return;
+
+                  const globalVideo = getOrCreateVideo();
+                  // Single click toggles playback
+                  if (globalVideo.paused || globalVideo.ended) {
+                    if (!isStreamReady || !globalVideo.src || globalVideo.error) {
+                      initializeStream(activeStation, true);
+                      return;
+                    }
+
+                    globalVideo.playbackRate = 1;
+                    globalVideo.play().then(() => {
+                      setIsPlaying(true);
+                      updateGlobalPlayingState(true);
+                      emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
+                    }).catch(() => {
+                      initializeStream(activeStation, true);
+                    });
+                  } else {
+                    globalVideo.pause();
+                    setIsPlaying(false);
+                    updateGlobalPlayingState(false);
+                    emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: false });
+                  }
+                }}
+                onDoubleClick={() => {
+                  const globalVideo = getOrCreateVideo();
+                  if (globalVideo) {
+                    if (document.fullscreenElement) {
+                      document.exitFullscreen();
+                    } else {
+                      globalVideo.requestFullscreen().catch(() => {});
+                    }
+                  }
+                }}
+              >
+                <div
+                  ref={(containerEl) => {
+                    if (containerEl) {
+                      const globalVideo = getOrCreateVideo();
+                      // Apply styles to the global video element
+                      globalVideo.className = "w-full h-full object-contain";
+                      globalVideo.playsInline = true;
+                      globalVideo.controls = false;
+                      (globalVideo as any).disablePictureInPicture = false;
+                      // Clear offscreen parking styles (used by mini player during navigation)
+                      globalVideo.style.position = "";
+                      globalVideo.style.left = "";
+                      globalVideo.style.top = "";
+                      globalVideo.style.width = "";
+                      globalVideo.style.height = "";
+                      globalVideo.style.opacity = "";
+                      globalVideo.style.pointerEvents = "";
+                      globalVideo.removeAttribute("aria-hidden");
+                      // Move into container if not already there
+                      if (globalVideo.parentNode !== containerEl) {
+                        containerEl.innerHTML = '';
+                        containerEl.appendChild(globalVideo);
+                      }
+                      videoElement.current = globalVideo;
+                    }
+                  }}
+                  className="w-full h-full"
+                />
+                {/* Video controls overlay */}
+                <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex justify-end gap-2">
+                  <button
+                    onClick={() => {
+                      const globalVideo = getOrCreateVideo();
+                      if (globalVideo) {
+                        if (document.fullscreenElement) {
+                          document.exitFullscreen();
+                        } else {
+                          globalVideo.requestFullscreen().catch(() => {});
+                        }
+                      }
+                    }}
+                    className="p-2 rounded-lg bg-white/20 hover:bg-white/30 text-white transition-colors"
+                    title="Fullscreen"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+                      <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+                      <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+                      <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* LRC/Lyrics container - only shown for audio stations */}
+            {!isVideoStation(activeStation) && (
             <div
               ref={lrcContainerRef}
               className={`lrc-text mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800 ${lyrics.length === 0 ? "empty" : ""}`}
@@ -1322,7 +1763,9 @@ export default function Player({ user }: PlayerProps) {
                 </p>
               ))}
             </div>
+            )}
 
+            {/* DJ controls */}
             {isDJ && (
               <div className="dj-controls mt-6 flex flex-wrap justify-center items-center gap-2" style={{ minWidth: '24rem', maxWidth: '100%', alignItems: 'flex-start' }}>
                 <div className="flex flex-col items-center gap-2 w-full" style={{ minWidth: '24rem' }}>
@@ -1375,24 +1818,43 @@ export default function Player({ user }: PlayerProps) {
               <div
                 className="music-control__play"
                 onClick={async () => {
-                  const audio = audioElement.current;
-                  if (!audio) return;
+                  const isVideo = isVideoStation(activeStation);
+                  const media = isVideo ? getOrCreateVideo() : getOrCreateAudio();
+                  const globalState = getGlobalRadioState();
+                  const actuallyPlaying = !media.paused && !media.ended;
+
+                  // Passive tab case: another tab owns playback; pause globally.
+                  if (!actuallyPlaying && globalState.isPlaying) {
+                    requestGlobalPauseAll();
+                    setIsPlaying(false);
+                    return;
+                  }
+
+                  if (!actuallyPlaying && !globalState.isPlaying && requestOwnerTabResume()) {
+                    setIsPlaying(true);
+                    return;
+                  }
                   
                   if (isPlaying) {
-                    audio.pause();
+                    media.pause();
                     setIsPlaying(false);
+                    updateGlobalPlayingState(false);
+                    emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: false });
                   } else {
                     // If stream is not ready, reinitialize it
-                    if (!isStreamReady || !audio.src || audio.error) {
-                      initializeStream(activeStation);
+                    if (!isStreamReady || !media.src || media.error) {
+                      initializeStream(activeStation, true);
                       return;
                     }
                     try {
-                      await audio.play();
+                      media.playbackRate = 1;
+                      await media.play();
                       setIsPlaying(true);
+                      updateGlobalPlayingState(true);
+                      emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
                     } catch (err) {
                       // Reinitialize stream on playback failure
-                      initializeStream(activeStation);
+                      initializeStream(activeStation, true);
                     }
                   }
                 }}
@@ -1406,7 +1868,7 @@ export default function Player({ user }: PlayerProps) {
           </section>
         </div>
 
-        <audio ref={audioElement} preload="none" />
+        {/* Audio element removed - using global singleton from radioState.ts */}
 
         <Dialog
           header={
@@ -1452,7 +1914,7 @@ export default function Player({ user }: PlayerProps) {
                   onDragLeave={handleDragLeave}
                   onDrop={(e) => isDJ && handleDrop(e, item.pos)}
                   onDragEnd={handleDragEnd}
-                  className={`queue-item flex items-center gap-2 p-2 rounded-lg transition-colors ${isDJ ? 'cursor-grab active:cursor-grabbing' : ''} ${
+                  className={`queue-item p-2 rounded-lg transition-colors ${isDJ ? 'cursor-grab active:cursor-grabbing' : ''} ${
                     dragOverIndex === item.pos
                       ? 'bg-blue-100 dark:bg-blue-800/50 border-2 border-dashed border-blue-400'
                       : index === 0 
@@ -1460,99 +1922,198 @@ export default function Player({ user }: PlayerProps) {
                         : 'bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800'
                   } ${draggedItem?.uuid === item.uuid ? 'opacity-50' : ''}`}
                 >
-                  {/* Drag Handle & Position */}
-                  <div className="flex flex-col items-center gap-0.5 min-w-[50px]">
-                    {isDJ && (
-                      <div className="text-neutral-400 mb-1" title="Drag to reorder">
-                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                          <path d="M8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8-12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
-                        </svg>
-                      </div>
-                    )}
-                    {isDJ && item.pos > 0 && (
-                      <button
-                        onClick={() => handleMoveUp(item.uuid, item.pos)}
-                        className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 p-0.5"
-                        title="Move up"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
-                        </svg>
-                      </button>
-                    )}
-                    <span className={`text-sm font-bold ${index === 0 ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-500'}`}>
-                      #{item.pos + 1}
-                    </span>
-                    {isDJ && (
-                      <button
-                        onClick={() => handleMoveDown(item.uuid, item.pos)}
-                        className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 p-0.5"
-                        title="Move down"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </button>
-                    )}
-                  </div>
-
-                  {/* Track Info */}
-                  <div className="flex-1 min-w-0">
-                    <div className="font-semibold text-sm text-neutral-900 dark:text-neutral-100 truncate" title={`${item.artist} - ${item.song}`}>
-                      {item.artist} - {item.song}
-                    </div>
-                    <div className="text-xs text-neutral-500 dark:text-neutral-400 truncate" title={item.album}>
-                      {item.trackNo && <span className="text-neutral-400 dark:text-neutral-500 mr-1">#{item.trackNo}</span>}
-                      {item.album}
-                      {item.genre && item.genre !== 'N/A' && (
-                        <span className="ml-2 px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-700 rounded text-[10px]">
-                          {item.genre}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Actions */}
-                  {isDJ && (
-                    <div className="flex items-center gap-1.5 flex-shrink-0">
-                      {item.pos > 0 && (
-                        <button
-                          onClick={() => handleMoveToTop(item.uuid)}
-                          className="px-2.5 py-1.5 rounded-md bg-purple-500 text-white hover:bg-purple-600 text-xs font-bold shadow-sm flex items-center gap-1"
-                          title="Move to top"
-                        >
-                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 11l7-7 7 7M5 19l7-7 7 7" />
+                  {/* Desktop layout (unchanged look) */}
+                  <div className="hidden sm:flex items-center gap-2">
+                    <div className="flex flex-col items-center gap-0.5 min-w-[50px]">
+                      {isDJ && (
+                        <div className="text-neutral-400 mb-1" title="Drag to reorder">
+                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8-12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
+                          </svg>
+                        </div>
+                      )}
+                      {isDJ && item.pos > 0 && (
+                        <button
+                          onClick={() => handleMoveUp(item.uuid, item.pos)}
+                          className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 p-0.5 cursor-pointer"
+                          title="Move up"
+                        >
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+                          </svg>
+                        </button>
+                      )}
+                      <span className={`text-sm font-bold ${index === 0 ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-500'}`}>
+                        #{item.pos + 1}
+                      </span>
+                      {isDJ && (
+                        <button
+                          onClick={() => handleMoveDown(item.uuid, item.pos)}
+                          className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 p-0.5 cursor-pointer"
+                          title="Move down"
+                        >
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                           </svg>
-                          Top
                         </button>
                       )}
-                      <button
-                        onClick={() => handleQueueShift(item.uuid, true)}
-                        className="px-2.5 py-1.5 rounded-md bg-green-500 text-white hover:bg-green-600 text-xs font-bold shadow-sm"
-                        title="Play Next"
-                      >
-                        Play Next
-                      </button>
-                      <button
-                        onClick={() => handleSkip(item.uuid)}
-                        className="px-2.5 py-1.5 rounded-md bg-blue-500 text-white hover:bg-blue-600 text-xs font-bold shadow-sm"
-                        title="Skip to this track"
-                      >
-                        Skip To
-                      </button>
-                      <button
-                        onClick={() => handleRemoveFromQueue(item.uuid)}
-                        className="px-2.5 py-1.5 rounded-md bg-red-500 text-white hover:bg-red-600 text-xs font-bold shadow-sm flex items-center gap-1"
-                        title="Remove from queue"
-                      >
-                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                        Remove
-                      </button>
                     </div>
-                  )}
+
+                    <div className="flex-1 min-w-0">
+                      <div className="font-semibold text-sm text-neutral-900 dark:text-neutral-100 truncate" title={`${item.artist} - ${item.song}`}>
+                        {item.artist} - {item.song}
+                      </div>
+                      <div className="text-xs text-neutral-500 dark:text-neutral-400 truncate" title={item.album}>
+                        {item.trackNo && <span className="text-neutral-400 dark:text-neutral-500 mr-1">#{item.trackNo}</span>}
+                        {item.album}
+                        {item.genre && item.genre !== 'N/A' && (
+                          <span className="ml-2 px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-700 rounded text-[10px]">
+                            {item.genre}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {isDJ && (
+                      <div className="flex items-center gap-1.5 flex-shrink-0">
+                        {item.pos > 0 && (
+                          <button
+                            onClick={() => handleMoveToTop(item.uuid)}
+                            className="px-2.5 py-1.5 rounded-md bg-purple-500 text-white hover:bg-purple-600 text-xs font-bold shadow-sm flex items-center gap-1 cursor-pointer"
+                            title="Move to top"
+                          >
+                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 11l7-7 7 7M5 19l7-7 7 7" />
+                            </svg>
+                            Top
+                          </button>
+                        )}
+                        <button
+                          onClick={() => handleQueueShift(item.uuid, true)}
+                          className="px-2.5 py-1.5 rounded-md bg-green-500 text-white hover:bg-green-600 text-xs font-bold shadow-sm cursor-pointer"
+                          title="Play Next"
+                        >
+                          Play Next
+                        </button>
+                        <button
+                          onClick={() => handleSkip(item.uuid)}
+                          className="px-2.5 py-1.5 rounded-md bg-blue-500 text-white hover:bg-blue-600 text-xs font-bold shadow-sm cursor-pointer"
+                          title="Skip to this track"
+                        >
+                          Skip To
+                        </button>
+                        <button
+                          onClick={() => handleRemoveFromQueue(item.uuid)}
+                          className="px-2.5 py-1.5 rounded-md bg-red-500 text-white hover:bg-red-600 text-xs font-bold shadow-sm flex items-center gap-1 cursor-pointer"
+                          title="Remove from queue"
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                          Remove
+                        </button>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Mobile layout */}
+                  <div className="sm:hidden w-full space-y-2">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex items-center gap-2 min-w-0">
+                        {isDJ && (
+                          <span className="text-neutral-400" title="Drag to reorder">
+                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                              <path d="M8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8-12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
+                            </svg>
+                          </span>
+                        )}
+                        <span className={`text-sm font-bold ${index === 0 ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-500'}`}>
+                          #{item.pos + 1}
+                        </span>
+                      </div>
+
+                      {isDJ && (
+                        <div className="flex items-center gap-1">
+                          {item.pos > 0 && (
+                            <button
+                              onClick={() => handleMoveUp(item.uuid, item.pos)}
+                              className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 p-1 cursor-pointer"
+                              title="Move up"
+                            >
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+                              </svg>
+                            </button>
+                          )}
+                          <button
+                            onClick={() => handleMoveDown(item.uuid, item.pos)}
+                            className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 p-1 cursor-pointer"
+                            title="Move down"
+                          >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                          </button>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="min-w-0">
+                      <div className="font-semibold text-sm text-neutral-900 dark:text-neutral-100 break-words">
+                        {item.artist} - {item.song}
+                      </div>
+                      <div className="text-xs text-neutral-500 dark:text-neutral-400 break-words">
+                        {item.trackNo && <span className="text-neutral-400 dark:text-neutral-500 mr-1">#{item.trackNo}</span>}
+                        {item.album}
+                        {item.genre && item.genre !== 'N/A' && (
+                          <span className="ml-2 px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-700 rounded text-[10px] inline-block mt-1">
+                            {item.genre}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {isDJ && (
+                      <div className="grid grid-cols-2 gap-1.5">
+                        {item.pos > 0 && (
+                          <button
+                            onClick={() => handleMoveToTop(item.uuid)}
+                            className="px-2 py-1.5 rounded-md bg-purple-500 text-white hover:bg-purple-600 text-xs font-bold shadow-sm flex items-center justify-center gap-1 cursor-pointer"
+                            title="Move to top"
+                          >
+                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 11l7-7 7 7M5 19l7-7 7 7" />
+                            </svg>
+                            Top
+                          </button>
+                        )}
+                        <button
+                          onClick={() => handleQueueShift(item.uuid, true)}
+                          className="px-2 py-1.5 rounded-md bg-green-500 text-white hover:bg-green-600 text-xs font-bold shadow-sm cursor-pointer"
+                          title="Play Next"
+                        >
+                          Play Next
+                        </button>
+                        <button
+                          onClick={() => handleSkip(item.uuid)}
+                          className="px-2 py-1.5 rounded-md bg-blue-500 text-white hover:bg-blue-600 text-xs font-bold shadow-sm cursor-pointer"
+                          title="Skip to this track"
+                        >
+                          Skip To
+                        </button>
+                        <button
+                          onClick={() => handleRemoveFromQueue(item.uuid)}
+                          className="px-2 py-1.5 rounded-md bg-red-500 text-white hover:bg-red-600 text-xs font-bold shadow-sm flex items-center justify-center gap-1 cursor-pointer"
+                          title="Remove from queue"
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                          Remove
+                        </button>
+                      </div>
+                    )}
+                  </div>
                 </div>
               ))}
             </div>
diff --git a/src/components/RandomMsg.tsx b/src/components/RandomMsg.tsx
index 13bb8d2..6312f7e 100644
--- a/src/components/RandomMsg.tsx
+++ b/src/components/RandomMsg.tsx
@@ -22,9 +22,15 @@ export default function RandomMsg(): React.ReactElement {
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const data = await response.json();
       if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?\>/gi, "\n"));
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("api:status", { detail: { reachable: true } }));
+      }
     } catch (err) {
       console.error("Failed to fetch random message:", err);
       setResponseTime(null);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("api:status", { detail: { reachable: false } }));
+      }
     }
   };
 
diff --git a/src/components/TRip/BreadcrumbNav.tsx b/src/components/TRip/BreadcrumbNav.tsx
index 4731b3e..e2778ea 100644
--- a/src/components/TRip/BreadcrumbNav.tsx
+++ b/src/components/TRip/BreadcrumbNav.tsx
@@ -24,7 +24,6 @@ export default function BreadcrumbNav({ currentPage }: BreadcrumbNavProps): Reac
                     <React.Fragment key={key}>
                         <a
                             href={href}
-                            data-astro-reload
                             className={`px-3 py-1.5 rounded-full transition-colors ${isActive
                                 ? "bg-neutral-200 dark:bg-neutral-700 font-semibold text-neutral-900 dark:text-white"
                                 : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800"
diff --git a/src/components/TRip/MediaRequestForm.tsx b/src/components/TRip/MediaRequestForm.tsx
index 26b5921..1adf955 100644
--- a/src/components/TRip/MediaRequestForm.tsx
+++ b/src/components/TRip/MediaRequestForm.tsx
@@ -59,6 +59,21 @@ interface Video {
     release_date?: string; // snake_case variant
 }
 
+interface Playlist {
+    id: string | number;
+    title?: string;
+    name?: string;
+    description?: string;
+    creator?: string;
+    owner?: string;
+    tracks_count?: number;
+    number_of_tracks?: number;
+    total_tracks?: number;
+    square_image_url?: string;
+    image?: string;
+    cover?: string;
+}
+
 interface DiskSpaceInfo {
     total?: number;
     used?: number;
@@ -80,6 +95,7 @@ interface SearchArtistsFn {
 
 export default function MediaRequestForm() {
     const [type, setType] = useState("artist");
+    const [requestTab, setRequestTab] = useState<"music" | "videos" | "playlists">("music");
     const [selectedArtist, setSelectedArtist] = useState<Artist | null>(null);
     const [artistInput, setArtistInput] = useState("");
     const [albumInput, setAlbumInput] = useState("");
@@ -118,6 +134,17 @@ export default function MediaRequestForm() {
     const [showVideoSection, setShowVideoSection] = useState(false);
     const videoAbortRef = useRef<AbortController | null>(null);
 
+    // Playlist search state
+    const [playlistSearchQuery, setPlaylistSearchQuery] = useState("");
+    const [playlistResults, setPlaylistResults] = useState<Playlist[]>([]);
+    const [isPlaylistSearching, setIsPlaylistSearching] = useState(false);
+    const [selectedPlaylists, setSelectedPlaylists] = useState<Set<string | number>>(new Set());
+    const [showPlaylistSection, setShowPlaylistSection] = useState(false);
+    const [playlistTracksById, setPlaylistTracksById] = useState<Record<string | number, Track[]>>({});
+    const [selectedPlaylistTrackIds, setSelectedPlaylistTrackIds] = useState<Record<string | number, string[] | null>>({});
+    const [expandedPlaylists, setExpandedPlaylists] = useState<Set<string | number>>(new Set());
+    const [loadingPlaylistId, setLoadingPlaylistId] = useState<string | number | null>(null);
+
     const resetVideoState = () => {
         videoAbortRef.current?.abort();
         if (videoStreamUrl?.startsWith("blob:")) URL.revokeObjectURL(videoStreamUrl);
@@ -130,6 +157,17 @@ export default function MediaRequestForm() {
         setIsVideoLoading(false);
     };
 
+    const resetPlaylistState = () => {
+        setPlaylistResults([]);
+        setSelectedPlaylists(new Set());
+        setPlaylistSearchQuery("");
+        setIsPlaylistSearching(false);
+        setPlaylistTracksById({});
+        setSelectedPlaylistTrackIds({});
+        setExpandedPlaylists(new Set());
+        setLoadingPlaylistId(null);
+    };
+
     const { attachScrollFix, cleanupScrollFix } = useAutoCompleteScrollFix();
 
     const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -520,8 +558,12 @@ export default function MediaRequestForm() {
         toast.dismiss();
         setIsSearching(true);
         resetQueueState();
-        const videosWereOpen = showVideoSection;
-        resetVideoState();
+
+        if (requestTab === "music") {
+            resetVideoState();
+            resetPlaylistState();
+        }
+
         setShuffleAlbums({});
         if (audioRef.current) {
             audioRef.current.pause();
@@ -531,59 +573,80 @@ export default function MediaRequestForm() {
         setIsAudioPlaying(false);
         setAudioLoadingTrackId(null);
         setCurrentTrackId(null);
-        try {
-            if (metadataFetchToastId.current) toast.dismiss(metadataFetchToastId.current);
-        } catch (err) {
-        }
-        metadataFetchToastId.current = toast.info("Retrieving metadata...",
-            {
-                autoClose: false,
-                progress: 0,
-                closeOnClick: false,
-            }
-        );
-        if (type === "artist") {
-            if (!selectedArtist) {
-                toast.error("Please select a valid artist from suggestions.");
-                setIsSearching(false);
-                return;
-            }
-
-            setSelectedItem({ ...selectedArtist, name: selectedArtist.artist || selectedArtist.name || "" });
-
+        if (requestTab === "music") {
             try {
-                const res = await authFetch(
-                    `${API_URL}/trip/get_albums_by_artist_id/${selectedArtist.id}?quality=${quality}`
-                );
-                if (!res.ok) throw new Error("API error");
-                const data = await res.json();
-
-                data.sort((a, b) =>
-                    (b.release_date || "").localeCompare(a.release_date || "")
-                );
-
-                setAlbums(data);
-                setShuffleAlbums({});
-                setTracksByAlbum({});
-                setExpandedAlbums([]);
-
-                // Set selectedTracks for all albums as null (means tracks loading/not loaded)
-                setSelectedTracks(
-                    data.reduce((acc, album) => {
-                        acc[album.id] = null;
-                        return acc;
-                    }, {})
-                );
-
-                // If the video section was open before, auto-fetch videos for the new artist
-                if (videosWereOpen && selectedArtist) {
-                    fetchArtistVideos(selectedArtist.id);
-                }
+                if (metadataFetchToastId.current) toast.dismiss(metadataFetchToastId.current);
             } catch (err) {
-                toast.error("Failed to fetch albums for artist.");
-                setAlbums([]);
-                setTracksByAlbum({});
-                setSelectedTracks({});
+            }
+            metadataFetchToastId.current = toast.info("Retrieving metadata...",
+                {
+                    autoClose: false,
+                    progress: 0,
+                    closeOnClick: false,
+                }
+            );
+        }
+        if (type === "artist") {
+            if (requestTab === "music") {
+                if (!selectedArtist) {
+                    toast.error("Please select a valid artist from suggestions.");
+                    setIsSearching(false);
+                    return;
+                }
+
+                setSelectedItem({ ...selectedArtist, name: selectedArtist.artist || selectedArtist.name || "" });
+
+                try {
+                    const res = await authFetch(
+                        `${API_URL}/trip/get_albums_by_artist_id/${selectedArtist.id}?quality=${quality}`
+                    );
+                    if (!res.ok) throw new Error("API error");
+                    const data = await res.json();
+
+                    data.sort((a, b) =>
+                        (b.release_date || "").localeCompare(a.release_date || "")
+                    );
+
+                    setAlbums(data);
+                    setShuffleAlbums({});
+                    setTracksByAlbum({});
+                    setExpandedAlbums([]);
+
+                    setSelectedTracks(
+                        data.reduce((acc, album) => {
+                            acc[album.id] = null;
+                            return acc;
+                        }, {})
+                    );
+                } catch (err) {
+                    toast.error("Failed to fetch albums for artist.");
+                    setAlbums([]);
+                    setTracksByAlbum({});
+                    setSelectedTracks({});
+                }
+            } else if (requestTab === "videos") {
+                setShowVideoSection(true);
+                if (selectedArtist) {
+                    await fetchArtistVideos(selectedArtist.id);
+                } else {
+                    const fallbackQuery = videoSearchQuery.trim() || artistInput.trim();
+                    if (!fallbackQuery) {
+                        toast.error("Select an artist or enter a video search query.");
+                        setIsSearching(false);
+                        return;
+                    }
+                    await searchVideos(fallbackQuery);
+                }
+            } else if (requestTab === "playlists") {
+                setShowPlaylistSection(true);
+                const fallbackQuery = playlistSearchQuery.trim() || selectedArtist?.artist || selectedArtist?.name || artistInput.trim();
+                if (!fallbackQuery) {
+                    toast.error("Select an artist or enter a playlist search query.");
+                    setIsSearching(false);
+                    return;
+                }
+                if (!playlistSearchQuery.trim()) setPlaylistSearchQuery(fallbackQuery);
+                await searchPlaylists(fallbackQuery);
             }
         } else if (type === "album") {
             if (!artistInput.trim() || !albumInput.trim()) {
@@ -750,8 +813,8 @@ export default function MediaRequestForm() {
     // VIDEO SEARCH & PLAYBACK
     // ========================
 
-    const searchVideos = async () => {
-        const query = videoSearchQuery.trim();
+    const searchVideos = async (overrideQuery?: string) => {
+        const query = (overrideQuery ?? videoSearchQuery).trim();
         if (!query) {
             toast.error("Please enter a search query.");
             return;
@@ -801,6 +864,233 @@ export default function MediaRequestForm() {
         }
     };
 
+    const normalizePlaylistsResponse = (data: any): Playlist[] => {
+        if (Array.isArray(data)) return data;
+        if (Array.isArray(data?.playlists)) return data.playlists;
+        if (Array.isArray(data?.items)) return data.items;
+        if (Array.isArray(data?.results)) return data.results;
+        return [];
+    };
+
+    const getPlaylistTitle = (playlist: Playlist) => {
+        return playlist.title || playlist.name || `Playlist ${playlist.id}`;
+    };
+
+    const getPlaylistTrackCount = (playlist: Playlist) => {
+        return playlist.number_of_tracks ?? playlist.tracks_count ?? playlist.total_tracks ?? null;
+    };
+
+    const normalizeApiId = (value: string | number) => {
+        if (typeof value === "number") return value;
+        const trimmed = String(value).trim();
+        return /^\d+$/.test(trimmed) ? Number(trimmed) : trimmed;
+    };
+
+    const searchPlaylists = async (overrideQuery?: string) => {
+        const query = (overrideQuery ?? playlistSearchQuery).trim();
+        if (!query) {
+            toast.error("Please enter a playlist search query.");
+            return;
+        }
+
+        setIsPlaylistSearching(true);
+        setPlaylistResults([]);
+        setSelectedPlaylists(new Set());
+
+        try {
+            const res = await authFetch(`${API_URL}/trip/playlists/search?q=${encodeURIComponent(query)}&limit=50`);
+            if (!res.ok) throw new Error("API error");
+            const data = await res.json();
+            const playlists = normalizePlaylistsResponse(data);
+            setPlaylistResults(playlists);
+            setPlaylistTracksById({});
+            setExpandedPlaylists(new Set());
+            setSelectedPlaylistTrackIds(
+                playlists.reduce((acc: Record<string | number, string[] | null>, p: Playlist) => {
+                    acc[p.id] = null;
+                    return acc;
+                }, {})
+            );
+        } catch (err) {
+            toast.error("Failed to search playlists.");
+            setPlaylistResults([]);
+        } finally {
+            setIsPlaylistSearching(false);
+        }
+    };
+
+    const fetchPlaylistTracks = async (playlistId: string | number) => {
+        if (playlistTracksById[playlistId]) return;
+
+        setLoadingPlaylistId(playlistId);
+        try {
+            const res = await authFetch(`${API_URL}/trip/get_tracks_by_playlist_id/${playlistId}`);
+            if (!res.ok) throw new Error("API error");
+            const data = await res.json();
+            const tracks: Track[] = Array.isArray(data) ? data : data?.tracks || data?.items || [];
+            setPlaylistTracksById((prev) => ({ ...prev, [playlistId]: tracks }));
+            setSelectedPlaylistTrackIds((prev) => ({
+                ...prev,
+                [playlistId]: tracks.map((t) => String(t.id)),
+            }));
+        } catch (err) {
+            toast.error("Failed to fetch playlist tracks.");
+            setPlaylistTracksById((prev) => ({ ...prev, [playlistId]: [] }));
+            setSelectedPlaylistTrackIds((prev) => ({ ...prev, [playlistId]: [] }));
+        } finally {
+            setLoadingPlaylistId(null);
+        }
+    };
+
+    const togglePlaylistExpanded = async (playlistId: string | number) => {
+        const isExpanded = expandedPlaylists.has(playlistId);
+        const next = new Set(expandedPlaylists);
+        if (isExpanded) {
+            next.delete(playlistId);
+        } else {
+            next.add(playlistId);
+        }
+        setExpandedPlaylists(next);
+        if (!isExpanded) {
+            await fetchPlaylistTracks(playlistId);
+        }
+    };
+
+    const togglePlaylistTrack = (playlistId: string | number, trackId: string | number) => {
+        setSelectedPlaylistTrackIds((prev) => {
+            const current = new Set(prev[playlistId] || []);
+            const key = String(trackId);
+            if (current.has(key)) current.delete(key);
+            else current.add(key);
+            return { ...prev, [playlistId]: Array.from(current) };
+        });
+    };
+
+    const togglePlaylistAllTracks = (playlistId: string | number) => {
+        const tracks = playlistTracksById[playlistId] || [];
+        const allIds = tracks.map((t) => String(t.id));
+        setSelectedPlaylistTrackIds((prev) => {
+            const current = prev[playlistId] || [];
+            const allSelected = current.length === allIds.length && allIds.length > 0;
+            return { ...prev, [playlistId]: allSelected ? [] : allIds };
+        });
+    };
+
+    const toggleAllPlaylistTracks = () => {
+        const loadedPlaylistIds = playlistResults
+            .map((p) => p.id)
+            .filter((id) => Array.isArray(playlistTracksById[id]));
+
+        if (loadedPlaylistIds.length === 0) {
+            toast.info("Expand a playlist first to load tracks.");
+            return;
+        }
+
+        const allSelected = loadedPlaylistIds.every((id) => {
+            const tracks = playlistTracksById[id] || [];
+            const selected = selectedPlaylistTrackIds[id] || [];
+            return tracks.length > 0 && selected.length === tracks.length;
+        });
+
+        setSelectedPlaylistTrackIds((prev) => {
+            const next = { ...prev };
+            loadedPlaylistIds.forEach((id) => {
+                const tracks = playlistTracksById[id] || [];
+                next[id] = allSelected ? [] : tracks.map((t) => String(t.id));
+            });
+            return next;
+        });
+    };
+
+    const togglePlaylistSelection = (playlistId: string | number) => {
+        setSelectedPlaylists((prev) => {
+            const next = new Set(prev);
+            if (next.has(playlistId)) next.delete(playlistId);
+            else next.add(playlistId);
+            return next;
+        });
+    };
+
+    const handleSubmitPlaylistRequest = async () => {
+        const selectedTrackIds = Object.values(selectedPlaylistTrackIds)
+            .filter((arr): arr is string[] => Array.isArray(arr))
+            .flat();
+
+        setIsSubmitting(true);
+        try {
+            if (selectedTrackIds.length > 0) {
+                const target = selectedArtist?.artist || selectedArtist?.name || playlistSearchQuery || "Playlists";
+                const response = await authFetch(`${API_URL}/trip/bulk_fetch`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json; charset=utf-8" },
+                    body: JSON.stringify({
+                        track_ids: selectedTrackIds.map((id) => normalizeApiId(id)),
+                        target,
+                        quality,
+                    }),
+                });
+
+                if (!response.ok) throw new Error("API error");
+
+                toast.success(`Playlist request submitted! (${selectedTrackIds.length} tracks)`, {
+                    autoClose: 3000,
+                    onClose: () => {
+                        if (typeof window !== 'undefined') window.location.href = '/TRip/requests';
+                    }
+                });
+                setSelectedPlaylistTrackIds((prev) => {
+                    const next = { ...prev };
+                    Object.keys(next).forEach((k) => {
+                        next[k] = [];
+                    });
+                    return next;
+                });
+                return;
+            }
+
+            if (selectedPlaylists.size === 0) {
+                toast.error("Please select at least one playlist.");
+                return;
+            }
+
+            const selected = playlistResults.filter((p) => selectedPlaylists.has(p.id));
+            if (selected.length === 0) {
+                toast.error("Selected playlists are no longer available.");
+                return;
+            }
+
+            let successCount = 0;
+            for (const playlist of selected) {
+                const response = await authFetch(`${API_URL}/trip/playlists/bulk_fetch`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json; charset=utf-8" },
+                    body: JSON.stringify({
+                        playlist_id: normalizeApiId(playlist.id),
+                        target: getPlaylistTitle(playlist),
+                        quality,
+                    }),
+                });
+                if (response.ok) successCount += 1;
+            }
+
+            if (successCount > 0) {
+                toast.success(`Playlist request submitted! (${successCount}/${selected.length})`, {
+                    autoClose: 3000,
+                    onClose: () => {
+                        if (typeof window !== 'undefined') window.location.href = '/TRip/requests';
+                    }
+                });
+                setSelectedPlaylists(new Set());
+            } else {
+                toast.error("Failed to submit playlist request.");
+            }
+        } catch (err) {
+            toast.error("Failed to submit playlist request.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
     const toggleVideoSelection = (videoId: string | number) => {
         setSelectedVideos((prev) => {
             const next = new Set(prev);
@@ -1396,10 +1686,38 @@ export default function MediaRequestForm() {
             )}
 
             <h2 className="text-2xl sm:text-3xl font-bold tracking-tight mb-2">New Request</h2>
-            <p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">Search for an artist to browse and select tracks for download.</p>
+            <p className="text-neutral-500 dark:text-neutral-400 text-sm mb-4">
+                {requestTab === "music" && "Search for an artist to browse and select tracks for download."}
+                {requestTab === "videos" && "Search and submit music video bulk-fetch requests."}
+                {requestTab === "playlists" && "Search and submit playlist bulk-fetch requests."}
+            </p>
+
+            <div className="mb-6 inline-flex rounded-lg border border-neutral-300 dark:border-neutral-700 overflow-hidden">
+                <button
+                    type="button"
+                    onClick={() => setRequestTab("music")}
+                    className={`px-4 py-2 text-sm font-medium ${requestTab === "music" ? "bg-blue-600 text-white" : "bg-white dark:bg-neutral-900 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`}
+                >
+                    Music
+                </button>
+                <button
+                    type="button"
+                    onClick={() => setRequestTab("videos")}
+                    className={`px-4 py-2 text-sm font-medium border-l border-neutral-300 dark:border-neutral-700 ${requestTab === "videos" ? "bg-blue-600 text-white" : "bg-white dark:bg-neutral-900 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`}
+                >
+                    Videos
+                </button>
+                <button
+                    type="button"
+                    onClick={() => setRequestTab("playlists")}
+                    className={`px-4 py-2 text-sm font-medium border-l border-neutral-300 dark:border-neutral-700 ${requestTab === "playlists" ? "bg-blue-600 text-white" : "bg-white dark:bg-neutral-900 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`}
+                >
+                    Playlists
+                </button>
+            </div>
             <div className="flex flex-col gap-6">
                 <div className="flex flex-col gap-4">
-                    <label htmlFor="artistInput">Artist: </label>
+                    <label htmlFor="artistInput">Artist{requestTab === "playlists" ? " (optional)" : ""}: </label>
                     <AutoComplete
                         id="artistInput"
                         ref={autoCompleteRef}
@@ -1418,17 +1736,6 @@ export default function MediaRequestForm() {
                         itemTemplate={artistItemTemplate}
                     />
 
-                    {(type === "album" || type === "track") && (
-                        <input
-                            type="text"
-                            className="w-full dark:bg-neutral-800 dark:text-white border border-neutral-300 dark:border-neutral-600 rounded px-3 py-2"
-                            value={type === "album" ? albumInput : trackInput}
-                            onChange={(e) =>
-                                type === "album" ? setAlbumInput(e.target.value) : setTrackInput(e.target.value)
-                            }
-                            placeholder={type === "album" ? "Album" : "Track"}
-                        />
-                    )}
                     <div className="flex items-center gap-4 justify-end mt-2">
                         <label htmlFor="qualitySelect" className="text-sm font-medium">
                             Quality:
@@ -1448,16 +1755,18 @@ export default function MediaRequestForm() {
                         {isSearching ? (
                             <span className="flex items-center gap-2">
                                 <span className="animate-spin h-4 w-4 border-2 border-t-2 border-gray-200 border-t-primary rounded-full"></span>
-                                Searching...
+                                {requestTab === "music" ? "Searching..." : "Loading..."}
                             </span>
                         ) : (
-                            "Search"
+                            requestTab === "music" ? "Search" : requestTab === "videos" ? "Load Videos" : "Load Playlists"
                         )}
                     </Button>
                 </div>
 
-                {type === "artist" && albums.length > 0 && (
+                {type === "artist" && (
                     <>
+                        {requestTab === "music" && albums.length > 0 && (
+                            <>
                         <div className="flex flex-col gap-2 mb-2 sm:flex-row sm:items-center sm:justify-between">
                             <div className="text-sm text-neutral-600 dark:text-neutral-400 text-center sm:text-left">
                                 <strong className="mr-2">Albums:</strong> {totalAlbums}
@@ -1682,9 +1991,11 @@ export default function MediaRequestForm() {
                                 )}
                             </Button>
                         </div>
+                            </>
+                        )}
 
                         {/* Videos Section - Show when artist is selected or videos are loaded */}
-                        {(selectedArtist || (showVideoSection && videoResults.length > 0)) && (
+                        {requestTab === "videos" && (
                             <div className="mt-8 pt-6 border-t border-neutral-200 dark:border-neutral-700">
                                 <div className="flex items-center justify-between mb-4">
                                     <h3 className="text-lg font-semibold flex items-center gap-2">
@@ -1737,7 +2048,7 @@ export default function MediaRequestForm() {
                                             />
                                             <button
                                                 type="button"
-                                                onClick={searchVideos}
+                                                onClick={() => searchVideos()}
                                                 disabled={isVideoSearching}
                                                 className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                             >
@@ -1922,6 +2233,238 @@ export default function MediaRequestForm() {
                                 )}
                             </div>
                         )}
+
+                        {/* Playlists Section */}
+                        {requestTab === "playlists" && (
+                        <div className="mt-8 pt-6 border-t border-neutral-200 dark:border-neutral-700">
+                            <div className="flex items-center justify-between mb-4">
+                                <h3 className="text-lg font-semibold flex items-center gap-2">
+                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2z" />
+                                    </svg>
+                                    Playlists
+                                </h3>
+                                <button
+                                    type="button"
+                                    className={`px-3 py-1.5 text-sm font-medium rounded-md border transition-colors
+                                        ${showPlaylistSection
+                                            ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700'
+                                            : 'border-neutral-400 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'}
+                                        disabled:opacity-50 disabled:cursor-not-allowed`}
+                                    onClick={() => {
+                                        if (!showPlaylistSection) {
+                                            const defaultQuery = selectedArtist?.artist || selectedArtist?.name || artistInput;
+                                            if (defaultQuery && !playlistSearchQuery) setPlaylistSearchQuery(defaultQuery);
+                                        }
+                                        setShowPlaylistSection(!showPlaylistSection);
+                                    }}
+                                    disabled={isPlaylistSearching}
+                                >
+                                    {showPlaylistSection ? "Hide Playlists" : "Browse Playlists"}
+                                </button>
+                            </div>
+
+                            {showPlaylistSection && (
+                                <div className="space-y-4">
+                                    <div className="flex gap-2">
+                                        <input
+                                            type="text"
+                                            value={playlistSearchQuery}
+                                            onChange={(e) => setPlaylistSearchQuery(e.target.value)}
+                                            onKeyDown={(e) => e.key === "Enter" && searchPlaylists()}
+                                            placeholder="Search playlists..."
+                                            className="flex-1 px-3 py-2 rounded border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-black dark:text-white"
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => searchPlaylists()}
+                                            disabled={isPlaylistSearching}
+                                            className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                        >
+                                            {isPlaylistSearching ? <InlineSpinner sizeClass="h-4 w-4" /> : "Search"}
+                                        </button>
+                                    </div>
+
+                                    {playlistResults.length > 0 && (
+                                        <div className="flex items-center justify-between">
+                                            <span className="text-sm text-neutral-600 dark:text-neutral-400">
+                                                <strong>{playlistResults.length}</strong> playlist{playlistResults.length !== 1 ? 's' : ''} found
+                                            </span>
+                                            <div className="flex items-center gap-3">
+                                                <a
+                                                    href="#"
+                                                    role="button"
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        if (selectedPlaylists.size === playlistResults.length) {
+                                                            setSelectedPlaylists(new Set());
+                                                        } else {
+                                                            setSelectedPlaylists(new Set(playlistResults.map((p) => p.id)));
+                                                        }
+                                                    }}
+                                                    className="text-sm text-blue-600 hover:underline cursor-pointer"
+                                                >
+                                                    {selectedPlaylists.size === playlistResults.length ? 'Uncheck All Playlists' : 'Check All Playlists'}
+                                                </a>
+                                                <a
+                                                    href="#"
+                                                    role="button"
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        toggleAllPlaylistTracks();
+                                                    }}
+                                                    className="text-sm text-blue-600 hover:underline cursor-pointer"
+                                                >
+                                                    Check / Uncheck Loaded Tracks
+                                                </a>
+                                            </div>
+                                        </div>
+                                    )}
+
+                                    {playlistResults.length > 0 ? (
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                            {playlistResults.map((playlist) => {
+                                                const title = getPlaylistTitle(playlist);
+                                                const trackCount = getPlaylistTrackCount(playlist);
+                                                const coverUrl = playlist.square_image_url || playlist.image || playlist.cover;
+                                                return (
+                                                    <div
+                                                        key={playlist.id}
+                                                        className={`rounded-lg border p-3 transition-all ${
+                                                            selectedPlaylists.has(playlist.id)
+                                                                ? "border-blue-500 ring-2 ring-blue-500/30"
+                                                                : "border-neutral-200 dark:border-neutral-700"
+                                                        }`}
+                                                    >
+                                                        <div className="flex items-start gap-3">
+                                                            <input
+                                                                type="checkbox"
+                                                                checked={selectedPlaylists.has(playlist.id)}
+                                                                onChange={() => togglePlaylistSelection(playlist.id)}
+                                                                className="mt-1 cursor-pointer"
+                                                            />
+                                                            {coverUrl ? (
+                                                                <img
+                                                                    src={coverUrl}
+                                                                    alt={title}
+                                                                    className="w-14 h-14 rounded-md object-cover border border-neutral-200 dark:border-neutral-700 shrink-0"
+                                                                    loading="lazy"
+                                                                />
+                                                            ) : (
+                                                                <div className="w-14 h-14 rounded-md bg-neutral-200 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 shrink-0 flex items-center justify-center text-neutral-500">
+                                                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2z" />
+                                                                    </svg>
+                                                                </div>
+                                                            )}
+                                                            <div className="flex-1 min-w-0">
+                                                                <button
+                                                                    type="button"
+                                                                    onClick={() => togglePlaylistExpanded(playlist.id)}
+                                                                    className="font-medium text-sm text-left w-full truncate hover:text-blue-600"
+                                                                    title={title}
+                                                                >
+                                                                    {title}
+                                                                </button>
+                                                                {playlist.creator || playlist.owner ? (
+                                                                    <p className="text-xs text-neutral-500 truncate">by {playlist.creator || playlist.owner}</p>
+                                                                ) : null}
+                                                                {playlist.description ? (
+                                                                    <p className="text-xs text-neutral-500 line-clamp-2 mt-1" title={playlist.description}>{playlist.description}</p>
+                                                                ) : null}
+                                                                <div className="mt-1 text-xs text-neutral-500">
+                                                                    {trackCount !== null ? `${trackCount} tracks` : `ID: ${playlist.id}`}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        {expandedPlaylists.has(playlist.id) && (
+                                                            <div className="mt-3 border-t border-neutral-200 dark:border-neutral-700 pt-2 pl-7 sm:pl-0">
+                                                                {loadingPlaylistId === playlist.id && (
+                                                                    <div className="text-xs text-neutral-500">Loading tracks...</div>
+                                                                )}
+
+                                                                {loadingPlaylistId !== playlist.id && (
+                                                                    <>
+                                                                        <div className="mb-2 flex items-center justify-between">
+                                                                            <span className="text-xs text-neutral-500">
+                                                                                {(playlistTracksById[playlist.id] || []).length} track{(playlistTracksById[playlist.id] || []).length !== 1 ? 's' : ''}
+                                                                            </span>
+                                                                            <a
+                                                                                href="#"
+                                                                                role="button"
+                                                                                onClick={(e) => {
+                                                                                    e.preventDefault();
+                                                                                    togglePlaylistAllTracks(playlist.id);
+                                                                                }}
+                                                                                className="text-xs text-blue-600 hover:underline"
+                                                                            >
+                                                                                Check / Uncheck All
+                                                                            </a>
+                                                                        </div>
+
+                                                                        <ul className="max-h-56 overflow-y-auto space-y-1 pr-1" data-lenis-prevent>
+                                                                            {(playlistTracksById[playlist.id] || []).map((track) => (
+                                                                                <li key={track.id} className="flex items-start gap-2 text-xs rounded-md px-2 py-1.5 bg-neutral-100/70 dark:bg-neutral-800/70 border border-neutral-200 dark:border-neutral-700">
+                                                                                    <input
+                                                                                        type="checkbox"
+                                                                                        checked={(selectedPlaylistTrackIds[playlist.id] || []).includes(String(track.id))}
+                                                                                        onChange={() => togglePlaylistTrack(playlist.id, track.id)}
+                                                                                        className="mt-0.5 cursor-pointer"
+                                                                                    />
+                                                                                    <div className="min-w-0 flex-1">
+                                                                                        <div className="text-neutral-800 dark:text-neutral-200 break-words leading-snug">
+                                                                                            {track.artist ? `${track.artist} - ` : ''}{track.title}
+                                                                                        </div>
+                                                                                        <div className="text-[10px] text-neutral-500 mt-0.5 flex flex-wrap gap-2">
+                                                                                            <span>ID: {track.id}</span>
+                                                                                            {track.duration ? <span>{track.duration}</span> : null}
+                                                                                            {track.track_number ? <span># {track.track_number}</span> : null}
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </li>
+                                                                            ))}
+                                                                        </ul>
+                                                                    </>
+                                                                )}
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    ) : !isPlaylistSearching ? (
+                                        <div className="text-center py-8 text-neutral-500">
+                                            <p>No playlists found. Try a different query.</p>
+                                        </div>
+                                    ) : null}
+
+                                    {selectedPlaylists.size > 0 && (
+                                        <div className="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+                                            <span className="text-sm text-neutral-800 dark:text-neutral-200">
+                                                <strong>{selectedPlaylists.size}</strong> playlist{selectedPlaylists.size !== 1 ? "s" : ""} selected
+                                            </span>
+                                            <button
+                                                type="button"
+                                                onClick={handleSubmitPlaylistRequest}
+                                                disabled={isSubmitting}
+                                                className="px-4 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                            >
+                                                {isSubmitting ? (
+                                                    <span className="flex items-center gap-2">
+                                                        <InlineSpinner sizeClass="h-3 w-3" />
+                                                        Submitting...
+                                                    </span>
+                                                ) : (
+                                                    "Submit Playlist Request"
+                                                )}
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                        )}
                     </>
                 )
                 }
diff --git a/src/components/TRip/RequestManagement.tsx b/src/components/TRip/RequestManagement.tsx
index d6a93a4..391429e 100644
--- a/src/components/TRip/RequestManagement.tsx
+++ b/src/components/TRip/RequestManagement.tsx
@@ -65,8 +65,8 @@ export default function RequestManagement() {
     // Check if path is /storage/music/TRIP
     if (absPath.includes("/storage/music/TRIP/")) {
       return isVideo
-        ? `https://_music.codey.horse/TRIP/videos/${filename}`
-        : `https://_music.codey.horse/TRIP/${filename}`;
+        ? `https://trip.codey.horse/videos/${filename}`
+        : `https://trip.codey.horse/${filename}`;
     }
     
     // Otherwise, assume /storage/music2/completed/{quality} format
diff --git a/src/config.ts b/src/config.ts
index 7ee7a16..2eae7bd 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -63,7 +63,7 @@ export const RADIO_API_URL: string = "https://radio-api.codey.horse";
 export const socialLinks: Record<string, string> = {
 };
 
-export const MAJOR_VERSION: string = "0.8"
+export const MAJOR_VERSION: string = "1.1"
 export const RELEASE_FLAG: string | null = null;
 export const ENVIRONMENT: "Dev" | "Prod" = import.meta.env.DEV ? "Dev" : "Prod";
 
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index be981b0..cf91014 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -13,6 +13,7 @@ import { metaData } from "../config";
 import Nav from "./Nav.astro";
 import SubNav from "./SubNav.astro";
 import Footer from "../components/Footer.astro";
+import MiniRadioPlayer from "../components/MiniRadioPlayer.tsx";
 
 import "@fontsource/ibm-plex-sans/500.css";
 import "@fontsource/ibm-plex-sans/600.css";
@@ -57,6 +58,8 @@ if (!whitelabel) {
 // request locals.isSubsite, which we trust here, but as a fallback also use
 // the presence of a whitelabel mapping or a detected subsite path.
 const isSubsite = (Astro.request as any)?.locals?.isSubsite ?? Boolean(whitelabel || detectedSubsite);
+const normalizedPath = (Astro.url.pathname || '/').replace(/\/+$/, '') || '/';
+const isRadioPage = normalizedPath === '/radio';
 
 // Debug logging
 if (import.meta.env.DEV) {
@@ -94,7 +97,7 @@ if (import.meta.env.DEV) {
     </div>
     
     <main
-      class="flex-auto min-w-0 mt-6 md:mt-8 flex flex-col px-4 sm:px-6 md:px-0 max-w-3xl w-full pb-8">
+      class="flex-auto min-w-0 mt-6 md:mt-8 flex flex-col px-4 sm:px-6 md:px-0 max-w-3xl w-full pb-28 md:pb-24">
       <noscript>
   <div style="background: #f44336; color: white; padding: 1em; text-align: center;">
     This site requires JavaScript to function. Please enable JavaScript in your browser.
@@ -103,6 +106,7 @@ if (import.meta.env.DEV) {
       <slot />
       {!hideFooter && <Footer />}
     </main>
+    {!isSubsite && !isRadioPage && <MiniRadioPlayer client:only="react" />}
     <style>
       /* CSS rules for the page scrollbar */
       .scrollbar-hide::-webkit-scrollbar {
diff --git a/src/layouts/Nav.astro b/src/layouts/Nav.astro
index df37026..af2ce26 100644
--- a/src/layouts/Nav.astro
+++ b/src/layouts/Nav.astro
@@ -26,7 +26,6 @@ const baseNavItems: NavItem[] = [
   { label: "Home", href: "/" },
   { label: "Radio", href: "/radio" },
   { label: "Memes", href: "/memes" },
-  { label: "Git", href: "https://kode.boatson.boats", icon: "external" },
   {
     label: "TRip",
     href: "/TRip",
@@ -53,6 +52,7 @@ const baseNavItems: NavItem[] = [
       { label: "RI", href: "https://_r0.codey.horse", auth: true, icon: "external", adminOnly: true },
     ],
   },
+  { label: "Git", href: "https://kode.boatson.boats", icon: "external" },
   { label: "Login", href: "/login", guestOnly: true },
   ...(isLoggedIn ? [{ label: "Logout", href: "#logout", onclick: "handleLogout()" }] : []),
 ];
diff --git a/src/pages/TRip/index.astro b/src/pages/TRip/index.astro
index f08a481..9d6486f 100644
--- a/src/pages/TRip/index.astro
+++ b/src/pages/TRip/index.astro
@@ -14,7 +14,9 @@ const user = Astro.locals.user as any;
 
 <style is:global>
   /* Override main container width for TRip pages */
-  body:has(.trip-section) main {
+  html:has(.trip-section) main {
     max-width: 1400px !important;
+    width: 100% !important;
+    padding-bottom: 7rem !important;
   }
 </style>
diff --git a/src/pages/TRip/requests.astro b/src/pages/TRip/requests.astro
index 9690aa0..96c95b8 100644
--- a/src/pages/TRip/requests.astro
+++ b/src/pages/TRip/requests.astro
@@ -8,7 +8,7 @@ const user = Astro.locals.user as any;
 ---
 <Base title="TRip Requests" description="TRip Requests / Status">
   <section class="page-section trip-section" transition:animate="none">
-    <Root child="qs2.RequestManagement" client:only="react" transition:persist />
+    <Root child="qs2.RequestManagement" client:only="react" />
   </section>
 </Base>
 
@@ -17,5 +17,6 @@ const user = Astro.locals.user as any;
   html:has(.trip-section) main {
     max-width: 1400px !important;
     width: 100% !important;
+    padding-bottom: 7rem !important;
   }
 </style>
diff --git a/src/utils/hlsConfig.ts b/src/utils/hlsConfig.ts
new file mode 100644
index 0000000..d9fc864
--- /dev/null
+++ b/src/utils/hlsConfig.ts
@@ -0,0 +1,38 @@
+import type { HlsConfig } from "hls.js";
+
+// Shared HLS.js tuning for all players.
+// Source profile is 0.5s segments with 5 live segments (Liquidsoap),
+// so we keep live sync close while allowing enough headroom for network jitter.
+export const SHARED_HLS_CONFIG: Partial<HlsConfig> = {
+  // Live latency behavior
+  lowLatencyMode: false,
+  // Keep slightly more headroom so HLS doesn't need audible rate correction.
+  liveSyncDurationCount: 2,
+  // Keep a wider cushion before catch-up behavior is triggered.
+  liveMaxLatencyDurationCount: 6,
+  // Avoid "sped up" sounding playback during live edge catch-up.
+  maxLiveSyncPlaybackRate: 1,
+
+  // Buffer behavior (audio-only stream; keep lean for quicker station swaps)
+  maxBufferLength: 10,
+  maxMaxBufferLength: 20,
+  backBufferLength: 30,
+
+  // ABR smoothing for quick but stable quality adaptation
+  abrEwmaFastLive: 2,
+  abrEwmaSlowLive: 7,
+  abrBandWidthFactor: 0.9,
+  abrBandWidthUpFactor: 0.65,
+
+  // Loading / retry policy
+  manifestLoadingTimeOut: 8000,
+  levelLoadingTimeOut: 8000,
+  fragLoadingTimeOut: 12000,
+  manifestLoadingMaxRetry: 4,
+  levelLoadingMaxRetry: 4,
+  fragLoadingMaxRetry: 4,
+
+  // Runtime
+  startLevel: -1,
+  enableWorker: true,
+};
diff --git a/src/utils/liveCatchup.ts b/src/utils/liveCatchup.ts
new file mode 100644
index 0000000..22911ac
--- /dev/null
+++ b/src/utils/liveCatchup.ts
@@ -0,0 +1,134 @@
+import type Hls from "hls.js";
+
+const CATCHUP_MARKER = "__seriousfm_oneShotCatchupInstalled";
+
+type HlsWithMarker = Hls & {
+  [CATCHUP_MARKER]?: boolean;
+};
+
+type CatchupController = {
+  trigger: () => void;
+  cleanup: () => void;
+};
+
+const controllers = new WeakMap<Hls, CatchupController>();
+
+/**
+ * Apply a subtle one-shot live catch-up for a newly created HLS instance.
+ *
+ * Why: continuous live-edge catch-up can sound "sped up". We keep HLS auto catch-up
+ * disabled and do a very small temporary rate bump once, then return to 1.0.
+ */
+export function installOneShotLiveCatchup(hls: Hls, media: HTMLMediaElement): () => void {
+  const existing = controllers.get(hls);
+  if (existing) {
+    return existing.cleanup;
+  }
+
+  const tagged = hls as HlsWithMarker;
+  if (tagged[CATCHUP_MARKER]) {
+    return () => {};
+  }
+  tagged[CATCHUP_MARKER] = true;
+
+  let intervalId: ReturnType<typeof setInterval> | null = null;
+  let stopTimerId: ReturnType<typeof setTimeout> | null = null;
+  let running = false;
+
+  const setRate = (rate: number) => {
+    // Keep pitch stable where supported.
+    (media as any).preservesPitch = true;
+    (media as any).mozPreservesPitch = true;
+    (media as any).webkitPreservesPitch = true;
+    media.playbackRate = rate;
+  };
+
+  const resetRate = () => {
+    setRate(1);
+  };
+
+  const getExcessLatency = (): number | null => {
+    const latency = (hls as any).latency;
+    const targetLatency = (hls as any).targetLatency;
+    if (typeof latency !== "number" || typeof targetLatency !== "number") {
+      return null;
+    }
+    return latency - targetLatency;
+  };
+
+  const stopCatchup = () => {
+    if (intervalId) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+    if (stopTimerId) {
+      clearTimeout(stopTimerId);
+      stopTimerId = null;
+    }
+    running = false;
+    resetRate();
+  };
+
+  const tick = () => {
+    // If user paused/stopped, just stop the one-shot session.
+    if (media.paused || media.ended) {
+      stopCatchup();
+      return;
+    }
+
+    const excess = getExcessLatency();
+    if (excess === null) {
+      // Metric unavailable yet, keep waiting inside the bounded one-shot window.
+      return;
+    }
+
+    // Close enough to target live latency; stop and return to normal speed.
+    if (excess <= 0.35) {
+      stopCatchup();
+      return;
+    }
+
+    // Imperceptible speed-up profile.
+    if (excess > 6) {
+      setRate(1.03);
+    } else if (excess > 3) {
+      setRate(1.02);
+    } else {
+      setRate(1.01);
+    }
+  };
+
+  const trigger = () => {
+    if (running || media.paused || media.ended) return;
+    running = true;
+
+    // Slight delay so HLS latency metrics are populated after track transition.
+    stopTimerId = setTimeout(() => {
+      tick();
+      intervalId = setInterval(tick, 1500);
+
+      // Hard stop so this is always a bounded "one-time" correction.
+      stopTimerId = setTimeout(() => {
+        stopCatchup();
+      }, 35_000);
+    }, 900);
+  };
+
+  const cleanup = () => {
+    stopCatchup();
+  };
+
+  controllers.set(hls, { trigger, cleanup });
+
+  return cleanup;
+}
+
+/**
+ * Trigger subtle one-shot live catch-up for the current track transition.
+ */
+export function triggerOneShotLiveCatchup(hls: Hls | null, media: HTMLMediaElement | null): void {
+  if (!hls || !media) return;
+  const controller = controllers.get(hls);
+  if (!controller) return;
+  controller.trigger();
+}
diff --git a/src/utils/radioState.ts b/src/utils/radioState.ts
new file mode 100644
index 0000000..dcacdfc
--- /dev/null
+++ b/src/utils/radioState.ts
@@ -0,0 +1,577 @@
+// ═══════════════════════════════════════════════════════════════════════════════
+// GLOBAL RADIO STATE SINGLETON
+// Shared between MiniRadioPlayer and the full Radio page to ensure
+// playback continuity when navigating between pages.
+// ═══════════════════════════════════════════════════════════════════════════════
+
+import type Hls from "hls.js";
+
+export interface QualityLevel {
+  index: number;
+  bitrate: number;
+  name: string;
+  isLossless?: boolean;
+}
+
+export interface GlobalRadioState {
+  audio: HTMLAudioElement | null;
+  video: HTMLVideoElement | null;
+  hls: Hls | null;
+  isPlaying: boolean;
+  station: string;
+  qualityLevel: number;
+  qualityLevels: QualityLevel[];
+  // Track metadata for seamless handoff
+  trackTitle: string;
+  trackArtist: string;
+  trackAlbum: string;
+  coverArt: string;
+  trackUuid: string | null;
+}
+
+// Station type helpers
+export const VIDEO_STATIONS = ["videos"] as const;
+export type VideoStation = typeof VIDEO_STATIONS[number];
+
+export function isVideoStation(station: string): station is VideoStation {
+  return VIDEO_STATIONS.includes(station as VideoStation);
+}
+
+export function getStreamUrl(station: string): string {
+  if (isVideoStation(station)) {
+    return `https://stream.codey.horse/hls/videos/videos.m3u8`;
+  }
+  return `https://stream.codey.horse/hls/${station}/${station}.m3u8`;
+}
+
+const GLOBAL_KEY = "__seriousFmRadio";
+const RADIO_SHARED_STATE_KEY = "__seriousFmRadioSharedState";
+const RADIO_SYNC_PULSE_KEY = "__seriousFmRadioSyncPulse";
+const RADIO_SYNC_CHANNEL = "seriousfm-radio-sync-v1";
+
+const TAB_ID = typeof window === "undefined"
+  ? "server"
+  : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+type RadioSyncMessage = {
+  type: "PLAYBACK" | "STATE";
+  tabId: string;
+  at: number;
+  payload: Record<string, any>;
+};
+
+let syncInitialized = false;
+let syncChannel: BroadcastChannel | null = null;
+const handledSyncMessageKeys: string[] = [];
+
+function buildSyncMessageKey(message: RadioSyncMessage): string {
+  return `${message.tabId}|${message.type}|${message.at}|${JSON.stringify(message.payload || {})}`;
+}
+
+function markSyncMessageHandled(message: RadioSyncMessage): boolean {
+  const key = buildSyncMessageKey(message);
+  if (handledSyncMessageKeys.includes(key)) {
+    return false;
+  }
+  handledSyncMessageKeys.push(key);
+  if (handledSyncMessageKeys.length > 200) {
+    handledSyncMessageKeys.shift();
+  }
+  return true;
+}
+
+function readSharedSnapshot(): Partial<GlobalRadioState> | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(RADIO_SHARED_STATE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+function writeSharedSnapshot(state: GlobalRadioState): void {
+  if (typeof window === "undefined") return;
+  try {
+    const existingOwner = readPlaybackOwnerTabId();
+    const snapshot = {
+      station: state.station,
+      qualityLevel: state.qualityLevel,
+      qualityLevels: state.qualityLevels,
+      isPlaying: state.isPlaying,
+      playbackOwnerTabId: existingOwner,
+      trackTitle: state.trackTitle,
+      trackArtist: state.trackArtist,
+      trackAlbum: state.trackAlbum,
+      coverArt: state.coverArt,
+      trackUuid: state.trackUuid,
+      at: Date.now(),
+    };
+    localStorage.setItem(RADIO_SHARED_STATE_KEY, JSON.stringify(snapshot));
+  } catch {
+    // ignore
+  }
+}
+
+function readPlaybackOwnerTabId(): string | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(RADIO_SHARED_STATE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return typeof parsed?.playbackOwnerTabId === "string" ? parsed.playbackOwnerTabId : null;
+  } catch {
+    return null;
+  }
+}
+
+function writePlaybackOwnerTabId(ownerTabId: string | null): void {
+  if (typeof window === "undefined") return;
+  try {
+    const raw = localStorage.getItem(RADIO_SHARED_STATE_KEY);
+    const parsed = raw ? JSON.parse(raw) : {};
+    parsed.playbackOwnerTabId = ownerTabId;
+    parsed.at = Date.now();
+    localStorage.setItem(RADIO_SHARED_STATE_KEY, JSON.stringify(parsed));
+  } catch {
+    // ignore
+  }
+}
+
+function postSyncMessage(message: RadioSyncMessage): void {
+  if (typeof window === "undefined") return;
+  try {
+    if (syncChannel) {
+      syncChannel.postMessage(message);
+    }
+  } catch {
+    // ignore
+  }
+
+  // Fallback pulse for browsers/environments without BroadcastChannel support.
+  try {
+    localStorage.setItem(RADIO_SYNC_PULSE_KEY, JSON.stringify(message));
+  } catch {
+    // ignore
+  }
+}
+
+function applyRemoteState(payload: Record<string, any>): void {
+  const state = getGlobalRadioState();
+  const prevStation = state.station;
+  const prevQuality = state.qualityLevel;
+  const prevTrackUuid = state.trackUuid;
+
+  if (typeof payload.station === "string") {
+    state.station = payload.station;
+    try {
+      localStorage.setItem("radioStation", payload.station);
+    } catch {
+      // ignore
+    }
+  }
+
+  if (typeof payload.qualityLevel === "number") {
+    state.qualityLevel = payload.qualityLevel;
+    try {
+      localStorage.setItem("radioQuality", String(payload.qualityLevel));
+    } catch {
+      // ignore
+    }
+  }
+
+  if (Array.isArray(payload.qualityLevels)) state.qualityLevels = payload.qualityLevels;
+  if (typeof payload.isPlaying === "boolean") {
+    state.isPlaying = payload.isPlaying;
+    emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: payload.isPlaying });
+  }
+  if (typeof payload.trackTitle === "string") state.trackTitle = payload.trackTitle;
+  if (typeof payload.trackArtist === "string") state.trackArtist = payload.trackArtist;
+  if (typeof payload.trackAlbum === "string") state.trackAlbum = payload.trackAlbum;
+  if (typeof payload.coverArt === "string") state.coverArt = payload.coverArt;
+  if (typeof payload.trackUuid === "string" || payload.trackUuid === null) state.trackUuid = payload.trackUuid;
+
+  if (state.station !== prevStation) {
+    emitRadioEvent(RADIO_EVENTS.STATION_CHANGED, { station: state.station });
+  }
+  if (state.qualityLevel !== prevQuality) {
+    emitRadioEvent(RADIO_EVENTS.QUALITY_CHANGED, { quality: state.qualityLevel });
+  }
+  if (state.trackUuid !== prevTrackUuid) {
+    emitRadioEvent(RADIO_EVENTS.TRACK_CHANGED, {
+      title: state.trackTitle,
+      artist: state.trackArtist,
+      album: state.trackAlbum,
+      coverArt: state.coverArt,
+      uuid: state.trackUuid,
+    });
+  }
+}
+
+function handleSyncMessage(message: RadioSyncMessage): void {
+  if (!message || message.tabId === TAB_ID) return;
+  if (!markSyncMessageHandled(message)) return;
+
+  if (message.type === "PLAYBACK") {
+    const shouldBePlaying = !!message.payload?.isPlaying;
+    const state = getGlobalRadioState();
+    const ownerTabId = typeof message.payload?.ownerTabId === "string" ? message.payload.ownerTabId : null;
+    const mediaList = [state.audio, state.video].filter(Boolean) as Array<HTMLMediaElement>;
+
+    if (shouldBePlaying) {
+      if (ownerTabId && ownerTabId === TAB_ID) {
+        const media = getActiveMediaElement();
+        if (media) {
+          try {
+            media.playbackRate = 1;
+            const playPromise = media.play();
+            if (playPromise && typeof (playPromise as Promise<void>).catch === "function") {
+              (playPromise as Promise<void>).catch(() => {
+                // ignore autoplay/user-gesture restrictions
+              });
+            }
+          } catch {
+            // ignore
+          }
+        }
+        state.isPlaying = true;
+        writePlaybackOwnerTabId(ownerTabId);
+        emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
+        return;
+      }
+
+      for (const media of mediaList) {
+        if (media.paused || media.ended) continue;
+        try {
+          media.pause();
+        } catch {
+          // ignore
+        }
+      }
+      // Reflect that radio is playing in another tab while keeping this tab paused.
+      state.isPlaying = true;
+      if (ownerTabId) {
+        writePlaybackOwnerTabId(ownerTabId);
+      }
+      emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
+      return;
+    }
+
+    // Global pause request: pause any local media in this tab as well.
+    for (const media of mediaList) {
+      if (media.paused || media.ended) continue;
+      try {
+        media.pause();
+      } catch {
+        // ignore
+      }
+    }
+
+    if (ownerTabId) {
+      writePlaybackOwnerTabId(ownerTabId);
+    }
+    state.isPlaying = false;
+    emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: false });
+    return;
+  }
+
+  if (message.type === "STATE") {
+    applyRemoteState(message.payload || {});
+  }
+}
+
+function ensureCrossTabSync(): void {
+  if (typeof window === "undefined" || syncInitialized) return;
+  syncInitialized = true;
+
+  if (typeof BroadcastChannel !== "undefined") {
+    try {
+      syncChannel = new BroadcastChannel(RADIO_SYNC_CHANNEL);
+      syncChannel.onmessage = (event: MessageEvent<RadioSyncMessage>) => {
+        handleSyncMessage(event.data);
+      };
+    } catch {
+      syncChannel = null;
+    }
+  }
+
+  window.addEventListener("storage", (event) => {
+    if (!event.key) return;
+    if (event.key === RADIO_SYNC_PULSE_KEY && event.newValue) {
+      try {
+        handleSyncMessage(JSON.parse(event.newValue));
+      } catch {
+        // ignore
+      }
+      return;
+    }
+
+    if (event.key === RADIO_SHARED_STATE_KEY && event.newValue) {
+      try {
+        const snapshot = JSON.parse(event.newValue);
+        // Live playback state is coordinated via PLAYBACK messages; do not override
+        // it opportunistically from snapshot writes that can come from passive tabs.
+        const { isPlaying: _ignored, playbackOwnerTabId: _ignoredOwner, ...rest } = snapshot || {};
+        applyRemoteState(rest);
+      } catch {
+        // ignore
+      }
+    }
+  });
+}
+
+function syncStateAcrossTabs(partial: Record<string, any>): void {
+  if (typeof window === "undefined") return;
+  postSyncMessage({
+    type: "STATE",
+    tabId: TAB_ID,
+    at: Date.now(),
+    payload: partial,
+  });
+}
+
+function syncPlaybackAcrossTabs(isPlaying: boolean, ownerTabIdOverride?: string | null): void {
+  if (typeof window === "undefined") return;
+  const ownerTabId = ownerTabIdOverride !== undefined
+    ? ownerTabIdOverride
+    : (isPlaying ? TAB_ID : null);
+  postSyncMessage({
+    type: "PLAYBACK",
+    tabId: TAB_ID,
+    at: Date.now(),
+    payload: { isPlaying, ownerTabId },
+  });
+}
+
+export function getGlobalRadioState(): GlobalRadioState {
+  if (typeof window === "undefined") {
+    return {
+      audio: null,
+      video: null,
+      hls: null,
+      isPlaying: false,
+      station: "main",
+      qualityLevel: -1,
+      qualityLevels: [],
+      trackTitle: "",
+      trackArtist: "",
+      trackAlbum: "",
+      coverArt: "/images/radio_art_default.jpg",
+      trackUuid: null,
+    };
+  }
+
+  const w = window as any;
+  if (!w[GLOBAL_KEY]) {
+    const snapshot = readSharedSnapshot();
+    w[GLOBAL_KEY] = {
+      audio: null,
+      video: null,
+      hls: null,
+      isPlaying: typeof snapshot?.isPlaying === "boolean" ? snapshot.isPlaying : false,
+      station: snapshot?.station || localStorage.getItem("radioStation") || "main",
+      qualityLevel: typeof snapshot?.qualityLevel === "number"
+        ? snapshot.qualityLevel
+        : parseInt(localStorage.getItem("radioQuality") || "-1", 10),
+      qualityLevels: Array.isArray(snapshot?.qualityLevels) ? snapshot.qualityLevels : [],
+      trackTitle: snapshot?.trackTitle || "",
+      trackArtist: snapshot?.trackArtist || "",
+      trackAlbum: snapshot?.trackAlbum || "",
+      coverArt: snapshot?.coverArt || "/images/radio_art_default.jpg",
+      trackUuid: snapshot?.trackUuid ?? null,
+    };
+  }
+  ensureCrossTabSync();
+  return w[GLOBAL_KEY];
+}
+
+export function getOrCreateAudio(): HTMLAudioElement {
+  const state = getGlobalRadioState();
+  if (!state.audio) {
+    state.audio = document.createElement("audio");
+    state.audio.preload = "none";
+    state.audio.crossOrigin = "anonymous";
+    state.audio.setAttribute("playsinline", "true");
+    state.audio.setAttribute("webkit-playsinline", "true");
+  }
+  return state.audio;
+}
+
+export function getOrCreateVideo(): HTMLVideoElement {
+  const state = getGlobalRadioState();
+  if (!state.video) {
+    state.video = document.createElement("video");
+    state.video.preload = "none";
+    state.video.crossOrigin = "anonymous";
+    state.video.setAttribute("playsinline", "true");
+    state.video.setAttribute("webkit-playsinline", "true");
+    state.video.muted = false;
+  }
+  return state.video;
+}
+
+/** Returns the current media element (audio or video) based on station */
+export function getActiveMediaElement(): HTMLAudioElement | HTMLVideoElement | null {
+  const state = getGlobalRadioState();
+  if (isVideoStation(state.station)) {
+    return state.video;
+  }
+  return state.audio;
+}
+
+export function updateGlobalStation(station: string): void {
+  const state = getGlobalRadioState();
+  state.station = station;
+  // Reset metadata on station switch to avoid stale info bleeding across stations.
+  state.trackTitle = "";
+  state.trackArtist = "";
+  state.trackAlbum = "";
+  state.coverArt = "/images/radio_art_default.jpg";
+  state.trackUuid = null;
+  localStorage.setItem("radioStation", station);
+  writeSharedSnapshot(state);
+  syncStateAcrossTabs({
+    station,
+    trackTitle: "",
+    trackArtist: "",
+    trackAlbum: "",
+    coverArt: "/images/radio_art_default.jpg",
+    trackUuid: null,
+  });
+}
+
+export function updateGlobalQuality(qualityLevel: number): void {
+  const state = getGlobalRadioState();
+  state.qualityLevel = qualityLevel;
+  localStorage.setItem("radioQuality", qualityLevel.toString());
+  writeSharedSnapshot(state);
+  syncStateAcrossTabs({ qualityLevel });
+}
+
+export function updateGlobalPlayingState(isPlaying: boolean): void {
+  const state = getGlobalRadioState();
+
+  // Prevent passive tabs from stomping shared playing state owned by another tab.
+  if (!isPlaying) {
+    const currentOwner = readPlaybackOwnerTabId();
+    if (currentOwner && currentOwner !== TAB_ID) {
+      return;
+    }
+  }
+
+  state.isPlaying = isPlaying;
+  writeSharedSnapshot(state);
+  writePlaybackOwnerTabId(isPlaying ? TAB_ID : null);
+  syncPlaybackAcrossTabs(isPlaying);
+}
+
+/**
+ * Force pause radio across all tabs/windows.
+ * Useful when a passive tab (not current owner) requests pause.
+ */
+export function requestGlobalPauseAll(): void {
+  const state = getGlobalRadioState();
+  const previousOwner = readPlaybackOwnerTabId();
+  state.isPlaying = false;
+  writeSharedSnapshot(state);
+  // Preserve previous owner so resume can target the same tab/media element.
+  writePlaybackOwnerTabId(previousOwner);
+  syncPlaybackAcrossTabs(false, previousOwner);
+  emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: false });
+}
+
+/**
+ * If another tab owns playback, request that owner tab to resume.
+ * Returns true when a remote-owner resume request was sent.
+ */
+export function requestOwnerTabResume(): boolean {
+  const ownerTabId = readPlaybackOwnerTabId();
+  if (!ownerTabId || ownerTabId === TAB_ID) return false;
+
+  const state = getGlobalRadioState();
+  state.isPlaying = true;
+  writeSharedSnapshot(state);
+  writePlaybackOwnerTabId(ownerTabId);
+  syncPlaybackAcrossTabs(true, ownerTabId);
+  emitRadioEvent(RADIO_EVENTS.PLAYBACK_CHANGED, { isPlaying: true });
+  return true;
+}
+
+export function updateGlobalTrackInfo(info: {
+  title?: string;
+  artist?: string;
+  album?: string;
+  coverArt?: string;
+  uuid?: string | null;
+}): void {
+  const state = getGlobalRadioState();
+  if (info.title !== undefined) state.trackTitle = info.title;
+  if (info.artist !== undefined) state.trackArtist = info.artist;
+  if (info.album !== undefined) state.trackAlbum = info.album;
+  if (info.coverArt !== undefined) state.coverArt = info.coverArt;
+  if (info.uuid !== undefined) state.trackUuid = info.uuid;
+  writeSharedSnapshot(state);
+  syncStateAcrossTabs({
+    trackTitle: state.trackTitle,
+    trackArtist: state.trackArtist,
+    trackAlbum: state.trackAlbum,
+    coverArt: state.coverArt,
+    trackUuid: state.trackUuid,
+  });
+}
+
+export function destroyGlobalHls(): void {
+  const state = getGlobalRadioState();
+  if (state.hls) {
+    state.hls.destroy();
+    state.hls = null;
+  }
+}
+
+export function setGlobalHls(hls: Hls | null): void {
+  const state = getGlobalRadioState();
+  state.hls = hls;
+}
+
+export function setGlobalQualityLevels(levels: QualityLevel[]): void {
+  const state = getGlobalRadioState();
+  state.qualityLevels = levels;
+  writeSharedSnapshot(state);
+  syncStateAcrossTabs({ qualityLevels: levels });
+}
+
+// Event system for cross-component communication
+type RadioEventCallback = (data: any) => void;
+const listeners: Map<string, Set<RadioEventCallback>> = new Map();
+
+export function onRadioEvent(event: string, callback: RadioEventCallback): () => void {
+  if (!listeners.has(event)) {
+    listeners.set(event, new Set());
+  }
+  listeners.get(event)!.add(callback);
+  
+  // Return unsubscribe function
+  return () => {
+    listeners.get(event)?.delete(callback);
+  };
+}
+
+export function emitRadioEvent(event: string, data?: any): void {
+  listeners.get(event)?.forEach(callback => {
+    try {
+      callback(data);
+    } catch (e) {
+      console.error("Radio event listener error:", e);
+    }
+  });
+}
+
+// Event names
+export const RADIO_EVENTS = {
+  STATION_CHANGED: "station_changed",
+  QUALITY_CHANGED: "quality_changed",
+  PLAYBACK_CHANGED: "playback_changed",
+  TRACK_CHANGED: "track_changed",
+  PLAYER_TAKEOVER: "player_takeover", // Full player taking over from mini
+} as const;