@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
671 lines • 29.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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, { useState, useEffect, useRef, useCallback } from "react";
import { useHUDAudio } from "./HUDAudioProvider.js";
import HUDLoading from "./HUDLoading.js";
import HUDSlider from "./HUDSlider.js";
import HUDIcon from "./HUDIcon.js";
var HUDAudioPreview = function HUDAudioPreview(_ref) {
var _ref$audioPreviewCont = _ref.audioPreviewContainerConfigurationSettings,
audioPreviewContainerConfigurationSettings = _ref$audioPreviewCont === void 0 ? {} : _ref$audioPreviewCont,
_ref$audioPreviewConf = _ref.audioPreviewConfigurationSettings,
audioPreviewConfigurationSettings = _ref$audioPreviewConf === void 0 ? {} : _ref$audioPreviewConf,
_ref$audioWaveAnalyse = _ref.audioWaveAnalyserContainerConfigurationSettings,
audioWaveAnalyserContainerConfigurationSettings = _ref$audioWaveAnalyse === void 0 ? {} : _ref$audioWaveAnalyse,
_ref$audioCurrentWave = _ref.audioCurrentWaveAnalyserConfigurationSettings,
audioCurrentWaveAnalyserConfigurationSettings = _ref$audioCurrentWave === void 0 ? {} : _ref$audioCurrentWave,
_ref$audioWaveAnalyse2 = _ref.audioWaveAnalyserConfigurationSettings,
audioWaveAnalyserConfigurationSettings = _ref$audioWaveAnalyse2 === void 0 ? {} : _ref$audioWaveAnalyse2,
_ref$audioControlCont = _ref.audioControlContainerConfigurationSettings,
audioControlContainerConfigurationSettings = _ref$audioControlCont === void 0 ? {} : _ref$audioControlCont,
_ref$audioPlayButtonC = _ref.audioPlayButtonConfigurationSettings,
audioPlayButtonConfigurationSettings = _ref$audioPlayButtonC === void 0 ? {} : _ref$audioPlayButtonC,
_ref$audioCursorConfi = _ref.audioCursorConfigurationSettings,
audioCursorConfigurationSettings = _ref$audioCursorConfi === void 0 ? {} : _ref$audioCursorConfi,
_ref$audioLoadingCont = _ref.audioLoadingContainerConfigurationSettings,
audioLoadingContainerConfigurationSettings = _ref$audioLoadingCont === void 0 ? {} : _ref$audioLoadingCont,
_ref$audioLoadingConf = _ref.audioLoadingConfigurations,
audioLoadingConfigurations = _ref$audioLoadingConf === void 0 ? {} : _ref$audioLoadingConf,
_ref$audioVolumeConta = _ref.audioVolumeContainerConfigurationSettings,
audioVolumeContainerConfigurationSettings = _ref$audioVolumeConta === void 0 ? {} : _ref$audioVolumeConta,
_ref$audioVolumeConfi = _ref.audioVolumeConfigurations,
audioVolumeConfigurations = _ref$audioVolumeConfi === void 0 ? {} : _ref$audioVolumeConfi,
_ref$onRenderComplete = _ref.onRenderComplete,
onRenderComplete = _ref$onRenderComplete === void 0 ? null : _ref$onRenderComplete,
_ref$onRenderUpdate = _ref.onRenderUpdate,
onRenderUpdate = _ref$onRenderUpdate === void 0 ? null : _ref$onRenderUpdate,
_ref$onRenderLoaded = _ref.onRenderLoaded,
onRenderLoaded = _ref$onRenderLoaded === void 0 ? null : _ref$onRenderLoaded,
_ref$onAudioPlaying = _ref.onAudioPlaying,
onAudioPlaying = _ref$onAudioPlaying === void 0 ? null : _ref$onAudioPlaying,
_ref$onAudioPlay = _ref.onAudioPlay,
onAudioPlay = _ref$onAudioPlay === void 0 ? null : _ref$onAudioPlay,
_ref$onAudioStop = _ref.onAudioStop,
onAudioStop = _ref$onAudioStop === void 0 ? null : _ref$onAudioStop,
_ref$cursorGlowColor = _ref.cursorGlowColor,
cursorGlowColor = _ref$cursorGlowColor === void 0 ? "rgba(255, 87, 51, 0.7)" : _ref$cursorGlowColor,
_ref$currentProgressW = _ref.currentProgressWaveGlowColor,
currentProgressWaveGlowColor = _ref$currentProgressW === void 0 ? "#FF5733" : _ref$currentProgressW,
_ref$currentProgressW2 = _ref.currentProgressWaveColor,
currentProgressWaveColor = _ref$currentProgressW2 === void 0 ? "#FF5733" : _ref$currentProgressW2,
_ref$previewWaveGlowC = _ref.previewWaveGlowColor,
previewWaveGlowColor = _ref$previewWaveGlowC === void 0 ? "#ddd" : _ref$previewWaveGlowC,
_ref$volumeBackground = _ref.volumeBackgroundColor,
volumeBackgroundColor = _ref$volumeBackground === void 0 ? "#ddd" : _ref$volumeBackground,
_ref$volumeThumbColor = _ref.volumeThumbColor,
volumeThumbColor = _ref$volumeThumbColor === void 0 ? "white" : _ref$volumeThumbColor,
_ref$volumeBarColor = _ref.volumeBarColor,
volumeBarColor = _ref$volumeBarColor === void 0 ? "#FF5733" : _ref$volumeBarColor,
_ref$progressColor = _ref.progressColor,
progressColor = _ref$progressColor === void 0 ? "#FF5733" : _ref$progressColor,
_ref$cursorColor = _ref.cursorColor,
cursorColor = _ref$cursorColor === void 0 ? "#FF5733" : _ref$cursorColor,
_ref$flashColor = _ref.flashColor,
flashColor = _ref$flashColor === void 0 ? "#FF5733" : _ref$flashColor,
_ref$previewWaveColor = _ref.previewWaveColor,
previewWaveColor = _ref$previewWaveColor === void 0 ? "#ddd" : _ref$previewWaveColor,
_ref$waveColor = _ref.waveColor,
waveColor = _ref$waveColor === void 0 ? "#ddd" : _ref$waveColor,
_ref$progressGlowInte = _ref.progressGlowIntensityFactor,
progressGlowIntensityFactor = _ref$progressGlowInte === void 0 ? 14 : _ref$progressGlowInte,
_ref$progressGlowInte2 = _ref.progressGlowIntensity,
progressGlowIntensity = _ref$progressGlowInte2 === void 0 ? null : _ref$progressGlowInte2,
_ref$durationLimit = _ref.durationLimit,
durationLimit = _ref$durationLimit === void 0 ? 10000 : _ref$durationLimit,
_ref$previewStart = _ref.previewStart,
previewStart = _ref$previewStart === void 0 ? 0 : _ref$previewStart,
_ref$renderSpeed = _ref.renderSpeed,
renderSpeed = _ref$renderSpeed === void 0 ? 10 : _ref$renderSpeed,
_ref$renderFPS = _ref.renderFPS,
renderFPS = _ref$renderFPS === void 0 ? 30 : _ref$renderFPS,
_ref$seekTo = _ref.seekTo,
seekTo = _ref$seekTo === void 0 ? null : _ref$seekTo,
_ref$showHighlightedW = _ref.showHighlightedWaveColor,
showHighlightedWaveColor = _ref$showHighlightedW === void 0 ? true : _ref$showHighlightedW,
_ref$rendererMode = _ref.rendererMode,
rendererMode = _ref$rendererMode === void 0 ? false : _ref$rendererMode,
_ref$jumpToAudioStart = _ref.jumpToAudioStartOnAudioEnd,
jumpToAudioStartOnAudioEnd = _ref$jumpToAudioStart === void 0 ? false : _ref$jumpToAudioStart,
_ref$drawFullWaveform = _ref.drawFullWaveformOnStop,
drawFullWaveformOnStop = _ref$drawFullWaveform === void 0 ? false : _ref$drawFullWaveform,
_ref$showVolumeContro = _ref.showVolumeControl,
showVolumeControl = _ref$showVolumeContro === void 0 ? true : _ref$showVolumeContro,
_ref$showPlayButton = _ref.showPlayButton,
showPlayButton = _ref$showPlayButton === void 0 ? true : _ref$showPlayButton,
_ref$videoAudio = _ref.videoAudio,
videoAudio = _ref$videoAudio === void 0 ? false : _ref$videoAudio,
_ref$playOnHover = _ref.playOnHover,
playOnHover = _ref$playOnHover === void 0 ? true : _ref$playOnHover,
_ref$allowSeek = _ref.allowSeek,
allowSeek = _ref$allowSeek === void 0 ? false : _ref$allowSeek,
_ref$autoPlay = _ref.autoPlay,
autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
_ref$audioSRC = _ref.audioSRC,
audioSRC = _ref$audioSRC === void 0 ? "" : _ref$audioSRC,
_ref$barWidth = _ref.barWidth,
barWidth = _ref$barWidth === void 0 ? 3 : _ref$barWidth,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 100 : _ref$height,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 500 : _ref$width;
var _useHUDAudio = useHUDAudio(),
loadAudio = _useHUDAudio.loadAudio,
playAudio = _useHUDAudio.playAudio,
stopAudio = _useHUDAudio.stopAudio,
adjustVolume = _useHUDAudio.adjustVolume,
analyser = _useHUDAudio.analyser;
var _useState = useState(previewWaveGlowColor),
_useState2 = _slicedToArray(_useState, 2),
currentPreviewWaveGlowColor = _useState2[0],
setCurrentPreviewWaveGlowColor = _useState2[1];
var _useState3 = useState(previewWaveColor),
_useState4 = _slicedToArray(_useState3, 2),
currentPreviewWaveColor = _useState4[0],
setCurrentPreviewWaveColor = _useState4[1];
var _useState5 = useState(flashColor),
_useState6 = _slicedToArray(_useState5, 2),
currentFlashColor = _useState6[0],
setCurrentFlashColor = _useState6[1];
var _useState7 = useState(waveColor),
_useState8 = _slicedToArray(_useState7, 2),
currentWaveColor = _useState8[0],
setCurrentWaveColor = _useState8[1];
var _useState9 = useState(previewStart / 1000),
_useState10 = _slicedToArray(_useState9, 2),
progress = _useState10[0],
setProgress = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
audioLoaded = _useState12[0],
setAudioLoaded = _useState12[1];
var _useState13 = useState(null),
_useState14 = _slicedToArray(_useState13, 2),
audioBuffer = _useState14[0],
setAudioBuffer = _useState14[1];
var _useState15 = useState(0),
_useState16 = _slicedToArray(_useState15, 2),
currentFrame = _useState16[0],
setCurrentFrame = _useState16[1];
var _useState17 = useState(0),
_useState18 = _slicedToArray(_useState17, 2),
totalFrames = _useState18[0],
setTotalFrames = _useState18[1];
var _useState19 = useState(false),
_useState20 = _slicedToArray(_useState19, 2),
rendering = _useState20[0],
setRendering = _useState20[1];
var _useState21 = useState(false),
_useState22 = _slicedToArray(_useState21, 2),
dragging = _useState22[0],
setDragging = _useState22[1];
var _useState23 = useState(false),
_useState24 = _slicedToArray(_useState23, 2),
playing = _useState24[0],
setPlaying = _useState24[1];
var _useState25 = useState(50),
_useState26 = _slicedToArray(_useState25, 2),
volume = _useState26[0],
setVolume = _useState26[1];
var currentWaveCanvasRef = useRef(null);
var audioRenderingRef = useRef(false);
var animationFrameRef = useRef(null);
var audioContextRef = useRef(null);
var hoveringRef = useRef(false);
var analyserRef = useRef(null);
var gainNodeRef = useRef(null);
var canvasRef = useRef(null);
var sourceRef = useRef(null);
var drawFullWaveform = function drawFullWaveform(buffer) {
if (!canvasRef.current || !buffer) {
return;
}
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
var scale = window.devicePixelRatio || 1;
canvas.height = canvas.offsetHeight * scale;
canvas.width = canvas.offsetWidth * scale;
ctx.scale(scale, scale);
var data = buffer.getChannelData(0);
var step = Math.ceil(data.length / canvas.width);
var amp = canvas.height / (2 * scale);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = currentPreviewWaveColor;
ctx.lineWidth = barWidth / 2;
ctx.globalAlpha = 0.569;
var growingWidth = 0;
var maxGrowingWidth = canvas.width;
var growthDuration = 2000;
var startTime = performance.now();
var flashDuration = 169;
var easingFunction = function easingFunction(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};
var drawSmoothWave = function drawSmoothWave() {
var elapsedTime = performance.now() - startTime;
var easedTime = easingFunction(Math.min(elapsedTime / growthDuration, 1));
growingWidth = Math.min(easedTime * maxGrowingWidth, maxGrowingWidth);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(0, amp);
for (var i = 0; i < growingWidth; i++) {
var min = Math.min.apply(Math, _toConsumableArray(data.slice(i * step, (i + 1) * step)));
var max = Math.max.apply(Math, _toConsumableArray(data.slice(i * step, (i + 1) * step)));
var currentAmp = easedTime * amp;
ctx.strokeStyle = currentPreviewWaveColor;
ctx.lineWidth = barWidth / 2;
ctx.beginPath();
ctx.moveTo(i / scale, -currentAmp * Math.abs(min));
ctx.lineTo(i / scale, currentAmp * Math.abs(max));
ctx.stroke();
if (i >= growingWidth - step && i <= growingWidth) {
var flashTime = elapsedTime % flashDuration;
var intensity = Math.sin(flashTime / flashDuration * Math.PI);
ctx.strokeStyle = "rgba(".concat(parseInt(currentFlashColor.slice(1, 3), 16), ", ").concat(parseInt(currentFlashColor.slice(3, 5), 16), ", ").concat(parseInt(currentFlashColor.slice(5, 7), 16), ", ").concat(0.5 + 0.5 * intensity, ")");
ctx.shadowColor = "rgba(".concat(parseInt(currentFlashColor.slice(1, 3), 16), ", ").concat(parseInt(currentFlashColor.slice(3, 5), 16), ", ").concat(parseInt(currentFlashColor.slice(5, 7), 16), ", ").concat(0.7 * intensity, ")");
ctx.shadowBlur = 10 + 10 * intensity;
ctx.lineWidth = barWidth + 2 * intensity;
ctx.beginPath();
ctx.moveTo(i / scale, -currentAmp * Math.abs(min));
ctx.lineTo(i / scale, currentAmp * Math.abs(max));
ctx.stroke();
ctx.strokeStyle = currentPreviewWaveColor;
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0;
ctx.lineWidth = barWidth / 2;
}
}
ctx.restore();
if (growingWidth < maxGrowingWidth) {
requestAnimationFrame(drawSmoothWave);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(0, amp);
ctx.beginPath();
ctx.strokeStyle = currentPreviewWaveColor;
ctx.lineWidth = barWidth / 2;
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0;
ctx.globalAlpha = 0.569;
for (var _i = 0; _i < maxGrowingWidth; _i++) {
var _min = Math.min.apply(Math, _toConsumableArray(data.slice(_i * step, (_i + 1) * step)));
var _max = Math.max.apply(Math, _toConsumableArray(data.slice(_i * step, (_i + 1) * step)));
ctx.moveTo(_i / scale, -amp * Math.abs(_min));
ctx.lineTo(_i / scale, amp * Math.abs(_max));
}
ctx.stroke();
ctx.restore();
};
drawSmoothWave();
return;
};
var drawCurrentWaveform = useCallback(function () {
var progress = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
if (!analyser.current || !currentWaveCanvasRef.current) {
return;
}
var canvas = currentWaveCanvasRef.current;
var ctx = canvas.getContext("2d");
var bufferLength = analyser.current.fftSize;
var dataArray = new Uint8Array(bufferLength);
analyser.current.getByteTimeDomainData(dataArray);
ctx.clearRect(0, 0, canvas.width, canvas.height);
var sliceWidth = canvas.width / bufferLength;
var x = 0;
ctx.strokeStyle = currentProgressWaveColor;
ctx.lineWidth = barWidth;
ctx.globalAlpha = 1;
ctx.beginPath();
if (onAudioPlaying) {
onAudioPlaying(progress);
}
for (var i = 0; i < Math.floor(bufferLength * progress); i++) {
var v = dataArray[i] / 128.0;
var y = v * canvas.height / 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
x += sliceWidth;
}
ctx.stroke();
return;
}, [currentProgressWaveColor, barWidth]);
var drawWaveform = useCallback(function () {
var progress = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
if (!canvasRef.current || !audioBuffer) {
return;
}
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
var scale = window.devicePixelRatio || 1;
canvas.height = canvas.offsetHeight * scale;
canvas.width = canvas.offsetWidth * scale;
ctx.scale(scale, scale);
var data = audioBuffer.getChannelData(0);
var step = Math.ceil(data.length / canvas.width);
var amp = canvas.height / (2 * scale);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(0, amp);
ctx.strokeStyle = showHighlightedWaveColor && progress < 1 ? currentProgressWaveColor : !showHighlightedWaveColor && progress >= 1 ? currentPreviewWaveGlowColor : currentProgressWaveColor;
ctx.shadowBlur = progressGlowIntensity !== null && progressGlowIntensity !== void 0 ? progressGlowIntensity : Math.sin(progress * Math.PI) * progressGlowIntensityFactor;
ctx.shadowColor = showHighlightedWaveColor && progress < 1 ? currentWaveColor : !showHighlightedWaveColor && progress >= 1 ? currentPreviewWaveGlowColor : currentProgressWaveGlowColor;
ctx.lineWidth = barWidth;
ctx.globalAlpha = 0.269;
ctx.beginPath();
var progressPixel = Math.floor(canvas.width * progress);
for (var i = 0; i < progressPixel; i++) {
var min = Math.min.apply(Math, _toConsumableArray(data.slice(i * step, (i + 1) * step)));
var max = Math.max.apply(Math, _toConsumableArray(data.slice(i * step, (i + 1) * step)));
ctx.moveTo(i / scale, -amp * Math.abs(min));
ctx.lineTo(i / scale, amp * Math.abs(max));
}
ctx.stroke();
ctx.strokeStyle = currentPreviewWaveGlowColor;
ctx.shadowBlur = 0;
ctx.shadowColor = "transparent";
ctx.lineWidth = barWidth / 2;
ctx.globalAlpha = 0.569;
ctx.beginPath();
for (var _i2 = progressPixel; _i2 < canvas.width; _i2++) {
var _min2 = Math.min.apply(Math, _toConsumableArray(data.slice(_i2 * step, (_i2 + 1) * step)));
var _max2 = Math.max.apply(Math, _toConsumableArray(data.slice(_i2 * step, (_i2 + 1) * step)));
ctx.moveTo(_i2 / scale, -amp * Math.abs(_min2));
ctx.lineTo(_i2 / scale, amp * Math.abs(_max2));
}
ctx.stroke();
ctx.restore();
}, [audioBuffer, currentProgressWaveColor, currentPreviewWaveColor, currentPreviewWaveGlowColor, currentProgressWaveGlowColor, currentWaveColor, showHighlightedWaveColor, progressGlowIntensity, progressGlowIntensityFactor, barWidth]);
var clearCurrentWaveform = useCallback(function () {
if (currentWaveCanvasRef.current) {
var canvas = currentWaveCanvasRef.current;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
return;
}, [currentWaveCanvasRef.current]);
var seekAudio = useCallback(function (event) {
if (audioLoaded && audioBuffer && allowSeek) {
var clickX = event.nativeEvent.offsetX;
var canvasWidth = canvasRef.current.offsetWidth;
var duration = audioBuffer.duration;
var seekTime = clickX / canvasWidth * duration;
var newProgress = clickX / canvasWidth;
startAudioPreview(newProgress * 1000);
}
return;
}, [canvasRef.current, audioLoaded, audioBuffer, allowSeek]);
var clearAudioPreview = useCallback(function () {
clearCurrentWaveform();
stopAudio(drawFullWaveformOnStop ? drawFullWaveform : null, setProgress, audioBuffer, previewStart, jumpToAudioStartOnAudioEnd);
setPlaying(false);
if (onAudioStop) {
onAudioStop(true);
}
return;
}, [jumpToAudioStartOnAudioEnd, drawFullWaveformOnStop, setProgress, audioBuffer, previewStart, onAudioStop]);
var startAudioPreview = function startAudioPreview() {
var startTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : previewStart;
setPlaying(true);
var previewStartsAt = seekTo !== null ? seekTo / 1000 : startTime / 1000;
playAudio(previewStartsAt, volume / 100, drawCurrentWaveform, drawWaveform, setProgress, function () {
setPlaying(false);
if (!jumpToAudioStartOnAudioEnd) {
return;
}
setProgress(previewStartsAt);
}, dragging, previewStart, jumpToAudioStartOnAudioEnd);
if (onAudioPlay) {
onAudioPlay(true);
}
return;
};
var renderFrames = function renderFrames() {
if (!audioBuffer || !canvasRef.current) {
return;
}
var audioDuration = audioBuffer.duration;
var totalFrames = Math.floor(renderFPS * renderSpeed);
var scaledFrameDuration = renderSpeed / totalFrames;
var frame = 0;
var startTime = performance.now();
var drawFrame = function drawFrame(currentTime) {
var elapsedTime = (currentTime - startTime) / 1000;
if (frame >= totalFrames || !audioRenderingRef.current) {
audioRenderingRef.current = false;
setRendering(false);
if (onRenderComplete) {
onRenderComplete(frame, totalFrames, audioBuffer, false, elapsedTime, 1);
}
return;
}
frame = Math.floor(elapsedTime / scaledFrameDuration);
var currentProgress = frame / totalFrames;
if (currentProgress >= 1) {
currentProgress = 1;
setProgress(currentProgress);
} else if (currentProgress < 1) {
setProgress(currentProgress + 0.02);
}
setCurrentFrame(frame);
drawCurrentWaveform(currentProgress);
drawWaveform(currentProgress);
if (onRenderUpdate) {
onRenderUpdate(frame, totalFrames, audioBuffer, true, elapsedTime, currentProgress);
}
requestAnimationFrame(drawFrame);
};
audioRenderingRef.current = true;
setRendering(true);
requestAnimationFrame(drawFrame);
};
var stopRendering = function stopRendering() {
audioRenderingRef.current = false;
setRendering(false);
};
var handleMouseEnter = function handleMouseEnter() {
if (!playOnHover || !audioLoaded) {
return;
}
hoveringRef.current = true;
startAudioPreview(seekTo !== null ? seekTo : previewStart);
return;
};
var handleMouseLeave = function handleMouseLeave() {
if (!playOnHover || !audioLoaded) {
return;
}
hoveringRef.current = false;
clearAudioPreview();
return;
};
var handleMouseDown = function handleMouseDown(event) {
if (!audioLoaded || !allowSeek) {
return;
}
setDragging(true);
setPlaying(true);
seekAudio(event);
return;
};
var handleMouseUp = function handleMouseUp() {
if (!allowSeek) {
return;
}
setDragging(false);
return;
};
var handleMouseMove = function handleMouseMove(event) {
if (!audioLoaded || !allowSeek) {
return;
}
if (dragging) {
seekAudio(event);
}
return;
};
useEffect(function () {
if (videoAudio) {
loadAudio(audioSRC).then(function (buffer) {
drawFullWaveform(buffer);
setAudioBuffer(buffer);
setAudioLoaded(true);
});
return;
}
loadAudio(audioSRC).then(function (buffer) {
drawFullWaveform(buffer);
setAudioBuffer(buffer);
setAudioLoaded(true);
});
}, [audioSRC, videoAudio]);
useEffect(function () {
adjustVolume(volume);
}, [volume, adjustVolume]);
useEffect(function () {
if (durationLimit && (progress.toString().includes(".") ? progress * 100 : progress) >= (previewStart + durationLimit) / 1000) {
clearAudioPreview();
}
}, [progress, durationLimit]);
useEffect(function () {
if (!rendererMode || !audioLoaded) {
return;
}
if (audioBuffer) {
var frameDuration = 1 / renderFPS;
var totalTime = audioBuffer.duration;
var _totalFrames = Math.floor(totalTime / frameDuration);
setTotalFrames(_totalFrames);
if (onRenderLoaded) {
onRenderLoaded(_totalFrames, audioBuffer);
}
renderFrames();
}
}, [rendererMode, renderFPS, renderSpeed, audioLoaded, audioBuffer]);
useEffect(function () {
if (seekTo !== null) {
setProgress(seekTo / 1000);
drawCurrentWaveform(progress);
drawWaveform(progress);
}
}, [seekTo]);
useEffect(function () {
setCurrentPreviewWaveGlowColor(previewWaveGlowColor);
}, [previewWaveGlowColor]);
useEffect(function () {
setCurrentPreviewWaveColor(previewWaveColor);
}, [previewWaveColor]);
useEffect(function () {
setCurrentFlashColor(flashColor);
}, [flashColor]);
useEffect(function () {
setCurrentWaveColor(waveColor);
}, [waveColor]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
height: height
}, audioPreviewContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
alignItems: "center",
visibility: !audioLoaded ? "hidden" : undefined,
height: !audioLoaded ? "0rem" : undefined,
width: "100%"
}, audioPreviewConfigurationSettings)
}, audioLoaded && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
borderRadius: "1rem 0rem 0rem 1rem",
background: "rgba(0, 0, 0, 0.269)",
paddingBottom: !rendererMode ? "0.369rem" : "0rem",
paddingRight: !rendererMode ? "0.69rem" : "0rem",
paddingLeft: !rendererMode ? "0.69rem" : "0rem",
paddingTop: !rendererMode ? "0.369rem" : "0rem"
}, audioControlContainerConfigurationSettings)
}, !rendererMode && showPlayButton && /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
cursor: "pointer",
fontSize: "1.5rem",
color: cursorColor,
marginRight: "0.69rem"
}, audioPlayButtonConfigurationSettings),
onClick: function onClick() {
setPlaying(!playing);
if (!playing) {
startAudioPreview(seekTo !== null ? seekTo : previewStart);
return;
}
clearAudioPreview();
},
name: playing ? "pause" : "play"
}), !rendererMode && showVolumeControl && /*#__PURE__*/React.createElement(HUDSlider, _extends({
sliderContainerConfigurationSettings: _objectSpread({
position: "relative",
borderRadius: "5px",
boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
background: "#e0e0e0",
height: "5.69rem",
width: "0.69rem",
zIndex: 1,
marginRight: "0.69rem"
}, audioVolumeContainerConfigurationSettings),
trackColor: volumeBackgroundColor,
thumbColor: volumeThumbColor,
fillColor: volumeBarColor,
vertical: true,
value: volume,
max: 100,
min: 0,
onChange: function onChange(currentVolume) {
setVolume(currentVolume);
}
}, audioVolumeConfigurations))), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%"
}, audioWaveAnalyserContainerConfigurationSettings),
onMouseLeave: handleMouseLeave,
onMouseEnter: handleMouseEnter
}, /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: _objectSpread({
position: "relative",
borderRadius: "10px",
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
height: height,
width: "100%",
paddingBottom: "0.69rem",
paddingTop: "0.69rem"
}, audioWaveAnalyserConfigurationSettings),
height: height,
width: width,
onMouseMove: handleMouseMove,
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp
}), /*#__PURE__*/React.createElement("canvas", {
ref: currentWaveCanvasRef,
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
borderRadius: "10px",
opacity: 0.569,
height: height,
width: "100%",
paddingBottom: "0.69rem",
paddingTop: "0.69rem",
left: 0,
top: 0
}, audioCurrentWaveAnalyserConfigurationSettings),
height: height,
width: width
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
boxShadow: "0 0 10px 2px ".concat(cursorGlowColor),
backgroundColor: cursorColor,
height: height + 21.69,
width: "4px",
left: "".concat(progress * 100, "%"),
top: 0
}, audioCursorConfigurationSettings)
}))), !audioLoaded && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
borderRadius: "10px",
backgroundColor: "#f0f0f0",
color: "#999",
height: height,
width: "100%",
paddingBottom: "1.69rem",
paddingTop: "1.69rem"
}, audioLoadingContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(HUDLoading, _extends({
barColor: "#999",
type: "signal"
}, audioLoadingConfigurations)), "No audio available"));
};
export default HUDAudioPreview;