diff --git a/app/pages/PageEnigma/js/api_manager.ts b/app/pages/PageEnigma/js/api_manager.ts index 4fd15b2452..e999caf033 100644 --- a/app/pages/PageEnigma/js/api_manager.ts +++ b/app/pages/PageEnigma/js/api_manager.ts @@ -1,5 +1,4 @@ import { v4 as uuidv4 } from "uuid"; -import { Scene } from "../datastructures/scene/scene_object"; import * as THREE from "three"; import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; @@ -13,11 +12,11 @@ import { TimelineDataState } from "./timeline"; /** * This is designed to surface user customer facing messages as errors. */ -type Tokens = { [key: string]: string }; +type Data = { [key: string]: string }; class APIManagerResponseSuccess { public user_message:String - public data:Tokens | null - constructor(user_message:String = "", data:Tokens | null = null) { + public data:Data | null + constructor(user_message:String = "", data:Data | null = null) { this.data = data this.user_message = user_message } diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 749cf8bec7..29d5239367 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -12,16 +12,13 @@ import { SAOPass } from "three/addons/postprocessing/SAOPass.js"; import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"; import { BokehPass } from "three/addons/postprocessing/BokehPass.js"; import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg"; - import AudioEngine from "./audio_engine.js"; import TransformEngine from "./transform_engine.js"; import { TimeLine, TimelineDataState } from "./timeline.js"; import { ClipUI } from "../datastructures/clips/clip_offset.js"; - import { LipSyncEngine } from "./lip_sync_engine.js"; import { AnimationEngine } from "./animation_engine.js"; -import { Context } from "react"; - +import { ACTION_TYPES } from "../reducer"; class EditorState { // { @@ -80,24 +77,23 @@ class Editor { animation_engine: AnimationEngine; timeline: TimeLine; current_frame: number; - test_scene_load_media_id: string; - scene_file_token: any; + + renderPass: RenderPass | undefined; - current_scene_token: string | null; + current_scene_media_token_id: string | null; can_initialize: boolean; - dispatchAppUiState: any; // todo figure out the type // Default params. constructor() { console.log( "If you see this message twice! then it rendered twice, if you see it once it's all good.", ); - // Special fix + + // Special async react lifecycle fix // For making sure the editor only gets created onece. this.can_initialize = false; let one_element = document.getElementById("created-one-element"); - //if (one_element != null) { return; } this.can_initialize = true; let newElement = document.createElement("div"); newElement.id = "created-one-element"; @@ -105,7 +101,7 @@ class Editor { // life cycle fix // Version and name. - this.version = 0.1; + this.version = 1.0; // Clock, scene and camera essentials. this.activeScene = new Scene("" + this.version); this.activeScene.initialize(); @@ -162,17 +158,10 @@ class Editor { ); this.current_frame = 0; - - this.test_scene_load_media_id = ""; // Test media id for saving and loading. - - this.current_scene_token = null; - - + this.current_scene_media_token_id = null; this.dispatchAppUiState = null; } - // Initializes the main scene and ThreeJS essentials. - initialize(config:any) { if (this.can_initialize == false) { console.log( @@ -224,20 +213,21 @@ class Editor { this._test_demo(); // saving state of the scene - this.current_scene_token = null; - + this.current_scene_media_token_id = null; //setup reactland Callbacks this.dispatchAppUiState = config.dispatchAppUiState } // Token comes in from the front end to load the scene from the site. public async loadScene(scene_token: string) { + if (scene_token != null) { - this.current_scene_token = scene_token; + this.current_scene_media_token_id = scene_token; } const scene = await this.api_manager.loadSceneState( - this.current_scene_token, + this.current_scene_media_token_id, ); + this.activeScene.scene.children = scene.children; this.activeScene.scene.children.forEach((child: THREE.Object3D) => { @@ -255,23 +245,25 @@ class Editor { } public async saveScene(name: string) { - const result = await this.api_manager.saveSceneState( - this.activeScene.scene, - name, - this.scene_file_token, - new TimelineDataState(), - ); - this.dispatchAppUiState({ type: ACTION_TYPES.SHOW_EDITOR_LOADER }); - setInterval(()=> { - this.dispatchAppUiState({ - type: ACTION_TYPES.HIDE_EDITOR_LOADER - }); - },4000) - // dispatch call wil's engine. + const result = await this.api_manager.saveSceneState( + this.activeScene.scene, + name, + this.current_scene_media_token_id, + new TimelineDataState(), + ) + + const scene_media_token_id = result.data["scene_media_token_id"] + if (scene_media_token_id != null) { + this.current_scene_media_token_id = scene_media_token_id + } + + this.dispatchAppUiState({ + type: ACTION_TYPES.HIDE_EDITOR_LOADER + }); } // uploading some objects for testing to get their media ids from my account.