From 28b6034cfb927daa63bf0a16ec535c50c2cc112c Mon Sep 17 00:00:00 2001 From: Michael Chung Date: Tue, 27 May 2025 11:21:10 -0400 Subject: [PATCH] Removed docs and playground, wizard. Readded the strange login. --- .../components/reusable/ConfirmationModal.tsx | 111 ++++++++++ frontend/apps/editor3d/app/src/login.tsx | 204 ++++++++++++++++++ .../PageEnigma/GlobalSettingsManager.tsx | 12 +- frontend/apps/editor3d/docs/DOCS/COPYPASTE.md | 21 -- frontend/apps/editor3d/docs/DOCS/MMD.md | 21 -- frontend/apps/editor3d/docs/DOCS/SKYBOXES.md | 27 --- .../apps/editor3d/docs/DOCS/VIDEOPLANES.md | 25 --- frontend/apps/editor3d/docs/README.md | 13 -- .../3jsDemo/ImageProcessingWorker.js | 76 ------- .../3jsDemo/canvas-queued-worker.js | 64 ------ .../playground/3jsDemo/canvas-worker.js | 17 -- .../playground/3jsDemo/canvasworker.js | 89 -------- .../playground/3jsDemo/enginepreprocessing.js | 29 --- .../playground/3jsDemo/ffmpeg-worker.js | 121 ----------- .../editor3d/playground/3jsDemo/index.html | 25 --- .../apps/editor3d/playground/3jsDemo/main.js | 80 ------- .../apps/editor3d/playground/3jsDemo/run.ps1 | 10 - .../apps/editor3d/playground/ts_playground.js | 35 --- 18 files changed, 316 insertions(+), 664 deletions(-) create mode 100644 frontend/apps/editor3d/app/src/components/reusable/ConfirmationModal.tsx create mode 100644 frontend/apps/editor3d/app/src/login.tsx delete mode 100644 frontend/apps/editor3d/docs/DOCS/COPYPASTE.md delete mode 100644 frontend/apps/editor3d/docs/DOCS/MMD.md delete mode 100644 frontend/apps/editor3d/docs/DOCS/SKYBOXES.md delete mode 100644 frontend/apps/editor3d/docs/DOCS/VIDEOPLANES.md delete mode 100644 frontend/apps/editor3d/docs/README.md delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/ImageProcessingWorker.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/canvas-queued-worker.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/canvas-worker.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/canvasworker.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/enginepreprocessing.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/ffmpeg-worker.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/index.html delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/main.js delete mode 100644 frontend/apps/editor3d/playground/3jsDemo/run.ps1 delete mode 100644 frontend/apps/editor3d/playground/ts_playground.js diff --git a/frontend/apps/editor3d/app/src/components/reusable/ConfirmationModal.tsx b/frontend/apps/editor3d/app/src/components/reusable/ConfirmationModal.tsx new file mode 100644 index 0000000000..d9223a497f --- /dev/null +++ b/frontend/apps/editor3d/app/src/components/reusable/ConfirmationModal.tsx @@ -0,0 +1,111 @@ +import { Fragment, useCallback } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import { DoNotShow } from "~/constants"; +import { Button } from "@storyteller/ui-button" + +interface Props { + text: string; + title: string; + open: boolean; + onClose: () => void; + onOk?: () => void; + okText?: string; + okColor?: string; + onCancel?: () => void; + cancelText?: string; + canHide?: boolean; +} + +export const ConfirmationModal = ({ + text, + title, + open, + onClose, + onOk, + okText = "OK", + okColor = "bg-brand-success", + onCancel, + cancelText = "Cancel", + canHide, +}: Props) => { + const handleOk = useCallback(() => { + const element = document.getElementById("hide-dialog"); + if (element) { + if ((element as HTMLInputElement).checked) { + localStorage.setItem(title.replace(" ", "-"), DoNotShow); + } + } + + onOk!(); + }, [onOk, title]); + + return ( + + + +
+ +
+ + + + {title} + + +
{text}
+ {canHide && ( +
+ +
+ )} + +
+ {!!onCancel && ( + + )} + {!!onOk && ( + + )} +
+ + +
+
+ + ); +}; \ No newline at end of file diff --git a/frontend/apps/editor3d/app/src/login.tsx b/frontend/apps/editor3d/app/src/login.tsx new file mode 100644 index 0000000000..8634a7a05c --- /dev/null +++ b/frontend/apps/editor3d/app/src/login.tsx @@ -0,0 +1,204 @@ +import { useRef, StrictMode } from "react"; +import { useNavigate, useSearchParams, BrowserRouter } from "react-router-dom"; +import { useSignalEffect, useSignals } from "@preact/signals-react/runtime"; +import { twMerge } from "tailwind-merge"; + +import { + faKey, + faSpinnerThird, + faUser, +} from "@fortawesome/pro-solid-svg-icons"; + +import { AUTH_STATUS } from "~/enums"; +import { authentication, login, logout } from "~/signals"; +import { createRoot } from "react-dom/client"; + +import { ConfirmationModal } from "~/components/reusable/ConfirmationModal"; +import { Input } from "@storyteller/ui-input"; +import { Button } from "@storyteller/ui-button"; + +import "./styles/normalize.css"; +import "./styles/tailwind.css"; +import "./styles/base.css"; +import "@fortawesome/fontawesome-svg-core/styles.css"; + +import { config } from "@fortawesome/fontawesome-svg-core"; +import { GlobalSettingsManager } from "./pages/PageEnigma/GlobalSettingsManager"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +config.autoAddCss = false; /* eslint-disable import/first */ + +// TODO(bt,2025-04-19): Make these configurable +const ENV = { + BASE_API: "https://api.storyteller.ai", + GOOGLE_API: "https://studio.storyteller.ai", + FUNNEL_API: "https://studio.storyteller.ai", + CDN_API: "https://cdn-2.fakeyou.com", + GRAVATAR_API: "https://studio.storyteller.ai", + DEPLOY_PRIME_URL: "https://studio.storyteller.ai", +}; + +export default function LoginScreen() { + useSignals(); + const navigate = useNavigate(); + const [searchParams] = useSearchParams(); + + const formRef = useRef(null); + const { status: authStatus } = authentication; + const authLoaderMessage = getAuthLoaderMessage(); + const shouldShowLoader = checkShouldShowLoader(); + + const showNoAccessModal = authStatus.value === AUTH_STATUS.NO_ACCESS; + + const handleOnSumbit = (ev: React.FormEvent) => { + ev.preventDefault(); + if (formRef.current) { + const form = new FormData(formRef.current); + const usernameOrEmail = form.get("usernameOrEmail")?.toString(); + const password = form.get("password")?.toString(); + if (usernameOrEmail && password && login) { + login({ + usernameOrEmail, + password, + }); + } + } + }; + + useSignalEffect(() => { + const redirectPath = searchParams.get("redirect"); + if (authStatus.value === AUTH_STATUS.LOGGED_IN) { + navigate(redirectPath ? redirectPath : "/"); + } + }); + + return ( +
+
+ ArtCraft Logo +
+
+
+

