@wix/editor-react-components 1.2153.0

package/dist/site/components/VideoUpload/component.js

@@ -0,0 +1,2274 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { f as formatClassNames } from "../chunks/classNames.js";
+import { V as Video } from "../chunks/Video.js";
+import { useService } from "@wix/services-manager-react";
+import { d as definitionExports } from "../chunks/index2.js";
+const semanticClassNames = {
+  root: "video-upload",
+  title: "video-upload__title"
+};
+const getCurrentTimeFromKeyboardKey = ({
+  key,
+  startTime,
+  endTime
+}) => {
+  const numberKey = Number(key);
+  if (numberKey === 0) {
+    return startTime;
+  }
+  const seekPercentage = numberKey * 10;
+  const duration = endTime - startTime;
+  const offset = duration * (seekPercentage / 100);
+  return startTime + offset;
+};
+const getFullscreenElement = (_containerElement, _videoElement) => {
+  const containerElement = _containerElement;
+  const videoElement = _videoElement;
+  if (typeof containerElement.webkitSupportsFullscreen === "boolean" || typeof containerElement.webkitEnterFullscreen !== "undefined" || typeof containerElement.requestFullscreen !== "undefined") {
+    return containerElement;
+  }
+  if (typeof videoElement.webkitSupportsFullscreen === "boolean" || typeof videoElement.webkitEnterFullscreen !== "undefined") {
+    return videoElement;
+  }
+  return containerElement;
+};
+const isFullscreenSupported = (_element) => {
+  const element = _element;
+  if (!window || !document) {
+    return false;
+  }
+  try {
+    return !!(document.fullscreenEnabled || element.webkitSupportsFullscreen || element.requestFullscreen || element.webkitEnterFullscreen);
+  } catch (error) {
+    return false;
+  }
+};
+const isElementInFullscreen = (_element) => {
+  const element = _element;
+  if (typeof element.webkitDisplayingFullscreen === "boolean") {
+    return element.webkitDisplayingFullscreen;
+  }
+  return (document == null ? void 0 : document.fullscreenElement) === element;
+};
+const requestElementFullscreen = async (_element) => {
+  const element = _element;
+  if (element.requestFullscreen) {
+    await element.requestFullscreen();
+  } else if (element.webkitEnterFullscreen) {
+    await element.webkitEnterFullscreen();
+  }
+  throw new Error("Fullscreen is not supported");
+};
+const exitDocumentFullscreen = async (_element) => {
+  const element = _element;
+  if (document == null ? void 0 : document.exitFullscreen) {
+    await document.exitFullscreen();
+  } else if (element == null ? void 0 : element.webkitExitFullscreen) {
+    await element.webkitExitFullscreen();
+  }
+  throw new Error("Fullscreen is not supported");
+};
+const getVideoDuration = (video) => {
+  if (!video) {
+    return 0;
+  }
+  return isNaN(video.duration) ? 0 : video.duration;
+};
+const getVideoAspectRatio = (video) => {
+  const videoSources = (video == null ? void 0 : video.sources) ?? [];
+  const [videoSource] = videoSources;
+  if (!videoSource || !videoSource.width || !videoSource.height) {
+    return void 0;
+  }
+  return videoSource.width / videoSource.height;
+};
+const fullscreenEvents = [
+  "fullscreenchange",
+  "webkitfullscreenchange",
+  "mozfullscreenchange",
+  "MSFullscreenChange"
+];
+const useFullscreen = (videoPlayerContainerRef, videoRef) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isFullscreenEnabled, setIsFullscreenEnabled] = useState(false);
+  const enterFullscreen = useCallback(async () => {
+    const videoPlayerContainerElement = videoPlayerContainerRef.current;
+    const videoElement = videoRef.current;
+    if (!videoPlayerContainerElement || !videoElement) {
+      return;
+    }
+    const fullscreenElement = getFullscreenElement(
+      videoPlayerContainerElement,
+      videoElement
+    );
+    await requestElementFullscreen(fullscreenElement);
+  }, [videoPlayerContainerRef, videoRef]);
+  const exitFullscreen = useCallback(async () => {
+    const videoPlayerContainerElement = videoPlayerContainerRef.current;
+    const videoElement = videoRef.current;
+    if (!videoPlayerContainerElement || !videoElement) {
+      return;
+    }
+    const fullscreenElement = getFullscreenElement(
+      videoPlayerContainerElement,
+      videoElement
+    );
+    await exitDocumentFullscreen(fullscreenElement);
+  }, [videoPlayerContainerRef, videoRef]);
+  const toggleFullscreen = useCallback(() => {
+    if (isFullscreen) {
+      return exitFullscreen();
+    } else {
+      return enterFullscreen();
+    }
+  }, [enterFullscreen, exitFullscreen, isFullscreen]);
+  useEffect(() => {
+    const videoPlayerContainerElement = videoPlayerContainerRef.current;
+    const videoElement = videoRef.current;
+    if (!videoPlayerContainerElement || !videoElement) {
+      setIsFullscreenEnabled(false);
+      setIsFullscreen(false);
+      return;
+    }
+    const fullscreenElement = getFullscreenElement(
+      videoPlayerContainerElement,
+      videoElement
+    );
+    setIsFullscreenEnabled(isFullscreenSupported(fullscreenElement));
+    const handleFullscreenChange = () => {
+      setIsFullscreen(isElementInFullscreen(fullscreenElement));
+    };
+    fullscreenEvents.forEach((eventName) => {
+      document.addEventListener(eventName, handleFullscreenChange);
+    });
+    return () => {
+      fullscreenEvents.forEach((eventName) => {
+        document.removeEventListener(eventName, handleFullscreenChange);
+      });
+    };
+  }, [videoPlayerContainerRef, videoRef]);
+  return {
+    isFullscreen,
+    isFullscreenEnabled,
+    toggleFullscreen,
+    enterFullscreen,
+    exitFullscreen
+  };
+};
+const CONTROLS_HIDE_TIMEOUT = 2e3;
+const SEEK_INTERVAL_IN_SECONDS = 5;
+const VOLUME_STEP = 0.05;
+const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+const ICON_SIZE_MAP = {
+  medium: 20,
+  large: 24
+};
+const defaultVideo = {
+  name: "Neutral Living Room",
+  uri: "",
+  adaptiveSources: [
+    {
+      format: "hls",
+      uri: "site/media/video/11062b_953b517691e34052afc53ccacc33fc67/da01a1fc-ad34-44bc-90e8-cc9413c466e6/repackage/hls"
+    }
+  ],
+  sources: [
+    {
+      quality: "360p",
+      height: 360,
+      width: 640,
+      types: [
+        {
+          format: "mp4",
+          uri: "video/11062b_953b517691e34052afc53ccacc33fc67/360p/mp4/file.mp4"
+        }
+      ]
+    },
+    {
+      quality: "480p",
+      height: 480,
+      width: 854,
+      types: [
+        {
+          format: "mp4",
+          uri: "video/11062b_953b517691e34052afc53ccacc33fc67/480p/mp4/file.mp4"
+        }
+      ]
+    },
+    {
+      quality: "720p",
+      height: 720,
+      width: 1280,
+      types: [
+        {
+          format: "mp4",
+          uri: "video/11062b_953b517691e34052afc53ccacc33fc67/720p/mp4/file.mp4"
+        }
+      ]
+    },
+    {
+      quality: "1080p",
+      height: 1080,
+      width: 1920,
+      types: [
+        {
+          format: "mp4",
+          uri: "video/11062b_953b517691e34052afc53ccacc33fc67/1080p/mp4/file.mp4"
+        }
+      ]
+    }
+  ],
+  hasAudio: false,
+  poster: {
+    uri: "11062b_953b517691e34052afc53ccacc33fc67f000.jpg",
+    width: 2560,
+    height: 1440
+  }
+};
+const usePlayback = (videoRef, autoplay) => {
+  const [isPlaying, setIsPlaying] = useState(autoplay);
+  const [isWaiting, setIsWaiting] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const play = useCallback(async () => {
+    var _a;
+    try {
+      await ((_a = videoRef.current) == null ? void 0 : _a.play());
+    } catch {
+      setIsPlaying(false);
+    }
+  }, [videoRef]);
+  const pause = useCallback(() => {
+    var _a;
+    (_a = videoRef.current) == null ? void 0 : _a.pause();
+  }, [videoRef]);
+  const togglePlay = useCallback(() => {
+    if (isPlaying) {
+      return pause();
+    } else {
+      return play();
+    }
+  }, [isPlaying, pause, play]);
+  const seek = useCallback(
+    (newTime) => {
+      const videoElement = videoRef.current;
+      if (!videoElement) {
+        return;
+      }
+      videoElement.currentTime = newTime;
+    },
+    [videoRef]
+  );
+  const seekForward = useCallback(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+    const newTime = videoElement.currentTime + SEEK_INTERVAL_IN_SECONDS;
+    const duration = videoElement.duration;
+    videoElement.currentTime = Math.min(newTime, duration);
+  }, [videoRef]);
+  const seekBackward = useCallback(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+    const newTime = Math.max(
+      0,
+      videoElement.currentTime - SEEK_INTERVAL_IN_SECONDS
+    );
+    videoElement.currentTime = newTime;
+  }, [videoRef]);
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+    const handlePlayEvent = () => setIsPlaying(true);
+    const handlePauseEvent = () => setIsPlaying(false);
+    const handleTimeUpdateEvent = () => {
+      return setCurrentTime(videoElement.currentTime);
+    };
+    const handleWaitingEvent = () => {
+      setIsWaiting(true);
+    };
+    const handlePlayingEvent = () => {
+      setIsWaiting(false);
+      setIsPlaying(true);
+    };
+    videoElement.addEventListener("play", handlePlayEvent);
+    videoElement.addEventListener("playing", handlePlayingEvent);
+    videoElement.addEventListener("pause", handlePauseEvent);
+    videoElement.addEventListener("waiting", handleWaitingEvent);
+    videoElement.addEventListener("timeupdate", handleTimeUpdateEvent);
+    return () => {
+      videoElement.removeEventListener("play", handlePlayEvent);
+      videoElement.removeEventListener("playing", handlePlayingEvent);
+      videoElement.removeEventListener("pause", handlePauseEvent);
+      videoElement.removeEventListener("waiting", handleWaitingEvent);
+      videoElement.removeEventListener("timeupdate", handleTimeUpdateEvent);
+    };
+  }, [videoRef]);
+  return {
+    isPlaying,
+    isWaiting,
+    currentTime,
+    play,
+    pause,
+    seek,
+    togglePlay,
+    seekForward,
+    seekBackward
+  };
+};
+const usePlaybackSettings = (videoRef, initialPlaybackRate) => {
+  const [playbackRate, _setPlaybackRate] = useState(initialPlaybackRate);
+  const setPlaybackRate = useCallback(
+    (newPlaybackRate) => {
+      if (videoRef.current) {
+        videoRef.current.playbackRate = newPlaybackRate;
+      }
+    },
+    [videoRef]
+  );
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+    const handleRateChangeEvent = () => {
+      _setPlaybackRate(videoElement.playbackRate);
+    };
+    videoElement.playbackRate = initialPlaybackRate;
+    videoElement.addEventListener("ratechange", handleRateChangeEvent);
+    return () => {
+      videoElement.removeEventListener("ratechange", handleRateChangeEvent);
+    };
+  }, [videoRef, initialPlaybackRate]);
+  return {
+    playbackRate,
+    setPlaybackRate
+  };
+};
+const usePictureInPicture = (videoRef) => {
+  const [isPictureInPicture, setIsPictureInPicture] = useState(false);
+  const [isPictureInPictureEnabled, setIsPictureInPictureEnabled] = useState(false);
+  const enterPictureInPicture = useCallback(async () => {
+    var _a;
+    await ((_a = videoRef.current) == null ? void 0 : _a.requestPictureInPicture());
+  }, [videoRef]);
+  const exitPictureInPicture = useCallback(async () => {
+    await document.exitPictureInPicture();
+  }, []);
+  const togglePictureInPicture = useCallback(() => {
+    if (isPictureInPicture) {
+      return exitPictureInPicture();
+    } else {
+      return enterPictureInPicture();
+    }
+  }, [isPictureInPicture, exitPictureInPicture, enterPictureInPicture]);
+  useEffect(() => {
+    setIsPictureInPictureEnabled(document.pictureInPictureEnabled);
+    const handlePictureInPictureChange = () => {
+      const video = videoRef.current;
+      const pictureInPictureElement = document.pictureInPictureElement;
+      const isVideoInPicture = pictureInPictureElement === video;
+      setIsPictureInPicture(
+        !!video && !!pictureInPictureElement && isVideoInPicture
+      );
+    };
+    document.addEventListener(
+      "enterpictureinpicture",
+      handlePictureInPictureChange
+    );
+    document.addEventListener(
+      "leavepictureinpicture",
+      handlePictureInPictureChange
+    );
+    return () => {
+      document.removeEventListener(
+        "enterpictureinpicture",
+        handlePictureInPictureChange
+      );
+      document.removeEventListener(
+        "leavepictureinpicture",
+        handlePictureInPictureChange
+      );
+    };
+  }, [videoRef]);
+  return {
+    isPictureInPicture,
+    isPictureInPictureEnabled,
+    togglePictureInPicture,
+    enterPictureInPicture,
+    exitPictureInPicture
+  };
+};
+const useVolume = (videoRef, video) => {
+  const [volume, _setVolume] = useState(1);
+  const [isMuted, _setIsMuted] = useState(true);
+  const setVolume = useCallback(
+    (value) => {
+      if (!videoRef.current) {
+        return;
+      }
+      videoRef.current.volume = value;
+    },
+    [videoRef]
+  );
+  const increaseVolume = useCallback(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    videoRef.current.volume = Math.min(
+      videoRef.current.volume + VOLUME_STEP,
+      1
+    );
+  }, [videoRef]);
+  const decreaseVolume = useCallback(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    videoRef.current.volume = Math.max(
+      videoRef.current.volume - VOLUME_STEP,
+      0
+    );
+  }, [videoRef]);
+  const toggleMuted = useCallback(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    videoRef.current.muted = !videoRef.current.muted;
+  }, [videoRef]);
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+    _setVolume(videoElement.volume);
+    _setIsMuted(videoElement.muted);
+    videoElement.addEventListener("volumechange", () => {
+      _setVolume(videoElement.volume);
+      _setIsMuted(videoElement.muted);
+    });
+    return () => {
+      videoElement.removeEventListener("volumechange", () => {
+        _setVolume(videoElement.volume);
+        _setIsMuted(videoElement.muted);
+      });
+    };
+  }, [videoRef]);
+  return {
+    hasAudio: (video == null ? void 0 : video.hasAudio) ?? false,
+    volume,
+    isMuted,
+    setVolume,
+    toggleMuted,
+    increaseVolume,
+    decreaseVolume
+  };
+};
+const isInteractiveElement = (element) => {
+  const tagName = element.tagName.toLowerCase();
+  const role = element.getAttribute("role");
+  return tagName === "button" || role === "button";
+};
+const useKeyboardShortcuts = ({
+  startTime,
+  endTime,
+  videoRef,
+  onPlayPause,
+  onSeekForward,
+  onSeekBackward,
+  onToggleMuted,
+  onIncreaseVolume,
+  onDecreaseVolume,
+  onToggleFullscreen
+}) => {
+  const handleKeyDown = useCallback(
+    async (event) => {
+      const videoElement = videoRef.current;
+      if (!videoElement) {
+        return;
+      }
+      switch (event.key) {
+        // Playback controls
+        case " ":
+          if (isInteractiveElement(event.target)) {
+            break;
+          }
+          event.preventDefault();
+          onPlayPause();
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          onSeekBackward();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          onSeekForward();
+          break;
+        // Audio controls
+        case "m":
+          event.preventDefault();
+          onToggleMuted();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          onIncreaseVolume();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          onDecreaseVolume();
+          break;
+        // Display controls
+        case "f":
+          event.preventDefault();
+          await onToggleFullscreen();
+          break;
+        // Time navigation
+        case "Home":
+          event.preventDefault();
+          videoElement.currentTime = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          videoElement.currentTime = endTime;
+          break;
+        case "0":
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+        case "9":
+          event.preventDefault();
+          videoElement.currentTime = getCurrentTimeFromKeyboardKey({
+            key: event.key,
+            startTime,
+            endTime
+          });
+          break;
+      }
+    },
+    [
+      endTime,
+      onDecreaseVolume,
+      onIncreaseVolume,
+      onPlayPause,
+      onSeekBackward,
+      onSeekForward,
+      onToggleFullscreen,
+      onToggleMuted,
+      startTime,
+      videoRef
+    ]
+  );
+  return { handleKeyDown };
+};
+const useElementsVisibility = ({
+  enableTitle,
+  enableControls,
+  isPlaying
+}) => {
+  const [showTitle, setShowTitle] = useState(enableTitle && !isPlaying);
+  const [showControls, setShowControls] = useState(
+    enableControls && !isPlaying
+  );
+  const hideTitleTimeoutRef = useRef(null);
+  const hideControlsTimeoutRef = useRef(null);
+  const clearHideTitleTimeout = useCallback(() => {
+    if (hideTitleTimeoutRef.current) {
+      clearTimeout(hideTitleTimeoutRef.current);
+      hideTitleTimeoutRef.current = null;
+    }
+  }, []);
+  const clearHideControlsTimeout = useCallback(() => {
+    if (hideControlsTimeoutRef.current) {
+      clearTimeout(hideControlsTimeoutRef.current);
+      hideControlsTimeoutRef.current = null;
+    }
+  }, []);
+  const startHideTitleTimeout = useCallback(() => {
+    clearHideTitleTimeout();
+    hideTitleTimeoutRef.current = setTimeout(() => {
+      setShowTitle(false);
+    }, CONTROLS_HIDE_TIMEOUT);
+  }, [clearHideTitleTimeout]);
+  const startHideControlsTimeout = useCallback(() => {
+    clearHideControlsTimeout();
+    hideControlsTimeoutRef.current = setTimeout(() => {
+      setShowControls(false);
+    }, CONTROLS_HIDE_TIMEOUT);
+  }, [clearHideControlsTimeout]);
+  const handleMouseEnter = useCallback(() => {
+    if (enableControls) {
+      setShowControls(true);
+      clearHideControlsTimeout();
+    }
+    if (enableTitle) {
+      setShowTitle(true);
+      clearHideTitleTimeout();
+    }
+  }, [
+    enableControls,
+    enableTitle,
+    clearHideControlsTimeout,
+    clearHideTitleTimeout
+  ]);
+  const handleMouseMove = useCallback(() => {
+    if (enableControls) {
+      setShowControls(true);
+      startHideControlsTimeout();
+    }
+    if (enableTitle) {
+      setShowTitle(true);
+      startHideTitleTimeout();
+    }
+  }, [
+    enableControls,
+    enableTitle,
+    startHideControlsTimeout,
+    startHideTitleTimeout
+  ]);
+  const handleMouseLeave = useCallback(() => {
+    if (enableControls) {
+      setShowControls(false);
+      clearHideControlsTimeout();
+    }
+    if (enableTitle) {
+      setShowTitle(false);
+      clearHideTitleTimeout();
+    }
+  }, [
+    enableControls,
+    enableTitle,
+    clearHideControlsTimeout,
+    clearHideTitleTimeout
+  ]);
+  const handleFocus = useCallback(() => {
+    if (enableControls) {
+      setShowControls(true);
+      clearHideControlsTimeout();
+    }
+    if (enableTitle) {
+      setShowTitle(true);
+      clearHideTitleTimeout();
+    }
+  }, [
+    enableControls,
+    enableTitle,
+    clearHideControlsTimeout,
+    clearHideTitleTimeout
+  ]);
+  useEffect(() => {
+    return () => {
+      clearHideControlsTimeout();
+      clearHideTitleTimeout();
+    };
+  }, [clearHideControlsTimeout, clearHideTitleTimeout]);
+  return {
+    showControls: enableControls && (!isPlaying || showControls),
+    showTitle: enableTitle && (!isPlaying || showTitle),
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleFocus
+  };
+};
+const useBuffer = ({
+  videoRef,
+  startTime,
+  endTime
+}) => {
+  const [loadedPercentage, setLoadedPercentage] = useState(0);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    const updateBuffer = () => {
+      if (video.duration > 0) {
+        const buffered = video.buffered;
+        if (buffered.length > 0) {
+          const bufferedEnd = buffered.end(buffered.length - 1);
+          let percentage = 0;
+          if (bufferedEnd <= startTime) {
+            percentage = 0;
+          } else if (bufferedEnd >= endTime) {
+            percentage = 100;
+          } else {
+            const bufferedInRange = bufferedEnd - startTime;
+            const constrainedDuration = endTime - startTime;
+            percentage = bufferedInRange / constrainedDuration * 100;
+          }
+          setLoadedPercentage(Math.min(Math.max(percentage, 0), 100));
+        }
+      }
+    };
+    video.addEventListener("progress", updateBuffer);
+    video.addEventListener("canplay", updateBuffer);
+    video.addEventListener("canplaythrough", updateBuffer);
+    video.addEventListener("loadedmetadata", updateBuffer);
+    updateBuffer();
+    return () => {
+      video.removeEventListener("progress", updateBuffer);
+      video.removeEventListener("canplay", updateBuffer);
+      video.removeEventListener("canplaythrough", updateBuffer);
+      video.removeEventListener("loadedmetadata", updateBuffer);
+    };
+  }, [videoRef, startTime, endTime]);
+  return { loadedPercentage };
+};
+const isDefaultTiming = ({
+  startTime,
+  endTime,
+  duration
+}) => {
+  return startTime === 0 && duration === endTime;
+};
+const useTimingTrap = ({
+  videoRef,
+  duration,
+  startTime,
+  endTime,
+  loop,
+  onPause
+}) => {
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || isDefaultTiming({ startTime, endTime, duration })) {
+      return;
+    }
+    const handleTimeUpdate = () => {
+      if (video.currentTime < startTime) {
+        video.currentTime = startTime;
+        return;
+      }
+      if (video.currentTime > endTime) {
+        if (loop) {
+          video.currentTime = startTime;
+          return;
+        } else {
+          video.currentTime = endTime;
+          return onPause();
+        }
+      }
+    };
+    const handlePlay = async () => {
+      if (loop) {
+        return;
+      }
+      if (video.currentTime >= endTime) {
+        video.currentTime = startTime;
+      }
+    };
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    video.addEventListener("play", handlePlay);
+    return () => {
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+    };
+  }, [videoRef, duration, startTime, endTime, loop, onPause]);
+};
+const useVideoPlayer = ({
+  videoRef,
+  containerRef,
+  video,
+  autoplay,
+  playbackRate,
+  enableTitle,
+  enableControls,
+  loop,
+  startTime,
+  endTime
+}) => {
+  const aspectRatio = getVideoAspectRatio(video);
+  const duration = getVideoDuration(videoRef.current);
+  const timings = {
+    startTime: startTime ?? 0,
+    endTime: endTime ?? duration
+  };
+  const buffer = useBuffer({
+    videoRef,
+    startTime: timings.startTime,
+    endTime: timings.endTime
+  });
+  const playback = usePlayback(videoRef, autoplay);
+  const playbackSettings = usePlaybackSettings(videoRef, playbackRate);
+  const audio = useVolume(videoRef, video);
+  const pip = usePictureInPicture(videoRef);
+  const fullscreen2 = useFullscreen(containerRef, videoRef);
+  const { handleKeyDown } = useKeyboardShortcuts({
+    videoRef,
+    startTime: timings.startTime,
+    endTime: timings.endTime,
+    onPlayPause: playback.togglePlay,
+    onSeekForward: playback.seekForward,
+    onSeekBackward: playback.seekBackward,
+    onToggleMuted: audio.toggleMuted,
+    onIncreaseVolume: audio.increaseVolume,
+    onDecreaseVolume: audio.decreaseVolume,
+    onToggleFullscreen: fullscreen2.toggleFullscreen
+  });
+  const {
+    showTitle,
+    showControls,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleFocus
+  } = useElementsVisibility({
+    enableControls,
+    enableTitle,
+    isPlaying: playback.isPlaying
+  });
+  const showPlayButton = useMemo(() => {
+    const controlsHidden = !showControls;
+    const isPaused = !playback.isPlaying;
+    const isAtStart = playback.currentTime <= timings.startTime;
+    return isPaused && (isAtStart || controlsHidden);
+  }, [
+    playback.currentTime,
+    playback.isPlaying,
+    showControls,
+    timings.startTime
+  ]);
+  const showSpinner = playback.isWaiting && playback.isPlaying;
+  const { toggleFullscreen } = fullscreen2;
+  const { play, togglePlay } = playback;
+  const handleVideoContainerClick = useCallback(
+    async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      await togglePlay();
+    },
+    [togglePlay]
+  );
+  const handlePlayButtonOverlayClick = useCallback(
+    async (event) => {
+      var _a;
+      event.preventDefault();
+      event.stopPropagation();
+      await play();
+      (_a = containerRef.current) == null ? void 0 : _a.focus();
+    },
+    [containerRef, play]
+  );
+  const handleVideoContainerDoubleClick = useCallback(
+    async (event) => {
+      event.preventDefault();
+      await toggleFullscreen();
+    },
+    [toggleFullscreen]
+  );
+  const handlers = {
+    onVideoPlayerKeyDown: handleKeyDown,
+    onVideoPlayerMouseEnter: handleMouseEnter,
+    onVideoPlayerMouseMove: handleMouseMove,
+    onVideoPlayerMouseLeave: handleMouseLeave,
+    onVideoPlayerFocus: handleFocus,
+    onVideoContainerClick: handleVideoContainerClick,
+    onVideoContainerDoubleClick: handleVideoContainerDoubleClick,
+    onPlayButtonOverlayClick: handlePlayButtonOverlayClick
+  };
+  useTimingTrap({
+    videoRef,
+    duration,
+    startTime: timings.startTime,
+    endTime: timings.endTime,
+    loop,
+    onPause: playback.pause
+  });
+  return {
+    timings,
+    playback,
+    playbackSettings,
+    audio,
+    pip,
+    fullscreen: fullscreen2,
+    buffer,
+    aspectRatio,
+    duration,
+    showPlayButton,
+    showTitle,
+    showControls,
+    showSpinner,
+    handlers
+  };
+};
+const PlayButtonIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "36",
+    height: "36",
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "18", fill: "#000624", fillOpacity: "0.7" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M15.4789 12.8067L23.3905 17.1221C23.8754 17.3866 24.054 17.994 23.7896 18.4789C23.6976 18.6474 23.5591 18.786 23.3905 18.8779L15.4789 23.1934C14.994 23.4578 14.3866 23.2792 14.1221 22.7943C14.042 22.6474 14 22.4828 14 22.3155C14 22.3155 14 19.4385 14 18C14 16.5615 14 13.6846 14 13.6846C14 13.1323 14.4477 12.6846 15 12.6846C15.1673 12.6846 15.332 12.7266 15.4789 12.8067Z",
+          fill: "white"
+        }
+      )
+    ]
+  }
+);
+const FullscreenIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M5 11V14.293L8.293 11L9 11.707L5.707 15H9V16H4V11H5ZM16 4V9H15V5.707L11.707 9L11 8.293L14.293 5H11V4H16Z",
+        fill: "white",
+        fillOpacity: "0.8"
+      }
+    )
+  }
+);
+const tooltipContainer = "tooltipContainer__G6UKo";
+const tooltip = "tooltip__cfZVz";
+const tooltipContent = "tooltipContent__yXoxN";
+const styles$d = {
+  tooltipContainer,
+  tooltip,
+  tooltipContent
+};
+const Tooltip = ({ content, children, disabled }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const showTooltip = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setIsVisible(true);
+  }, [disabled]);
+  const hideTooltip = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setIsVisible(false);
+  }, [disabled]);
+  const handleMouseEnter = useCallback(() => {
+    showTooltip();
+  }, [showTooltip]);
+  const handleMouseLeave = useCallback(() => {
+    hideTooltip();
+  }, [hideTooltip]);
+  const handleFocus = useCallback(() => {
+    showTooltip();
+  }, [showTooltip]);
+  const handleBlur = useCallback(() => {
+    hideTooltip();
+  }, [hideTooltip]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles$d.tooltipContainer,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        children,
+        isVisible && !disabled && /* @__PURE__ */ jsx("div", { className: styles$d.tooltip, role: "tooltip", children: /* @__PURE__ */ jsx("div", { className: styles$d.tooltipContent, children: content }) })
+      ]
+    }
+  );
+};
+const button$4 = "button__rYrx5";
+const styles$c = {
+  button: button$4
+};
+const FullscreenToggle = ({
+  size,
+  isFullscreen,
+  onEnterFullscreen,
+  onExitFullscreen
+}) => {
+  const iconSize = ICON_SIZE_MAP[size];
+  const tooltipContent2 = "Full Screen";
+  const ariaLabel = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+  const handleFullscreenToggle = useCallback(() => {
+    if (isFullscreen) {
+      return onExitFullscreen();
+    }
+    return onEnterFullscreen();
+  }, [isFullscreen, onEnterFullscreen, onExitFullscreen]);
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent2, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: styles$c.button,
+      type: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      onClick: handleFullscreenToggle,
+      children: /* @__PURE__ */ jsx(FullscreenIcon, { width: iconSize, height: iconSize })
+    }
+  ) });
+};
+const PictureInPictureIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3.5",
+          y: "4.5",
+          width: "13",
+          height: "11",
+          rx: "1.5",
+          stroke: "white",
+          strokeOpacity: "0.8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "8",
+          y: "9",
+          width: "7",
+          height: "5",
+          rx: "1",
+          fill: "white",
+          fillOpacity: "0.8"
+        }
+      )
+    ]
+  }
+);
+const button$3 = "button__r1qaT";
+const styles$b = {
+  button: button$3
+};
+const PictureInPictureToggle = ({
+  size,
+  isPictureInPicture,
+  onPictureInPictureToggle
+}) => {
+  const iconSize = ICON_SIZE_MAP[size];
+  const tooltipContent2 = "Picture in picture";
+  const ariaLabel = isPictureInPicture ? "Exit picture in picture" : "Enter picture in picture";
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent2, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: styles$b.button,
+      type: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      onClick: onPictureInPictureToggle,
+      children: /* @__PURE__ */ jsx(PictureInPictureIcon, { width: iconSize, height: iconSize })
+    }
+  ) });
+};
+const PauseIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.5 3C6.916 3 4 5.916 4 9.5C4 13.084 6.916 16 10.5 16C14.084 16 17 13.084 17 9.5C17 5.916 14.084 3 10.5 3ZM8.94 7.225C8.9041 7.225 8.875 7.2541 8.875 7.29V11.71C8.875 11.7459 8.9041 11.775 8.94 11.775H9.98C10.0159 11.775 10.045 11.7459 10.045 11.71V7.29C10.045 7.2541 10.0159 7.225 9.98 7.225H8.94ZM11.02 7.225C10.9841 7.225 10.955 7.2541 10.955 7.29V11.71C10.955 11.7459 10.9841 11.775 11.02 11.775H12.06C12.0959 11.775 12.125 11.7459 12.125 11.71V7.29C12.125 7.2541 12.0959 7.225 12.06 7.225H11.02Z",
+        fill: "white",
+        fillOpacity: "0.8"
+      }
+    )
+  }
+);
+const PlayIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6 4.92427V15.0757C6 15.7967 6.77731 16.2389 7.38279 15.8631L15.565 10.7879C16.145 10.4279 16.145 9.57214 15.565 9.21305L7.38279 4.13685C6.77731 3.76114 6 4.20332 6 4.92427Z",
+        fill: "white",
+        fillOpacity: "0.8"
+      }
+    )
+  }
+);
+const button$2 = "button__-G0To";
+const styles$a = {
+  button: button$2
+};
+const PlayToggle = ({
+  isPlaying,
+  size,
+  onPause,
+  onPlay
+}) => {
+  const iconSize = ICON_SIZE_MAP[size];
+  const tooltipContent2 = isPlaying ? "Pause" : "Play";
+  const ariaLabel = isPlaying ? "Pause" : "Play";
+  const handlePlayToggle = useCallback(() => {
+    if (isPlaying) {
+      return onPause();
+    }
+    onPlay();
+  }, [isPlaying, onPlay, onPause]);
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent2, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: styles$a.button,
+      type: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      onClick: handlePlayToggle,
+      children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { width: iconSize, height: iconSize }) : /* @__PURE__ */ jsx(PlayIcon, { width: iconSize, height: iconSize })
+    }
+  ) });
+};
+const container$1 = "container__Q36eX";
+const horizontal = "horizontal__HPMYd";
+const vertical = "vertical__VZy4M";
+const track = "track__nC3mW";
+const fill = "fill__8uKY0";
+const scrubber = "scrubber__ccnxA";
+const dragging = "dragging__-RzLd";
+const styles$9 = {
+  container: container$1,
+  horizontal,
+  vertical,
+  track,
+  fill,
+  scrubber,
+  dragging
+};
+const Slider = ({
+  className,
+  trackClassName,
+  fillClassName,
+  scrubberClassName,
+  value,
+  min = 0,
+  max = 1,
+  orientation,
+  tabIndex = 0,
+  ariaLabel,
+  ariaValueText,
+  ariaValueMin = min,
+  ariaValueMax = max,
+  ariaValueNow = value,
+  additionalElements,
+  onChange,
+  onClick,
+  size = "medium"
+}) => {
+  const sliderRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isHorizontal = orientation === "horizontal";
+  const normalizedValue = Math.min(Math.max((value - min) / (max - min), 0), 1);
+  const getValueFromEvent = useCallback(
+    (event) => {
+      if (!sliderRef.current) {
+        return value;
+      }
+      const rect = sliderRef.current.getBoundingClientRect();
+      let coordinate;
+      let dimension;
+      if ("touches" in event) {
+        const touch = event.touches[0] || event.changedTouches[0];
+        coordinate = isHorizontal ? (touch == null ? void 0 : touch.clientX) || 0 : (touch == null ? void 0 : touch.clientY) || 0;
+      } else {
+        coordinate = isHorizontal ? event.clientX : event.clientY;
+      }
+      if (isHorizontal) {
+        dimension = rect.width;
+        coordinate = coordinate - rect.left;
+      } else {
+        dimension = rect.height;
+        coordinate = coordinate - rect.top;
+        coordinate = dimension - coordinate;
+      }
+      const percentage = Math.min(Math.max(coordinate / dimension, 0), 1);
+      return min + percentage * (max - min);
+    },
+    [value, min, max, isHorizontal]
+  );
+  const handleMouseDown = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragging(true);
+      const newValue = getValueFromEvent(event);
+      onChange(newValue);
+    },
+    [getValueFromEvent, onChange]
+  );
+  const handleTouchStart = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragging(true);
+      const newValue = getValueFromEvent(event);
+      onChange(newValue);
+    },
+    [getValueFromEvent, onChange]
+  );
+  const handleMouseMove = useCallback(
+    (event) => {
+      if (!isDragging) {
+        return;
+      }
+      event.preventDefault();
+      const newValue = getValueFromEvent(event);
+      onChange(newValue);
+    },
+    [isDragging, getValueFromEvent, onChange]
+  );
+  const handleTouchMove = useCallback(
+    (event) => {
+      if (!isDragging) {
+        return;
+      }
+      event.preventDefault();
+      const newValue = getValueFromEvent(event);
+      onChange(newValue);
+    },
+    [isDragging, getValueFromEvent, onChange]
+  );
+  const handleEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleClick = useCallback(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      if (event.target === sliderRef.current || event.target.closest(`.${styles$9.track}`)) {
+        const newValue = getValueFromEvent(event);
+        onClick(newValue);
+      }
+    },
+    [onClick, getValueFromEvent]
+  );
+  useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleEnd);
+    document.addEventListener("touchmove", handleTouchMove, {
+      passive: false
+    });
+    document.addEventListener("touchend", handleEnd);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, handleMouseMove, handleTouchMove, handleEnd]);
+  const fillStyle = isHorizontal ? { width: `${normalizedValue * 100}%` } : { height: `${normalizedValue * 100}%` };
+  const scrubberSize = size === "large" ? 16 : 12;
+  const scrubberSizeStyle = {
+    width: scrubberSize,
+    height: scrubberSize
+  };
+  const scrubberPercentage = Math.min(Math.max(normalizedValue * 100, 0), 100);
+  const scrubberStyle = isHorizontal ? { left: `${scrubberPercentage}%`, ...scrubberSizeStyle } : {
+    bottom: `calc(${scrubberPercentage}% - ${scrubberSize / 2}px)`,
+    ...scrubberSizeStyle
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        styles$9.container,
+        {
+          [styles$9.horizontal]: isHorizontal,
+          [styles$9.vertical]: !isHorizontal
+        },
+        className
+      ),
+      tabIndex,
+      role: "slider",
+      "aria-label": ariaLabel,
+      "aria-valuemin": ariaValueMin,
+      "aria-valuemax": ariaValueMax,
+      "aria-valuenow": ariaValueNow,
+      "aria-valuetext": ariaValueText,
+      "aria-orientation": orientation,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: sliderRef,
+          className: clsx(styles$9.track, trackClassName),
+          onMouseDown: handleMouseDown,
+          onTouchStart: handleTouchStart,
+          onClick: handleClick,
+          children: [
+            additionalElements,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(styles$9.fill, fillClassName),
+                style: fillStyle
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  styles$9.scrubber,
+                  { [styles$9.dragging]: isDragging },
+                  scrubberClassName
+                ),
+                style: scrubberStyle
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const getProgress = ({
+  currentTime,
+  endTime,
+  startTime
+}) => {
+  const duration = endTime - startTime;
+  const relativeCurrentTime = currentTime - startTime;
+  const progress = duration > 0 ? relativeCurrentTime / duration : 0;
+  return Math.min(Math.max(progress, 0), 1);
+};
+const getSeekTimeByPercentage = ({
+  percentage,
+  endTime,
+  startTime
+}) => {
+  const duration = endTime - startTime;
+  const newTime = percentage * duration + startTime;
+  return newTime;
+};
+const loadBar = "loadBar__--aie";
+const styles$8 = {
+  loadBar
+};
+const ProgressBar = ({
+  size = "medium",
+  currentTime,
+  startTime,
+  endTime,
+  loadedPercentage = 0,
+  onSeek
+}) => {
+  const progress = getProgress({
+    currentTime,
+    endTime,
+    startTime
+  });
+  const handleSeek = useCallback(
+    (percentage) => {
+      const newTime = getSeekTimeByPercentage({
+        percentage,
+        endTime,
+        startTime
+      });
+      onSeek(newTime);
+    },
+    [endTime, onSeek, startTime]
+  );
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      additionalElements: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles$8.loadBar,
+          style: { width: `${loadedPercentage}%` }
+        }
+      ),
+      value: progress,
+      min: 0,
+      max: 1,
+      orientation: "horizontal",
+      ariaLabel: "Seek slider",
+      ariaValueMin: startTime,
+      ariaValueMax: endTime,
+      ariaValueNow: currentTime - startTime,
+      ariaValueText: `${Math.round(currentTime - startTime)} of ${Math.round(
+        endTime - startTime
+      )} seconds`,
+      onChange: handleSeek,
+      onClick: handleSeek,
+      size
+    }
+  );
+};
+const timeDisplay = "timeDisplay__VBmVE";
+const styles$7 = {
+  timeDisplay
+};
+const formatTime = (timeInSeconds) => {
+  const hours = Math.floor(timeInSeconds / 3600);
+  const minutes = Math.floor(timeInSeconds % 3600 / 60);
+  const seconds = Math.floor(timeInSeconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+const TimeDisplay = ({
+  currentTime,
+  startTime,
+  endTime
+}) => {
+  const duration = endTime - startTime;
+  const relativeCurrentTime = Math.max(0, currentTime - startTime);
+  return /* @__PURE__ */ jsxs("div", { className: styles$7.timeDisplay, children: [
+    /* @__PURE__ */ jsx("span", { children: formatTime(relativeCurrentTime) }),
+    /* @__PURE__ */ jsx("span", { children: "/" }),
+    /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+  ] });
+};
+const PlaybackIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.00977 13.333C5.44809 13.9877 6.01231 14.5519 6.66699 14.9902L6.11035 15.8203C5.34708 15.3092 4.68969 14.652 4.17871 13.8887L5.00977 13.333Z",
+          fill: "white",
+          fillOpacity: "0.8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3.62402 8.73047L4.11426 8.82812C4.03945 9.20634 4 9.59807 4 10C4 10.4019 4.03945 10.7937 4.11426 11.1719L3.62305 11.2686L3.62402 11.2695L3.13379 11.3652C3.04648 10.9236 3 10.4672 3 10C3 9.53244 3.04636 9.07569 3.13379 8.63379L3.62402 8.73047Z",
+          fill: "white",
+          fillOpacity: "0.8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6.66699 5.00977C6.01231 5.44806 5.44809 6.01233 5.00977 6.66699L4.17871 6.11035C4.68972 5.34713 5.34711 4.6897 6.11035 4.17871L6.66699 5.00977Z",
+          fill: "white",
+          fillOpacity: "0.8"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { d: "M9 7.5L13 10L9 12.5V7.5Z", fill: "white", fillOpacity: "0.8" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M10.3662 3C14.2322 3 17.3662 6.13401 17.3662 10C17.3662 13.866 14.2322 17 10.3662 17C9.89857 17 9.44194 16.9527 9 16.8652L9.19434 15.8857C9.42732 15.9319 9.66507 15.9644 9.90692 15.9827C9.90473 15.9825 9.9091 15.9829 9.90692 15.9827C13.3357 16.2381 16.3662 13.4526 16.3662 10C16.3662 6.66957 13.5384 3.91772 10.2113 4.00196C9.86539 4.01072 9.52447 4.04894 9.19434 4.11426L9.09668 3.62305L9 3.13379C9.44192 3.04642 9.89867 3 10.3662 3Z",
+          fill: "white",
+          fillOpacity: "0.8"
+        }
+      )
+    ]
+  }
+);
+const CheckmarkIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M11.9403 5.99994C12.2332 5.70705 12.708 5.70705 13.0009 5.99994C13.2938 6.29284 13.2938 6.76771 13.0009 7.0606L7.50092 12.5606L5.00092 10.0606C4.70803 9.76771 4.70803 9.29284 5.00092 8.99994C5.29381 8.70705 5.76869 8.70705 6.06158 8.99994L7.50092 10.4393L11.9403 5.99994Z",
+        fill: "white"
+      }
+    )
+  }
+);
+const popoverContainer = "popoverContainer__FW5RK";
+const popover = "popover__1Bm0r";
+const open = "open__yUU6H";
+const popoverContent = "popoverContent__XjDnJ";
+const styles$6 = {
+  popoverContainer,
+  popover,
+  open,
+  popoverContent
+};
+const Popover = ({
+  containerClassName,
+  trigger,
+  triggerRef,
+  children,
+  isOpen,
+  onClose,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const popoverRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      if (isOpen && !((_a = triggerRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = popoverRef.current) == null ? void 0 : _b.contains(event.target))) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose, triggerRef]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(styles$6.popoverContainer, containerClassName),
+      onMouseEnter,
+      onMouseLeave,
+      children: [
+        trigger,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popoverRef,
+            className: clsx(styles$6.popover, { [styles$6.open]: isOpen }),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-hidden": !isOpen,
+            children: /* @__PURE__ */ jsx("div", { className: styles$6.popoverContent, children })
+          }
+        )
+      ]
+    }
+  );
+};
+const button$1 = "button__P2BlV";
+const popoverItemsContainer = "popoverItemsContainer__yBSl1";
+const popoverItem = "popoverItem__dKEg-";
+const selected = "selected__Bz1Eq";
+const checkedIcon = "checkedIcon__ayQhj";
+const styles$5 = {
+  button: button$1,
+  popoverItemsContainer,
+  popoverItem,
+  selected,
+  checkedIcon
+};
+const PlaybackRate = ({
+  size,
+  playbackRate,
+  onPlaybackRateChange
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const itemRefs = useRef([]);
+  const tooltipContent2 = "Playback speed";
+  const ariaLabel = "Playback speed";
+  const menuAriaLabel = "Playback speed options";
+  const iconSize = ICON_SIZE_MAP[size];
+  const handleOpen = useCallback(() => {
+    setIsPopoverOpen(true);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = itemRefs.current[0]) == null ? void 0 : _a.focus();
+    });
+  }, []);
+  const handleClose = useCallback(() => {
+    var _a;
+    setIsPopoverOpen(false);
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const togglePopover = useCallback(() => {
+    if (isPopoverOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [isPopoverOpen, handleClose, handleOpen]);
+  const handlePlaybackRateChange = useCallback(
+    (rate) => {
+      onPlaybackRateChange(rate);
+      handleClose();
+    },
+    [onPlaybackRateChange, handleClose]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      var _a, _b, _c;
+      if (!isPopoverOpen) {
+        return;
+      }
+      const focusableElements = itemRefs.current;
+      const currentIndex = focusableElements.findIndex(
+        (element) => element === document.activeElement
+      );
+      switch (event.key) {
+        case "Escape":
+          event.preventDefault();
+          handleClose();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          event.stopPropagation();
+          if (focusableElements.length === 0) {
+            return;
+          }
+          const nextDownIndex = currentIndex >= focusableElements.length - 1 ? 0 : currentIndex + 1;
+          (_a = focusableElements[nextDownIndex]) == null ? void 0 : _a.focus();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          event.stopPropagation();
+          if (focusableElements.length === 0) {
+            return;
+          }
+          const nextUpIndex = currentIndex <= 0 ? focusableElements.length - 1 : currentIndex - 1;
+          (_b = focusableElements[nextUpIndex]) == null ? void 0 : _b.focus();
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          event.stopPropagation();
+          const activeElement = document.activeElement;
+          activeElement == null ? void 0 : activeElement.click();
+          break;
+        case "Tab":
+          event.preventDefault();
+          if (focusableElements.length === 0) {
+            return;
+          }
+          let nextIndex;
+          if (event.shiftKey) {
+            nextIndex = currentIndex <= 0 ? focusableElements.length - 1 : currentIndex - 1;
+          } else {
+            nextIndex = currentIndex >= focusableElements.length - 1 ? 0 : currentIndex + 1;
+          }
+          (_c = focusableElements[nextIndex]) == null ? void 0 : _c.focus();
+          break;
+      }
+    },
+    [isPopoverOpen, handleClose]
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      triggerRef,
+      trigger: /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent2, disabled: isPopoverOpen, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: triggerRef,
+          className: styles$5.button,
+          type: "button",
+          tabIndex: 0,
+          "aria-label": ariaLabel,
+          "aria-expanded": isPopoverOpen,
+          "aria-haspopup": "menu",
+          onClick: togglePopover,
+          children: /* @__PURE__ */ jsx(PlaybackIcon, { width: iconSize, height: iconSize })
+        }
+      ) }),
+      isOpen: isPopoverOpen,
+      onClose: handleClose,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles$5.popoverItemsContainer,
+          role: "menu",
+          "aria-orientation": "vertical",
+          "aria-label": menuAriaLabel,
+          onKeyDown: handleKeyDown,
+          children: PLAYBACK_RATES.map((rate, index) => {
+            const isSelected = rate === playbackRate;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: (el) => itemRefs.current[index] = el,
+                className: clsx(styles$5.popoverItem, {
+                  [styles$5.selected]: isSelected
+                }),
+                type: "button",
+                tabIndex: 0,
+                role: "menuitem",
+                "aria-current": isSelected ? "true" : void 0,
+                "aria-label": `Playback speed ${rate}x`,
+                onClick: () => handlePlaybackRateChange(rate),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: styles$5.checkedIcon, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ jsx(CheckmarkIcon, {}) }),
+                  /* @__PURE__ */ jsx("div", { children: rate })
+                ]
+              },
+              rate
+            );
+          })
+        }
+      )
+    }
+  );
+};
+const VolumeQuiteIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12.1283 4.10039C12.2427 3.99695 12.4083 3.97128 12.5468 4.0335C12.6876 4.09572 12.7778 4.23572 12.7778 4.38894V16.0556C12.7778 16.2088 12.6876 16.3488 12.5468 16.411C12.4962 16.4336 12.4426 16.4445 12.3889 16.4445C12.2948 16.4445 12.2014 16.4103 12.1283 16.3441L8.353 12.9429L6.16666 12.9445C5.52344 12.9445 5 12.4211 5 11.7778V8.66672C5 8.0235 5.52344 7.50005 6.16666 7.50005H8.35611L12.1283 4.10039ZM14.5452 7.80767C15.1612 8.46489 15.5003 9.322 15.5003 10.2219C15.5003 11.1226 15.1612 11.9797 14.546 12.6369L13.9782 12.1049C14.4581 11.5931 14.7225 10.9242 14.7225 10.2219C14.7225 9.52033 14.4581 8.85222 13.9782 8.33967L14.5452 7.80767Z",
+        fill: "white",
+        fillOpacity: "0.8"
+      }
+    )
+  }
+);
+const VolumeLoudIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.9061 3.87817C11.0204 3.77472 11.1861 3.74906 11.3246 3.81128C11.4653 3.8735 11.5556 4.0135 11.5556 4.16672V15.8334C11.5556 15.9866 11.4653 16.1266 11.3246 16.1888C11.274 16.2114 11.2203 16.2223 11.1667 16.2223C11.0726 16.2223 10.9792 16.1881 10.9061 16.1219L7.13078 12.7207L4.94444 12.7223C4.30122 12.7223 3.77778 12.1988 3.77778 11.5556V8.4445C3.77778 7.80128 4.30122 7.27783 4.94444 7.27783H7.13389L10.9061 3.87817ZM14.6613 6.23196C15.6677 7.2384 16.2223 8.57696 16.2223 10.0003C16.2223 11.4236 15.6677 12.7622 14.6613 13.7678L14.1114 13.218C14.9709 12.3585 15.4445 11.2152 15.4445 10.0003C15.4445 8.78462 14.9709 7.64129 14.1114 6.78185L14.6613 6.23196ZM13.323 7.58545C13.939 8.24267 14.2781 9.09978 14.2781 9.99967C14.2781 10.9003 13.939 11.7575 13.3238 12.4147L12.756 11.8827C13.2359 11.3709 13.5003 10.702 13.5003 9.99967C13.5003 9.29811 13.2359 8.63 12.756 8.11745L13.323 7.58545Z",
+        fill: "white",
+        fillOpacity: "0.8"
+      }
+    )
+  }
+);
+const VolumeMutedIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.9061 3.87817C11.0204 3.77472 11.1853 3.74906 11.3246 3.81128C11.4653 3.8735 11.5556 4.0135 11.5556 4.16672V15.8334C11.5556 15.9866 11.4653 16.1266 11.3246 16.1888C11.274 16.2114 11.2203 16.2223 11.1667 16.2223C11.0726 16.2223 10.9792 16.1881 10.9061 16.1219L7.13078 12.7207L4.94444 12.7223C4.30122 12.7223 3.77778 12.1988 3.77778 11.5556V8.4445C3.77778 7.80128 4.30122 7.27783 4.94444 7.27783H7.13389L10.9061 3.87817ZM16.4489 8.05717L16.9988 8.60706L15.605 10.0001L16.9988 11.3931L16.4489 11.9429L15.0551 10.5499L13.6621 11.9429L13.1122 11.3931L14.5052 10.0001L13.1122 8.60706L13.6621 8.05717L15.0551 9.45017L16.4489 8.05717Z",
+        fill: "white",
+        fillOpacity: "0.8"
+      }
+    )
+  }
+);
+const volumeSlider = "volumeSlider__04Fog";
+const styles$4 = {
+  volumeSlider
+};
+const VolumeSlider = ({
+  volume,
+  onVolumeChange
+}) => {
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      className: styles$4.volumeSlider,
+      orientation: "vertical",
+      value: volume,
+      min: 0,
+      max: 1,
+      ariaLabel: "Volume",
+      ariaValueMin: 0,
+      ariaValueMax: 100,
+      ariaValueNow: Math.round(volume * 100),
+      tabIndex: -1,
+      onChange: onVolumeChange,
+      onClick: onVolumeChange
+    }
+  );
+};
+const button = "button__K-We5";
+const sliderContainer = "sliderContainer__fhbJg";
+const styles$3 = {
+  button,
+  sliderContainer
+};
+const VolumeIcon = ({ volume, hasVolume, size }) => {
+  if (!hasVolume) {
+    return /* @__PURE__ */ jsx(VolumeMutedIcon, { "aria-hidden": "true", width: size, height: size });
+  }
+  if (volume <= 0.5) {
+    return /* @__PURE__ */ jsx(VolumeQuiteIcon, { "aria-hidden": "true", width: size, height: size });
+  }
+  return /* @__PURE__ */ jsx(VolumeLoudIcon, { "aria-hidden": "true", width: size, height: size });
+};
+const VolumeControl = ({
+  size,
+  volume,
+  isMuted,
+  onMuteToggle,
+  onVolumeChange
+}) => {
+  const volumeButtonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const hasVolume = !isMuted && volume > 0;
+  const iconSize = ICON_SIZE_MAP[size];
+  const ariaLabel = hasVolume ? "Mute video" : "Unmute video";
+  const handlePopoverClose = useCallback(() => {
+    var _a;
+    setIsOpen(false);
+    (_a = volumeButtonRef.current) == null ? void 0 : _a.focus();
+  }, [volumeButtonRef]);
+  const handleVolumeChange = useCallback(
+    (newVolume) => {
+      if (isMuted && newVolume > 0) {
+        onMuteToggle();
+      }
+      onVolumeChange(newVolume);
+    },
+    [isMuted, onMuteToggle, onVolumeChange]
+  );
+  const handlePopoverOpen = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const handlePopoverCloseOnLeave = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const volumeButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: volumeButtonRef,
+      className: styles$3.button,
+      type: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "aria-pressed": !hasVolume,
+      onClick: onMuteToggle,
+      onFocus: handlePopoverOpen,
+      onBlur: handlePopoverCloseOnLeave,
+      children: /* @__PURE__ */ jsx(VolumeIcon, { volume, hasVolume, size: iconSize })
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      triggerRef: volumeButtonRef,
+      trigger: volumeButton,
+      isOpen,
+      onClose: handlePopoverClose,
+      onMouseEnter: handlePopoverOpen,
+      onMouseLeave: handlePopoverCloseOnLeave,
+      children: /* @__PURE__ */ jsx("div", { className: styles$3.sliderContainer, children: /* @__PURE__ */ jsx(
+        VolumeSlider,
+        {
+          volume: isMuted ? 0 : volume,
+          onVolumeChange: handleVolumeChange
+        }
+      ) })
+    }
+  );
+};
+const container = "container__pEFys";
+const controlsContainer = "controlsContainer__RbX-6";
+const leftControls = "leftControls__xO-7b";
+const leftControlsInner = "leftControlsInner__f-BlF";
+const rightControls = "rightControls__eveyc";
+const styles$2 = {
+  container,
+  controlsContainer,
+  leftControls,
+  leftControlsInner,
+  rightControls
+};
+const PlaybackControls = ({
+  currentTime,
+  startTime,
+  endTime,
+  volume,
+  playbackRate,
+  isMuted,
+  hasAudio,
+  isPlaying,
+  isFullscreen,
+  isPictureInPicture,
+  pictureInPictureSupported,
+  fullscreenSupported,
+  loadedPercentage,
+  onPause,
+  onPlay,
+  onSeek,
+  onMuteToggle,
+  onVolumeChange,
+  onPlaybackRateChange,
+  onEnterFullscreen,
+  onExitFullscreen,
+  onPictureInPictureToggle
+}) => {
+  const size = isFullscreen ? "large" : "medium";
+  return /* @__PURE__ */ jsxs("div", { className: styles$2.container, children: [
+    /* @__PURE__ */ jsx(
+      ProgressBar,
+      {
+        size,
+        currentTime,
+        startTime,
+        endTime,
+        loadedPercentage,
+        onSeek
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles$2.controlsContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$2.leftControls, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$2.leftControlsInner, children: [
+          /* @__PURE__ */ jsx(
+            PlayToggle,
+            {
+              size,
+              isPlaying,
+              onPause,
+              onPlay
+            }
+          ),
+          hasAudio ? /* @__PURE__ */ jsx(
+            VolumeControl,
+            {
+              size,
+              volume,
+              isMuted,
+              onMuteToggle,
+              onVolumeChange
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          TimeDisplay,
+          {
+            currentTime,
+            startTime,
+            endTime
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles$2.rightControls, children: [
+        /* @__PURE__ */ jsx(
+          PlaybackRate,
+          {
+            size,
+            playbackRate,
+            onPlaybackRateChange
+          }
+        ),
+        pictureInPictureSupported && /* @__PURE__ */ jsx(
+          PictureInPictureToggle,
+          {
+            size,
+            isPictureInPicture,
+            onPictureInPictureToggle
+          }
+        ),
+        fullscreenSupported && /* @__PURE__ */ jsx(
+          FullscreenToggle,
+          {
+            size,
+            isFullscreen,
+            onEnterFullscreen,
+            onExitFullscreen
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+const root$1 = "root__0kAkf";
+const circle = "circle__rkQBc";
+const styles$1 = {
+  root: root$1,
+  circle
+};
+const Spinner = (props) => {
+  return /* @__PURE__ */ jsx("svg", { ...props, viewBox: "0 0 50 50", className: styles$1.root, children: /* @__PURE__ */ jsx(
+    "circle",
+    {
+      className: styles$1.circle,
+      cx: "25",
+      cy: "25",
+      r: "20",
+      fill: "none",
+      strokeWidth: "4"
+    }
+  ) });
+};
+const root = "root__UidXn";
+const videoPlayerWrapper = "videoPlayerWrapper__hBt0h";
+const videoContainer = "videoContainer__y-jQ5";
+const videoPlayerContainer = "videoPlayerContainer__GA-EV";
+const lockedAspectRatio = "lockedAspectRatio__tnQ-s";
+const fullscreen = "fullscreen__nM-7I";
+const playbackControlsContainer = "playbackControlsContainer__VE-y0";
+const titleContainer = "titleContainer__HGfvN";
+const title = "title__J215T";
+const visible = "visible__jkM-V";
+const spinnerContainer = "spinnerContainer__BIN3B";
+const playButtonContainer = "playButtonContainer__k8tY-";
+const playButton = "playButton__FDp-e";
+const styles = {
+  root,
+  videoPlayerWrapper,
+  videoContainer,
+  videoPlayerContainer,
+  lockedAspectRatio,
+  fullscreen,
+  playbackControlsContainer,
+  titleContainer,
+  title,
+  visible,
+  spinnerContainer,
+  playButtonContainer,
+  playButton
+};
+const VideoUpload = ({
+  id,
+  className,
+  customClassNames = [],
+  video,
+  autoplay = false,
+  loop = false,
+  mute = true,
+  enableControls = true,
+  enableTitle = false,
+  startTime = 0,
+  endTime,
+  playbackRate = 1,
+  a11y
+}) => {
+  const videoRef = useRef(null);
+  const containerRef = useRef(null);
+  const {
+    timings,
+    showTitle,
+    showControls,
+    playback,
+    playbackSettings,
+    audio,
+    pip,
+    fullscreen: fullscreen2,
+    buffer,
+    aspectRatio,
+    showPlayButton,
+    showSpinner,
+    handlers
+  } = useVideoPlayer({
+    videoRef,
+    containerRef,
+    video,
+    autoplay,
+    playbackRate,
+    enableTitle,
+    enableControls,
+    loop,
+    startTime,
+    endTime
+  });
+  const {
+    onVideoContainerClick,
+    onVideoContainerDoubleClick,
+    onVideoPlayerKeyDown,
+    onVideoPlayerMouseEnter,
+    onVideoPlayerMouseMove,
+    onVideoPlayerMouseLeave,
+    onVideoPlayerFocus,
+    onPlayButtonOverlayClick
+  } = handlers;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: clsx(
+        styles.root,
+        className,
+        formatClassNames(semanticClassNames.root, ...customClassNames)
+      ),
+      children: video && video.poster ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(styles.videoPlayerWrapper, {
+            [styles.lockedAspectRatio]: aspectRatio
+          }),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: containerRef,
+              className: clsx(styles.videoPlayerContainer, {
+                [styles.lockedAspectRatio]: aspectRatio,
+                [styles.fullscreen]: fullscreen2.isFullscreen
+              }),
+              style: aspectRatio ? { "--aspect-ratio": aspectRatio } : void 0,
+              tabIndex: 0,
+              onKeyDown: onVideoPlayerKeyDown,
+              onMouseEnter: onVideoPlayerMouseEnter,
+              onMouseMove: onVideoPlayerMouseMove,
+              onMouseLeave: onVideoPlayerMouseLeave,
+              onFocus: onVideoPlayerFocus,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: styles.videoContainer,
+                    onClick: onVideoContainerClick,
+                    onDoubleClick: onVideoContainerDoubleClick,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Video,
+                        {
+                          id: `wix-video-${id}`,
+                          videoRef,
+                          videoMedia: { ...video, name: (a11y == null ? void 0 : a11y.ariaLabel) || video.name },
+                          muted: autoplay || mute,
+                          loop,
+                          autoplay,
+                          qualityPolicy: "adaptive",
+                          playbackRate
+                        }
+                      ),
+                      showSpinner && /* @__PURE__ */ jsx("div", { className: styles.spinnerContainer, children: /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" }) })
+                    ]
+                  }
+                ),
+                enableTitle && !!video.name && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(styles.titleContainer, {
+                      [styles.visible]: showTitle
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: clsx(
+                          styles.title,
+                          formatClassNames(semanticClassNames.title)
+                        ),
+                        children: video.name
+                      }
+                    )
+                  }
+                ),
+                showPlayButton && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles.playButtonContainer,
+                    onClick: onPlayButtonOverlayClick,
+                    children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: styles.playButton,
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": "Play video",
+                        children: /* @__PURE__ */ jsx(PlayButtonIcon, { "aria-hidden": "true" })
+                      }
+                    )
+                  }
+                ),
+                enableControls && !showPlayButton && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(styles.playbackControlsContainer, {
+                      [styles.visible]: showControls
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      PlaybackControls,
+                      {
+                        startTime: timings.startTime,
+                        endTime: timings.endTime,
+                        currentTime: playback.currentTime,
+                        volume: audio.volume,
+                        playbackRate: playbackSettings.playbackRate,
+                        isPlaying: playback.isPlaying,
+                        hasAudio: audio.hasAudio,
+                        isMuted: audio.isMuted,
+                        isFullscreen: fullscreen2.isFullscreen,
+                        isPictureInPicture: pip.isPictureInPicture,
+                        fullscreenSupported: fullscreen2.isFullscreenEnabled,
+                        pictureInPictureSupported: pip.isPictureInPictureEnabled,
+                        loadedPercentage: buffer.loadedPercentage,
+                        onPlay: playback.play,
+                        onPause: playback.pause,
+                        onSeek: playback.seek,
+                        onMuteToggle: audio.toggleMuted,
+                        onVolumeChange: audio.setVolume,
+                        onPlaybackRateChange: playbackSettings.setPlaybackRate,
+                        onEnterFullscreen: fullscreen2.enterFullscreen,
+                        onExitFullscreen: fullscreen2.exitFullscreen,
+                        onPictureInPictureToggle: pip.togglePictureInPicture
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx("p", { children: "No video uploaded" })
+    }
+  );
+};
+function component(props) {
+  const video = props.video ?? defaultVideo;
+  const environment = useService(definitionExports.EnvironmentDefinition);
+  const reducedMotion = (environment == null ? void 0 : environment.reducedMotion) ?? false;
+  const autoplay = !reducedMotion && props.autoplay;
+  return /* @__PURE__ */ jsx(VideoUpload, { ...props, autoplay, video });
+}
+export {
+  component as default
+};