@livepeer-frameworks/player-react 0.0.4 → 0.1.1

package/src/components/PlayerControls.tsx

@@ -4,7 +4,6 @@ import {
   cn,
   // Seeking utilities from core
   SPEED_PRESETS,
-  getLatencyTier,
   isMediaStreamSource,
   supportsPlaybackRate as coreSupportsPlaybackRate,
   calculateSeekableRange,
@@ -13,22 +12,18 @@ import {
   calculateIsNearLive,
   isLiveContent,
   // Time formatting from core
-  formatTime,
   formatTimeDisplay,
 } from "@livepeer-frameworks/player-core";
 import { Slider } from "../ui/slider";
 import SeekBar from "./SeekBar";
 import {
-  ClosedCaptionsIcon,
   FullscreenToggleIcon,
-  LiveIcon,
   PlayPauseIcon,
   SeekToLiveIcon,
   SkipBackIcon,
   SkipForwardIcon,
-  StatsIcon,
   VolumeIcon,
-  SettingsIcon
+  SettingsIcon,
 } from "./Icons";
 import type { MistStreamInfo, PlaybackMode } from "../types";
 
@@ -56,7 +51,15 @@ interface PlayerControlsProps {
   /** Video element - passed from parent hook */
   videoElement?: HTMLVideoElement | null;
   /** Available quality levels - passed from parent hook */
-  qualities?: Array<{ id: string; label: string; bitrate?: number; width?: number; height?: number; isAuto?: boolean; active?: boolean }>;
+  qualities?: Array<{
+    id: string;
+    label: string;
+    bitrate?: number;
+    width?: number;
+    height?: number;
+    isAuto?: boolean;
+    active?: boolean;
+  }>;
   /** Callback to select quality */
   onSelectQuality?: (id: string) => void;
   /** Is player muted */
@@ -83,7 +86,6 @@ interface PlayerControlsProps {
   onJumpToLive?: () => void;
 }
 
-
 const PlayerControls: React.FC<PlayerControlsProps> = ({
   currentTime,
   duration,
@@ -92,7 +94,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   onSeek,
   mistStreamInfo,
   disabled = false,
-  playbackMode = 'auto',
+  playbackMode = "auto",
   onModeChange,
   sourceType,
   isContentLive,
@@ -107,8 +109,8 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   onTogglePlay,
   onToggleFullscreen,
   isFullscreen: propIsFullscreen,
-  isLoopEnabled: propIsLoopEnabled,
-  onToggleLoop,
+  isLoopEnabled: _propIsLoopEnabled,
+  onToggleLoop: _onToggleLoop,
   onJumpToLive,
 }) => {
   // Context fallback - prefer props passed from parent over context
@@ -125,9 +127,10 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
     if (propVideoElement) return propVideoElement;
     if (contextVideo) return contextVideo;
     if (player?.getVideoElement?.()) return player.getVideoElement();
-    const domVideo = document.querySelector('.fw-player-video') as HTMLVideoElement | null
-      ?? document.querySelector('[data-player-container="true"] video') as HTMLVideoElement | null
-      ?? document.querySelector('.fw-player-container video') as HTMLVideoElement | null;
+    const domVideo =
+      (document.querySelector(".fw-player-video") as HTMLVideoElement | null) ??
+      (document.querySelector('[data-player-container="true"] video') as HTMLVideoElement | null) ??
+      (document.querySelector(".fw-player-container video") as HTMLVideoElement | null);
     return domVideo;
   }, [propVideoElement, contextVideo, player]);
 
@@ -188,7 +191,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
     // Fallback to Mist track metadata for players without quality API
     if (mistTracks) {
       return Object.entries(mistTracks)
-        .filter(([, t]) => t.type === 'video')
+        .filter(([, t]) => t.type === "video")
         .map(([id, t]) => ({
           id,
           label: t.height ? `${t.height}p` : t.codec,
@@ -219,7 +222,9 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   const isPlaying = propIsPlaying ?? internalIsPlaying;
   const isMuted = propIsMuted ?? internalIsMuted;
   const isFullscreen = propIsFullscreen ?? internalIsFullscreen;
-  const volumeValue = propVolume !== undefined ? Math.round(propVolume * 100) : internalVolume;
+  const actualVolume = propVolume !== undefined ? Math.round(propVolume * 100) : internalVolume;
+  // Show 0 when muted, actual volume otherwise
+  const volumeValue = isMuted ? 0 : actualVolume;
   const [qualityValue, setQualityValue] = useState<string>("auto");
   const [captionValue, setCaptionValue] = useState<string>("none");
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -232,81 +237,106 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
 
     const handleWindowClick = (event: MouseEvent) => {
       const target = event.target as HTMLElement;
-      if (target && !target.closest('.fw-settings-menu')) {
+      if (target && !target.closest(".fw-settings-menu")) {
         setIsSettingsOpen(false);
       }
     };
 
     // Use setTimeout to avoid immediate close from the same click that opened it
     const timeoutId = setTimeout(() => {
-      window.addEventListener('click', handleWindowClick);
+      window.addEventListener("click", handleWindowClick);
     }, 0);
 
     return () => {
       clearTimeout(timeoutId);
-      window.removeEventListener('click', handleWindowClick);
+      window.removeEventListener("click", handleWindowClick);
     };
   }, [isSettingsOpen]);
 
   // Core utility-based calculations
-  const deriveBufferWindowMs = useCallback((tracks?: Record<string, { firstms?: number; lastms?: number }>) => {
-    if (!tracks) return undefined;
-    const list = Object.values(tracks);
-    if (list.length === 0) return undefined;
-    const firstmsValues = list.map(t => t.firstms).filter((v): v is number => v !== undefined);
-    const lastmsValues = list.map(t => t.lastms).filter((v): v is number => v !== undefined);
-    if (firstmsValues.length === 0 || lastmsValues.length === 0) return undefined;
-    const firstms = Math.max(...firstmsValues);
-    const lastms = Math.min(...lastmsValues);
-    const window = lastms - firstms;
-    if (!Number.isFinite(window) || window <= 0) return undefined;
-    return window;
-  }, []);
-
-  const bufferWindowMs = mistStreamInfo?.meta?.buffer_window
-    ?? deriveBufferWindowMs(mistStreamInfo?.meta?.tracks as Record<string, { firstms?: number; lastms?: number }> | undefined);
-
-  const isLive = useMemo(() => isLiveContent(isContentLive, mistStreamInfo, duration),
-    [isContentLive, mistStreamInfo, duration]);
+  const deriveBufferWindowMs = useCallback(
+    (tracks?: Record<string, { firstms?: number; lastms?: number }>) => {
+      if (!tracks) return undefined;
+      const list = Object.values(tracks);
+      if (list.length === 0) return undefined;
+      const firstmsValues = list.map((t) => t.firstms).filter((v): v is number => v !== undefined);
+      const lastmsValues = list.map((t) => t.lastms).filter((v): v is number => v !== undefined);
+      if (firstmsValues.length === 0 || lastmsValues.length === 0) return undefined;
+      const firstms = Math.max(...firstmsValues);
+      const lastms = Math.min(...lastmsValues);
+      const window = lastms - firstms;
+      if (!Number.isFinite(window) || window <= 0) return undefined;
+      return window;
+    },
+    []
+  );
+
+  const bufferWindowMs =
+    mistStreamInfo?.meta?.buffer_window ??
+    deriveBufferWindowMs(
+      mistStreamInfo?.meta?.tracks as
+        | Record<string, { firstms?: number; lastms?: number }>
+        | undefined
+    );
+
+  const isLive = useMemo(
+    () => isLiveContent(isContentLive, mistStreamInfo, duration),
+    [isContentLive, mistStreamInfo, duration]
+  );
 
   const isWebRTC = useMemo(() => isMediaStreamSource(video), [video]);
 
   const supportsPlaybackRate = useMemo(() => coreSupportsPlaybackRate(video), [video]);
 
   // Seekable range using core calculation (allow controller override)
-  const allowMediaStreamDvr = isMediaStreamSource(video) &&
-    (bufferWindowMs !== undefined && bufferWindowMs > 0) &&
-    (sourceType !== 'whep' && sourceType !== 'webrtc');
-  const { seekableStart: calcSeekableStart, liveEdge: calcLiveEdge } = useMemo(() => calculateSeekableRange({
-    isLive,
-    video,
-    mistStreamInfo,
-    currentTime,
-    duration,
-    allowMediaStreamDvr,
-  }), [isLive, video, mistStreamInfo, currentTime, duration, allowMediaStreamDvr]);
+  const allowMediaStreamDvr =
+    isMediaStreamSource(video) &&
+    bufferWindowMs !== undefined &&
+    bufferWindowMs > 0 &&
+    sourceType !== "whep" &&
+    sourceType !== "webrtc";
+  const { seekableStart: calcSeekableStart, liveEdge: calcLiveEdge } = useMemo(
+    () =>
+      calculateSeekableRange({
+        isLive,
+        video,
+        mistStreamInfo,
+        currentTime,
+        duration,
+        allowMediaStreamDvr,
+      }),
+    [isLive, video, mistStreamInfo, currentTime, duration, allowMediaStreamDvr]
+  );
   const controllerSeekableStart = player?.getSeekableStart?.();
   const controllerLiveEdge = player?.getLiveEdge?.();
-  const useControllerRange = Number.isFinite(controllerSeekableStart) &&
+  const useControllerRange =
+    Number.isFinite(controllerSeekableStart) &&
     Number.isFinite(controllerLiveEdge) &&
     (controllerLiveEdge as number) >= (controllerSeekableStart as number) &&
     ((controllerLiveEdge as number) > 0 || (controllerSeekableStart as number) > 0);
-  const seekableStart = useControllerRange ? (controllerSeekableStart as number) : calcSeekableStart;
+  const seekableStart = useControllerRange
+    ? (controllerSeekableStart as number)
+    : calcSeekableStart;
   const liveEdge = useControllerRange ? (controllerLiveEdge as number) : calcLiveEdge;
 
-  const hasDvrWindow = isLive && Number.isFinite(liveEdge) && Number.isFinite(seekableStart) && liveEdge > seekableStart;
+  const hasDvrWindow =
+    isLive &&
+    Number.isFinite(liveEdge) &&
+    Number.isFinite(seekableStart) &&
+    liveEdge > seekableStart;
   const commitOnRelease = isLive;
 
   // Live thresholds with buffer window scaling
-  const liveThresholds = useMemo(() =>
-    calculateLiveThresholds(sourceType, isWebRTC, bufferWindowMs),
-    [sourceType, isWebRTC, bufferWindowMs]);
+  const liveThresholds = useMemo(
+    () => calculateLiveThresholds(sourceType, isWebRTC, bufferWindowMs),
+    [sourceType, isWebRTC, bufferWindowMs]
+  );
 
   // Can seek - prefer PlayerController's computed value (includes player-specific canSeek)
   // Fall back to utility function when controller not available
   const baseCanSeek = useMemo(() => {
     // PlayerController already computes canSeek with player-specific logic
-    if (player && typeof (player as any).canSeekStream === 'function') {
+    if (player && typeof (player as any).canSeekStream === "function") {
       return (player as any).canSeekStream();
     }
     // Fallback when no controller
@@ -358,7 +388,8 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
     video.addEventListener("playing", updatePlayingState);
     video.addEventListener("volumechange", updateMutedState);
     video.addEventListener("ratechange", updatePlaybackRate);
-    if (typeof document !== "undefined") document.addEventListener("fullscreenchange", updateFullscreenState);
+    if (typeof document !== "undefined")
+      document.addEventListener("fullscreenchange", updateFullscreenState);
 
     return () => {
       video.removeEventListener("play", updatePlayingState);
@@ -366,7 +397,8 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
       video.removeEventListener("playing", updatePlayingState);
       video.removeEventListener("volumechange", updateMutedState);
       video.removeEventListener("ratechange", updatePlaybackRate);
-      if (typeof document !== "undefined") document.removeEventListener("fullscreenchange", updateFullscreenState);
+      if (typeof document !== "undefined")
+        document.removeEventListener("fullscreenchange", updateFullscreenState);
     };
   }, [video, isLive]);
 
@@ -397,7 +429,10 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   }, [video]);
 
   useEffect(() => {
-    if (!video) { setHasAudio(true); return; }
+    if (!video) {
+      setHasAudio(true);
+      return;
+    }
     const checkAudio = () => {
       if (video.srcObject instanceof MediaStream) {
         const audioTracks = video.srcObject.getAudioTracks();
@@ -464,7 +499,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
       return;
     }
     // Fallback: direct video/player manipulation
-    const v = video ?? document.querySelector('.fw-player-video') as HTMLVideoElement | null;
+    const v = video ?? (document.querySelector(".fw-player-video") as HTMLVideoElement | null);
     if (!v) return;
     const nextMuted = !(player?.isMuted?.() ?? v.muted);
     player?.setMuted?.(nextMuted);
@@ -483,7 +518,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
       return;
     }
     // Fallback: direct video manipulation
-    const v = video ?? document.querySelector('.fw-player-video') as HTMLVideoElement | null;
+    const v = video ?? (document.querySelector(".fw-player-video") as HTMLVideoElement | null);
     if (!v) return;
     v.volume = next / 100;
     v.muted = next === 0;
@@ -500,7 +535,9 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
     }
     // Fallback: direct DOM manipulation
     if (typeof document === "undefined") return;
-    const container = document.querySelector('[data-player-container="true"]') as HTMLElement | null;
+    const container = document.querySelector(
+      '[data-player-container="true"]'
+    ) as HTMLElement | null;
     if (!container) return;
     if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
     else container.requestFullscreen().catch(() => {});
@@ -548,29 +585,32 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   };
 
   // Time display - using core formatTimeDisplay
-  const timeDisplay = useMemo(() => formatTimeDisplay({
-    isLive,
-    currentTime,
-    duration,
-    liveEdge,
-    seekableStart,
-    unixoffset: mistStreamInfo?.unixoffset,
-  }), [isLive, currentTime, duration, liveEdge, seekableStart, mistStreamInfo?.unixoffset]);
+  const timeDisplay = useMemo(
+    () =>
+      formatTimeDisplay({
+        isLive,
+        currentTime,
+        duration,
+        liveEdge,
+        seekableStart,
+        unixoffset: mistStreamInfo?.unixoffset,
+      }),
+    [isLive, currentTime, duration, liveEdge, seekableStart, mistStreamInfo?.unixoffset]
+  );
 
   const [isVolumeHovered, setIsVolumeHovered] = useState(false);
   const [isVolumeFocused, setIsVolumeFocused] = useState(false);
   const isVolumeExpanded = isVolumeHovered || isVolumeFocused;
 
   return (
-    <div className={cn(
-      "fw-player-surface fw-controls-wrapper",
-      isVisible ? "fw-controls-wrapper--visible" : "fw-controls-wrapper--hidden"
-    )}>
+    <div
+      className={cn(
+        "fw-player-surface fw-controls-wrapper",
+        isVisible ? "fw-controls-wrapper--visible" : "fw-controls-wrapper--hidden"
+      )}
+    >
       {/* Bottom Row: Controls with SeekBar on top */}
-      <div
-        className="fw-control-bar pointer-events-auto"
-        onClick={(e) => e.stopPropagation()}
-      >
+      <div className="fw-control-bar pointer-events-auto" onClick={(e) => e.stopPropagation()}>
         {/* SeekBar - sits directly on top of control buttons */}
         {canSeek && (
           <div className="fw-seek-wrapper">
@@ -596,222 +636,270 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
 
         {/* Control buttons row */}
         <div className="fw-controls-row">
-        {/* Left: Controls & Time */}
-        <div className="fw-controls-left">
-          <div className="fw-control-group">
-            <button type="button" className="fw-btn-flush" aria-label={isPlaying ? "Pause" : "Play"} onClick={handlePlayPause}>
-              <PlayPauseIcon isPlaying={isPlaying} size={18} />
-            </button>
-            {canSeek && (
-              <>
-                <button type="button" className="fw-btn-flush hidden sm:flex" aria-label="Skip back 10 seconds" onClick={handleSkipBack}>
-                  <SkipBackIcon size={16} />
-                </button>
-                <button type="button" className="fw-btn-flush hidden sm:flex" aria-label="Skip forward 10 seconds" onClick={handleSkipForward}>
-                  <SkipForwardIcon size={16} />
-                </button>
-              </>
-            )}
-          </div>
+          {/* Left: Controls & Time */}
+          <div className="fw-controls-left">
+            <div className="fw-control-group">
+              <button
+                type="button"
+                className="fw-btn-flush"
+                aria-label={isPlaying ? "Pause" : "Play"}
+                onClick={handlePlayPause}
+              >
+                <PlayPauseIcon isPlaying={isPlaying} size={18} />
+              </button>
+              {canSeek && (
+                <>
+                  <button
+                    type="button"
+                    className="fw-btn-flush hidden sm:flex"
+                    aria-label="Skip back 10 seconds"
+                    onClick={handleSkipBack}
+                  >
+                    <SkipBackIcon size={16} />
+                  </button>
+                  <button
+                    type="button"
+                    className="fw-btn-flush hidden sm:flex"
+                    aria-label="Skip forward 10 seconds"
+                    onClick={handleSkipForward}
+                  >
+                    <SkipForwardIcon size={16} />
+                  </button>
+                </>
+              )}
+            </div>
 
-          {/* Volume pill - cohesive hover element (slab style) */}
-          <div
-            className={cn(
-              "fw-volume-group",
-              isVolumeExpanded && "fw-volume-group--expanded",
-              !hasAudio && "fw-volume-group--disabled"
-            )}
-            onMouseEnter={() => hasAudio && setIsVolumeHovered(true)}
-            onMouseLeave={() => {
-              setIsVolumeHovered(false);
-              setIsVolumeFocused(false);
-            }}
-            onFocusCapture={() => hasAudio && setIsVolumeFocused(true)}
-            onBlurCapture={(e) => {
-              if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsVolumeFocused(false);
-            }}
-            onClick={(e) => {
-              // Click on the pill (not slider) toggles mute
-              if (hasAudio && e.target === e.currentTarget) {
-                handleMute();
-              }
-            }}
-          >
-            {/* Volume icon - part of the pill */}
-            <button
-              type="button"
-              className="fw-volume-btn"
-              aria-label={!hasAudio ? "No audio" : (isMuted ? "Unmute" : "Mute")}
-              onClick={hasAudio ? handleMute : undefined}
-              disabled={!hasAudio}
+            {/* Volume pill - cohesive hover element (slab style) */}
+            <div
+              className={cn(
+                "fw-volume-group",
+                isVolumeExpanded && "fw-volume-group--expanded",
+                !hasAudio && "fw-volume-group--disabled"
+              )}
+              onMouseEnter={() => hasAudio && setIsVolumeHovered(true)}
+              onMouseLeave={() => {
+                setIsVolumeHovered(false);
+                setIsVolumeFocused(false);
+              }}
+              onFocusCapture={() => hasAudio && setIsVolumeFocused(true)}
+              onBlurCapture={(e) => {
+                if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsVolumeFocused(false);
+              }}
+              onClick={(e) => {
+                // Click on the pill (not slider) toggles mute
+                if (hasAudio && e.target === e.currentTarget) {
+                  handleMute();
+                }
+              }}
             >
-              <VolumeIcon isMuted={isMuted || !hasAudio} size={16} />
-            </button>
-            {/* Slider - expands within the pill */}
-            <div className={cn(
-              "fw-volume-slider-wrapper",
-              isVolumeExpanded ? "fw-volume-slider-wrapper--expanded" : "fw-volume-slider-wrapper--collapsed"
-            )}>
-              <Slider
-                orientation="horizontal"
-                aria-label="Volume"
-                max={100}
-                step={1}
-                value={[volumeValue]}
-                onValueChange={handleVolumeChange}
-                className="w-full"
+              {/* Volume icon - part of the pill */}
+              <button
+                type="button"
+                className="fw-volume-btn"
+                aria-label={!hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
+                onClick={hasAudio ? handleMute : undefined}
                 disabled={!hasAudio}
-              />
+              >
+                <VolumeIcon isMuted={isMuted || !hasAudio} size={16} />
+              </button>
+              {/* Slider - expands within the pill */}
+              <div
+                className={cn(
+                  "fw-volume-slider-wrapper",
+                  isVolumeExpanded
+                    ? "fw-volume-slider-wrapper--expanded"
+                    : "fw-volume-slider-wrapper--collapsed"
+                )}
+              >
+                <Slider
+                  orientation="horizontal"
+                  aria-label="Volume"
+                  max={100}
+                  step={1}
+                  value={[volumeValue]}
+                  onValueChange={handleVolumeChange}
+                  className="w-full"
+                  disabled={!hasAudio}
+                />
+              </div>
+            </div>
+
+            <div className="fw-control-group">
+              <span className="fw-time-display">{timeDisplay}</span>
             </div>
-          </div>
 
-          <div className="fw-control-group">
-            <span className="fw-time-display">
-              {timeDisplay}
-            </span>
+            {isLive && (
+              <div className="fw-control-group">
+                <button
+                  type="button"
+                  onClick={handleGoLive}
+                  disabled={!hasDvrWindow || isNearLiveState}
+                  className={cn(
+                    "fw-live-badge",
+                    !hasDvrWindow || isNearLiveState
+                      ? "fw-live-badge--active"
+                      : "fw-live-badge--behind"
+                  )}
+                  title={
+                    !hasDvrWindow ? "Live only" : isNearLiveState ? "At live edge" : "Jump to live"
+                  }
+                >
+                  LIVE
+                  {!isNearLiveState && hasDvrWindow && <SeekToLiveIcon size={10} />}
+                </button>
+              </div>
+            )}
           </div>
 
-          {isLive && (
-            <div className="fw-control-group">
+          {/* Right Group: Settings, Fullscreen */}
+          <div className="fw-controls-right">
+            <div className="fw-control-group relative">
               <button
                 type="button"
-                onClick={handleGoLive}
-                disabled={!hasDvrWindow || isNearLiveState}
-                className={cn(
-                  "fw-live-badge",
-                  (!hasDvrWindow || isNearLiveState) ? "fw-live-badge--active" : "fw-live-badge--behind"
-                )}
-                title={!hasDvrWindow ? "Live only" : (isNearLiveState ? "At live edge" : "Jump to live")}
+                className={cn("fw-btn-flush group", isSettingsOpen && "fw-btn-flush--active")}
+                aria-label="Settings"
+                title="Settings"
+                onClick={() => setIsSettingsOpen(!isSettingsOpen)}
               >
-                LIVE
-                {!isNearLiveState && hasDvrWindow && <SeekToLiveIcon size={10} />}
+                <SettingsIcon size={16} className="transition-transform group-hover:rotate-90" />
               </button>
-            </div>
-          )}
-        </div>
 
-        {/* Right Group: Settings, Fullscreen */}
-        <div className="fw-controls-right">
-          <div className="fw-control-group relative">
-            <button
-              type="button"
-              className={cn("fw-btn-flush group", isSettingsOpen && "fw-btn-flush--active")}
-              aria-label="Settings"
-              title="Settings"
-              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-            >
-              <SettingsIcon size={16} className="transition-transform group-hover:rotate-90" />
-            </button>
-
-            {/* Settings Popup */}
-            {isSettingsOpen && (
-              <div className="fw-player-surface fw-settings-menu">
-                {/* Playback Mode - only show for live content (not VOD/clips) */}
-                {onModeChange && isContentLive !== false && (
-                  <div className="fw-settings-section">
-                    <div className="fw-settings-label">Mode</div>
-                    <div className="fw-settings-options">
-                      {(['auto', 'low-latency', 'quality'] as const).map((mode) => (
-                        <button
-                          key={mode}
-                          className={cn(
-                            "fw-settings-btn",
-                            playbackMode === mode && "fw-settings-btn--active"
-                          )}
-                          onClick={() => { onModeChange(mode); setIsSettingsOpen(false); }}
-                        >
-                          {mode === 'low-latency' ? 'Fast' : mode === 'quality' ? 'Stable' : 'Auto'}
-                        </button>
-                      ))}
+              {/* Settings Popup */}
+              {isSettingsOpen && (
+                <div className="fw-player-surface fw-settings-menu">
+                  {/* Playback Mode - only show for live content (not VOD/clips) */}
+                  {onModeChange && isContentLive !== false && (
+                    <div className="fw-settings-section">
+                      <div className="fw-settings-label">Mode</div>
+                      <div className="fw-settings-options">
+                        {(["auto", "low-latency", "quality"] as const).map((mode) => (
+                          <button
+                            key={mode}
+                            className={cn(
+                              "fw-settings-btn",
+                              playbackMode === mode && "fw-settings-btn--active"
+                            )}
+                            onClick={() => {
+                              onModeChange(mode);
+                              setIsSettingsOpen(false);
+                            }}
+                          >
+                            {mode === "low-latency"
+                              ? "Fast"
+                              : mode === "quality"
+                                ? "Stable"
+                                : "Auto"}
+                          </button>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-                {supportsPlaybackRate && (
-                  <div className="fw-settings-section">
-                    <div className="fw-settings-label">Speed</div>
-                    <div className="fw-settings-options fw-settings-options--wrap">
-                      {SPEED_PRESETS.map((rate) => (
-                        <button
-                          key={rate}
-                          className={cn(
-                            "fw-settings-btn",
-                            playbackRate === rate && "fw-settings-btn--active"
-                          )}
-                          onClick={() => { handleSpeedChange(String(rate)); setIsSettingsOpen(false); }}
-                        >
-                          {rate}x
-                        </button>
-                      ))}
+                  )}
+                  {supportsPlaybackRate && (
+                    <div className="fw-settings-section">
+                      <div className="fw-settings-label">Speed</div>
+                      <div className="fw-settings-options fw-settings-options--wrap">
+                        {SPEED_PRESETS.map((rate) => (
+                          <button
+                            key={rate}
+                            className={cn(
+                              "fw-settings-btn",
+                              playbackRate === rate && "fw-settings-btn--active"
+                            )}
+                            onClick={() => {
+                              handleSpeedChange(String(rate));
+                              setIsSettingsOpen(false);
+                            }}
+                          >
+                            {rate}x
+                          </button>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-                {qualities.length > 0 && (
-                  <div className="fw-settings-section">
-                    <div className="fw-settings-label">Quality</div>
-                    <div className="fw-settings-list">
-                      <button
-                        className={cn(
-                          "fw-settings-list-item",
-                          qualityValue === 'auto' && "fw-settings-list-item--active"
-                        )}
-                        onClick={() => { handleQualityChange('auto'); setIsSettingsOpen(false); }}
-                      >
-                        Auto
-                      </button>
-                      {qualities.map((q) => (
+                  )}
+                  {qualities.length > 0 && (
+                    <div className="fw-settings-section">
+                      <div className="fw-settings-label">Quality</div>
+                      <div className="fw-settings-list">
                         <button
-                          key={q.id}
                           className={cn(
                             "fw-settings-list-item",
-                            qualityValue === q.id && "fw-settings-list-item--active"
+                            qualityValue === "auto" && "fw-settings-list-item--active"
                           )}
-                          onClick={() => { handleQualityChange(q.id); setIsSettingsOpen(false); }}
+                          onClick={() => {
+                            handleQualityChange("auto");
+                            setIsSettingsOpen(false);
+                          }}
                         >
-                          {q.label}
+                          Auto
                         </button>
-                      ))}
+                        {qualities.map((q) => (
+                          <button
+                            key={q.id}
+                            className={cn(
+                              "fw-settings-list-item",
+                              qualityValue === q.id && "fw-settings-list-item--active"
+                            )}
+                            onClick={() => {
+                              handleQualityChange(q.id);
+                              setIsSettingsOpen(false);
+                            }}
+                          >
+                            {q.label}
+                          </button>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-                {textTracks.length > 0 && (
-                  <div className="fw-settings-section">
-                    <div className="fw-settings-label">Captions</div>
-                    <div className="fw-settings-list">
-                      <button
-                        className={cn(
-                          "fw-settings-list-item",
-                          captionValue === 'none' && "fw-settings-list-item--active"
-                        )}
-                        onClick={() => { handleCaptionChange('none'); setIsSettingsOpen(false); }}
-                      >
-                        Off
-                      </button>
-                      {textTracks.map((t) => (
+                  )}
+                  {textTracks.length > 0 && (
+                    <div className="fw-settings-section">
+                      <div className="fw-settings-label">Captions</div>
+                      <div className="fw-settings-list">
                         <button
-                          key={t.id}
                           className={cn(
                             "fw-settings-list-item",
-                            captionValue === t.id && "fw-settings-list-item--active"
+                            captionValue === "none" && "fw-settings-list-item--active"
                           )}
-                          onClick={() => { handleCaptionChange(t.id); setIsSettingsOpen(false); }}
+                          onClick={() => {
+                            handleCaptionChange("none");
+                            setIsSettingsOpen(false);
+                          }}
                         >
-                          {t.label || t.id}
+                          Off
                         </button>
-                      ))}
+                        {textTracks.map((t) => (
+                          <button
+                            key={t.id}
+                            className={cn(
+                              "fw-settings-list-item",
+                              captionValue === t.id && "fw-settings-list-item--active"
+                            )}
+                            onClick={() => {
+                              handleCaptionChange(t.id);
+                              setIsSettingsOpen(false);
+                            }}
+                          >
+                            {t.label || t.id}
+                          </button>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
+                  )}
+                </div>
+              )}
+            </div>
 
-          <div className="fw-control-group">
-            <button type="button" className="fw-btn-flush" aria-label="Toggle fullscreen" onClick={handleFullscreen}>
-              <FullscreenToggleIcon isFullscreen={isFullscreen} size={16} />
-            </button>
+            <div className="fw-control-group">
+              <button
+                type="button"
+                className="fw-btn-flush"
+                aria-label="Toggle fullscreen"
+                onClick={handleFullscreen}
+              >
+                <FullscreenToggleIcon isFullscreen={isFullscreen} size={16} />
+              </button>
+            </div>
           </div>
         </div>
-        </div>
       </div>
     </div>
   );