@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
406 lines • 20.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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, { useState, useEffect, useRef, useCallback } from "react";
import { useTimeout } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";
import { useAudioRecorder } from "../HUDManagers/HUDAudioManager.js";
import { getRGB } from "./HUDPaletteProvider.js";
import HUDIcon from "./HUDIcon.js";
var calculateColorIntensity = function calculateColorIntensity(amplitude, height, waveColor) {
var _getRGB = getRGB(waveColor),
_getRGB2 = _slicedToArray(_getRGB, 3),
r = _getRGB2[0],
g = _getRGB2[1],
b = _getRGB2[2];
var alpha = amplitude / height;
alpha = Math.min(1, Math.max(0, alpha));
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha.toFixed(3), ")");
};
var HUDAudioWaveformVisualizer = function HUDAudioWaveformVisualizer(_ref) {
var _ref$audioWaveformVis = _ref.audioWaveformVisualizerContainerConfigurationSettings,
audioWaveformVisualizerContainerConfigurationSettings = _ref$audioWaveformVis === void 0 ? {} : _ref$audioWaveformVis,
_ref$audioWaveformCon = _ref.audioWaveformContainerConfigurationSettings,
audioWaveformContainerConfigurationSettings = _ref$audioWaveformCon === void 0 ? {} : _ref$audioWaveformCon,
_ref$recordButtonConf = _ref.recordButtonConfigurationSettings,
recordButtonConfigurationSettings = _ref$recordButtonConf === void 0 ? {} : _ref$recordButtonConf,
_ref$audioWaveformVis2 = _ref.audioWaveformVisualizerContainerConfigurations,
audioWaveformVisualizerContainerConfigurations = _ref$audioWaveformVis2 === void 0 ? {} : _ref$audioWaveformVis2,
_ref$audioWaveformCon2 = _ref.audioWaveformContainerConfigurations,
audioWaveformContainerConfigurations = _ref$audioWaveformCon2 === void 0 ? {} : _ref$audioWaveformCon2,
_ref$recordButtonIcon = _ref.recordButtonIconConfigurations,
recordButtonIconConfigurations = _ref$recordButtonIcon === void 0 ? {} : _ref$recordButtonIcon,
_ref$audioRecorderCon = _ref.audioRecorderConfigurations,
audioRecorderConfigurations = _ref$audioRecorderCon === void 0 ? {} : _ref$audioRecorderCon,
_ref$audioWaveformCon3 = _ref.audioWaveformConfigurations,
audioWaveformConfigurations = _ref$audioWaveformCon3 === void 0 ? {} : _ref$audioWaveformCon3,
_ref$recordButtonConf2 = _ref.recordButtonConfigurations,
recordButtonConfigurations = _ref$recordButtonConf2 === void 0 ? {} : _ref$recordButtonConf2,
_ref$recordButtonCont = _ref.recordButtonContent,
recordButtonContent = _ref$recordButtonCont === void 0 ? null : _ref$recordButtonCont,
_ref$onInitiateRecord = _ref.onInitiateRecordPreparationActivated,
onInitiateRecordPreparationActivated = _ref$onInitiateRecord === void 0 ? null : _ref$onInitiateRecord,
_ref$onStopRecordPrep = _ref.onStopRecordPreparationActivated,
onStopRecordPreparationActivated = _ref$onStopRecordPrep === void 0 ? null : _ref$onStopRecordPrep,
_ref$onInitiateRecord2 = _ref.onInitiateRecordActivated,
onInitiateRecordActivated = _ref$onInitiateRecord2 === void 0 ? null : _ref$onInitiateRecord2,
_ref$onStopRecordActi = _ref.onStopRecordActivated,
onStopRecordActivated = _ref$onStopRecordActi === void 0 ? null : _ref$onStopRecordActi,
_ref$onAutoRecordPrep = _ref.onAutoRecordPreparationActivated,
onAutoRecordPreparationActivated = _ref$onAutoRecordPrep === void 0 ? null : _ref$onAutoRecordPrep,
_ref$onInternalRecord = _ref.onInternalRecordingStop,
onInternalRecordingStop = _ref$onInternalRecord === void 0 ? null : _ref$onInternalRecord,
_ref$onAutoRecordActi = _ref.onAutoRecordActivated,
onAutoRecordActivated = _ref$onAutoRecordActi === void 0 ? null : _ref$onAutoRecordActi,
_ref$glowColor = _ref.glowColor,
glowColor = _ref$glowColor === void 0 ? "rgba(255, 255, 255, 0.269)" : _ref$glowColor,
_ref$initialDAWStyleW = _ref.initialDAWStyleWaveformHeight,
initialDAWStyleWaveformHeight = _ref$initialDAWStyleW === void 0 ? 0.0269 : _ref$initialDAWStyleW,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? "rgba(0, 0, 0, 1)" : _ref$backgroundColor,
_ref$recordButtonReco = _ref.recordButtonRecordingBackgroundColor,
recordButtonRecordingBackgroundColor = _ref$recordButtonReco === void 0 ? "red" : _ref$recordButtonReco,
_ref$recordButtonReco2 = _ref.recordButtonRecordBackgroundColor,
recordButtonRecordBackgroundColor = _ref$recordButtonReco2 === void 0 ? "white" : _ref$recordButtonReco2,
_ref$recordButtonReco3 = _ref.recordButtonRecordingColor,
recordButtonRecordingColor = _ref$recordButtonReco3 === void 0 ? "white" : _ref$recordButtonReco3,
_ref$recordButtonReco4 = _ref.recordButtonRecordColor,
recordButtonRecordColor = _ref$recordButtonReco4 === void 0 ? "black" : _ref$recordButtonReco4,
_ref$recordButtonReco5 = _ref.recordButtonRecordingIcon,
recordButtonRecordingIcon = _ref$recordButtonReco5 === void 0 ? "square" : _ref$recordButtonReco5,
_ref$recordButtonReco6 = _ref.recordButtonRecordIcon,
recordButtonRecordIcon = _ref$recordButtonReco6 === void 0 ? "play" : _ref$recordButtonReco6,
_ref$enableVerticalSc = _ref.enableVerticalScroll,
enableVerticalScroll = _ref$enableVerticalSc === void 0 ? false : _ref$enableVerticalSc,
_ref$externalWaveform = _ref.externalWaveformData,
externalWaveformData = _ref$externalWaveform === void 0 ? null : _ref$externalWaveform,
_ref$waveThicknessFac = _ref.waveThicknessFactor,
waveThicknessFactor = _ref$waveThicknessFac === void 0 ? 15 : _ref$waveThicknessFac,
_ref$interpolationFac = _ref.interpolationFactor,
interpolationFactor = _ref$interpolationFac === void 0 ? 1 : _ref$interpolationFac,
_ref$waveColor = _ref.waveColor,
waveColor = _ref$waveColor === void 0 ? "#FFFFFF" : _ref$waveColor,
_ref$canvasHeight = _ref.canvasHeight,
canvasHeight = _ref$canvasHeight === void 0 ? 150 : _ref$canvasHeight,
_ref$canvasWidth = _ref.canvasWidth,
canvasWidth = _ref$canvasWidth === void 0 ? 1200 : _ref$canvasWidth,
_ref$scrollSpeed = _ref.scrollSpeed,
scrollSpeed = _ref$scrollSpeed === void 0 ? 15 : _ref$scrollSpeed,
_ref$fadeRate = _ref.fadeRate,
fadeRate = _ref$fadeRate === void 0 ? 0.95 : _ref$fadeRate,
_ref$maxScrollY = _ref.maxScrollY,
maxScrollY = _ref$maxScrollY === void 0 ? 30 : _ref$maxScrollY,
_ref$recordButtonUnde = _ref.recordButtonUnderWaveformVisualizer,
recordButtonUnderWaveformVisualizer = _ref$recordButtonUnde === void 0 ? false : _ref$recordButtonUnde,
_ref$recordButtonAbov = _ref.recordButtonAboveWaveformVisualizer,
recordButtonAboveWaveformVisualizer = _ref$recordButtonAbov === void 0 ? true : _ref$recordButtonAbov,
_ref$enableFrequencyV = _ref.enableFrequencyVisualizer,
enableFrequencyVisualizer = _ref$enableFrequencyV === void 0 ? true : _ref$enableFrequencyV,
_ref$initiateRecordDe = _ref.initiateRecordDelay,
initiateRecordDelay = _ref$initiateRecordDe === void 0 ? 1 : _ref$initiateRecordDe,
_ref$initiateRecord = _ref.initiateRecord,
initiateRecord = _ref$initiateRecord === void 0 ? false : _ref$initiateRecord,
_ref$stopRecordDelay = _ref.stopRecordDelay,
stopRecordDelay = _ref$stopRecordDelay === void 0 ? 1 : _ref$stopRecordDelay,
_ref$stopRecord = _ref.stopRecord,
stopRecord = _ref$stopRecord === void 0 ? false : _ref$stopRecord,
_ref$autoRecordDelay = _ref.autoRecordDelay,
autoRecordDelay = _ref$autoRecordDelay === void 0 ? 1000 : _ref$autoRecordDelay,
_ref$autoRecord = _ref.autoRecord,
autoRecord = _ref$autoRecord === void 0 ? false : _ref$autoRecord,
_ref$showRecordButton = _ref.showRecordButton,
showRecordButton = _ref$showRecordButton === void 0 ? true : _ref$showRecordButton,
_ref$wavePosition = _ref.wavePosition,
wavePosition = _ref$wavePosition === void 0 ? "center" : _ref$wavePosition,
_ref$colorByIntensity = _ref.colorByIntensity,
colorByIntensity = _ref$colorByIntensity === void 0 ? true : _ref$colorByIntensity,
_ref$waveHeightRatio = _ref.waveHeightRatio,
waveHeightRatio = _ref$waveHeightRatio === void 0 ? 0.9 : _ref$waveHeightRatio,
_ref$mirrorWaveform = _ref.mirrorWaveform,
mirrorWaveform = _ref$mirrorWaveform === void 0 ? true : _ref$mirrorWaveform,
_ref$dawStyleMode = _ref.dawStyleMode,
dawStyleMode = _ref$dawStyleMode === void 0 ? true : _ref$dawStyleMode,
_ref$recordMode = _ref.recordMode,
recordMode = _ref$recordMode === void 0 ? true : _ref$recordMode,
_ref$barSpacing = _ref.barSpacing,
barSpacing = _ref$barSpacing === void 0 ? 2 : _ref$barSpacing,
_ref$barWidth = _ref.barWidth,
barWidth = _ref$barWidth === void 0 ? 3 : _ref$barWidth;
var _useAudioRecorder = useAudioRecorder(_objectSpread({
returnFrequencyData: enableFrequencyVisualizer,
returnWaveformData: true
}, audioRecorderConfigurations || {})),
recording = _useAudioRecorder.recording,
audioBlob = _useAudioRecorder.audioBlob,
waveformData = _useAudioRecorder.waveformData,
startRecording = _useAudioRecorder.startRecording,
stopRecording = _useAudioRecorder.stopRecording;
var _useTimeout = useTimeout(),
schedule = _useTimeout.schedule;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
waveformHistory = _useState2[0],
setWaveformHistory = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isReviewing = _useState4[0],
setIsReviewing = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
maxScrollX = _useState6[0],
setMaxScrollX = _useState6[1];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
scrollX = _useState8[0],
setScrollX = _useState8[1];
var _useState9 = useState(0),
_useState10 = _slicedToArray(_useState9, 2),
scrollY = _useState10[0],
setScrollY = _useState10[1];
var waveformContainerRef = useRef(null);
var canvasRef = useRef(null);
var handleScroll = function handleScroll(event) {
if (!isReviewing) {
return;
}
event.preventDefault();
setScrollX(function (prev) {
return Math.max(0, Math.min(prev - event.deltaX * scrollSpeed, maxScrollX));
});
if (enableVerticalScroll) {
setScrollY(function (prev) {
return Math.max(-maxScrollY, Math.min(prev - event.deltaY * scrollSpeed, maxScrollY));
});
}
};
var handleRecord = useCallback(function () {
if (recording) {
stopRecording();
setIsReviewing(true);
} else {
startRecording(onInternalRecordingStop);
setWaveformHistory([]);
setIsReviewing(false);
setMaxScrollX(0);
setScrollX(0);
setScrollY(0);
}
}, [startRecording, stopRecording, onInternalRecordingStop]);
useEffect(function () {
var container = waveformContainerRef.current;
if (!container) {
return;
}
container.addEventListener("wheel", handleScroll, {
passive: false
});
return function () {
return container.removeEventListener("wheel", handleScroll);
};
}, [isReviewing, enableVerticalScroll]);
useEffect(function () {
if (recordMode && recording && waveformData) {
setWaveformHistory(function (prev) {
var smoothedData = waveformData.flatMap(function (val, i, arr) {
if (i === arr.length - 1) {
return val;
}
var nextVal = arr[i + 1];
return Array(interpolationFactor).fill().map(function (_, j) {
return val + (nextVal - val) * j / interpolationFactor;
});
});
var newHistory = [].concat(_toConsumableArray(prev), _toConsumableArray(smoothedData.slice(-20)));
setMaxScrollX(Math.max(0, newHistory.length - canvasWidth));
return newHistory;
});
}
}, [waveformData, recording, recordMode]);
useEffect(function () {
if (!recordMode && externalWaveformData) {
setWaveformHistory(function (prev) {
var smoothedData = externalWaveformData.flatMap(function (val, i, arr) {
if (i === arr.length - 1) {
return val;
}
var nextVal = arr[i + 1];
return Array(interpolationFactor).fill().map(function (_, j) {
return val + (nextVal - val) * j / interpolationFactor;
});
});
var newHistory = [].concat(_toConsumableArray(prev), _toConsumableArray(smoothedData.slice(-20)));
setMaxScrollX(Math.max(0, newHistory.length - canvasWidth));
return newHistory;
});
}
}, [externalWaveformData, recordMode]);
useEffect(function () {
if (recordMode && autoRecord) {
if (onAutoRecordPreparationActivated) {
onAutoRecordPreparationActivated();
}
schedule(function () {
if (onAutoRecordActivated) {
onAutoRecordActivated();
}
handleRecord();
}, autoRecordDelay);
}
}, [autoRecord, autoRecordDelay, recordMode]);
useEffect(function () {
if (recordMode && initiateRecord) {
if (onInitiateRecordPreparationActivated) {
onInitiateRecordPreparationActivated();
}
schedule(function () {
if (onInitiateRecordActivated) {
onInitiateRecordActivated();
}
handleRecord();
}, initiateRecordDelay);
}
}, [initiateRecord, recordMode]);
useEffect(function () {
if (recordMode && stopRecord) {
if (onStopRecordPreparationActivated) {
onStopRecordPreparationActivated();
}
schedule(function () {
if (onStopRecordActivated) {
onStopRecordActivated();
}
stopRecording();
setIsReviewing(true);
}, stopRecordDelay);
}
}, [stopRecord, recordMode]);
useEffect(function () {
if (!canvasRef.current) {
return;
}
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
if (!ctx) {
return;
}
var height = canvas.height;
var width = canvas.width;
var midY = height / 2;
var baseY = wavePosition === "top" ? 0 : wavePosition === "bottom" ? height : midY;
var minHeight = height * initialDAWStyleWaveformHeight;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, width, height);
ctx.shadowColor = glowColor;
ctx.shadowBlur = 15;
var dataToRender = isReviewing ? waveformHistory.slice(scrollX, scrollX + width) : waveformHistory.slice(-width);
if (dawStyleMode) {
for (var i = 0; i < dataToRender.length; i += barSpacing) {
var normalizedValue = Math.abs(dataToRender[i] - 128) / 128;
var amplitude = Math.max(normalizedValue * height * waveHeightRatio, minHeight);
var colorIntensity = colorByIntensity ? calculateColorIntensity(amplitude, height, waveColor) : waveColor;
ctx.fillStyle = colorIntensity;
var barHeight = amplitude;
ctx.fillRect(i, baseY - barHeight, barWidth, barHeight * 2);
if (mirrorWaveform) {
ctx.fillRect(i, baseY, barWidth, barHeight);
}
}
} else {
ctx.strokeStyle = waveColor;
ctx.lineWidth = 2;
ctx.beginPath();
if (dataToRender.length > 0) {
var initialY = baseY - dataToRender[0] / 255 * height * waveHeightRatio;
ctx.moveTo(0, dawStyleMode ? Math.max(initialY, baseY - minHeight) : initialY);
}
for (var _i = 1; _i < dataToRender.length; _i++) {
var y = baseY - dataToRender[_i] / 255 * height * waveHeightRatio;
var x = _i / dataToRender.length * width;
ctx.lineTo(x, dawStyleMode ? Math.max(y, baseY - minHeight) : y);
}
ctx.stroke();
}
ctx.shadowBlur = 0;
}, [waveformHistory, scrollX, scrollY, barWidth, dawStyleMode, initialDAWStyleWaveformHeight]);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "10px"
}, audioWaveformVisualizerContainerConfigurationSettings)
}, audioWaveformVisualizerContainerConfigurations), recordButtonAboveWaveformVisualizer && recordMode && showRecordButton ? /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
cursor: "pointer",
transition: "0.269s ease-in-out",
fontSize: "18px",
border: "none",
borderRadius: "10px",
boxShadow: "0px 0px 15.69px -12.69px rgba(255, 255, 255, 1)",
background: recording ? recordButtonRecordingBackgroundColor : recordButtonRecordBackgroundColor,
color: recording ? recordButtonRecordingColor : recordButtonRecordColor,
gap: "0.369rem",
padding: "12px 25px"
}, recordButtonConfigurationSettings),
onClick: handleRecord
}, recordButtonConfigurations), /*#__PURE__*/React.createElement(HUDIcon, _extends({
color: recording ? recordButtonRecordingColor : recordButtonRecordColor,
name: recording ? recordButtonRecordingIcon : recordButtonRecordIcon
}, recordButtonIconConfigurations)), recordButtonContent) : null, /*#__PURE__*/React.createElement("div", _extends({
ref: waveformContainerRef,
style: _objectSpread({
position: "relative",
alignItems: "center",
overflow: "hidden",
borderRadius: "10px",
boxShadow: "0px 0px 15.69px -12.69px rgba(255, 255, 255, 1)",
backgroundColor: "rgba(0, 0, 0, 1)",
height: typeof canvasHeight !== "string" ? "".concat(canvasHeight, "px") : canvasHeight,
width: typeof canvasWidth !== "string" ? "".concat(canvasWidth, "px") : canvasWidth,
paddingBottom: "0.269rem",
paddingTop: "0.269rem"
}, audioWaveformContainerConfigurationSettings)
}, audioWaveformContainerConfigurations), /*#__PURE__*/React.createElement("canvas", _extends({
ref: canvasRef,
height: canvasHeight,
width: canvasWidth
}, audioWaveformConfigurations))), recordButtonUnderWaveformVisualizer && recordMode && showRecordButton ? /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
cursor: "pointer",
transition: "0.269s ease-in-out",
fontSize: "18px",
border: "none",
borderRadius: "10px",
boxShadow: "0px 0px 15.69px -12.69px rgba(255, 255, 255, 1)",
background: recording ? recordButtonRecordingBackgroundColor : recordButtonRecordBackgroundColor,
color: recording ? recordButtonRecordingColor : recordButtonRecordColor,
gap: "0.369rem",
padding: "12px 25px"
}, recordButtonConfigurationSettings),
onClick: function onClick() {
if (recording) {
stopRecording();
setIsReviewing(true);
} else {
startRecording(onInternalRecordingStop);
setWaveformHistory([]);
setIsReviewing(false);
setMaxScrollX(0);
setScrollX(0);
setScrollY(0);
}
}
}, recordButtonConfigurations), /*#__PURE__*/React.createElement(HUDIcon, _extends({
color: recording ? recordButtonRecordingColor : recordButtonRecordColor,
name: recording ? recordButtonRecordingIcon : recordButtonRecordIcon
}, recordButtonIconConfigurations)), recordButtonContent) : null);
};
export default HUDAudioWaveformVisualizer;