@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDVideoPreview.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 _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useRef, useEffect, useState } from "react";
import { motion } from "framer-motion";
import HUDLoading from "./HUDLoading.js";
import HUDIcon from "./HUDIcon.js";
function matchesHUDVideoPreviewStatefulConfigurations(prev, next) {
  if (prev.propsVersion !== next.propsVersion) {
    return false;
  }
  var keys = ["videoSRC", "autoPlay", "muted", "loop", "rendererMode", "posterURL", "previewStart", "previewDuration", "playOnHover", "playOnClick", "hoverDelay", "seekTo", "autoPlayDuration"];
  for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    if (prev[k] !== next[k]) {
      return false;
    }
  }
  return true;
}
;
function HUDVideoPreview(hudVideoPreviewConfigurationSettings) {
  var _hudVideoPreviewConfi = hudVideoPreviewConfigurationSettings.previewIndicatorContainerConfigurationSettings,
    previewIndicatorContainerConfigurationSettings = _hudVideoPreviewConfi === void 0 ? {} : _hudVideoPreviewConfi,
    _hudVideoPreviewConfi2 = hudVideoPreviewConfigurationSettings.previewVideoContainerConfigurationSettings,
    previewVideoContainerConfigurationSettings = _hudVideoPreviewConfi2 === void 0 ? {} : _hudVideoPreviewConfi2,
    _hudVideoPreviewConfi3 = hudVideoPreviewConfigurationSettings.previewIconContainerConfigurationSettings,
    previewIconContainerConfigurationSettings = _hudVideoPreviewConfi3 === void 0 ? {} : _hudVideoPreviewConfi3,
    _hudVideoPreviewConfi4 = hudVideoPreviewConfigurationSettings.idleThumbnailConfigurationSettings,
    idleThumbnailConfigurationSettings = _hudVideoPreviewConfi4 === void 0 ? {} : _hudVideoPreviewConfi4,
    _hudVideoPreviewConfi5 = hudVideoPreviewConfigurationSettings.previewVideoConfigurationSettings,
    previewVideoConfigurationSettings = _hudVideoPreviewConfi5 === void 0 ? {} : _hudVideoPreviewConfi5,
    _hudVideoPreviewConfi6 = hudVideoPreviewConfigurationSettings.previewIndicatorContainerConfigurations,
    previewIndicatorContainerConfigurations = _hudVideoPreviewConfi6 === void 0 ? {} : _hudVideoPreviewConfi6,
    _hudVideoPreviewConfi7 = hudVideoPreviewConfigurationSettings.previewIndicatorConfigurations,
    previewIndicatorConfigurations = _hudVideoPreviewConfi7 === void 0 ? {} : _hudVideoPreviewConfi7,
    _hudVideoPreviewConfi8 = hudVideoPreviewConfigurationSettings.previewVideoConfigurations,
    previewVideoConfigurations = _hudVideoPreviewConfi8 === void 0 ? {} : _hudVideoPreviewConfi8,
    _hudVideoPreviewConfi9 = hudVideoPreviewConfigurationSettings.previewIconConfigurations,
    previewIconConfigurations = _hudVideoPreviewConfi9 === void 0 ? {} : _hudVideoPreviewConfi9,
    _hudVideoPreviewConfi10 = hudVideoPreviewConfigurationSettings.previewConfigurations,
    previewConfigurations = _hudVideoPreviewConfi10 === void 0 ? {} : _hudVideoPreviewConfi10,
    _hudVideoPreviewConfi11 = hudVideoPreviewConfigurationSettings.onRenderComplete,
    onRenderComplete = _hudVideoPreviewConfi11 === void 0 ? function () {} : _hudVideoPreviewConfi11,
    _hudVideoPreviewConfi12 = hudVideoPreviewConfigurationSettings.onRenderUpdate,
    onRenderUpdate = _hudVideoPreviewConfi12 === void 0 ? function () {} : _hudVideoPreviewConfi12,
    _hudVideoPreviewConfi13 = hudVideoPreviewConfigurationSettings.onRenderLoaded,
    onRenderLoaded = _hudVideoPreviewConfi13 === void 0 ? function () {} : _hudVideoPreviewConfi13,
    _hudVideoPreviewConfi14 = hudVideoPreviewConfigurationSettings.onVolumeChange,
    onVolumeChange = _hudVideoPreviewConfi14 === void 0 ? function () {} : _hudVideoPreviewConfi14,
    _hudVideoPreviewConfi15 = hudVideoPreviewConfigurationSettings.onVideoLoaded,
    onVideoLoaded = _hudVideoPreviewConfi15 === void 0 ? function () {} : _hudVideoPreviewConfi15,
    _hudVideoPreviewConfi16 = hudVideoPreviewConfigurationSettings.onTimeUpdate,
    onTimeUpdate = _hudVideoPreviewConfi16 === void 0 ? function () {} : _hudVideoPreviewConfi16,
    _hudVideoPreviewConfi17 = hudVideoPreviewConfigurationSettings.onCanPlay,
    onCanPlay = _hudVideoPreviewConfi17 === void 0 ? function () {} : _hudVideoPreviewConfi17,
    _hudVideoPreviewConfi18 = hudVideoPreviewConfigurationSettings.onSeeking,
    onSeeking = _hudVideoPreviewConfi18 === void 0 ? function () {} : _hudVideoPreviewConfi18,
    _hudVideoPreviewConfi19 = hudVideoPreviewConfigurationSettings.onSeeked,
    onSeeked = _hudVideoPreviewConfi19 === void 0 ? function () {} : _hudVideoPreviewConfi19,
    _hudVideoPreviewConfi20 = hudVideoPreviewConfigurationSettings.onError,
    onError = _hudVideoPreviewConfi20 === void 0 ? function () {} : _hudVideoPreviewConfi20,
    _hudVideoPreviewConfi21 = hudVideoPreviewConfigurationSettings.onEnded,
    onEnded = _hudVideoPreviewConfi21 === void 0 ? function () {} : _hudVideoPreviewConfi21,
    _hudVideoPreviewConfi22 = hudVideoPreviewConfigurationSettings.onPause,
    onPause = _hudVideoPreviewConfi22 === void 0 ? function () {} : _hudVideoPreviewConfi22,
    _hudVideoPreviewConfi23 = hudVideoPreviewConfigurationSettings.onPlay,
    onPlay = _hudVideoPreviewConfi23 === void 0 ? function () {} : _hudVideoPreviewConfi23,
    _hudVideoPreviewConfi24 = hudVideoPreviewConfigurationSettings.autoPlayDuration,
    autoPlayDuration = _hudVideoPreviewConfi24 === void 0 ? 10000 : _hudVideoPreviewConfi24,
    _hudVideoPreviewConfi25 = hudVideoPreviewConfigurationSettings.previewDuration,
    previewDuration = _hudVideoPreviewConfi25 === void 0 ? null : _hudVideoPreviewConfi25,
    _hudVideoPreviewConfi26 = hudVideoPreviewConfigurationSettings.previewStart,
    previewStart = _hudVideoPreviewConfi26 === void 0 ? 0 : _hudVideoPreviewConfi26,
    _hudVideoPreviewConfi27 = hudVideoPreviewConfigurationSettings.hoverDelay,
    hoverDelay = _hudVideoPreviewConfi27 === void 0 ? 600 : _hudVideoPreviewConfi27,
    _hudVideoPreviewConfi28 = hudVideoPreviewConfigurationSettings.renderSpeed,
    renderSpeed = _hudVideoPreviewConfi28 === void 0 ? 25 : _hudVideoPreviewConfi28,
    _hudVideoPreviewConfi29 = hudVideoPreviewConfigurationSettings.renderFPS,
    renderFPS = _hudVideoPreviewConfi29 === void 0 ? 30 : _hudVideoPreviewConfi29,
    _hudVideoPreviewConfi30 = hudVideoPreviewConfigurationSettings.seekTo,
    seekTo = _hudVideoPreviewConfi30 === void 0 ? null : _hudVideoPreviewConfi30,
    _hudVideoPreviewConfi31 = hudVideoPreviewConfigurationSettings.rendererMode,
    rendererMode = _hudVideoPreviewConfi31 === void 0 ? false : _hudVideoPreviewConfi31,
    _hudVideoPreviewConfi32 = hudVideoPreviewConfigurationSettings.playOnHover,
    playOnHover = _hudVideoPreviewConfi32 === void 0 ? true : _hudVideoPreviewConfi32,
    _hudVideoPreviewConfi33 = hudVideoPreviewConfigurationSettings.playOnClick,
    playOnClick = _hudVideoPreviewConfi33 === void 0 ? true : _hudVideoPreviewConfi33,
    _hudVideoPreviewConfi34 = hudVideoPreviewConfigurationSettings.autoPlay,
    autoPlay = _hudVideoPreviewConfi34 === void 0 ? true : _hudVideoPreviewConfi34,
    _hudVideoPreviewConfi35 = hudVideoPreviewConfigurationSettings.videoSRC,
    videoSRC = _hudVideoPreviewConfi35 === void 0 ? "" : _hudVideoPreviewConfi35,
    _hudVideoPreviewConfi36 = hudVideoPreviewConfigurationSettings.muted,
    muted = _hudVideoPreviewConfi36 === void 0 ? true : _hudVideoPreviewConfi36,
    _hudVideoPreviewConfi37 = hudVideoPreviewConfigurationSettings.loop,
    loop = _hudVideoPreviewConfi37 === void 0 ? true : _hudVideoPreviewConfi37,
    _hudVideoPreviewConfi38 = hudVideoPreviewConfigurationSettings.enableAdvancedStreaming,
    enableAdvancedStreaming = _hudVideoPreviewConfi38 === void 0 ? false : _hudVideoPreviewConfi38,
    _hudVideoPreviewConfi39 = hudVideoPreviewConfigurationSettings.posterURL,
    posterURL = _hudVideoPreviewConfi39 === void 0 ? null : _hudVideoPreviewConfi39,
    _hudVideoPreviewConfi40 = hudVideoPreviewConfigurationSettings.showIdleThumbnail,
    showIdleThumbnail = _hudVideoPreviewConfi40 === void 0 ? true : _hudVideoPreviewConfi40,
    _hudVideoPreviewConfi41 = hudVideoPreviewConfigurationSettings.idleThumbnailURL,
    idleThumbnailURL = _hudVideoPreviewConfi41 === void 0 ? null : _hudVideoPreviewConfi41,
    _hudVideoPreviewConfi42 = hudVideoPreviewConfigurationSettings.propsVersion,
    propsVersion = _hudVideoPreviewConfi42 === void 0 ? 0 : _hudVideoPreviewConfi42;
  var _useState = useState("idle"),
    _useState2 = _slicedToArray(_useState, 2),
    loadingStage = _useState2[0],
    setLoadingStage = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    loadingPercent = _useState4[0],
    setLoadingPercent = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    rendering = _useState6[0],
    setRendering = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    hovered = _useState8[0],
    setHovered = _useState8[1];
  var _useState9 = useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    playing = _useState10[0],
    setPlaying = _useState10[1];
  var didFirstFrameRef = useRef(false);
  var srcAttachedRef = useRef(false);
  var attemptedRef = useRef(false);
  var containerRef = useRef(null);
  var startedRef = useRef(false);
  var blockedRef = useRef(false);
  var playingRef = useRef(false);
  var inViewRef = useRef(false);
  var rVFCHandleRef = useRef(0);
  var videoRef = useRef(null);
  var autoPlayTO = useRef(0);
  var hoverTO = useRef(0);
  var fastSeekTo = function fastSeekTo(t) {
    var v = videoRef.current;
    if (!v) {
      return;
    }
    try {
      if (typeof v.fastSeek === "function") {
        v.fastSeek(t);
      } else {
        v.currentTime = t;
      }
    } catch (_unused) {}
  };
  var safeClear = function safeClear(h) {
    if (h) {
      try {
        clearTimeout(h);
      } catch (_unused2) {}
    }
  };
  var attachSrcIfNeeded = function attachSrcIfNeeded() {
    if (srcAttachedRef.current || !videoSRC) {
      return;
    }
    var v = videoRef.current;
    if (!v) {
      return;
    }
    v.src = videoSRC;
    srcAttachedRef.current = true;
    setLoadingStage("network");
  };
  var updateBufferedPercent = function updateBufferedPercent() {
    var v = videoRef.current;
    if (!v) {
      return;
    }
    try {
      var d = v.duration || 0;
      if (!d || !isFinite(d)) {
        setLoadingPercent(0);
        return;
      }
      var end = 0;
      var b = v.buffered;
      for (var i = 0; i < b.length; i++) {
        end = Math.max(end, b.end(i));
      }
      var pct = Math.max(0, Math.min(100, end / d * 100));
      setLoadingPercent(pct);
    } catch (_unused3) {
      setLoadingPercent(0);
    }
  };
  var beginRVFC = function beginRVFC() {
    if (!rendererMode) {
      return;
    }
    var v = videoRef.current;
    if (!v) {
      return;
    }
    setRendering(true);
    var loopCB = function loopCB(now, metadata) {
      onRenderUpdate((metadata === null || metadata === void 0 ? void 0 : metadata.presentedFrames) || 0, 0, v, true, now / 1000, v.duration || 1 ? v.currentTime / (v.duration || 1) : 0);
      onTimeUpdate({
        currentTime: v.currentTime
      });
      if (!playingRef.current) {
        return;
      }
      try {
        rVFCHandleRef.current = v.requestVideoFrameCallback(loopCB);
      } catch (_unused4) {
        requestAnimationFrame(function () {
          if (playingRef.current) {
            loopCB(performance.now(), null);
          }
        });
      }
    };
    try {
      rVFCHandleRef.current = v.requestVideoFrameCallback(loopCB);
    } catch (_unused5) {
      var rafLoop = function rafLoop() {
        if (!playingRef.current) {
          return;
        }
        onRenderUpdate(0, 0, v, true, performance.now() / 1000, v.duration || 1 ? v.currentTime / (v.duration || 1) : 0);
        onTimeUpdate({
          currentTime: v.currentTime
        });
        requestAnimationFrame(rafLoop);
      };
      requestAnimationFrame(rafLoop);
    }
  };
  var cancelRVFC = function cancelRVFC() {
    var v = videoRef.current;
    if (v && rVFCHandleRef.current) {
      try {
        v.cancelVideoFrameCallback(rVFCHandleRef.current);
      } catch (_unused6) {}
      rVFCHandleRef.current = 0;
    }
    setRendering(false);
  };
  var stabilizedStart = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var v, t0, firstFrameDeadline;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            v = videoRef.current;
            if (v) {
              _context.next = 3;
              break;
            }
            return _context.abrupt("return");
          case 3:
            t0 = performance.now();
          case 4:
            if (!(v.readyState < 3 && performance.now() - t0 < 800)) {
              _context.next = 9;
              break;
            }
            _context.next = 7;
            return new Promise(function (r) {
              return setTimeout(r, 16);
            });
          case 7:
            _context.next = 4;
            break;
          case 9:
            firstFrameDeadline = performance.now() + 500;
          case 10:
            if (!(!didFirstFrameRef.current && performance.now() < firstFrameDeadline)) {
              _context.next = 15;
              break;
            }
            _context.next = 13;
            return new Promise(function (r) {
              return setTimeout(r, 16);
            });
          case 13:
            _context.next = 10;
            break;
          case 15:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function stabilizedStart() {
      return _ref.apply(this, arguments);
    };
  }();
  var requestStart = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      var v, d, start, playP;
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            v = videoRef.current;
            if (v) {
              _context2.next = 3;
              break;
            }
            return _context2.abrupt("return");
          case 3:
            if (!(startedRef.current || attemptedRef.current)) {
              _context2.next = 5;
              break;
            }
            return _context2.abrupt("return");
          case 5:
            didFirstFrameRef.current = false;
            attemptedRef.current = true;
            blockedRef.current = false;
            attachSrcIfNeeded();
            setLoadingStage(function (s) {
              return s === "idle" ? "decoding" : s;
            });
            try {
              d = previewDuration || v.duration || 0;
              start = d ? Math.min(previewStart, Math.max(0, d - 0.01)) : Math.max(0, previewStart);
              fastSeekTo(start);
            } catch (_unused7) {}
            _context2.prev = 11;
            playP = v.play();
            beginRVFC();
            _context2.next = 16;
            return playP;
          case 16:
            onPlay();
            playingRef.current = true;
            _context2.next = 20;
            return stabilizedStart();
          case 20:
            startedRef.current = true;
            setPlaying(true);
            _context2.next = 29;
            break;
          case 24:
            _context2.prev = 24;
            _context2.t0 = _context2["catch"](11);
            attemptedRef.current = false;
            playingRef.current = false;
            blockedRef.current = true;
          case 29:
          case "end":
            return _context2.stop();
        }
      }, _callee2, null, [[11, 24]]);
    }));
    return function requestStart() {
      return _ref2.apply(this, arguments);
    };
  }();
  var retryStartIfBlocked = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) switch (_context3.prev = _context3.next) {
          case 0:
            if (!(!blockedRef.current || startedRef.current)) {
              _context3.next = 2;
              break;
            }
            return _context3.abrupt("return");
          case 2:
            blockedRef.current = false;
            _context3.next = 5;
            return requestStart();
          case 5:
          case "end":
            return _context3.stop();
        }
      }, _callee3);
    }));
    return function retryStartIfBlocked() {
      return _ref3.apply(this, arguments);
    };
  }();
  var stopVideo = function stopVideo() {
    var resetToZero = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
    var v = videoRef.current;
    if (!v) {
      return;
    }
    cancelRVFC();
    try {
      v.pause();
    } catch (_unused9) {}
    onPause();
    attemptedRef.current = false;
    playingRef.current = false;
    startedRef.current = false;
    blockedRef.current = false;
    setPlaying(false);
    if (resetToZero) {
      try {
        fastSeekTo(0);
      } catch (_unused10) {}
    }
  };
  var handleMouseEnter = function handleMouseEnter() {
    safeClear(hoverTO.current);
    hoverTO.current = setTimeout(function () {
      setHovered(true);
      if (playOnHover) {
        requestStart();
      }
    }, hoverDelay);
  };
  var handleMouseLeave = function handleMouseLeave() {
    safeClear(hoverTO.current);
    setHovered(false);
    if (playOnHover) {
      stopVideo(true);
    }
  };
  var handleClick = function handleClick() {
    if (!playOnClick) {
      return;
    }
    if (!startedRef.current) {
      setHovered(true);
      requestStart();
    }
  };
  useEffect(function () {
    var el = containerRef.current;
    if (!el) {
      return;
    }
    var io = new IntersectionObserver(function (entries) {
      var e = entries[0];
      var vis = !!(e !== null && e !== void 0 && e.isIntersecting);
      inViewRef.current = vis;
      if (vis) {
        attachSrcIfNeeded();
      }
    }, {
      rootMargin: "600px 0px"
    });
    io.observe(el);
    return function () {
      try {
        io.disconnect();
      } catch (_unused11) {}
    };
  }, [videoSRC]);
  useEffect(function () {
    if (!autoPlay) {
      return;
    }
    var v = videoRef.current;
    if (!v) {
      return;
    }
    v.muted = muted;
    v.playsInline = true;
    requestStart().then(function () {
      safeClear(autoPlayTO.current);
      if (!startedRef.current) {
        setTimeout(function () {
          if (!startedRef.current && !attemptedRef.current) {
            requestStart();
          }
        }, 120);
      }
      autoPlayTO.current = setTimeout(function () {
        stopVideo(true);
      }, autoPlayDuration);
    });
    return function () {
      safeClear(autoPlayTO.current);
    };
  }, [autoPlay, autoPlayDuration, muted]);
  useEffect(function () {
    didFirstFrameRef.current = false;
    srcAttachedRef.current = false;
    attemptedRef.current = false;
    startedRef.current = false;
    blockedRef.current = false;
    if (autoPlay) {
      requestAnimationFrame(function () {
        requestStart();
      });
    }
    return function () {
      safeClear(hoverTO.current);
      safeClear(autoPlayTO.current);
      stopVideo(false);
    };
  }, [videoSRC, autoPlay]);
  useEffect(function () {
    var v = videoRef.current;
    if (!v) {
      return;
    }
    var onLoadedData = function onLoadedData() {
      didFirstFrameRef.current = true;
      if (autoPlay && !startedRef.current && !attemptedRef.current) {
        requestStart();
      }
    };
    v.addEventListener("loadeddata", onLoadedData);
    return function () {
      v.removeEventListener("loadeddata", onLoadedData);
    };
  }, [autoPlay]);
  useEffect(function () {
    var v = videoRef.current;
    if (!v) {
      return;
    }
    var onLoadedMeta = function onLoadedMeta() {
      setLoadingStage(function (s) {
        return s === "idle" ? "metadata" : s;
      });
      onVideoLoaded(v);
      updateBufferedPercent();
      if (rendererMode) {
        try {
          onRenderLoaded(Math.floor(renderFPS * renderSpeed), v);
        } catch (_unused12) {}
      }
    };
    var onProgressWrap = function onProgressWrap() {
      updateBufferedPercent();
    };
    var onCanPlayWrap = function onCanPlayWrap(e) {
      setLoadingStage("ready");
      onCanPlay(e);
      if (!startedRef.current) {
        retryStartIfBlocked();
      }
    };
    var onTime = function onTime() {
      if (!didFirstFrameRef.current) {
        didFirstFrameRef.current = true;
      }
      onTimeUpdate({
        currentTime: v.currentTime
      });
    };
    var onEndedWrap = function onEndedWrap() {
      onEnded();
      stopVideo(true);
    };
    v.addEventListener("loadedmetadata", onLoadedMeta);
    v.addEventListener("progress", onProgressWrap);
    v.addEventListener("canplay", onCanPlayWrap);
    v.addEventListener("timeupdate", onTime);
    v.addEventListener("ended", onEndedWrap);
    v.addEventListener("seeking", onSeeking);
    v.addEventListener("seeked", onSeeked);
    v.addEventListener("error", onError);
    return function () {
      v.removeEventListener("loadedmetadata", onLoadedMeta);
      v.removeEventListener("progress", onProgressWrap);
      v.removeEventListener("canplay", onCanPlayWrap);
      v.removeEventListener("timeupdate", onTime);
      v.removeEventListener("ended", onEndedWrap);
      v.removeEventListener("seeking", onSeeking);
      v.removeEventListener("seeked", onSeeked);
      v.removeEventListener("error", onError);
    };
  }, [rendererMode, renderFPS, renderSpeed]);
  useEffect(function () {
    if (seekTo == null) {
      return;
    }
    var v = videoRef.current;
    if (!v) {
      return;
    }
    try {
      fastSeekTo(seekTo);
    } catch (_unused13) {}
  }, [seekTo]);
  useEffect(function () {
    var onVis = function onVis() {
      if (document.visibilityState === "hidden" && playingRef.current) {
        stopVideo(false);
      }
    };
    document.addEventListener("visibilitychange", onVis);
    return function () {
      document.removeEventListener("visibilitychange", onVis);
    };
  }, []);
  var shouldShowLoader = loadingStage !== "idle" && loadingStage !== "ready" && (hovered || playing || autoPlay || rendererMode);
  var showIdleThumb = showIdleThumbnail && !playing && !shouldShowLoader && (idleThumbnailURL || posterURL);
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: containerRef,
    style: _objectSpread({
      position: "relative",
      display: "inline-block"
    }, previewVideoContainerConfigurationSettings),
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onClick: handleClick
  }, previewConfigurations), /*#__PURE__*/React.createElement("video", _extends({
    ref: videoRef,
    style: _objectSpread({
      borderRadius: "0.569rem",
      width: "100%"
    }, previewVideoConfigurationSettings),
    onVolumeChange: onVolumeChange,
    preload: autoPlay ? "auto" : "metadata",
    poster: posterURL || undefined,
    muted: muted,
    loop: loop,
    playsInline: true
  }, previewVideoConfigurations)), shouldShowLoader && /*#__PURE__*/React.createElement(motion.div, {
    initial: {
      opacity: 0.0
    },
    animate: {
      opacity: 1.0
    },
    transition: {
      duration: 0.20,
      ease: "easeOut"
    },
    style: {
      position: "absolute",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      pointerEvents: "none",
      borderRadius: "0.569rem",
      background: "transparent",
      inset: 0
    }
  }, /*#__PURE__*/React.createElement(HUDLoading, _extends({
    type: "circleDeterminate",
    progress: Math.max(0, Math.min(1, loadingPercent / 100)),
    strokeWidth: 4,
    size: 42
  }, previewIndicatorConfigurations))), showIdleThumb && /*#__PURE__*/React.createElement(HUDIcon, {
    alt: "thumbnail",
    svg: idleThumbnailURL || posterURL || "",
    style: _objectSpread({
      position: "absolute",
      pointerEvents: "none",
      objectFit: "cover",
      borderRadius: "0.569rem",
      height: "100%",
      width: "100%",
      inset: 0
    }, idleThumbnailConfigurationSettings !== null && idleThumbnailConfigurationSettings !== void 0 ? idleThumbnailConfigurationSettings : {})
  }), !playing && !shouldShowLoader && /*#__PURE__*/React.createElement(motion.div, {
    initial: {
      opacity: 0.0
    },
    animate: {
      opacity: hovered ? 0.15 : 0.349
    },
    transition: {
      duration: 0.25,
      ease: "easeOut"
    },
    style: _objectSpread({
      position: "absolute",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      borderRadius: "0.569rem",
      backgroundColor: "rgba(0, 0, 0, 0.469)",
      height: "100%",
      width: "100%",
      left: "0%",
      top: "0%"
    }, previewIconContainerConfigurationSettings !== null && previewIconContainerConfigurationSettings !== void 0 ? previewIconContainerConfigurationSettings : {})
  }, "name" in (previewIconConfigurations || {}) ? /*#__PURE__*/React.createElement(HUDIcon, previewIconConfigurations) : /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: {
      fontSize: 32
    },
    name: "play",
    color: "#FFFFFF"
  })), playing && !shouldShowLoader && /*#__PURE__*/React.createElement(motion.div, _extends({
    initial: {
      opacity: 0.0
    },
    animate: {
      opacity: 1.0
    },
    transition: {
      duration: 0.25,
      ease: "easeOut"
    },
    style: _objectSpread({
      position: "absolute",
      display: "flex",
      alignItems: "center",
      borderRadius: "0.5rem",
      background: "linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 70%, transparent 100%)",
      height: "3.25rem",
      width: "100%",
      paddingLeft: "1rem",
      left: "0%",
      top: "0%"
    }, previewIndicatorContainerConfigurationSettings !== null && previewIndicatorContainerConfigurationSettings !== void 0 ? previewIndicatorContainerConfigurationSettings : {})
  }, previewIndicatorContainerConfigurations !== null && previewIndicatorContainerConfigurations !== void 0 ? previewIndicatorContainerConfigurations : {}), /*#__PURE__*/React.createElement(HUDLoading, _extends({
    word: "Preview",
    type: "word"
  }, previewIndicatorConfigurations))));
}
;
export default /*#__PURE__*/React.memo(HUDVideoPreview, matchesHUDVideoPreviewStatefulConfigurations);