@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDVideo.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
import { useSpring, animated } from "@react-spring/web";
import { Fade } from "react-awesome-reveal";
import { HUDUniversalHUDUtilityManager, ConvertToVideoTime } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import { ConvertSRTToVTT } from "../HUDManagers/HUDFileFormatUtilityManager.js";
import HUDHeaderBar from "./HUDHeaderBar.js";
import HUDLoading from "./HUDLoading.js";
import HUDSlider from "./HUDSlider.js";
import HUDTyper from "./HUDTyper.js";
import HUDIcon from "./HUDIcon.js";
var HUDVideoHeader = function HUDVideoHeader(_ref) {
  var _ref$headerButtonConf = _ref.headerButtonConfigurationSettings,
    headerButtonConfigurationSettings = _ref$headerButtonConf === void 0 ? {} : _ref$headerButtonConf,
    _ref$headerTitleConfi = _ref.headerTitleConfigurationSettings,
    headerTitleConfigurationSettings = _ref$headerTitleConfi === void 0 ? {} : _ref$headerTitleConfi,
    _ref$headerConfigurat = _ref.headerConfigurationSettings,
    headerConfigurationSettings = _ref$headerConfigurat === void 0 ? {} : _ref$headerConfigurat,
    headerVisible = _ref.headerVisible,
    children = _ref.children,
    title = _ref.title;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hovered = _useState2[0],
    setHovered = _useState2[1];
  if (!title && !children || !title && children && children.filter(function (item) {
    return item !== undefined && item !== null;
  }).length <= 0) return null;
  var headerStyle = _objectSpread({
    position: "absolute",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    overflow: "visible",
    transition: "opacity 0.3s ease",
    backdropFilter: "blur(3px)",
    letterSpacing: "1px",
    fontSize: "1.2rem",
    fontWeight: "bold",
    opacity: hovered ? 1 : 0.369,
    background: hovered && children && children.filter(function (item) {
      return item !== undefined && item !== null;
    }).length > 0 ? "linear-gradient(180deg, rgba(0, 0, 0, 0.69) -369.69%, transparent 87.69%)" : "transparent",
    color: "#FFD700",
    width: "100%",
    zIndex: 10,
    padding: "8px 20px",
    left: 0,
    top: 0
  }, headerConfigurationSettings);
  var buttonContainerStyle = _objectSpread({
    display: "flex",
    alignItems: "center",
    gap: "10px",
    marginRight: "1.69rem"
  }, headerButtonConfigurationSettings);
  return /*#__PURE__*/React.createElement(React.Fragment, null, headerVisible && /*#__PURE__*/React.createElement(HUDHeaderBar, {
    headerBarConfigurationSettings: headerStyle,
    onMouseLeave: function onMouseLeave() {
      return setHovered(false);
    },
    onMouseEnter: function onMouseEnter() {
      return setHovered(true);
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }, headerTitleConfigurationSettings)
  }, title), /*#__PURE__*/React.createElement("div", {
    style: buttonContainerStyle
  }, children)));
};
var HUDVideoPlayer = function HUDVideoPlayer(_ref2) {
  var _ref2$videoPlayerConf = _ref2.videoPlayerConfigurationSettings,
    videoPlayerConfigurationSettings = _ref2$videoPlayerConf === void 0 ? {} : _ref2$videoPlayerConf,
    _ref2$videoPlayerConf2 = _ref2.videoPlayerConfigurations,
    videoPlayerConfigurations = _ref2$videoPlayerConf2 === void 0 ? {} : _ref2$videoPlayerConf2,
    _ref2$srtSubtitlesLan = _ref2.srtSubtitlesLangLabel,
    srtSubtitlesLangLabel = _ref2$srtSubtitlesLan === void 0 ? "English" : _ref2$srtSubtitlesLan,
    _ref2$srtSubtitlesLan2 = _ref2.srtSubtitlesLang,
    srtSubtitlesLang = _ref2$srtSubtitlesLan2 === void 0 ? "en" : _ref2$srtSubtitlesLan2,
    _ref2$directSRTSRC = _ref2.directSRTSRC,
    directSRTSRC = _ref2$directSRTSRC === void 0 ? false : _ref2$directSRTSRC,
    _ref2$subtitlesEnable = _ref2.subtitlesEnabled,
    subtitlesEnabled = _ref2$subtitlesEnable === void 0 ? true : _ref2$subtitlesEnable,
    _ref2$srtSubtitlesSRC = _ref2.srtSubtitlesSRC,
    srtSubtitlesSRC = _ref2$srtSubtitlesSRC === void 0 ? null : _ref2$srtSubtitlesSRC,
    _ref2$autoPlay = _ref2.autoPlay,
    autoPlay = _ref2$autoPlay === void 0 ? false : _ref2$autoPlay,
    _ref2$noAudio = _ref2.noAudio,
    noAudio = _ref2$noAudio === void 0 ? false : _ref2$noAudio,
    _ref2$loop = _ref2.loop,
    loop = _ref2$loop === void 0 ? false : _ref2$loop,
    videoRef = _ref2.videoRef,
    onEnableCaptions = _ref2.onEnableCaptions,
    onClick = _ref2.onClick,
    source = _ref2.source,
    children = _ref2.children;
  var trackRef = useRef(null);
  var videoPlayerStyle = _objectSpread({
    cursor: "pointer",
    backgroundColor: "#000",
    height: "100%",
    width: "100%"
  }, videoPlayerConfigurationSettings);
  useEffect(function () {
    if (subtitlesEnabled && srtSubtitlesSRC && !directSRTSRC) {
      fetch(srtSubtitlesSRC).then(function (response) {
        return response.text();
      }).then(function (srtContent) {
        var vttContent = ConvertSRTToVTT(srtContent);
        if (trackRef.current.src) {
          URL.revokeObjectURL(trackRef.current.src);
        }
        var subtitlesURL = URL.createObjectURL(new Blob([vttContent], {
          type: "text/vtt"
        }));
        if (trackRef.current) {
          trackRef.current.src = subtitlesURL;
          trackRef.current["default"] = true;
        }
      })["catch"](function (error) {
        return console.error("Did not load subtitles ~", error);
      });
      return;
    }
    if (subtitlesEnabled && srtSubtitlesSRC && directSRTSRC) {
      var vttContent = ConvertSRTToVTT(srtSubtitlesSRC);
      if (trackRef.current.src) {
        URL.revokeObjectURL(trackRef.current.src);
      }
      var subtitlesURL = URL.createObjectURL(new Blob([vttContent], {
        type: "text/vtt"
      }));
      if (trackRef.current) {
        trackRef.current.src = subtitlesURL;
        trackRef.current["default"] = true;
      }
      return;
    }
  }, [subtitlesEnabled, srtSubtitlesSRC, directSRTSRC]);
  useEffect(function () {
    var videoElement = videoRef.current;
    if (subtitlesEnabled && srtSubtitlesSRC && videoElement) {
      var enableCaptions = function enableCaptions() {
        var textTracks = videoElement.textTracks;
        if (textTracks && textTracks[0]) {
          textTracks[0].mode = "showing";
        }
        if (onEnableCaptions) {
          onEnableCaptions(trackRef, videoElement, textTracks);
        }
      };
      enableCaptions();
    }
  }, [subtitlesEnabled, srtSubtitlesSRC]);
  return /*#__PURE__*/React.createElement("video", _extends({
    ref: videoRef,
    style: videoPlayerStyle,
    src: source,
    onClick: onClick,
    controls: false,
    autoPlay: autoPlay,
    muted: noAudio,
    loop: loop,
    preload: "auto"
  }, videoPlayerConfigurations), subtitlesEnabled && srtSubtitlesSRC ? /*#__PURE__*/React.createElement("track", {
    ref: trackRef,
    label: srtSubtitlesLangLabel,
    srcLang: srtSubtitlesLang,
    kind: "subtitles"
  }) : null, children);
};
var HUDActionButton = function HUDActionButton(_ref3) {
  var _ref3$actionInitialHo = _ref3.actionInitialHoverButtonConfigurationSettings,
    actionInitialHoverButtonConfigurationSettings = _ref3$actionInitialHo === void 0 ? {} : _ref3$actionInitialHo,
    _ref3$actionHoveredBu = _ref3.actionHoveredButtonConfigurationSettings,
    actionHoveredButtonConfigurationSettings = _ref3$actionHoveredBu === void 0 ? {} : _ref3$actionHoveredBu,
    _ref3$actionButtonCon = _ref3.actionButtonConfigurationSettings,
    actionButtonConfigurationSettings = _ref3$actionButtonCon === void 0 ? {} : _ref3$actionButtonCon,
    _ref3$actionIconConfi = _ref3.actionIconConfigurationSettings,
    actionIconConfigurationSettings = _ref3$actionIconConfi === void 0 ? {} : _ref3$actionIconConfi,
    _ref3$toolTipConfigur = _ref3.toolTipConfigurationSettings,
    toolTipConfigurationSettings = _ref3$toolTipConfigur === void 0 ? {} : _ref3$toolTipConfigur,
    _ref3$actionDestinati = _ref3.actionDestinationHoveredBackgroundColor,
    actionDestinationHoveredBackgroundColor = _ref3$actionDestinati === void 0 ? "rgba(255, 215, 0, 0.3)" : _ref3$actionDestinati,
    _ref3$actionHoveredBa = _ref3.actionHoveredBackgroundColor,
    actionHoveredBackgroundColor = _ref3$actionHoveredBa === void 0 ? "rgba(255, 215, 0, 0.1)" : _ref3$actionHoveredBa,
    _ref3$actionInitialHo2 = _ref3.actionInitialHoveredBackgroundColor,
    actionInitialHoveredBackgroundColor = _ref3$actionInitialHo2 === void 0 ? "rgba(255, 215, 0, 0.4)" : _ref3$actionInitialHo2,
    _ref3$actionInitialBa = _ref3.actionInitialBackgroundColor,
    actionInitialBackgroundColor = _ref3$actionInitialBa === void 0 ? "rgba(255, 215, 0, 0.2)" : _ref3$actionInitialBa,
    _ref3$iconColor = _ref3.iconColor,
    iconColor = _ref3$iconColor === void 0 ? "#FFD700" : _ref3$iconColor,
    onClick = _ref3.onClick,
    icon = _ref3.icon,
    _ref3$active = _ref3.active,
    active = _ref3$active === void 0 ? false : _ref3$active,
    _ref3$small = _ref3.small,
    small = _ref3$small === void 0 ? false : _ref3$small,
    tooltip = _ref3.tooltip;
  var _useState3 = useState({
      left: 0,
      top: 0
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    tooltipPosition = _useState4[0],
    setTooltipPosition = _useState4[1];
  var tooltipRef = useRef(null);
  var buttonRef = useRef(null);
  var buttonSize = small ? "40px" : "50px";
  var buttonStyle = _objectSpread({
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    transition: "background 0.3s ease, transform 0.3s ease",
    transform: active ? "scale(1.1)" : "scale(1)",
    border: "none",
    borderRadius: "50%",
    boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
    background: active ? "rgba(255, 215, 0, 0.3)" : "rgba(255, 215, 0, 0.1)",
    height: buttonSize,
    width: buttonSize,
    margin: "5px"
  }, actionButtonConfigurationSettings);
  var hoverStyle = useSpring({
    to: _objectSpread({
      background: active ? actionInitialHoveredBackgroundColor : actionInitialBackgroundColor
    }, actionInitialHoverButtonConfigurationSettings),
    from: _objectSpread({
      background: active ? actionDestinationHoveredBackgroundColor : actionHoveredBackgroundColor
    }, actionHoveredButtonConfigurationSettings),
    reset: true
  });
  var handleMouseEnter = function handleMouseEnter(e) {
    var buttonRect = buttonRef.current.getBoundingClientRect();
    var tooltipElement = tooltipRef.current;
    if (tooltipElement) {
      var newTop = buttonRect.top - tooltipElement.offsetHeight - 10;
      var newLeft = buttonRect.left + buttonRect.width / 2 - tooltipElement.offsetWidth / 2;
      setTooltipPosition({
        top: newTop,
        left: newLeft
      });
      tooltipElement.style.opacity = 1;
      tooltipElement.style.transform = "translateY(-10px)";
    }
  };
  var handleMouseLeave = function handleMouseLeave() {
    var tooltipElement = tooltipRef.current;
    if (tooltipElement) {
      tooltipElement.style.opacity = 0;
      tooltipElement.style.transform = "translateY(0)";
    }
  };
  return /*#__PURE__*/React.createElement(animated.button, {
    ref: buttonRef,
    style: _objectSpread(_objectSpread({}, buttonStyle), hoverStyle),
    onMouseLeave: handleMouseLeave,
    onMouseEnter: handleMouseEnter,
    onClick: onClick
  }, /*#__PURE__*/React.createElement(HUDIcon, {
    name: icon,
    color: iconColor,
    iconConfigurationSettings: _objectSpread({
      fontSize: "18px"
    }, actionIconConfigurationSettings)
  }), tooltip && /*#__PURE__*/React.createElement("div", {
    ref: tooltipRef,
    className: "tooltip",
    style: _objectSpread({
      position: "fixed",
      display: "flex",
      pointerEvents: "none",
      whiteSpace: "nowrap",
      transition: "opacity 0.3s ease, transform 0.3s ease",
      transform: "translateX(-50%)",
      borderRadius: "5px",
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      color: "#FFD700",
      opacity: 0,
      zIndex: 1269,
      padding: "5px",
      bottom: "100%",
      left: "50%"
    }, toolTipConfigurationSettings)
  }, tooltip));
};
var HUDVolumeControl = function HUDVolumeControl(_ref4) {
  var _videoRef$current, _videoRef$current2;
  var _ref4$volumeActionIni = _ref4.volumeActionInitialHoverButtonConfigurationSettings,
    volumeActionInitialHoverButtonConfigurationSettings = _ref4$volumeActionIni === void 0 ? {} : _ref4$volumeActionIni,
    _ref4$volumeActionHov = _ref4.volumeActionHoveredButtonConfigurationSettings,
    volumeActionHoveredButtonConfigurationSettings = _ref4$volumeActionHov === void 0 ? {} : _ref4$volumeActionHov,
    _ref4$volumeActionBut = _ref4.volumeActionButtonConfigurationSettings,
    volumeActionButtonConfigurationSettings = _ref4$volumeActionBut === void 0 ? {} : _ref4$volumeActionBut,
    _ref4$volumeActionIco = _ref4.volumeActionIconConfigurationSettings,
    volumeActionIconConfigurationSettings = _ref4$volumeActionIco === void 0 ? {} : _ref4$volumeActionIco,
    _ref4$volumeBarOuterC = _ref4.volumeBarOuterContainerConfigurationSettings,
    volumeBarOuterContainerConfigurationSettings = _ref4$volumeBarOuterC === void 0 ? {} : _ref4$volumeBarOuterC,
    _ref4$volumeBarContai = _ref4.volumeBarContainerConfigurationSettings,
    volumeBarContainerConfigurationSettings = _ref4$volumeBarContai === void 0 ? {} : _ref4$volumeBarContai,
    _ref4$volumeThumbConf = _ref4.volumeThumbConfigurationSettings,
    volumeThumbConfigurationSettings = _ref4$volumeThumbConf === void 0 ? {} : _ref4$volumeThumbConf,
    _ref4$volumeContainer = _ref4.volumeContainerConfigurationSettings,
    volumeContainerConfigurationSettings = _ref4$volumeContainer === void 0 ? {} : _ref4$volumeContainer,
    _ref4$volumeToolTipCo = _ref4.volumeToolTipConfigurationSettings,
    volumeToolTipConfigurationSettings = _ref4$volumeToolTipCo === void 0 ? {} : _ref4$volumeToolTipCo,
    _ref4$volumeBarConfig = _ref4.volumeBarConfigurationSettings,
    volumeBarConfigurationSettings = _ref4$volumeBarConfig === void 0 ? {} : _ref4$volumeBarConfig,
    _ref4$volumeActionDes = _ref4.volumeActionDestinationHoveredBackgroundColor,
    volumeActionDestinationHoveredBackgroundColor = _ref4$volumeActionDes === void 0 ? "rgba(255, 215, 0, 0.3)" : _ref4$volumeActionDes,
    _ref4$volumeActionHov2 = _ref4.volumeActionHoveredBackgroundColor,
    volumeActionHoveredBackgroundColor = _ref4$volumeActionHov2 === void 0 ? "rgba(255, 215, 0, 0.1)" : _ref4$volumeActionHov2,
    _ref4$volumeActionIni2 = _ref4.volumeActionInitialHoveredBackgroundColor,
    volumeActionInitialHoveredBackgroundColor = _ref4$volumeActionIni2 === void 0 ? "rgba(255, 215, 0, 0.4)" : _ref4$volumeActionIni2,
    _ref4$volumeActionIni3 = _ref4.volumeActionInitialBackgroundColor,
    volumeActionInitialBackgroundColor = _ref4$volumeActionIni3 === void 0 ? "rgba(255, 215, 0, 0.2)" : _ref4$volumeActionIni3,
    _ref4$volumeTrackBarB = _ref4.volumeTrackBarBackgroundColor,
    volumeTrackBarBackgroundColor = _ref4$volumeTrackBarB === void 0 ? "#555" : _ref4$volumeTrackBarB,
    _ref4$volumeTrackThum = _ref4.volumeTrackThumbColor,
    volumeTrackThumbColor = _ref4$volumeTrackThum === void 0 ? "#FFF" : _ref4$volumeTrackThum,
    _ref4$volumeTrackBarC = _ref4.volumeTrackBarColor,
    volumeTrackBarColor = _ref4$volumeTrackBarC === void 0 ? "#FFD700" : _ref4$volumeTrackBarC,
    _ref4$volumeIconColor = _ref4.volumeIconColor,
    volumeIconColor = _ref4$volumeIconColor === void 0 ? "#FFD700" : _ref4$volumeIconColor,
    videoRef = _ref4.videoRef,
    initialVolume = _ref4.initialVolume,
    setVolumeState = _ref4.setVolumeState,
    setMutedState = _ref4.setMutedState,
    _ref4$max = _ref4.max,
    max = _ref4$max === void 0 ? 1 : _ref4$max;
  var _useState5 = useState(initialVolume || ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.volume) || 1),
    _useState6 = _slicedToArray(_useState5, 2),
    volume = _useState6[0],
    setVolume = _useState6[1];
  var _useState7 = useState(((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.muted) || false),
    _useState8 = _slicedToArray(_useState7, 2),
    muted = _useState8[0],
    setMuted = _useState8[1];
  var _useState9 = useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    showSlider = _useState10[0],
    setShowSlider = _useState10[1];
  var toggleMute = function toggleMute() {
    setMuted(!muted);
    return;
  };
  useEffect(function () {
    if (videoRef.current) {
      videoRef.current.volume = volume;
      videoRef.current.muted = muted;
    }
    setVolumeState(volume);
    setMutedState(muted);
  }, [volume, muted, setVolumeState, setMutedState]);
  return /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      alignItems: "center"
    }, volumeContainerConfigurationSettings),
    onMouseLeave: function onMouseLeave() {
      return setShowSlider(false);
    },
    onMouseEnter: function onMouseEnter() {
      return setShowSlider(true);
    }
  }, /*#__PURE__*/React.createElement(HUDActionButton, {
    actionInitialHoverButtonConfigurationSettings: volumeActionInitialHoverButtonConfigurationSettings,
    actionHoveredButtonConfigurationSettings: volumeActionHoveredButtonConfigurationSettings,
    actionButtonConfigurationSettings: volumeActionButtonConfigurationSettings,
    actionIconConfigurationSettings: volumeActionIconConfigurationSettings,
    actionDestinationHoveredBackgroundColor: volumeActionDestinationHoveredBackgroundColor,
    actionHoveredBackgroundColor: volumeActionHoveredBackgroundColor,
    actionInitialHoveredBackgroundColor: volumeActionInitialHoveredBackgroundColor,
    actionInitialBackgroundColor: volumeActionInitialBackgroundColor,
    toolTipConfigurationSettings: volumeToolTipConfigurationSettings,
    iconColor: volumeIconColor,
    icon: muted ? "volume-mute" : "volume-up",
    onClick: toggleMute,
    active: muted,
    small: true,
    tooltip: "Mute/Unmute"
  }), showSlider && /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "absolute",
      bottom: "100%",
      left: "50%",
      transform: "translateX(-50%)",
      height: "100px",
      zIndex: 10
    }, volumeBarOuterContainerConfigurationSettings)
  }, /*#__PURE__*/React.createElement(HUDSlider, {
    sliderContainerConfigurationSettings: volumeBarContainerConfigurationSettings,
    fillBarConfigurationSettings: volumeBarConfigurationSettings,
    thumbConfigurationSettings: volumeThumbConfigurationSettings,
    value: volume,
    onChange: function onChange(newVolume) {
      return setVolume(newVolume);
    },
    max: max,
    trackColor: volumeTrackBarBackgroundColor,
    thumbColor: volumeTrackThumbColor,
    fillColor: volumeTrackBarColor,
    vertical: true
  })));
};
var HUDFullscreenControl = function HUDFullscreenControl(_ref5) {
  var _ref5$fullScreenActio = _ref5.fullScreenActionInitialHoverButtonConfigurationSettings,
    fullScreenActionInitialHoverButtonConfigurationSettings = _ref5$fullScreenActio === void 0 ? {} : _ref5$fullScreenActio,
    _ref5$fullScreenActio2 = _ref5.fullScreenActionHoveredButtonConfigurationSettings,
    fullScreenActionHoveredButtonConfigurationSettings = _ref5$fullScreenActio2 === void 0 ? {} : _ref5$fullScreenActio2,
    _ref5$fullScreenActio3 = _ref5.fullScreenActionButtonConfigurationSettings,
    fullScreenActionButtonConfigurationSettings = _ref5$fullScreenActio3 === void 0 ? {} : _ref5$fullScreenActio3,
    _ref5$fullScreenActio4 = _ref5.fullScreenActionIconConfigurationSettings,
    fullScreenActionIconConfigurationSettings = _ref5$fullScreenActio4 === void 0 ? {} : _ref5$fullScreenActio4,
    _ref5$fullScreenToolT = _ref5.fullScreenToolTipConfigurationSettings,
    fullScreenToolTipConfigurationSettings = _ref5$fullScreenToolT === void 0 ? {} : _ref5$fullScreenToolT,
    _ref5$fullScreenActio5 = _ref5.fullScreenActionDestinationHoveredBackgroundColor,
    fullScreenActionDestinationHoveredBackgroundColor = _ref5$fullScreenActio5 === void 0 ? "rgba(255, 215, 0, 0.3)" : _ref5$fullScreenActio5,
    _ref5$fullScreenActio6 = _ref5.fullScreenActionHoveredBackgroundColor,
    fullScreenActionHoveredBackgroundColor = _ref5$fullScreenActio6 === void 0 ? "rgba(255, 215, 0, 0.1)" : _ref5$fullScreenActio6,
    _ref5$fullScreenActio7 = _ref5.fullScreenActionInitialHoveredBackgroundColor,
    fullScreenActionInitialHoveredBackgroundColor = _ref5$fullScreenActio7 === void 0 ? "rgba(255, 215, 0, 0.4)" : _ref5$fullScreenActio7,
    _ref5$fullScreenActio8 = _ref5.fullScreenActionInitialBackgroundColor,
    fullScreenActionInitialBackgroundColor = _ref5$fullScreenActio8 === void 0 ? "rgba(255, 215, 0, 0.2)" : _ref5$fullScreenActio8,
    _ref5$fullScreenIconC = _ref5.fullScreenIconColor,
    fullScreenIconColor = _ref5$fullScreenIconC === void 0 ? "#FFD700" : _ref5$fullScreenIconC,
    containerRef = _ref5.containerRef,
    videoRef = _ref5.videoRef,
    setFullscreen = _ref5.setFullscreen,
    fullscreen = _ref5.fullscreen;
  var toggleFullscreen = function toggleFullscreen() {
    setTimeout(function () {
      if (!fullscreen) {
        containerRef.current.requestFullscreen();
        return;
      }
      try {
        document.exitFullscreen();
      } catch (error) {
        containerRef.current.requestFullscreen();
      }
    }, 100);
  };
  var handleFullscreenChange = function handleFullscreenChange() {
    var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
    if (fullscreenElement === containerRef.current) {
      setFullscreen(true);
      return;
    }
    setFullscreen(false);
    return;
  };
  useEffect(function () {
    var onKeydown = function onKeydown(event) {
      if (event.key === "Escape" && document.fullscreenElement !== containerRef.current) {
        setFullscreen(false);
      }
    };
    document.addEventListener("fullscreenchange", handleFullscreenChange);
    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
    document.addEventListener("mozfullscreenchange", handleFullscreenChange);
    document.addEventListener("MSFullscreenChange", handleFullscreenChange);
    document.addEventListener("keydown", onKeydown);
    return function () {
      document.removeEventListener("fullscreenchange", handleFullscreenChange);
      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
      document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
      document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
      document.removeEventListener("keydown", onKeydown);
    };
  }, [containerRef, setFullscreen]);
  return /*#__PURE__*/React.createElement(HUDActionButton, {
    actionInitialHoverButtonConfigurationSettings: fullScreenActionInitialHoverButtonConfigurationSettings,
    actionHoveredButtonConfigurationSettings: fullScreenActionHoveredButtonConfigurationSettings,
    actionButtonConfigurationSettings: fullScreenActionButtonConfigurationSettings,
    actionIconConfigurationSettings: fullScreenActionIconConfigurationSettings,
    actionDestinationHoveredBackgroundColor: fullScreenActionDestinationHoveredBackgroundColor,
    actionHoveredBackgroundColor: fullScreenActionHoveredBackgroundColor,
    actionInitialHoveredBackgroundColor: fullScreenActionInitialHoveredBackgroundColor,
    actionInitialBackgroundColor: fullScreenActionInitialBackgroundColor,
    toolTipConfigurationSettings: fullScreenToolTipConfigurationSettings,
    iconColor: fullScreenIconColor,
    icon: fullscreen ? "compress" : "expand",
    onClick: toggleFullscreen,
    active: fullscreen,
    small: true,
    tooltip: "Fullscreen/Exit Fullscreen"
  });
};
var HUDVideoProgressBar = function HUDVideoProgressBar(_ref6) {
  var _ref6$forwardButtonAc = _ref6.forwardButtonActionInitialHoverButtonConfigurationSettings,
    forwardButtonActionInitialHoverButtonConfigurationSettings = _ref6$forwardButtonAc === void 0 ? {} : _ref6$forwardButtonAc,
    _ref6$forwardButtonAc2 = _ref6.forwardButtonActionHoveredButtonConfigurationSettings,
    forwardButtonActionHoveredButtonConfigurationSettings = _ref6$forwardButtonAc2 === void 0 ? {} : _ref6$forwardButtonAc2,
    _ref6$forwardButtonAc3 = _ref6.forwardButtonActionButtonConfigurationSettings,
    forwardButtonActionButtonConfigurationSettings = _ref6$forwardButtonAc3 === void 0 ? {} : _ref6$forwardButtonAc3,
    _ref6$forwardButtonAc4 = _ref6.forwardButtonActionIconConfigurationSettings,
    forwardButtonActionIconConfigurationSettings = _ref6$forwardButtonAc4 === void 0 ? {} : _ref6$forwardButtonAc4,
    _ref6$rewindButtonAct = _ref6.rewindButtonActionInitialHoverButtonConfigurationSettings,
    rewindButtonActionInitialHoverButtonConfigurationSettings = _ref6$rewindButtonAct === void 0 ? {} : _ref6$rewindButtonAct,
    _ref6$rewindButtonAct2 = _ref6.rewindButtonActionHoveredButtonConfigurationSettings,
    rewindButtonActionHoveredButtonConfigurationSettings = _ref6$rewindButtonAct2 === void 0 ? {} : _ref6$rewindButtonAct2,
    _ref6$rewindButtonAct3 = _ref6.rewindButtonActionButtonConfigurationSettings,
    rewindButtonActionButtonConfigurationSettings = _ref6$rewindButtonAct3 === void 0 ? {} : _ref6$rewindButtonAct3,
    _ref6$rewindButtonAct4 = _ref6.rewindButtonActionIconConfigurationSettings,
    rewindButtonActionIconConfigurationSettings = _ref6$rewindButtonAct4 === void 0 ? {} : _ref6$rewindButtonAct4,
    _ref6$currentTimeLabe = _ref6.currentTimeLabelConfigurationSettings,
    currentTimeLabelConfigurationSettings = _ref6$currentTimeLabe === void 0 ? {} : _ref6$currentTimeLabe,
    _ref6$videoTimeLabelC = _ref6.videoTimeLabelConfigurationSettings,
    videoTimeLabelConfigurationSettings = _ref6$videoTimeLabelC === void 0 ? {} : _ref6$videoTimeLabelC,
    _ref6$forwardToolTipC = _ref6.forwardToolTipConfigurationSettings,
    forwardToolTipConfigurationSettings = _ref6$forwardToolTipC === void 0 ? {} : _ref6$forwardToolTipC,
    _ref6$rewindToolTipCo = _ref6.rewindToolTipConfigurationSettings,
    rewindToolTipConfigurationSettings = _ref6$rewindToolTipCo === void 0 ? {} : _ref6$rewindToolTipCo,
    _ref6$jumpToToolTipCo = _ref6.jumpToToolTipConfigurationSettings,
    jumpToToolTipConfigurationSettings = _ref6$jumpToToolTipCo === void 0 ? {} : _ref6$jumpToToolTipCo,
    _ref6$jumpToButtonAct = _ref6.jumpToButtonActionInitialHoverButtonConfigurationSettings,
    jumpToButtonActionInitialHoverButtonConfigurationSettings = _ref6$jumpToButtonAct === void 0 ? {} : _ref6$jumpToButtonAct,
    _ref6$jumpToButtonAct2 = _ref6.jumpToButtonActionHoveredButtonConfigurationSettings,
    jumpToButtonActionHoveredButtonConfigurationSettings = _ref6$jumpToButtonAct2 === void 0 ? {} : _ref6$jumpToButtonAct2,
    _ref6$jumpToButtonAct3 = _ref6.jumpToButtonActionButtonConfigurationSettings,
    jumpToButtonActionButtonConfigurationSettings = _ref6$jumpToButtonAct3 === void 0 ? {} : _ref6$jumpToButtonAct3,
    _ref6$jumpToButtonAct4 = _ref6.jumpToButtonActionIconConfigurationSettings,
    jumpToButtonActionIconConfigurationSettings = _ref6$jumpToButtonAct4 === void 0 ? {} : _ref6$jumpToButtonAct4,
    _ref6$videoProgressBa = _ref6.videoProgressBarContainerConfigurationSettings,
    videoProgressBarContainerConfigurationSettings = _ref6$videoProgressBa === void 0 ? {} : _ref6$videoProgressBa,
    _ref6$videoProgressTh = _ref6.videoProgressThumbConfigurationSettings,
    videoProgressThumbConfigurationSettings = _ref6$videoProgressTh === void 0 ? {} : _ref6$videoProgressTh,
    _ref6$videoProgressBa2 = _ref6.videoProgressBarConfigurationSettings,
    videoProgressBarConfigurationSettings = _ref6$videoProgressBa2 === void 0 ? {} : _ref6$videoProgressBa2,
    _ref6$sliderContainer = _ref6.sliderContainerConfigurationSettings,
    sliderContainerConfigurationSettings = _ref6$sliderContainer === void 0 ? {} : _ref6$sliderContainer,
    _ref6$previewCellTime = _ref6.previewCellTimeLabelContainerConfigurationSettings,
    previewCellTimeLabelContainerConfigurationSettings = _ref6$previewCellTime === void 0 ? {} : _ref6$previewCellTime,
    _ref6$previewOverlayC = _ref6.previewOverlayContainerConfigurationSettings,
    previewOverlayContainerConfigurationSettings = _ref6$previewOverlayC === void 0 ? {} : _ref6$previewOverlayC,
    _ref6$previewCellJump = _ref6.previewCellJumpToLabelConfigurationSettings,
    previewCellJumpToLabelConfigurationSettings = _ref6$previewCellJump === void 0 ? {} : _ref6$previewCellJump,
    _ref6$previewCellTime2 = _ref6.previewCellTimeLabelConfigurationSettings,
    previewCellTimeLabelConfigurationSettings = _ref6$previewCellTime2 === void 0 ? {} : _ref6$previewCellTime2,
    _ref6$previewCellTrac = _ref6.previewCellTrackConfigurationSettings,
    previewCellTrackConfigurationSettings = _ref6$previewCellTrac === void 0 ? {} : _ref6$previewCellTrac,
    _ref6$progressBarConf = _ref6.progressBarConfigurationSettings,
    progressBarConfigurationSettings = _ref6$progressBarConf === void 0 ? {} : _ref6$progressBarConf,
    _ref6$previewCellConf = _ref6.previewCellConfigurationSettings,
    previewCellConfigurationSettings = _ref6$previewCellConf === void 0 ? {} : _ref6$previewCellConf,
    _ref6$forwardActionDe = _ref6.forwardActionDestinationHoveredBackgroundColor,
    forwardActionDestinationHoveredBackgroundColor = _ref6$forwardActionDe === void 0 ? "rgba(255, 215, 0, 0.3)" : _ref6$forwardActionDe,
    _ref6$forwardActionHo = _ref6.forwardActionHoveredBackgroundColor,
    forwardActionHoveredBackgroundColor = _ref6$forwardActionHo === void 0 ? "rgba(255, 215, 0, 0.1)" : _ref6$forwardActionHo,
    _ref6$forwardActionIn = _ref6.forwardActionInitialHoveredBackgroundColor,
    forwardActionInitialHoveredBackgroundColor = _ref6$forwardActionIn === void 0 ? "rgba(255, 215, 0, 0.4)" : _ref6$forwardActionIn,
    _ref6$forwardActionIn2 = _ref6.forwardActionInitialBackgroundColor,
    forwardActionInitialBackgroundColor = _ref6$forwardActionIn2 === void 0 ? "rgba(255, 215, 0, 0.2)" : _ref6$forwardActionIn2,
    _ref6$rewindActionDes = _ref6.rewindActionDestinationHoveredBackgroundColor,
    rewindActionDestinationHoveredBackgroundColor = _ref6$rewindActionDes === void 0 ? "rgba(255, 215, 0, 0.3)" : _ref6$rewindActionDes,
    _ref6$rewindActionHov = _ref6.rewindActionHoveredBackgroundColor,
    rewindActionHoveredBackgroundColor = _ref6$rewindActionHov === void 0 ? "rgba(255, 215, 0, 0.1)" : _ref6$rewindActionHov,
    _ref6$rewindActionIni = _ref6.rewindActionInitialHoveredBackgroundColor,
    rewindActionInitialHoveredBackgroundColor = _ref6$rewindActionIni === void 0 ? "rgba(255, 215, 0, 0.4)" : _ref6$rewindActionIni,
    _ref6$rewindActionIni2 = _ref6.rewindActionInitialBackgroundColor,
    rewindActionInitialBackgroundColor = _ref6$rewindActionIni2 === void 0 ? "rgba(255, 215, 0, 0.2)" : _ref6$rewindActionIni2,
    _ref6$jumpToActionDes = _ref6.jumpToActionDestinationHoveredBackgroundColor,
    jumpToActionDestinationHoveredBackgroundColor = _ref6$jumpToActionDes === void 0 ? "rgba(255, 215, 0, 0.3)" : _ref6$jumpToActionDes,
    _ref6$jumpToActionHov = _ref6.jumpToActionHoveredBackgroundColor,
    jumpToActionHoveredBackgroundColor = _ref6$jumpToActionHov === void 0 ? "rgba(255, 215, 0, 0.1)" : _ref6$jumpToActionHov,
    _ref6$jumpToActionIni = _ref6.jumpToActionInitialHoveredBackgroundColor,
    jumpToActionInitialHoveredBackgroundColor = _ref6$jumpToActionIni === void 0 ? "rgba(255, 215, 0, 0.4)" : _ref6$jumpToActionIni,
    _ref6$jumpToActionIni2 = _ref6.jumpToActionInitialBackgroundColor,
    jumpToActionInitialBackgroundColor = _ref6$jumpToActionIni2 === void 0 ? "rgba(255, 215, 0, 0.2)" : _ref6$jumpToActionIni2,
    _ref6$videoTrackBarCo = _ref6.videoTrackBarColor,
    videoTrackBarColor = _ref6$videoTrackBarCo === void 0 ? "#FFD700" : _ref6$videoTrackBarCo,
    _ref6$videoTrackThumb = _ref6.videoTrackThumbColor,
    videoTrackThumbColor = _ref6$videoTrackThumb === void 0 ? "#FFF" : _ref6$videoTrackThumb,
    _ref6$forwardIconColo = _ref6.forwardIconColor,
    forwardIconColor = _ref6$forwardIconColo === void 0 ? "#FFD700" : _ref6$forwardIconColo,
    _ref6$rewindIconColor = _ref6.rewindIconColor,
    rewindIconColor = _ref6$rewindIconColor === void 0 ? "#FFD700" : _ref6$rewindIconColor,
    _ref6$jumpToIconColor = _ref6.jumpToIconColor,
    jumpToIconColor = _ref6$jumpToIconColor === void 0 ? "#FFD700" : _ref6$jumpToIconColor,
    _ref6$allowForward = _ref6.allowForward,
    allowForward = _ref6$allowForward === void 0 ? true : _ref6$allowForward,
    _ref6$allowRewind = _ref6.allowRewind,
    allowRewind = _ref6$allowRewind === void 0 ? true : _ref6$allowRewind,
    _ref6$allowJumpTo = _ref6.allowJumpTo,
    allowJumpTo = _ref6$allowJumpTo === void 0 ? true : _ref6$allowJumpTo,
    _ref6$allowSeek = _ref6.allowSeek,
    allowSeek = _ref6$allowSeek === void 0 ? true : _ref6$allowSeek,
    videoRef = _ref6.videoRef,
    currentTime = _ref6.currentTime,
    maxDuration = _ref6.maxDuration,
    duration = _ref6.duration,
    onPreview = _ref6.onPreview,
    onSeek = _ref6.onSeek,
    previewSource = _ref6.previewSource,
    progress = _ref6.progress,
    _ref6$max = _ref6.max,
    max = _ref6$max === void 0 ? 100 : _ref6$max;
  var _useState11 = useState(null),
    _useState12 = _slicedToArray(_useState11, 2),
    previewTime = _useState12[0],
    setPreviewTime = _useState12[1];
  var _useState13 = useState(false),
    _useState14 = _slicedToArray(_useState13, 2),
    hovered = _useState14[0],
    setHovered = _useState14[1];
  var _useState15 = useState(false),
    _useState16 = _slicedToArray(_useState15, 2),
    previewHovered = _useState16[0],
    setPreviewHovered = _useState16[1];
  var previewTimeoutRef = useRef(null);
  var previewRef = useRef(null);
  var sliderRef = useRef(null);
  var previewCellCurrentPosition = useRef(null);
  var progressBarStyle = useMemo(function () {
    return _objectSpread({
      transition: "height 0.2s ease, width 0.2s ease",
      cursor: "pointer",
      borderRadius: "5px",
      backgroundColor: "#555",
      height: hovered ? "10px" : "5px",
      width: hovered ? "100%" : "80%",
      margin: hovered ? "0" : "0 auto"
    }, progressBarConfigurationSettings);
  }, [progressBarConfigurationSettings]);
  var previewCellTrackStyle = useMemo(function () {
    return _objectSpread({
      position: "absolute",
      height: "100%",
      width: "100%",
      left: 0,
      top: 0
    }, previewCellTrackConfigurationSettings);
  }, [previewCellTrackConfigurationSettings]);
  var previewCellStyle = useMemo(function () {
    return _objectSpread({
      position: "absolute",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      transition: "top 0.369s ease, font-size 0.2s ease, width 0.2s ease",
      transform: "translateX(-50%)",
      borderRadius: "8px",
      fontSize: previewHovered ? "14px" : "12px",
      boxShadow: "0 4px 15px rgba(0, 0, 0, 0.7)",
      backgroundColor: "#000",
      color: "#FFF",
      width: previewHovered ? "177.69px" : "147px",
      height: "auto",
      zIndex: 10,
      padding: "3px",
      bottom: previewHovered ? "12.69px" : "5.69px",
      left: "".concat(previewCellCurrentPosition.current, "%")
    }, previewCellConfigurationSettings);
  }, [previewCellConfigurationSettings, previewCellCurrentPosition.current]);
  var handleSeekOnJump = function handleSeekOnJump(newProgress) {
    handleSeek(newProgress, true, true);
    if (!videoRef.current) {
      return;
    }
    previewCellCurrentPosition.current = newProgress / videoRef.current.duration * 100;
  };
  var handleSeek = function handleSeek(newProgress) {
    var playVideo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var useRawProgress = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    if (!videoRef.current) {
      return;
    }
    var effectiveDuration = maxDuration ? Math.min(maxDuration, videoRef.current.duration) : videoRef.current.duration;
    var newTime = useRawProgress ? newProgress : newProgress / 100 * effectiveDuration;
    videoRef.current.currentTime = newTime;
    if (playVideo) {
      videoRef.current.play();
    }
    onSeek(newTime);
    previewCellCurrentPosition.current = newTime / effectiveDuration * 100;
  };
  var handleMouseMove = function handleMouseMove(e) {
    if (!hovered || !videoRef.current) {
      return;
    }
    var rect = sliderRef.current.getBoundingClientRect();
    var xOffset = e.clientX - rect.left;
    var newProgress = Math.min(Math.max(xOffset, 0), rect.width) / rect.width * 100;
    var effectiveDuration = maxDuration ? Math.min(maxDuration, videoRef.current.duration) : videoRef.current.duration;
    var newTime = newProgress / 100 * effectiveDuration;
    previewCellCurrentPosition.current = newProgress;
    setPreviewTime(newTime);
    if (previewRef.current) {
      previewRef.current.currentTime = newTime;
    }
    onPreview(newTime);
  };
  var handlePreviewCellMouseLeave = function handlePreviewCellMouseLeave() {
    setPreviewHovered(false);
    previewTimeoutRef.current = setTimeout(function () {
      setPreviewTime(null);
    }, 169);
    return;
  };
  var handleMouseLeave = function handleMouseLeave() {
    setHovered(false);
    previewTimeoutRef.current = setTimeout(function () {
      setPreviewTime(null);
    }, 169);
    return;
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      width: "100%"
    }
  }, allowRewind ? /*#__PURE__*/React.createElement(HUDActionButton, {
    actionInitialHoverButtonConfigurationSettings: rewindButtonActionInitialHoverButtonConfigurationSettings,
    actionHoveredButtonConfigurationSettings: rewindButtonActionHoveredButtonConfigurationSettings,
    actionButtonConfigurationSettings: rewindButtonActionButtonConfigurationSettings,
    actionIconConfigurationSettings: rewindButtonActionIconConfigurationSettings,
    actionDestinationHoveredBackgroundColor: rewindActionDestinationHoveredBackgroundColor,
    actionHoveredBackgroundColor: rewindActionHoveredBackgroundColor,
    actionInitialHoveredBackgroundColor: rewindActionInitialHoveredBackgroundColor,
    actionInitialBackgroundColor: rewindActionInitialBackgroundColor,
    toolTipConfigurationSettings: rewindToolTipConfigurationSettings,
    iconColor: rewindIconColor,
    icon: "backward",
    onClick: function onClick() {
      if (!videoRef.current) {
        return;
      }
      handleSeek(videoRef.current.currentTime - 10, true, true);
    },
    small: true,
    tooltip: "Rewind 10 seconds"
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), allowForward ? /*#__PURE__*/React.createElement(HUDActionButton, {
    actionInitialHoverButtonConfigurationSettings: forwardButtonActionInitialHoverButtonConfigurationSettings,
    actionHoveredButtonConfigurationSettings: forwardButtonActionHoveredButtonConfigurationSettings,
    actionButtonConfigurationSettings: forwardButtonActionButtonConfigurationSettings,
    actionIconConfigurationSettings: forwardButtonActionIconConfigurationSettings,
    actionDestinationHoveredBackgroundColor: forwardActionDestinationHoveredBackgroundColor,
    actionHoveredBackgroundColor: forwardActionHoveredBackgroundColor,
    actionInitialHoveredBackgroundColor: forwardActionInitialHoveredBackgroundColor,
    actionInitialBackgroundColor: forwardActionInitialBackgroundColor,
    toolTipConfigurationSettings: forwardToolTipConfigurationSettings,
    iconColor: forwardIconColor,
    icon: "forward",
    onClick: function onClick() {
      if (!videoRef.current) {
        return;
      }
      handleSeek(videoRef.current.currentTime + 10, true, true);
    },
    small: true,
    tooltip: "Fast Forward 10 seconds"
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("span", {
    style: _objectSpread({
      userSelect: "none",
      fontSize: "14px",
      color: "#FFF",
      margin: "0 10px"
    }, currentTimeLabelConfigurationSettings)
  }, currentTime), /*#__PURE__*/React.createElement("div", {
    ref: sliderRef,
    style: _objectSpread({
      position: "relative",
      width: "100%"
    }, sliderContainerConfigurationSettings),
    onMouseMove: handleMouseMove,
    onMouseEnter: function onMouseEnter() {
      return setHovered(true);
    },
    onMouseLeave: handleMouseLeave
  }, /*#__PURE__*/React.createElement(HUDSlider, {
    sliderContainerConfigurationSettings: videoProgressBarContainerConfigurationSettings,
    fillBarConfigurationSettings: videoProgressBarConfigurationSettings,
    thumbConfigurationSettings: videoProgressThumbConfigurationSettings,
    value: progress,
    onChange: handleSeek,
    allowSeek: allowSeek,
    max: max,
    trackColor: progressBarStyle.backgroundColor,
    thumbColor: videoTrackThumbColor,
    fillColor: videoTrackBarColor
  }), /*#__PURE__*/React.createElement("div", {
    style: previewCellTrackStyle
  }, previewTime !== null && /*#__PURE__*/React.createElement("div", {
    style: previewCellStyle,
    onMouseEnter: function onMouseEnter() {
      clearTimeout(previewTimeoutRef.current);
      setPreviewHovered(true);
    },
    onMouseLeave: handlePreviewCellMouseLeave
  }, /*#__PURE__*/React.createElement("video", {
    ref: previewRef,
    src: previewSource,
    style: {
      borderRadius: "5px",
      height: "auto",
      width: "100%",
      marginBottom: "3.69px"
    },
    muted: true,
    playsInline: true
  }), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "absolute",
      display: "flex",
      alignItems: "center",
      flexDirection: "column",
      borderRadius: "0.69rem",
      background: "rgba(0, 0, 0, 0.1069)",
      paddingRight: "0.269rem",
      paddingLeft: "0.269rem",
      bottom: 5,
      left: 7.69
    }, previewCellTimeLabelContainerConfigurationSettings)
  }, /*#__PURE__*/React.createElement("span", {
    style: _objectSpread({
      zIndex: 69
    }, previewCellTimeLabelConfigurationSettings)
  }, ConvertToVideoTime(previewTime))), previewHovered && allowJumpTo && /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "absolute",
      display: "flex",
      alignItems: "center",
      flexDirection: "column",
      background: "rgba(0, 0, 0, 0.1069)",
      height: "100%",
      width: "100%"
    }, previewOverlayContainerConfigurationSettings)
  }, /*#__PURE__*/React.createElement(HUDActionButton, {
    actionInitialHoverButtonConfigurationSettings: jumpToButtonActionInitialHoverButtonConfigurationSettings,
    actionHoveredButtonConfigurationSettings: jumpToButtonActionHoveredButtonConfigurationSettings,
    actionButtonConfigurationSettings: jumpToButtonActionButtonConfigurationSettings,
    actionIconConfigurationSettings: jumpToButtonActionIconConfigurationSettings,
    actionDestinationHoveredBackgroundColor: jumpToActionDestinationHoveredBackgroundColor,
    actionHoveredBackgroundColor: jumpToActionHoveredBackgroundColor,
    actionInitialHoveredBackgroundColor: jumpToActionInitialHoveredBackgroundColor,
    actionInitialBackgroundColor: jumpToActionInitialBackgroundColor,
    toolTipConfigurationSettings: jumpToToolTipConfigurationSettings,
    iconColor: jumpToIconColor,
    icon: "arrow-right",
    onClick: function onClick() {
      handleSeekOnJump(previewTime);
      return;
    },
    small: true
  }), /*#__PURE__*/React.createElement("span", {
    style: _objectSpread({
      fontSize: "12px"
    }, previewCellJumpToLabelConfigurationSettings)
  }, "Jump to ", ConvertToVideoTime(previewTime)))))), /*#__PURE__*/React.createElement("span", {
    style: _objectSpread({
      userSelect: "none",
      fontSize: "14px",
      color: "#FFF",
      margin: "0 10px"
    }, videoTimeLabelConfigurationSettings)
  }, duration));
};
var HUDSubtitle = function HUDSubtitle(_ref7) {
  var _ref7$subtitleContain = _ref7.subtitleContainerControlsVisibleConfigurationSettings,
    subtitleContainerControlsVisibleConfigurationSettings = _ref7$subtitleContain === void 0 ? {} : _ref7$subtitleContain,
    _ref7$subtitleContain2 = _ref7.subtitleContainerConfigurationSettings,
    subtitleContainerConfigurationSettings = _ref7$subtitleContain2 === void 0 ? {} : _ref7$subtitleContain2,
    _ref7$textConfigurati = _ref7.textConfigurationSettings,
    textConfigurationSettings = _ref7$textConfigurati === void 0 ? {} : _ref7$textConfigurati,
    _ref7$subtitleAnimati = _ref7.subtitleAnimationConfigurations,
    subtitleAnimationConfigurations = _ref7$subtitleAnimati === void 0 ? {} : _ref7$subtitleAnimati,
    _ref7$subtitleContain3 = _ref7.subtitleContainerConfigurations,
    subtitleContainerConfigurations = _ref7$subtitleContain3 === void 0 ? {} : _ref7$subtitleContain3,
    _ref7$subtitleTyperCo = _ref7.subtitleTyperConfigurations,
    subtitleTyperConfigurations = _ref7$subtitleTyperCo === void 0 ? {} : _ref7$subtitleTyperCo,
    _ref7$textConfigurati2 = _ref7.textConfigurations,
    textConfigurations = _ref7$textConfigurati2 === void 0 ? {} : _ref7$textConfigurati2,
    videoRef = _ref7.videoRef,
    _ref7$onRenderSubtitl = _ref7.onRenderSubtitle,
    onRenderSubtitle = _ref7$onRenderSubtitl === void 0 ? null : _ref7$onRenderSubtitl,
    _ref7$renderMode = _ref7.renderMode,
    renderMode = _ref7$renderMode === void 0 ? "video" : _ref7$renderMode,
    _ref7$endTime = _ref7.endTime,
    endTime = _ref7$endTime === void 0 ? Infinity : _ref7$endTime,
    _ref7$renderSubtitleT = _ref7.renderSubtitleText,
    renderSubtitleText = _ref7$renderSubtitleT === void 0 ? true : _ref7$renderSubtitleT,
    _ref7$wordMode = _ref7.wordMode,
    wordMode = _ref7$wordMode === void 0 ? true : _ref7$wordMode,
    _ref7$autoPlay = _ref7.autoPlay,
    autoPlay = _ref7$autoPlay === void 0 ? true : _ref7$autoPlay,
    _ref7$seekTo = _ref7.seekTo,
    seekTo = _ref7$seekTo === void 0 ? null : _ref7$seekTo,
    _ref7$startTime = _ref7.startTime,
    startTime = _ref7$startTime === void 0 ? 0 : _ref7$startTime,
    controlsVisible = _ref7.controlsVisible,
    subtitles = _ref7.subtitles,
    subtitleRef = _ref7.subtitleRef;
  var _useState17 = useState(startTime),
    _useState18 = _slicedToArray(_useState17, 2),
    playbackStartTime = _useState18[0],
    setPlaybackStartTime = _useState18[1];
  var _useState19 = useState(""),
    _useState20 = _slicedToArray(_useState19, 2),
    currentText = _useState20[0],
    setCurrentText = _useState20[1];
  var subtitleContainerStyle = useMemo(function () {
    return _objectSpread({
      position: "absolute",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      pointerEvents: "none",
      textAlign: "center",
      width: "100%",
      zIndex: 10,
      padding: "0 10px",
      bottom: controlsVisible ? "87.69px" : "47.69px"
    }, controlsVisible ? subtitleContainerControlsVisibleConfigurationSettings : subtitleContainerConfigurationSettings);
  }, [controlsVisible, subtitleContainerConfigurationSettings, subtitleContainerControlsVisibleConfigurationSettings]);
  var textStyle = useMemo(function () {
    return _objectSpread({
      display: "inline-block",
      transition: "all 0.3s ease-in-out",
      borderRadius: "5px",
      boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.6)",
      fontSize: "1.2rem",
      textShadow: "1px 1px 3px rgba(0, 0, 0, 0.8)",
      backgroundColor: "rgba(0, 0, 0, 0.6)",
      color: "#FFFFFF",
      padding: currentText.trim() !== "" ? "8px 16px" : "8px 0px"
    }, textConfigurationSettings);
  }, [textConfigurationSettings]);
  var extractSubtitles = function extractSubtitles(currentTime) {
    var textToShow = "";
    if (!subtitles) {
      return textToShow;
    }
    subtitles.forEach(function (subtitle) {
      subtitle.segments.forEach(function (segment) {
        if (currentTime >= segment.start && currentTime < segment.end) {
          var originalLabel = subtitle.label;
          if (wordMode) {
            var accumulatedDelay = segment.start;
            var lastIndex = 0;
            segment.words.forEach(function (word, wordIndex) {
              var wordTime = accumulatedDelay + word.delay;
              accumulatedDelay = wordTime;
              if (currentTime >= wordTime) {
                var wordText = word.text;
                var startIndex = originalLabel.indexOf(segment.words[0].text);
                lastIndex = originalLabel.indexOf(wordText, lastIndex);
                var endIndex = lastIndex + wordText.length;
                var newText = originalLabel.slice(startIndex, endIndex);
                if (!textToShow.includes(newText)) {
                  textToShow = newText;
                }