@livepeer-frameworks/player-react 0.1.1 → 0.1.2

package/dist/esm/components/PlayerControls.js

@@ -0,0 +1,794 @@
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { usePlayerContextOptional } from '../context/PlayerContext.js';
+import { isLiveContent, isMediaStreamSource, supportsPlaybackRate, calculateSeekableRange, calculateLiveThresholds, canSeekStream, calculateIsNearLive, formatTimeDisplay, cn, SPEED_PRESETS } from '@livepeer-frameworks/player-core';
+import { Slider } from '../ui/slider.js';
+import SeekBar from './SeekBar.js';
+import { PlayPauseIcon, SkipBackIcon, SkipForwardIcon, VolumeIcon, SeekToLiveIcon, SettingsIcon, FullscreenToggleIcon } from './Icons.js';
+
+var PlayerControls = function PlayerControls(_ref) {
+  var _ctx$state, _mistStreamInfo$meta, _player$getTextTracks, _player$getTextTracks2, _mistStreamInfo$meta$, _mistStreamInfo$meta2, _mistStreamInfo$meta3, _player$getSeekableSt, _player$getLiveEdge;
+  var currentTime = _ref.currentTime,
+    duration = _ref.duration,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    _ref.className;
+    var _onSeek = _ref.onSeek,
+    mistStreamInfo = _ref.mistStreamInfo,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$playbackMode = _ref.playbackMode,
+    playbackMode = _ref$playbackMode === void 0 ? "auto" : _ref$playbackMode,
+    onModeChange = _ref.onModeChange,
+    sourceType = _ref.sourceType,
+    isContentLive = _ref.isContentLive,
+    propVideoElement = _ref.videoElement,
+    _ref$qualities = _ref.qualities,
+    propQualities = _ref$qualities === void 0 ? [] : _ref$qualities,
+    onSelectQuality = _ref.onSelectQuality,
+    propIsMuted = _ref.isMuted,
+    propVolume = _ref.volume,
+    onVolumeChange = _ref.onVolumeChange,
+    onToggleMute = _ref.onToggleMute,
+    propIsPlaying = _ref.isPlaying,
+    onTogglePlay = _ref.onTogglePlay,
+    onToggleFullscreen = _ref.onToggleFullscreen,
+    propIsFullscreen = _ref.isFullscreen;
+    _ref.isLoopEnabled;
+    _ref.onToggleLoop;
+    var onJumpToLive = _ref.onJumpToLive;
+  // Context fallback - prefer props passed from parent over context
+  // Context provides UsePlayerControllerReturn which has state.videoElement and controller
+  var ctx = usePlayerContextOptional();
+  var contextVideo = ctx === null || ctx === void 0 || (_ctx$state = ctx.state) === null || _ctx$state === void 0 ? void 0 : _ctx$state.videoElement;
+  var player = ctx === null || ctx === void 0 ? void 0 : ctx.controller;
+  // Robust video element detection - prefer prop, then context, then DOM query
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    video = _useState2[0],
+    setVideo = _useState2[1];
+  var videoCheckIntervalRef = useRef(null);
+  var findVideoElement = useCallback(function () {
+    var _player$getVideoEleme, _ref2, _document$querySelect;
+    if (propVideoElement) return propVideoElement;
+    if (contextVideo) return contextVideo;
+    if (player !== null && player !== void 0 && (_player$getVideoEleme = player.getVideoElement) !== null && _player$getVideoEleme !== void 0 && _player$getVideoEleme.call(player)) return player.getVideoElement();
+    var domVideo = (_ref2 = (_document$querySelect = document.querySelector(".fw-player-video")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('[data-player-container="true"] video')) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector(".fw-player-container video");
+    return domVideo;
+  }, [propVideoElement, contextVideo, player]);
+  useEffect(function () {
+    var updateVideo = function updateVideo() {
+      var v = findVideoElement();
+      if (v && v !== video) {
+        setVideo(v);
+      }
+    };
+    updateVideo();
+    if (!video) {
+      videoCheckIntervalRef.current = setInterval(function () {
+        var v = findVideoElement();
+        if (v) {
+          setVideo(v);
+          if (videoCheckIntervalRef.current) {
+            clearInterval(videoCheckIntervalRef.current);
+            videoCheckIntervalRef.current = null;
+          }
+        }
+      }, 100);
+      setTimeout(function () {
+        if (videoCheckIntervalRef.current) {
+          clearInterval(videoCheckIntervalRef.current);
+          videoCheckIntervalRef.current = null;
+        }
+      }, 5000);
+    }
+    return function () {
+      if (videoCheckIntervalRef.current) {
+        clearInterval(videoCheckIntervalRef.current);
+        videoCheckIntervalRef.current = null;
+      }
+    };
+  }, [contextVideo, player, findVideoElement, video]);
+  var mistTracks = mistStreamInfo === null || mistStreamInfo === void 0 || (_mistStreamInfo$meta = mistStreamInfo.meta) === null || _mistStreamInfo$meta === void 0 ? void 0 : _mistStreamInfo$meta.tracks;
+  // Quality selection priority:
+  // 1. Player-provided qualities (HLS.js/DASH.js levels with correct numeric indices)
+  // 2. Mist track metadata (for players that don't provide quality API)
+  // This fixes a critical bug where Mist track IDs (e.g., "a1", "v0") were passed to
+  // HLS/DASH players which expect numeric indices (e.g., "0", "1", "2")
+  // Quality levels - prefer props, then player API, then Mist tracks
+  var qualities = useMemo(function () {
+    var _player$getQualities;
+    // Priority 1: Props from parent (usePlayerController hook)
+    if (propQualities && propQualities.length > 0) {
+      return propQualities;
+    }
+    // Priority 2: Player's quality API
+    var playerQualities = player === null || player === void 0 || (_player$getQualities = player.getQualities) === null || _player$getQualities === void 0 ? void 0 : _player$getQualities.call(player);
+    if (playerQualities && playerQualities.length > 0) {
+      return playerQualities;
+    }
+    // Fallback to Mist track metadata for players without quality API
+    if (mistTracks) {
+      return Object.entries(mistTracks).filter(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          t = _ref4[1];
+        return t.type === "video";
+      }).map(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          id = _ref6[0],
+          t = _ref6[1];
+        return {
+          id: id,
+          label: t.height ? "".concat(t.height, "p") : t.codec,
+          width: t.width,
+          height: t.height,
+          bitrate: t.bps
+        };
+      }).sort(function (a, b) {
+        return (b.height || 0) - (a.height || 0);
+      });
+    }
+    return [];
+  }, [propQualities, player, mistTracks]);
+  var textTracks = (_player$getTextTracks = player === null || player === void 0 || (_player$getTextTracks2 = player.getTextTracks) === null || _player$getTextTracks2 === void 0 ? void 0 : _player$getTextTracks2.call(player)) !== null && _player$getTextTracks !== void 0 ? _player$getTextTracks : [];
+  // Internal state - used as fallback when props not provided
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalIsPlaying = _useState4[0],
+    setInternalIsPlaying = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    internalIsMuted = _useState6[0],
+    setInternalIsMuted = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    internalIsFullscreen = _useState8[0],
+    setInternalIsFullscreen = _useState8[1];
+  var _useState9 = useState(true),
+    _useState0 = _slicedToArray(_useState9, 2),
+    hasAudio = _useState0[0],
+    setHasAudio = _useState0[1];
+  var _useState1 = useState(undefined),
+    _useState10 = _slicedToArray(_useState1, 2),
+    buffered = _useState10[0],
+    setBuffered = _useState10[1];
+  var _useState11 = useState(function () {
+      if (!video) return 100;
+      return Math.round(video.volume * 100);
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    internalVolume = _useState12[0],
+    setInternalVolume = _useState12[1];
+  var _useState13 = useState(function () {
+      var _video$playbackRate;
+      return (_video$playbackRate = video === null || video === void 0 ? void 0 : video.playbackRate) !== null && _video$playbackRate !== void 0 ? _video$playbackRate : 1;
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    playbackRate = _useState14[0],
+    setPlaybackRate = _useState14[1];
+  // Derived state - prefer props over internal state
+  var isPlaying = propIsPlaying !== null && propIsPlaying !== void 0 ? propIsPlaying : internalIsPlaying;
+  var isMuted = propIsMuted !== null && propIsMuted !== void 0 ? propIsMuted : internalIsMuted;
+  var isFullscreen = propIsFullscreen !== null && propIsFullscreen !== void 0 ? propIsFullscreen : internalIsFullscreen;
+  var actualVolume = propVolume !== undefined ? Math.round(propVolume * 100) : internalVolume;
+  // Show 0 when muted, actual volume otherwise
+  var volumeValue = isMuted ? 0 : actualVolume;
+  var _useState15 = useState("auto"),
+    _useState16 = _slicedToArray(_useState15, 2),
+    qualityValue = _useState16[0],
+    setQualityValue = _useState16[1];
+  var _useState17 = useState("none"),
+    _useState18 = _slicedToArray(_useState17, 2),
+    captionValue = _useState18[0],
+    setCaptionValue = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isSettingsOpen = _useState20[0],
+    setIsSettingsOpen = _useState20[1];
+  // Hysteresis state for Live badge - prevents flip-flopping
+  var _useState21 = useState(true),
+    _useState22 = _slicedToArray(_useState21, 2),
+    isNearLiveState = _useState22[0],
+    setIsNearLiveState = _useState22[1];
+  // Close settings menu when clicking outside
+  useEffect(function () {
+    if (!isSettingsOpen) return;
+    var handleWindowClick = function handleWindowClick(event) {
+      var target = event.target;
+      if (target && !target.closest(".fw-settings-menu")) {
+        setIsSettingsOpen(false);
+      }
+    };
+    // Use setTimeout to avoid immediate close from the same click that opened it
+    var timeoutId = setTimeout(function () {
+      window.addEventListener("click", handleWindowClick);
+    }, 0);
+    return function () {
+      clearTimeout(timeoutId);
+      window.removeEventListener("click", handleWindowClick);
+    };
+  }, [isSettingsOpen]);
+  // Core utility-based calculations
+  var deriveBufferWindowMs = useCallback(function (tracks) {
+    if (!tracks) return undefined;
+    var list = Object.values(tracks);
+    if (list.length === 0) return undefined;
+    var firstmsValues = list.map(function (t) {
+      return t.firstms;
+    }).filter(function (v) {
+      return v !== undefined;
+    });
+    var lastmsValues = list.map(function (t) {
+      return t.lastms;
+    }).filter(function (v) {
+      return v !== undefined;
+    });
+    if (firstmsValues.length === 0 || lastmsValues.length === 0) return undefined;
+    var firstms = Math.max.apply(Math, _toConsumableArray(firstmsValues));
+    var lastms = Math.min.apply(Math, _toConsumableArray(lastmsValues));
+    var window = lastms - firstms;
+    if (!Number.isFinite(window) || window <= 0) return undefined;
+    return window;
+  }, []);
+  var bufferWindowMs = (_mistStreamInfo$meta$ = mistStreamInfo === null || mistStreamInfo === void 0 || (_mistStreamInfo$meta2 = mistStreamInfo.meta) === null || _mistStreamInfo$meta2 === void 0 ? void 0 : _mistStreamInfo$meta2.buffer_window) !== null && _mistStreamInfo$meta$ !== void 0 ? _mistStreamInfo$meta$ : deriveBufferWindowMs(mistStreamInfo === null || mistStreamInfo === void 0 || (_mistStreamInfo$meta3 = mistStreamInfo.meta) === null || _mistStreamInfo$meta3 === void 0 ? void 0 : _mistStreamInfo$meta3.tracks);
+  var isLive = useMemo(function () {
+    return isLiveContent(isContentLive, mistStreamInfo, duration);
+  }, [isContentLive, mistStreamInfo, duration]);
+  var isWebRTC = useMemo(function () {
+    return isMediaStreamSource(video);
+  }, [video]);
+  var supportsPlaybackRate$1 = useMemo(function () {
+    return supportsPlaybackRate(video);
+  }, [video]);
+  // Seekable range using core calculation (allow controller override)
+  var allowMediaStreamDvr = isMediaStreamSource(video) && bufferWindowMs !== undefined && bufferWindowMs > 0 && sourceType !== "whep" && sourceType !== "webrtc";
+  var _useMemo = useMemo(function () {
+      return calculateSeekableRange({
+        isLive: isLive,
+        video: video,
+        mistStreamInfo: mistStreamInfo,
+        currentTime: currentTime,
+        duration: duration,
+        allowMediaStreamDvr: allowMediaStreamDvr
+      });
+    }, [isLive, video, mistStreamInfo, currentTime, duration, allowMediaStreamDvr]),
+    calcSeekableStart = _useMemo.seekableStart,
+    calcLiveEdge = _useMemo.liveEdge;
+  var controllerSeekableStart = player === null || player === void 0 || (_player$getSeekableSt = player.getSeekableStart) === null || _player$getSeekableSt === void 0 ? void 0 : _player$getSeekableSt.call(player);
+  var controllerLiveEdge = player === null || player === void 0 || (_player$getLiveEdge = player.getLiveEdge) === null || _player$getLiveEdge === void 0 ? void 0 : _player$getLiveEdge.call(player);
+  var useControllerRange = Number.isFinite(controllerSeekableStart) && Number.isFinite(controllerLiveEdge) && controllerLiveEdge >= controllerSeekableStart && (controllerLiveEdge > 0 || controllerSeekableStart > 0);
+  var seekableStart = useControllerRange ? controllerSeekableStart : calcSeekableStart;
+  var liveEdge = useControllerRange ? controllerLiveEdge : calcLiveEdge;
+  var hasDvrWindow = isLive && Number.isFinite(liveEdge) && Number.isFinite(seekableStart) && liveEdge > seekableStart;
+  var commitOnRelease = isLive;
+  // Live thresholds with buffer window scaling
+  var liveThresholds = useMemo(function () {
+    return 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
+  var baseCanSeek = useMemo(function () {
+    // PlayerController already computes canSeek with player-specific logic
+    if (player && typeof player.canSeekStream === "function") {
+      return player.canSeekStream();
+    }
+    // Fallback when no controller
+    return canSeekStream({
+      video: video,
+      isLive: isLive,
+      duration: duration,
+      bufferWindowMs: bufferWindowMs
+    });
+  }, [video, isLive, duration, bufferWindowMs, player]);
+  var canSeek = baseCanSeek && (!isLive || hasDvrWindow);
+  // Hysteresis for live badge - using core calculation
+  useEffect(function () {
+    if (!isLive) {
+      setIsNearLiveState(true);
+      return;
+    }
+    var newState = calculateIsNearLive(currentTime, liveEdge, liveThresholds, isNearLiveState);
+    if (newState !== isNearLiveState) {
+      setIsNearLiveState(newState);
+    }
+  }, [isLive, liveEdge, currentTime, liveThresholds, isNearLiveState]);
+  // Track if we've already seeked to live on initial playback
+  var hasSeekToLiveRef = useRef(false);
+  // Sync internal state from video element (only when props not provided)
+  useEffect(function () {
+    if (!video) return;
+    var updatePlayingState = function updatePlayingState() {
+      return setInternalIsPlaying(!video.paused);
+    };
+    var updateMutedState = function updateMutedState() {
+      var muted = video.muted || video.volume === 0;
+      setInternalIsMuted(muted);
+      setInternalVolume(Math.round(video.volume * 100));
+    };
+    var updateFullscreenState = function updateFullscreenState() {
+      if (typeof document !== "undefined") setInternalIsFullscreen(!!document.fullscreenElement);
+    };
+    var updatePlaybackRate = function updatePlaybackRate() {
+      return setPlaybackRate(video.playbackRate);
+    };
+    updatePlayingState();
+    updateMutedState();
+    updateFullscreenState();
+    updatePlaybackRate();
+    video.addEventListener("play", updatePlayingState);
+    video.addEventListener("pause", updatePlayingState);
+    video.addEventListener("playing", updatePlayingState);
+    video.addEventListener("volumechange", updateMutedState);
+    video.addEventListener("ratechange", updatePlaybackRate);
+    if (typeof document !== "undefined") document.addEventListener("fullscreenchange", updateFullscreenState);
+    return function () {
+      video.removeEventListener("play", updatePlayingState);
+      video.removeEventListener("pause", updatePlayingState);
+      video.removeEventListener("playing", updatePlayingState);
+      video.removeEventListener("volumechange", updateMutedState);
+      video.removeEventListener("ratechange", updatePlaybackRate);
+      if (typeof document !== "undefined") document.removeEventListener("fullscreenchange", updateFullscreenState);
+    };
+  }, [video, isLive]);
+  // Reset the seek-to-live flag when video element changes (new stream)
+  useEffect(function () {
+    hasSeekToLiveRef.current = false;
+  }, [video]);
+  useEffect(function () {
+    var activeTrack = textTracks.find(function (track) {
+      return track.active;
+    });
+    setCaptionValue(activeTrack ? activeTrack.id : "none");
+  }, [textTracks]);
+  // Track buffered ranges for SeekBar
+  useEffect(function () {
+    if (!video) return;
+    var updateBuffered = function updateBuffered() {
+      var _player$getBufferedRa, _player$getBufferedRa2;
+      var next = (_player$getBufferedRa = player === null || player === void 0 || (_player$getBufferedRa2 = player.getBufferedRanges) === null || _player$getBufferedRa2 === void 0 ? void 0 : _player$getBufferedRa2.call(player)) !== null && _player$getBufferedRa !== void 0 ? _player$getBufferedRa : video.buffered;
+      setBuffered(next);
+    };
+    updateBuffered();
+    video.addEventListener("progress", updateBuffered);
+    video.addEventListener("loadeddata", updateBuffered);
+    return function () {
+      video.removeEventListener("progress", updateBuffered);
+      video.removeEventListener("loadeddata", updateBuffered);
+    };
+  }, [video]);
+  useEffect(function () {
+    if (!video) {
+      setHasAudio(true);
+      return;
+    }
+    var checkAudio = function checkAudio() {
+      if (video.srcObject instanceof MediaStream) {
+        var audioTracks = video.srcObject.getAudioTracks();
+        setHasAudio(audioTracks.length > 0);
+        return;
+      }
+      var videoAny = video;
+      if (videoAny.audioTracks && videoAny.audioTracks.length !== undefined) {
+        setHasAudio(videoAny.audioTracks.length > 0);
+        return;
+      }
+      setHasAudio(true);
+    };
+    checkAudio();
+    video.addEventListener("loadedmetadata", checkAudio);
+    return function () {
+      return video.removeEventListener("loadedmetadata", checkAudio);
+    };
+  }, [video]);
+  var handlePlayPause = function handlePlayPause() {
+    var _ref7, _player$isPaused, _player$isPaused2;
+    if (disabled) return;
+    // Prefer prop callback from usePlayerController
+    if (onTogglePlay) {
+      onTogglePlay();
+      return;
+    }
+    // Fallback: direct video/player manipulation
+    if (!video && !player) return;
+    var isPaused = (_ref7 = (_player$isPaused = player === null || player === void 0 || (_player$isPaused2 = player.isPaused) === null || _player$isPaused2 === void 0 ? void 0 : _player$isPaused2.call(player)) !== null && _player$isPaused !== void 0 ? _player$isPaused : video === null || video === void 0 ? void 0 : video.paused) !== null && _ref7 !== void 0 ? _ref7 : true;
+    if (isPaused) {
+      if (player !== null && player !== void 0 && player.play) player.play()["catch"](function () {});else if (video) video.play()["catch"](function () {});
+    } else {
+      if (player !== null && player !== void 0 && player.pause) player.pause();else if (video) video.pause();
+    }
+  };
+  var handleSkipBack = function handleSkipBack() {
+    var newTime = Math.max(0, currentTime - 10);
+    if (_onSeek) {
+      _onSeek(newTime);
+      return;
+    }
+    var v = findVideoElement();
+    if (v) v.currentTime = newTime;
+  };
+  var handleSkipForward = function handleSkipForward() {
+    var maxTime = Number.isFinite(duration) ? duration : currentTime + 10;
+    var newTime = Math.min(maxTime, currentTime + 10);
+    if (_onSeek) {
+      _onSeek(newTime);
+      return;
+    }
+    var v = findVideoElement();
+    if (v) v.currentTime = newTime;
+  };
+  var handleMute = function handleMute() {
+    var _player$isMuted, _player$isMuted2, _player$setMuted;
+    if (disabled) return;
+    // Prefer prop callback from usePlayerController
+    if (onToggleMute) {
+      onToggleMute();
+      return;
+    }
+    // Fallback: direct video/player manipulation
+    var v = video !== null && video !== void 0 ? video : document.querySelector(".fw-player-video");
+    if (!v) return;
+    var nextMuted = !((_player$isMuted = player === null || player === void 0 || (_player$isMuted2 = player.isMuted) === null || _player$isMuted2 === void 0 ? void 0 : _player$isMuted2.call(player)) !== null && _player$isMuted !== void 0 ? _player$isMuted : v.muted);
+    player === null || player === void 0 || (_player$setMuted = player.setMuted) === null || _player$setMuted === void 0 || _player$setMuted.call(player, nextMuted);
+    v.muted = nextMuted;
+    setInternalIsMuted(nextMuted);
+    if (nextMuted) setInternalVolume(0);else setInternalVolume(Math.round(v.volume * 100));
+  };
+  var handleVolumeChange = useCallback(function (value) {
+    var _value$;
+    if (disabled) return;
+    var next = Math.max(0, Math.min(100, (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : 0));
+    // Prefer prop callback from usePlayerController
+    if (onVolumeChange) {
+      onVolumeChange(next / 100);
+      return;
+    }
+    // Fallback: direct video manipulation
+    var v = video !== null && video !== void 0 ? video : document.querySelector(".fw-player-video");
+    if (!v) return;
+    v.volume = next / 100;
+    v.muted = next === 0;
+    setInternalVolume(next);
+    setInternalIsMuted(next === 0);
+  }, [disabled, onVolumeChange, video]);
+  var handleFullscreen = function handleFullscreen() {
+    if (disabled) return;
+    // Prefer prop callback from usePlayerController
+    if (onToggleFullscreen) {
+      onToggleFullscreen();
+      return;
+    }
+    // Fallback: direct DOM manipulation
+    if (typeof document === "undefined") return;
+    var container = document.querySelector('[data-player-container="true"]');
+    if (!container) return;
+    if (document.fullscreenElement) document.exitFullscreen()["catch"](function () {});else container.requestFullscreen()["catch"](function () {});
+  };
+  var handleGoLive = function handleGoLive() {
+    var _player$jumpToLive;
+    if (disabled) return;
+    if (onJumpToLive) {
+      onJumpToLive();
+      return;
+    }
+    player === null || player === void 0 || (_player$jumpToLive = player.jumpToLive) === null || _player$jumpToLive === void 0 || _player$jumpToLive.call(player);
+  };
+  var handleSpeedChange = function handleSpeedChange(value) {
+    if (disabled) return;
+    var rate = Number(value);
+    setPlaybackRate(rate);
+    // Use player API if available, fall back to direct video element
+    if (player !== null && player !== void 0 && player.setPlaybackRate) {
+      player.setPlaybackRate(rate);
+    } else {
+      var v = findVideoElement();
+      if (v) v.playbackRate = rate;
+    }
+  };
+  var handleQualityChange = function handleQualityChange(value) {
+    var _player$selectQuality;
+    if (disabled) return;
+    setQualityValue(value);
+    // Prefer prop callback from usePlayerController
+    if (onSelectQuality) {
+      onSelectQuality(value);
+      return;
+    }
+    // Fallback: direct player manipulation
+    player === null || player === void 0 || (_player$selectQuality = player.selectQuality) === null || _player$selectQuality === void 0 || _player$selectQuality.call(player, value);
+  };
+  var handleCaptionChange = function handleCaptionChange(value) {
+    var _player$selectTextTra, _player$selectTextTra2;
+    if (disabled) return;
+    setCaptionValue(value);
+    if (value === "none") player === null || player === void 0 || (_player$selectTextTra = player.selectTextTrack) === null || _player$selectTextTra === void 0 || _player$selectTextTra.call(player, null);else player === null || player === void 0 || (_player$selectTextTra2 = player.selectTextTrack) === null || _player$selectTextTra2 === void 0 || _player$selectTextTra2.call(player, value);
+  };
+  // Time display - using core formatTimeDisplay
+  var timeDisplay = useMemo(function () {
+    return formatTimeDisplay({
+      isLive: isLive,
+      currentTime: currentTime,
+      duration: duration,
+      liveEdge: liveEdge,
+      seekableStart: seekableStart,
+      unixoffset: mistStreamInfo === null || mistStreamInfo === void 0 ? void 0 : mistStreamInfo.unixoffset
+    });
+  }, [isLive, currentTime, duration, liveEdge, seekableStart, mistStreamInfo === null || mistStreamInfo === void 0 ? void 0 : mistStreamInfo.unixoffset]);
+  var _useState23 = useState(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    isVolumeHovered = _useState24[0],
+    setIsVolumeHovered = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isVolumeFocused = _useState26[0],
+    setIsVolumeFocused = _useState26[1];
+  var isVolumeExpanded = isVolumeHovered || isVolumeFocused;
+  var volumeGroupRef = useRef(null);
+  // Non-passive wheel listener for volume control
+  useEffect(function () {
+    var el = volumeGroupRef.current;
+    if (!el) return;
+    var handler = function handler(e) {
+      if (disabled || !hasAudio) return;
+      e.preventDefault();
+      var delta = e.deltaY < 0 ? 5 : -5;
+      handleVolumeChange([actualVolume + delta]);
+    };
+    el.addEventListener("wheel", handler, {
+      passive: false
+    });
+    return function () {
+      return el.removeEventListener("wheel", handler);
+    };
+  }, [disabled, hasAudio, actualVolume, handleVolumeChange]);
+  return jsx("div", {
+    className: cn("fw-player-surface fw-controls-wrapper", isVisible ? "fw-controls-wrapper--visible" : "fw-controls-wrapper--hidden"),
+    children: jsxs("div", {
+      className: "fw-control-bar pointer-events-auto",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [canSeek && jsx("div", {
+        className: "fw-seek-wrapper",
+        children: jsx(SeekBar, {
+          currentTime: currentTime,
+          duration: duration,
+          buffered: buffered,
+          disabled: disabled,
+          isLive: isLive,
+          seekableStart: seekableStart,
+          liveEdge: liveEdge,
+          commitOnRelease: commitOnRelease,
+          onSeek: function onSeek(time) {
+            if (_onSeek) {
+              _onSeek(time);
+            } else if (video) {
+              video.currentTime = time;
+            }
+          }
+        })
+      }), jsxs("div", {
+        className: "fw-controls-row",
+        children: [jsxs("div", {
+          className: "fw-controls-left",
+          children: [jsxs("div", {
+            className: "fw-control-group",
+            children: [jsx("button", {
+              type: "button",
+              className: "fw-btn-flush",
+              "aria-label": isPlaying ? "Pause" : "Play",
+              onClick: handlePlayPause,
+              children: jsx(PlayPauseIcon, {
+                isPlaying: isPlaying,
+                size: 18
+              })
+            }), canSeek && jsxs(Fragment, {
+              children: [jsx("button", {
+                type: "button",
+                className: "fw-btn-flush hidden sm:flex",
+                "aria-label": "Skip back 10 seconds",
+                onClick: handleSkipBack,
+                children: jsx(SkipBackIcon, {
+                  size: 16
+                })
+              }), jsx("button", {
+                type: "button",
+                className: "fw-btn-flush hidden sm:flex",
+                "aria-label": "Skip forward 10 seconds",
+                onClick: handleSkipForward,
+                children: jsx(SkipForwardIcon, {
+                  size: 16
+                })
+              })]
+            })]
+          }), jsxs("div", {
+            ref: volumeGroupRef,
+            className: cn("fw-volume-group", isVolumeExpanded && "fw-volume-group--expanded", !hasAudio && "fw-volume-group--disabled"),
+            onMouseEnter: function onMouseEnter() {
+              return hasAudio && setIsVolumeHovered(true);
+            },
+            onMouseLeave: function onMouseLeave() {
+              setIsVolumeHovered(false);
+              setIsVolumeFocused(false);
+            },
+            onFocusCapture: function onFocusCapture() {
+              return hasAudio && setIsVolumeFocused(true);
+            },
+            onBlurCapture: function onBlurCapture(e) {
+              if (!e.currentTarget.contains(e.relatedTarget)) setIsVolumeFocused(false);
+            },
+            onClick: function onClick(e) {
+              // Click on the pill (not slider) toggles mute
+              if (hasAudio && e.target === e.currentTarget) {
+                handleMute();
+              }
+            },
+            children: [jsx("button", {
+              type: "button",
+              className: "fw-volume-btn",
+              "aria-label": !hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute",
+              onClick: hasAudio ? handleMute : undefined,
+              disabled: !hasAudio,
+              children: jsx(VolumeIcon, {
+                isMuted: isMuted || !hasAudio,
+                size: 16
+              })
+            }), jsx("div", {
+              className: cn("fw-volume-slider-wrapper", isVolumeExpanded ? "fw-volume-slider-wrapper--expanded" : "fw-volume-slider-wrapper--collapsed"),
+              children: jsx(Slider, {
+                orientation: "horizontal",
+                "aria-label": "Volume",
+                max: 100,
+                step: 1,
+                value: [volumeValue],
+                onValueChange: handleVolumeChange,
+                className: "w-full",
+                disabled: !hasAudio
+              })
+            })]
+          }), jsx("div", {
+            className: "fw-control-group",
+            children: jsx("span", {
+              className: "fw-time-display",
+              children: timeDisplay
+            })
+          }), isLive && jsx("div", {
+            className: "fw-control-group",
+            children: jsxs("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",
+              children: ["LIVE", !isNearLiveState && hasDvrWindow && jsx(SeekToLiveIcon, {
+                size: 10
+              })]
+            })
+          })]
+        }), jsxs("div", {
+          className: "fw-controls-right",
+          children: [jsxs("div", {
+            className: "fw-control-group relative",
+            children: [jsx("button", {
+              type: "button",
+              className: cn("fw-btn-flush group", isSettingsOpen && "fw-btn-flush--active"),
+              "aria-label": "Settings",
+              title: "Settings",
+              onClick: function onClick() {
+                return setIsSettingsOpen(!isSettingsOpen);
+              },
+              children: jsx(SettingsIcon, {
+                size: 16,
+                className: "transition-transform group-hover:rotate-90"
+              })
+            }), isSettingsOpen && jsxs("div", {
+              className: "fw-player-surface fw-settings-menu",
+              children: [onModeChange && isContentLive !== false && jsxs("div", {
+                className: "fw-settings-section",
+                children: [jsx("div", {
+                  className: "fw-settings-label",
+                  children: "Mode"
+                }), jsx("div", {
+                  className: "fw-settings-options",
+                  children: ["auto", "low-latency", "quality"].map(function (mode) {
+                    return jsx("button", {
+                      className: cn("fw-settings-btn", playbackMode === mode && "fw-settings-btn--active"),
+                      onClick: function onClick() {
+                        onModeChange(mode);
+                        setIsSettingsOpen(false);
+                      },
+                      children: mode === "low-latency" ? "Fast" : mode === "quality" ? "Stable" : "Auto"
+                    }, mode);
+                  })
+                })]
+              }), supportsPlaybackRate$1 && jsxs("div", {
+                className: "fw-settings-section",
+                children: [jsx("div", {
+                  className: "fw-settings-label",
+                  children: "Speed"
+                }), jsx("div", {
+                  className: "fw-settings-options fw-settings-options--wrap",
+                  children: SPEED_PRESETS.map(function (rate) {
+                    return jsxs("button", {
+                      className: cn("fw-settings-btn", playbackRate === rate && "fw-settings-btn--active"),
+                      onClick: function onClick() {
+                        handleSpeedChange(String(rate));
+                        setIsSettingsOpen(false);
+                      },
+                      children: [rate, "x"]
+                    }, rate);
+                  })
+                })]
+              }), qualities.length > 0 && jsxs("div", {
+                className: "fw-settings-section",
+                children: [jsx("div", {
+                  className: "fw-settings-label",
+                  children: "Quality"
+                }), jsxs("div", {
+                  className: "fw-settings-list",
+                  children: [jsx("button", {
+                    className: cn("fw-settings-list-item", qualityValue === "auto" && "fw-settings-list-item--active"),
+                    onClick: function onClick() {
+                      handleQualityChange("auto");
+                      setIsSettingsOpen(false);
+                    },
+                    children: "Auto"
+                  }), qualities.map(function (q) {
+                    return jsx("button", {
+                      className: cn("fw-settings-list-item", qualityValue === q.id && "fw-settings-list-item--active"),
+                      onClick: function onClick() {
+                        handleQualityChange(q.id);
+                        setIsSettingsOpen(false);
+                      },
+                      children: q.label
+                    }, q.id);
+                  })]
+                })]
+              }), textTracks.length > 0 && jsxs("div", {
+                className: "fw-settings-section",
+                children: [jsx("div", {
+                  className: "fw-settings-label",
+                  children: "Captions"
+                }), jsxs("div", {
+                  className: "fw-settings-list",
+                  children: [jsx("button", {
+                    className: cn("fw-settings-list-item", captionValue === "none" && "fw-settings-list-item--active"),
+                    onClick: function onClick() {
+                      handleCaptionChange("none");
+                      setIsSettingsOpen(false);
+                    },
+                    children: "Off"
+                  }), textTracks.map(function (t) {
+                    return jsx("button", {
+                      className: cn("fw-settings-list-item", captionValue === t.id && "fw-settings-list-item--active"),
+                      onClick: function onClick() {
+                        handleCaptionChange(t.id);
+                        setIsSettingsOpen(false);
+                      },
+                      children: t.label || t.id
+                    }, t.id);
+                  })]
+                })]
+              })]
+            })]
+          }), jsx("div", {
+            className: "fw-control-group",
+            children: jsx("button", {
+              type: "button",
+              className: "fw-btn-flush",
+              "aria-label": "Toggle fullscreen",
+              onClick: handleFullscreen,
+              children: jsx(FullscreenToggleIcon, {
+                isFullscreen: isFullscreen,
+                size: 16
+              })
+            })
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+export { PlayerControls as default };
+//# sourceMappingURL=PlayerControls.js.map