+ Log in to 3D Stage Editor +

+
+ + + +
+ {shouldShowLoader && ( +
+
+ +

{authLoaderMessage}

+
+
+ )} +
+
+ {/* + Forgot your password? + */} + + Back + +
+

Don't have an account?

+ + Sign up + +
+
+
+ { + handleClose(); + if (window) { + window.open("https://storyteller.ai/beta-key/redeem", "_blank"); + } + }} + /> +
+ ); +} + +const handleClose = () => { + if (authentication.status.value !== AUTH_STATUS.LOGGED_OUT) { + logout(); + } +}; + +const checkShouldShowLoader = () => { + return ( + authentication.status.value === AUTH_STATUS.LOGGING || + authentication.status.value === AUTH_STATUS.LOGGED_IN + ); +}; + +const getAuthLoaderMessage = () => { + if (authentication.status.value === AUTH_STATUS.LOGGED_IN) { + return "Authenticated, Redirecting..."; + } + if (authentication.status.value === AUTH_STATUS.GET_USER_INFO) { + return "Getting User Info..."; + } + return "Getting Session..."; +}; + +// TODO: Replace environment variables from `root.tsx` +createRoot(document.getElementById("root")!).render( + <> + + + + + + + , +); diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/GlobalSettingsManager.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/GlobalSettingsManager.tsx index b228e5cd21..efcaaf5032 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/GlobalSettingsManager.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/GlobalSettingsManager.tsx @@ -3,7 +3,7 @@ import EnvironmentVariables from "~/Classes/EnvironmentVariables"; import { persistLogin } from "~/signals"; import { pageHeight, pageWidth } from "~/signals"; import { useEffect } from "react"; -import { showWizard } from "~/pages/PageEnigma/Wizard/signals/wizard"; + export const GlobalSettingsManager = ({ env }: { env: Record }) => { @@ -35,17 +35,7 @@ export const GlobalSettingsManager = ({ env }: { env: Record }) pageWidth.value = window.innerWidth; } - function initWizard() { - if (showWizard.value) { - return; - } - const wizard = localStorage.getItem("storyteller-wizard"); - showWizard.value = wizard ? "" : "initial"; - localStorage.setItem("storyteller-wizard", "shown"); - } - useEffect(() => { - initWizard(); setPage(); window.addEventListener("resize", setPage); return () => { diff --git a/frontend/apps/editor3d/docs/DOCS/COPYPASTE.md b/frontend/apps/editor3d/docs/DOCS/COPYPASTE.md deleted file mode 100644 index d3642b7a78..0000000000 --- a/frontend/apps/editor3d/docs/DOCS/COPYPASTE.md +++ /dev/null @@ -1,21 +0,0 @@ -# STORYTELLER STUDIO ENGINE DOCS - -This is the official documentation for the storyteller studio engine. - -[Back](../README.md) - -## Copy & Paste - -## Documentation - -- Copy paste is done in the `SceneManager` and `MouseControls` classes. -- In `SceneManager` the async `copy` function sets the copied object to whatever the `MouseControls` class has selected. -- In `SceneManager` the async `paste` function duplicates the threejs object and updates the outliner while coping the newly created object. - -## Hacks - -- Tempararly disabled copy and paste of characters because the UI on the timeline is not updateing properly. - -## Roadmap - -- Fix characters. diff --git a/frontend/apps/editor3d/docs/DOCS/MMD.md b/frontend/apps/editor3d/docs/DOCS/MMD.md deleted file mode 100644 index 999c64d206..0000000000 --- a/frontend/apps/editor3d/docs/DOCS/MMD.md +++ /dev/null @@ -1,21 +0,0 @@ -# STORYTELLER STUDIO ENGINE DOCS - -This is the official documentation for the storyteller studio engine. - -[Back](../README.md) - -## MMD IK - -## Documentation - -- All IK is handled by the `ikHelper` which is appart of `THREE.js`'s `MMDAnimation` lib. -- IK is updated by the timeline by setting the action of the mixer which was assigned to it by the animation clip. - -## Hacks - -- Loads `Ammo.js` using js on line `180` of `editor` as of `July 25th 2024`. -- Ceates an `Ammo.js` instance using code on line `673` of `scene.ts` as of `July 25th 2024`. - -## Roadmap - -- Fix loading of `ammo.js`. diff --git a/frontend/apps/editor3d/docs/DOCS/SKYBOXES.md b/frontend/apps/editor3d/docs/DOCS/SKYBOXES.md deleted file mode 100644 index bd644539bb..0000000000 --- a/frontend/apps/editor3d/docs/DOCS/SKYBOXES.md +++ /dev/null @@ -1,27 +0,0 @@ -# STORYTELLER STUDIO ENGINE DOCS - -This is the official documentation for the storyteller studio engine. - -[Back](../README.md) - -## Documentation Links - -[threejs skyboxes](https://threejs.org/manual/#en/backgrounds) - -## Documentation - -- Asset type is `AssetType.SKYBOX` -- Update skyboxes by calling the `Scene`'s `updateSkybox` function while passing in the media id of te skybox. -- You can also update skyboxes by calling the Scene Manages `updateSkybox` function while passing in the media id of te skybox. - -## Hacks - -- Made creation of skyboxs go through the `addObject` function on line 101 of `DndAssets.ts`. -- Hard coded 3 skyboxs into the engine in `demoAssts.ts`. -- Use hard coded images and media tokens for loading skyboxes. Ex. `Default`, `m_0`, `m_1`... - -## Roadmap - -- Uploading Skyboxes to Backend. - -- Create Panel for Skyboxes diff --git a/frontend/apps/editor3d/docs/DOCS/VIDEOPLANES.md b/frontend/apps/editor3d/docs/DOCS/VIDEOPLANES.md deleted file mode 100644 index 77f80ce221..0000000000 --- a/frontend/apps/editor3d/docs/DOCS/VIDEOPLANES.md +++ /dev/null @@ -1,25 +0,0 @@ -# STORYTELLER STUDIO ENGINE DOCS - -This is the official documentation for the storyteller studio engine. - -[Back](../README.md) - -## Video Planes - -## Documentation Links - -[threejs VideoTexture](https://threejs.org/docs/#api/en/textures/VideoTexture) - -## Documentation - -- Suported types: `.mp4` -- The loading and instantiating code is all located in scene.ts arround line 140 as of July 22 2024. -- The actual code for updating is in the timeline but it runs at 10fps due too buffering issue. - -## Hacks - -- Caped to 10 fps due to buffering issue. - -## Roadmap - -- Make render at 30 fps. diff --git a/frontend/apps/editor3d/docs/README.md b/frontend/apps/editor3d/docs/README.md deleted file mode 100644 index 29b547ea89..0000000000 --- a/frontend/apps/editor3d/docs/README.md +++ /dev/null @@ -1,13 +0,0 @@ -# STORYTELLER STUDIO ENGINE DOCS - -This is the official documentation for the storyteller studio engine. - -## Documentation Links - -[Skyboxes](./DOCS/SKYBOXES.md) - -[Copy & Paste](./DOCS/COPYPASTE.md) - -[Video Planes](./DOCS/VIDEOPLANES.md) - -[MMD IK](./DOCS/MMD.md) diff --git a/frontend/apps/editor3d/playground/3jsDemo/ImageProcessingWorker.js b/frontend/apps/editor3d/playground/3jsDemo/ImageProcessingWorker.js deleted file mode 100644 index 2d0b10b01e..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/ImageProcessingWorker.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as THREE from "three"; - -export class FrameCollectorManager { - constructor(width, height, expectedFramesLength = 720) { - this.worker = new Worker("canvas-queued-worker.js"); - this.worker.addEventListener("message", this.handleMessage.bind(this)); - - this.frames = []; - - this.expectedFramesLength = expectedFramesLength; - - this.offscreenCanvas = new OffscreenCanvas(width, height); - this.width = width; - this.height = height; - this.offScreenRenderer = new THREE.WebGLRenderer({ - canvas: this.offscreenCanvas, - }); - } - - setCanvas(width, height) { - this.offscreenCanvas.width = width; - this.offscreenCanvas.height = height; - } - - handleMessage(event) { - console.time("Decode"); - console.log("Message from Decode:", event.data); - const { id, blob } = event.data; - console.log(`${id} Frame id: ${blob}`); - console.timeEnd("Decode"); - this.frames.push(blob); - console.log(this.frames.length); - - // create shared worker - if (this.frames.length === this.expectedFramesLength) { - console.log("Complete"); - } - } - - sleep(ms) { - return new Promise((resolve) => setTimeout(resolve, ms)); - } - - async collectedFrames() { - while (this.frames.length != this.expectedFramesLength) { - await this.sleep(1); - } - - return this.frames; - } - - terminate() { - this.worker.terminate(); - console.log("Worker Terminated"); - } - - render(scene, camera, frame) { - this.offScreenRenderer.render(scene, camera); - const imageBitmap = this.offscreenCanvas.transferToImageBitmap(); - this.processFrame(imageBitmap, frame); - } - - processFrame(imageBitmap, frame) { - const width = this.width; - const height = this.height; - const action = "process"; - - this.worker.postMessage({ - action, - imageBitmap, - width, - height, - frame, - }); - } -} diff --git a/frontend/apps/editor3d/playground/3jsDemo/canvas-queued-worker.js b/frontend/apps/editor3d/playground/3jsDemo/canvas-queued-worker.js deleted file mode 100644 index 0e418f00dd..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/canvas-queued-worker.js +++ /dev/null @@ -1,64 +0,0 @@ -// This is responsible for processing and turning the data into - -class ImageProcessorWorker { - constructor() { - this.queue = []; - this.processing = false; - this.holdingCanvas = new OffscreenCanvas(0, 0); - this.ctx = this.holdingCanvas.getContext("bitmaprenderer"); - this.imageType = "image/png"; - } - - enqueueTask(imageBitmap, width, height, id) { - this.queue.push({ imageBitmap, width, height, id }); - } - - async processQueue() { - // If already processing, return to avoid duplicate execution - console.log(`Current Queue Length ${this.queue.length}`); - if (this.queue.length > 0) { - const { imageBitmap, width, height, id } = this.queue.shift(); - console.log(`Working On an Frame Id ${id}`); - - this.holdingCanvas.width = width; - this.holdingCanvas.height = height; - - try { - // Create or reuse the offscreen canvas - this.ctx.transferFromImageBitmap(imageBitmap); - - // Convert the canvas content to a Blob - const blob = await this.holdingCanvas.convertToBlob({ - quality: 1.0, - type: this.imageType, - }); - - // Send the Blob back to the main thread - self.postMessage({ blob, id }); - } catch (error) { - console.error("Error processing image:", error); - self.postMessage({ error: error.message }); - } - } - - console.log("Processing"); - setTimeout(this.processQueue.bind(this), 0); - } -} - -// Instantiate the ImageProcessorWorker -const runner = new ImageProcessorWorker(); -let start = false; - -self.addEventListener("message", async (event) => { - console.log(event.data); - const { type, imageBitmap, width, height, frame } = event.data; - console.log(`${type}: ${imageBitmap} ${width} ${height} ${frame}`); - - if (start == false) { - start = true; - await runner.processQueue(); - } - - runner.enqueueTask(imageBitmap, width, height, frame); -}); diff --git a/frontend/apps/editor3d/playground/3jsDemo/canvas-worker.js b/frontend/apps/editor3d/playground/3jsDemo/canvas-worker.js deleted file mode 100644 index d5ece42d12..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/canvas-worker.js +++ /dev/null @@ -1,17 +0,0 @@ -// Listen for messages from the main thread -self.addEventListener("message", async function (event) { - const imageBitmap = event.data.imageBitmap; - const width = event.data.width; - const height = event.data.height; - - const holdingCanvas = new OffscreenCanvas(width, height); - // in the worker use queue and pass the imageBitmap - const ctx = holdingCanvas.getContext("bitmaprenderer"); - ctx.transferFromImageBitmap(imageBitmap); - const blob = await holdingCanvas.convertToBlob({ - quality: 1.0, - type: "image/png", - }); - - self.postMessage(blob); // Send the result back to the main thread -}); diff --git a/frontend/apps/editor3d/playground/3jsDemo/canvasworker.js b/frontend/apps/editor3d/playground/3jsDemo/canvasworker.js deleted file mode 100644 index 843e2ffb4d..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/canvasworker.js +++ /dev/null @@ -1,89 +0,0 @@ -class CanvasProcessor { - constructor() { - this.queue = []; - this.totalItems = 0; - this.completedItems = 0; - this.running = true; - } - - // Add a canvas to the processing queue - enqueueCanvas(canvas, id) { - this.queue.push({ canvas, id }); - } - - // Set the total number of items to process - setTotalItems(count) { - this.totalItems = count; - } - - // Start the processing loop - async processQueue() { - while (this.running) { - if (this.queue.length > 0) { - await this.processNext(); - } - - // Check if all items have been processed - if (this.completedItems >= this.totalItems) { - self.postMessage({ command: "done", message: "All items processed." }); - this.running = false; - } - - await this.sleep(100); // Small delay to prevent blocking - } - } - - // Process the next canvas in the queue - async processNext() { - if (this.queue.length > 0) { - const { canvas, id } = this.queue.shift(); - - try { - const blob = await canvas.convertToBlob(); - - this.completedItems++; - const percentageComplete = - (this.completedItems / this.totalItems) * 100; - - self.postMessage({ - id, - blob, - completedItems: this.completedItems, - totalItems: this.totalItems, - percentageComplete, - }); - } catch (error) { - self.postMessage({ id, error: error.message }); - } - } - } - - // Utility to sleep for a specified time - sleep(ms) { - return new Promise((resolve) => setTimeout(resolve, ms)); - } -} - -// Instantiate the processor -const processor = new CanvasProcessor(); - -// Listen for messages from the main thread -self.addEventListener("message", function (event) { - const data = event.data; - - if (data.totalItems) { - processor.setTotalItems(data.totalItems); - } - - if (data.canvas) { - processor.enqueueCanvas(data.canvas, data.id); - } - - if (data.command === "start") { - processor.processQueue(); - } - - if (data.command === "stop") { - processor.running = false; - } -}); diff --git a/frontend/apps/editor3d/playground/3jsDemo/enginepreprocessing.js b/frontend/apps/editor3d/playground/3jsDemo/enginepreprocessing.js deleted file mode 100644 index a5d0f5569b..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/enginepreprocessing.js +++ /dev/null @@ -1,29 +0,0 @@ -// if (this.engine_preprocessing) { -// // Normals -// this.setNormalMap(); -// this.render_composer?.render(); - -// const normalRenderTask = this.videoAudioPreProcessor.retrieveFrame( -// this.rawRenderer, -// ); -// this.engineFrameBuffers.normalFrames[this.renderIndex] = -// await normalRenderTask; -// // Depth -// this.setRenderDepth(); -// this.render_composer?.render(); -// const depthRenderTask = this.videoAudioPreProcessor.retrieveFrame( -// this.rawRenderer, -// ); -// this.engineFrameBuffers.depthFrames[this.renderIndex] = -// await depthRenderTask; - -// // Outline -// this.setOutlineRender(); -// this.render_composer?.render(); -// const outlineRenderTask = this.videoAudioPreProcessor.retrieveFrame( -// this.rawRenderer, -// ); -// this.engineFrameBuffers.outlineFrames[this.renderIndex] = -// await outlineRenderTask; -// this.renderIndex += 1; -// } else { diff --git a/frontend/apps/editor3d/playground/3jsDemo/ffmpeg-worker.js b/frontend/apps/editor3d/playground/3jsDemo/ffmpeg-worker.js deleted file mode 100644 index e82ae68746..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/ffmpeg-worker.js +++ /dev/null @@ -1,121 +0,0 @@ -// import { VideoGeneration } from "../../app/pages/PageEnigma/Editor/VideoProcessor/video_audio_preprocessor.ts"; - -//import { createFFmpeg, fetchFile, FFmpeg } from "@ffmpeg/ffmpeg"; -self.importScripts("@ffmpeg/ffmpeg"); -const JPEG = "image/jpeg"; -const PNG = "image/png"; - -// chrome://inspect/#workers debug shared worker. - -async function processVideoWithBuffer( - buffer, - fileName, - outFileName, - imagePrefix, -) { - try { - const imageFormat = this.properties.imageFormat; - let extension = ""; - - if (imageFormat == JPEG) { - extension = ".jpeg"; - } else { - extension = ".png"; - } - // console.log("Image Files"); - // console.log(`Buffer Lenght ${buffer.length}`); - for (let index = 0; index < buffer.length; index++) { - const element = buffer[index]; - if (element === null) { - continue; - } - // this can fail so catch any errors. - const image = await fetchFile(element); - await this.ffmpeg.FS( - "writeFile", - `${imagePrefix}_image${index}${extension}`, - image, - ); - } - - await this.ffmpeg.run( - "-framerate", - "" + this.properties.frameRate, - "-i", - `${imagePrefix}_image%d${extension}`, - `${fileName}.mp4`, - ); - - await this.ffmpeg.run( - "-i", - `${fileName}.mp4`, - "-f", - "lavfi", - "-i", - "anullsrc", // This adds a silent audio track - "-max_muxing_queue_size", - "999999", - "-vf", // WE REMOVED THE BLACK FRAME IN FFMEPG INSTEAD OF THE ENGINE - "select=gte(n\\,1)", // WE REMOVED THE BLACK FRAME IN FFMEPG INSTEAD OF THE ENGINE Applies a video filter to remove the first frame. - // "select=gte(n\\,1),scale=1024:576", - "-c:v", - "libx264", // Specify video codec (optional, but recommended for MP4) - "-c:a", - "aac", // Specify audio codec (optional, but recommended for MP4) - "-shortest", // Ensure output duration matches the shortest stream (video or audio) - "-pix_fmt", - "yuv420p", - "-f", - "mp4", - `${outFileName}.mp4`, - ); - - const blob = await this.outputMp4FromMemory(`${outFileName}`); - return blob; - } catch (error) { - console.error(error); - } -} - -self.addEventListener("connect", function (event) { - const port = event.ports[0]; - - port.addEventListener("message", function (event) { - console.log("Message received from main script:", event.data); - port.postMessage("Hello from the Shared Worker!"); - }); - - port.start(); -}); - -// const videoGeneration = new VideoGeneration(); - -// self.addEventListener("connect", function (event) { -// const port = event.ports[0]; - -// console.log("WERE IN"); -// port.start(); - -// port.addEventListener("message", async function (event) { -// console.log("Message received from main script:", event.data); - -// const { colorFrames } = event.data; -// console.log(event.data); - -// try { -// console.time("Processing Video Started"); -// const colorBlob = await videoGeneration.processVideoWithBuffer( -// colorFrames, -// "color", -// "color", -// "colorFrame", -// ); -// console.log(colorBlob); -// console.time("Processing Video Finished"); -// port.postMessage({ colorBlob }); -// } catch (error) { -// console.log(error); -// port.postMessage({ error: error.message }); -// } -// }); -// }); diff --git a/frontend/apps/editor3d/playground/3jsDemo/index.html b/frontend/apps/editor3d/playground/3jsDemo/index.html deleted file mode 100644 index 00e7427f07..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - My first three.js app - - - - - - - - diff --git a/frontend/apps/editor3d/playground/3jsDemo/main.js b/frontend/apps/editor3d/playground/3jsDemo/main.js deleted file mode 100644 index bcd9e867f0..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/main.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as THREE from "three"; - -import { FrameCollectorManager } from "./ImageProcessingWorker.js"; - -const scene = new THREE.Scene(); -const camera = new THREE.PerspectiveCamera( - 75, - window.innerWidth / window.innerHeight, - 0.1, - 1000, -); - -const renderer = new THREE.WebGLRenderer(); -renderer.setSize(window.innerWidth, window.innerHeight); -renderer.setAnimationLoop(animate); -document.body.appendChild(renderer.domElement); - -const geometry = new THREE.BoxGeometry(1, 1, 1); -const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); -const cube = new THREE.Mesh(geometry, material); -scene.add(cube); - -camera.position.z = 5; - -const totalFrames = 720; - -const imageProcessing = new FrameCollectorManager( - window.innerWidth, - window.innerHeight, - totalFrames, -); - -let frame = 0; - -// const sharedWorker = new SharedWorker("ffmpeg-worker.js"); -// // Start the port -// sharedWorker.port.start(); -// const message = { message: "Hello" }; -// sharedWorker.port.postMessage(message); - -if (typeof SharedWorker !== "undefined") { - console.log("Shared Workers are supported."); - // You can safely create a Shared Worker here - const worker = new SharedWorker("ffmpeg-worker.js", { type: "module" }); - - // Get the port for communication - const port = worker.port; - - // Listen for messages from the worker - port.addEventListener("message", function (event) { - console.log("Message received from worker:", event.data); - }); - - // Start the port - port.start(); - - // Send a message to the worker - port.postMessage("Hello from the main script!"); -} else { - console.log("Shared Workers are not supported in this browser."); -} - -async function animate() { - cube.rotation.x += 0.01; - cube.rotation.y += 0.01; - - frame += 1; - // buckets the frames. - - if (frame <= totalFrames) { - //console.time("Render"); - // can use the canvas renderer to enqueue as an option. - //imageProcessing.render(scene, camera, frame); - //console.timeEnd("Render"); - } - - // block and wait for all the frames - - renderer.render(scene, camera); -} diff --git a/frontend/apps/editor3d/playground/3jsDemo/run.ps1 b/frontend/apps/editor3d/playground/3jsDemo/run.ps1 deleted file mode 100644 index b2462b35cd..0000000000 --- a/frontend/apps/editor3d/playground/3jsDemo/run.ps1 +++ /dev/null @@ -1,10 +0,0 @@ -# Run the TypeScript build -npm run build - -# Check if the build was successful -if ($?) { - # Open the index.html file in the default web browser - Start-Process "index.html" -} else { - Write-Host "Build failed. Please check the errors above." -} \ No newline at end of file diff --git a/frontend/apps/editor3d/playground/ts_playground.js b/frontend/apps/editor3d/playground/ts_playground.js deleted file mode 100644 index 63ad388231..0000000000 --- a/frontend/apps/editor3d/playground/ts_playground.js +++ /dev/null @@ -1,35 +0,0 @@ -class Network { - constructor() {} - - async sleep(ms) { - return new Promise((resolve) => setTimeout(resolve, ms)); - } - async task1() { - console.log("World."); - let val = true; - while (val) { - await this.sleep(1000); - console.log("Task1 doing work."); - } - //throw Error("Ded World.") - } - - async task2() { - console.log("Hello."); - let val = true; - while (val) { - await this.sleep(1000); - console.log("Task2 doing work."); - } - //throw Error("Ded Hello.") - } -} - -const network = new Network(); - -async function main() { - network.task1(); - network.task2(); -} - -main();