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 d793335c08..386c14d6c3 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 9a601aa64f..4be8244918 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 2544eb5075..ae86536204 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 e1090d081e..45e329f6be 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 84fc54c076..f93bde49a1 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 386c14d6c3..2fbfcd789e 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 ae86536204..7c7b972407 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 f93bde49a1..1cff55d2a6 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 2e647b32bc..484eaaa6d3 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 c5bf23e06d..b647466841 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 7c7b972407..747896cef7 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 af0707f0b9..c4f0cf9e18 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 45e329f6be..dc9072efe2 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 f1579cd77b..a920f7f686 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 f771f9910c..ed8c279265 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 c4f0cf9e18..af0707f0b9 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 dc9072efe2..96188daefe 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 e5cb72ff2a..2133951979 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 17e4ca7b3a..c4e6388109 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 3bd1d9502e..d875fe506b 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 c5bf23e06d..5329d91bc5 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 84fc54c076..ef9ed151d7 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 af0707f0b9..fd3ff7b0da 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 a920f7f686..b1eee9e62f 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 96188daefe..37c0962a15 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 710e7d02f8..33b5858a0b 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 ed8c279265..0c50561c54 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 37c0962a15..2a569216a3 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 2133951979..4719b9b583 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 33b5858a0b..dabc1f7303 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 2a569216a3..f85eaf424c 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 dabc1f7303..b2e41a0534 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 4719b9b583..788637432e 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 b2e41a0534..2f1a1123d1 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 006d3c9226..25eecff868 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 f85eaf424c..8dbcbb58ee 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 0c50561c54..2d2b773f19 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 8dbcbb58ee..e578d35dcf 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 788637432e..8c0c08051f 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 2f1a1123d1..71acee262a 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 71acee262a..9fb7d82c95 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 c3a9a66d3b..c4b963c99c 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 747896cef7..d251604506 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 7ee8a5e2b6..ecc977611f 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 e578d35dcf..bcb2cfedb0 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 bcb2cfedb0..84fa23d138 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 9fb7d82c95..5017af70ae 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 d251604506..f216c0f859 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 cd74478149..0aaad00d35 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 9a6d7fc2dd..630778507c 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 029a8b6810..72bf56aad1 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 0000000000..c68a300002
--- /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 ecc977611f..b7be79cfc1 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 0000000000..eb200150c0
--- /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 0000000000..db7722abe1
--- /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 0000000000..93de4af12a
--- /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 0000000000..43c1cdb480
--- /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 0000000000..8831681799
--- /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 bcb83cd51d..80b4b8118f 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 0000000000..0db35259af
--- /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 5017af70ae..edf88049e3 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 f1105ec7c6..0c8d6b0b80 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 f216c0f859..f8348d1c5a 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 c4e6388109..67f3530d30 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;