@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
275 lines • 11.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 } from "react";
import { createRoot } from "react-dom/client";
import { toPng } from "dom-to-image-more";
function HUDVideoRenderer(_ref) {
var _ref$rendererContaine = _ref.rendererContainerConfigurationSettings,
rendererContainerConfigurationSettings = _ref$rendererContaine === void 0 ? {} : _ref$rendererContaine,
_ref$rendererPreviewC = _ref.rendererPreviewConfigurationSettings,
rendererPreviewConfigurationSettings = _ref$rendererPreviewC === void 0 ? {} : _ref$rendererPreviewC,
_ref$onVideoRenderCom = _ref.onVideoRenderComplete,
onVideoRenderComplete = _ref$onVideoRenderCom === void 0 ? function () {} : _ref$onVideoRenderCom,
_ref$onFrameComplete = _ref.onFrameComplete,
onFrameComplete = _ref$onFrameComplete === void 0 ? function () {} : _ref$onFrameComplete,
_ref$onFrame = _ref.onFrame,
onFrame = _ref$onFrame === void 0 ? function () {} : _ref$onFrame,
_ref$enableMediaRecor = _ref.enableMediaRecorder,
enableMediaRecorder = _ref$enableMediaRecor === void 0 ? true : _ref$enableMediaRecor,
_ref$blobbedFrames = _ref.blobbedFrames,
blobbedFrames = _ref$blobbedFrames === void 0 ? false : _ref$blobbedFrames,
_ref$showPreview = _ref.showPreview,
showPreview = _ref$showPreview === void 0 ? false : _ref$showPreview,
_ref$componentRef = _ref.componentRef,
componentRef = _ref$componentRef === void 0 ? null : _ref$componentRef,
_ref$audioStream = _ref.audioStream,
audioStream = _ref$audioStream === void 0 ? null : _ref$audioStream,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 1080 : _ref$height,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 1920 : _ref$width,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 5 : _ref$duration,
_ref$fps = _ref.fps,
fps = _ref$fps === void 0 ? 60 : _ref$fps,
_ref$quality = _ref.quality,
quality = _ref$quality === void 0 ? 1 : _ref$quality,
components = _ref.components;
var previewContainerRef = useRef(null);
var renderContainerRef = useRef(null);
var isStoppedRef = useRef(false);
var mountedRef = useRef(true);
var rendering = useRef(false);
var canvasRef = useRef(null);
var rootRef = useRef(null);
useEffect(function () {
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
var renderContainer = renderContainerRef.current;
var previewContainer = previewContainerRef.current;
canvas.width = width * quality;
canvas.height = height * quality;
ctx.scale(quality, quality);
var totalFrames = Math.ceil(duration * fps);
var frameInterval = 1000 / fps;
var frames = [];
var stream = canvas.captureStream(fps);
if (audioStream) {
var audioTracks = audioStream.getAudioTracks();
audioTracks.forEach(function (track) {
return stream.addTrack(track);
});
}
var mediaRecorder;
var recordedChunks = [];
if (enableMediaRecorder) {
mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm"
});
mediaRecorder.ondataavailable = function (event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = function () {
if (recordedChunks.length > 0) {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
onVideoRenderComplete(blob);
}
};
mediaRecorder.start(100);
}
mountedRef.current = true;
if (!rootRef.current) {
rootRef.current = createRoot(renderContainer);
}
var captureFrame = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(frameIndex) {
var currentTime, dataUrl, imgBitmap, frameData, dataUrlBlob, img;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(!mountedRef.current || rendering.current)) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
rendering.current = true;
if (!(frameIndex >= totalFrames)) {
_context.next = 8;
break;
}
onFrameComplete(frames, totalFrames);
rendering.current = false;
if (enableMediaRecorder && !isStoppedRef.current && mediaRecorder.state !== "inactive") {
isStoppedRef.current = true;
mediaRecorder.stop();
}
return _context.abrupt("return");
case 8:
currentTime = frameIndex / fps;
_context.prev = 9;
if (!(componentRef !== null && componentRef !== void 0 && componentRef.current)) {
_context.next = 25;
break;
}
_context.next = 13;
return toPng(componentRef.current, {
cacheBust: true
});
case 13:
dataUrl = _context.sent;
_context.t0 = createImageBitmap;
_context.next = 17;
return fetch(dataUrl).then(function (res) {
return res.blob();
});
case 17:
_context.t1 = _context.sent;
_context.next = 20;
return (0, _context.t0)(_context.t1);
case 20:
imgBitmap = _context.sent;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgBitmap, 0, 0, canvas.width, canvas.height);
_context.next = 39;
break;
case 25:
if (!components) {
_context.next = 39;
break;
}
rootRef.current.render(typeof components === "function" ? components(frameIndex) : components);
_context.next = 29;
return toPng(renderContainer, {
cacheBust: true
});
case 29:
dataUrl = _context.sent;
_context.t2 = createImageBitmap;
_context.next = 33;
return fetch(dataUrl).then(function (res) {
return res.blob();
});
case 33:
_context.t3 = _context.sent;
_context.next = 36;
return (0, _context.t2)(_context.t3);
case 36:
imgBitmap = _context.sent;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgBitmap, 0, 0, canvas.width, canvas.height);
case 39:
if (!blobbedFrames) {
_context.next = 53;
break;
}
_context.next = 42;
return fetch(canvas.toDataURL("image/png"));
case 42:
dataUrlBlob = _context.sent;
if (!dataUrlBlob.ok) {
_context.next = 49;
break;
}
_context.next = 46;
return dataUrlBlob.blob();
case 46:
_context.t4 = _context.sent;
_context.next = 50;
break;
case 49:
_context.t4 = canvas.toDataURL("image/png");
case 50:
frameData = _context.t4;
_context.next = 54;
break;
case 53:
frameData = canvas.toDataURL("image/png");
case 54:
frames.push(frameData);
if (showPreview && previewContainer) {
img = previewContainer.querySelector("img");
if (!img) {
img = document.createElement("img");
img.style.height = "auto";
img.style.width = "100%";
previewContainer.appendChild(img);
}
img.src = blobbedFrames ? URL.createObjectURL(frameData) : frameData;
}
onFrame({
frameIndex: frameIndex,
currentTime: currentTime,
frameData: frameData,
totalFrames: totalFrames
});
_context.next = 62;
break;
case 59:
_context.prev = 59;
_context.t5 = _context["catch"](9);
console.error("Did not render frame ~", _context.t5);
case 62:
rendering.current = false;
requestAnimationFrame(function () {
return captureFrame(frameIndex + 1);
});
case 64:
case "end":
return _context.stop();
}
}, _callee, null, [[9, 59]]);
}));
return function captureFrame(_x) {
return _ref2.apply(this, arguments);
};
}();
captureFrame(0);
return function () {
mountedRef.current = false;
if (enableMediaRecorder && !isStoppedRef.current && mediaRecorder.state !== "inactive" && !rendering.current) {
isStoppedRef.current = true;
mediaRecorder.stop();
}
};
}, [componentRef, components, duration, fps, onFrameComplete, onVideoRenderComplete, width, height, quality, blobbedFrames, showPreview, audioStream, enableMediaRecorder]);
return /*#__PURE__*/React.createElement("div", {
style: rendererContainerConfigurationSettings
}, /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: {
display: "none"
},
height: height * quality,
width: width * quality
}), /*#__PURE__*/React.createElement("div", {
ref: renderContainerRef,
style: {
position: "absolute",
overflow: "hidden",
height: "".concat(height, "px"),
width: "".concat(width, "px"),
left: "-9999px",
top: "-9999px"
}
}), showPreview && /*#__PURE__*/React.createElement("div", {
ref: previewContainerRef,
style: _objectSpread({
display: "flex",
flexDirection: "column",
overflow: "auto",
maxWidth: "".concat(width, "px"),
height: "".concat(height, "px"),
width: "100%",
margin: "0 auto"
}, rendererPreviewConfigurationSettings)
}));
}
export default HUDVideoRenderer;