Some delete code

app/pages/PageEnigma/PageEnigma.tsx

@@ -3,12 +3,6 @@ import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackPro
 import { AppUIProvider } from "~/pages/PageEnigma/contexts/AppUiContext";
 import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider";
 import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent";
-// import { toast, ToastBar, Toaster } from "react-hot-toast";
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import {
-//   faTriangleExclamation,
-//   faXmark,
-// } from "@fortawesome/pro-solid-svg-icons";
 import { useEffect } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 import {
@@ -42,52 +36,6 @@ export const PageEnigma = () => {
     <TrackProvider>
       <AppUIProvider>
         <EngineProvider>
-          {/* <Toaster
-            position="top-right"
-            toastOptions={{
-              style: {
-                border: "1px solid #39394D",
-                backgroundColor: "#39394D",
-              },
-            }}
-            containerStyle={{
-              top: 84,
-              right: 20,
-            }}
-          >
-            {(thisToast) => (
-              <ToastBar toast={thisToast}>
-                {({ message }) => {
-                  return (
-                    <div className="mr-3 flex justify-between rounded-lg">
-                      <div>
-                        {thisToast.type === "error" && (
-                          <div className="ml-3 flex items-center gap-4">
-                            <FontAwesomeIcon
-                              icon={faTriangleExclamation}
-                              className="text-keyframe-selected"
-                            />
-                            <div className="text-base font-bold text-white">
-                              Warning!
-                            </div>
-                          </div>
-                        )}
-                        <div className="text-left text-sm text-white opacity-50">
-                          {message}
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => toast.dismiss(thisToast.id)}
-                        className="text-sm font-bold text-white opacity-50"
-                      >
-                        <FontAwesomeIcon icon={faXmark} />
-                      </button>
-                    </div>
-                  );
-                }}
-              </ToastBar>
-            )}
-          </Toaster> */}
           <PageEnigmaComponent />
         </EngineProvider>
       </AppUIProvider>

app/pages/PageEnigma/Queue/fromEngineActions.ts

@@ -1,6 +1,7 @@
 export enum fromEngineActions {
   UPDATE_TIME = "update_time",
   UPDATE_TIME_LINE = "update_timeline",
-  UPDATE_CHARACTER_ID = "update_character_id",
   // data={currentTime: number}
+  UPDATE_CHARACTER_ID = "update_character_id",
+  DELETE_OBJECT = "delete_object",
 }

app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -2,11 +2,14 @@ import { useContext, useState } from "react";
 import { Button, Input } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
 import { EngineContext } from "../../contexts/EngineContext";
+import { ToasterContext } from "~/pages/PageEnigma/contexts/ToasterContext";
+import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 
 export const ControlsTopButtons = () => {
   const editorEngine = useContext(EngineContext);
   const [sceneName, setSceneName] = useState<string>("");
   const [sceneToken, setSceneToken] = useState<string>("");
+  const { addToast } = useContext(ToasterContext);
 
   // for testing
   const [mediaToken, setMediaToken] = useState<string>("");
@@ -22,7 +25,9 @@ export const ControlsTopButtons = () => {
 
   const handleButtonLoadScene = () => {
     console.log(`Scene Token is ${sceneToken}`);
-    editorEngine?.loadScene(sceneToken);
+    editorEngine?.loadScene(sceneToken).catch((err) => {
+      addToast("error", err.message);
+    });
   };
 
   const handleButtonTest = () => {};

app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts

@@ -37,7 +37,8 @@ const LOADING_FUNCTIONS: Record<ClipGroup, (item: ClipUI) => void> = {
 
 export function useQueueHandler() {
   useSignals();
-  const { addKeyframe, clearExistingData } = useContext(TrackContext);
+  const { addKeyframe, clearExistingData, deleteObjectOrCharacter } =
+    useContext(TrackContext);
 
   const handleFromEngineActions = useCallback(({ action, data }: Arguments) => {
     console.log("FROM ENGINE", action, data);
@@ -55,6 +56,11 @@ export function useQueueHandler() {
         addNewCharacter(data as MediaItem);
         break;
       }
+      case fromEngineActions.DELETE_OBJECT: {
+        // this could be an object or character
+        deleteObjectOrCharacter(data as MediaItem);
+        break;
+      }
       default:
         throw new Error(`Unknown action ${action}`);
     }

app/pages/PageEnigma/contexts/EngineProvider.tsx

@@ -4,7 +4,6 @@ import Editor from "~/pages/PageEnigma/js/editor";
 
 import { EngineContext } from "./EngineContext";
 import { AppUiContext } from "./AppUiContext";
-import { TrackContext } from "./TrackContext/TrackContext";
 
 interface Props {
   children: ReactNode;
@@ -14,7 +13,6 @@ export const EngineProvider = ({ children }: Props) => {
   const [editor, setEditor] = useState<Editor | null>(null);
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   // To talk to react land.
-  const trackContext = useContext(TrackContext)
 
   useEffect(() => {
     //componentDidMount
@@ -22,30 +20,28 @@ export const EngineProvider = ({ children }: Props) => {
       console.error(
         'Editor Engine need a target canvas with the id "video-scene"',
       );
-    } else { 
-      setEditor((curr)=>{
-        if(curr!==null){
+    } else {
+      setEditor((curr) => {
+        if (curr !== null) {
           console.warn("Editor Engine already exist");
           return curr;
-        }else{
+        } else {
           return new Editor();
         }
       });
     }
   }, []);
 
-  useEffect(()=>{
-    if (editor && editor.can_initialize && dispatchAppUiState!==null){
+  useEffect(() => {
+    if (editor && editor.can_initialize && dispatchAppUiState !== null) {
       console.log("initializing Editor");
       editor.initialize({
-        dispatchAppUiState
+        dispatchAppUiState,
       });
     }
   }, [editor, dispatchAppUiState]);
 
   return (
-    <EngineContext.Provider value={editor}>
-      {children}
-    </EngineContext.Provider>
+    <EngineContext.Provider value={editor}>{children}</EngineContext.Provider>
   );
 };

app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx

@@ -5,6 +5,7 @@ export const TrackContext = createContext<{
   // keyframes
   addKeyframe: (keyframe: QueueKeyframe, offset: number) => void;
   deleteKeyframe: (keyframe: Keyframe) => void;
+  deleteObjectOrCharacter: (item: MediaItem) => void;
 
   // misc
   clearExistingData: () => void;
@@ -15,6 +16,7 @@ export const TrackContext = createContext<{
 }>({
   addKeyframe: () => {},
   deleteKeyframe: () => {},
+  deleteObjectOrCharacter: () => {},
 
   clearExistingData: () => {},
 

app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx

@@ -1,6 +1,6 @@
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { ReactNode, useCallback, useMemo } from "react";
-import { AssetType } from "~/pages/PageEnigma/models";
+import { AssetType, MediaItem } from "~/pages/PageEnigma/models";
 import useUpdateDragDrop from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop";
 import {
   addCharacterAnimation,
@@ -16,8 +16,11 @@ import {
   cameraGroup,
   audioGroup,
   objectGroup,
+  deleteCharacter,
+  currPosition,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
+import { deleteObject } from "~/pages/PageEnigma/store/objectGroup/deleteObject";
 
 interface Props {
   children: ReactNode;
@@ -88,16 +91,28 @@ export const TrackProvider = ({ children }: Props) => {
     };
   }, []);
 
+  const deleteObjectOrCharacter = useCallback((item: MediaItem) => {
+    deleteCharacter(item);
+    deleteObject(item);
+  }, []);
+
   const values = useMemo(() => {
     return {
       ...keyframes,
 
       clearExistingData,
+      deleteObjectOrCharacter,
 
       ...dragDrop,
       endDrag: dropClip,
     };
-  }, [keyframes, dragDrop, dropClip, clearExistingData]);
+  }, [
+    keyframes,
+    dragDrop,
+    dropClip,
+    clearExistingData,
+    deleteObjectOrCharacter,
+  ]);
 
   return (
     <TrackContext.Provider value={values}>{children}</TrackContext.Provider>

app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts

@@ -1,5 +1,10 @@
 import { useCallback, useContext } from "react";
-import { ClipGroup, QueueKeyframe, Keyframe } from "~/pages/PageEnigma/models";
+import {
+  ClipGroup,
+  QueueKeyframe,
+  Keyframe,
+  MediaItem,
+} from "~/pages/PageEnigma/models";
 import {
   addCameraKeyframe,
   addCharacterKeyframe,

app/pages/PageEnigma/js/api_manager.ts

@@ -119,7 +119,7 @@ export class APIManager {
     //  scene_media_file_token: result_scene_media_file_token,
     //};
 
-    return upload_glb_response['media_file_token'];
+    return upload_glb_response["media_file_token"];
   }
 
   public async loadSceneState(
@@ -128,6 +128,10 @@ export class APIManager {
     const api_base_url = "https://api.fakeyou.com";
     const url = `${api_base_url}/v1/media_files/file/${scene_media_file_token}`;
     const response = await fetch(url);
+    if (response.status > 200) {
+      throw new APIManagerResponseError("Failed to load scene");
+    }
+
     const json = await JSON.parse(await response.text());
     const bucket_path = json["media_file"]["public_bucket_path"];
     const media_base_url = "https://storage.googleapis.com/vocodes-public";
@@ -198,7 +202,7 @@ export class APIManager {
     return media_url;
   }
 
-  /** 
+  /**
     This will save the scene to keep ids positions.
     It will also give the file a name which will be a uuidv4()
     @param scene The 3JS Scene we want to make a file to be uploaded as multipart form.

app/pages/PageEnigma/js/editor.ts

@@ -27,7 +27,10 @@ import { ClipGroup } from "~/pages/PageEnigma/models/track";
 import { XYZ } from "../datastructures/common";
 import { StoryTellerProxyScene } from "../proxy/storyteller_proxy_scene";
 import { StoryTellerProxyTimeline } from "../proxy/storyteller_proxy_timeline";
-
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
+import { AssetType, MediaItem } from "~/pages/PageEnigma/models";
 
 // Main editor class that will call everything else all you need to call is " initialize() ".
 class Editor {
@@ -202,8 +205,10 @@ class Editor {
     this.negative_prompt = "";
     this.art_style = ArtStyle.Anime2DFlat;
 
-
-    this.storyteller_proxy_scene = new StoryTellerProxyScene(this.version, this.activeScene.scene)
+    this.storyteller_proxy_scene = new StoryTellerProxyScene(
+      this.version,
+      this.activeScene.scene,
+    );
   }
 
   initialize(config: any) {
@@ -353,7 +358,7 @@ class Editor {
     console.log(result);
   }
 
-  public async testTestTimelineEvents() { }
+  public async testTestTimelineEvents() {}
 
   public async loadScene(scene_media_token: string) {
     this.dispatchAppUiState({
@@ -362,18 +367,31 @@ class Editor {
 
     this.current_scene_media_token = scene_media_token;
 
-    const scene_json = await this.api_manager.loadSceneState(
-      this.current_scene_media_token,
-    );
+    const scene_json = await this.api_manager
+      .loadSceneState(this.current_scene_media_token)
+      .catch((err) => {
+        this.dispatchAppUiState({
+          type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER,
+        });
+        throw err;
+      });
 
-    let proxyScene = new StoryTellerProxyScene(this.version, this.activeScene);
-    await proxyScene.loadFromSceneJson(scene_json['scene']);
+    const proxyScene = new StoryTellerProxyScene(
+      this.version,
+      this.activeScene,
+    );
+    await proxyScene.loadFromSceneJson(scene_json["scene"]);
     this.cam_obj = this.activeScene.get_object_by_name("::CAM::");
 
-    let proxyTimeline = new StoryTellerProxyTimeline(this.version, this.timeline, this.transform_engine, this.animation_engine, this.audio_engine, this.lipsync_engine);
-    await proxyTimeline.loadFromJson(scene_json['timeline']);
-
-  
+    const proxyTimeline = new StoryTellerProxyTimeline(
+      this.version,
+      this.timeline,
+      this.transform_engine,
+      this.animation_engine,
+      this.audio_engine,
+      this.lipsync_engine,
+    );
+    await proxyTimeline.loadFromJson(scene_json["timeline"]);
 
     this.dispatchAppUiState({
       type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER,
@@ -383,23 +401,21 @@ class Editor {
   // TO UPDATE selected objects in the scene might want to add to the scene ...
   async setSelectedObject(position: XYZ, rotation: XYZ, scale: XYZ) {
     if (this.selected != undefined || this.selected != null) {
-      //console.log(`triggering setSelectedObject`) 
-      this.selected.position.x = position.x
-      this.selected.position.y = position.y
-      this.selected.position.z = position.z
+      //console.log(`triggering setSelectedObject`)
+      this.selected.position.x = position.x;
+      this.selected.position.y = position.y;
+      this.selected.position.z = position.z;
 
-      this.selected.rotation.x = rotation.x
-      this.selected.rotation.y = rotation.y
-      this.selected.rotation.z = rotation.z
-
-      this.selected.scale.x = scale.x
-      this.selected.scale.y = scale.y
-      this.selected.scale.z = scale.z
+      this.selected.rotation.x = rotation.x;
+      this.selected.rotation.y = rotation.y;
+      this.selected.rotation.z = rotation.z;
 
+      this.selected.scale.x = scale.x;
+      this.selected.scale.y = scale.y;
+      this.selected.scale.z = scale.z;
     }
   }
 
-
   public async saveScene(name: string) {
     // remove controls when saving scene.
     this.removeTransformControls();
@@ -407,13 +423,23 @@ class Editor {
       type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER,
     });
 
-    let proxyScene = new StoryTellerProxyScene(this.version, this.activeScene);
-    let scene_json = await proxyScene.saveToScene();
+    const proxyScene = new StoryTellerProxyScene(
+      this.version,
+      this.activeScene,
+    );
+    const scene_json = await proxyScene.saveToScene();
 
-    let proxyTimeline = new StoryTellerProxyTimeline(this.version, this.timeline, this.transform_engine, this.animation_engine, this.audio_engine, this.lipsync_engine);
-    let timeline_json = await proxyTimeline.saveToJson();
+    const proxyTimeline = new StoryTellerProxyTimeline(
+      this.version,
+      this.timeline,
+      this.transform_engine,
+      this.animation_engine,
+      this.audio_engine,
+      this.lipsync_engine,
+    );
+    const timeline_json = await proxyTimeline.saveToJson();
 
-    let save_data = { scene: scene_json, timeline: timeline_json };
+    const save_data = { scene: scene_json, timeline: timeline_json };
 
     // TODO turn scene information into and object ...
     const result = await this.api_manager.saveSceneState(
@@ -455,7 +481,6 @@ class Editor {
     console.log(this.camera_person_mode);
     if (this.cam_obj) {
       if (this.camera_person_mode) {
-
         this.last_cam_pos.copy(this.camera.position);
         this.last_cam_rot.copy(this.camera.rotation);
 
@@ -475,7 +500,9 @@ class Editor {
 
         this.removeTransformControls();
         this.selected = this.cam_obj;
-        this.dispatchAppUiState({ type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT });
+        this.dispatchAppUiState({
+          type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
+        });
         this.updateSelectedUI();
       } else {
         this.camera.position.copy(this.last_cam_pos);
@@ -517,7 +544,7 @@ class Editor {
     object.uuid = "CH1";
 
     // Stick Open Pose Man: m_9f3d3z94kk6m25zywyz6an3p43fjtw
-    // XBot: m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d 
+    // XBot: m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d
     // YBot: m_9sqg0evpr23587jnr8z3zsvav1x077
     // Shrek: m_fmxy8wjnep1hdaz7qdg4n7y15d2bsp
   }
@@ -587,14 +614,27 @@ class Editor {
   }
 
   deleteObject(uuid: string) {
-    let obj = this.activeScene.get_object_by_uuid(uuid);
+    const obj = this.activeScene.get_object_by_uuid(uuid);
     if (obj) {
       this.activeScene.scene.remove(obj);
     }
     this.removeTransformControls();
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.DELETE_OBJECT,
+      data: {
+        version: 1,
+        type: AssetType.OBJECT,
+        media_id: "",
+        object_uuid: this.selected?.uuid,
+        name: "",
+      } as MediaItem,
+    });
     this.selected = undefined;
-    this.dispatchAppUiState({ type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT });
-    this.timeline.deleteObject(uuid)
+    this.dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT,
+    });
+    this.timeline.deleteObject(uuid);
   }
 
   create_parim(name: string) {
@@ -674,10 +714,8 @@ class Editor {
         const min = new THREE.Vector3(-12, -1, -12);
         const max = new THREE.Vector3(12, 24, 12);
         this.camera.position.copy(this.camera.position.clamp(min, max));
-
       }
-    }
-    else if (this.cam_obj) {
+    } else if (this.cam_obj) {
       this.cam_obj.visible = true;
     }
 
@@ -689,8 +727,7 @@ class Editor {
 
     if (this.timeline.is_playing) {
       await this.timeline.update(this.rendering);
-    }
-    else if (this.last_scrub == this.timeline.scrubber_frame_position) {
+    } else if (this.last_scrub == this.timeline.scrubber_frame_position) {
       this.updateSelectedUI();
     }
 
@@ -757,10 +794,10 @@ class Editor {
       audioSegment,
       "-filter_complex",
       "[1:a]adelay=" +
-      startTime * 1000 +
-      "|" +
-      startTime * 1000 +
-      "[a1];[0:a][a1]amix=inputs=2[a]",
+        startTime * 1000 +
+        "|" +
+        startTime * 1000 +
+        "[a1];[0:a][a1]amix=inputs=2[a]",
       "-map",
       "[a]",
       `${itteration}final_tmp.wav`,
@@ -790,7 +827,9 @@ class Editor {
 
     this.renderMode();
 
-    if (this.generating_preview) { return; }
+    if (this.generating_preview) {
+      return;
+    }
     this.generating_preview = true;
     const ffmpeg = createFFmpeg({ log: true });
     await ffmpeg.load();
@@ -845,10 +884,12 @@ class Editor {
     const blob = new Blob([output.buffer], { type: "video/mp4" });
 
     const data: any = await this.api_manager.uploadMedia(blob, "render.mp4");
-    console.log("data", data)
+    console.log("data", data);
 
-    if (data == null) { return; }
-    let upload_token = data['media_file_token'];
+    if (data == null) {
+      return;
+    }
+    const upload_token = data["media_file_token"];
     console.log(upload_token);
     // Create a link to download the file stylize video using api ..
     //{"success":true,"upload_token":"mu_x9kr5cfafn512pjbygdszvbdpktrr"} payload
@@ -868,7 +909,6 @@ class Editor {
     // {"success":true,"inference_job_token":"jinf_j3nbqbd15wqxb0xcks13qh3f3bz"}
 
     console.log(result);
-
   }
 
   async generateFrame() {
@@ -970,7 +1010,6 @@ class Editor {
   }
 
   updateSelectedUI() {
-
     if (this.selected == undefined) {
       return;
     }
@@ -1008,7 +1047,6 @@ class Editor {
         },
       },
     });
-
   }
 
   // Automaticly resize scene.
@@ -1078,7 +1116,11 @@ class Editor {
     this.activeScene.scene.children.forEach((child: THREE.Object3D) => {
       // console.log(child);
       if (child.name != "") {
-        if (child.type == "Mesh" || child.type == "Object3D" || child.type == "Group") {
+        if (
+          child.type == "Mesh" ||
+          child.type == "Object3D" ||
+          child.type == "Group"
+        ) {
           interactable.push(child);
         }
       }
@@ -1092,7 +1134,7 @@ class Editor {
           currentObject = currentObject.parent;
         }
         this.selected = currentObject;
-        // Show panel here 
+        // Show panel here
 
         if (this.selected.type == "Scene") {
           this.selected = intersects[0].object;
@@ -1106,7 +1148,9 @@ class Editor {
         this.transform_interaction = true;
 
         // Contact react land
-        this.dispatchAppUiState({ type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT });
+        this.dispatchAppUiState({
+          type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
+        });
         this.updateSelectedUI();
       }
     } else if (this.transform_interaction == false) {

app/pages/PageEnigma/store/characterGroups/deleteCharacter.ts

@@ -0,0 +1,8 @@
+import { MediaItem } from "~/pages/PageEnigma/models";
+import { characterGroups } from "~/pages/PageEnigma/store";
+
+export function deleteCharacter(item: MediaItem) {
+  characterGroups.value = characterGroups.value.filter(
+    (character) => character.id !== item.object_uuid,
+  );
+}

app/pages/PageEnigma/store/characterGroups/index.ts

@@ -1,4 +1,5 @@
 export * from "./addCharacter";
 export * from "./characterGroups";
+export * from "./deleteCharacter";
 export * from "./loadCharacterData";
 export * from "./updateCharacters";

app/pages/PageEnigma/store/objectGroup/deleteObject.ts

@@ -0,0 +1,11 @@
+import { MediaItem } from "~/pages/PageEnigma/models";
+import { objectGroup } from "~/pages/PageEnigma/store";
+
+export function deleteObject(item: MediaItem) {
+  objectGroup.value = {
+    ...objectGroup.value,
+    objects: objectGroup.value.objects.filter(
+      (obj) => obj.object_uuid !== item.object_uuid,
+    ),
+  };
+}