From 573b649906c23cadb449c88ed2eb56f24f9581f0 Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:41:19 -0400
Subject: [PATCH 1/4] move shapes, fix delete bug

---
 app/components/InputVector.tsx                |   7 +
 app/components/Textarea.tsx                   |  21 +-
 app/pages/PageEnigma/PageEnigma.tsx           |   2 +-
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |   8 +-
 app/pages/PageEnigma/Queue/toEngineActions.ts |   2 +
 .../ControlPanelSceneObject.tsx               |  17 +-
 .../comps/Controls3D/Controls3D.tsx           |  33 -
 .../comps/SidePanelTabs/TabStylization.tsx    |   1 +
 .../PageEnigma/comps/Timeline/Timeline.tsx    |   4 +
 .../contexts/TrackContext/TrackProvider.tsx   |   7 +-
 app/pages/PageEnigma/js/editor.ts             |  30 +-
 app/pages/PageEnigma/js/timeline.ts           | 973 ++++++++++--------
 app/pages/PageEnigma/store/index.ts           |   1 +
 app/pages/PageEnigma/store/media.ts           |  30 +-
 app/pages/PageEnigma/store/selectedItem.ts    |   2 +
 app/pages/PageEnigma/store/shape.ts           |  12 +
 16 files changed, 626 insertions(+), 524 deletions(-)
 create mode 100644 app/pages/PageEnigma/store/shape.ts

diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index 0a10274524..3c4d3c5a17 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -1,5 +1,6 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
+import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 interface InputVectorProps {
   x: number;
@@ -41,6 +42,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={xRef}
           value={x}
+          onFocus={() => (ignoreDelete.value = true)}
+          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -55,6 +58,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={yRef}
           value={y}
+          onFocus={() => (ignoreDelete.value = true)}
+          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -69,6 +74,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={zRef}
           value={z}
+          onFocus={() => (ignoreDelete.value = true)}
+          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
     </div>
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index 278b54a7cb..cc35c75ac2 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -2,6 +2,7 @@ import { TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Label } from "./Typography";
 import { kebabCase } from "~/utilities";
+import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 type ResizeType =
   | "none"
@@ -24,14 +25,10 @@ export const Textarea = ({
 }) => {
   return (
     <div className="flex flex-col">
-      {label && 
-        <Label htmlFor={id ? id : kebabCase(label)}>
-          {label}
-        </Label>
-      }
-      
+      {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}
+
       <textarea
-        id={id ? id : (label ? kebabCase(label) : undefined)}
+        id={id ? id : label ? kebabCase(label) : undefined}
         className={twMerge(
           "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
           className,
@@ -41,8 +38,14 @@ export const Textarea = ({
           transition: "outline-color 0.15s ease-in-out",
           resize: resize,
         }}
-        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
-        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
+        onFocus={(e) => {
+          ignoreDelete.value = true;
+          e.currentTarget.style.outlineColor = "#e66462";
+        }}
+        onBlur={(e) => {
+          ignoreDelete.value = false;
+          e.currentTarget.style.outlineColor = "transparent";
+        }}
         {...rest}
       />
     </div>
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index afd78326cc..613becceb5 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -18,7 +18,7 @@ export const PageEnigma = () => {
     function setPage() {
       // TODO address this issue with zooming
       pageHeight.value = window.innerHeight;
-      pageWidth.value = window.outerWidth;
+      pageWidth.value = window.innerWidth;
     }
     timelineHeight.value = window.innerHeight * 0.25;
     sidePanelWidth.value = 443;
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index d875fe506b..e635b36557 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -101,7 +101,13 @@ export const PageEnigmaComponent = () => {
 
               {/* Bottom controls */}
               <div
-                className="absolute bottom-0 left-0 w-full"
+                className="absolute bottom-0 left-0"
+                style={{
+                  width:
+                    pageWidth.value -
+                    (sidePanelVisible.value ? sidePanelWidth.value : 0) -
+                    84,
+                }}
                 onClick={handleOverlayClick}
               >
                 <PreviewEngineCamera />
diff --git a/app/pages/PageEnigma/Queue/toEngineActions.ts b/app/pages/PageEnigma/Queue/toEngineActions.ts
index 4be8244918..3a1e828a00 100644
--- a/app/pages/PageEnigma/Queue/toEngineActions.ts
+++ b/app/pages/PageEnigma/Queue/toEngineActions.ts
@@ -7,6 +7,8 @@ export enum toEngineActions {
 
   ADD_OBJECT = "add_object",
 
+  ADD_SHAPE = "add_shape",
+
   // data= QueueKeyframe
   DELETE_CLIP = "delete_clip",
   // data=QueueClip
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 8242f70de6..d736eb492b 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -132,15 +132,14 @@ export const ControlPanelSceneObject = () => {
         return;
       }
 
-      for (let key in editorEngine?.timeline.characters) {
-        let element = editorEngine?.timeline.characters[key];
+      for (const key in editorEngine?.timeline.characters) {
+        const element = editorEngine?.timeline.characters[key];
         if (key == currentSceneObject.object_uuid) {
-            currentSceneObject.group = element;
-            break;
+          currentSceneObject.group = element;
+          break;
         }
       }
 
-
       Queue.publish({
         queueName: QueueNames.TO_TIMELINE,
         action: toTimelineActions.ADD_KEYFRAME,
@@ -165,7 +164,13 @@ export const ControlPanelSceneObject = () => {
   return (
     <Transition
       show={appUiState?.controlPanel.isShowing}
-      className="absolute bottom-0 right-0 m-4 flex h-fit w-fit flex-col gap-2 rounded-lg border border-ui-panel-border bg-ui-panel p-4 text-white"
+      className={[
+        "absolute bottom-0 right-0",
+        "m-4 flex h-fit w-fit flex-col gap-2",
+        "rounded-lg",
+        "border border-ui-panel-border",
+        "bg-ui-panel p-4 text-white",
+      ].join(" ")}
       enter="transition-opacity duration-100"
       enterFrom="opacity-0"
       enterTo="opacity-100"
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index 2a23a5effd..a5ad366e1f 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -20,30 +20,6 @@ export const Controls3D = () => {
   const handlePlus = () => {
     console.log("Controls 3D: Plus button clicked");
   };
-  const handleCube = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Box");
-  };
-  const handleCylinder = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Cylinder");
-  };
-  const handleTorus = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Donut");
-  };
-  const handleSphere = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Sphere");
-  };
   const handleMoveArrows = () => {
     if (!editorEngine) {
       return;
@@ -94,15 +70,6 @@ export const Controls3D = () => {
 
             <span className="h-4 w-0 border-l border-white/[0.15]" />
 
-            <div className="flex gap-1">
-              <ButtonIcon icon={faCube} onClick={handleCube} />
-              <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
-              <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
-              <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
-            </div>
-
-            <span className="h-4 w-0 border-l border-white/[0.15]" />
-
             <ButtonIconSelect
               options={modes}
               onOptionChange={handleModeChange}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index 59aa38d8b1..f2b61ed00d 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -6,6 +6,7 @@ import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers";
 import { EngineContext } from "../../contexts/EngineContext";
 import { ArtStyle } from "../../js/api_manager";
+import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 export const TabStylization = () => {
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 9779650314..dcbc98147b 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -9,6 +9,7 @@ import {
   deleteAudioClip,
   deleteCharacterClip,
   selectedItem,
+  ignoreDelete,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -39,6 +40,9 @@ export const Timeline = () => {
   }, []);
 
   const onDeleteAsk = useCallback((event: KeyboardEvent) => {
+    if (ignoreDelete.value) {
+      return;
+    }
     if (
       ["Backspace", "Delete"].indexOf(event.key) > -1 &&
       selectedItem.value !== null
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index f6138cc05b..5132e53acc 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -17,6 +17,7 @@ import {
   audioGroup,
   objectGroup,
   deleteCharacter,
+  addShape,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 import { deleteObject } from "~/pages/PageEnigma/store/objectGroup/deleteObject";
@@ -43,10 +44,10 @@ export const TrackProvider = ({ children }: Props) => {
       if (dragItem.value.type === AssetType.OBJECT) {
         addObject(dragItem.value);
       }
+      if (dragItem.value.type === AssetType.SHAPE) {
+        addShape(dragItem.value);
+      }
     }
-    // if (dragItem.value.type === AssetType.SHAPE) {
-    //   console.log("Dragged In Shape Type")
-    // }
 
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index ee7ae2c358..a33026252c 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -183,6 +183,7 @@ class Editor {
     this.animation_engine = new AnimationEngine(this.version);
 
     this.timeline = new TimeLine(
+      this,
       this.audio_engine,
       this.transform_engine,
       this.lipsync_engine,
@@ -205,12 +206,10 @@ class Editor {
     this.negative_prompt = "";
     this.art_style = ArtStyle.Anime2DFlat;
 
-
     this.storyteller_proxy_scene = new StoryTellerProxyScene(
       this.version,
       this.activeScene.scene,
     );
-
   }
 
   initialize(config: any) {
@@ -291,7 +290,7 @@ class Editor {
     );
 
     this.control = new TransformControls(this.camera, this.renderer.domElement);
-    this.control.space = 'local'; // Local transformation mode
+    this.control.space = "local"; // Local transformation mode
     // .space = 'world'; // Global mode
 
     this.control.setScaleSnap(0.1);
@@ -410,19 +409,18 @@ 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 = THREE.MathUtils.degToRad(rotation.x);
+      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y);
+      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z);
 
-      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x)
-      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y)
-      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z)
-
-      this.selected.scale.x = scale.x
-      this.selected.scale.y = scale.y
-      this.selected.scale.z = scale.z
+      this.selected.scale.x = scale.x;
+      this.selected.scale.y = scale.y;
+      this.selected.scale.z = scale.z;
     }
   }
 
@@ -552,9 +550,7 @@ class Editor {
     // const object: THREE.Object3D = await this.activeScene.load_glb(
     //   "m_4wva09qznapzk5rcvbxy671d1qx2pr",
     // );
-
     // object.uuid = "CH1";
-
     // Stick Open Pose Man: m_9f3d3z94kk6m25zywyz6an3p43fjtw
     // XBot: m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d
     // YBot: m_9sqg0evpr23587jnr8z3zsvav1x077
@@ -739,7 +735,7 @@ class Editor {
 
     if (this.timeline.is_playing) {
       const changeView = await this.timeline.update(this.rendering);
-      if(changeView) {
+      if (changeView) {
         this.switchCameraView();
       }
     } else if (this.last_scrub == this.timeline.scrubber_frame_position) {
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 0cbd81c84d..5e0ce1f103 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -12,489 +12,562 @@ import { QueueNames } from "../Queue/QueueNames";
 import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
+import { MediaItem } from "~/pages/PageEnigma/models";
+import Editor from "~/pages/PageEnigma/js/editor";
 
 // Every object uuid / entity has a track.
 export class TimelineDataState {
-    timeline_items: ClipUI[];
-    scrubber_frame_position: number;
-    constructor(
-        timeline_items: ClipUI[] = [],
-        scrubber_frame_position: number = 0,
-    ) {
-        this.timeline_items = timeline_items;
-        this.scrubber_frame_position = scrubber_frame_position;
-    }
+  timeline_items: ClipUI[];
+  scrubber_frame_position: number;
+  constructor(
+    timeline_items: ClipUI[] = [],
+    scrubber_frame_position: number = 0,
+  ) {
+    this.timeline_items = timeline_items;
+    this.scrubber_frame_position = scrubber_frame_position;
+  }
 }
 
 export class TimeLine {
-    timeline_items: ClipUI[];
+  editorEngine: Editor;
+  timeline_items: ClipUI[];
 
-    timeline_limit: number;
-    absolute_end: number;
-    scrubber_frame_position: number;
-    is_playing: boolean;
+  timeline_limit: number;
+  absolute_end: number;
+  scrubber_frame_position: number;
+  is_playing: boolean;
 
-    // plays audio
-    audio_engine: AudioEngine;
-    // key framing
-    transform_engine: TransformEngine;
-    // animation engine
-    animation_engine: AnimationEngine;
-    // lip sync engine
-    lipSync_engine: LipSyncEngine;
-    characters: { [key: string]: ClipGroup };
+  // plays audio
+  audio_engine: AudioEngine;
+  // key framing
+  transform_engine: TransformEngine;
+  // animation engine
+  animation_engine: AnimationEngine;
+  // lip sync engine
+  lipSync_engine: LipSyncEngine;
+  characters: { [key: string]: ClipGroup };
 
-    scene: Scene;
+  scene: Scene;
 
-    current_time: number;
+  current_time: number;
 
-    // ensure that the elements are loaded first.
-    constructor(
-        audio_engine: AudioEngine,
-        transform_engine: TransformEngine,
-        lipsync_engine: LipSyncEngine,
-        animation_engine: AnimationEngine,
-        scene: Scene,
-    ) {
-        this.timeline_items = [];
-        this.characters = {};
-        this.absolute_end = 60 * 12;
-        this.timeline_limit = 0; // 5 seconds
+  // ensure that the elements are loaded first.
+  constructor(
+    editor: Editor,
+    audio_engine: AudioEngine,
+    transform_engine: TransformEngine,
+    lipsync_engine: LipSyncEngine,
+    animation_engine: AnimationEngine,
+    scene: Scene,
+  ) {
+    this.editorEngine = editor;
+    this.timeline_items = [];
+    this.characters = {};
+    this.absolute_end = 60 * 12;
+    this.timeline_limit = 0; // 5 seconds
 
-        this.is_playing = false;
-        this.scrubber_frame_position = 0; // in frames into the tl
+    this.is_playing = false;
+    this.scrubber_frame_position = 0; // in frames into the tl
 
-        // this will be used to play the audio clips
-        this.audio_engine = audio_engine;
-        this.transform_engine = transform_engine;
-        this.lipSync_engine = lipsync_engine;
-        this.animation_engine = animation_engine;
+    // this will be used to play the audio clips
+    this.audio_engine = audio_engine;
+    this.transform_engine = transform_engine;
+    this.lipSync_engine = lipsync_engine;
+    this.animation_engine = animation_engine;
 
-        this.scene = scene;
+    this.scene = scene;
 
-        Queue.subscribe(
-            QueueNames.TO_ENGINE,
-            this.handleTimelineActions.bind(this),
-        );
+    Queue.subscribe(
+      QueueNames.TO_ENGINE,
+      this.handleTimelineActions.bind(this),
+    );
 
-        this.current_time = 0;
+    this.current_time = 0;
+  }
+
+  public async updateUI() {
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.UPDATE_TIME_LINE,
+      data: this.timeline_items,
+    });
+  }
+
+  public async pushEvent(action: fromEngineActions, data: any) {
+    this.current_time += 1;
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.UPDATE_TIME,
+      data: data,
+    });
+  }
+
+  public async handleTimelineActions(data: any) {
+    const action = data["action"];
+    switch (action) {
+      case toEngineActions.ADD_KEYFRAME:
+        await this.addKeyFrame(data);
+        break;
+      case toEngineActions.UPDATE_KEYFRAME:
+        await this.updateKeyFrame(data);
+        break;
+      case toEngineActions.DELETE_KEYFRAME:
+        await this.deleteKeyFrame(data);
+        break;
+      case toEngineActions.ADD_CLIP:
+        await this.addClip(data);
+        break;
+      case toEngineActions.DELETE_CLIP:
+        await this.deleteClip(data);
+        break;
+      case toEngineActions.UPDATE_CLIP:
+        await this.updateClip(data);
+        break;
+      case toEngineActions.UPDATE_TIME:
+        await this.scrub(data);
+        break;
+      case toEngineActions.MUTE:
+        await this.mute(data, false);
+        break;
+      case toEngineActions.UNMUTE:
+        await this.mute(data, true);
+        break;
+      case toEngineActions.ADD_CHARACTER:
+        await this.addCharacter(data);
+        break;
+      case toEngineActions.ADD_OBJECT:
+        await this.addObject(data);
+        break;
+      case toEngineActions.ADD_SHAPE:
+        await this.addShape(data);
+        break;
+      default:
+        console.log("Action Not Wired", action);
+    }
+  }
+
+  public async addCharacter(data: { data: MediaItem }) {
+    const media_id = data.data.media_id;
+    const name = data.data.name;
+
+    const obj = await this.scene.load_glb(media_id);
+    obj.userData["name"] = name;
+    obj.name = name;
+    const object_uuid = obj.uuid;
+
+    this.characters[object_uuid] = ClipGroup.CHARACTER;
+
+    data.data["object_uuid"] = object_uuid;
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.UPDATE_CHARACTER_ID,
+      data: data.data,
+    });
+
+    this.addPlayableClip(
+      new ClipUI(
+        data.data["version"],
+        ClipType.FAKE,
+        ClipGroup.CHARACTER,
+        "Default",
+        media_id,
+        obj.uuid,
+        obj.uuid,
+        name,
+        0,
+        0,
+        0,
+      ),
+    );
+  }
+
+  public async addObject(data: { data: MediaItem }) {
+    const media_id = data.data.media_id;
+    const name = data.data.name;
+    const obj = await this.scene.load_glb(media_id);
+    obj.userData["name"] = name;
+    obj.name = name;
+  }
+
+  public async addShape({ data }: { data: MediaItem }) {
+    this.editorEngine.create_parim(data.media_id);
+  }
+
+  public async addKeyFrame(data: any) {
+    // KeyFrame Object
+    // version: number;
+    // clip_uuid: string;
+    // group: ClipGroup;
+    // object_uuid?: string;
+    // offset: number;
+    // position: XYZ
+    // rotation: XYZ;
+    // scale: XYZ;
+    // selected?: boolean;
+    const data_json = data["data"];
+    const uuid = data_json["object_uuid"];
+    const keyframe_uuid = data_json["keyframe_uuid"];
+
+    let object_name = this.scene.get_object_by_uuid(uuid)?.name;
+    if (object_name === undefined) {
+      object_name = "undefined";
     }
 
-    public async updateUI() {
-        Queue.publish({
-            queueName: QueueNames.FROM_ENGINE,
-            action: fromEngineActions.UPDATE_TIME_LINE,
-            data: this.timeline_items,
-        });
+    const new_item = this.transform_engine.addFrame(
+      uuid,
+      this.absolute_end,
+      data_json["position"],
+      data_json["rotation"],
+      data_json["scale"],
+      data_json["offset"],
+      data_json["keyframe_uuid"],
+    );
+
+    await this.addPlayableClip(
+      new ClipUI(
+        data_json["version"],
+        ClipType.TRANSFORM,
+        data_json["group"],
+        object_name,
+        "",
+        keyframe_uuid,
+        uuid,
+        object_name,
+        0,
+        this.absolute_end,
+        data_json["offset"],
+      ),
+    );
+
+    this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
+  }
+
+  public deleteObject(object_uuid: string) {
+    this.timeline_items = this.timeline_items.filter(
+      (element) => element.object_uuid !== object_uuid,
+    );
+    // Update react land here.
+  }
+
+  public async addClip(data: any) {
+    const object_uuid = data["data"]["object_uuid"];
+    const media_id = data["data"]["media_id"];
+    const name = data["data"]["name"];
+    const group = data["data"]["group"];
+    const version = data["data"]["group"];
+    const type = data["data"]["type"];
+    const offset = data["data"]["offset"];
+    const end_offset = data["data"]["length"] + offset;
+    let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
+    const clip_uuid = data["data"]["clip_uuid"];
+
+    if (object_name === undefined) {
+      object_name = "Undefined.";
     }
 
-    public async pushEvent(action: fromEngineActions, data: any) {
-        this.current_time += 1;
-        Queue.publish({
-            queueName: QueueNames.FROM_ENGINE,
-            action: fromEngineActions.UPDATE_TIME,
-            data: data,
-        });
-    }
-
-    public async handleTimelineActions(data: any) {
-        const action = data["action"];
-        switch (action) {
-            case toEngineActions.ADD_KEYFRAME:
-                await this.addKeyFrame(data);
-                break;
-            case toEngineActions.UPDATE_KEYFRAME:
-                await this.updateKeyFrame(data);
-                break;
-            case toEngineActions.DELETE_KEYFRAME:
-                await this.deleteKeyFrame(data);
-                break;
-            case toEngineActions.ADD_CLIP:
-                await this.addClip(data);
-                break;
-            case toEngineActions.DELETE_CLIP:
-                await this.deleteClip(data);
-                break;
-            case toEngineActions.UPDATE_CLIP:
-                await this.updateClip(data);
-                break;
-            case toEngineActions.UPDATE_TIME:
-                await this.scrub(data);
-                break;
-            case toEngineActions.MUTE:
-                await this.mute(data, false);
-                break;
-            case toEngineActions.UNMUTE:
-                await this.mute(data, true);
-                break;
-            case toEngineActions.ADD_CHARACTER:
-                await this.addCharacter(data);
-                break;
-            case toEngineActions.ADD_OBJECT:
-                await this.addObject(data);
-                break;
-            default:
-                console.log("Action Not Wired", action);
-        }
-    }
-
-    public async addCharacter(data: any) {
-        let media_id = data.data['media_id'];
-        let name = data.data['name'];
-        let type = data.data['type'];
-
-        let obj = await this.scene.load_glb(media_id);
-        obj.userData['name'] = name;
-        obj.name = name;
-        let object_uuid = obj.uuid;
-
-        this.characters[object_uuid] = ClipGroup.CHARACTER;
-
-        data.data['object_uuid'] = object_uuid;
-        Queue.publish({
-            queueName: QueueNames.FROM_ENGINE,
-            action: fromEngineActions.UPDATE_CHARACTER_ID,
-            data: data.data,
-        });
-
-        this.addPlayableClip(new ClipUI(data.data['version'], ClipType.FAKE, ClipGroup.CHARACTER, "Default", media_id, obj.uuid, obj.uuid, name, 0, 0, 0));
-    }
-
-    public async addObject(data: any) {
-        let media_id = data.data['media_id'];
-        let name = data.data['name'];
-        let obj = await this.scene.load_glb(media_id);
-        obj.userData['name'] = name;
-        obj.name = name;
-    }
-
-    public async addKeyFrame(data: any) {
-        // KeyFrame Object
-        // version: number;
-        // clip_uuid: string;
-        // group: ClipGroup;
-        // object_uuid?: string;
-        // offset: number;
-        // position: XYZ
-        // rotation: XYZ;
-        // scale: XYZ;
-        // selected?: boolean;
-        let data_json = data['data'];
-        let uuid = data_json['object_uuid'];
-        let keyframe_uuid = data_json['keyframe_uuid'];
-
-        let object_name = this.scene.get_object_by_uuid(uuid)?.name;
-        if (object_name === undefined) {
-            object_name = "undefined"
-        }
-
-        let new_item = this.transform_engine.addFrame(uuid,
-            this.absolute_end,
-            data_json['position'],
-            data_json['rotation'],
-            data_json['scale'],
-            data_json['offset'],
-            data_json['keyframe_uuid']);
-        
-        await this.addPlayableClip(new ClipUI(
-            data_json['version'],
-            ClipType.TRANSFORM,
-            data_json['group'],
-            object_name,
-            "",
-            keyframe_uuid,
-            uuid,
-            object_name,
-            0,
-            this.absolute_end,
-            data_json['offset']))
-
-        this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']);
-    }
-
-    public deleteObject(object_uuid: string) {
-        this.timeline_items = this.timeline_items.filter(element => element.object_uuid !== object_uuid);
-        // Update react land here.
-    }
-
-    public async addClip(data: any) {
-        const object_uuid = data["data"]["object_uuid"];
-        const media_id = data["data"]["media_id"];
-        const name = data["data"]["name"];
-        const group = data["data"]["group"];
-        const version = data["data"]["group"];
-        const type = data["data"]["type"];
-        const offset = data["data"]["offset"];
-        const end_offset = data["data"]["length"] + offset;
-        let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
-        const clip_uuid = data["data"]['clip_uuid'];
-
-        if (object_name === undefined) {
-            object_name = "Undefined."
-        }
-
-        switch (type) {
-            case "animation":
-                this.animation_engine.load_object(object_uuid, media_id, name);
-                break;
-            case "transform":
-                this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
-                break;
-            case "audio":
-                if (group === "character") {
-                    this.lipSync_engine.load_object(object_uuid, media_id);
-                    // media id for this as well it can be downloaded
-                    this.addPlayableClip(
-                        new ClipUI(
-                            version,
-                            ClipType.AUDIO,
-                            ClipGroup.CHARACTER,
-                            name,
-                            media_id,
-                            clip_uuid,
-                            object_uuid,
-                            object_name,
-                            offset,
-                            end_offset));
-                    return;
-                } else {
-                    this.audio_engine.loadClip(media_id);
-                }
-                break;
-        }
-
-        // media id for this as well it can be downloaded
-        this.addPlayableClip(
+    switch (type) {
+      case "animation":
+        this.animation_engine.load_object(object_uuid, media_id, name);
+        break;
+      case "transform":
+        this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
+        break;
+      case "audio":
+        if (group === "character") {
+          this.lipSync_engine.load_object(object_uuid, media_id);
+          // media id for this as well it can be downloaded
+          this.addPlayableClip(
             new ClipUI(
-                version,
-                type,
-                group,
-                name,
-                media_id,
-                clip_uuid,
-                object_uuid,
-                object_name,
-                offset,
-                end_offset,
+              version,
+              ClipType.AUDIO,
+              ClipGroup.CHARACTER,
+              name,
+              media_id,
+              clip_uuid,
+              object_uuid,
+              object_name,
+              offset,
+              end_offset,
             ),
-        );
+          );
+          return;
+        } else {
+          this.audio_engine.loadClip(media_id);
+        }
+        break;
     }
 
-    public async deleteKeyFrame(data: any) {
-        let keyframe_uuid = data['data']["keyframe_uuid"];
-        let object_uuid = data['data']['object_uuid'];
-        this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
-        this.scene.deletePoint(keyframe_uuid);
+    // media id for this as well it can be downloaded
+    this.addPlayableClip(
+      new ClipUI(
+        version,
+        type,
+        group,
+        name,
+        media_id,
+        clip_uuid,
+        object_uuid,
+        object_name,
+        offset,
+        end_offset,
+      ),
+    );
+  }
+
+  public async deleteKeyFrame(data: any) {
+    const keyframe_uuid = data["data"]["keyframe_uuid"];
+    const object_uuid = data["data"]["object_uuid"];
+    this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
+    this.scene.deletePoint(keyframe_uuid);
+  }
+
+  public async updateKeyFrame(data: any) {
+    const keyframe_uuid = data["data"]["keyframe_uuid"];
+    const keyframe_offset = data["data"]["offset"];
+    const object_uuid = data["data"]["object_uuid"];
+    this.transform_engine.clips[object_uuid].setOffset(
+      keyframe_uuid,
+      keyframe_offset,
+    );
+  }
+
+  public async updateClip(data: any) {
+    // only length and offset changes here.
+    const object_uuid = data["data"]["object_uuid"];
+    const media_id = data["data"]["media_id"];
+    const offset = data["data"]["offset"];
+    const length = data["data"]["length"] + offset;
+
+    for (const element of this.timeline_items) {
+      if (
+        element.media_id === media_id &&
+        element.object_uuid === object_uuid
+      ) {
+        element.length = length;
+        element.offset = offset;
+      }
+    }
+  }
+
+  public async deleteClip(data: any) {
+    const json_data = data["data"];
+    const object_uuid = data["data"]["object_uuid"];
+    const media_id = data["data"]["media_id"];
+    const type = data["type"];
+
+    for (let i = 0; i < this.timeline_items.length; i++) {
+      const element = this.timeline_items[i];
+      if (
+        element.media_id === media_id &&
+        element.object_uuid === object_uuid
+      ) {
+        this.timeline_items.splice(i, 1);
+        break;
+      }
+    }
+  }
+
+  public async scrubberUpdate(data: any) {
+    console.log(data);
+  }
+
+  public async mute(data: any, isMute: boolean) {
+    this.timeline_items.forEach((element) => {
+      if (element.group === data.data["group"]) {
+        element.should_play = isMute;
+      }
+    });
+  }
+
+  public async addPlayableClip(clip: ClipUI): Promise<void> {
+    this.timeline_items.push(clip);
+  }
+
+  // when given a media id item it will create the clip.
+  // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
+  public async createClipOffset(
+    media_id: string,
+    object_uuid: string,
+    type: string,
+  ): Promise<void> {
+    // use engine to load based off media id and type animation | transform |
+  }
+
+  // this will update the state of the clips based off uuid easing?
+  public async updatePlayableClip(
+    clip_uuid: string,
+    updates: AnyJson,
+  ): Promise<void> {}
+
+  public async deletePlayableClip(clip_uuid: string): Promise<void> {}
+
+  public async scrub(data: any): Promise<void> {
+    if (this.is_playing) {
+      return;
+    }
+    this.update();
+    this.setScrubberPosition(data["data"]["currentTime"]);
+  }
+
+  public async stepFrame(frames: number) {
+    this.update();
+    this.scrubber_frame_position += frames;
+    this.pushEvent(fromEngineActions.UPDATE_TIME, {
+      currentTime: this.scrubber_frame_position,
+    });
+  }
+
+  public async scrubberDidStop(offset_frame: number) {}
+  // public streaming events into the timeline from
+  public async setScrubberPosition(offset: number) {
+    this.scrubber_frame_position = offset; // in ms
+  }
+
+  // should play from the clip that is closest to the to scrubber
+  public async play(): Promise<void> {
+    console.log(`Starting Timeline`);
+    this.is_playing = true;
+  }
+
+  private async resetScene() {
+    for (const element of this.timeline_items) {
+      if (element.type === ClipType.TRANSFORM) {
+        const object = this.scene.get_object_by_uuid(element.object_uuid);
+        if (object && this.transform_engine.clips[element.object_uuid]) {
+          this.transform_engine.clips[element.object_uuid].reset(object);
+        }
+      } else if (
+        element.type === ClipType.AUDIO &&
+        element.group !== ClipGroup.CHARACTER
+      ) {
+        this.audio_engine.loadClip(element.media_id);
+        this.audio_engine.stopClip(element.media_id);
+      } else if (element.type === ClipType.ANIMATION) {
+        this.animation_engine.clips[
+          element.object_uuid + element.media_id
+        ].stop();
+      } else if (
+        element.type === ClipType.AUDIO &&
+        element.group === ClipGroup.CHARACTER
+      ) {
+        this.lipSync_engine.clips[
+          element.object_uuid + element.media_id
+        ].reset();
+      }
+    }
+  }
+
+  private getEndPoint(): number {
+    let longest = 0;
+    for (const element of this.timeline_items) {
+      if (longest < element.length) {
+        longest = element.length;
+      }
+    }
+    return longest;
+  }
+
+  // called by the editor update loop on each frame
+  public async update(isRendering = false): Promise<boolean> {
+    //if (this.is_playing === false) return; // start and stop
+    this.timeline_limit = this.getEndPoint();
+    if (this.is_playing) {
+      this.current_time += 1;
+      this.pushEvent(fromEngineActions.UPDATE_TIME, {
+        currentTime: this.current_time,
+      });
+      this.scrubber_frame_position = this.current_time;
     }
 
-    public async updateKeyFrame(data: any) {
-        let keyframe_uuid = data['data']["keyframe_uuid"];
-        let keyframe_offset = data['data']["offset"];
-        let object_uuid = data['data']['object_uuid'];
-        this.transform_engine.clips[object_uuid].setOffset(keyframe_uuid, keyframe_offset);
+    if (this.scrubber_frame_position <= 0) {
+      await this.resetScene();
     }
 
-    public async updateClip(data: any) {
-        // only length and offset changes here.
-        let object_uuid = data["data"]["object_uuid"];
-        const media_id = data["data"]["media_id"];
-        const offset = data["data"]["offset"];
-        const length = data["data"]["length"] + offset;
-
-        for (const element of this.timeline_items) {
-            if (element.media_id === media_id && element.object_uuid === object_uuid) {
-                element.length = length;
-                element.offset = offset;
+    //this.scrubber_frame_position += 1;
+    //2. allow stopping.
+    //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
+    for (const element of this.timeline_items) {
+      if (
+        element.offset <= this.scrubber_frame_position &&
+        this.scrubber_frame_position <= element.length &&
+        element.should_play === true
+      ) {
+        // run async
+        // element.play()
+        // remove the element from the list
+        const object = this.scene.get_object_by_uuid(element.object_uuid);
+        if (element.type === ClipType.TRANSFORM) {
+          if (object && this.transform_engine.clips[element.object_uuid]) {
+            this.transform_engine.clips[element.object_uuid].step(
+              object,
+              element.offset,
+              this.scrubber_frame_position,
+            );
+            element.length =
+              this.transform_engine.clips[element.object_uuid].length;
+          }
+        } else if (
+          element.type === ClipType.AUDIO &&
+          element.group !== ClipGroup.CHARACTER
+        ) {
+          if (this.scrubber_frame_position + 1 >= element.length) {
+            this.audio_engine.stopClip(element.media_id);
+          } else {
+            this.audio_engine.playClip(element.media_id);
+          }
+        } else if (
+          element.type === ClipType.AUDIO &&
+          element.group === ClipGroup.CHARACTER
+        ) {
+          // we will remove this when we know which group it will come from character + audio === lip sync audio.
+          if (this.scrubber_frame_position + 1 >= element.length) {
+            this.lipSync_engine.clips[
+              element.object_uuid + element.media_id
+            ].stop();
+          } else if (object) {
+            await this.lipSync_engine.clips[
+              element.object_uuid + element.media_id
+            ].play(object);
+            this.lipSync_engine.clips[
+              element.object_uuid + element.media_id
+            ].step();
+          }
+        } else if (element.type === ClipType.ANIMATION) {
+          if (object) {
+            await this.animation_engine.clips[
+              object.uuid + element.media_id
+            ].play(object);
+            let fps = 120;
+            if (isRendering) {
+              fps = 60;
             }
+            this.animation_engine.clips[object.uuid + element.media_id].step(
+              this.scrubber_frame_position / fps, // Double FPS for best result.
+            );
+          }
         }
+        //this.timelineItems = this.timelineItems.filter(item => item !== element)
+      }
     }
 
-    public async deleteClip(data: any) {
-        let json_data = data['data'];
-        let object_uuid = data["data"]["object_uuid"];
-        let media_id = data["data"]["media_id"];
-        let type = data['type']
-
-        for (let i = 0; i < this.timeline_items.length; i++) {
-            const element = this.timeline_items[i];
-            if (element.media_id === media_id && element.object_uuid ===object_uuid) {
-                this.timeline_items.splice(i, 1);
-                break;
-            }
-        }
+    if (
+      this.scrubber_frame_position >= this.timeline_limit &&
+      this.is_playing
+    ) {
+      await this.stop();
+      return true;
     }
 
-    public async scrubberUpdate(data: any) {
-        console.log(data);
-    }
+    return false;
+  }
 
-    public async mute(data: any, isMute: boolean) {
-        this.timeline_items.forEach(element => {
-            if (element.group === data.data['group']) {
-                element.should_play = isMute;
-            }
-        });
-    }
-
-    public async addPlayableClip(clip: ClipUI): Promise<void> {
-        this.timeline_items.push(clip);
-    }
-
-    // when given a media id item it will create the clip.
-    // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
-    public async createClipOffset(
-        media_id: string,
-        object_uuid: string,
-        type: string,
-    ): Promise<void> {
-        // use engine to load based off media id and type animation | transform |
-    }
-
-    // this will update the state of the clips based off uuid easing?
-    public async updatePlayableClip(
-        clip_uuid: string,
-        updates: AnyJson,
-    ): Promise<void> { }
-
-    public async deletePlayableClip(clip_uuid: string): Promise<void> { }
-
-    public async scrub(data: any): Promise<void> {
-        if (this.is_playing) {
-            return;
-        }
-        this.update();
-        this.setScrubberPosition(data["data"]["currentTime"]);
-    }
-
-    public async stepFrame(frames: number) {
-        this.update();
-        this.scrubber_frame_position += frames;
-        this.pushEvent(fromEngineActions.UPDATE_TIME, {
-            currentTime: this.scrubber_frame_position,
-        });
-    }
-
-    public async scrubberDidStop(offset_frame: number) { }
-    // public streaming events into the timeline from
-    public async setScrubberPosition(offset: number) {
-        this.scrubber_frame_position = offset; // in ms
-    }
-
-    // should play from the clip that is closest to the to scrubber
-    public async play(): Promise<void> {
-        console.log(`Starting Timeline`);
-        this.is_playing = true;
-    }
-
-    private async resetScene() {
-        for (const element of this.timeline_items) {
-            if (element.type === ClipType.TRANSFORM) {
-                const object = this.scene.get_object_by_uuid(element.object_uuid);
-                if (object && this.transform_engine.clips[element.object_uuid]) {
-                    this.transform_engine.clips[element.object_uuid].reset(object);
-                }
-            } else if (element.type === ClipType.AUDIO  && element.group !== ClipGroup.CHARACTER) {
-                this.audio_engine.loadClip(element.media_id);
-                this.audio_engine.stopClip(element.media_id);
-            } else if (element.type === ClipType.ANIMATION) {
-                this.animation_engine.clips[element.object_uuid + element.media_id].stop();
-            } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) {
-                this.lipSync_engine.clips[element.object_uuid + element.media_id].reset();
-            }
-        }
-    }
-
-    private getEndPoint(): number {
-        let longest = 0;
-        for (const element of this.timeline_items) {
-            if (longest < element.length) {
-                longest = element.length;
-            }
-        }
-        return longest;
-    }
-
-    // called by the editor update loop on each frame
-    public async update(isRendering = false): Promise<boolean> {
-        //if (this.is_playing === false) return; // start and stop
-        this.timeline_limit = this.getEndPoint();
-        if (this.is_playing) {
-            this.current_time += 1;
-            this.pushEvent(fromEngineActions.UPDATE_TIME, {
-                currentTime: this.current_time,
-            });
-            this.scrubber_frame_position = this.current_time;
-        }
-
-        if (this.scrubber_frame_position <= 0) {
-            await this.resetScene();
-        }
-
-        //this.scrubber_frame_position += 1;
-        //2. allow stopping.
-        //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
-        for (const element of this.timeline_items) {
-            if (
-                element.offset <= this.scrubber_frame_position &&
-                this.scrubber_frame_position <= element.length &&
-                element.should_play === true
-            ) {
-                // run async
-                // element.play()
-                // remove the element from the list
-                const object = this.scene.get_object_by_uuid(element.object_uuid);
-                if (element.type === ClipType.TRANSFORM) {
-                    if (object && this.transform_engine.clips[element.object_uuid]) {
-                        this.transform_engine.clips[element.object_uuid].step(
-                            object,
-                            element.offset,
-                            this.scrubber_frame_position,
-                        );
-                        element.length = this.transform_engine.clips[element.object_uuid].length;
-                    }
-                } else if (element.type === ClipType.AUDIO && element.group !== ClipGroup.CHARACTER) {
-                    if (this.scrubber_frame_position + 1 >= element.length) {
-                        this.audio_engine.stopClip(element.media_id);
-                    } else {
-                        this.audio_engine.playClip(element.media_id);
-                    }
-                } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) { // we will remove this when we know which group it will come from character + audio === lip sync audio.
-                    if (this.scrubber_frame_position + 1 >= element.length) {
-                        this.lipSync_engine.clips[element.object_uuid + element.media_id].stop();
-                    } else if (object) {
-                        await this.lipSync_engine.clips[element.object_uuid + element.media_id].play(object);
-                        this.lipSync_engine.clips[element.object_uuid + element.media_id].step();
-                    }
-                } else if (element.type === ClipType.ANIMATION) {
-                    if (object) {
-                        await this.animation_engine.clips[object.uuid + element.media_id].play(object);
-                        let fps = 120;
-                        if (isRendering) { fps = 60; }
-                        this.animation_engine.clips[object.uuid + element.media_id].step(
-                            this.scrubber_frame_position / fps, // Double FPS for best result.
-                        );
-                    }
-                }
-                //this.timelineItems = this.timelineItems.filter(item => item !== element)
-            }
-        }
-
-        if (this.scrubber_frame_position >= this.timeline_limit && this.is_playing) {
-            await this.stop();
-            return true;
-        }
-
-        return false;
-    }
-
-    private async stop(): Promise<void> {
-        await this.resetScene();
-        this.is_playing = false;
-        console.log(`Stopping Timeline`);
-        this.current_time = 0;
-        this.pushEvent(fromEngineActions.UPDATE_TIME, {
-            currentTime: this.current_time,
-        });
-    }
+  private async stop(): Promise<void> {
+    await this.resetScene();
+    this.is_playing = false;
+    console.log(`Stopping Timeline`);
+    this.current_time = 0;
+    this.pushEvent(fromEngineActions.UPDATE_TIME, {
+      currentTime: this.current_time,
+    });
+  }
 }
-
diff --git a/app/pages/PageEnigma/store/index.ts b/app/pages/PageEnigma/store/index.ts
index 2c89a60fc4..78254d1a60 100644
--- a/app/pages/PageEnigma/store/index.ts
+++ b/app/pages/PageEnigma/store/index.ts
@@ -5,6 +5,7 @@ export * from "./dragAndDrop";
 export * from "./media";
 export * from "./objectGroup";
 export * from "./selectedItem";
+export * from "./shape";
 export * from "./sidePanel";
 export * from "./sizing";
 export * from "./timing";
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index 10d3e23cfd..bef722b1f3 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -454,7 +454,7 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "Talk (Demo Sounds)",
-    thumbnail: "resources/placeholders/audio_placeholder.png"
+    thumbnail: "resources/placeholders/audio_placeholder.png",
   },
   {
     version: 1,
@@ -462,8 +462,8 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "NCS Song",
-    thumbnail: "resources/placeholders/audio_placeholder.png"
-  }
+    thumbnail: "resources/placeholders/audio_placeholder.png",
+  },
 ]);
 
 export const cameraItems = signal<MediaItem[]>([
@@ -530,13 +530,35 @@ export const objectItems = signal<MediaItem[]>([
     thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);
+
 // In the future these will have shape id's
 export const shapeItems = signal<MediaItem[]>([
   {
     version: 1,
-    media_id: "",
+    media_id: "Box",
     type: AssetType.SHAPE,
     name: "Cube",
     thumbnail: "resources/placeholders/placeholder.png",
   },
+  {
+    version: 1,
+    media_id: "Cylinder",
+    type: AssetType.SHAPE,
+    name: "Cylinder",
+    thumbnail: "resources/placeholders/placeholder.png",
+  },
+  {
+    version: 1,
+    media_id: "Donut",
+    type: AssetType.SHAPE,
+    name: "Donut",
+    thumbnail: "resources/placeholders/placeholder.png",
+  },
+  {
+    version: 1,
+    media_id: "Sphere",
+    type: AssetType.SHAPE,
+    name: "Sphere",
+    thumbnail: "resources/placeholders/placeholder.png",
+  },
 ]);
diff --git a/app/pages/PageEnigma/store/selectedItem.ts b/app/pages/PageEnigma/store/selectedItem.ts
index 4f1d7bf778..210d975e04 100644
--- a/app/pages/PageEnigma/store/selectedItem.ts
+++ b/app/pages/PageEnigma/store/selectedItem.ts
@@ -2,3 +2,5 @@ import { signal } from "@preact/signals-core";
 import { Clip, Keyframe } from "~/pages/PageEnigma/models";
 
 export const selectedItem = signal<Clip | Keyframe | null>(null);
+
+export const ignoreDelete = signal(false);
diff --git a/app/pages/PageEnigma/store/shape.ts b/app/pages/PageEnigma/store/shape.ts
new file mode 100644
index 0000000000..26ea68a57e
--- /dev/null
+++ b/app/pages/PageEnigma/store/shape.ts
@@ -0,0 +1,12 @@
+import { MediaItem } from "~/pages/PageEnigma/models";
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+
+export function addShape(item: MediaItem) {
+  Queue.publish({
+    queueName: QueueNames.TO_ENGINE,
+    action: toEngineActions.ADD_SHAPE,
+    data: item,
+  });
+}

From 517fec3a1d7efbec7e3c68135a3c81c4d6f87d85 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Wed, 10 Apr 2024 21:16:20 +0700
Subject: [PATCH 2/4] added shape thumbnails

---
 public/resources/shapes/cube.png     | Bin 0 -> 7585 bytes
 public/resources/shapes/cylinder.png | Bin 0 -> 5742 bytes
 public/resources/shapes/donut.png    | Bin 0 -> 10512 bytes
 public/resources/shapes/sphere.png   | Bin 0 -> 8557 bytes
 4 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/resources/shapes/cube.png
 create mode 100644 public/resources/shapes/cylinder.png
 create mode 100644 public/resources/shapes/donut.png
 create mode 100644 public/resources/shapes/sphere.png

diff --git a/public/resources/shapes/cube.png b/public/resources/shapes/cube.png
new file mode 100644
index 0000000000000000000000000000000000000000..51cb24114c4cd76dafd8f45d62d5b70b6759a736
GIT binary patch
literal 7585
zcmb_hXE>bQ)+UG&(G!9&89nOgT}1Dqi(Uq!%rG;0Ct7qy?-3-rNEkh$_m&u45JYsM
zg~T^`&w1Z-&Uc;n`}IA4p7rc&t$VG#*Zu6Wc8spJ%54&Q5*!?y+iI$cdf4{@4h}9p
z(G9FL3>*PqU-ytoCP;ml1Jc_D4#ttUhuMMwYHl`;U_G#ny|2drSQ-Zhj~!xQf;7?6
zl(d7n@!9;=;q!5G$6DjyNXz-S+t|5)kpNq;BLpe~+;8as0wDG>Kw}Xt0WEh0uoFbp
z4-VG%(>Ad4bFq`K2g=C;q<ti@0B&HU4Zz3E6^fAbkpcdJD~XkVH}eAlf2bf`WPtw&
z%0x>Spa6q|0TO&5UONE+L4cS9pS`V(kiCtNtq2c5P(V<KA0)^R65$02ND2!|3W)*!
z`2evF;r0%adWy>bbcg+t0XiX(?vnic-rnAP-a>pZxFbJELPCOHK#*ThkQb}Li|~aa
zZG3p42$nw)6u}5PIK&+Zfk6Sk5p8T?o=6!WHrRjk!p;3JSSaG3BZVC^ejgimeh{C)
z?_T|>sHOFPtGc=UrHw%9f&Ufne+5Pu__~An^}q<2C)^I3I|r8EuG}RR;9wgh3~m5}
zx&Aqjx=t`84B-TG2MCJri2^u{Ay9jmH-hUA11&8{H7EjU1GNLIDart`5PT4by`-S9
zn4*BVn5eRturLUur1V%qMDVe)1V~&_LP0`I8T6;EBFxUy4Gcy8X>0#4Td}{j{Y?iq
zcdTbcFdX6qwpWJ3+yH;{SrYR1u?YVy-al>a|2`IxzqRGZ2E+e5v;UUqKbx@h`7QoM
zUF^qS<Of5sjE7^XO;V+6hJ!;-sir7z;4`<Ax2=Q1%=I!;-g`6(aD2z)GS&P^bh><^
zan@~ki8*_kUF%0taPG2JYU!y+)oa68LO)%N@}7ENG!a?9y!HEU{t}p>yibnSbdk8z
z!{!)5K~lWo%FVNdGS8ZKM)#$>c#>EP3<@74;g_%ytE=g%rxc?8O=Okl!nRVOu&w_o
zs)gxcTUj~T<hlM5vDRUFDOhVxw*M6W6Z0SN{{{0Op8gZ_5BUF$St5bu5J+4c9rW|Z
z;o;%tSV4#1iMrhz)jQ5alSaY8!ESE5zkXhN@6JWQu7B<a%lV(~lobRu2VVz4%;|yh
zO`6&H+4(`B#mPzd_pcMrpOeU5oGk~}Shh8nmw!7Rlk02D;J5m<UDNSGr@#pF(Wx7M
zoyr*wr&8SWap{xVZ=IT%>F3z0k$-tPc(xigfS>IRT~1JZuA#0W91<p&>UX%>^Y!c3
z&TzuBomqVo6DRTN=PuRDb2P?0ck!}2u8uTp%+)OUi3cxEj@C7v#T-niBrwW9>~btL
z6jEPLR0Jl=c$}P`S~erMCW=*jO3`SOE^ba*I&mO0;PA!k*ITjt?VQ})T|)Z$`fm}p
zMrscI6mtm(2u4OmqQwts`OMMdi;K4xLQ6@@3UjU8r<9bG7(`tkiMBa-u9SZwctrBG
z(zHHOu@uUph1KU4s5{p`mm(x%eBamzTW<F~W*_Eo=jZ3g^xqmZ6&4qd{(f<=(k11!
zgOec)ugy^WW@rwf6TQ469a2S*{q~*NT6Sh8+H-q)zvDU~r>MF4X{5ex``t>+%nY6M
z*6(rmJ$67Wf5sCRtWqOa`Os&DWbR6vU*_TEUA&JOA0MBscidlSsu$&x&*}(e*)g)P
zSTwc@RGRAlOpbm(!2VQ9K}bn?k+$V@lI|Un<eJvu=<7uBc|&pW+SSFe4}-5+(3n1_
zin6l0y84pec2%4IS#u|FC?0`JdxKlaPGUQDk>l1X$!Y`#-G+t71L_|q7^~t5&SP)+
ztoj>3QbxI}gRVR&Z+6L9R!bkgmm9nfBdCg5J8l7YM=BF<=~}jURn^y1m!gzH0>;bj
z`V!W=Ht`vW7|otOC1aAF86Ov@VH=`B4KHj)q?pp|vI#wCja$|`+gr4YuP-fSr+M11
z=TN}T!BHR=+zy#4<?pzn;>*bhc6NR^!BM*EOj|zweXVt(tVF&ri!4vRX9Il@CgeD3
z-Vt<vrBsV&K+nPSbM$wDCu@7byAL_d-6TAn@+qvg>>(BD9h_^~YW^B~#;r2$1Nr2#
zzT4Bhin*#Y9y#mzE5jo#xAXnhdgBj1nl-p~dRpGmd9^wC`U2;Lhx$YVcv7Hy`DVY6
z5Ck^-SThpWVd!_}-R4EbLmL_z`VyJR$;pk4j7Zd(@5J`>_VrPU2YsJVsj8~-8u3+H
zq~PtwulY_Q+5N>PJhu2!KXZUZB>_O=d+@olAo$npr%#3!7BZMV8WeZPTK_?P*Y)vA
zzKs7cWA?7vp=8yLtNPKkEJg>H`!Q<QBXl&Dmfs7Bd_UuO(h8pLLlIGXfR_CC+X637
zn-1?q598(}t4q@lqn1stqpZb)uMSlb9*HXF&XTZA>ft9G7)6mYE1#<p_L+Z5Nt4b}
zX;AYG2nca9B>3XHySsa~w-B$TV`ykN5XfIumY}8GUXR$k-0v8Zuub=|rkatUv<0<6
zwkyL^xUvl;50hta(lZh#m0NWLwY9XgpwZ&o>``xs)f<9?4>}23y!RW}O)YUYIO~6G
z=Qd{KR&I*dBCXfnGo(;*MD7iyaU0iI#?vUNWBg<)^6&34;8I6lov$TU#rBC%A$k&S
z?H2UkuGk9FYkWa7Y|!H8=ck=7Eg>sQrr&&ZQd1d4r62(Uh58Wr4(Gtyo1EKMwQX;H
z4$B#<damh5=fyJGiATD#HC491+>r<ibWu6_7|0US31~m;Wr!lX|B##a7Kx?ftPgvS
z)O@tPAt$*Q5mA<A#Q>iC4H62ui!Z5wc6vHw^G}>GL21-jzD$?T?s5lnDJA*vb*Uv(
zla%v#N^?{yEpdn96uv!O6{438*S<|k8gM%6IN#ug*kz>trpS=hx;|X~Sb|YEQu@&<
zN+*Sq;oiNi{e5P7`lH&RMX56j0|R{F?Qh@WIJm?4;W3(Ih^)*pw&|W7HIu$FodV_J
zC-`5JRlB>mZgv#n2e-Ag5%s#bxNL84yEr>Lv2O}KKW>QD*b8}Y)g>9GivKktA_9F)
zX}hZC$0{$O(tO{F90%WqXT>zhn_BC5kuR@kPUY1l_hyyd=eH@tepAglA2`X#$?^Io
zCZ0&cG=dI2;qXZ@yDeH&1qn%#H%o`j&l};<<AhGr-QZYAW!}89DAE_s)Tel~z#K8y
z7#<#u?gG`C^O3ILPIS8@nWm#qM1%IY>*wb_zP=L5@ynCWwx4l0E7=#C??kGW<>0KV
zQ7f;ml6Y%1xA+`g9B%@sR#>h?U|RrLP$b5^kvxt`>>C9NQC?X|YWHz&jy|^MoK*St
z8K{?1*ES#-M?_fIz{qG4mw>pf?zsBK&^<<lbiud&gnMqa(Uf=z=*E?RN|eo(oq*8n
zT8{tWE%k+VqQC_aoCRHy<yB}eUiTK=SM1_dNL&G77wRu->ZT}dFs77~-E)ki$`wI(
zp94C2(YRW)R`aFYnWjJ>XR180hT4#$BHWVFF3K^4y>g=-O#v1a5y91+?*<M?`;bLt
z#*xKftj+r^7C0nAD9nh?TW*3ZcjoDZ_rIaA%gx;%blJnMVOe)7h!PKQiphm5Dk>Nl
z7~JkX>JQ{N+?aJSRbV6X(gUW+Kf~L0B5Ll814oIfUr`28rhjS-65TJ%P0;el&Z$di
zfzAy=c6?XPS8YSIA2kL2^fS@&2fqsBHc&g1Q!6;huRDo9l^38XE-psi*Q~zfU^LKl
z%WI^xIcRyI5mvC+aW8MRAN$O`b5UDr{Q!Pn3-66HsxL2puJPnvT4c5DTuxb)kG366
z_U5|513g#itaF>xYY{Ot4eFTa2}{`bkByu*b$A^jAkYK`Ll_=Pnpeke(Ls=1l+v<!
zQrtbN8bqP|{Ji%3B_1ALwAVT5>f<XEH_#!Ta<iFSzxCpHUawap?X{WU#-oKenh$n`
zF*NP%?Mz52=rMT9&A0hY`lPd^s9}H8y*MgN#NnPgOeg{anjA6?ga3-f4Mw3aO;b3>
zjp7M}Mm`ZOVJ90K)z9PdWj)yrfO>+F&jl{hA$BkrzcjHd`<|trn;F@P@^da_S=Bb<
zJC#(}E@T0u0u;o4wp#Y)%>%Lp9?HnbJfb!i6%)%qq0qeUzZA9{W)(ahMB@j%pU6H?
zX!BLucuMWq3;I9@BuB{Z7vc-oB3k#|I5xgqerMBeG4-Uzkgt(d#E`Z%G<YpGdp4*q
zyAHSJ;5gh}{t`TOBv9|GT0M(r&G5j(um!wYWV-+5TI|{DDC*_Vf}sbcYjC^HkM#y;
zDXFdv_i?c&J#!2EY(=3u2by7wXilf~MAZa(M63FG{dJ=IEGhFWvGveAtz6l2tL|DK
zw0};93(}U~S2o%$vcZRJCM;y=0=vRH39Aby-!#>d1&y0Kccj}dtG6<bo*d)r{cx#R
zwEt$*x!fu4@AEV8*_&59VX>i%Y~h%Y)07_ROq;^l<z;d{EG;!OG^%`Pt`Md6Tn|-Z
zT8^U{N}gHlY;T8mI0)DsUuIQZ9OHeU^GDajChFd;w2U{8a@)*mCe<`pv=})godTF>
z6%Ld<bjYFgt2Ci!lJ?k_^Kouv#!s#kdFtW6RsNG{6y!(3R!z9~88CGm+Q5`Tomp8f
zF#SxSPX<TW6oX`GDB*rYe~2s=SW=auQ_Zw!oMd5kbl=BWO3(G9Kpo$@0GOLNWYywz
zn9tEUt(N0y353#B7Zu^k=EWY<e(bFS*lkQ7cwBn?$RDDzZXA9!-<FKd3BK86pqZ88
zz7H(5Z)0~KT%5j<8Ofs|;J0u}_ABsi;^#+At|Qa=qeI>1XF9fCJFERn(yYSBTf<>$
zYEF`lF^`GvvPmxtOitYw%=BbGZQ_COX<Ef>e?M4J=*<?$eKgftmQ`&UTdXGS8Lho%
z7abhx8aXwKFs&@9I6zcLy3}BQp<8Q8c)f<=>C`Xd9i9_D1Ih67@kI*le*5;glDL9c
z(nfnBa+gMo5t-ArYlWj&{mH(HBNIYp;lR0d@5*)Mm`43v&^q+<q*2m%9PbI>$g1`v
zazB(T(863b+!e3ix?%FH(k2|tp;|#Hbwi!buHhla>!7haO%4?5_<KQn$J<;eo+8kS
zNkdB(??MBufCOH4u7cx0p3&4d@oKYz6Y>;QzO@?(!w#-b<!D~;bVwc5<G$DDjGeBu
zIUi$^_dDo`v;JB>Ha9z%9cwsYQGYvJOSnMV_eSdM$B*3%y>Vye`)+=I*`xH#eTyOq
z5+c{M8Yx54A4Dy<IQ0!*qBAYhrgihsYQ14z%&I@ZMek&Hf`}Xjb3;fW6ttJk)M?X8
zHo>?V0X{zHjt*w=H;btc-fZvfp6`Rrifoif<2d%I<(opvDI()Cp1Ux7J$gKA`wb)5
zlfee104v>7NM-XbB>tRq^MOK{f}?h?@eP$3gO@YH&vr`O%Z@IJs4(QbIR}xH+UHFK
z&1Jgq&6}__izU|D>_ld{$WN6uHH6taxLxzg=R}O1ul$#mCQEo?xrn(YOlJZ~UF<9F
zE<TMT&zKT?&_Dj{Q+K0kUDhL?BWNlSv@c<a67~8yKyc!agSBkz9WgR8CHGag$OcN1
zzlk6_h>Rb~vFt_pBRKVo5Xx14ecdsia?UbXsk+fHtdcl4nJ>em&LuVQxh(ZSN>W+S
z<otuKPwOOt7~|17$9ACkq{&fa9V-3ug+SG5@a?2V-5=ZSSzm4naeD^1K-6+C8v-4!
z1{@v_WbJ+$Nm`r-@BezLZoZhDOld@7sxxq0?=E=fHsRr{mt4+tK-8O;FQ3idi1f1j
zo-|}yY*v$=Zbk$p2<?vHmd{El$<55PCifE1cgv@ZSdZg!qZT@gJVca*>r&tM&ODvo
z^2rO-(a~wqU$R`BRm&E*V$^Jel5koz68W0G{C;1Z=|N^|&rp=2<7x5<SG>De`Ac4A
z1_o{_6eQXVZSu2+yRko$C+6^!HPvUmzu|f<l9vgpkVK$sWMCkGORkhuR5Hu$Uy}Mo
zhWif8#C*GYT%=Envq`9`P?H0Li_-L<qP`E2w^4S=q4nyxHHh5vY2F`aEPmS$pzEdT
zY%bs!za(SZOpYmrfxuo|$nVs=B@5o!+0Vsl>$V<ni;kahV6>&9mTpJ1<(-e-;Ou1C
z+ge>+ZIuK#ZUvl?oHlQgp?EA=m6d{i9LDXRr&6XuD4R@m3r6fe`=;{uKzmB&-?K7*
z(T;06YvKV*hOIF%GQJ%}$Y(WNiuyye2*L!l($dnDik}=SGUY3NaeR^bvX-BdmYXSl
zZEu2eLvM5P=d^?Ojl{Fw{)EhwO95WEKPlJw=BSG77|2281s<oHHV^kh`ux_$akm}O
zgT#b{A5FLAz0msrS-eph1BIxFD(h4j)!izcAaEj^g-DLLZ8UpSWMu2E*$_Qv)BQvT
z<Yc><YX;ru!ci`#d=qDz>|<RJI8u*!Sz6QRam?2!5ZEYpYS;0NQwzeQsJYO*5{;LW
z=fT=Pne@qfpk!>@rT(Tmt7J@+ojSzcS~~F)A}W<YcXdNq^Y!$*h|;APCwPs)!isF!
zl4<JK+Go`va1fpoI|7OPI5sl<hE&}sP`{2)j}!GaoQLNeH+ezFQkQQ!JTWnm@Eg@r
z#=`0N72iIj*P{Xa1uwRwyVNe&T`iN_15VnK7cU-P@58R!ZvPYyNU$9w<)q@WG3=*0
zSeK{;#m{&XTzlFM49loKS8!yAyr}$88A6rd@8lGH=eCyv+N^G5?xN*tqRby>mg@c-
z?cDaz&(B4C6#i^Er%im0yL0bU+oGbPc0(+&BT`q95}!6THHBW=J;1b%1X0PMPs&zA
zgAP{-iVsY9usk$)@?>IpIr!JrMQ^XN>EJLCk+!yWdRkh1e0-DE$BW#=vF284bD;fO
zJN*!LohT>_7JPN?p|78MUBK;9h@C@VE-v$}zQ^gjX4U|YGZi3ZgY}5#=L&z6BD9ua
zZq<cPPlAVyjSU@d10W<MlxM9hy%rU`<N+fP2pt{ru%X2k?~IHL7SYwB2l7E;&a4fq
z^$@B?C>YG<9&mnOV?@`_Gt{o->FG(7sGTS2xxdslH}^DYa4|?mGb)2O`fV><Hhdyv
zKQikXMA~DuyT4!6i!v)vchVlZfTmoT7)a#+{aBdj8LcPI%|ki~g_)aXZZk!?7EJi{
zAKq(Xj03G>Bk1_`W4pZkVLn}!#lzuAZUZLFnA~+Mwp5{&BWm-t$sU-=H5zKczQZ%R
z9`Z@}+%?uos-q7sD~g*Z<A2xTO-Tuxh8)CeEZKFY_5po-z64?e>$e}|%g)V9qBGrq
z*n)SNJl)DkejCVXG+16yL5V1k@+KRI-=vOdf^aFY*ViA{%s0ZA#ocizImk&GyWTZ*
zfuTE1&N9gkfP2j}eG$2(jg8*e?bhrs5W-%xsTz8J{8{p&(g89fs)06M1p7o?46u6l
z3#1$j2KPH8Fw4n`il*Z!ZiJN}sR8CG)z#Hf-g`UqjpR$xcVjzqv8AJ2Q<YBLl=*Rx
zk-R|Q)@n)7S8HreM$HG!w_D`fiG`DK7SSGfOt&#{UOjm<`JQ-U<c*@L=9Df*%%W7x
zx4rMnLR=pjnOS9M(AEj`E4^!IAR{FOT+Y68F~%lu(j87bHaeBa%d8_E(4DTup5IKX
z{!A#}bpHBX$joCK+4u7s26wL>si>$pI&zTO?`gf=U`GjOo%?M~mV7HO4`dE_Kc$0y
z9eO7&z-1gs`=NP6_xoI2VzTL4>5pHR`-g6)cLR@x0y(mWU#Nb$gk3k*)YLRLXHTU7
zQaFmx`UBAIl_P&=7Z8Xf2CyU`73d^_-Q*R>2Kudb6Pu`yXH^(i3G{oeyl8+f&0JtS
zzb<+&_pImU=l7-}llK_&nns(Xcc=*RdSA@PYuq(;1A7xNH8wV~un(lSlb8<r8t9uD
zo0-MN`e6$=M@MiIfZ4`o{=mC8o8Pj^N=v>Zdy*<Ox3qNpJT-g9D4}C-X`+t#_<+}E
z^6X_<+2(kW!ofyYR~Iri6fvy%aH}6^CA1A|62T1u*NB^+V$be}M#s2)t>G!<)vtRo
z1!K9~HRUrc-u!1hEXkx|hgCzbvMOj46rQ53AL#E6L&Ockts0xU-@JJ<F)@+Kp>soP
z;qe6`{s<Xpt$<*u{z)!(6;hF)G0H>u$OKa>B9k=nv8{IZewrkzJNZRucSnLE5L?HT
z^*`l#K{iIqJgDcOi7f^8k4Q;MCiOy>+wX_68ykDLJ*6lxzsct_8%Bns+7%dXS1MxO
zg;RXKGmEX2jILOP_e-}5U$m$AVQE@eTUE8Y)aLKX1!NOQ^2xuitRXXHCj&Y69)@6l
zV?%v?ytBLl+7f|&f82=M45EO`Ex+-Tg6m&|ibqKvH>07Ui%gF0+9~Z)cVp8~sP|x&
zFh*wPv1UsT`6gkJ;%xeWpBp(aubr7X&ut?Ubtp|&P;QA((%WQ#=h$NywxDx>$>$%u
ziyEpr*~Xlmoh>&Z95K}v*jddS2eo9Y>YZWSc*9xA=a*@3C8oxz!~YDbpb*X%T9~Wk
zvi4&wQSO_w^YR5|baGM;n%n2s(t;DM@(N$59;G;*2eid&bt~G|raSUQ?>Gtjt$ZM0
zH3RC!j7mF0p*MXTM{|9@f2B+zhelX0rGEnMO|ImRZHk`Ly^(J{?w^a77>RdG0<)Y&
z4Jp4_KYpSSHp!x-4&>$K&CAQ{k65v{kySI~9DHdJAi>g=phm^ZnaR?wC`5(vUJg9_
zzNO#$CZ*6k<lFZ4(9lpa&DqIGUCd%`&8$*=^eOAS*x{X}4m5h^^q6S1ZIzr!T0H1V
zoXP&=h_465Z7$^O=GNx1);p3Twj6ZnW=+!SM6?)AyK~Zj`;<a1JN2E8G)@?nmbCnq
z0f)Bq_tI_}rNisWEBqH7ktg3ixnQb0cRYOQ<AHXHl1|0}DV=P<{-UCy<IS<IM@EK*
zF46?x-j5$Y3JVH`xl=6Vrf%>sfGVFo>Bbu+Jp^3};T*y`eojwM_Y$+-E?)4CG`ve|
z?rUs}!P2D4Zb8tabY9cjS{J)W@SCGU-U|o&joEV<E4#1P2CEKtGBOFY+tV`QsiPqj
z#CWqyOH1S9g}KVQd{#H`Q;9oB3r4G6X0Cre{P>Xu?)7DnNLj=PzC85sS&aKse^62y
zwr-qSmGrxI31256Wz~nN>GHL-aB;qR{W`Sn_qx#=&v1EpX~U23{8>>r%%0X8fs~Sy
wLfp~+_p6Hk@B4{=U4Q)lT&d`dUlR-9To$x2Hx}Wa{Ju0*Q_@zferz4~KU&Zc*8l(j

literal 0
HcmV?d00001

diff --git a/public/resources/shapes/cylinder.png b/public/resources/shapes/cylinder.png
new file mode 100644
index 0000000000000000000000000000000000000000..73cf7eaec4e9b66f16bb7859fe22e018fc55ca50
GIT binary patch
literal 5742
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
LW1wB2X&>}oapjLy

literal 0
HcmV?d00001

diff --git a/public/resources/shapes/donut.png b/public/resources/shapes/donut.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb4e5a0fbbcdef59611c16ac9ae2dd9380f3b1e6
GIT binary patch
literal 10512
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
TVz=?9Mo~dVRk~90&HMiYt9$qQ

literal 0
HcmV?d00001

diff --git a/public/resources/shapes/sphere.png b/public/resources/shapes/sphere.png
new file mode 100644
index 0000000000000000000000000000000000000000..b482e9fa30ca65d77369ac0f71b7fd1674026f15
GIT binary patch
literal 8557
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%0D0TN|Ra+m~K~
zT^R`p)RGRomZ<%OS^`hh>ZnU9Jpa0h79v+3oZ>Jj{xdR{oC&_fcs4AB&6Cb4t#~Nl
zL>B*tzHDk}6K;*lB_KBw0ybk~FCtwNCamQ;EyVOr7sSzq4TWpP<Y^Ag4UPAQ#Sf+X
z80NQhEwxVdxdYirWo5|KEX3nP>VbCb7aSZ+Es5!!;B_h+Xl%2A=%Ut<=ZBj>T8L`#
z{*_L}jyM)Vp|(owwG^PgYrbe(>*(m{*|o}@)BJSQ0tCpiUutD(iL4Alg}xo&akO#1
z^u};@`O2b4LQQy}L*qepk{>SO+<WN6%RJ)VYmnP*4vwWI3s=s8fq{;Wj#y$P$Fro)
z4(g(21e{Drory1xZuEKjMVZxUJnHmU=3#%asYkF?8$@$zQfk4o>4NOrkFuq!>BG`!
z2WI(}F1EF5@Pe$VDf)_%@7(-6{Nwt_z3LLvb8We3Wy+(`i3>GlXK6@G;)8Rq;d*Ms
zM&9$GL5~V&-r8yB@tI}Bwzr<;16gAOT&Q7)+T8BQh$*Sl1XC`N%X64`JHI;<2>s4~
zrJ63j9uG|PCE3MkV&DdE?>v7H69ltu;@P>yk3dtjwY@rumE7av;?q;?hQ2TFyswXh
z=+0b8bDU!^&L(f%tJfarqnshjGt+60`Qz-uE!|x-R_KsS^q)U{B)q8cUEStf;44U0
zFiA-tTOC??GpEms)G()Jr)~itm1^Y}W@$k|LFxw<6nlJJ94mcTc!TAGM@jh!+@f5f
zlMTTQ1_FI^RPSSCMLB87omefhXF@v-iL<v{c)RX2C~q@Culc;O#%rG8?&gONA<gHH
zmc5bS@Q8>-&mgy~A|2#XU0ogc(Y=(2{&$&g^z}G8E6U)JgzNP996b}xWN)0A*;i_@
zcWX=XD3xg2&E`eJ@BDDG-g4i})Rg-p{Pg0FC32QU$tAL`q)BH7JtUoo)E2EJcY!in
zIir}S_@n|?Cl#Q?!otGw5@tqZJ<D?GL*or<NRgJtj&XT_dq8>v!#v~`D%P#gvFT60
zTyW4J)20@GSQi}~?flv~(}L6dU9J7wo@Lid77RBO<s~Jzs7KNwEn|jhdRmc7&t(}>
zi<D;mEB=t{H@r2IBs!wvw%V!Z&qDNq7|bL?AwE#%j80_;eM)Moy}f<Z^NI<x%g<&p
zCa3Mc^oAt}1)2mTm?7fW0?+q}|H^GuZV&E(i?T*3P`_jCZuTg(buX>1x=&P<ntc9J
z*%}kGJY0SbEqVR?_wDWNS^DY+)zmC2ZN5@Yx&1m__Y}RMk)d{Z-UelCZfIagtE{x{
zq^=RTN9g7&1z#=`Wn<CQVTg2A0Thz$gT=n9c(=9vQ_3Uj5-}iZK>!=eW~oLCuPrVq
zVR{RjZ)buN<6|q&KBVl8y>h|&_%Ovk!0l^j(igiH%e)4lyFP%CS(uM;U$5mWU~~BE
z&Wy1W1JqyE6yEg?wR?7whIpC=&qTw2f=b-hqM;Jh)_)TJ)&GAO|Lmtq{1@Xt1O2VW
pe+K$njel571$xPL*g$iN244YBN;*Sc`~3$9xVo-diOT&){{u%X)4u=!

literal 0
HcmV?d00001


From f20dbc88db9cdfcd1d11b0cba221d3f9e2f5c88a Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Wed, 10 Apr 2024 10:18:56 -0400
Subject: [PATCH 3/4] Tie the images to the shapes

---
 app/pages/PageEnigma/store/media.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index bef722b1f3..51167876fa 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -538,27 +538,27 @@ export const shapeItems = signal<MediaItem[]>([
     media_id: "Box",
     type: AssetType.SHAPE,
     name: "Cube",
-    thumbnail: "resources/placeholders/placeholder.png",
+    thumbnail: "resources/shapes/cube.png",
   },
   {
     version: 1,
     media_id: "Cylinder",
     type: AssetType.SHAPE,
     name: "Cylinder",
-    thumbnail: "resources/placeholders/placeholder.png",
+    thumbnail: "resources/shapes/cylinder.png",
   },
   {
     version: 1,
     media_id: "Donut",
     type: AssetType.SHAPE,
     name: "Donut",
-    thumbnail: "resources/placeholders/placeholder.png",
+    thumbnail: "resources/shapes/donut.png",
   },
   {
     version: 1,
     media_id: "Sphere",
     type: AssetType.SHAPE,
     name: "Sphere",
-    thumbnail: "resources/placeholders/placeholder.png",
+    thumbnail: "resources/shapes/sphere.png",
   },
 ]);

From 86007a33eecf824f57c0e3a4ef79a600c9d481c3 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Wed, 10 Apr 2024 14:07:43 -0400
Subject: [PATCH 4/4] Modified timeline so less changes are present.

---
 app/pages/PageEnigma/js/timeline.ts | 1021 +++++++++++++--------------
 1 file changed, 477 insertions(+), 544 deletions(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 5e0ce1f103..a1fe8a693d 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -13,561 +13,494 @@ import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
 import { MediaItem } from "~/pages/PageEnigma/models";
-import Editor from "~/pages/PageEnigma/js/editor";
-
 // Every object uuid / entity has a track.
 export class TimelineDataState {
-  timeline_items: ClipUI[];
-  scrubber_frame_position: number;
-  constructor(
-    timeline_items: ClipUI[] = [],
-    scrubber_frame_position: number = 0,
-  ) {
-    this.timeline_items = timeline_items;
-    this.scrubber_frame_position = scrubber_frame_position;
-  }
+    timeline_items: ClipUI[];
+    scrubber_frame_position: number;
+    constructor(
+        timeline_items: ClipUI[] = [],
+        scrubber_frame_position: number = 0,
+    ) {
+        this.timeline_items = timeline_items;
+        this.scrubber_frame_position = scrubber_frame_position;
+    }
 }
 
 export class TimeLine {
-  editorEngine: Editor;
-  timeline_items: ClipUI[];
+    timeline_items: ClipUI[];
 
-  timeline_limit: number;
-  absolute_end: number;
-  scrubber_frame_position: number;
-  is_playing: boolean;
+    timeline_limit: number;
+    absolute_end: number;
+    scrubber_frame_position: number;
+    is_playing: boolean;
 
-  // plays audio
-  audio_engine: AudioEngine;
-  // key framing
-  transform_engine: TransformEngine;
-  // animation engine
-  animation_engine: AnimationEngine;
-  // lip sync engine
-  lipSync_engine: LipSyncEngine;
-  characters: { [key: string]: ClipGroup };
+    // plays audio
+    audio_engine: AudioEngine;
+    // key framing
+    transform_engine: TransformEngine;
+    // animation engine
+    animation_engine: AnimationEngine;
+    // lip sync engine
+    lipSync_engine: LipSyncEngine;
+    characters: { [key: string]: ClipGroup };
 
-  scene: Scene;
+    scene: Scene;
 
-  current_time: number;
+    current_time: number;
 
-  // ensure that the elements are loaded first.
-  constructor(
-    editor: Editor,
-    audio_engine: AudioEngine,
-    transform_engine: TransformEngine,
-    lipsync_engine: LipSyncEngine,
-    animation_engine: AnimationEngine,
-    scene: Scene,
-  ) {
-    this.editorEngine = editor;
-    this.timeline_items = [];
-    this.characters = {};
-    this.absolute_end = 60 * 12;
-    this.timeline_limit = 0; // 5 seconds
-
-    this.is_playing = false;
-    this.scrubber_frame_position = 0; // in frames into the tl
-
-    // this will be used to play the audio clips
-    this.audio_engine = audio_engine;
-    this.transform_engine = transform_engine;
-    this.lipSync_engine = lipsync_engine;
-    this.animation_engine = animation_engine;
-
-    this.scene = scene;
-
-    Queue.subscribe(
-      QueueNames.TO_ENGINE,
-      this.handleTimelineActions.bind(this),
-    );
-
-    this.current_time = 0;
-  }
-
-  public async updateUI() {
-    Queue.publish({
-      queueName: QueueNames.FROM_ENGINE,
-      action: fromEngineActions.UPDATE_TIME_LINE,
-      data: this.timeline_items,
-    });
-  }
-
-  public async pushEvent(action: fromEngineActions, data: any) {
-    this.current_time += 1;
-    Queue.publish({
-      queueName: QueueNames.FROM_ENGINE,
-      action: fromEngineActions.UPDATE_TIME,
-      data: data,
-    });
-  }
-
-  public async handleTimelineActions(data: any) {
-    const action = data["action"];
-    switch (action) {
-      case toEngineActions.ADD_KEYFRAME:
-        await this.addKeyFrame(data);
-        break;
-      case toEngineActions.UPDATE_KEYFRAME:
-        await this.updateKeyFrame(data);
-        break;
-      case toEngineActions.DELETE_KEYFRAME:
-        await this.deleteKeyFrame(data);
-        break;
-      case toEngineActions.ADD_CLIP:
-        await this.addClip(data);
-        break;
-      case toEngineActions.DELETE_CLIP:
-        await this.deleteClip(data);
-        break;
-      case toEngineActions.UPDATE_CLIP:
-        await this.updateClip(data);
-        break;
-      case toEngineActions.UPDATE_TIME:
-        await this.scrub(data);
-        break;
-      case toEngineActions.MUTE:
-        await this.mute(data, false);
-        break;
-      case toEngineActions.UNMUTE:
-        await this.mute(data, true);
-        break;
-      case toEngineActions.ADD_CHARACTER:
-        await this.addCharacter(data);
-        break;
-      case toEngineActions.ADD_OBJECT:
-        await this.addObject(data);
-        break;
-      case toEngineActions.ADD_SHAPE:
-        await this.addShape(data);
-        break;
-      default:
-        console.log("Action Not Wired", action);
-    }
-  }
-
-  public async addCharacter(data: { data: MediaItem }) {
-    const media_id = data.data.media_id;
-    const name = data.data.name;
-
-    const obj = await this.scene.load_glb(media_id);
-    obj.userData["name"] = name;
-    obj.name = name;
-    const object_uuid = obj.uuid;
-
-    this.characters[object_uuid] = ClipGroup.CHARACTER;
-
-    data.data["object_uuid"] = object_uuid;
-    Queue.publish({
-      queueName: QueueNames.FROM_ENGINE,
-      action: fromEngineActions.UPDATE_CHARACTER_ID,
-      data: data.data,
-    });
-
-    this.addPlayableClip(
-      new ClipUI(
-        data.data["version"],
-        ClipType.FAKE,
-        ClipGroup.CHARACTER,
-        "Default",
-        media_id,
-        obj.uuid,
-        obj.uuid,
-        name,
-        0,
-        0,
-        0,
-      ),
-    );
-  }
-
-  public async addObject(data: { data: MediaItem }) {
-    const media_id = data.data.media_id;
-    const name = data.data.name;
-    const obj = await this.scene.load_glb(media_id);
-    obj.userData["name"] = name;
-    obj.name = name;
-  }
-
-  public async addShape({ data }: { data: MediaItem }) {
-    this.editorEngine.create_parim(data.media_id);
-  }
-
-  public async addKeyFrame(data: any) {
-    // KeyFrame Object
-    // version: number;
-    // clip_uuid: string;
-    // group: ClipGroup;
-    // object_uuid?: string;
-    // offset: number;
-    // position: XYZ
-    // rotation: XYZ;
-    // scale: XYZ;
-    // selected?: boolean;
-    const data_json = data["data"];
-    const uuid = data_json["object_uuid"];
-    const keyframe_uuid = data_json["keyframe_uuid"];
-
-    let object_name = this.scene.get_object_by_uuid(uuid)?.name;
-    if (object_name === undefined) {
-      object_name = "undefined";
-    }
-
-    const new_item = this.transform_engine.addFrame(
-      uuid,
-      this.absolute_end,
-      data_json["position"],
-      data_json["rotation"],
-      data_json["scale"],
-      data_json["offset"],
-      data_json["keyframe_uuid"],
-    );
-
-    await this.addPlayableClip(
-      new ClipUI(
-        data_json["version"],
-        ClipType.TRANSFORM,
-        data_json["group"],
-        object_name,
-        "",
-        keyframe_uuid,
-        uuid,
-        object_name,
-        0,
-        this.absolute_end,
-        data_json["offset"],
-      ),
-    );
-
-    this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
-  }
-
-  public deleteObject(object_uuid: string) {
-    this.timeline_items = this.timeline_items.filter(
-      (element) => element.object_uuid !== object_uuid,
-    );
-    // Update react land here.
-  }
-
-  public async addClip(data: any) {
-    const object_uuid = data["data"]["object_uuid"];
-    const media_id = data["data"]["media_id"];
-    const name = data["data"]["name"];
-    const group = data["data"]["group"];
-    const version = data["data"]["group"];
-    const type = data["data"]["type"];
-    const offset = data["data"]["offset"];
-    const end_offset = data["data"]["length"] + offset;
-    let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
-    const clip_uuid = data["data"]["clip_uuid"];
-
-    if (object_name === undefined) {
-      object_name = "Undefined.";
-    }
-
-    switch (type) {
-      case "animation":
-        this.animation_engine.load_object(object_uuid, media_id, name);
-        break;
-      case "transform":
-        this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
-        break;
-      case "audio":
-        if (group === "character") {
-          this.lipSync_engine.load_object(object_uuid, media_id);
-          // media id for this as well it can be downloaded
-          this.addPlayableClip(
-            new ClipUI(
-              version,
-              ClipType.AUDIO,
-              ClipGroup.CHARACTER,
-              name,
-              media_id,
-              clip_uuid,
-              object_uuid,
-              object_name,
-              offset,
-              end_offset,
-            ),
-          );
-          return;
-        } else {
-          this.audio_engine.loadClip(media_id);
-        }
-        break;
-    }
-
-    // media id for this as well it can be downloaded
-    this.addPlayableClip(
-      new ClipUI(
-        version,
-        type,
-        group,
-        name,
-        media_id,
-        clip_uuid,
-        object_uuid,
-        object_name,
-        offset,
-        end_offset,
-      ),
-    );
-  }
-
-  public async deleteKeyFrame(data: any) {
-    const keyframe_uuid = data["data"]["keyframe_uuid"];
-    const object_uuid = data["data"]["object_uuid"];
-    this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
-    this.scene.deletePoint(keyframe_uuid);
-  }
-
-  public async updateKeyFrame(data: any) {
-    const keyframe_uuid = data["data"]["keyframe_uuid"];
-    const keyframe_offset = data["data"]["offset"];
-    const object_uuid = data["data"]["object_uuid"];
-    this.transform_engine.clips[object_uuid].setOffset(
-      keyframe_uuid,
-      keyframe_offset,
-    );
-  }
-
-  public async updateClip(data: any) {
-    // only length and offset changes here.
-    const object_uuid = data["data"]["object_uuid"];
-    const media_id = data["data"]["media_id"];
-    const offset = data["data"]["offset"];
-    const length = data["data"]["length"] + offset;
-
-    for (const element of this.timeline_items) {
-      if (
-        element.media_id === media_id &&
-        element.object_uuid === object_uuid
-      ) {
-        element.length = length;
-        element.offset = offset;
-      }
-    }
-  }
-
-  public async deleteClip(data: any) {
-    const json_data = data["data"];
-    const object_uuid = data["data"]["object_uuid"];
-    const media_id = data["data"]["media_id"];
-    const type = data["type"];
-
-    for (let i = 0; i < this.timeline_items.length; i++) {
-      const element = this.timeline_items[i];
-      if (
-        element.media_id === media_id &&
-        element.object_uuid === object_uuid
-      ) {
-        this.timeline_items.splice(i, 1);
-        break;
-      }
-    }
-  }
-
-  public async scrubberUpdate(data: any) {
-    console.log(data);
-  }
-
-  public async mute(data: any, isMute: boolean) {
-    this.timeline_items.forEach((element) => {
-      if (element.group === data.data["group"]) {
-        element.should_play = isMute;
-      }
-    });
-  }
-
-  public async addPlayableClip(clip: ClipUI): Promise<void> {
-    this.timeline_items.push(clip);
-  }
-
-  // when given a media id item it will create the clip.
-  // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
-  public async createClipOffset(
-    media_id: string,
-    object_uuid: string,
-    type: string,
-  ): Promise<void> {
-    // use engine to load based off media id and type animation | transform |
-  }
-
-  // this will update the state of the clips based off uuid easing?
-  public async updatePlayableClip(
-    clip_uuid: string,
-    updates: AnyJson,
-  ): Promise<void> {}
-
-  public async deletePlayableClip(clip_uuid: string): Promise<void> {}
-
-  public async scrub(data: any): Promise<void> {
-    if (this.is_playing) {
-      return;
-    }
-    this.update();
-    this.setScrubberPosition(data["data"]["currentTime"]);
-  }
-
-  public async stepFrame(frames: number) {
-    this.update();
-    this.scrubber_frame_position += frames;
-    this.pushEvent(fromEngineActions.UPDATE_TIME, {
-      currentTime: this.scrubber_frame_position,
-    });
-  }
-
-  public async scrubberDidStop(offset_frame: number) {}
-  // public streaming events into the timeline from
-  public async setScrubberPosition(offset: number) {
-    this.scrubber_frame_position = offset; // in ms
-  }
-
-  // should play from the clip that is closest to the to scrubber
-  public async play(): Promise<void> {
-    console.log(`Starting Timeline`);
-    this.is_playing = true;
-  }
-
-  private async resetScene() {
-    for (const element of this.timeline_items) {
-      if (element.type === ClipType.TRANSFORM) {
-        const object = this.scene.get_object_by_uuid(element.object_uuid);
-        if (object && this.transform_engine.clips[element.object_uuid]) {
-          this.transform_engine.clips[element.object_uuid].reset(object);
-        }
-      } else if (
-        element.type === ClipType.AUDIO &&
-        element.group !== ClipGroup.CHARACTER
-      ) {
-        this.audio_engine.loadClip(element.media_id);
-        this.audio_engine.stopClip(element.media_id);
-      } else if (element.type === ClipType.ANIMATION) {
-        this.animation_engine.clips[
-          element.object_uuid + element.media_id
-        ].stop();
-      } else if (
-        element.type === ClipType.AUDIO &&
-        element.group === ClipGroup.CHARACTER
-      ) {
-        this.lipSync_engine.clips[
-          element.object_uuid + element.media_id
-        ].reset();
-      }
-    }
-  }
-
-  private getEndPoint(): number {
-    let longest = 0;
-    for (const element of this.timeline_items) {
-      if (longest < element.length) {
-        longest = element.length;
-      }
-    }
-    return longest;
-  }
-
-  // called by the editor update loop on each frame
-  public async update(isRendering = false): Promise<boolean> {
-    //if (this.is_playing === false) return; // start and stop
-    this.timeline_limit = this.getEndPoint();
-    if (this.is_playing) {
-      this.current_time += 1;
-      this.pushEvent(fromEngineActions.UPDATE_TIME, {
-        currentTime: this.current_time,
-      });
-      this.scrubber_frame_position = this.current_time;
-    }
-
-    if (this.scrubber_frame_position <= 0) {
-      await this.resetScene();
-    }
-
-    //this.scrubber_frame_position += 1;
-    //2. allow stopping.
-    //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
-    for (const element of this.timeline_items) {
-      if (
-        element.offset <= this.scrubber_frame_position &&
-        this.scrubber_frame_position <= element.length &&
-        element.should_play === true
-      ) {
-        // run async
-        // element.play()
-        // remove the element from the list
-        const object = this.scene.get_object_by_uuid(element.object_uuid);
-        if (element.type === ClipType.TRANSFORM) {
-          if (object && this.transform_engine.clips[element.object_uuid]) {
-            this.transform_engine.clips[element.object_uuid].step(
-              object,
-              element.offset,
-              this.scrubber_frame_position,
-            );
-            element.length =
-              this.transform_engine.clips[element.object_uuid].length;
-          }
-        } else if (
-          element.type === ClipType.AUDIO &&
-          element.group !== ClipGroup.CHARACTER
-        ) {
-          if (this.scrubber_frame_position + 1 >= element.length) {
-            this.audio_engine.stopClip(element.media_id);
-          } else {
-            this.audio_engine.playClip(element.media_id);
-          }
-        } else if (
-          element.type === ClipType.AUDIO &&
-          element.group === ClipGroup.CHARACTER
-        ) {
-          // we will remove this when we know which group it will come from character + audio === lip sync audio.
-          if (this.scrubber_frame_position + 1 >= element.length) {
-            this.lipSync_engine.clips[
-              element.object_uuid + element.media_id
-            ].stop();
-          } else if (object) {
-            await this.lipSync_engine.clips[
-              element.object_uuid + element.media_id
-            ].play(object);
-            this.lipSync_engine.clips[
-              element.object_uuid + element.media_id
-            ].step();
-          }
-        } else if (element.type === ClipType.ANIMATION) {
-          if (object) {
-            await this.animation_engine.clips[
-              object.uuid + element.media_id
-            ].play(object);
-            let fps = 120;
-            if (isRendering) {
-              fps = 60;
-            }
-            this.animation_engine.clips[object.uuid + element.media_id].step(
-              this.scrubber_frame_position / fps, // Double FPS for best result.
-            );
-          }
-        }
-        //this.timelineItems = this.timelineItems.filter(item => item !== element)
-      }
-    }
-
-    if (
-      this.scrubber_frame_position >= this.timeline_limit &&
-      this.is_playing
+    // ensure that the elements are loaded first.
+    constructor(
+        audio_engine: AudioEngine,
+        transform_engine: TransformEngine,
+        lipsync_engine: LipSyncEngine,
+        animation_engine: AnimationEngine,
+        scene: Scene,
     ) {
-      await this.stop();
-      return true;
+        this.timeline_items = [];
+        this.characters = {};
+        this.absolute_end = 60 * 12;
+        this.timeline_limit = 0; // 5 seconds
+
+        this.is_playing = false;
+        this.scrubber_frame_position = 0; // in frames into the tl
+
+        // this will be used to play the audio clips
+        this.audio_engine = audio_engine;
+        this.transform_engine = transform_engine;
+        this.lipSync_engine = lipsync_engine;
+        this.animation_engine = animation_engine;
+
+        this.scene = scene;
+
+        Queue.subscribe(
+            QueueNames.TO_ENGINE,
+            this.handleTimelineActions.bind(this),
+        );
+
+        this.current_time = 0;
     }
 
-    return false;
-  }
+    public async updateUI() {
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_TIME_LINE,
+            data: this.timeline_items,
+        });
+    }
 
-  private async stop(): Promise<void> {
-    await this.resetScene();
-    this.is_playing = false;
-    console.log(`Stopping Timeline`);
-    this.current_time = 0;
-    this.pushEvent(fromEngineActions.UPDATE_TIME, {
-      currentTime: this.current_time,
-    });
-  }
-}
+    public async pushEvent(action: fromEngineActions, data: any) {
+        this.current_time += 1;
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_TIME,
+            data: data,
+        });
+    }
+
+    public async handleTimelineActions(data: any) {
+        const action = data["action"];
+        switch (action) {
+            case toEngineActions.ADD_KEYFRAME:
+                await this.addKeyFrame(data);
+                break;
+            case toEngineActions.UPDATE_KEYFRAME:
+                await this.updateKeyFrame(data);
+                break;
+            case toEngineActions.DELETE_KEYFRAME:
+                await this.deleteKeyFrame(data);
+                break;
+            case toEngineActions.ADD_CLIP:
+                await this.addClip(data);
+                break;
+            case toEngineActions.DELETE_CLIP:
+                await this.deleteClip(data);
+                break;
+            case toEngineActions.UPDATE_CLIP:
+                await this.updateClip(data);
+                break;
+            case toEngineActions.UPDATE_TIME:
+                await this.scrub(data);
+                break;
+            case toEngineActions.MUTE:
+                await this.mute(data, false);
+                break;
+            case toEngineActions.UNMUTE:
+                await this.mute(data, true);
+                break;
+            case toEngineActions.ADD_CHARACTER:
+                await this.addCharacter(data);
+                break;
+            case toEngineActions.ADD_OBJECT:
+                await this.addObject(data);
+                break;
+            case toEngineActions.ADD_SHAPE:
+                    await this.addShape(data);
+                    break;
+            default:
+                console.log("Action Not Wired", action);
+        }
+    }
+
+    public async addShape({ data }: { data: MediaItem }) {
+        this.scene.instantiate(data.media_id);
+      }
+
+    public async addCharacter(data: any) {
+        let media_id = data.data['media_id'];
+        let name = data.data['name'];
+        let type = data.data['type'];
+
+        let obj = await this.scene.load_glb(media_id);
+        obj.userData['name'] = name;
+        obj.name = name;
+        let object_uuid = obj.uuid;
+
+        this.characters[object_uuid] = ClipGroup.CHARACTER;
+
+        data.data['object_uuid'] = object_uuid;
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_CHARACTER_ID,
+            data: data.data,
+        });
+
+        this.addPlayableClip(new ClipUI(data.data['version'], ClipType.FAKE, ClipGroup.CHARACTER, "Default", media_id, obj.uuid, obj.uuid, name, 0, 0, 0));
+    }
+
+    public async addObject(data: any) {
+        let media_id = data.data['media_id'];
+        let name = data.data['name'];
+        let obj = await this.scene.load_glb(media_id);
+        obj.userData['name'] = name;
+        obj.name = name;
+    }
+
+    public async addKeyFrame(data: any) {
+        // KeyFrame Object
+        // version: number;
+        // clip_uuid: string;
+        // group: ClipGroup;
+        // object_uuid?: string;
+        // offset: number;
+        // position: XYZ
+        // rotation: XYZ;
+        // scale: XYZ;
+        // selected?: boolean;
+        let data_json = data['data'];
+        let uuid = data_json['object_uuid'];
+        let keyframe_uuid = data_json['keyframe_uuid'];
+
+        let object_name = this.scene.get_object_by_uuid(uuid)?.name;
+        if (object_name === undefined) {
+            object_name = "undefined"
+        }
+
+        let new_item = this.transform_engine.addFrame(uuid,
+            this.absolute_end,
+            data_json['position'],
+            data_json['rotation'],
+            data_json['scale'],
+            data_json['offset'],
+            data_json['keyframe_uuid']);
+        
+        await this.addPlayableClip(new ClipUI(
+            data_json['version'],
+            ClipType.TRANSFORM,
+            data_json['group'],
+            object_name,
+            "",
+            keyframe_uuid,
+            uuid,
+            object_name,
+            0,
+            this.absolute_end,
+            data_json['offset']))
+
+        this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']);
+    }
+
+    public deleteObject(object_uuid: string) {
+        this.timeline_items = this.timeline_items.filter(element => element.object_uuid !== object_uuid);
+        // Update react land here.
+    }
+
+    public async addClip(data: any) {
+        const object_uuid = data["data"]["object_uuid"];
+        const media_id = data["data"]["media_id"];
+        const name = data["data"]["name"];
+        const group = data["data"]["group"];
+        const version = data["data"]["group"];
+        const type = data["data"]["type"];
+        const offset = data["data"]["offset"];
+        const end_offset = data["data"]["length"] + offset;
+        let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
+        const clip_uuid = data["data"]['clip_uuid'];
+
+        if (object_name === undefined) {
+            object_name = "Undefined."
+        }
+
+        switch (type) {
+            case "animation":
+                this.animation_engine.load_object(object_uuid, media_id, name);
+                break;
+            case "transform":
+                this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
+                break;
+            case "audio":
+                if (group === "character") {
+                    this.lipSync_engine.load_object(object_uuid, media_id);
+                    // media id for this as well it can be downloaded
+                    this.addPlayableClip(
+                        new ClipUI(
+                            version,
+                            ClipType.AUDIO,
+                            ClipGroup.CHARACTER,
+                            name,
+                            media_id,
+                            clip_uuid,
+                            object_uuid,
+                            object_name,
+                            offset,
+                            end_offset));
+                    return;
+                } else {
+                    this.audio_engine.loadClip(media_id);
+                }
+                break;
+        }
+
+        // media id for this as well it can be downloaded
+        this.addPlayableClip(
+            new ClipUI(
+                version,
+                type,
+                group,
+                name,
+                media_id,
+                clip_uuid,
+                object_uuid,
+                object_name,
+                offset,
+                end_offset,
+            ),
+        );
+    }
+
+    public async deleteKeyFrame(data: any) {
+        let keyframe_uuid = data['data']["keyframe_uuid"];
+        let object_uuid = data['data']['object_uuid'];
+        this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
+        this.scene.deletePoint(keyframe_uuid);
+    }
+
+    public async updateKeyFrame(data: any) {
+        let keyframe_uuid = data['data']["keyframe_uuid"];
+        let keyframe_offset = data['data']["offset"];
+        let object_uuid = data['data']['object_uuid'];
+        this.transform_engine.clips[object_uuid].setOffset(keyframe_uuid, keyframe_offset);
+    }
+
+    public async updateClip(data: any) {
+        // only length and offset changes here.
+        let object_uuid = data["data"]["object_uuid"];
+        const media_id = data["data"]["media_id"];
+        const offset = data["data"]["offset"];
+        const length = data["data"]["length"] + offset;
+
+        for (const element of this.timeline_items) {
+            if (element.media_id === media_id && element.object_uuid === object_uuid) {
+                element.length = length;
+                element.offset = offset;
+            }
+        }
+    }
+
+    public async deleteClip(data: any) {
+        let json_data = data['data'];
+        let object_uuid = data["data"]["object_uuid"];
+        let media_id = data["data"]["media_id"];
+        let type = data['type']
+
+        for (let i = 0; i < this.timeline_items.length; i++) {
+            const element = this.timeline_items[i];
+            if (element.media_id === media_id && element.object_uuid ===object_uuid) {
+                this.timeline_items.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    public async scrubberUpdate(data: any) {
+        console.log(data);
+    }
+
+    public async mute(data: any, isMute: boolean) {
+        this.timeline_items.forEach(element => {
+            if (element.group === data.data['group']) {
+                element.should_play = isMute;
+            }
+        });
+    }
+
+    public async addPlayableClip(clip: ClipUI): Promise<void> {
+        this.timeline_items.push(clip);
+    }
+
+    // when given a media id item it will create the clip.
+    // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
+    public async createClipOffset(
+        media_id: string,
+        object_uuid: string,
+        type: string,
+    ): Promise<void> {
+        // use engine to load based off media id and type animation | transform |
+    }
+
+    // this will update the state of the clips based off uuid easing?
+    public async updatePlayableClip(
+        clip_uuid: string,
+        updates: AnyJson,
+    ): Promise<void> { }
+
+    public async deletePlayableClip(clip_uuid: string): Promise<void> { }
+
+    public async scrub(data: any): Promise<void> {
+        if (this.is_playing) {
+            return;
+        }
+        this.update();
+        this.setScrubberPosition(data["data"]["currentTime"]);
+    }
+
+    public async stepFrame(frames: number) {
+        this.update();
+        this.scrubber_frame_position += frames;
+        this.pushEvent(fromEngineActions.UPDATE_TIME, {
+            currentTime: this.scrubber_frame_position,
+        });
+    }
+
+    public async scrubberDidStop(offset_frame: number) { }
+    // public streaming events into the timeline from
+    public async setScrubberPosition(offset: number) {
+        this.scrubber_frame_position = offset; // in ms
+    }
+
+    // should play from the clip that is closest to the to scrubber
+    public async play(): Promise<void> {
+        console.log(`Starting Timeline`);
+        this.is_playing = true;
+    }
+
+    private async resetScene() {
+        for (const element of this.timeline_items) {
+            if (element.type === ClipType.TRANSFORM) {
+                const object = this.scene.get_object_by_uuid(element.object_uuid);
+                if (object && this.transform_engine.clips[element.object_uuid]) {
+                    this.transform_engine.clips[element.object_uuid].reset(object);
+                }
+            } else if (element.type === ClipType.AUDIO  && element.group !== ClipGroup.CHARACTER) {
+                this.audio_engine.loadClip(element.media_id);
+                this.audio_engine.stopClip(element.media_id);
+            } else if (element.type === ClipType.ANIMATION) {
+                this.animation_engine.clips[element.object_uuid + element.media_id].stop();
+            } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) {
+                this.lipSync_engine.clips[element.object_uuid + element.media_id].reset();
+            }
+        }
+    }
+
+    private getEndPoint(): number {
+        let longest = 0;
+        for (const element of this.timeline_items) {
+            if (longest < element.length) {
+                longest = element.length;
+            }
+        }
+        return longest;
+    }
+
+    // called by the editor update loop on each frame
+    public async update(isRendering = false): Promise<boolean> {
+        //if (this.is_playing === false) return; // start and stop
+        this.timeline_limit = this.getEndPoint();
+        if (this.is_playing) {
+            this.current_time += 1;
+            this.pushEvent(fromEngineActions.UPDATE_TIME, {
+                currentTime: this.current_time,
+            });
+            this.scrubber_frame_position = this.current_time;
+        }
+
+        if (this.scrubber_frame_position <= 0) {
+            await this.resetScene();
+        }
+
+        //this.scrubber_frame_position += 1;
+        //2. allow stopping.
+        //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
+        for (const element of this.timeline_items) {
+            if (
+                element.offset <= this.scrubber_frame_position &&
+                this.scrubber_frame_position <= element.length &&
+                element.should_play === true
+            ) {
+                // run async
+                // element.play()
+                // remove the element from the list
+                const object = this.scene.get_object_by_uuid(element.object_uuid);
+                if (element.type === ClipType.TRANSFORM) {
+                    if (object && this.transform_engine.clips[element.object_uuid]) {
+                        this.transform_engine.clips[element.object_uuid].step(
+                            object,
+                            element.offset,
+                            this.scrubber_frame_position,
+                        );
+                        element.length = this.transform_engine.clips[element.object_uuid].length;
+                    }
+                } else if (element.type === ClipType.AUDIO && element.group !== ClipGroup.CHARACTER) {
+                    if (this.scrubber_frame_position + 1 >= element.length) {
+                        this.audio_engine.stopClip(element.media_id);
+                    } else {
+                        this.audio_engine.playClip(element.media_id);
+                    }
+                } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) { // we will remove this when we know which group it will come from character + audio === lip sync audio.
+                    if (this.scrubber_frame_position + 1 >= element.length) {
+                        this.lipSync_engine.clips[element.object_uuid + element.media_id].stop();
+                    } else if (object) {
+                        await this.lipSync_engine.clips[element.object_uuid + element.media_id].play(object);
+                        this.lipSync_engine.clips[element.object_uuid + element.media_id].step();
+                    }
+                } else if (element.type === ClipType.ANIMATION) {
+                    if (object) {
+                        await this.animation_engine.clips[object.uuid + element.media_id].play(object);
+                        let fps = 120;
+                        if (isRendering) { fps = 60; }
+                        this.animation_engine.clips[object.uuid + element.media_id].step(
+                            this.scrubber_frame_position / fps, // Double FPS for best result.
+                        );
+                    }
+                }
+                //this.timelineItems = this.timelineItems.filter(item => item !== element)
+            }
+        }
+
+        if (this.scrubber_frame_position >= this.timeline_limit && this.is_playing) {
+            await this.stop();
+            return true;
+        }
+
+        return false;
+    }
+
+    private async stop(): Promise<void> {
+        await this.resetScene();
+        this.is_playing = false;
+        console.log(`Stopping Timeline`);
+        this.current_time = 0;
+        this.pushEvent(fromEngineActions.UPDATE_TIME, {
+            currentTime: this.current_time,
+        });
+    }
+}
\ No newline at end of file