From 538037f4992edf93cb7f0f0055275d588123febb Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:13:00 -0400
Subject: [PATCH 01/24] Load char plumbing.

---
 app/pages/PageEnigma/Queue/Queue.ts           |  8 +++----
 app/pages/PageEnigma/Queue/toEngineActions.ts |  5 +++++
 .../contexts/TrackContext/TrackProvider.tsx   |  6 +++--
 app/pages/PageEnigma/js/timeline.ts           |  6 +++++
 app/pages/PageEnigma/store/characterGroups.ts | 22 +++++++++++++++++++
 5 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts
index d793335c0..386c14d6c 100644
--- a/app/pages/PageEnigma/Queue/Queue.ts
+++ b/app/pages/PageEnigma/Queue/Queue.ts
@@ -12,14 +12,14 @@ class Queue {
     string,
     {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string;
     }[]
   > = {};
   private _subscribers: Record<
     string,
     (entry: {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string;
     }) => void
   > = {};
 
@@ -30,7 +30,7 @@ class Queue {
   }: {
     queueName: string;
     action: fromEngineActions | toEngineActions | toTimelineActions;
-    data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] ;
+    data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string ;
   }) {
     if (!this._queue[queueName]) {
       this._queue[queueName] = [];
@@ -47,7 +47,7 @@ class Queue {
     queueName: string,
     onMessage: (entry: {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string;
     }) => void,
   ) {
     this._subscribers[queueName] = onMessage;
diff --git a/app/pages/PageEnigma/Queue/toEngineActions.ts b/app/pages/PageEnigma/Queue/toEngineActions.ts
index 9a601aa64..4be824491 100644
--- a/app/pages/PageEnigma/Queue/toEngineActions.ts
+++ b/app/pages/PageEnigma/Queue/toEngineActions.ts
@@ -2,6 +2,11 @@ export enum toEngineActions {
   ADD_CLIP = "add_clip",
   // data=QueueClip
   ADD_KEYFRAME = "add_keyframe",
+
+  ADD_CHARACTER = "add_character",
+
+  ADD_OBJECT = "add_object",
+
   // data= QueueKeyframe
   DELETE_CLIP = "delete_clip",
   // data=QueueClip
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index 2544eb507..ae8653620 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -6,6 +6,7 @@ import {
   addCharacterAnimation,
   addCharacterAudio,
   addGlobalAudio,
+  addCharacter,
   canDrop,
   dragItem,
   dropId,
@@ -25,7 +26,8 @@ export const TrackProvider = ({ children }: Props) => {
   // cross group functions
   const dropClip = useCallback(() => {
 
-    console.log(`${canDrop.value} ${dragItem.value} ${dragItem.value.type}`)
+   
+    console.log(`${JSON.stringify(dragItem)}`)
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {
         addCharacterAnimation({
@@ -47,7 +49,7 @@ export const TrackProvider = ({ children }: Props) => {
         });
       }
       if (dragItem.value.type === AssetType.CHARACTER) {
-        console.log("Dragged In Character Type")
+        addCharacter(dragItem)
       }
       if (dragItem.value.type === AssetType.CAMERA) {
         console.log("Dragged In Camera Type")
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index e1090d081..45e329f6b 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -124,6 +124,12 @@ export class TimeLine {
             case toEngineActions.UNMUTE:
                 await this.mute(data, true);
                 break;
+            case toEngineActions.ADD_CHARACTER:
+                // TODO ADD
+                break;
+            case toEngineActions.ADD_OBJECT:
+                 // TODO ADD
+                break;
             default:
                 console.log("Action Not Wired", action);
         }
diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts
index 84fc54c07..f93bde49a 100644
--- a/app/pages/PageEnigma/store/characterGroups.ts
+++ b/app/pages/PageEnigma/store/characterGroups.ts
@@ -333,3 +333,25 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) {
     }),
   }));
 }
+
+// probably not to much to send imo
+export function addCharacter(character:string) {
+  //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
+  // "type":"character","name":"Female Doll",
+  // "thumbnail":"resources/characters/img03.png"}
+  Queue.publish({
+    queueName: QueueNames.TO_ENGINE,
+    action: toEngineActions.ADD_CHARACTER,
+    data: character,
+  });
+}
+export function addObject(object:string) {
+   //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
+  // "type":"character","name":"Female Doll",
+  // "thumbnail":"resources/characters/img03.png"}
+  Queue.publish({
+    queueName: QueueNames.TO_ENGINE,
+    action: toEngineActions.ADD_OBJECT,
+    data: object,
+  });
+}
\ No newline at end of file

From bcbd91db5ec058e723956721ff2c3c27332f46d7 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:19:11 -0400
Subject: [PATCH 02/24] Fixed with media item and listener.

---
 app/pages/PageEnigma/Queue/Queue.ts           |  9 +++---
 .../contexts/TrackContext/TrackProvider.tsx   | 29 +++++++++++--------
 app/pages/PageEnigma/store/characterGroups.ts |  4 +--
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts
index 386c14d6c..2fbfcd789 100644
--- a/app/pages/PageEnigma/Queue/Queue.ts
+++ b/app/pages/PageEnigma/Queue/Queue.ts
@@ -7,19 +7,20 @@ import {
 } from "~/pages/PageEnigma/models";
 import { toTimelineActions } from "./toTimelineActions";
 import { ClipUI } from "../datastructures/clips/clip_ui";
+import { MediaItem } from "~/pages/PageEnigma/models";
 class Queue {
   private _queue: Record<
     string,
     {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string;
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
     }[]
   > = {};
   private _subscribers: Record<
     string,
     (entry: {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string;
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
     }) => void
   > = {};
 
@@ -30,7 +31,7 @@ class Queue {
   }: {
     queueName: string;
     action: fromEngineActions | toEngineActions | toTimelineActions;
-    data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string ;
+    data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem ;
   }) {
     if (!this._queue[queueName]) {
       this._queue[queueName] = [];
@@ -47,7 +48,7 @@ class Queue {
     queueName: string,
     onMessage: (entry: {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string;
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
     }) => void,
   ) {
     this._subscribers[queueName] = onMessage;
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index ae8653620..7c7b97240 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -11,6 +11,7 @@ import {
   dragItem,
   dropId,
   dropOffset,
+  addObject,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 
@@ -28,6 +29,22 @@ export const TrackProvider = ({ children }: Props) => {
 
    
     console.log(`${JSON.stringify(dragItem)}`)
+    // should be able to drag into the timeline ... TODO FIX?
+
+    if (dragItem.value.type === AssetType.CHARACTER) {
+      addCharacter(dragItem)
+    }
+    // if (dragItem.value.type === AssetType.CAMERA) {
+    //   console.log("Dragged In Camera Type")
+    // }
+    if (dragItem.value.type === AssetType.OBJECT) {
+      addObject(dragItem)
+      console.log("Dragged In Object Type")
+    }
+    // if (dragItem.value.type === AssetType.SHAPE) {
+    //   console.log("Dragged In Shape Type")
+    // }
+
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {
         addCharacterAnimation({
@@ -48,18 +65,6 @@ export const TrackProvider = ({ children }: Props) => {
           offset: dropOffset.value,
         });
       }
-      if (dragItem.value.type === AssetType.CHARACTER) {
-        addCharacter(dragItem)
-      }
-      if (dragItem.value.type === AssetType.CAMERA) {
-        console.log("Dragged In Camera Type")
-      }
-      if (dragItem.value.type === AssetType.OBJECT) {
-        console.log("Dragged In Object Type")
-      }
-      if (dragItem.value.type === AssetType.SHAPE) {
-        console.log("Dragged In Shape Type")
-      }
     }
     endDrag();
   }, [endDrag]);
diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts
index f93bde49a..1cff55d2a 100644
--- a/app/pages/PageEnigma/store/characterGroups.ts
+++ b/app/pages/PageEnigma/store/characterGroups.ts
@@ -335,7 +335,7 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) {
 }
 
 // probably not to much to send imo
-export function addCharacter(character:string) {
+export function addCharacter(character:MediaItem) {
   //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
   // "type":"character","name":"Female Doll",
   // "thumbnail":"resources/characters/img03.png"}
@@ -345,7 +345,7 @@ export function addCharacter(character:string) {
     data: character,
   });
 }
-export function addObject(object:string) {
+export function addObject(object:MediaItem) {
    //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
   // "type":"character","name":"Female Doll",
   // "thumbnail":"resources/characters/img03.png"}

From 126a187c0640b885982b2eab3c65d46bd9fd3532 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 21:58:45 -0400
Subject: [PATCH 03/24] add character and add object. also sent data to
 timeline using UPDATE_CHARACTER_ID.

---
 .../PageEnigma/Queue/fromEngineActions.ts     |  1 +
 .../comps/Timeline/utils/useQueueHandler.ts   |  4 ++-
 .../contexts/TrackContext/TrackProvider.tsx   | 26 ++++++++--------
 app/pages/PageEnigma/js/editor.ts             |  2 +-
 app/pages/PageEnigma/js/timeline.ts           | 30 +++++++++++++++++--
 app/pages/PageEnigma/store/media.ts           |  4 +--
 6 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/app/pages/PageEnigma/Queue/fromEngineActions.ts b/app/pages/PageEnigma/Queue/fromEngineActions.ts
index 2e647b32b..484eaaa6d 100644
--- a/app/pages/PageEnigma/Queue/fromEngineActions.ts
+++ b/app/pages/PageEnigma/Queue/fromEngineActions.ts
@@ -1,5 +1,6 @@
 export enum fromEngineActions {
   UPDATE_TIME = "update_time",
   UPDATE_TIME_LINE = "update_timeline",
+  UPDATE_CHARACTER_ID = "update_character_id",
   // data={currentTime: number}
 }
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index c5bf23e06..b64746684 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -29,7 +29,9 @@ export function useQueueHandler() {
         currentTime.value = (data as UpdateTime).currentTime;
         break;
       case fromEngineActions.UPDATE_TIME_LINE:
-        console.log(action)
+        console.log(action);
+      case fromEngineActions.UPDATE_CHARACTER_ID:
+        console.log(action);
       default:
         throw new Error(`Unknown action ${action}`);
     }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index 7c7b97240..747896cef 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -27,19 +27,21 @@ export const TrackProvider = ({ children }: Props) => {
   // cross group functions
   const dropClip = useCallback(() => {
 
-   
-    console.log(`${JSON.stringify(dragItem)}`)
-    // should be able to drag into the timeline ... TODO FIX?
 
-    if (dragItem.value.type === AssetType.CHARACTER) {
-      addCharacter(dragItem)
-    }
-    // if (dragItem.value.type === AssetType.CAMERA) {
-    //   console.log("Dragged In Camera Type")
-    // }
-    if (dragItem.value.type === AssetType.OBJECT) {
-      addObject(dragItem)
-      console.log("Dragged In Object Type")
+    console.log(`${JSON.stringify(dragItem)}`)
+
+    if (dragItem.value != null && dragItem != null) {
+      // should be able to drag into the timeline ... TODO FIX?
+
+      if (dragItem.value.type === AssetType.CHARACTER) {
+        addCharacter(dragItem.value)
+      }
+      // if (dragItem.value.type === AssetType.CAMERA) {
+      //   console.log("Dragged In Camera Type")
+      // }
+      if (dragItem.value.type === AssetType.OBJECT) {
+        addObject(dragItem.value)
+      }
     }
     // if (dragItem.value.type === AssetType.SHAPE) {
     //   console.log("Dragged In Shape Type")
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index af0707f0b..c4f0cf9e1 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -311,7 +311,7 @@ class Editor {
 
     this.timeline.scene = this.activeScene;
 
-    this._test_demo();
+    //this._test_demo();
 
     this.renderer.domElement.addEventListener(
       "mousedown",
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 45e329f6b..dc9072efe 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -125,16 +125,42 @@ export class TimeLine {
                 await this.mute(data, true);
                 break;
             case toEngineActions.ADD_CHARACTER:
-                // TODO ADD
+                await this.addCharacter(data);
                 break;
             case toEngineActions.ADD_OBJECT:
-                 // TODO ADD
+                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;
+
+        data.data['object_uuid'] = object_uuid;
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_CHARACTER_ID,
+            data: data.data,
+        });
+    }
+
+    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;
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index f1579cd77..a920f7f68 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -132,9 +132,9 @@ export const characterItems = signal<MediaItem[]>([
 export const objectItems = signal<MediaItem[]>([
   {
     version: 1,
-    media_id: "m_w5nn3kjh1fbkmjrdac5b2qaba0pmyt",
+    media_id: "m_0xfrmekc56satjxn66wt6c9dkw7dxe",
     type: AssetType.OBJECT,
-    name: "Item ( Place Holder D.N.W )",
+    name: "Pikachu Statue",
     thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);

From df4a7fabe33daf580e20c15eb70d2ad34c60e47d Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 22:16:25 -0400
Subject: [PATCH 04/24] Added object_name

---
 .../datastructures/clips/clip_ui.ts           |  4 +
 app/pages/PageEnigma/js/editor.ts             |  2 +-
 app/pages/PageEnigma/js/timeline.ts           | 97 +------------------
 .../proxy/storyteller_proxy_timeline.ts       |  1 +
 4 files changed, 10 insertions(+), 94 deletions(-)

diff --git a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
index f771f9910..ed8c27926 100644
--- a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
+++ b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
@@ -9,6 +9,7 @@ export class ClipUI {
   name: string;
   media_id: string;
   object_uuid: string;
+  object_name: string;
   offset: number; // in frames
   length: number; // in frames
   should_play: boolean;
@@ -20,6 +21,7 @@ export class ClipUI {
     name: string,
     media_id: string,
     object_uuid: string,
+    object_name: string,
     offset: number,
     length: number,
   ) {
@@ -30,6 +32,7 @@ export class ClipUI {
     this.type = type; // UI and Animation / Audio / Lipsync /  : Engine
 
     this.object_uuid = object_uuid; // Animation / Audio / Lipsync /  : Engine
+    this.object_name = object_name;
     this.media_id = media_id; //  Animation / Audio / Lipsync /  : Engine
     this.offset = offset;
     this.length = length;
@@ -43,6 +46,7 @@ export class ClipUI {
       name: this.name,
       type: this.type,
       object_uuid: this.object_uuid,
+      object_name: this.object_name,
       media_id: this.media_id,
       start_offset: this.offset,
       ending_offset: this.length,
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index c4f0cf9e1..af0707f0b 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -311,7 +311,7 @@ class Editor {
 
     this.timeline.scene = this.activeScene;
 
-    //this._test_demo();
+    this._test_demo();
 
     this.renderer.domElement.addEventListener(
       "mousedown",
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index dc9072efe..96188daef 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -195,6 +195,7 @@ export class TimeLine {
                 object_name,
                 "",
                 uuid,
+                object_name,
                 0,
                 this.absolute_end))
         }
@@ -216,6 +217,7 @@ export class TimeLine {
         const type = data["data"]["type"];
         const offset = data["data"]["offset"];
         const end_offset = data["data"]["length"] + offset;
+        const object_name = data["data"]["object_name"];
 
         switch (type) {
             case "animation":
@@ -236,6 +238,7 @@ export class TimeLine {
                             name,
                             media_id,
                             object_uuid,
+                            object_name,
                             offset,
                             end_offset));
                     return;
@@ -254,6 +257,7 @@ export class TimeLine {
                 name,
                 media_id,
                 object_uuid,
+                object_name,
                 offset,
                 end_offset,
             ),
@@ -481,96 +485,3 @@ export class TimeLine {
     }
 }
 
-// How much timeline precision we have
-//const percision = 100 // using a fake update loop mock
-//
-//class AudioEngineMock {
-//    async play(media_id:string) {
-//        console.log("Audio Playing {media_id}")
-//    }
-//}
-//
-//// Visual verification tests.
-//function CheckIfBasicAudioClipWorks() {
-//    const timeline = new TimeLine()
-//    timeline.addPlayableClip(new ClipUI(1.0,'audio',1,0))
-//    timeline.play()
-//}
-//
-//function CheckIfBasicTransformClipWorks() {
-//    const timeline = new TimeLine()
-//    timeline.addPlayableClip(new ClipUI(1.0,'transform',2,0))
-//    timeline.play()
-//}
-//
-//function CheckIfBasicClipWorks() {
-//    const timeline = new TimeLine()
-//    timeline.addPlayableClip(new ClipUI(1.0,'animation',3,0))
-//    timeline.play()
-//}
-
-// function CheckIfBasicClipWorks3SecondsAfterTimelineStops() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new ClipUI("clip1", 0, 10000))
-//     timeline.play()
-// }
-
-// function CheckIfTwoClipsAtTheSameTimeWorks() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new ClipUI("clip1", 0, 1000))
-//     timeline.play()
-// }
-
-// function CheckIfTwoClipsOneAfterAnotherWorks() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new ClipUI("clip1", 0, 1000))
-//     timeline.addPlayableClip(new ClipUI("clip2", 0, 2000))
-//     timeline.play()
-// }
-
-// function CheckIfTimeLineStopBeforeClipPlays() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new ClipUI("clip3",0,1000))
-//     timeline.play()
-//     setInterval(async ()=> {
-//         timeline.stop()
-//     },1100)
-//     console.log("Stopped")
-// }
-
-// function CheckIfTimeLineStartAfterClipPlays() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new ClipUI("clip3",0,1000))
-//     timeline.play()
-//     setInterval(async ()=> {
-//         timeline.stop()
-//     },500)
-//     console.log("Stopped")
-// }
-
-// function CheckIfClipsPlayAllTogetherConcurrently() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new ClipUI("clip1",0,1000))
-//     timeline.addPlayableClip(new ClipUI("clip2",0,1000))
-//     timeline.addPlayableClip(new ClipUI("clip3",0,1000))
-//     timeline.addPlayableClip(new ClipUI("clip4",0,1000))
-//     timeline.play()
-// }
-
-// function CheckIfClipsPlayAllTogether() {
-//     const timeline = new TimeLine()
-//     timeline.addPlayableClip(new TrackClip("clip1",0,1000))
-//     timeline.addPlayableClip(new TrackClip("clip2",0,1000))
-//     timeline.addPlayableClip(new TrackClip("clip3",0,1000))
-//     timeline.addPlayableClip(new TrackClip("clip4",0,1000))
-//     timeline.play()
-// }
-
-//CheckIfBasicClipWorks()
-//CheckIfTwoClipsAtTheSameTimeWorks()
-// CheckIfTwoClipsOneAfterAnotherWorks()
-// CheckIfTimeLineStopBeforeClipPlays()
-// CheckIfTimeLineStartAfterClipPlays()
-// CheckIfClipsPlayAllTogetherConcurrently()
-
-// CheckIfClipsPlayAllTogether()
diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
index e5cb72ff2..213395197 100644
--- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
+++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
@@ -65,6 +65,7 @@ export class StoryTellerProxyTimeline {
                     element.version, element.type, 
                     element.group, element.name, 
                     element.media_id, element.object_uuid, 
+                    element.object_name,
                     element.start_offset, element.ending_offset);
                 new_clips.push(clip);
             }

From 984349c1ced480cdf890f7f14bfffa077eb35bec Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 22:17:06 -0400
Subject: [PATCH 05/24] Inital changes

---
 app/pages/PageEnigma/PageEnigma.tsx           |  8 +---
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |  1 -
 .../comps/Timeline/utils/useQueueHandler.ts   | 40 +++++++++++++++++--
 app/pages/PageEnigma/store/characterGroups.ts | 10 +----
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 17e4ca7b3..c4e638810 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -22,12 +22,8 @@ export const PageEnigma = () => {
   useSignals();
   useEffect(() => {
     function setPage() {
-      const pxRatioWidth =
-        window.screen.availWidth / document.documentElement.clientWidth;
-      const pxRatioHeight =
-        window.screen.availHeight / document.documentElement.clientHeight;
-      pageHeight.value = window.outerHeight / pxRatioHeight;
-      pageWidth.value = window.outerWidth / pxRatioWidth;
+      pageHeight.value = window.innerHeight / window.devicePixelRatio;
+      pageWidth.value = window.outerWidth / window.devicePixelRatio;
     }
     timelineHeight.value = window.innerHeight * 0.25;
     sidePanelWidth.value = 443;
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 3bd1d9502..d875fe506 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -53,7 +53,6 @@ export const PageEnigmaComponent = () => {
   const width = sidePanelVisible.value
     ? pageWidth.value - dndWidth - 66
     : pageWidth.value - 66;
-
   const height =
     dndTimelineHeight.value > -1
       ? pageHeight.value - dndTimelineHeight.value - 68
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index c5bf23e06..5329d91bc 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -1,21 +1,49 @@
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { useSignals } from "@preact/signals-react/runtime";
 import { useCallback, useContext, useEffect } from "react";
-import { currentTime } from "~/pages/PageEnigma/store";
+import { characterGroups, currentTime } from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import {
+  CharacterGroup,
+  ClipGroup,
   QueueClip,
   QueueKeyframe,
   UpdateTime,
 } from "~/pages/PageEnigma/models";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions";
+import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
 
 interface Arguments {
   action: fromEngineActions | toEngineActions | toTimelineActions;
-  data: QueueClip | UpdateTime | QueueKeyframe;
+  data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+}
+
+function addCharacter(item: ClipUI) {
+  const existingCharacter = characterGroups.value.find(
+    (character) => character.id === item.object_uuid,
+  );
+
+  if (existingCharacter) {
+    return;
+  }
+
+  const newCharacter = {
+    id: item.object_uuid,
+    muted: false,
+    animationClips: [],
+    positionKeyframes: [],
+    lipSyncClips: [],
+  } as CharacterGroup;
+
+  characterGroups.value = [
+    ...characterGroups.value.filter(
+      (character) => character.id !== item.object_uuid,
+    ),
+    newCharacter,
+  ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1));
 }
 
 export function useQueueHandler() {
@@ -29,7 +57,13 @@ export function useQueueHandler() {
         currentTime.value = (data as UpdateTime).currentTime;
         break;
       case fromEngineActions.UPDATE_TIME_LINE:
-        console.log(action)
+        console.log(data);
+        // (data as ClipUI[]).forEach((item) => {
+        //   addCharacter(item);
+        //   if (item.group === ClipGroup.CHARACTER) {
+        //   }
+        // });
+        break;
       default:
         throw new Error(`Unknown action ${action}`);
     }
diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts
index 84fc54c07..ef9ed151d 100644
--- a/app/pages/PageEnigma/store/characterGroups.ts
+++ b/app/pages/PageEnigma/store/characterGroups.ts
@@ -13,15 +13,7 @@ import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import * as uuid from "uuid";
 
-export const characterGroups = signal<CharacterGroup[]>([
-  {
-    id: "CH1",
-    muted: false,
-    animationClips: [],
-    positionKeyframes: [],
-    lipSyncClips: [],
-  },
-]);
+export const characterGroups = signal<CharacterGroup[]>([]);
 
 export function updateCharacters({
   type,

From 340221f0b7515a50bbba87393af1b5dd364c5541 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 22:32:50 -0400
Subject: [PATCH 06/24] updated character name

---
 app/pages/PageEnigma/js/editor.ts   | 3 +--
 app/pages/PageEnigma/store/media.ts | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index af0707f0b..fd3ff7b0d 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -311,7 +311,7 @@ class Editor {
 
     this.timeline.scene = this.activeScene;
 
-    this._test_demo();
+    //this._test_demo();
 
     this.renderer.domElement.addEventListener(
       "mousedown",
@@ -1076,7 +1076,6 @@ class Editor {
     this.raycaster.setFromCamera(this.mouse, this.camera);
     const interactable: any[] = [];
     this.activeScene.scene.children.forEach((child: THREE.Object3D) => {
-      // console.log(child);
       if (child.name != "") {
         if (child.type == "Mesh" || child.type == "Object3D" || child.type == "Group") {
           interactable.push(child);
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index a920f7f68..b1eee9e62 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -94,7 +94,7 @@ export const cameraItems = signal<MediaItem[]>([
 export const characterItems = signal<MediaItem[]>([
   {
     version: 1,
-    media_id: "",
+    media_id: "m_fmxy8wjnep1hdaz7qdg4n7y15d2bsp",
     type: AssetType.CHARACTER,
     name: "Shrek",
     thumbnail: "resources/placeholders/placeholder.png",
@@ -122,7 +122,7 @@ export const characterItems = signal<MediaItem[]>([
   },
   {
     version: 1,
-    media_id: "m_fmxy8wjnep1hdaz7qdg4n7y15d2bsp ",
+    media_id: "m_4wva09qznapzk5rcvbxy671d1qx2pr ",
     type: AssetType.CHARACTER,
     name: "Story Girl",
     thumbnail: "resources/characters/img13.png",

From 9ddf82da9d95254e0d2e0cf9b202d11cab323fbc Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 22:38:24 -0400
Subject: [PATCH 07/24] fixed naming?

---
 app/pages/PageEnigma/js/timeline.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 96188daef..37c0962a1 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -217,7 +217,7 @@ export class TimeLine {
         const type = data["data"]["type"];
         const offset = data["data"]["offset"];
         const end_offset = data["data"]["length"] + offset;
-        const object_name = data["data"]["object_name"];
+        const object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
 
         switch (type) {
             case "animation":
@@ -322,6 +322,7 @@ export class TimeLine {
     }
 
     public async addPlayableClip(clip: ClipUI): Promise<void> {
+        console.log("clip", clip)
         this.timeline_items.push(clip);
     }
 

From b77f40c9b16ef7db39302bd24a0d1f47413bf007 Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 22:39:03 -0400
Subject: [PATCH 08/24] more changes

---
 .../comps/Timeline/utils/useQueueHandler.ts     | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 710e7d02f..33b5858a0 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -3,7 +3,6 @@ import { useSignals } from "@preact/signals-react/runtime";
 import { useCallback, useContext, useEffect } from "react";
 import {
   addCharacterAnimation,
-  addCharacterKeyframe,
   characterGroups,
   currentTime,
 } from "~/pages/PageEnigma/store";
@@ -11,8 +10,8 @@ import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import {
-  AssetType,
   CharacterGroup,
+  Clip,
   ClipGroup,
   ClipType,
   MediaItem,
@@ -23,10 +22,11 @@ import {
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions";
 import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
+import * as uuid from "uuid";
 
 interface Arguments {
   action: fromEngineActions | toEngineActions | toTimelineActions;
-  data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+  data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
 }
 
 function addCharacter(item: ClipUI) {
@@ -73,18 +73,15 @@ export function useQueueHandler() {
             if (item.type === ClipType.ANIMATION) {
               const newItem = {
                 version: item.version,
-                type: item.type as string as AssetType,
+                clip_uuid: uuid.v4(),
+                type: item.type,
                 group: item.group,
                 object_uuid: item.object_uuid,
                 media_id: item.media_id,
                 name: item.name,
-                length: item.length,
-              } as MediaItem;
-              addCharacterAnimation({
-                dragItem: newItem,
-                characterId: item.object_uuid,
                 offset: item.offset,
-              });
+                length: item.length,
+              } as Clip;
             }
             if (item.type === ClipType.TRANSFORM) {
               // newItem.length = item.length;

From 5ec061cb56c513234fd38fd3d4f631969644320c Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 22:52:16 -0400
Subject: [PATCH 09/24] includes clip uuid now.

---
 app/pages/PageEnigma/datastructures/clips/clip_ui.ts |  5 +++++
 app/pages/PageEnigma/js/timeline.ts                  | 12 +++++++++++-
 .../PageEnigma/proxy/storyteller_proxy_timeline.ts   |  1 +
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
index ed8c27926..0c50561c5 100644
--- a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
+++ b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
@@ -13,6 +13,7 @@ export class ClipUI {
   offset: number; // in frames
   length: number; // in frames
   should_play: boolean;
+  clip_uuid: string;
 
   constructor(
     version: number,
@@ -20,6 +21,7 @@ export class ClipUI {
     group: ClipGroup,
     name: string,
     media_id: string,
+    clip_uuid: string,
     object_uuid: string,
     object_name: string,
     offset: number,
@@ -28,6 +30,8 @@ export class ClipUI {
     this.version = version;
     this.group = group; // Only needed for UI
 
+    this.clip_uuid = clip_uuid;
+
     this.name = name; // UI
     this.type = type; // UI and Animation / Audio / Lipsync /  : Engine
 
@@ -45,6 +49,7 @@ export class ClipUI {
       group: this.group,
       name: this.name,
       type: this.type,
+      clip_uuid: this.clip_uuid,
       object_uuid: this.object_uuid,
       object_name: this.object_name,
       media_id: this.media_id,
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 37c0962a1..2a569216a 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -174,6 +174,7 @@ export class TimeLine {
         // 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) {
@@ -193,6 +194,7 @@ export class TimeLine {
                 ClipType.TRANSFORM,
                 data_json['group'],
                 object_name,
+                keyframe_uuid,
                 "",
                 uuid,
                 object_name,
@@ -217,7 +219,13 @@ export class TimeLine {
         const type = data["data"]["type"];
         const offset = data["data"]["offset"];
         const end_offset = data["data"]["length"] + offset;
-        const object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
+        let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
+        const clip_uuid = data["data"]['clip_uuid'];
+        console.log(data);
+
+        if(object_name == undefined) {
+            object_name = "Undefined."
+        }
 
         switch (type) {
             case "animation":
@@ -237,6 +245,7 @@ export class TimeLine {
                             group,
                             name,
                             media_id,
+                            clip_uuid,
                             object_uuid,
                             object_name,
                             offset,
@@ -256,6 +265,7 @@ export class TimeLine {
                 group,
                 name,
                 media_id,
+                clip_uuid,
                 object_uuid,
                 object_name,
                 offset,
diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
index 213395197..4719b9b58 100644
--- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
+++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
@@ -64,6 +64,7 @@ export class StoryTellerProxyTimeline {
                 let clip = new ClipUI(
                     element.version, element.type, 
                     element.group, element.name, 
+                    element.clip_uuid,
                     element.media_id, element.object_uuid, 
                     element.object_name,
                     element.start_offset, element.ending_offset);

From 88dc93be605db443c08db79f310f3daed26df19a Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 22:55:16 -0400
Subject: [PATCH 10/24] more changes

---
 .../comps/Timeline/utils/useQueueHandler.ts   | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 33b5858a0..dabc1f730 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -1,11 +1,7 @@
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { useSignals } from "@preact/signals-react/runtime";
 import { useCallback, useContext, useEffect } from "react";
-import {
-  addCharacterAnimation,
-  characterGroups,
-  currentTime,
-} from "~/pages/PageEnigma/store";
+import { characterGroups, currentTime } from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
@@ -14,6 +10,7 @@ import {
   Clip,
   ClipGroup,
   ClipType,
+  Keyframe,
   MediaItem,
   QueueClip,
   QueueKeyframe,
@@ -35,7 +32,7 @@ function addCharacter(item: ClipUI) {
   );
 
   if (existingCharacter) {
-    return;
+    return existingCharacter;
   }
 
   const newCharacter = {
@@ -53,6 +50,10 @@ function addCharacter(item: ClipUI) {
     ),
     newCharacter,
   ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1));
+
+  return characterGroups.value.find(
+    (character) => character.id === item.object_uuid,
+  ) as CharacterGroup;
 }
 
 export function useQueueHandler() {
@@ -68,12 +69,12 @@ export function useQueueHandler() {
       case fromEngineActions.UPDATE_TIME_LINE:
         console.log(data);
         (data as ClipUI[]).forEach((item) => {
-          addCharacter(item);
           if (item.group === ClipGroup.CHARACTER) {
+            const existingCharacter = addCharacter(item);
             if (item.type === ClipType.ANIMATION) {
               const newItem = {
                 version: item.version,
-                clip_uuid: uuid.v4(),
+                clip_uuid: item.clip_uuid,
                 type: item.type,
                 group: item.group,
                 object_uuid: item.object_uuid,
@@ -82,14 +83,24 @@ export function useQueueHandler() {
                 offset: item.offset,
                 length: item.length,
               } as Clip;
+              existingCharacter.animationClips.push(newItem);
+              existingCharacter.animationClips.sort((clipA, clipB) =>
+                clipA.clip_uuid < clipB.clip_uuid ? -1 : 1,
+              );
             }
             if (item.type === ClipType.TRANSFORM) {
-              // newItem.length = item.length;
-              // addCharacterKeyframe({
-              //   dragItem: newItem,
-              //   characterId: item.object_uuid,
-              //   offset: item.offset,
-              // });
+              const newKeyframe = {
+                version: item.version,
+                keyframe_uuid: item.keyframe_uuid,
+                group: item.group,
+                object_uuid: item.object_uuid,
+                offset: item.offset,
+              } as Keyframe;
+              existingCharacter.positionKeyframes.push(newKeyframe);
+              existingCharacter.positionKeyframes.sort(
+                (keyframeA, keyframeB) =>
+                  keyframeA.keyframe_uuid < keyframeB.keyframe_uuid ? -1 : 1,
+              );
             }
           }
         });

From c265b92570b6b53fb88ed61a29853a27fe57b657 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 22:56:15 -0400
Subject: [PATCH 11/24] fixed keyframe uuid.

---
 app/pages/PageEnigma/js/timeline.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 2a569216a..f85eaf424 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -175,6 +175,7 @@ export class TimeLine {
         let data_json = data['data'];
         let uuid = data_json['object_uuid'];
         let keyframe_uuid = data_json['keyframe_uuid'];
+        console.log(keyframe_uuid);
 
         let object_name = this.scene.get_object_by_uuid(uuid)?.name;
         if (object_name == undefined) {
@@ -194,8 +195,8 @@ export class TimeLine {
                 ClipType.TRANSFORM,
                 data_json['group'],
                 object_name,
-                keyframe_uuid,
                 "",
+                keyframe_uuid,
                 uuid,
                 object_name,
                 0,

From e004567d0477c7ba9bdadf13ebd33226d85a2c6f Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 22:56:27 -0400
Subject: [PATCH 12/24] more changes

---
 app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index dabc1f730..b2e41a053 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -91,7 +91,7 @@ export function useQueueHandler() {
             if (item.type === ClipType.TRANSFORM) {
               const newKeyframe = {
                 version: item.version,
-                keyframe_uuid: item.keyframe_uuid,
+                keyframe_uuid: item.clip_uuid,
                 group: item.group,
                 object_uuid: item.object_uuid,
                 offset: item.offset,

From 303940fe94f8d8935e254e10b4d938faa2a6af5e Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 23:03:11 -0400
Subject: [PATCH 13/24] fixed clip uuid.

---
 app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
index 4719b9b58..788637432 100644
--- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
+++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
@@ -53,6 +53,8 @@ export class StoryTellerProxyTimeline {
             audio: await this.getItemsDict(this.audio_engine.clips),
             lipsync: await this.getItemsDict(this.lipsync_engine.clips),
         }
+        console.log(timeline_json)
+
         return timeline_json;
     }
 
@@ -64,8 +66,8 @@ export class StoryTellerProxyTimeline {
                 let clip = new ClipUI(
                     element.version, element.type, 
                     element.group, element.name, 
-                    element.clip_uuid,
-                    element.media_id, element.object_uuid, 
+                    element.media_id, element.clip_uuid,
+                    element.object_uuid, 
                     element.object_name,
                     element.start_offset, element.ending_offset);
                 new_clips.push(clip);
@@ -126,6 +128,7 @@ export class StoryTellerProxyTimeline {
         this.lipsync_engine.clips = await this.loadLipsyncClips(timeline['lipsync']);
         this.animation_engine.clips = await this.loadAnimationClips(timeline['animation']);
 
+        console.log(this.timeline.timeline_items)
 
         this.timeline.updateUI()
     }

From 082941f338dd6d40f122421488d6f90ac28a89ea Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 23:03:47 -0400
Subject: [PATCH 14/24] more changes

---
 .../comps/Timeline/utils/useQueueHandler.ts   | 67 +++++++++++++++++++
 app/pages/PageEnigma/models/track.ts          |  1 -
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index b2e41a053..2f1a1123d 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -56,6 +56,36 @@ function addCharacter(item: ClipUI) {
   ) as CharacterGroup;
 }
 
+function addObject(item: ClipUI) {
+  const existingCharacter = characterGroups.value.find(
+    (character) => character.id === item.object_uuid,
+  );
+
+  if (existingCharacter) {
+    return existingCharacter;
+  }
+
+  const newCharacter = {
+    id: item.object_uuid,
+    name: item.object_name,
+    muted: false,
+    animationClips: [],
+    positionKeyframes: [],
+    lipSyncClips: [],
+  } as CharacterGroup;
+
+  characterGroups.value = [
+    ...characterGroups.value.filter(
+      (character) => character.id !== item.object_uuid,
+    ),
+    newCharacter,
+  ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1));
+
+  return characterGroups.value.find(
+    (character) => character.id === item.object_uuid,
+  ) as CharacterGroup;
+}
+
 export function useQueueHandler() {
   useSignals();
   const { addKeyframe } = useContext(TrackContext);
@@ -102,6 +132,43 @@ export function useQueueHandler() {
                   keyframeA.keyframe_uuid < keyframeB.keyframe_uuid ? -1 : 1,
               );
             }
+            if (item.type === ClipType.AUDIO) {
+              const newItem = {
+                version: item.version,
+                clip_uuid: item.clip_uuid,
+                type: item.type,
+                group: item.group,
+                object_uuid: item.object_uuid,
+                media_id: item.media_id,
+                name: item.name,
+                offset: item.offset,
+                length: item.length,
+              } as Clip;
+              existingCharacter.lipSyncClips.push(newItem);
+              existingCharacter.lipSyncClips.sort((clipA, clipB) =>
+                clipA.clip_uuid < clipB.clip_uuid ? -1 : 1,
+              );
+            }
+          }
+          if (item.group === ClipGroup.OBJECT) {
+            const existingObject = addObject(item);
+            if (item.type === ClipType.ANIMATION) {
+              const newItem = {
+                version: item.version,
+                clip_uuid: item.clip_uuid,
+                type: item.type,
+                group: item.group,
+                object_uuid: item.object_uuid,
+                media_id: item.media_id,
+                name: item.name,
+                offset: item.offset,
+                length: item.length,
+              } as Clip;
+              existingObject.clips.push(newItem);
+              existingObject.clips.sort((clipA, clipB) =>
+                clipA.clip_uuid < clipB.clip_uuid ? -1 : 1,
+              );
+            }
           }
         });
         break;
diff --git a/app/pages/PageEnigma/models/track.ts b/app/pages/PageEnigma/models/track.ts
index 006d3c922..25eecff86 100644
--- a/app/pages/PageEnigma/models/track.ts
+++ b/app/pages/PageEnigma/models/track.ts
@@ -17,7 +17,6 @@ export enum ClipType {
   TRANSFORM = "transform",
   AUDIO = "audio",
   ANIMATION = "animation",
-  LIPSYNC = "lipsync",
 }
 
 export enum ClipGroup {

From 6e9f35be57bee5ad9ae94ad262faba985556d075 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 23:25:39 -0400
Subject: [PATCH 15/24] added offset.

---
 app/pages/PageEnigma/js/timeline.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index f85eaf424..8dbcbb58e 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -199,7 +199,7 @@ export class TimeLine {
                 keyframe_uuid,
                 uuid,
                 object_name,
-                0,
+                data_json['offset'],
                 this.absolute_end))
         }
 

From 1fc0fb7a2e3eefe362cd307e4b24a0c94c068fed Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 23:29:34 -0400
Subject: [PATCH 16/24] keyframe offset.

---
 app/pages/PageEnigma/datastructures/clips/clip_ui.ts     | 4 ++++
 app/pages/PageEnigma/js/timeline.ts                      | 5 +++--
 app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
index 0c50561c5..2d2b773f1 100644
--- a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
+++ b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts
@@ -14,6 +14,7 @@ export class ClipUI {
   length: number; // in frames
   should_play: boolean;
   clip_uuid: string;
+  keyframe_offset: number;
 
   constructor(
     version: number,
@@ -26,6 +27,7 @@ export class ClipUI {
     object_name: string,
     offset: number,
     length: number,
+    keyframe_offset: number = 0,
   ) {
     this.version = version;
     this.group = group; // Only needed for UI
@@ -41,6 +43,7 @@ export class ClipUI {
     this.offset = offset;
     this.length = length;
     this.should_play = true;
+    this.keyframe_offset = keyframe_offset;
   }
 
   toJSON(): any {
@@ -55,6 +58,7 @@ export class ClipUI {
       media_id: this.media_id,
       start_offset: this.offset,
       ending_offset: this.length,
+      keyframe_offset: this.keyframe_offset,
     };
   }
 }
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 8dbcbb58e..e578d35dc 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -199,8 +199,9 @@ export class TimeLine {
                 keyframe_uuid,
                 uuid,
                 object_name,
-                data_json['offset'],
-                this.absolute_end))
+                0,
+                this.absolute_end,
+                data_json['offset']))
         }
 
         this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']);
diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
index 788637432..8c0c08051 100644
--- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
+++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
@@ -69,7 +69,8 @@ export class StoryTellerProxyTimeline {
                     element.media_id, element.clip_uuid,
                     element.object_uuid, 
                     element.object_name,
-                    element.start_offset, element.ending_offset);
+                    element.start_offset, element.ending_offset,
+                    element.keyframe_offset);
                 new_clips.push(clip);
             }
         }

From 27b449cb2c6ca5f8d34dd6c635a16bfb03575758 Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 23:29:54 -0400
Subject: [PATCH 17/24] more changes

---
 .../comps/Timeline/utils/useQueueHandler.ts   | 121 +++++++++++-------
 1 file changed, 77 insertions(+), 44 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 2f1a1123d..71acee262 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -1,7 +1,13 @@
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { useSignals } from "@preact/signals-react/runtime";
 import { useCallback, useContext, useEffect } from "react";
-import { characterGroups, currentTime } from "~/pages/PageEnigma/store";
+import {
+  audioGroup,
+  cameraGroup,
+  characterGroups,
+  currentTime,
+  objectGroup,
+} from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
@@ -12,6 +18,7 @@ import {
   ClipType,
   Keyframe,
   MediaItem,
+  ObjectTrack,
   QueueClip,
   QueueKeyframe,
   UpdateTime,
@@ -57,33 +64,33 @@ function addCharacter(item: ClipUI) {
 }
 
 function addObject(item: ClipUI) {
-  const existingCharacter = characterGroups.value.find(
-    (character) => character.id === item.object_uuid,
+  const existingObject = objectGroup.value.objects.find(
+    (obj) => obj.object_uuid === item.object_uuid,
   );
 
-  if (existingCharacter) {
-    return existingCharacter;
+  if (existingObject) {
+    return existingObject;
   }
 
-  const newCharacter = {
-    id: item.object_uuid,
+  const newObject = {
+    object_uuid: item.object_uuid,
     name: item.object_name,
-    muted: false,
-    animationClips: [],
-    positionKeyframes: [],
-    lipSyncClips: [],
-  } as CharacterGroup;
+    keyframes: [] as Keyframe[],
+  } as ObjectTrack;
 
-  characterGroups.value = [
-    ...characterGroups.value.filter(
-      (character) => character.id !== item.object_uuid,
-    ),
-    newCharacter,
-  ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1));
+  objectGroup.value = {
+    id: "OB1",
+    objects: [
+      ...objectGroup.value.objects.filter(
+        (obj) => obj.object_uuid !== item.object_uuid,
+      ),
+      newObject,
+    ].sort((objA, objB) => (objA.object_uuid < objB.object_uuid ? -1 : 1)),
+  };
 
-  return characterGroups.value.find(
-    (character) => character.id === item.object_uuid,
-  ) as CharacterGroup;
+  return objectGroup.value.objects.find(
+    (obj) => obj.object_uuid === item.object_uuid,
+  ) as ObjectTrack;
 }
 
 export function useQueueHandler() {
@@ -114,8 +121,8 @@ export function useQueueHandler() {
                 length: item.length,
               } as Clip;
               existingCharacter.animationClips.push(newItem);
-              existingCharacter.animationClips.sort((clipA, clipB) =>
-                clipA.clip_uuid < clipB.clip_uuid ? -1 : 1,
+              existingCharacter.animationClips.sort(
+                (clipA, clipB) => clipA.offset - clipB.offset,
               );
             }
             if (item.type === ClipType.TRANSFORM) {
@@ -128,8 +135,7 @@ export function useQueueHandler() {
               } as Keyframe;
               existingCharacter.positionKeyframes.push(newKeyframe);
               existingCharacter.positionKeyframes.sort(
-                (keyframeA, keyframeB) =>
-                  keyframeA.keyframe_uuid < keyframeB.keyframe_uuid ? -1 : 1,
+                (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
               );
             }
             if (item.type === ClipType.AUDIO) {
@@ -145,30 +151,57 @@ export function useQueueHandler() {
                 length: item.length,
               } as Clip;
               existingCharacter.lipSyncClips.push(newItem);
-              existingCharacter.lipSyncClips.sort((clipA, clipB) =>
-                clipA.clip_uuid < clipB.clip_uuid ? -1 : 1,
+              existingCharacter.lipSyncClips.sort(
+                (clipA, clipB) => clipA.offset - clipB.offset,
               );
             }
           }
           if (item.group === ClipGroup.OBJECT) {
             const existingObject = addObject(item);
-            if (item.type === ClipType.ANIMATION) {
-              const newItem = {
-                version: item.version,
-                clip_uuid: item.clip_uuid,
-                type: item.type,
-                group: item.group,
-                object_uuid: item.object_uuid,
-                media_id: item.media_id,
-                name: item.name,
-                offset: item.offset,
-                length: item.length,
-              } as Clip;
-              existingObject.clips.push(newItem);
-              existingObject.clips.sort((clipA, clipB) =>
-                clipA.clip_uuid < clipB.clip_uuid ? -1 : 1,
-              );
-            }
+            const newKeyframe = {
+              version: item.version,
+              keyframe_uuid: item.clip_uuid,
+              group: item.group,
+              object_uuid: item.object_uuid,
+              offset: item.offset,
+            } as Keyframe;
+            existingObject.keyframes.push(newKeyframe);
+            existingObject.keyframes.sort(
+              (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
+            );
+          }
+          if (item.group === ClipGroup.CAMERA) {
+            const existingCamera = cameraGroup.value;
+            const newKeyframe = {
+              version: item.version,
+              keyframe_uuid: item.clip_uuid,
+              group: item.group,
+              object_uuid: item.object_uuid,
+              offset: item.offset,
+            } as Keyframe;
+            existingCamera.keyframes.push(newKeyframe);
+            existingCamera.keyframes.sort(
+              (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
+            );
+            // cameraGroup.value = { ...cameraGroup.value };
+          }
+          if (item.group === ClipGroup.GLOBAL_AUDIO) {
+            const existingAudio = audioGroup.value;
+            const newItem = {
+              version: item.version,
+              clip_uuid: item.clip_uuid,
+              type: item.type,
+              group: item.group,
+              object_uuid: item.object_uuid,
+              media_id: item.media_id,
+              name: item.name,
+              offset: item.offset,
+              length: item.length,
+            } as Clip;
+            existingAudio.clips.push(newItem);
+            existingAudio.clips.sort(
+              (clipA, clipB) => clipA.offset - clipB.offset,
+            );
           }
         });
         break;

From 648e9424413c2c3cf8aae016305bb61d04a8e627 Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 23:43:03 -0400
Subject: [PATCH 18/24] more changes

---
 .../comps/Timeline/utils/useQueueHandler.ts   | 23 ++++++++++++++-----
 app/pages/PageEnigma/models/assets.ts         |  1 +
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 71acee262..9fb7d82c9 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -26,7 +26,6 @@ import {
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions";
 import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
-import * as uuid from "uuid";
 
 interface Arguments {
   action: fromEngineActions | toEngineActions | toTimelineActions;
@@ -131,7 +130,7 @@ export function useQueueHandler() {
                 keyframe_uuid: item.clip_uuid,
                 group: item.group,
                 object_uuid: item.object_uuid,
-                offset: item.offset,
+                offset: item.keyframe_offset,
               } as Keyframe;
               existingCharacter.positionKeyframes.push(newKeyframe);
               existingCharacter.positionKeyframes.sort(
@@ -163,7 +162,7 @@ export function useQueueHandler() {
               keyframe_uuid: item.clip_uuid,
               group: item.group,
               object_uuid: item.object_uuid,
-              offset: item.offset,
+              offset: item.keyframe_offset,
             } as Keyframe;
             existingObject.keyframes.push(newKeyframe);
             existingObject.keyframes.sort(
@@ -177,7 +176,7 @@ export function useQueueHandler() {
               keyframe_uuid: item.clip_uuid,
               group: item.group,
               object_uuid: item.object_uuid,
-              offset: item.offset,
+              offset: item.keyframe_offset,
             } as Keyframe;
             existingCamera.keyframes.push(newKeyframe);
             existingCamera.keyframes.sort(
@@ -205,9 +204,21 @@ export function useQueueHandler() {
           }
         });
         break;
-      case fromEngineActions.UPDATE_CHARACTER_ID:
-        console.log(action);
+      case fromEngineActions.UPDATE_CHARACTER_ID: {
+        const newCharacter = {
+          id: (data as MediaItem).object_uuid,
+          name: (data as MediaItem).name,
+          muted: false,
+          animationClips: [],
+          positionKeyframes: [],
+          lipSyncClips: [],
+        } as CharacterGroup;
+
+        characterGroups.value = [...characterGroups.value, newCharacter].sort(
+          (charA, charB) => (charA.id < charB.id ? -1 : 1),
+        );
         break;
+      }
       default:
         throw new Error(`Unknown action ${action}`);
     }
diff --git a/app/pages/PageEnigma/models/assets.ts b/app/pages/PageEnigma/models/assets.ts
index c3a9a66d3..c4b963c99 100644
--- a/app/pages/PageEnigma/models/assets.ts
+++ b/app/pages/PageEnigma/models/assets.ts
@@ -2,6 +2,7 @@ export interface MediaItem {
   version: number;
   type: AssetType;
   media_id: string;
+  object_uuid?: string;
   name: string;
   length?: number;
   thumbnail?: string;

From e8d4d92c017ba45cdc6d12a533e761f3c8a6f62d Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Sun, 7 Apr 2024 23:59:16 -0400
Subject: [PATCH 19/24] more changes

---
 .../contexts/TrackContext/TrackProvider.tsx   |  9 ++++----
 app/pages/PageEnigma/store/characterGroups.ts | 21 ++++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index 747896cef..d25160450 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -26,21 +26,19 @@ export const TrackProvider = ({ children }: Props) => {
 
   // cross group functions
   const dropClip = useCallback(() => {
-
-
-    console.log(`${JSON.stringify(dragItem)}`)
+    console.log(`${JSON.stringify(dragItem)}`);
 
     if (dragItem.value != null && dragItem != null) {
       // should be able to drag into the timeline ... TODO FIX?
 
       if (dragItem.value.type === AssetType.CHARACTER) {
-        addCharacter(dragItem.value)
+        addCharacter(dragItem.value);
       }
       // if (dragItem.value.type === AssetType.CAMERA) {
       //   console.log("Dragged In Camera Type")
       // }
       if (dragItem.value.type === AssetType.OBJECT) {
-        addObject(dragItem.value)
+        addObject(dragItem.value);
       }
     }
     // if (dragItem.value.type === AssetType.SHAPE) {
@@ -56,6 +54,7 @@ export const TrackProvider = ({ children }: Props) => {
         });
       }
       if (dragItem.value.type === AssetType.AUDIO) {
+        console.log("add audio", dropId.value);
         addCharacterAudio({
           dragItem: dragItem.value!,
           characterId: dropId.value,
diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts
index 7ee8a5e2b..ecc977611 100644
--- a/app/pages/PageEnigma/store/characterGroups.ts
+++ b/app/pages/PageEnigma/store/characterGroups.ts
@@ -173,6 +173,13 @@ export function addCharacterAudio({
     if (character.id !== characterId) {
       return { ...character };
     }
+
+    Queue.publish({
+      queueName: QueueNames.TO_ENGINE,
+      action: toEngineActions.ADD_CLIP,
+      data: newClip,
+    });
+
     return {
       ...character,
       lipSyncClips: [...character.lipSyncClips, newClip].sort(
@@ -180,12 +187,6 @@ export function addCharacterAudio({
       ),
     };
   });
-
-  Queue.publish({
-    queueName: QueueNames.TO_ENGINE,
-    action: toEngineActions.ADD_CLIP,
-    data: newClip,
-  });
 }
 
 export function addCharacterKeyframe(keyframe: QueueKeyframe, offset: number) {
@@ -327,7 +328,7 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) {
 }
 
 // probably not to much to send imo
-export function addCharacter(character:MediaItem) {
+export function addCharacter(character: MediaItem) {
   //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
   // "type":"character","name":"Female Doll",
   // "thumbnail":"resources/characters/img03.png"}
@@ -337,8 +338,8 @@ export function addCharacter(character:MediaItem) {
     data: character,
   });
 }
-export function addObject(object:MediaItem) {
-   //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
+export function addObject(object: MediaItem) {
+  //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
   // "type":"character","name":"Female Doll",
   // "thumbnail":"resources/characters/img03.png"}
   Queue.publish({
@@ -346,4 +347,4 @@ export function addObject(object:MediaItem) {
     action: toEngineActions.ADD_OBJECT,
     data: object,
   });
-}
\ No newline at end of file
+}

From ef83e2c8a4dc9f73732711d3255faf17b283d351 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Sun, 7 Apr 2024 23:59:28 -0400
Subject: [PATCH 20/24] added correct group to character transform

---
 app/pages/PageEnigma/js/timeline.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index e578d35dc..bcb2cfedb 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -42,6 +42,7 @@ export class TimeLine {
     animation_engine: AnimationEngine;
     // lip sync engine
     lipSync_engine: LipSyncEngine;
+    characters: {[key: string]: string};
 
     scene: Scene;
 
@@ -55,6 +56,7 @@ export class TimeLine {
         scene: Scene,
     ) {
         this.timeline_items = [];
+        this.characters = {};
         this.absolute_end = 60 * 12;
         this.timeline_limit = 0; // 5 seconds
 
@@ -145,6 +147,10 @@ export class TimeLine {
         obj.name = name;
         let object_uuid = obj.uuid;
 
+        console.log("data.data", data.data)
+
+        this.characters[object_uuid] = type;
+
         data.data['object_uuid'] = object_uuid;
         Queue.publish({
             queueName: QueueNames.FROM_ENGINE,
@@ -175,13 +181,20 @@ export class TimeLine {
         let data_json = data['data'];
         let uuid = data_json['object_uuid'];
         let keyframe_uuid = data_json['keyframe_uuid'];
-        console.log(keyframe_uuid);
 
         let object_name = this.scene.get_object_by_uuid(uuid)?.name;
         if (object_name == undefined) {
             object_name = "undefined"
         }
 
+        for (let key in this.characters) {
+            let element = this.characters[key];
+            if (key == uuid) {
+                data_json['group'] = element;
+                break;
+            }
+        }
+
         let new_item = this.transform_engine.addFrame(uuid,
             this.absolute_end,
             data_json['position'],
@@ -243,7 +256,7 @@ export class TimeLine {
                     this.addPlayableClip(
                         new ClipUI(
                             version,
-                            "lipsync",// TODO potiential bug ..
+                            type, // TODO potiential bug ..
                             group,
                             name,
                             media_id,

From c492f4df4c4477821c00b99e3c3d383c55921be0 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Mon, 8 Apr 2024 00:10:41 -0400
Subject: [PATCH 21/24] added temp lipsync

---
 app/pages/PageEnigma/js/timeline.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index bcb2cfedb..84fa23d13 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -256,7 +256,7 @@ export class TimeLine {
                     this.addPlayableClip(
                         new ClipUI(
                             version,
-                            type, // TODO potiential bug ..
+                            "lipsync", // TODO potiential bug ..
                             group,
                             name,
                             media_id,

From 7a45dcdb96bf0497dcd2393fcbc4388302a2188c Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Mon, 8 Apr 2024 06:42:06 -0400
Subject: [PATCH 22/24] Some code refactoring

---
 .../comps/Timeline/utils/useQueueHandler.ts   | 214 +++---------------
 .../contexts/TrackContext/TrackProvider.tsx   |  15 +-
 .../TrackContext/utils/useUpdateKeyframe.ts   |   1 +
 app/pages/PageEnigma/store/audioGroup.ts      |  18 ++
 app/pages/PageEnigma/store/cameraGroup.ts     |  16 ++
 .../store/characterGroups/addCharacter.ts     |  28 +++
 .../{ => characterGroups}/characterGroups.ts  | 111 ---------
 .../PageEnigma/store/characterGroups/index.ts |   4 +
 .../characterGroups/loadCharacterData.ts      |  89 ++++++++
 .../store/characterGroups/updateCharacters.ts |  94 ++++++++
 .../PageEnigma/store/objectGroup/index.ts     |   3 +
 .../store/objectGroup/loadObjectData.ts       |  48 ++++
 .../store/{ => objectGroup}/objectGroup.ts    |  66 +-----
 .../store/objectGroup/updateObjectGroup.ts    |  59 +++++
 14 files changed, 403 insertions(+), 363 deletions(-)
 create mode 100644 app/pages/PageEnigma/store/characterGroups/addCharacter.ts
 rename app/pages/PageEnigma/store/{ => characterGroups}/characterGroups.ts (67%)
 create mode 100644 app/pages/PageEnigma/store/characterGroups/index.ts
 create mode 100644 app/pages/PageEnigma/store/characterGroups/loadCharacterData.ts
 create mode 100644 app/pages/PageEnigma/store/characterGroups/updateCharacters.ts
 create mode 100644 app/pages/PageEnigma/store/objectGroup/index.ts
 create mode 100644 app/pages/PageEnigma/store/objectGroup/loadObjectData.ts
 rename app/pages/PageEnigma/store/{ => objectGroup}/objectGroup.ts (72%)
 create mode 100644 app/pages/PageEnigma/store/objectGroup/updateObjectGroup.ts

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 9fb7d82c9..5017af70a 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -2,23 +2,19 @@ import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { useSignals } from "@preact/signals-react/runtime";
 import { useCallback, useContext, useEffect } from "react";
 import {
-  audioGroup,
-  cameraGroup,
-  characterGroups,
+  addNewCharacter,
   currentTime,
-  objectGroup,
+  loadAudioData,
+  loadCameraData,
+  loadCharacterData,
+  loadObjectData,
 } from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import {
-  CharacterGroup,
-  Clip,
   ClipGroup,
-  ClipType,
-  Keyframe,
   MediaItem,
-  ObjectTrack,
   QueueClip,
   QueueKeyframe,
   UpdateTime,
@@ -32,65 +28,12 @@ interface Arguments {
   data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
 }
 
-function addCharacter(item: ClipUI) {
-  const existingCharacter = characterGroups.value.find(
-    (character) => character.id === item.object_uuid,
-  );
-
-  if (existingCharacter) {
-    return existingCharacter;
-  }
-
-  const newCharacter = {
-    id: item.object_uuid,
-    name: item.object_name,
-    muted: false,
-    animationClips: [],
-    positionKeyframes: [],
-    lipSyncClips: [],
-  } as CharacterGroup;
-
-  characterGroups.value = [
-    ...characterGroups.value.filter(
-      (character) => character.id !== item.object_uuid,
-    ),
-    newCharacter,
-  ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1));
-
-  return characterGroups.value.find(
-    (character) => character.id === item.object_uuid,
-  ) as CharacterGroup;
-}
-
-function addObject(item: ClipUI) {
-  const existingObject = objectGroup.value.objects.find(
-    (obj) => obj.object_uuid === item.object_uuid,
-  );
-
-  if (existingObject) {
-    return existingObject;
-  }
-
-  const newObject = {
-    object_uuid: item.object_uuid,
-    name: item.object_name,
-    keyframes: [] as Keyframe[],
-  } as ObjectTrack;
-
-  objectGroup.value = {
-    id: "OB1",
-    objects: [
-      ...objectGroup.value.objects.filter(
-        (obj) => obj.object_uuid !== item.object_uuid,
-      ),
-      newObject,
-    ].sort((objA, objB) => (objA.object_uuid < objB.object_uuid ? -1 : 1)),
-  };
-
-  return objectGroup.value.objects.find(
-    (obj) => obj.object_uuid === item.object_uuid,
-  ) as ObjectTrack;
-}
+const LOADING_FUNCTIONS: Record<ClipGroup, (item: ClipUI) => void> = {
+  [ClipGroup.CHARACTER]: loadCharacterData,
+  [ClipGroup.OBJECT]: loadObjectData,
+  [ClipGroup.CAMERA]: loadCameraData,
+  [ClipGroup.GLOBAL_AUDIO]: loadAudioData,
+};
 
 export function useQueueHandler() {
   useSignals();
@@ -103,120 +46,12 @@ export function useQueueHandler() {
         currentTime.value = (data as UpdateTime).currentTime;
         break;
       case fromEngineActions.UPDATE_TIME_LINE:
-        console.log(data);
         (data as ClipUI[]).forEach((item) => {
-          if (item.group === ClipGroup.CHARACTER) {
-            const existingCharacter = addCharacter(item);
-            if (item.type === ClipType.ANIMATION) {
-              const newItem = {
-                version: item.version,
-                clip_uuid: item.clip_uuid,
-                type: item.type,
-                group: item.group,
-                object_uuid: item.object_uuid,
-                media_id: item.media_id,
-                name: item.name,
-                offset: item.offset,
-                length: item.length,
-              } as Clip;
-              existingCharacter.animationClips.push(newItem);
-              existingCharacter.animationClips.sort(
-                (clipA, clipB) => clipA.offset - clipB.offset,
-              );
-            }
-            if (item.type === ClipType.TRANSFORM) {
-              const newKeyframe = {
-                version: item.version,
-                keyframe_uuid: item.clip_uuid,
-                group: item.group,
-                object_uuid: item.object_uuid,
-                offset: item.keyframe_offset,
-              } as Keyframe;
-              existingCharacter.positionKeyframes.push(newKeyframe);
-              existingCharacter.positionKeyframes.sort(
-                (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
-              );
-            }
-            if (item.type === ClipType.AUDIO) {
-              const newItem = {
-                version: item.version,
-                clip_uuid: item.clip_uuid,
-                type: item.type,
-                group: item.group,
-                object_uuid: item.object_uuid,
-                media_id: item.media_id,
-                name: item.name,
-                offset: item.offset,
-                length: item.length,
-              } as Clip;
-              existingCharacter.lipSyncClips.push(newItem);
-              existingCharacter.lipSyncClips.sort(
-                (clipA, clipB) => clipA.offset - clipB.offset,
-              );
-            }
-          }
-          if (item.group === ClipGroup.OBJECT) {
-            const existingObject = addObject(item);
-            const newKeyframe = {
-              version: item.version,
-              keyframe_uuid: item.clip_uuid,
-              group: item.group,
-              object_uuid: item.object_uuid,
-              offset: item.keyframe_offset,
-            } as Keyframe;
-            existingObject.keyframes.push(newKeyframe);
-            existingObject.keyframes.sort(
-              (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
-            );
-          }
-          if (item.group === ClipGroup.CAMERA) {
-            const existingCamera = cameraGroup.value;
-            const newKeyframe = {
-              version: item.version,
-              keyframe_uuid: item.clip_uuid,
-              group: item.group,
-              object_uuid: item.object_uuid,
-              offset: item.keyframe_offset,
-            } as Keyframe;
-            existingCamera.keyframes.push(newKeyframe);
-            existingCamera.keyframes.sort(
-              (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
-            );
-            // cameraGroup.value = { ...cameraGroup.value };
-          }
-          if (item.group === ClipGroup.GLOBAL_AUDIO) {
-            const existingAudio = audioGroup.value;
-            const newItem = {
-              version: item.version,
-              clip_uuid: item.clip_uuid,
-              type: item.type,
-              group: item.group,
-              object_uuid: item.object_uuid,
-              media_id: item.media_id,
-              name: item.name,
-              offset: item.offset,
-              length: item.length,
-            } as Clip;
-            existingAudio.clips.push(newItem);
-            existingAudio.clips.sort(
-              (clipA, clipB) => clipA.offset - clipB.offset,
-            );
-          }
+          LOADING_FUNCTIONS[item.group](item);
         });
         break;
       case fromEngineActions.UPDATE_CHARACTER_ID: {
-        const newCharacter = {
-          id: (data as MediaItem).object_uuid,
-          name: (data as MediaItem).name,
-          muted: false,
-          animationClips: [],
-          positionKeyframes: [],
-          lipSyncClips: [],
-        } as CharacterGroup;
-
-        characterGroups.value = [...characterGroups.value, newCharacter].sort(
-          (charA, charB) => (charA.id < charB.id ? -1 : 1),
-        );
+        addNewCharacter(data as MediaItem);
         break;
       }
       default:
@@ -224,16 +59,19 @@ export function useQueueHandler() {
     }
   }, []);
 
-  const handleToTimelineActions = useCallback(({ action, data }: Arguments) => {
-    console.log("TO TIMELINE", action, data);
-    switch (action) {
-      case toTimelineActions.ADD_KEYFRAME:
-        addKeyframe(data as QueueKeyframe, currentTime.value);
-        break;
-      default:
-        throw new Error(`Unknown action ${action}`);
-    }
-  }, []);
+  const handleToTimelineActions = useCallback(
+    ({ action, data }: Arguments) => {
+      console.log("TO TIMELINE", action, data);
+      switch (action) {
+        case toTimelineActions.ADD_KEYFRAME:
+          addKeyframe(data as QueueKeyframe, currentTime.value);
+          break;
+        default:
+          throw new Error(`Unknown action ${action}`);
+      }
+    },
+    [addKeyframe],
+  );
 
   useEffect(() => {
     Queue.subscribe(QueueNames.FROM_ENGINE, handleFromEngineActions);
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index d25160450..f216c0f85 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -26,12 +26,9 @@ export const TrackProvider = ({ children }: Props) => {
 
   // cross group functions
   const dropClip = useCallback(() => {
-    console.log(`${JSON.stringify(dragItem)}`);
-
-    if (dragItem.value != null && dragItem != null) {
-      // should be able to drag into the timeline ... TODO FIX?
-
-      if (dragItem.value.type === AssetType.CHARACTER) {
+    if (dragItem.value) {
+      const mediaItem = dragItem.value;
+      if (mediaItem.type === AssetType.CHARACTER) {
         addCharacter(dragItem.value);
       }
       // if (dragItem.value.type === AssetType.CAMERA) {
@@ -48,7 +45,7 @@ export const TrackProvider = ({ children }: Props) => {
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {
         addCharacterAnimation({
-          dragItem: dragItem.value!,
+          dragItem: dragItem.value,
           characterId: dropId.value,
           offset: dropOffset.value,
         });
@@ -56,12 +53,12 @@ export const TrackProvider = ({ children }: Props) => {
       if (dragItem.value.type === AssetType.AUDIO) {
         console.log("add audio", dropId.value);
         addCharacterAudio({
-          dragItem: dragItem.value!,
+          dragItem: dragItem.value,
           characterId: dropId.value,
           offset: dropOffset.value,
         });
         addGlobalAudio({
-          dragItem: dragItem.value!,
+          dragItem: dragItem.value,
           audioId: dropId.value,
           offset: dropOffset.value,
         });
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts
index cd7447814..0aaad00d3 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts
@@ -28,6 +28,7 @@ const DELETE_KEYFRAME: Record<ClipGroup, (keyframe: Keyframe) => void> = {
 
 export default function useUpdateKeyframe() {
   const addKeyframe = useCallback((keyframe: QueueKeyframe, offset: number) => {
+    console.log("k", keyframe);
     ADD_KEYFRAME[keyframe.group](keyframe, offset);
   }, []);
 
diff --git a/app/pages/PageEnigma/store/audioGroup.ts b/app/pages/PageEnigma/store/audioGroup.ts
index 9a6d7fc2d..630778507 100644
--- a/app/pages/PageEnigma/store/audioGroup.ts
+++ b/app/pages/PageEnigma/store/audioGroup.ts
@@ -10,6 +10,7 @@ import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import * as uuid from "uuid";
 import { signal } from "@preact/signals-core";
+import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
 
 export const audioGroup = signal<AudioGroup>({
   id: "AG-1",
@@ -140,3 +141,20 @@ export function deleteAudioClip(clip: Clip) {
     ],
   };
 }
+
+export function loadAudioData(item: ClipUI) {
+  const existingAudio = audioGroup.value;
+  const newItem = {
+    version: item.version,
+    clip_uuid: item.clip_uuid,
+    type: item.type,
+    group: item.group,
+    object_uuid: item.object_uuid,
+    media_id: item.media_id,
+    name: item.name,
+    offset: item.offset,
+    length: item.length,
+  } as Clip;
+  existingAudio.clips.push(newItem);
+  existingAudio.clips.sort((clipA, clipB) => clipA.offset - clipB.offset);
+}
diff --git a/app/pages/PageEnigma/store/cameraGroup.ts b/app/pages/PageEnigma/store/cameraGroup.ts
index 029a8b681..72bf56aad 100644
--- a/app/pages/PageEnigma/store/cameraGroup.ts
+++ b/app/pages/PageEnigma/store/cameraGroup.ts
@@ -8,6 +8,7 @@ import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import * as uuid from "uuid";
 import { signal } from "@preact/signals-core";
+import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
 // import { toast } from "react-hot-toast";
 
 export const cameraGroup = signal<CameraGroup>({ id: "CG1", keyframes: [] });
@@ -112,3 +113,18 @@ export function deleteCameraKeyframe(deleteKeyframe: Keyframe) {
     ],
   };
 }
+
+export function loadCameraData(item: ClipUI) {
+  const existingCamera = cameraGroup.value;
+  const newKeyframe = {
+    version: item.version,
+    keyframe_uuid: item.clip_uuid,
+    group: item.group,
+    object_uuid: item.object_uuid,
+    offset: item.keyframe_offset,
+  } as Keyframe;
+  existingCamera.keyframes.push(newKeyframe);
+  existingCamera.keyframes.sort(
+    (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
+  );
+}
diff --git a/app/pages/PageEnigma/store/characterGroups/addCharacter.ts b/app/pages/PageEnigma/store/characterGroups/addCharacter.ts
new file mode 100644
index 000000000..c68a30000
--- /dev/null
+++ b/app/pages/PageEnigma/store/characterGroups/addCharacter.ts
@@ -0,0 +1,28 @@
+import { CharacterGroup, 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";
+import { characterGroups } from "~/pages/PageEnigma/store";
+
+export function addCharacter(character: MediaItem) {
+  Queue.publish({
+    queueName: QueueNames.TO_ENGINE,
+    action: toEngineActions.ADD_CHARACTER,
+    data: character,
+  });
+}
+
+export function addNewCharacter(data: MediaItem) {
+  const newCharacter = {
+    id: data.object_uuid,
+    name: data.name,
+    muted: false,
+    animationClips: [],
+    positionKeyframes: [],
+    lipSyncClips: [],
+  } as CharacterGroup;
+
+  characterGroups.value = [...characterGroups.value, newCharacter].sort(
+    (charA, charB) => (charA.id < charB.id ? -1 : 1),
+  );
+}
diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups/characterGroups.ts
similarity index 67%
rename from app/pages/PageEnigma/store/characterGroups.ts
rename to app/pages/PageEnigma/store/characterGroups/characterGroups.ts
index ecc977611..b7be79cfc 100644
--- a/app/pages/PageEnigma/store/characterGroups.ts
+++ b/app/pages/PageEnigma/store/characterGroups/characterGroups.ts
@@ -15,95 +15,6 @@ import * as uuid from "uuid";
 
 export const characterGroups = signal<CharacterGroup[]>([]);
 
-export function updateCharacters({
-  type,
-  id,
-  offset,
-  length,
-}: {
-  type: ClipType;
-  id: string;
-  length?: number;
-  offset: number;
-}) {
-  const oldCharacterGroups = characterGroups.value;
-  if (type === ClipType.ANIMATION) {
-    characterGroups.value = oldCharacterGroups.map((character) => {
-      const newAnimationClips = [...character.animationClips];
-      const clipIndex = newAnimationClips.findIndex(
-        (row) => row.clip_uuid === id,
-      );
-      if (clipIndex === -1) {
-        return { ...character };
-      }
-      const clip = newAnimationClips[clipIndex];
-      clip.offset = offset;
-      clip.length = length!;
-
-      Queue.publish({
-        queueName: QueueNames.TO_ENGINE,
-        action: toEngineActions.UPDATE_CLIP,
-        data: clip,
-      });
-
-      return {
-        ...character,
-        animationClips: newAnimationClips,
-      };
-    });
-  }
-
-  if (type === ClipType.TRANSFORM) {
-    characterGroups.value = oldCharacterGroups.map((character) => {
-      const newPositionKeyframes = [...character.positionKeyframes];
-      const keyframeIndex = newPositionKeyframes.findIndex(
-        (row) => row.keyframe_uuid === id,
-      );
-      if (keyframeIndex === -1) {
-        return { ...character };
-      }
-      const keyframe = newPositionKeyframes[keyframeIndex];
-      keyframe.offset = offset;
-
-      Queue.publish({
-        queueName: QueueNames.TO_ENGINE,
-        action: toEngineActions.UPDATE_CLIP,
-        data: keyframe,
-      });
-
-      return {
-        ...character,
-        positionKeyframes: newPositionKeyframes,
-      };
-    });
-  }
-  if (type === ClipType.AUDIO) {
-    characterGroups.value = oldCharacterGroups.map((character) => {
-      const newLipSyncClips = [...character.lipSyncClips];
-      const clipIndex = newLipSyncClips.findIndex(
-        (row) => row.clip_uuid === id,
-      );
-      if (clipIndex === -1) {
-        return { ...character };
-      }
-      const clip = newLipSyncClips[clipIndex];
-      clip.offset = offset;
-      clip.length = length!;
-
-      Queue.publish({
-        queueName: QueueNames.TO_ENGINE,
-        action: toEngineActions.UPDATE_CLIP,
-        data: clip,
-      });
-
-      return {
-        ...character,
-        lipSyncClips: newLipSyncClips,
-      };
-    });
-  }
-}
-
 export function addCharacterAnimation({
   dragItem,
   characterId,
@@ -326,25 +237,3 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) {
     }),
   }));
 }
-
-// probably not to much to send imo
-export function addCharacter(character: MediaItem) {
-  //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
-  // "type":"character","name":"Female Doll",
-  // "thumbnail":"resources/characters/img03.png"}
-  Queue.publish({
-    queueName: QueueNames.TO_ENGINE,
-    action: toEngineActions.ADD_CHARACTER,
-    data: character,
-  });
-}
-export function addObject(object: MediaItem) {
-  //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ",
-  // "type":"character","name":"Female Doll",
-  // "thumbnail":"resources/characters/img03.png"}
-  Queue.publish({
-    queueName: QueueNames.TO_ENGINE,
-    action: toEngineActions.ADD_OBJECT,
-    data: object,
-  });
-}
diff --git a/app/pages/PageEnigma/store/characterGroups/index.ts b/app/pages/PageEnigma/store/characterGroups/index.ts
new file mode 100644
index 000000000..eb200150c
--- /dev/null
+++ b/app/pages/PageEnigma/store/characterGroups/index.ts
@@ -0,0 +1,4 @@
+export * from "./addCharacter";
+export * from "./characterGroups";
+export * from "./loadCharacterData";
+export * from "./updateCharacters";
diff --git a/app/pages/PageEnigma/store/characterGroups/loadCharacterData.ts b/app/pages/PageEnigma/store/characterGroups/loadCharacterData.ts
new file mode 100644
index 000000000..db7722abe
--- /dev/null
+++ b/app/pages/PageEnigma/store/characterGroups/loadCharacterData.ts
@@ -0,0 +1,89 @@
+import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
+import {
+  CharacterGroup,
+  Clip,
+  ClipType,
+  Keyframe,
+} from "~/pages/PageEnigma/models";
+import { characterGroups } from "~/pages/PageEnigma/store";
+
+function getAddCharacter(item: ClipUI) {
+  const existingCharacter = characterGroups.value.find(
+    (character) => character.id === item.object_uuid,
+  );
+
+  if (existingCharacter) {
+    return existingCharacter;
+  }
+
+  const newCharacter = {
+    id: item.object_uuid,
+    name: item.object_name,
+    muted: false,
+    animationClips: [],
+    positionKeyframes: [],
+    lipSyncClips: [],
+  } as CharacterGroup;
+
+  characterGroups.value = [
+    ...characterGroups.value.filter(
+      (character) => character.id !== item.object_uuid,
+    ),
+    newCharacter,
+  ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1));
+
+  return characterGroups.value.find(
+    (character) => character.id === item.object_uuid,
+  ) as CharacterGroup;
+}
+
+export function loadCharacterData(item: ClipUI) {
+  const existingCharacter = getAddCharacter(item);
+  if (item.type === ClipType.ANIMATION) {
+    const newItem = {
+      version: item.version,
+      clip_uuid: item.clip_uuid,
+      type: item.type,
+      group: item.group,
+      object_uuid: item.object_uuid,
+      media_id: item.media_id,
+      name: item.name,
+      offset: item.offset,
+      length: item.length,
+    } as Clip;
+    existingCharacter.animationClips.push(newItem);
+    existingCharacter.animationClips.sort(
+      (clipA, clipB) => clipA.offset - clipB.offset,
+    );
+  }
+  if (item.type === ClipType.TRANSFORM) {
+    const newKeyframe = {
+      version: item.version,
+      keyframe_uuid: item.clip_uuid,
+      group: item.group,
+      object_uuid: item.object_uuid,
+      offset: item.keyframe_offset,
+    } as Keyframe;
+    existingCharacter.positionKeyframes.push(newKeyframe);
+    existingCharacter.positionKeyframes.sort(
+      (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
+    );
+  }
+  if (item.type === ClipType.AUDIO) {
+    const newItem = {
+      version: item.version,
+      clip_uuid: item.clip_uuid,
+      type: item.type,
+      group: item.group,
+      object_uuid: item.object_uuid,
+      media_id: item.media_id,
+      name: item.name,
+      offset: item.offset,
+      length: item.length,
+    } as Clip;
+    existingCharacter.lipSyncClips.push(newItem);
+    existingCharacter.lipSyncClips.sort(
+      (clipA, clipB) => clipA.offset - clipB.offset,
+    );
+  }
+}
diff --git a/app/pages/PageEnigma/store/characterGroups/updateCharacters.ts b/app/pages/PageEnigma/store/characterGroups/updateCharacters.ts
new file mode 100644
index 000000000..93de4af12
--- /dev/null
+++ b/app/pages/PageEnigma/store/characterGroups/updateCharacters.ts
@@ -0,0 +1,94 @@
+import { ClipType } 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";
+import { characterGroups } from "~/pages/PageEnigma/store";
+
+export function updateCharacters({
+  type,
+  id,
+  offset,
+  length,
+}: {
+  type: ClipType;
+  id: string;
+  length?: number;
+  offset: number;
+}) {
+  const oldCharacterGroups = characterGroups.value;
+  if (type === ClipType.ANIMATION) {
+    characterGroups.value = oldCharacterGroups.map((character) => {
+      const newAnimationClips = [...character.animationClips];
+      const clipIndex = newAnimationClips.findIndex(
+        (row) => row.clip_uuid === id,
+      );
+      if (clipIndex === -1) {
+        return { ...character };
+      }
+      const clip = newAnimationClips[clipIndex];
+      clip.offset = offset;
+      clip.length = length!;
+
+      Queue.publish({
+        queueName: QueueNames.TO_ENGINE,
+        action: toEngineActions.UPDATE_CLIP,
+        data: clip,
+      });
+
+      return {
+        ...character,
+        animationClips: newAnimationClips,
+      };
+    });
+  }
+
+  if (type === ClipType.TRANSFORM) {
+    characterGroups.value = oldCharacterGroups.map((character) => {
+      const newPositionKeyframes = [...character.positionKeyframes];
+      const keyframeIndex = newPositionKeyframes.findIndex(
+        (row) => row.keyframe_uuid === id,
+      );
+      if (keyframeIndex === -1) {
+        return { ...character };
+      }
+      const keyframe = newPositionKeyframes[keyframeIndex];
+      keyframe.offset = offset;
+
+      Queue.publish({
+        queueName: QueueNames.TO_ENGINE,
+        action: toEngineActions.UPDATE_CLIP,
+        data: keyframe,
+      });
+
+      return {
+        ...character,
+        positionKeyframes: newPositionKeyframes,
+      };
+    });
+  }
+  if (type === ClipType.AUDIO) {
+    characterGroups.value = oldCharacterGroups.map((character) => {
+      const newLipSyncClips = [...character.lipSyncClips];
+      const clipIndex = newLipSyncClips.findIndex(
+        (row) => row.clip_uuid === id,
+      );
+      if (clipIndex === -1) {
+        return { ...character };
+      }
+      const clip = newLipSyncClips[clipIndex];
+      clip.offset = offset;
+      clip.length = length!;
+
+      Queue.publish({
+        queueName: QueueNames.TO_ENGINE,
+        action: toEngineActions.UPDATE_CLIP,
+        data: clip,
+      });
+
+      return {
+        ...character,
+        lipSyncClips: newLipSyncClips,
+      };
+    });
+  }
+}
diff --git a/app/pages/PageEnigma/store/objectGroup/index.ts b/app/pages/PageEnigma/store/objectGroup/index.ts
new file mode 100644
index 000000000..43c1cdb48
--- /dev/null
+++ b/app/pages/PageEnigma/store/objectGroup/index.ts
@@ -0,0 +1,3 @@
+export * from "./loadObjectData";
+export * from "./objectGroup";
+export * from "./updateObjectGroup";
diff --git a/app/pages/PageEnigma/store/objectGroup/loadObjectData.ts b/app/pages/PageEnigma/store/objectGroup/loadObjectData.ts
new file mode 100644
index 000000000..883168179
--- /dev/null
+++ b/app/pages/PageEnigma/store/objectGroup/loadObjectData.ts
@@ -0,0 +1,48 @@
+import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
+import { Keyframe, ObjectTrack } from "~/pages/PageEnigma/models";
+import { objectGroup } from "~/pages/PageEnigma/store";
+
+function getAddObject(item: ClipUI) {
+  const existingObject = objectGroup.value.objects.find(
+    (obj) => obj.object_uuid === item.object_uuid,
+  );
+
+  if (existingObject) {
+    return existingObject;
+  }
+
+  const newObject = {
+    object_uuid: item.object_uuid,
+    name: item.object_name,
+    keyframes: [] as Keyframe[],
+  } as ObjectTrack;
+
+  objectGroup.value = {
+    id: "OB1",
+    objects: [
+      ...objectGroup.value.objects.filter(
+        (obj) => obj.object_uuid !== item.object_uuid,
+      ),
+      newObject,
+    ].sort((objA, objB) => (objA.object_uuid < objB.object_uuid ? -1 : 1)),
+  };
+
+  return objectGroup.value.objects.find(
+    (obj) => obj.object_uuid === item.object_uuid,
+  ) as ObjectTrack;
+}
+
+export function loadObjectData(item: ClipUI) {
+  const existingObject = getAddObject(item);
+  const newKeyframe = {
+    version: item.version,
+    keyframe_uuid: item.clip_uuid,
+    group: item.group,
+    object_uuid: item.object_uuid,
+    offset: item.keyframe_offset,
+  } as Keyframe;
+  existingObject.keyframes.push(newKeyframe);
+  existingObject.keyframes.sort(
+    (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset,
+  );
+}
diff --git a/app/pages/PageEnigma/store/objectGroup.ts b/app/pages/PageEnigma/store/objectGroup/objectGroup.ts
similarity index 72%
rename from app/pages/PageEnigma/store/objectGroup.ts
rename to app/pages/PageEnigma/store/objectGroup/objectGroup.ts
index bcb83cd51..80b4b8118 100644
--- a/app/pages/PageEnigma/store/objectGroup.ts
+++ b/app/pages/PageEnigma/store/objectGroup/objectGroup.ts
@@ -1,13 +1,16 @@
 import { signal } from "@preact/signals-core";
 import {
   Keyframe,
+  MediaItem,
   ObjectGroup,
+  ObjectTrack,
   QueueKeyframe,
 } from "~/pages/PageEnigma/models";
 import * as uuid from "uuid";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui";
 // import { toast } from "react-hot-toast";
 
 export const objectGroup = signal<ObjectGroup>({
@@ -15,61 +18,6 @@ export const objectGroup = signal<ObjectGroup>({
   objects: [],
 });
 
-export function updateObject({
-  id,
-  offset,
-}: {
-  id: string;
-  offset: number;
-}): void {
-  const oldObjectGroup = objectGroup.value;
-  const obj = oldObjectGroup.objects.find((objectTrack) =>
-    objectTrack.keyframes.some((row) => row.keyframe_uuid === id),
-  );
-
-  if (!obj) {
-    return;
-  }
-
-  const existingKeyframe = obj.keyframes.some((row) => {
-    return row.offset === offset && row.keyframe_uuid !== id;
-  });
-
-  if (existingKeyframe) {
-    //toast.error("There can only be one keyframe at this offset.");
-    return;
-  }
-
-  objectGroup.value = {
-    id: oldObjectGroup.id,
-    objects: oldObjectGroup.objects.map((object) => ({
-      object_uuid: object.object_uuid,
-      name: object.name,
-      keyframes: object.keyframes.map((keyframe) => {
-        if (keyframe.keyframe_uuid !== id) {
-          return {
-            ...keyframe,
-          };
-        }
-
-        Queue.publish({
-          queueName: QueueNames.TO_ENGINE,
-          action: toEngineActions.UPDATE_KEYFRAME,
-          data: {
-            ...keyframe,
-            offset,
-          },
-        });
-
-        return {
-          ...keyframe,
-          offset,
-        };
-      }),
-    })),
-  };
-}
-
 export function addObjectKeyframe(keyframe: QueueKeyframe, offset: number) {
   const oldObjectGroup = objectGroup.value;
   const obj = oldObjectGroup.objects.find(
@@ -166,3 +114,11 @@ export function deleteObjectKeyframe(keyframe: Keyframe) {
     ],
   };
 }
+
+export function addObject(object: MediaItem) {
+  Queue.publish({
+    queueName: QueueNames.TO_ENGINE,
+    action: toEngineActions.ADD_OBJECT,
+    data: object,
+  });
+}
diff --git a/app/pages/PageEnigma/store/objectGroup/updateObjectGroup.ts b/app/pages/PageEnigma/store/objectGroup/updateObjectGroup.ts
new file mode 100644
index 000000000..0db35259a
--- /dev/null
+++ b/app/pages/PageEnigma/store/objectGroup/updateObjectGroup.ts
@@ -0,0 +1,59 @@
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+import { objectGroup } from "~/pages/PageEnigma/store";
+
+export function updateObject({
+  id,
+  offset,
+}: {
+  id: string;
+  offset: number;
+}): void {
+  const oldObjectGroup = objectGroup.value;
+  const obj = oldObjectGroup.objects.find((objectTrack) =>
+    objectTrack.keyframes.some((row) => row.keyframe_uuid === id),
+  );
+
+  if (!obj) {
+    return;
+  }
+
+  const existingKeyframe = obj.keyframes.some((row) => {
+    return row.offset === offset && row.keyframe_uuid !== id;
+  });
+
+  if (existingKeyframe) {
+    //toast.error("There can only be one keyframe at this offset.");
+    return;
+  }
+
+  objectGroup.value = {
+    id: oldObjectGroup.id,
+    objects: oldObjectGroup.objects.map((object) => ({
+      object_uuid: object.object_uuid,
+      name: object.name,
+      keyframes: object.keyframes.map((keyframe) => {
+        if (keyframe.keyframe_uuid !== id) {
+          return {
+            ...keyframe,
+          };
+        }
+
+        Queue.publish({
+          queueName: QueueNames.TO_ENGINE,
+          action: toEngineActions.UPDATE_KEYFRAME,
+          data: {
+            ...keyframe,
+            offset,
+          },
+        });
+
+        return {
+          ...keyframe,
+          offset,
+        };
+      }),
+    })),
+  };
+}

From 9a96cce89558aa2fcd4f2fc0f6e4c518044e1b5a Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Mon, 8 Apr 2024 06:53:12 -0400
Subject: [PATCH 23/24] Clear existing data on load

---
 .../comps/Timeline/utils/useQueueHandler.ts   |  3 ++-
 .../contexts/TrackContext/TrackContext.tsx    |  5 ++++
 .../contexts/TrackContext/TrackProvider.tsx   | 26 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 5017af70a..edf88049e 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -37,7 +37,7 @@ const LOADING_FUNCTIONS: Record<ClipGroup, (item: ClipUI) => void> = {
 
 export function useQueueHandler() {
   useSignals();
-  const { addKeyframe } = useContext(TrackContext);
+  const { addKeyframe, clearExistingData } = useContext(TrackContext);
 
   const handleFromEngineActions = useCallback(({ action, data }: Arguments) => {
     console.log("FROM ENGINE", action, data);
@@ -46,6 +46,7 @@ export function useQueueHandler() {
         currentTime.value = (data as UpdateTime).currentTime;
         break;
       case fromEngineActions.UPDATE_TIME_LINE:
+        clearExistingData();
         (data as ClipUI[]).forEach((item) => {
           LOADING_FUNCTIONS[item.group](item);
         });
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
index f1105ec7c..0c8d6b0b8 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
@@ -6,6 +6,9 @@ export const TrackContext = createContext<{
   addKeyframe: (keyframe: QueueKeyframe, offset: number) => void;
   deleteKeyframe: (keyframe: Keyframe) => void;
 
+  // misc
+  clearExistingData: () => void;
+
   // drag and drop
   startDrag: (item: MediaItem) => void;
   endDrag: () => void;
@@ -13,6 +16,8 @@ export const TrackContext = createContext<{
   addKeyframe: () => {},
   deleteKeyframe: () => {},
 
+  clearExistingData: () => {},
+
   startDrag: () => {},
   endDrag: () => {},
 });
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index f216c0f85..f8348d1c5 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -12,6 +12,10 @@ import {
   dropId,
   dropOffset,
   addObject,
+  characterGroups,
+  cameraGroup,
+  audioGroup,
+  objectGroup,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 
@@ -67,14 +71,34 @@ export const TrackProvider = ({ children }: Props) => {
     endDrag();
   }, [endDrag]);
 
+  const clearExistingData = useCallback(() => {
+    characterGroups.value = [];
+    cameraGroup.value = {
+      id: "CG1",
+      keyframes: [],
+    };
+    audioGroup.value = {
+      id: "AG-1",
+      clips: [],
+      muted: false,
+    };
+    objectGroup.value = {
+      id: "OG1",
+      objects: [],
+    };
+  }, []);
+
   const values = useMemo(() => {
     return {
       ...keyframes,
 
+      clearExistingData,
+
       ...dragDrop,
       endDrag: dropClip,
     };
-  }, [keyframes, dragDrop, dropClip]);
+  }, [keyframes, dragDrop, dropClip, clearExistingData]);
+
   return (
     <TrackContext.Provider value={values}>{children}</TrackContext.Provider>
   );

From 13af8bbd05d44600395d71611fdb14897e10576e Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Mon, 8 Apr 2024 12:28:23 -0400
Subject: [PATCH 24/24] Fixing the page rendering, it works on chris's machine
 but doesn't work on everyone elses we are not sure why just yet. The fix that
 cause this issue was supposed to solve zooming.

---
 app/pages/PageEnigma/PageEnigma.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index c4e638810..67f3530d3 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -22,8 +22,9 @@ export const PageEnigma = () => {
   useSignals();
   useEffect(() => {
     function setPage() {
-      pageHeight.value = window.innerHeight / window.devicePixelRatio;
-      pageWidth.value = window.outerWidth / window.devicePixelRatio;
+      // TODO address this issue with zooming
+      pageHeight.value = window.innerHeight;
+      pageWidth.value = window.outerWidth;
     }
     timelineHeight.value = window.innerHeight * 0.25;
     sidePanelWidth.value = 443;