@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
371 lines • 16.2 kB
JavaScript
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, useEffect, useState } from "react";
import { motion } from "framer-motion";
import HUDLoading from "./HUDLoading.js";
import HUDIcon from "./HUDIcon.js";
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.previewVideoConfigurationSettings,
previewVideoConfigurationSettings = _hudVideoPreviewConfi4 === void 0 ? {} : _hudVideoPreviewConfi4,
_hudVideoPreviewConfi5 = hudVideoPreviewConfigurationSettings.previewIndicatorConfigurations,
previewIndicatorConfigurations = _hudVideoPreviewConfi5 === void 0 ? {} : _hudVideoPreviewConfi5,
_hudVideoPreviewConfi6 = hudVideoPreviewConfigurationSettings.previewVideoConfigurations,
previewVideoConfigurations = _hudVideoPreviewConfi6 === void 0 ? {} : _hudVideoPreviewConfi6,
_hudVideoPreviewConfi7 = hudVideoPreviewConfigurationSettings.previewIconConfigurations,
previewIconConfigurations = _hudVideoPreviewConfi7 === void 0 ? {} : _hudVideoPreviewConfi7,
_hudVideoPreviewConfi8 = hudVideoPreviewConfigurationSettings.previewConfigurations,
previewConfigurations = _hudVideoPreviewConfi8 === void 0 ? {} : _hudVideoPreviewConfi8,
_hudVideoPreviewConfi9 = hudVideoPreviewConfigurationSettings.onRenderComplete,
onRenderComplete = _hudVideoPreviewConfi9 === void 0 ? function () {} : _hudVideoPreviewConfi9,
_hudVideoPreviewConfi10 = hudVideoPreviewConfigurationSettings.onRenderUpdate,
onRenderUpdate = _hudVideoPreviewConfi10 === void 0 ? function () {} : _hudVideoPreviewConfi10,
_hudVideoPreviewConfi11 = hudVideoPreviewConfigurationSettings.onRenderLoaded,
onRenderLoaded = _hudVideoPreviewConfi11 === void 0 ? function () {} : _hudVideoPreviewConfi11,
_hudVideoPreviewConfi12 = hudVideoPreviewConfigurationSettings.onVolumeChange,
onVolumeChange = _hudVideoPreviewConfi12 === void 0 ? function () {} : _hudVideoPreviewConfi12,
_hudVideoPreviewConfi13 = hudVideoPreviewConfigurationSettings.onVideoLoaded,
onVideoLoaded = _hudVideoPreviewConfi13 === void 0 ? function () {} : _hudVideoPreviewConfi13,
_hudVideoPreviewConfi14 = hudVideoPreviewConfigurationSettings.onTimeUpdate,
onTimeUpdate = _hudVideoPreviewConfi14 === void 0 ? function () {} : _hudVideoPreviewConfi14,
_hudVideoPreviewConfi15 = hudVideoPreviewConfigurationSettings.onCanPlay,
onCanPlay = _hudVideoPreviewConfi15 === void 0 ? function () {} : _hudVideoPreviewConfi15,
_hudVideoPreviewConfi16 = hudVideoPreviewConfigurationSettings.onSeeking,
onSeeking = _hudVideoPreviewConfi16 === void 0 ? function () {} : _hudVideoPreviewConfi16,
_hudVideoPreviewConfi17 = hudVideoPreviewConfigurationSettings.onSeeked,
onSeeked = _hudVideoPreviewConfi17 === void 0 ? function () {} : _hudVideoPreviewConfi17,
_hudVideoPreviewConfi18 = hudVideoPreviewConfigurationSettings.onError,
onError = _hudVideoPreviewConfi18 === void 0 ? function () {} : _hudVideoPreviewConfi18,
_hudVideoPreviewConfi19 = hudVideoPreviewConfigurationSettings.onEnded,
onEnded = _hudVideoPreviewConfi19 === void 0 ? function () {} : _hudVideoPreviewConfi19,
_hudVideoPreviewConfi20 = hudVideoPreviewConfigurationSettings.onPause,
onPause = _hudVideoPreviewConfi20 === void 0 ? function () {} : _hudVideoPreviewConfi20,
_hudVideoPreviewConfi21 = hudVideoPreviewConfigurationSettings.onPlay,
onPlay = _hudVideoPreviewConfi21 === void 0 ? function () {} : _hudVideoPreviewConfi21,
_hudVideoPreviewConfi22 = hudVideoPreviewConfigurationSettings.autoPlayDuration,
autoPlayDuration = _hudVideoPreviewConfi22 === void 0 ? 10000 : _hudVideoPreviewConfi22,
_hudVideoPreviewConfi23 = hudVideoPreviewConfigurationSettings.previewDuration,
previewDuration = _hudVideoPreviewConfi23 === void 0 ? null : _hudVideoPreviewConfi23,
_hudVideoPreviewConfi24 = hudVideoPreviewConfigurationSettings.previewStart,
previewStart = _hudVideoPreviewConfi24 === void 0 ? 0 : _hudVideoPreviewConfi24,
_hudVideoPreviewConfi25 = hudVideoPreviewConfigurationSettings.hoverDelay,
hoverDelay = _hudVideoPreviewConfi25 === void 0 ? 869 : _hudVideoPreviewConfi25,
_hudVideoPreviewConfi26 = hudVideoPreviewConfigurationSettings.renderSpeed,
renderSpeed = _hudVideoPreviewConfi26 === void 0 ? 25 : _hudVideoPreviewConfi26,
_hudVideoPreviewConfi27 = hudVideoPreviewConfigurationSettings.renderFPS,
renderFPS = _hudVideoPreviewConfi27 === void 0 ? 30 : _hudVideoPreviewConfi27,
_hudVideoPreviewConfi28 = hudVideoPreviewConfigurationSettings.seekTo,
seekTo = _hudVideoPreviewConfi28 === void 0 ? null : _hudVideoPreviewConfi28,
_hudVideoPreviewConfi29 = hudVideoPreviewConfigurationSettings.rendererMode,
rendererMode = _hudVideoPreviewConfi29 === void 0 ? false : _hudVideoPreviewConfi29,
_hudVideoPreviewConfi30 = hudVideoPreviewConfigurationSettings.playOnHover,
playOnHover = _hudVideoPreviewConfi30 === void 0 ? true : _hudVideoPreviewConfi30,
_hudVideoPreviewConfi31 = hudVideoPreviewConfigurationSettings.playOnClick,
playOnClick = _hudVideoPreviewConfi31 === void 0 ? true : _hudVideoPreviewConfi31,
_hudVideoPreviewConfi32 = hudVideoPreviewConfigurationSettings.autoPlay,
autoPlay = _hudVideoPreviewConfi32 === void 0 ? true : _hudVideoPreviewConfi32,
_hudVideoPreviewConfi33 = hudVideoPreviewConfigurationSettings.videoSRC,
videoSRC = _hudVideoPreviewConfi33 === void 0 ? "" : _hudVideoPreviewConfi33,
_hudVideoPreviewConfi34 = hudVideoPreviewConfigurationSettings.muted,
muted = _hudVideoPreviewConfi34 === void 0 ? true : _hudVideoPreviewConfi34,
_hudVideoPreviewConfi35 = hudVideoPreviewConfigurationSettings.loop,
loop = _hudVideoPreviewConfi35 === void 0 ? true : _hudVideoPreviewConfi35;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
autoPlayTimeout = _useState2[0],
setAutoPlayTimeout = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
hoverTimeout = _useState4[0],
setHoverTimeout = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
currentFrame = _useState6[0],
setCurrentFrame = _useState6[1];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
totalFrames = _useState8[0],
setTotalFrames = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
rendering = _useState10[0],
setRendering = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
rewinding = _useState12[0],
setRewinding = _useState12[1];
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
hovered = _useState14[0],
setHovered = _useState14[1];
var _useState15 = useState(false),
_useState16 = _slicedToArray(_useState15, 2),
playing = _useState16[0],
setPlaying = _useState16[1];
var videoRendering = useRef(false);
var videoRef = useRef(null);
var playVideo = function playVideo() {
if (videoRef.current) {
videoRef.current.currentTime = previewDuration && previewStart > previewDuration ? previewDuration : previewStart;
videoRef.current.play()["catch"](function (error) {
console.log("Error playing video: ", error);
});
}
};
var renderFrames = function renderFrames() {
var video = videoRef.current;
if (!video) {
return;
}
var videoDuration = previewDuration || video.duration;
var totalFrames = Math.floor(renderFPS * renderSpeed);
var frameInterval = renderSpeed / totalFrames;
var frame = 0;
var startTime = performance.now();
var renderNextFrame = function renderNextFrame(currentTime) {
var elapsedTime = (currentTime - startTime) / 1000;
if (elapsedTime >= renderSpeed || !videoRendering.current) {
videoRendering.current = false;
setRendering(false);
if (onRenderComplete) {
onRenderComplete(frame, totalFrames, video, false, elapsedTime, 1);
}
return;
}
var targetFrame = Math.floor(elapsedTime / frameInterval);
if (targetFrame > frame) {
frame = targetFrame;
var progress = elapsedTime / renderSpeed;
video.currentTime = progress * videoDuration;
setCurrentFrame(frame);
if (onRenderUpdate) {
onRenderUpdate(frame, totalFrames, video, true, elapsedTime, progress);
}
}
requestAnimationFrame(renderNextFrame);
};
videoRendering.current = true;
setRendering(true);
video.currentTime = previewStart;
requestAnimationFrame(renderNextFrame);
};
var stopRendering = function stopRendering() {
videoRendering.current = false;
setRendering(false);
};
var handleMouseEnter = function handleMouseEnter() {
if (!rewinding) {
var timeout = setTimeout(function () {
setPlaying(true);
setHovered(true);
if (playOnHover) {
playVideo();
}
}, hoverDelay);
setHoverTimeout(timeout);
clearTimeout(autoPlayTimeout);
}
};
var handleMouseLeave = function handleMouseLeave() {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
setHoverTimeout(null);
}
if (playOnHover && !rewinding) {
setHovered(false);
handleRewind();
}
};
var handleRewind = function handleRewind() {
if (!videoRef.current) {
return;
}
setRewinding(true);
var rewindDuration = 1000;
var start = videoRef.current.currentTime;
var end = 0;
var startTime = Date.now();
var smoothRewind = function smoothRewind() {
if (!videoRef.current) {
return;
}
var now = Date.now();
var elapsedTime = now - startTime;
var progress = Math.min(elapsedTime / rewindDuration, 1);
videoRef.current.currentTime = start - progress * (start - end);
if (progress < 1) {
requestAnimationFrame(smoothRewind);
} else {
if (!loop) {
videoRef.current.pause();
}
videoRef.current.currentTime = 0;
setRewinding(false);
setPlaying(false);
setHovered(false);
}
};
smoothRewind();
};
useEffect(function () {
if (autoPlay && !playOnHover && videoRef.current) {
setHovered(true);
setPlaying(true);
playVideo();
var timeout = setTimeout(function () {
try {
handleRewind();
} catch (error) {
console.log("Did not rewind video: ", error);
}
}, autoPlayDuration);
setAutoPlayTimeout(timeout);
}
return function () {
return clearTimeout(autoPlayTimeout);
};
}, [autoPlay, playOnHover, autoPlayDuration]);
useEffect(function () {
if (rendererMode && videoRef.current) {
var video = videoRef.current;
var handleLoadedMetadata = function handleLoadedMetadata() {
var totalFrames = Math.floor(video.duration * renderFPS);
if (onRenderLoaded) {
onRenderLoaded(totalFrames, video);
}
setTotalFrames(totalFrames);
renderFrames();
};
video.addEventListener("loadedmetadata", handleLoadedMetadata);
return function () {
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
};
}
}, [rendererMode, renderFPS]);
useEffect(function () {
if (!rendererMode) {
return;
}
if (rendering && currentFrame > totalFrames) {
stopRendering();
}
}, [rendererMode, rendering, currentFrame, totalFrames]);
useEffect(function () {
if (seekTo !== null && videoRef.current !== null) {
videoRef.current.currentTime = seekTo;
}
}, [seekTo]);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "relative",
display: "inline-block"
}, previewVideoContainerConfigurationSettings),
onMouseLeave: handleMouseLeave,
onMouseEnter: handleMouseEnter
}, previewConfigurations), /*#__PURE__*/React.createElement("video", _extends({
ref: videoRef,
style: _objectSpread({
borderRadius: "10px",
width: "100%"
}, previewVideoConfigurationSettings),
onVolumeChange: onVolumeChange,
onLoadedData: onVideoLoaded,
onTimeUpdate: onTimeUpdate,
onSeeking: onSeeking,
onCanPlay: onCanPlay,
onSeeked: onSeeked,
onError: onError,
onEnded: onEnded,
onPause: onPause,
onPlay: onPlay,
src: videoSRC,
muted: muted,
loop: loop
}, previewVideoConfigurations)), !rendererMode && !hovered && !playing && /*#__PURE__*/React.createElement(motion.div, {
initial: {
opacity: 0,
scale: 0.69
},
animate: {
opacity: 1,
scale: 1
},
exit: {
opacity: 0,
scale: 0.69
},
transition: {
duration: 0.569
},
style: _objectSpread({
position: "absolute",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
borderRadius: "0.569rem",
backgroundColor: "rgba(0, 0, 0, 0.469)",
height: "100%",
width: "100%",
left: "0%",
top: "0%"
}, previewIconContainerConfigurationSettings),
onClick: playOnClick ? function () {
if (videoRef.current && !playing) {
setHovered(true);
playVideo();
}
} : undefined
}, /*#__PURE__*/React.createElement(HUDIcon, _extends({
iconConfigurationSettings: {
height: "5.69rem",
width: "5.69rem"
},
color: "#FFFFFF",
name: "play"
}, previewIconConfigurations))), !rendererMode && playing && /*#__PURE__*/React.createElement(motion.div, {
initial: {
opacity: 0,
scale: 0.69
},
animate: {
opacity: 1,
scale: 1
},
exit: {
opacity: 0,
scale: 0.69
},
transition: {
duration: 0.569
},
style: _objectSpread({
position: "absolute",
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
borderRadius: "0.569rem",
background: "linear-gradient(to bottom, rgba(0, 0, 0, 0.0969) 69%, transparent 91.69%)",
height: "3.69rem",
width: "100%",
paddingBottom: "0.69rem",
paddingLeft: "1rem",
left: "0%",
top: "0%"
}, previewIndicatorContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(HUDLoading, _extends({
wordColor: "white",
word: "Preview",
type: "word"
}, previewIndicatorConfigurations))));
}
;
export default HUDVideoPreview;