From 979966bcce0c3d676310fba67a8052002b6a6262 Mon Sep 17 00:00:00 2001
From: ArEnSc <6252325+ArEnSc@users.noreply.github.com>
Date: Tue, 9 Apr 2024 11:28:42 -0400
Subject: [PATCH 01/31] Update README.md

---
 README.md | 62 ++-----------------------------------------------------
 1 file changed, 2 insertions(+), 60 deletions(-)

diff --git a/README.md b/README.md
index 5797a74a14..762ccd33d6 100644
--- a/README.md
+++ b/README.md
@@ -6,66 +6,8 @@ Fast Prototyping with Better Netlify Pipeline:
 - [Netlify Functions Overview](https://docs.netlify.com/functions/overview)
 - [Tailwind Docs](https://tailwindcss.com/docs)
 
-## Netlify Setup
-
-1. Install the [Netlify CLI](https://docs.netlify.com/cli/get-started/):
-
-```sh
-npm i -g netlify-cli
+Setup
 ```
-
-If you have previously installed the Netlify CLI, you should update it to the latest version:
-
-```sh
-npm i -g netlify-cli@latest
-```
-
-2. Sign up and log in to Netlify:
-
-```sh
-netlify login
-```
-
-3. Create a new site:
-
-```sh
-netlify init
-```
-
-## Development
-
-Ensure all packages are installed by running:
-
-```sh
 npm install
-```
-
-Run
-
-```sh
-netlify dev
-```
-
-Open up [http://localhost:8888](http://localhost:8888), and you're ready to go!
-
-### Serve your site locally
-
-To serve your site locally in a production-like environment, run
-
-```sh
-netlify serve
-```
-
-Your site will be available at [http://localhost:8888](http://localhost:8888). Note that it will not auto-reload when you make changes.
-
-## Deployment
-
-There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:
-
-```sh
-# preview deployment
-netlify deploy --build
-
-# production deployment
-netlify deploy --build --prod
+npm run dev
 ```

From 99ba7ebf3aaf684a355e2c96b174669e57a57c4f Mon Sep 17 00:00:00 2001
From: ArEnSc <6252325+ArEnSc@users.noreply.github.com>
Date: Wed, 10 Apr 2024 15:26:18 -0400
Subject: [PATCH 02/31] Revert "move shapes, fix delete bug"

---
 app/components/InputVector.tsx                |   7 ----
 app/components/Textarea.tsx                   |  21 +++++------
 app/pages/PageEnigma/PageEnigma.tsx           |   2 +-
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |   8 +----
 app/pages/PageEnigma/Queue/toEngineActions.ts |   2 --
 .../ControlPanelSceneObject.tsx               |  17 ++++-----
 .../comps/Controls3D/Controls3D.tsx           |  33 ++++++++++++++++++
 .../comps/SidePanelTabs/TabStylization.tsx    |   1 -
 .../PageEnigma/comps/Timeline/Timeline.tsx    |   4 ---
 .../contexts/TrackContext/TrackProvider.tsx   |   7 ++--
 app/pages/PageEnigma/js/editor.ts             |  30 +++++++++-------
 app/pages/PageEnigma/js/timeline.ts           |  12 ++-----
 app/pages/PageEnigma/store/index.ts           |   1 -
 app/pages/PageEnigma/store/media.ts           |  32 +++--------------
 app/pages/PageEnigma/store/selectedItem.ts    |   2 --
 app/pages/PageEnigma/store/shape.ts           |  12 -------
 public/resources/shapes/cube.png              | Bin 7585 -> 0 bytes
 public/resources/shapes/cylinder.png          | Bin 5742 -> 0 bytes
 public/resources/shapes/donut.png             | Bin 10512 -> 0 bytes
 public/resources/shapes/sphere.png            | Bin 8557 -> 0 bytes
 20 files changed, 78 insertions(+), 113 deletions(-)
 delete mode 100644 app/pages/PageEnigma/store/shape.ts
 delete mode 100644 public/resources/shapes/cube.png
 delete mode 100644 public/resources/shapes/cylinder.png
 delete mode 100644 public/resources/shapes/donut.png
 delete mode 100644 public/resources/shapes/sphere.png

diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index 3c4d3c5a17..0a10274524 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -1,6 +1,5 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 interface InputVectorProps {
   x: number;
@@ -42,8 +41,6 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={xRef}
           value={x}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -58,8 +55,6 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={yRef}
           value={y}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -74,8 +69,6 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={zRef}
           value={z}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
     </div>
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index cc35c75ac2..278b54a7cb 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -2,7 +2,6 @@ import { TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Label } from "./Typography";
 import { kebabCase } from "~/utilities";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 type ResizeType =
   | "none"
@@ -25,10 +24,14 @@ export const Textarea = ({
 }) => {
   return (
     <div className="flex flex-col">
-      {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}
-
+      {label && 
+        <Label htmlFor={id ? id : kebabCase(label)}>
+          {label}
+        </Label>
+      }
+      
       <textarea
-        id={id ? id : label ? kebabCase(label) : undefined}
+        id={id ? id : (label ? kebabCase(label) : undefined)}
         className={twMerge(
           "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
           className,
@@ -38,14 +41,8 @@ export const Textarea = ({
           transition: "outline-color 0.15s ease-in-out",
           resize: resize,
         }}
-        onFocus={(e) => {
-          ignoreDelete.value = true;
-          e.currentTarget.style.outlineColor = "#e66462";
-        }}
-        onBlur={(e) => {
-          ignoreDelete.value = false;
-          e.currentTarget.style.outlineColor = "transparent";
-        }}
+        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
+        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
         {...rest}
       />
     </div>
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 613becceb5..afd78326cc 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -18,7 +18,7 @@ export const PageEnigma = () => {
     function setPage() {
       // TODO address this issue with zooming
       pageHeight.value = window.innerHeight;
-      pageWidth.value = window.innerWidth;
+      pageWidth.value = window.outerWidth;
     }
     timelineHeight.value = window.innerHeight * 0.25;
     sidePanelWidth.value = 443;
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index e635b36557..d875fe506b 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -101,13 +101,7 @@ export const PageEnigmaComponent = () => {
 
               {/* Bottom controls */}
               <div
-                className="absolute bottom-0 left-0"
-                style={{
-                  width:
-                    pageWidth.value -
-                    (sidePanelVisible.value ? sidePanelWidth.value : 0) -
-                    84,
-                }}
+                className="absolute bottom-0 left-0 w-full"
                 onClick={handleOverlayClick}
               >
                 <PreviewEngineCamera />
diff --git a/app/pages/PageEnigma/Queue/toEngineActions.ts b/app/pages/PageEnigma/Queue/toEngineActions.ts
index 3a1e828a00..4be8244918 100644
--- a/app/pages/PageEnigma/Queue/toEngineActions.ts
+++ b/app/pages/PageEnigma/Queue/toEngineActions.ts
@@ -7,8 +7,6 @@ export enum toEngineActions {
 
   ADD_OBJECT = "add_object",
 
-  ADD_SHAPE = "add_shape",
-
   // data= QueueKeyframe
   DELETE_CLIP = "delete_clip",
   // data=QueueClip
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index d736eb492b..8242f70de6 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -132,14 +132,15 @@ export const ControlPanelSceneObject = () => {
         return;
       }
 
-      for (const key in editorEngine?.timeline.characters) {
-        const element = editorEngine?.timeline.characters[key];
+      for (let key in editorEngine?.timeline.characters) {
+        let element = editorEngine?.timeline.characters[key];
         if (key == currentSceneObject.object_uuid) {
-          currentSceneObject.group = element;
-          break;
+            currentSceneObject.group = element;
+            break;
         }
       }
 
+
       Queue.publish({
         queueName: QueueNames.TO_TIMELINE,
         action: toTimelineActions.ADD_KEYFRAME,
@@ -164,13 +165,7 @@ export const ControlPanelSceneObject = () => {
   return (
     <Transition
       show={appUiState?.controlPanel.isShowing}
-      className={[
-        "absolute bottom-0 right-0",
-        "m-4 flex h-fit w-fit flex-col gap-2",
-        "rounded-lg",
-        "border border-ui-panel-border",
-        "bg-ui-panel p-4 text-white",
-      ].join(" ")}
+      className="absolute bottom-0 right-0 m-4 flex h-fit w-fit flex-col gap-2 rounded-lg border border-ui-panel-border bg-ui-panel p-4 text-white"
       enter="transition-opacity duration-100"
       enterFrom="opacity-0"
       enterTo="opacity-100"
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index a5ad366e1f..2a23a5effd 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -20,6 +20,30 @@ export const Controls3D = () => {
   const handlePlus = () => {
     console.log("Controls 3D: Plus button clicked");
   };
+  const handleCube = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Box");
+  };
+  const handleCylinder = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Cylinder");
+  };
+  const handleTorus = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Donut");
+  };
+  const handleSphere = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Sphere");
+  };
   const handleMoveArrows = () => {
     if (!editorEngine) {
       return;
@@ -70,6 +94,15 @@ export const Controls3D = () => {
 
             <span className="h-4 w-0 border-l border-white/[0.15]" />
 
+            <div className="flex gap-1">
+              <ButtonIcon icon={faCube} onClick={handleCube} />
+              <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
+              <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
+              <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
+            </div>
+
+            <span className="h-4 w-0 border-l border-white/[0.15]" />
+
             <ButtonIconSelect
               options={modes}
               onOptionChange={handleModeChange}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index f2b61ed00d..59aa38d8b1 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -6,7 +6,6 @@ import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers";
 import { EngineContext } from "../../contexts/EngineContext";
 import { ArtStyle } from "../../js/api_manager";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 export const TabStylization = () => {
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index dcbc98147b..9779650314 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -9,7 +9,6 @@ import {
   deleteAudioClip,
   deleteCharacterClip,
   selectedItem,
-  ignoreDelete,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -40,9 +39,6 @@ export const Timeline = () => {
   }, []);
 
   const onDeleteAsk = useCallback((event: KeyboardEvent) => {
-    if (ignoreDelete.value) {
-      return;
-    }
     if (
       ["Backspace", "Delete"].indexOf(event.key) > -1 &&
       selectedItem.value !== null
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index 5132e53acc..f6138cc05b 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -17,7 +17,6 @@ import {
   audioGroup,
   objectGroup,
   deleteCharacter,
-  addShape,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 import { deleteObject } from "~/pages/PageEnigma/store/objectGroup/deleteObject";
@@ -44,10 +43,10 @@ export const TrackProvider = ({ children }: Props) => {
       if (dragItem.value.type === AssetType.OBJECT) {
         addObject(dragItem.value);
       }
-      if (dragItem.value.type === AssetType.SHAPE) {
-        addShape(dragItem.value);
-      }
     }
+    // if (dragItem.value.type === AssetType.SHAPE) {
+    //   console.log("Dragged In Shape Type")
+    // }
 
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index a33026252c..ee7ae2c358 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -183,7 +183,6 @@ class Editor {
     this.animation_engine = new AnimationEngine(this.version);
 
     this.timeline = new TimeLine(
-      this,
       this.audio_engine,
       this.transform_engine,
       this.lipsync_engine,
@@ -206,10 +205,12 @@ class Editor {
     this.negative_prompt = "";
     this.art_style = ArtStyle.Anime2DFlat;
 
+
     this.storyteller_proxy_scene = new StoryTellerProxyScene(
       this.version,
       this.activeScene.scene,
     );
+
   }
 
   initialize(config: any) {
@@ -290,7 +291,7 @@ class Editor {
     );
 
     this.control = new TransformControls(this.camera, this.renderer.domElement);
-    this.control.space = "local"; // Local transformation mode
+    this.control.space = 'local'; // Local transformation mode
     // .space = 'world'; // Global mode
 
     this.control.setScaleSnap(0.1);
@@ -409,18 +410,19 @@ class Editor {
   // TO UPDATE selected objects in the scene might want to add to the scene ...
   async setSelectedObject(position: XYZ, rotation: XYZ, scale: XYZ) {
     if (this.selected != undefined || this.selected != null) {
-      //console.log(`triggering setSelectedObject`)
-      this.selected.position.x = position.x;
-      this.selected.position.y = position.y;
-      this.selected.position.z = position.z;
 
-      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x);
-      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y);
-      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z);
+      //console.log(`triggering setSelectedObject`) 
+      this.selected.position.x = position.x
+      this.selected.position.y = position.y
+      this.selected.position.z = position.z
 
-      this.selected.scale.x = scale.x;
-      this.selected.scale.y = scale.y;
-      this.selected.scale.z = scale.z;
+      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x)
+      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y)
+      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z)
+
+      this.selected.scale.x = scale.x
+      this.selected.scale.y = scale.y
+      this.selected.scale.z = scale.z
     }
   }
 
@@ -550,7 +552,9 @@ class Editor {
     // const object: THREE.Object3D = await this.activeScene.load_glb(
     //   "m_4wva09qznapzk5rcvbxy671d1qx2pr",
     // );
+
     // object.uuid = "CH1";
+
     // Stick Open Pose Man: m_9f3d3z94kk6m25zywyz6an3p43fjtw
     // XBot: m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d
     // YBot: m_9sqg0evpr23587jnr8z3zsvav1x077
@@ -735,7 +739,7 @@ class Editor {
 
     if (this.timeline.is_playing) {
       const changeView = await this.timeline.update(this.rendering);
-      if (changeView) {
+      if(changeView) {
         this.switchCameraView();
       }
     } else if (this.last_scrub == this.timeline.scrubber_frame_position) {
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index a1fe8a693d..0cbd81c84d 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -12,7 +12,7 @@ import { QueueNames } from "../Queue/QueueNames";
 import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
-import { MediaItem } from "~/pages/PageEnigma/models";
+
 // Every object uuid / entity has a track.
 export class TimelineDataState {
     timeline_items: ClipUI[];
@@ -133,18 +133,11 @@ export class TimeLine {
             case toEngineActions.ADD_OBJECT:
                 await this.addObject(data);
                 break;
-            case toEngineActions.ADD_SHAPE:
-                    await this.addShape(data);
-                    break;
             default:
                 console.log("Action Not Wired", action);
         }
     }
 
-    public async addShape({ data }: { data: MediaItem }) {
-        this.scene.instantiate(data.media_id);
-      }
-
     public async addCharacter(data: any) {
         let media_id = data.data['media_id'];
         let name = data.data['name'];
@@ -503,4 +496,5 @@ export class TimeLine {
             currentTime: this.current_time,
         });
     }
-}
\ No newline at end of file
+}
+
diff --git a/app/pages/PageEnigma/store/index.ts b/app/pages/PageEnigma/store/index.ts
index 78254d1a60..2c89a60fc4 100644
--- a/app/pages/PageEnigma/store/index.ts
+++ b/app/pages/PageEnigma/store/index.ts
@@ -5,7 +5,6 @@ export * from "./dragAndDrop";
 export * from "./media";
 export * from "./objectGroup";
 export * from "./selectedItem";
-export * from "./shape";
 export * from "./sidePanel";
 export * from "./sizing";
 export * from "./timing";
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index 51167876fa..10d3e23cfd 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -454,7 +454,7 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "Talk (Demo Sounds)",
-    thumbnail: "resources/placeholders/audio_placeholder.png",
+    thumbnail: "resources/placeholders/audio_placeholder.png"
   },
   {
     version: 1,
@@ -462,8 +462,8 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "NCS Song",
-    thumbnail: "resources/placeholders/audio_placeholder.png",
-  },
+    thumbnail: "resources/placeholders/audio_placeholder.png"
+  }
 ]);
 
 export const cameraItems = signal<MediaItem[]>([
@@ -530,35 +530,13 @@ export const objectItems = signal<MediaItem[]>([
     thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);
-
 // In the future these will have shape id's
 export const shapeItems = signal<MediaItem[]>([
   {
     version: 1,
-    media_id: "Box",
+    media_id: "",
     type: AssetType.SHAPE,
     name: "Cube",
-    thumbnail: "resources/shapes/cube.png",
-  },
-  {
-    version: 1,
-    media_id: "Cylinder",
-    type: AssetType.SHAPE,
-    name: "Cylinder",
-    thumbnail: "resources/shapes/cylinder.png",
-  },
-  {
-    version: 1,
-    media_id: "Donut",
-    type: AssetType.SHAPE,
-    name: "Donut",
-    thumbnail: "resources/shapes/donut.png",
-  },
-  {
-    version: 1,
-    media_id: "Sphere",
-    type: AssetType.SHAPE,
-    name: "Sphere",
-    thumbnail: "resources/shapes/sphere.png",
+    thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);
diff --git a/app/pages/PageEnigma/store/selectedItem.ts b/app/pages/PageEnigma/store/selectedItem.ts
index 210d975e04..4f1d7bf778 100644
--- a/app/pages/PageEnigma/store/selectedItem.ts
+++ b/app/pages/PageEnigma/store/selectedItem.ts
@@ -2,5 +2,3 @@ import { signal } from "@preact/signals-core";
 import { Clip, Keyframe } from "~/pages/PageEnigma/models";
 
 export const selectedItem = signal<Clip | Keyframe | null>(null);
-
-export const ignoreDelete = signal(false);
diff --git a/app/pages/PageEnigma/store/shape.ts b/app/pages/PageEnigma/store/shape.ts
deleted file mode 100644
index 26ea68a57e..0000000000
--- a/app/pages/PageEnigma/store/shape.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { MediaItem } from "~/pages/PageEnigma/models";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
-import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-
-export function addShape(item: MediaItem) {
-  Queue.publish({
-    queueName: QueueNames.TO_ENGINE,
-    action: toEngineActions.ADD_SHAPE,
-    data: item,
-  });
-}
diff --git a/public/resources/shapes/cube.png b/public/resources/shapes/cube.png
deleted file mode 100644
index 51cb24114c4cd76dafd8f45d62d5b70b6759a736..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7585
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

diff --git a/public/resources/shapes/cylinder.png b/public/resources/shapes/cylinder.png
deleted file mode 100644
index 73cf7eaec4e9b66f16bb7859fe22e018fc55ca50..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5742
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
LW1wB2X&>}oapjLy

diff --git a/public/resources/shapes/donut.png b/public/resources/shapes/donut.png
deleted file mode 100644
index bb4e5a0fbbcdef59611c16ac9ae2dd9380f3b1e6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10512
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
TVz=?9Mo~dVRk~90&HMiYt9$qQ

diff --git a/public/resources/shapes/sphere.png b/public/resources/shapes/sphere.png
deleted file mode 100644
index b482e9fa30ca65d77369ac0f71b7fd1674026f15..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

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


From 6bcc6b80ab871244b486640a9b6e4ae4daf700b1 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 22 Apr 2024 23:56:12 +0700
Subject: [PATCH 03/31] keyboard shortcuts

---
 app/components/TransitionDialogue.tsx         |  98 ++++++------
 app/modules/ButtonDialogue/ButtonDialogue.tsx |  36 ++---
 .../ControlsTopButtons/ControlsTopButtons.tsx |  23 ++-
 .../comps/ControlsTopButtons/Help/Help.tsx    | 144 ++++++++++++++++++
 .../comps/ControlsTopButtons/Help/index.tsx   |   1 +
 public/resources/icons/mouse_lmb.png          | Bin 0 -> 686 bytes
 public/resources/icons/mouse_mmb.png          | Bin 0 -> 634 bytes
 public/resources/icons/mouse_rmb.png          | Bin 0 -> 702 bytes
 8 files changed, 224 insertions(+), 78 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx
 create mode 100644 app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx
 create mode 100644 public/resources/icons/mouse_lmb.png
 create mode 100644 public/resources/icons/mouse_mmb.png
 create mode 100644 public/resources/icons/mouse_rmb.png

diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx
index b6101ba65f..122a295546 100644
--- a/app/components/TransitionDialogue.tsx
+++ b/app/components/TransitionDialogue.tsx
@@ -2,17 +2,21 @@ import { useEffect } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import { disableHotkeyInput, enableHotkeyInput, DomLevels } from "~/pages/PageEnigma/store";
+import {
+  disableHotkeyInput,
+  enableHotkeyInput,
+  DomLevels,
+} from "~/pages/PageEnigma/store";
 
-const DialogBackdrop = ()=>{
-  useEffect(()=>{
+const DialogBackdrop = () => {
+  useEffect(() => {
     disableHotkeyInput(DomLevels.DIALOGUE);
-    return()=>{
+    return () => {
       enableHotkeyInput(DomLevels.DIALOGUE);
-    }
+    };
   }, []);
 
-  return(
+  return (
     <Transition.Child
       as={Fragment}
       enter="ease-out duration-300"
@@ -20,57 +24,57 @@ const DialogBackdrop = ()=>{
       enterTo="opacity-100"
       leave="ease-in duration-200"
       leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
+      leaveTo="opacity-0">
       <div className="fixed inset-0 bg-black/60" />
     </Transition.Child>
   );
 };
 
 export const TransitionDialogue = ({
-  isOpen, title, onClose, className, children,
-}:{
+  isOpen,
+  title,
+  onClose,
+  className,
+  children,
+}: {
   isOpen: boolean;
   title?: ReactNode;
-  onClose:()=>void;
+  onClose: () => void;
   className?: string;
   children: ReactNode;
-  
-})=>{
-  return(
+}) => {
+  return (
     <Transition appear show={isOpen} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-50 "
-          onClose={onClose}
-        >
-          <DialogBackdrop />
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className={twMerge("w-full max-w-lg transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
-                  {title && (
-                    <Dialog.Title
-                      as="h4"
-                      className="mb-4 text-xl font-bold text-white"
-                    >
-                      {title}
-                    </Dialog.Title>
-                  )}
-                  {children}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+      <Dialog as="div" className="relative z-50 " onClose={onClose}>
+        <DialogBackdrop />
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95">
+              <Dialog.Panel
+                className={twMerge(
+                  "w-full max-w-lg transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all",
+                  className,
+                )}>
+                {title && (
+                  <Dialog.Title
+                    as="h4"
+                    className="mb-4 text-xl font-bold text-white">
+                    {title}
+                  </Dialog.Title>
+                )}
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
           </div>
-        </Dialog>
-      </Transition>
+        </div>
+      </Dialog>
+    </Transition>
   );
-};
\ No newline at end of file
+};
diff --git a/app/modules/ButtonDialogue/ButtonDialogue.tsx b/app/modules/ButtonDialogue/ButtonDialogue.tsx
index e83bf0c149..f6aba3a01a 100644
--- a/app/modules/ButtonDialogue/ButtonDialogue.tsx
+++ b/app/modules/ButtonDialogue/ButtonDialogue.tsx
@@ -8,11 +8,12 @@ interface ButtonDialoguePropsI {
   buttonProps?: UnionedButtonProps;
   confirmButtonProps?: UnionedButtonProps;
   closeButtonProps?: UnionedButtonProps;
-  dialogProps?:{
+  dialogProps?: {
     className?: string;
   };
   title?: string;
   children: React.ReactNode;
+  showClose?: boolean;
 }
 
 export const ButtonDialogue = ({
@@ -22,6 +23,7 @@ export const ButtonDialogue = ({
   closeButtonProps: unionedCloseButtonProps,
   title,
   children,
+  showClose = true,
 }: ButtonDialoguePropsI) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -43,19 +45,20 @@ export const ButtonDialogue = ({
         title={title}
         isOpen={isOpen}
         onClose={closeModal}
-        className={dialogProps.className}
-      >
-        <div className="mt-2">{children}</div>
+        className={dialogProps.className}>
+        <div className="mt-2 h-full">{children}</div>
 
         <div className="mt-6 flex justify-end gap-2">
-          <Button
-            type="button"
-            onClick={closeModal}
-            {...closeButtonProps}
-            variant="secondary"
-          >
-            {closeButtonLabel}
-          </Button>
+          {showClose && (
+            <Button
+              type="button"
+              onClick={closeModal}
+              {...closeButtonProps}
+              variant="secondary">
+              {closeButtonLabel}
+            </Button>
+          )}
+
           {confirmButtonProps && (
             <Button
               type="button"
@@ -65,15 +68,12 @@ export const ButtonDialogue = ({
                   confirmButtonProps.onClick(e);
                 }
                 closeModal();
-              }}
-            >
-              {confirmButtonProps.label
-                ? confirmButtonProps.label
-                : "Confirm"}
+              }}>
+              {confirmButtonProps.label ? confirmButtonProps.label : "Confirm"}
             </Button>
           )}
         </div>
-        </TransitionDialogue>
+      </TransitionDialogue>
     </>
   );
 };
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 07ab5dd9cd..2925797ad4 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -6,6 +6,7 @@ import { ToasterContext } from "~/contexts/ToasterContext";
 // import { APPUI_ACTION_TYPES } from "app/reducers";
 
 import { TestFeaturesButtons } from "./TestFeaturesButtons";
+import { Help } from "./Help";
 
 export const ControlsTopButtons = () => {
   const editorEngine = useContext(EngineContext);
@@ -49,8 +50,7 @@ export const ControlsTopButtons = () => {
             label: "Load",
             disabled: sceneToken === "",
             onClick: handleButtonLoadScene,
-          }}
-        >
+          }}>
           <Input
             label="Please provide the Token of the scene you wished to load:"
             onChange={(e) => {
@@ -69,8 +69,7 @@ export const ControlsTopButtons = () => {
             label: "Save",
             disabled: sceneName === "",
             onClick: handleButtonSave,
-          }}
-        >
+          }}>
           <Input
             label="Please Enter a name for your scene"
             onChange={(e) => {
@@ -89,8 +88,7 @@ export const ControlsTopButtons = () => {
             disabled: mediaToken === "",
             onClick: handleMediaToken,
           }}
-          title="Add Scene Object via Media Token"
-        >
+          title="Add Scene Object via Media Token">
           <Input
             label="Please Enter a Media Token"
             onChange={(e) => {
@@ -104,15 +102,14 @@ export const ControlsTopButtons = () => {
             variant: "secondary",
             label: "Help",
           }}
-          title="Help"
-        >
-          <p>Do you need help?</p>
-          <p>Ask Michael about this project</p>
-          <p>Ask Miles about ThreeJS</p>
-          <p>Ask Wil about React</p>
+          dialogProps={{
+            className: "max-w-6xl w-auto",
+          }}
+          title="Help">
+          <Help />
         </ButtonDialogue>
       </div>
-      <TestFeaturesButtons debug={false}/>
+      <TestFeaturesButtons debug={false} />
     </div>
   );
 };
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx
new file mode 100644
index 0000000000..984889b1d6
--- /dev/null
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx
@@ -0,0 +1,144 @@
+import { Label } from "~/components";
+
+const ShortcutsGroup = (props: {
+  label: string;
+  children?: React.ReactNode;
+}) => (
+  <div className="flex flex-col gap-1">
+    <Label className="text-md font-semibold" {...props}>
+      {props.label}
+    </Label>
+    <div className="relative flex flex-col gap-2.5">
+      {props.children}
+      <div className="absolute top-0 h-full w-0.5 bg-white/15" />
+    </div>
+  </div>
+);
+
+const Shortcut = (props: { label: string; children: React.ReactNode }) => (
+  <div className="flex items-center gap-2 ps-4">
+    <span className="text-md w-[280px] font-medium opacity-80">
+      {props.label}
+    </span>
+    {props.children}
+  </div>
+);
+
+const Key = (props: { button: string }) => (
+  <div className="flex h-7 w-auto min-w-7 items-center justify-center rounded-md border-b-2 border-[#9E9EA6] bg-white px-2 pt-1 text-center text-sm font-bold text-ui-background">
+    {props.button}
+  </div>
+);
+
+const KeyGroup = (props: { children: React.ReactNode }) => (
+  <div className="flex gap-1">{props.children}</div>
+);
+
+const Mouse = (props: {
+  button: "left" | "middle" | "right";
+  label: string;
+}) => (
+  <div className="flex items-center gap-2.5">
+    <img
+      alt={`${props.button} mouse`}
+      src={`/resources/icons/mouse_${props.button === "left" ? "lmb" : props.button === "middle" ? "mmb" : "rmb"}.png`}
+      className="h-7 w-auto object-contain"
+    />
+    <span className="text-sm font-normal opacity-60">{props.label}</span>
+  </div>
+);
+
+const Plus = () => <div className="text-xl font-medium">+</div>;
+
+export const Help = () => {
+  return (
+    <div className="mt-8 grid select-none grid-cols-2 gap-12 ps-4">
+      <div className="flex flex-col gap-8">
+        <ShortcutsGroup label="Navigation">
+          <Shortcut label="Pan View">
+            <Mouse button="right" label="(Drag)" />
+          </Shortcut>
+          <Shortcut label="Rotate View">
+            <Mouse button="middle" label="(Drag)" />
+          </Shortcut>
+          <Shortcut label="Zoom">
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          <Shortcut label="Free Fly">
+            <KeyGroup>
+              <Key button="W" />
+              <Key button="A" />
+              <Key button="S" />
+              <Key button="D" />
+              <Key button="Q" />
+              <Key button="E" />
+            </KeyGroup>
+          </Shortcut>
+        </ShortcutsGroup>
+
+        <ShortcutsGroup label="Interaction">
+          <Shortcut label="Select Object">
+            <Mouse button="left" label="(Click)" />
+          </Shortcut>
+          <Shortcut label="Clear Selection">
+            <Key button="Esc" />
+          </Shortcut>
+          <Shortcut label="Focus Selection">
+            <Key button="F" />
+          </Shortcut>
+          <Shortcut label="Delete Selection">
+            <Key button="Del" />
+          </Shortcut>
+        </ShortcutsGroup>
+
+        <ShortcutsGroup label="Side Panel">
+          <Shortcut label="Add Character">
+            <Mouse button="left" label="(Drag onto scene)" />
+          </Shortcut>
+          <Shortcut label="Add Animation">
+            <Mouse button="left" label="(Drag onto timeline)" />
+          </Shortcut>
+          <Shortcut label="Add Object">
+            <Mouse button="left" label="(Drag onto scene)" />
+          </Shortcut>
+        </ShortcutsGroup>
+      </div>
+
+      <div className="flex flex-col gap-8">
+        <ShortcutsGroup label="Timeline">
+          <Shortcut label="Select Clip">
+            <Mouse button="left" label="(Click)" />
+          </Shortcut>
+          <Shortcut label="Move Clip">
+            <Mouse button="left" label="(Drag)" />
+          </Shortcut>
+          <Shortcut label="Delete Selection">
+            <Key button="Del" />
+          </Shortcut>
+          <Shortcut label="Scroll">
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          <Shortcut label="Side Scroll">
+            <Key button="Shift" />
+            <Plus />
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          <Shortcut label="Zoom">
+            <Key button="Ctrl/Cmd" />
+            <Plus />
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          <Shortcut label="Add Keyframe to Selected Object">
+            <Key button="K" />
+          </Shortcut>
+          <Shortcut label="Select Keyframe">
+            <Mouse button="left" label="(Click)" />
+          </Shortcut>
+          <Shortcut label="Delete Selected Keyframe">
+            <Key button="Del" />
+          </Shortcut>
+        </ShortcutsGroup>
+      </div>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx
new file mode 100644
index 0000000000..c6b98f7c78
--- /dev/null
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx
@@ -0,0 +1 @@
+export { Help } from "./Help";
diff --git a/public/resources/icons/mouse_lmb.png b/public/resources/icons/mouse_lmb.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cd1073f0847dfdc350d0048e7de5e2b67a3b8f2
GIT binary patch
literal 686
zcmV;f0#W^mP)<h;3K|Lk000e1NJLTq001BW001%w1^@s6J!IKr00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0z*keK~#7F?U-G1
z(=ZUncV*xea|3e%a)Y`j08Ws+Fq0|F(43&<1mq=r3=g3vs5wD%gM<^roS=D*TQ9q@
zlZr%^)s8;~@NZ^g$x@`h6s;63LIKIUVTdX85g{aiK;9wH*qeMEfdwKO^W%M<UF3Fw
zh%-}tJZRu_7~Cc><z#63!lTI-1iOH1e)xu>h;76|V*RDkGwYK#z1xK5MV)i=D=5b=
zc>jv+iUszJ0%YVKdY3#YMGf$DsqawEg{3UWMFa-|(u520-`WUK<V`-0?y_{swq%>L
zo$o{<4)`&HVq}2RKLp&I3<uWE8IROh>pbMg$9zOGrDuCnYnufj<of-c0AA^5P=->m
zmJ19uUTEnBlrz{gEACb{dIL{O%3T(#%tBA86prBj_)rZ;im=G#8lk7q;&zP);5FT*
z0AD>|0ai(%pk*E^;1^Uxl{29GzVo_r7Lcsh&$Mi0sPeN`0p4Tp<u=U+j*Rv-WQUH3
z3HQ$VJ~)CmZ-?Yol~yUG$4@?ev+ncxp)?0KV%~@#cB_lN2Y0hz!KKcY2>yF;?_X@w
zj75OsBCLnMb}Q}#bOJg7oq$fjza_xsCR-OP5fDRrEJVNz+G8W&2ee1DiTPP#dvy}?
zUE=xH3qC;eoXf{9>M7wi$Rb`%uo=B1^nF0CT1~iQ%yw)nk!zK#2da<j{ZMU@h$U6e
zvb1weM8Gzs>bPXPzn4`Y<ciH2heTH)kcDDH$UH^zJ{;~HF=S!d8OSDsSQ^Ut4QK%f
U0fMX2d;kCd07*qoM6N<$f-9yk1^@s6

literal 0
HcmV?d00001

diff --git a/public/resources/icons/mouse_mmb.png b/public/resources/icons/mouse_mmb.png
new file mode 100644
index 0000000000000000000000000000000000000000..eea44942db53648f5b79f927f84c6a217cb240e2
GIT binary patch
literal 634
zcmV-=0)_pFP)<h;3K|Lk000e1NJLTq001BW001%w1^@s6J!IKr00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0uM<<K~#7F?U+GM
z!ax*;-xM{v5^qpXAUB|#z<2`KU`#Z@8-ORE3m5Fr6If0FHvmu2dIDG)O!|DUr8tW1
zOtqy!`z6Cn!_42mubpY<0mOia7L_3t7eDBO0_tN+{iiDp3v{8*CY3S9pfP?PGxUkI
zRfB5@0?b^)KoTyW0}`&>RS4+Zf(M1hT#kg02D((43EGYj;vza&USHl;!03>~!WTH&
zzaR7@tua+rg4Tqz8r(2e16qocGj`N?yScIqF#7aBm<U)C2;F77Er<3|p~Vk)b8Ud=
zf*LPs2!GS8aj<tL9nL^aD;S626fq$M0`OSTWdUk93N?;E9a1BzkPUS<U_o&N5y<Ll
zcG5tV4VX|IrU3=>BLlPmy+B4}7J&--^4!;cuF@DdS)c6S(E0l3t1q7OHgFy_gl#V%
zd@)VvMdDO^VI2(yp47Jqx}ZMu*mwD7y;=%Qmm}bT9#uIC3F!2RaNyq~=sxg=MhA+)
zW&_GE-8|XNrMNUu8Ym5v21)~e&VbHNHZK-wKFRW6#s(%(9D#um6o(TesW42xZF`sO
zQKITJngw^TeR}*Or|G6tDK{P&5nMet<aL0zTHBbC9+k$o|DZZm`&-o8yOjwSv&Th^
zy=7#A^TtEW4$hRPpJf>s8B<BjLke9ZRB<ZSf^eqraTPY#4iCaK?F7Q)wlbCT4x2qB
UB@B*kh5!Hn07*qoM6N<$f*f}OHvj+t

literal 0
HcmV?d00001

diff --git a/public/resources/icons/mouse_rmb.png b/public/resources/icons/mouse_rmb.png
new file mode 100644
index 0000000000000000000000000000000000000000..10ddd409dd2edb8588c077674bf52d041d7bb877
GIT binary patch
literal 702
zcmV;v0zv(WP)<h;3K|Lk000e1NJLTq001BW001%w1^@s6J!IKr00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0#ivuK~#7F?U+we
z+b|TyzbDs=uIk>vJwbB=%n4{u0GmwH(izGLN>9)%+L`PqC%`>Ha)YENh<gIqF+&)O
z_xuk-9Lr|xcmV%qUZhBh-X~d7<VV<m*4pD_pG{IXDIOEiF-ll{9gRujNb&?)a6b#J
zaAyCS%!=Amfn%4G)5P)m4;YkibNK0kTRB+o*k6To{CYA8^2O?b^8qLGP0pE17%6Zb
z71IY>VS4>#I4Bg5jQpIfxPzEKFmtxChTtkv)2q?QT@%1eardl?@bk}~1%G2(vd!5}
z((+foCkLF&Hg`jgZAFjxP5^gsU~n#sbIv_ZekQ+>DgB;2zNA6PEW~&>hoAQ|0n!1?
z1i8FhQ2##7gis3@i3SaojK)Ph-jr3^VOU|Y!n+<02QmXYsE>mNuxzy>0z7nt21PT_
z$Y>q|k?vN2*5rr)7hNF-6FTOx0{){Rnw)`b@2`}qysqj9c$>@n1@-^Z45_dc0ehJP
zA{p&R#D6*>#^bUe>r_V<nMx2J#kyi!ak|TnO3!)uzgJ|<Q3Z`aW*|T{WLo!3jVxHk
zHYq$9A1@wR19H(gLN|=-EW%cJvPW?*pcl{!=mqowo|k|sZ?bK1S?5aD1`81|Lw7_1
z{-QhlDCWnPB985C{Vh4*Tk*Se7yQ8XIgyVn>M7wi#1XG;5RG0k`Ex*CwYIS(1Ge45
z8j1DEdeH50aW9@&B4VkVXK8ev6XCL*>gG6StG~+{5He*ejYCpZA&5h<9^#!M-yN)<
k9RZuXzRwT`w~e8kTO|qr=VG}8XaE2J07*qoM6N<$f**`8r2qf`

literal 0
HcmV?d00001


From f08b02fdcc4dec4d5bcca46dd3ca234e5ac8978a Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 23 Apr 2024 00:07:31 +0700
Subject: [PATCH 04/31] commented out shortcut keys we don't have yet

---
 .../comps/ControlsTopButtons/Help/Help.tsx       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx
index 984889b1d6..c35bc37854 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx
@@ -64,7 +64,7 @@ export const Help = () => {
           <Shortcut label="Zoom">
             <Mouse button="middle" label="(Scroll)" />
           </Shortcut>
-          <Shortcut label="Free Fly">
+          {/* <Shortcut label="Free Fly">
             <KeyGroup>
               <Key button="W" />
               <Key button="A" />
@@ -73,19 +73,19 @@ export const Help = () => {
               <Key button="Q" />
               <Key button="E" />
             </KeyGroup>
-          </Shortcut>
+          </Shortcut> */}
         </ShortcutsGroup>
 
         <ShortcutsGroup label="Interaction">
           <Shortcut label="Select Object">
             <Mouse button="left" label="(Click)" />
           </Shortcut>
-          <Shortcut label="Clear Selection">
+          {/* <Shortcut label="Clear Selection">
             <Key button="Esc" />
-          </Shortcut>
-          <Shortcut label="Focus Selection">
+          </Shortcut> */}
+          {/* <Shortcut label="Focus Selection">
             <Key button="F" />
-          </Shortcut>
+          </Shortcut> */}
           <Shortcut label="Delete Selection">
             <Key button="Del" />
           </Shortcut>
@@ -123,11 +123,11 @@ export const Help = () => {
             <Plus />
             <Mouse button="middle" label="(Scroll)" />
           </Shortcut>
-          <Shortcut label="Zoom">
+          {/* <Shortcut label="Zoom">
             <Key button="Ctrl/Cmd" />
             <Plus />
             <Mouse button="middle" label="(Scroll)" />
-          </Shortcut>
+          </Shortcut> */}
           <Shortcut label="Add Keyframe to Selected Object">
             <Key button="K" />
           </Shortcut>

From 6aaac0170dcb38657ffe0970bf1b5be0d868f144 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 22 Apr 2024 11:45:37 -0700
Subject: [PATCH 05/31] added listed objects via api to objects tab

---
 app/api/BucketConfig.ts                       | 56 ++++++++++++++++++
 app/api/GetApiHost.ts                         | 34 +++++++++++
 app/api/MakeRequest.ts                        | 59 +++++++++++++++++++
 app/api/media_files/GetMediaByUser.ts         | 26 ++++++++
 .../SidePanelTabs/itemTabs/ObjectsTab.tsx     | 55 ++++++++++++++++-
 5 files changed, 228 insertions(+), 2 deletions(-)
 create mode 100644 app/api/BucketConfig.ts
 create mode 100644 app/api/GetApiHost.ts
 create mode 100644 app/api/MakeRequest.ts
 create mode 100644 app/api/media_files/GetMediaByUser.ts

diff --git a/app/api/BucketConfig.ts b/app/api/BucketConfig.ts
new file mode 100644
index 0000000000..74b821c809
--- /dev/null
+++ b/app/api/BucketConfig.ts
@@ -0,0 +1,56 @@
+class BucketConfig {
+  isLocalDev: boolean;
+
+  constructor() {
+    this.isLocalDev =
+      document.location.host.includes("localhost") ||
+      document.location.host.includes("jungle.horse") ||
+      document.location.host.startsWith("dev.");
+  }
+
+  // TODO: Prevent callers with undefined/null paths
+  getGcsUrl(bucketRelativePath: string | undefined | null): string {
+    let bucket = this.getBucket();
+    let path = bucketRelativePath;
+    if (path !== undefined && path !== null && !path.startsWith("/")) {
+      path = "/" + path;
+    }
+    return `https://storage.googleapis.com/${bucket}${path}`;
+  }
+
+  private getBucket(): string {
+    return this.isLocalDev ? "dev-vocodes-public" : "vocodes-public";
+  }
+
+  getCdnUrl(
+    bucketRelativePath: string,
+    width?: number,
+    quality?: number
+  ): string {
+    // const basePath = this.isLocalDev
+    //   ? "https://dev-cdn.fakeyou.com"
+    //   : "https://cdn.fakeyou.com";
+    const basePath = "https://cdn.fakeyou.com";
+    let path = bucketRelativePath?.startsWith("/")
+      ? bucketRelativePath
+      : "/" + bucketRelativePath;
+    let resizeParams = "";
+    if (width || quality) {
+      resizeParams = "cdn-cgi/image/";
+      if (width) {
+        resizeParams += `width=${width},`;
+      }
+      if (quality) {
+        resizeParams += `quality=${quality},`;
+      }
+      resizeParams = resizeParams.slice(0, -1);
+    }
+    if (resizeParams) {
+      return `${basePath}/${resizeParams}${path}`;
+    } else {
+      return `${basePath}${path}`;
+    }
+  }
+}
+
+export { BucketConfig };
diff --git a/app/api/GetApiHost.ts b/app/api/GetApiHost.ts
new file mode 100644
index 0000000000..e2a7547b83
--- /dev/null
+++ b/app/api/GetApiHost.ts
@@ -0,0 +1,34 @@
+// interface ApiDetails { hostname: string, useSsl: boolean, }
+
+const domainWithoutPort = document.location.host.split(":")[0];
+
+const hostConfig = (host: string, useSsl = true) => ({
+  formatUrl: (endpoint = "") => `${ useSsl ? "https" : "http" }://${ host + endpoint }`,
+  host,
+  useSsl,
+});
+
+export default function GetApiHost() {
+  switch (domainWithoutPort) {
+    case "fakeyou.com":
+    case "staging.fakeyou.com":
+      return hostConfig("api.fakeyou.com");
+    case "storyteller.ai":
+    case "staging.storyteller.ai":
+      //return hostConfig("api.storyteller.ai");
+      return hostConfig("api.fakeyou.com");
+    case "storyteller.stream": // Storyteller.stream is deprecated and will be decommissioned in the future.
+      return hostConfig("api.storyteller.stream");
+    case "devproxy.fakeyou.com":
+      return hostConfig("api.fakeyou.com");
+    case "devproxy.storyteller.ai":
+      //return hostConfig("api.storyteller.ai");
+      return hostConfig("api.fakeyou.com");
+    case "dev.fakeyou.com":
+      return hostConfig("api.dev.fakeyou.com:12345",false); // false disables SSL
+    default:
+      return document.location.host.includes("localhost") ? 
+        hostConfig("localhost:12345",document.location.protocol === "https:") :
+        hostConfig("api.fakeyou.com"); // default
+  }
+};
\ No newline at end of file
diff --git a/app/api/MakeRequest.ts b/app/api/MakeRequest.ts
new file mode 100644
index 0000000000..b287051b39
--- /dev/null
+++ b/app/api/MakeRequest.ts
@@ -0,0 +1,59 @@
+import GetApiHost from "./GetApiHost";
+
+// const { formatUrl } = GetApiHost();
+
+type UrlRoutingFunction<UrlRouteArgs> = (urlRouteArgs: UrlRouteArgs) => string;
+
+interface RequestHeaders {
+  [name: string]: string;
+}
+
+interface RouteSetup<UrlRouteArgs> {
+    method: string;
+    multipart?: boolean;
+    routingFunction: UrlRoutingFunction<UrlRouteArgs>;
+} 
+  
+const METHOD_OMITS_BODY: { [key: string]: boolean } = {
+  DELETE: false,
+  GET: true,
+  OPTIONS: true,
+  PATCH: false,
+  POST: false,
+  PUT: false,
+};
+
+const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request, queries?: UrlParams) => Promise<Response> => {
+    return async function(urlRouteArgs: UrlRouteArgs, request: Request, queries?: any) : Promise<Response> {
+        const newQueries = queries ? Object.keys(queries).map((key, i) => {
+            return `${ i ? "&" : "" }${ key }=${ Array.isArray(queries[key]) ? queries[key].join(`&${ key }=`) : queries[key] }`
+        }).join("") : null;
+
+        const endpoint = `${ routeSetup.routingFunction(urlRouteArgs) }${ newQueries ? "?" + newQueries : "" }`;
+        const method = routeSetup.method;
+        const methodOmitsBody = METHOD_OMITS_BODY[method] || false;
+
+        // return fetch(formatUrl(endpoint), {
+        return fetch(`https://api.fakeyou.com${ endpoint }`, {
+            method,
+            headers: {
+                "Accept": "application/json",
+                ...methodOmitsBody? {} : { "Content-Type": "application/json" }
+            },
+            credentials: 'include',
+            ...methodOmitsBody ? {} : { body: JSON.stringify(request) },
+        })
+        .then(res => res.json())
+        .then(res => {
+            if (!res.success && res && (res.voice_token || res.dataset_token)) {
+                return res;
+            }
+            else if (res && "success" in res) {
+                return res;
+            } else Promise.reject();
+        })
+        .catch(e => ({ success : false }));
+    }
+};
+
+export default MakeRequest;
\ No newline at end of file
diff --git a/app/api/media_files/GetMediaByUser.ts b/app/api/media_files/GetMediaByUser.ts
new file mode 100644
index 0000000000..4ea5c95f6d
--- /dev/null
+++ b/app/api/media_files/GetMediaByUser.ts
@@ -0,0 +1,26 @@
+import MakeRequest from "../MakeRequest";
+import { MediaFile } from "./GetMedia";
+import { Pagination } from "../_common/SharedFetchTypes";
+
+export interface GetMediaRequest {}
+
+export interface GetMediaListResponse {
+  pagination: Pagination;
+  success: boolean;
+  results: MediaFile[];
+}
+
+export interface GetMediaParams {
+  page_index: number;
+}
+
+export const GetMediaByUser = MakeRequest<
+  string,
+  GetMediaRequest,
+  GetMediaListResponse,
+  GetMediaParams
+>({
+  method: "GET",
+  routingFunction: (userToken: string) =>
+    `/v1/media_files/list/user/${userToken}`,
+});
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index 2dbb3bd88b..8fba5aaf57 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { AssetFilterOption, AssetType } from "~/pages/PageEnigma/models";
 import { useSignals } from "@preact/signals-react/runtime";
 import {
@@ -11,17 +12,67 @@ import { Button } from "~/components";
 import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
 import { shapeItems } from "~/pages/PageEnigma/store";
+import { GetMediaByUser, GetMediaListResponse } from "~/api/media_files/GetMediaByUser";
+import { AssetFilterOption, MediaItem } from "~/pages/PageEnigma/models";
+import { BucketConfig } from "~/api/BucketConfig";
 
 interface Props {
   type: AssetType;
 }
 
+export enum FetchStatus {
+  paused,
+  ready,
+  in_progress,
+  success,
+  error
+}
+
 export const ObjectsTab = ({ type }: Props) => {
   useSignals();
+  const [objects,objectsSet] = useState<{ value: MediaItem[] }>({ 
+    value:[{
+      media_id: "",
+      name: "",
+      type: "",
+      version: 1,
+    }]
+  });
+
+  const [status,statusSet] = useState(FetchStatus.ready);
+
+  useEffect(() => {
+    if (status === FetchStatus.ready && type !== AssetType.CHARACTER) {
+      statusSet(FetchStatus.in_progress);
+      GetMediaByUser("echelon",{},{
+        filter_media_type: "glb"
+      })
+      .then((res: GetMediaListResponse) => {
+        if (res.success && res.results) {
+          statusSet(FetchStatus.success);
+          objectsSet({
+            value: res.results.map((item,i) => {
+              let bucketConfig = new BucketConfig();
+              let itemThumb = bucketConfig.getCdnUrl(item.cover_image.maybe_cover_image_public_bucket_path,600,100);
+              return {
+                media_id: item.token,
+                name: item.maybe_title,
+                type: item.media_type,
+                version: 1,
+                ...item.cover_image.maybe_cover_image_public_bucket_path ? {
+                  thumbnail: itemThumb
+                } : {}
+              }
+            })
+          });
+        }
+      });
+    }
+  },[status,type]);
 
   const assetFilter =
     type === AssetType.CHARACTER ? characterFilter : objectFilter;
-  const items = type === AssetType.CHARACTER ? characterItems : objectItems;
+  const items = type === AssetType.CHARACTER ? characterItems : objects;
 
   return (
     <>
@@ -77,4 +128,4 @@ export const ObjectsTab = ({ type }: Props) => {
       </div>
     </>
   );
-};
+};
\ No newline at end of file

From 01ea0b980d5a166d3824a6f98197877861a5fdfb Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 22 Apr 2024 12:03:43 -0700
Subject: [PATCH 06/31] list media objects set to session user name

---
 .../PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index 8fba5aaf57..f1cb7fd30a 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useContext, useState, useEffect } from "react";
 import { AssetFilterOption, AssetType } from "~/pages/PageEnigma/models";
 import { useSignals } from "@preact/signals-react/runtime";
 import {
@@ -15,6 +15,7 @@ import { shapeItems } from "~/pages/PageEnigma/store";
 import { GetMediaByUser, GetMediaListResponse } from "~/api/media_files/GetMediaByUser";
 import { AssetFilterOption, MediaItem } from "~/pages/PageEnigma/models";
 import { BucketConfig } from "~/api/BucketConfig";
+import { AuthenticationContext } from "~/contexts/Authentication/AuthenticationContext/";
 
 interface Props {
   type: AssetType;
@@ -39,12 +40,14 @@ export const ObjectsTab = ({ type }: Props) => {
     }]
   });
 
+  const { authState } = useContext(AuthenticationContext);
+
   const [status,statusSet] = useState(FetchStatus.ready);
 
   useEffect(() => {
     if (status === FetchStatus.ready && type !== AssetType.CHARACTER) {
       statusSet(FetchStatus.in_progress);
-      GetMediaByUser("echelon",{},{
+      GetMediaByUser(authState.userInfo.username,{},{
         filter_media_type: "glb"
       })
       .then((res: GetMediaListResponse) => {

From a918d92e450933a1f17f4f46ac33d965db721998 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 22 Apr 2024 12:19:06 -0700
Subject: [PATCH 07/31] fixed ObjectsTab imports

---
 .../PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index f1cb7fd30a..9ddb087fe1 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -1,5 +1,4 @@
 import { useContext, useState, useEffect } from "react";
-import { AssetFilterOption, AssetType } from "~/pages/PageEnigma/models";
 import { useSignals } from "@preact/signals-react/runtime";
 import {
   characterFilter,
@@ -13,9 +12,9 @@ import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
 import { shapeItems } from "~/pages/PageEnigma/store";
 import { GetMediaByUser, GetMediaListResponse } from "~/api/media_files/GetMediaByUser";
-import { AssetFilterOption, MediaItem } from "~/pages/PageEnigma/models";
+import { AssetFilterOption, AssetType, MediaItem } from "~/pages/PageEnigma/models";
 import { BucketConfig } from "~/api/BucketConfig";
-import { AuthenticationContext } from "~/contexts/Authentication/AuthenticationContext/";
+import { AuthenticationContext } from "~/contexts/Authentication";
 
 interface Props {
   type: AssetType;

From da75081a392768aef829d9f8d39727b83164ad3e Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Mon, 22 Apr 2024 16:05:13 -0400
Subject: [PATCH 08/31] moving code

---
 app/components/Pill.tsx                       |  18 ++
 app/components/index.tsx                      |   2 +
 .../AudioTabComponent/AudioTabComponent.tsx   | 105 ++-------
 .../AudioTabComponent/WaveformPlayer.tsx      |  51 +++++
 .../AudioTabComponent/audioItemElement.tsx    | 103 +++++++++
 .../AudioTabComponent/audioItemElements.tsx   |  28 +++
 .../AudioTabComponent/pageLibrary.tsx         |  79 +++++++
 .../AudioTabComponent/pageTTS.tsx             | 211 ++++++++++++++++++
 .../SidePanelTabs/AudioTabComponent/types.tsx |   5 +
 .../AudioTabComponent/utilities.tsx           |  82 +++++++
 app/pages/PageEnigma/models/assets.ts         |   2 +
 app/pages/PageEnigma/models/tts.ts            |  77 +++++++
 app/pages/PageEnigma/store/media.ts           |   2 +
 package-lock.json                             |   6 +
 package.json                                  |   1 +
 15 files changed, 685 insertions(+), 87 deletions(-)
 create mode 100644 app/components/Pill.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
 create mode 100644 app/pages/PageEnigma/models/tts.ts

diff --git a/app/components/Pill.tsx b/app/components/Pill.tsx
new file mode 100644
index 0000000000..66d5eefc6f
--- /dev/null
+++ b/app/components/Pill.tsx
@@ -0,0 +1,18 @@
+import { twMerge } from "tailwind-merge"
+
+export const Pill = ({
+  className,
+  children,
+}:{
+  className?: string,
+  children : React.ReactNode
+})=>{
+  return (
+    <div className={twMerge(
+        "rounded-md text-xs font-bold bg-brand-primary py-0.5 px-1.5 w-fit",
+        className
+      )}>
+      {children}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 28dfc10661..2133a89322 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -12,6 +12,7 @@ import { ListDropdown } from "./ListDropdown"
 import { ListSearchDropdown } from "./ListSearchDropdown"
 import { LoadingBar } from "./LoadingBar";
 import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
+import { Pill } from "./Pill";
 
 export {
   Button,
@@ -30,4 +31,5 @@ export {
   LoadingDots,
   LoadingDotsBricks,
   LoadingDotsTyping,
+  Pill
 };
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index d008e41c86..d2de799066 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -1,37 +1,25 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import { twMerge } from "tailwind-merge";
 import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
-import { faCirclePlus, faArrowsRotate } from "@fortawesome/pro-solid-svg-icons";
 
-import { AppUiContext } from "~/contexts/AppUiContext";
 import { AuthenticationContext } from "~/contexts/Authentication";
-import { APPUI_ACTION_TYPES } from "~/reducers";
-import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
-import { AssetFilterOption } from "~/pages/PageEnigma/models";
-
-import { Button, ButtonIcon } from "~/components";
-
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
-import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
 import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
 import { ListAudioByUser } from "./listAudioByUser";
 import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
+import { PageLibrary } from "./pageLibrary";
+import { PageTTS } from "./pageTTS";
+import { AudioTabPages } from "./types";
+
 export const AudioTabComponent = () => {
   useSignals();
   const [ state, setState ] = useState({
     firstLoad: false,
     fetchingUserAudio: false,
+    page: AudioTabPages.LIBRARY,
   });
   const { authState } = useContext(AuthenticationContext);
-  const [, dispatchAppUiState] = useContext(AppUiContext);
-  const handleOpenTtsDialogue = ()=>{
-      dispatchAppUiState({
-      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
-    })
-  }
-  const allAudioItems = [...audioItems.value, ...audioItemsFromServer.value];
 
   const handleListAudioByUser = useCallback((username:string)=>{
     setState((curr)=>({...curr, fetchingUserAudio:true}));
@@ -44,6 +32,8 @@ export const AudioTabComponent = () => {
           media_id: item.token,
           object_uuid: item.token,
           name: item.maybe_title || item.origin.maybe_model.title,
+          description: item.maybe_text_transcript,
+          publicBucketPath: item.public_bucket_path,
           length: 25,
           thumbnail: "/resources/placeholders/audio_placeholder.png",
           isMine: true,
@@ -88,74 +78,15 @@ export const AudioTabComponent = () => {
     }
   });
 
-  return (
-    <>
-      <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-4 flex justify-start items-center gap-2 px-4">
-          <button
-            className={twMerge(
-              "filter-tab",
-              audioFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
-            )}
-            onClick={() => (audioFilter.value = AssetFilterOption.ALL)}
-          >
-            All
-          </button>
-          <button
-            className={twMerge(
-              "filter-tab",
-              audioFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
-            )}
-            onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
-            disabled={!allAudioItems.some((item) => item.isMine)}
-          >
-            My Audios
-          </button>
-          <button
-            className={twMerge(
-              "filter-tab",
-              audioFilter.value === AssetFilterOption.BOOKMARKED
-                ? "active"
-                : "",
-              "disabled",
-            )}
-            onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
-            disabled={!allAudioItems.some((item) => item.isBookmarked)}
-          >
-            Bookmarked
-          </button>
-          <ButtonIcon
-            className={twMerge(
-              "absolute right-0 mr-4", 
-              // state.fetchingUserAudio ? "animate-spin" : "",
-            )}
-            icon={faArrowsRotate}
-            onClick={()=>{
-              if(authState.userInfo?.username){
-                handleListAudioByUser(authState.userInfo?.username);
-              }
-            }}
-          />
-        </div>
-      </div>
-      <div className="w-full px-4">
-        <Button
-          icon={faCirclePlus}
-          variant="action"
-          className="w-full py-3 text-sm font-medium"
-          onClick={handleOpenTtsDialogue}
-        >
-          Generate Audio
-        </Button>
-      </div>
-      <div className="h-full w-full overflow-y-auto px-4 pt-4">
-        <ItemElements
-          items={allAudioItems}
-          assetFilter={audioFilter.value}
-        />
-      </div>
-    </>
-  );
+  const changePage = (newPage:AudioTabPages)=>{
+    setState((curr)=>({
+      ...curr,
+      page: newPage
+    }))
+  }
+  if(state.page === AudioTabPages.LIBRARY){
+    return <PageLibrary changePage={changePage}/>
+  }else if(state.page === AudioTabPages.TTS){
+    return <PageTTS changePage={changePage}/>
+  }
 };
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
new file mode 100644
index 0000000000..0614fe4075
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState, useRef } from 'react';
+import WaveSurfer from 'wavesurfer.js';
+import { faCirclePlay, faCirclePause, } from "@fortawesome/pro-solid-svg-icons"
+import { ButtonIcon } from '~/components';
+
+export const WaveformPlayer = ({
+  audio
+}:{
+  audio: string
+}) => {
+  const waveSurferRef = useRef<WaveSurfer | undefined>(undefined);
+  const [isPlaying, toggleIsPlaying] = useState(false);
+
+  const containerRef = useCallback((node:HTMLDivElement)=>{
+    const waveSurfer = WaveSurfer.create({
+      container: node,
+      barWidth: 2,
+      height: 30,
+      cursorWidth: 0,
+    });
+    waveSurfer.load(audio);
+    waveSurfer.on('ready', () => {
+      waveSurferRef.current = waveSurfer;
+    });
+    waveSurfer.on('play', () => {
+      toggleIsPlaying(true);
+    });
+    waveSurfer.on('pause', () => {
+      toggleIsPlaying(false);
+    });
+  }, []);
+
+  useEffect(()=>{
+    return()=>{
+      waveSurferRef.current?.destroy();
+    }
+  },[]);
+
+  return (
+    <div className="flex py-1 gap-2">
+      <ButtonIcon
+        icon={isPlaying ? faCirclePause : faCirclePlay}
+        size="2x"
+        onClick={() => {
+          waveSurferRef.current?.playPause();
+        }}
+      />
+      <div ref={containerRef} className="w-full h-10"/>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
new file mode 100644
index 0000000000..1714c3c8a0
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useContext, useEffect } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
+
+import { WaveformPlayer } from "./WaveformPlayer";
+import { MediaItem } from "~/pages/PageEnigma/models";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
+import {
+  canDrop,
+  currPosition,
+  dragItem,
+  initPosition,
+} from "~/pages/PageEnigma/store";
+
+import { H4, H6, Pill } from "~/components";
+
+function getGcsUrl(bucketRelativePath: string | undefined | null): string {
+  let bucket = "vocodes-public";
+  let path = bucketRelativePath;
+  if (path !== undefined && path !== null && !path.startsWith("/")) {
+    path = "/" + path;
+  }
+  return `https://storage.googleapis.com/${bucket}${path}`;
+}
+
+interface Props {
+  item: MediaItem;
+}
+
+export const AudioItemElement = ({ item }: Props) => {
+  useSignals();
+  const { startDrag, endDrag } = useContext(TrackContext);
+
+  const { initX, initY } = initPosition.value;
+
+  useEffect (()=>{
+    console.log(item.publicBucketPath);
+  }, []);
+
+  useEffect(() => {
+    const onPointerUp = () => {
+      if (dragItem.value) {
+        endDrag();
+      }
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+      if (dragItem.value) {
+        event.stopPropagation();
+        event.preventDefault();
+        const deltaX = event.pageX - initX;
+        const deltaY = event.pageY - initY;
+        currPosition.value = { currX: initX + deltaX, currY: initY + deltaY };
+      }
+    };
+
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointermove", onMouseMove);
+
+    return () => {
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointermove", onMouseMove);
+    };
+  }, [startDrag, endDrag, initX, initY]);
+
+  const onPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (event.button === 0) {
+        startDrag(item);
+        currPosition.value = {
+          currX: event.pageX,
+          currY: event.pageY,
+        };
+        initPosition.value = {
+          initX: event.pageX,
+          initY: event.pageY,
+        };
+        canDrop.value = false;
+      }
+    },
+    [item, startDrag],
+  );
+
+  return (
+    <div
+      className="relative w-full cursor-pointer rounded-lg transition-all duration-200"
+      onPointerDown={onPointerDown}
+    >
+      <div
+        className="flex flex-col p-2 gap-1 w-full rounded-lg bg-assets-background"
+      > 
+        <div className="flex justify-between pb-1">
+          <Pill>Audio</Pill>
+        </div>
+        
+        {item.publicBucketPath && <WaveformPlayer audio={getGcsUrl(item.publicBucketPath)} />}
+        
+
+        <H4 className="text-overflow-ellipsis">{item.name}</H4>
+        {item.description && <H6 className="text-overflow-ellipsis">{item.description}</H6>}
+      </div>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
new file mode 100644
index 0000000000..428bb244f9
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
@@ -0,0 +1,28 @@
+import { AudioItemElement } from "./audioItemElement";
+import { AssetFilterOption, MediaItem } from "~/pages/PageEnigma/models";
+
+interface Props {
+  items: MediaItem[];
+  assetFilter: AssetFilterOption;
+}
+
+export const AudioItemElements = ({ items, assetFilter }: Props) => {
+
+  const displayItems = items.filter((item) => {
+    if (assetFilter === AssetFilterOption.ALL) {
+      return true;
+    }
+    if (assetFilter === AssetFilterOption.MINE) {
+      return item.isMine;
+    }
+    return item.isBookmarked;
+  });
+
+  return (
+    <div className={`grid grid-cols-1 gap-3`}>
+      {displayItems.map((item) => (
+        <AudioItemElement key={item.media_id} item={item} />
+      ))}
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
new file mode 100644
index 0000000000..79aab7fb6f
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
@@ -0,0 +1,79 @@
+import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
+import { twMerge } from "tailwind-merge";
+import { useSignals } from "@preact/signals-react/runtime";
+import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
+import { AssetFilterOption } from "~/pages/PageEnigma/models";
+import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
+
+import { Button } from "~/components";
+import { AudioItemElements } from "./audioItemElements";
+import { AudioTabPages } from "./types";
+
+export const PageLibrary = ({
+  changePage 
+}:{
+  changePage: (newPage:AudioTabPages) => void
+})=>{
+  useSignals();
+  const allAudioItems = [...audioItems.value, ...audioItemsFromServer.value];
+
+  return (
+    <>
+      <div className="w-full overflow-x-auto">
+        <div className="mb-4 mt-4 flex justify-start items-center gap-2 px-4">
+          <button
+            className={twMerge(
+              "filter-tab",
+              audioFilter.value === AssetFilterOption.ALL ? "active" : "",
+              "disabled",
+            )}
+            onClick={() => (audioFilter.value = AssetFilterOption.ALL)}
+          >
+            All
+          </button>
+          <button
+            className={twMerge(
+              "filter-tab",
+              audioFilter.value === AssetFilterOption.MINE ? "active" : "",
+              "disabled",
+            )}
+            onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
+            disabled={!allAudioItems.some((item) => item.isMine)}
+          >
+            My Audios
+          </button>
+          <button
+            className={twMerge(
+              "filter-tab",
+              audioFilter.value === AssetFilterOption.BOOKMARKED
+                ? "active"
+                : "",
+              "disabled",
+            )}
+            onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
+            disabled={!allAudioItems.some((item) => item.isBookmarked)}
+          >
+            Bookmarked
+          </button>
+        </div>
+      </div>
+      <div className="w-full px-4">
+        <Button
+          icon={faCirclePlus}
+          variant="action"
+          className="w-full py-3 text-sm font-medium"
+          onClick={()=>changePage(AudioTabPages.TTS)}
+        >
+          Generate Audio
+        </Button>
+      </div>
+
+      <div className="h-full w-full overflow-y-auto px-4 pt-4">
+        <AudioItemElements
+          items={allAudioItems}
+          assetFilter={audioFilter.value}
+        />
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
new file mode 100644
index 0000000000..31373b6f48
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
@@ -0,0 +1,211 @@
+import { useCallback, useEffect, useState } from "react";
+import { useSignalEffect } from "@preact/signals-react/runtime";
+import { v4 as uuidv4 } from "uuid";
+
+import {
+  faChevronLeft,
+  faBrainCircuit,
+} from "@fortawesome/pro-solid-svg-icons";
+
+import { 
+  Button, ButtonIcon, H2, Label,
+  LoadingDotsTyping,
+  ListSearchDropdown,
+  Textarea
+} from "~/components";
+
+import { TtsModelListItem, GenerateTtsAudioResponse } from "~/pages/PageEnigma/models/tts";
+
+import { addInferenceJob, inferenceJobs} from "../../../store/inferenceJobs";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
+import { ListTtsModels, GenerateTtsAudio } from "./utilities";
+import { AudioTabPages } from "./types";
+
+type TtsState = {
+  voice: TtsModelListItem | undefined;
+  text: string;
+  hasEnqueued :boolean;
+  inferenceToken?: string;
+  inferenceJobType?: string;
+  hasAudio: boolean;
+  audioFile?: any;
+}
+
+
+export const PageTTS =({
+  changePage 
+}:{
+  changePage: (newPage:AudioTabPages) => void
+})=>{
+  const [ttsState, setTtsState] = useState<TtsState>({
+    voice:undefined,
+    text:"",
+    hasEnqueued:false,
+    hasAudio:false,
+  });
+
+  useSignalEffect(()=>{
+    console.log(inferenceJobs.value);
+    if(ttsState.hasEnqueued && ttsState.inferenceToken){
+      const found = inferenceJobs.value.find((job)=>job.job_id===ttsState.inferenceToken);
+      console.log(`finding: ${ttsState.inferenceToken}`);
+      console.log(found);
+      if(found?.job_status === JobState.COMPLETE_SUCCESS){
+        setTtsState((curr)=>({
+          ...curr,
+          hasAudio: true,
+          audioFile: found.result
+        }))
+      }
+    }
+  });
+
+  const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
+
+  const listModels = useCallback(async () => {
+    const ttsModelsLoaded = ttsModels.length > 0;
+    if (ttsModelsLoaded) {
+      return; // Already queried.
+    }
+    const models = await ListTtsModels();
+    if (models) {
+      setTtsModels(models);
+    }
+  }, []);
+
+  useEffect(() => {
+    listModels();
+  }, [listModels]);
+
+  useEffect(()=> {
+    if(ttsState.hasEnqueued && ttsState.inferenceToken && ttsState.inferenceJobType){
+      console.log(`tts has Enqueued`);
+      addInferenceJob({
+        version:1,
+        job_id: ttsState.inferenceToken,
+        job_type: ttsState.inferenceJobType,
+        job_status: JobState.PENDING,
+      })
+    }
+  },[ttsState]);
+
+  const requestTts = useCallback( ()=>{
+    const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
+
+    if(modelToken){
+      setTtsState((curr)=>({
+        ...curr,
+        hasEnqueued: true,
+        inferenceToken: undefined,
+        inferenceJobType: undefined,
+        hasAudio: false,
+        result: undefined,
+      }));
+
+      const request = {
+        uuid_idempotency_token: uuidv4(),
+        tts_model_token: modelToken,
+        inference_text: ttsState.text,
+      };
+
+      GenerateTtsAudio(request).then((res:GenerateTtsAudioResponse)=>{
+        if(res && res.inference_job_token){
+          setTtsState((curr)=>({
+            ...curr,
+            inferenceToken: res.inference_job_token,
+            inferenceJobType: res.inference_job_token_type
+          }));
+        }
+      });
+    }else{
+      console.log("no voice model selected");
+    }
+  },[ttsState]);
+
+  const handleTextInput = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  )=>{
+    setTtsState((curr)=>({
+      ...curr,
+      text: e.target.value,
+    }));
+  };
+
+  const handleOnSelect = (val:string)=>{
+    console.log( val);
+    const voiceModel = ttsModels.find((item)=>{
+      if (item.title === val) return item
+    })
+    setTtsState((curr)=>({
+      ...curr,
+      voice: voiceModel,
+    }));
+  }
+
+  return(
+    <div className="flex flex-col p-4">
+      <div className="flex items-center">
+        <ButtonIcon
+          icon={faChevronLeft}
+          onClick={()=>changePage(AudioTabPages.LIBRARY)}
+        />
+        <H2>Generate TTS</H2>
+      </div>
+      <Label className="mb-1">Select a Voice</Label>
+      {ttsModels.length > 0 && <ListSearchDropdown
+        list={ttsModels}
+        listDisplayKey="title"
+        onSelect={handleOnSelect}
+      /> }
+      <div className="flex w-full justify-between mt-4">
+        <Label>What would you like to say?</Label>
+        <div className="flex gap-2 items-center">
+          {/* <FontAwesomeIcon className="text-brand-primary" icon={faShuffle}/>
+          <H5 className="text-brand-primary">Randomized Text</H5> */}
+        </div>
+      </div>
+      <Textarea
+        placeholder="Enter what you want the voice to say here."
+        value={ttsState.text}
+        onChange={handleTextInput}
+      />
+      <div className="mt-6 flex gap-2">
+        <div className="w-full h-12">
+          {!ttsState.hasAudio && !ttsState.hasEnqueued &&
+            <Button
+              className="w-36 h-full text-xl "
+              variant={ttsState.hasAudio ? "secondary" : "primary" }
+              disabled={ttsState.text === ""}
+              icon={faBrainCircuit}
+              onClick={requestTts}
+            >
+              Generate
+            </Button>
+          }
+          {!ttsState.hasAudio && ttsState.hasEnqueued &&
+            <LoadingDotsTyping className="bg-brand-secondary-500 rounded-lg"/>
+          }
+          { ttsState.hasAudio &&
+            <div className="bg-inference-job-success w-full h-full rounded-lg flex items-center justify-center p-2">
+              <H2>Success!! Please Check "My Audio" in the Audio Panel.</H2>
+            </div>
+          }
+        </div>
+        
+      </div>
+
+      <div className="mt-6 flex justify-between gap-2">
+        { ttsState.hasEnqueued &&
+          <Button
+            type="button"
+            disabled={!ttsState.hasAudio}
+            onClick={requestTts}
+            icon={faBrainCircuit}
+          >
+            Generate Another
+          </Button>
+        }
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
index 098a7e0dfe..6d7588595c 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
@@ -122,3 +122,8 @@ export enum WeightType {
   VALL_E = "vall_e",
   NONE = "none",
 }
+
+export enum AudioTabPages {
+  LIBRARY = 'library',
+  TTS = 'tts',
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
new file mode 100644
index 0000000000..6ec97a16c7
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
@@ -0,0 +1,82 @@
+import { listTts, inferTts } from '~/api';
+import {
+  TtsModelListItem,
+  TtsModelListResponsePayload,
+  GenerateTtsAudioErrorType,
+  StatusLike,
+  GenerateTtsAudioRequest,
+  // GenerateTtsAudioSuccess,
+  // GenerateTtsAudioError,
+  GenerateTtsAudioResponse,
+} from '~/pages/PageEnigma/models/tts';
+
+export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {  
+  return await fetch(listTts, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+    credentials: 'include',
+  })
+  .then(res => res.json())
+  .then(res => {
+    const response : TtsModelListResponsePayload = res;
+    if (!response.success) {
+      return;
+    }
+    return response?.models;
+  })
+  .catch(e => {
+    return undefined;
+  });
+}
+
+export function maybeMapError(statuslike: StatusLike) : GenerateTtsAudioErrorType | undefined {
+  switch (statuslike.status) {
+    case 400:
+      return GenerateTtsAudioErrorType.BadRequest;
+    case 404:
+      return GenerateTtsAudioErrorType.NotFound;
+    case 429:
+      return GenerateTtsAudioErrorType.TooManyRequests;
+    case 500:
+      return GenerateTtsAudioErrorType.ServerError;
+  }
+}
+
+// export function GenerateTtsAudioIsError(response: GenerateTtsAudioResponse): response is GenerateTtsAudioError {
+//   return !('inference_job_token' in response);
+// }
+
+export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promise<GenerateTtsAudioResponse>
+{
+  return await fetch(inferTts, {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    // credentials: 'include',
+    body: JSON.stringify(request),
+  })
+  .then(res =>  res.json())
+  .then(res => {
+    if (!('inference_job_token' in res)) {
+      return { error: GenerateTtsAudioErrorType.UnknownError };
+    }
+    const ret:GenerateTtsAudioResponse = {
+      success: true,
+      inference_job_token: res.inference_job_token,
+      inference_job_token_type: res.inference_job_token_type,
+    }
+    return ret;
+  })
+  .catch(e => {
+    let maybeError = maybeMapError(e);
+    if (maybeError !== undefined) {
+      return { error: maybeError };
+    }
+    return { error: GenerateTtsAudioErrorType.UnknownError };
+  });
+
+};
\ No newline at end of file
diff --git a/app/pages/PageEnigma/models/assets.ts b/app/pages/PageEnigma/models/assets.ts
index c4b963c99c..bc3ce47556 100644
--- a/app/pages/PageEnigma/models/assets.ts
+++ b/app/pages/PageEnigma/models/assets.ts
@@ -4,6 +4,8 @@ export interface MediaItem {
   media_id: string;
   object_uuid?: string;
   name: string;
+  description?: string;
+  publicBucketPath?: string;
   length?: number;
   thumbnail?: string;
   isMine?: boolean;
diff --git a/app/pages/PageEnigma/models/tts.ts b/app/pages/PageEnigma/models/tts.ts
new file mode 100644
index 0000000000..ce123a0a89
--- /dev/null
+++ b/app/pages/PageEnigma/models/tts.ts
@@ -0,0 +1,77 @@
+/*
+ * Types for Listing TTS Models
+ */
+
+export interface TtsModelListResponsePayload {
+  success: boolean,
+  models: Array<TtsModelListItem>,
+}
+
+export interface UserRatings {
+  positive_count: number,
+  negative_count: number,
+  // Total count does not take into account "neutral" ratings.
+  total_count: number,
+}
+
+export interface TtsModelListItem {
+  model_token: string,
+  tts_model_type: string,
+  creator_user_token: string,
+  creator_username: string,
+  creator_display_name: string,
+  creator_gravatar_hash: string,
+  ietf_language_tag: string,
+  ietf_primary_language_subtag: string,
+  updatable_slug: string,
+  title: string,
+  is_front_page_featured: boolean,
+  is_twitch_featured: boolean,
+  user_ratings: UserRatings,
+  category_tokens: string[],
+  created_at: string,
+  updated_at: string,
+}
+
+/*
+ * Types for Making a TTS Generation Request
+ */
+export interface GenerateTtsAudioRequest {
+  uuid_idempotency_token: string,
+  tts_model_token: string,
+  inference_text: string,
+  // TODO(2022-03): TEMPORARY
+  is_storyteller_demo?: boolean,
+}
+
+export interface GenerateTtsAudioResponse {
+  success?: boolean,
+  inference_job_token?: string,
+  // Which queue to poll
+  inference_job_token_type?: string,
+  error?: GenerateTtsAudioErrorType,
+}
+
+export enum GenerateTtsAudioErrorType {
+  BadRequest,
+  NotFound,
+  TooManyRequests,
+  ServerError,
+  UnknownError,
+}
+
+export interface EndpointSuccessResponse {
+  success: boolean,
+  inference_job_token: string,
+  inference_job_token_type?: string,
+}
+
+export interface EndpointErrorResponse {
+  success: boolean,
+}
+
+export type EndpointResponse = EndpointSuccessResponse | EndpointErrorResponse;
+
+export interface StatusLike {
+  status: number,
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index 7c04020b3f..28c7e8eeab 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -455,6 +455,7 @@ export const audioItems = signal<MediaItem[]>([
     length: 25,
     name: "Talk (Demo Sounds)",
     thumbnail: "/resources/placeholders/audio_placeholder.png",
+    publicBucketPath: "/media/j/a/r/r/3/jarr3asge6t0x048wdzcehzjd2nh4ep7/fakeyou_jarr3asge6t0x048wdzcehzjd2nh4ep7.wav",
   },
   {
     version: 1,
@@ -463,6 +464,7 @@ export const audioItems = signal<MediaItem[]>([
     length: 25,
     name: "NCS Song",
     thumbnail: "/resources/placeholders/audio_placeholder.png",
+    publicBucketPath: "/media/s/j/t/0/6/sjt06a8y2qrdqe574nry02bpd3bt01ma/upload_sjt06a8y2qrdqe574nry02bpd3bt01ma.wav",
   },
 ]);
 
diff --git a/package-lock.json b/package-lock.json
index 5ff8a0fa85..da0a0c8ac1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "terser": "^5.30.3",
         "three": "^0.162.0",
         "uuid": "^9.0.1",
+        "wavesurfer.js": "^7.7.11",
         "webm-writer": "^1.0.0"
       },
       "devDependencies": {
@@ -13181,6 +13182,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/wavesurfer.js": {
+      "version": "7.7.11",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-7.7.11.tgz",
+      "integrity": "sha512-27otJlDBcUSbMh/YkxEZN0yXTHINQNYSOl5aJplYlIaHw2u3BrABUzOmUZV3dKIy8udOLJXS/67y5pOIzgAg+w=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 3f2793a864..a2c3f659d8 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "terser": "^5.30.3",
     "three": "^0.162.0",
     "uuid": "^9.0.1",
+    "wavesurfer.js": "^7.7.11",
     "webm-writer": "^1.0.0"
   },
   "devDependencies": {

From 153d4c213dcaa6b283f59aa5b0f2c2d888b0b01b Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Mon, 22 Apr 2024 16:13:12 -0400
Subject: [PATCH 09/31] catching waveform undefined cases

---
 .../AudioTabComponent/WaveformPlayer.tsx      | 35 ++++++++++---------
 .../AudioTabComponent/audioItemElement.tsx    |  4 ---
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
index 0614fe4075..1603b8277f 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
@@ -12,26 +12,29 @@ export const WaveformPlayer = ({
   const [isPlaying, toggleIsPlaying] = useState(false);
 
   const containerRef = useCallback((node:HTMLDivElement)=>{
-    const waveSurfer = WaveSurfer.create({
-      container: node,
-      barWidth: 2,
-      height: 30,
-      cursorWidth: 0,
-    });
-    waveSurfer.load(audio);
-    waveSurfer.on('ready', () => {
-      waveSurferRef.current = waveSurfer;
-    });
-    waveSurfer.on('play', () => {
-      toggleIsPlaying(true);
-    });
-    waveSurfer.on('pause', () => {
-      toggleIsPlaying(false);
-    });
+    if(node){
+      const waveSurfer = WaveSurfer.create({
+        container: node,
+        barWidth: 2,
+        height: 30,
+        cursorWidth: 0,
+      });
+      waveSurfer.load(audio);
+      waveSurfer.on('ready', () => {
+        waveSurferRef.current = waveSurfer;
+      });
+      waveSurfer.on('play', () => {
+        toggleIsPlaying(true);
+      });
+      waveSurfer.on('pause', () => {
+        toggleIsPlaying(false);
+      });
+    }
   }, []);
 
   useEffect(()=>{
     return()=>{
+      console.log("OK?");
       waveSurferRef.current?.destroy();
     }
   },[]);
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
index 1714c3c8a0..9ea1cf7a4b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
@@ -32,10 +32,6 @@ export const AudioItemElement = ({ item }: Props) => {
 
   const { initX, initY } = initPosition.value;
 
-  useEffect (()=>{
-    console.log(item.publicBucketPath);
-  }, []);
-
   useEffect(() => {
     const onPointerUp = () => {
       if (dragItem.value) {

From 635445658a9896734671ad7f0f216b78a11af749 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Mon, 22 Apr 2024 16:29:17 -0400
Subject: [PATCH 10/31] fix the api calls for generate tts

---
 .../AudioTabComponent/AudioTabComponent.tsx   | 25 +++++++++++++------
 .../AudioTabComponent/listAudioByUser.tsx     |  3 ++-
 .../AudioTabComponent/pageTTS.tsx             | 19 +++++++-------
 .../AudioTabComponent/utilities.tsx           |  8 +++---
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index d2de799066..c96887f18a 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -21,9 +21,9 @@ export const AudioTabComponent = () => {
   });
   const { authState } = useContext(AuthenticationContext);
 
-  const handleListAudioByUser = useCallback((username:string)=>{
+  const handleListAudioByUser = useCallback((username:string, sessionToken:string)=>{
     setState((curr)=>({...curr, fetchingUserAudio:true}));
-    ListAudioByUser(username).then((res:any[])=>{
+    ListAudioByUser(username, sessionToken).then((res:any[])=>{
       setState((curr)=>({...curr, fetchingUserAudio:false}));
       audioItemsFromServer.value = res.map(item=>{
         const morphedItem:MediaItem = {
@@ -45,9 +45,9 @@ export const AudioTabComponent = () => {
   }, []);
 
   useEffect(()=>{
-    if ( authState.userInfo ){
+    if (authState.userInfo && authState.sessionToken){
       if(state.firstLoad === false && audioItemsFromServer.value.length === 0){
-        handleListAudioByUser(authState.userInfo.username);
+        handleListAudioByUser(authState.userInfo.username, authState.sessionToken);
         setState((curr)=>({...curr, firstLoad:true}));
       }
     }
@@ -72,8 +72,8 @@ export const AudioTabComponent = () => {
           return foundItemOfJob !== undefined;
         }
       });
-      if(found === undefined){
-        handleListAudioByUser(authState.userInfo.username);
+      if(found === undefined && authState.sessionToken){
+        handleListAudioByUser(authState.userInfo.username, authState.sessionToken);
       }
     }
   });
@@ -86,7 +86,16 @@ export const AudioTabComponent = () => {
   }
   if(state.page === AudioTabPages.LIBRARY){
     return <PageLibrary changePage={changePage}/>
-  }else if(state.page === AudioTabPages.TTS){
-    return <PageTTS changePage={changePage}/>
+  }else if(state.page === AudioTabPages.TTS && authState.sessionToken){
+    return(
+      <PageTTS
+        changePage={changePage}
+        sessionToken={authState.sessionToken}
+      />
+    );
+  }else{
+    return(
+      <p>Unknown Error</p>
+    )
   }
 };
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
index 19e0d23c3e..1c3a0b6c11 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
@@ -34,11 +34,12 @@ export interface MediaFile {
   };
 }
 
-export const ListAudioByUser = async(username:string) => {
+export const ListAudioByUser = async(username:string, sessionToken: string) => {
   return await fetch(listMediaByUser(username),{
     method: 'GET',
     headers: {
       "Accept": "application/json",
+      'session': sessionToken,
     },
     // credentials: 'include'
   })
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
index 31373b6f48..3fac489c6b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
@@ -33,9 +33,11 @@ type TtsState = {
 
 
 export const PageTTS =({
-  changePage 
+  changePage,
+  sessionToken,
 }:{
-  changePage: (newPage:AudioTabPages) => void
+  changePage: (newPage:AudioTabPages) => void;
+  sessionToken: string;
 })=>{
   const [ttsState, setTtsState] = useState<TtsState>({
     voice:undefined,
@@ -67,7 +69,7 @@ export const PageTTS =({
     if (ttsModelsLoaded) {
       return; // Already queried.
     }
-    const models = await ListTtsModels();
+    const models = await ListTtsModels(sessionToken);
     if (models) {
       setTtsModels(models);
     }
@@ -89,7 +91,7 @@ export const PageTTS =({
     }
   },[ttsState]);
 
-  const requestTts = useCallback( ()=>{
+  const requestTts = useCallback( (sessionToken:string)=>{
     const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
 
     if(modelToken){
@@ -108,7 +110,8 @@ export const PageTTS =({
         inference_text: ttsState.text,
       };
 
-      GenerateTtsAudio(request).then((res:GenerateTtsAudioResponse)=>{
+      GenerateTtsAudio(request, sessionToken).then((
+        res:GenerateTtsAudioResponse)=>{
         if(res && res.inference_job_token){
           setTtsState((curr)=>({
             ...curr,
@@ -160,8 +163,6 @@ export const PageTTS =({
       <div className="flex w-full justify-between mt-4">
         <Label>What would you like to say?</Label>
         <div className="flex gap-2 items-center">
-          {/* <FontAwesomeIcon className="text-brand-primary" icon={faShuffle}/>
-          <H5 className="text-brand-primary">Randomized Text</H5> */}
         </div>
       </div>
       <Textarea
@@ -177,7 +178,7 @@ export const PageTTS =({
               variant={ttsState.hasAudio ? "secondary" : "primary" }
               disabled={ttsState.text === ""}
               icon={faBrainCircuit}
-              onClick={requestTts}
+              onClick={()=>requestTts(sessionToken)}
             >
               Generate
             </Button>
@@ -199,7 +200,7 @@ export const PageTTS =({
           <Button
             type="button"
             disabled={!ttsState.hasAudio}
-            onClick={requestTts}
+            onClick={()=>requestTts(sessionToken)}
             icon={faBrainCircuit}
           >
             Generate Another
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
index 6ec97a16c7..bbef704d5a 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
@@ -10,13 +10,14 @@ import {
   GenerateTtsAudioResponse,
 } from '~/pages/PageEnigma/models/tts';
 
-export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {  
+export async function ListTtsModels(sessionToken:string) : Promise<Array<TtsModelListItem>| undefined> {  
   return await fetch(listTts, {
     method: 'GET',
     headers: {
       'Accept': 'application/json',
+      'session': sessionToken,
     },
-    credentials: 'include',
+    // credentials: 'include',
   })
   .then(res => res.json())
   .then(res => {
@@ -48,13 +49,14 @@ export function maybeMapError(statuslike: StatusLike) : GenerateTtsAudioErrorTyp
 //   return !('inference_job_token' in response);
 // }
 
-export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promise<GenerateTtsAudioResponse>
+export async function GenerateTtsAudio(request: GenerateTtsAudioRequest, sessionToken:string) : Promise<GenerateTtsAudioResponse>
 {
   return await fetch(inferTts, {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
+      'session': sessionToken,
     },
     // credentials: 'include',
     body: JSON.stringify(request),

From fd68d433924c25bd7dc1ed8f64a9308bbbe2f041 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 22 Apr 2024 14:23:32 -0700
Subject: [PATCH 11/31] filtered out objects in objects tab without thumbnails

---
 .../PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index 9ddb087fe1..5b55beed39 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -66,6 +66,7 @@ export const ObjectsTab = ({ type }: Props) => {
                 } : {}
               }
             })
+            .filter((item,i) => (item.thumbnail))
           });
         }
       });
@@ -76,6 +77,8 @@ export const ObjectsTab = ({ type }: Props) => {
     type === AssetType.CHARACTER ? characterFilter : objectFilter;
   const items = type === AssetType.CHARACTER ? characterItems : objects;
 
+  console.log("😎",objects);
+
   return (
     <>
       <div className="w-full overflow-x-auto">

From 12378bd5d6c88934ba3dd547c36e809f3e5fa622 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 22 Apr 2024 14:27:32 -0700
Subject: [PATCH 12/31] removed log

---
 .../PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index 5b55beed39..20484a6bfd 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -77,8 +77,6 @@ export const ObjectsTab = ({ type }: Props) => {
     type === AssetType.CHARACTER ? characterFilter : objectFilter;
   const items = type === AssetType.CHARACTER ? characterItems : objects;
 
-  console.log("😎",objects);
-
   return (
     <>
       <div className="w-full overflow-x-auto">

From b20aedfd0909bdf84e12bc07599cf05f11b15bd2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Mon, 22 Apr 2024 17:28:08 -0400
Subject: [PATCH 13/31] good state for the audio panel to be played with, and
 merged to test

---
 app/api.tsx                                   |  5 +-
 .../AudioTabComponent/AudioTabComponent.tsx   |  2 +-
 .../AudioTabComponent/listAudioByUser.tsx     | 56 -----------------
 .../AudioTabComponent/pageTTS.tsx             | 61 ++++++++++++------
 .../SidePanelTabs/AudioTabComponent/types.tsx | 31 ++++++++++
 .../AudioTabComponent/utilities.tsx           | 62 +++++++++++++++++--
 6 files changed, 135 insertions(+), 82 deletions(-)
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx

diff --git a/app/api.tsx b/app/api.tsx
index 0e0bcc77a1..09dd5d1edc 100644
--- a/app/api.tsx
+++ b/app/api.tsx
@@ -11,4 +11,7 @@ export const inferTts = `${apiHost}/tts/inference`;
 export const listTts = `${apiHost}/tts/list`;
 
 // User Media
-export const listMediaByUser = (username:string) => `${apiHost}/v1/media_files/list/user/${username}`;
\ No newline at end of file
+export const listMediaByUser = (username:string) => `${apiHost}/v1/media_files/list/user/${username}`;
+
+// Any Media
+export const getMediaFileByToken = (fileToken:string) => `${apiHost}/v1/media_files/file/${fileToken}`;
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index c96887f18a..d3efc45118 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -4,7 +4,7 @@ import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
 import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
-import { ListAudioByUser } from "./listAudioByUser";
+import { ListAudioByUser } from "./utilities";
 import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
deleted file mode 100644
index 1c3a0b6c11..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { listMediaByUser } from "~/api";
-import {
-  MediaFileType,
-  MediaFileClass,
-  MediaFileSubtype,
-  UserDetailsLight,
-  WeightCategory,
-  WeightType
-} from "./types";
-
-
-export interface MediaFile {
-  token: string;
-  media_type: MediaFileType;
-  media_class: MediaFileClass | null;
-  maybe_media_subtype: MediaFileSubtype | null;
-  public_bucket_path: string;
-  maybe_engine_extension: string | null;
-  maybe_batch_token: string;
-  maybe_title: string | null;
-  maybe_original_filename: string | null;
-  maybe_creator_user: UserDetailsLight | null;
-  maybe_prompt_token: string | null;
-  creator_set_visibility: string;
-  created_at: Date;
-  updated_at: Date;
-  maybe_model_weight_info: {
-    title: string;
-    weight_token: string;
-    weight_category: WeightCategory;
-    weight_type: WeightType;
-    maybe_weight_creator: UserDetailsLight;
-    maybe_cover_image_public_bucket_path: string;
-  };
-}
-
-export const ListAudioByUser = async(username:string, sessionToken: string) => {
-  return await fetch(listMediaByUser(username),{
-    method: 'GET',
-    headers: {
-      "Accept": "application/json",
-      'session': sessionToken,
-    },
-    // credentials: 'include'
-  })
-  .then(res => res.json())
-  .then(res => { 
-    if(res.success && res.results){
-      return res.results.filter((item:MediaFile)=>item['media_type']==='audio');
-    }else{
-      Promise.reject();
-    }
-  })
-  .catch(e => ({ success : false }));
-}
-
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
index 3fac489c6b..fd641f5bbf 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
@@ -18,8 +18,10 @@ import { TtsModelListItem, GenerateTtsAudioResponse } from "~/pages/PageEnigma/m
 
 import { addInferenceJob, inferenceJobs} from "../../../store/inferenceJobs";
 import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
-import { ListTtsModels, GenerateTtsAudio } from "./utilities";
+import { ListTtsModels, GenerateTtsAudio, GetMediaFileByToken } from "./utilities";
 import { AudioTabPages } from "./types";
+import { AudioItemElement } from "./audioItemElement";
+import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
 
 type TtsState = {
   voice: TtsModelListItem | undefined;
@@ -27,10 +29,17 @@ type TtsState = {
   hasEnqueued :boolean;
   inferenceToken?: string;
   inferenceJobType?: string;
-  hasAudio: boolean;
-  audioFile?: any;
+  hasTtsResult: boolean;
 }
-
+const initialState:TtsState =
+  {
+    voice:undefined,
+    text:"",
+    hasEnqueued:false,
+    inferenceJobType: undefined,
+    inferenceToken: undefined,
+    hasTtsResult:false,
+  };
 
 export const PageTTS =({
   changePage,
@@ -39,12 +48,9 @@ export const PageTTS =({
   changePage: (newPage:AudioTabPages) => void;
   sessionToken: string;
 })=>{
-  const [ttsState, setTtsState] = useState<TtsState>({
-    voice:undefined,
-    text:"",
-    hasEnqueued:false,
-    hasAudio:false,
-  });
+  const [ttsState, setTtsState] = useState<TtsState>(initialState);
+
+  const [ttsResultFile, setTtsResultFile] = useState<MediaItem|undefined>();
 
   useSignalEffect(()=>{
     console.log(inferenceJobs.value);
@@ -55,9 +61,26 @@ export const PageTTS =({
       if(found?.job_status === JobState.COMPLETE_SUCCESS){
         setTtsState((curr)=>({
           ...curr,
-          hasAudio: true,
-          audioFile: found.result
+          hasTtsResult: true,
         }))
+        GetMediaFileByToken(found.result.entity_token, sessionToken)
+        .then(res=>{
+          console.log(res);
+          const morphedItem:MediaItem = {
+            version: 1,
+            type: AssetType.AUDIO,
+            media_id: res.media_file.token,
+            object_uuid: res.media_file.token,
+            name: ttsState.voice?.title || '',
+            description: ttsState.text,
+            publicBucketPath: res.media_file.public_bucket_path,
+            length: 25,
+            thumbnail: "/resources/placeholders/audio_placeholder.png",
+            isMine: true,
+            // isBookmarked?: boolean;
+          }
+          setTtsResultFile(morphedItem);
+        })
       }
     }
   });
@@ -172,10 +195,10 @@ export const PageTTS =({
       />
       <div className="mt-6 flex gap-2">
         <div className="w-full h-12">
-          {!ttsState.hasAudio && !ttsState.hasEnqueued &&
+          {!ttsState.hasTtsResult && !ttsState.hasEnqueued &&
             <Button
               className="w-36 h-full text-xl "
-              variant={ttsState.hasAudio ? "secondary" : "primary" }
+              variant={ttsState.hasTtsResult ? "secondary" : "primary" }
               disabled={ttsState.text === ""}
               icon={faBrainCircuit}
               onClick={()=>requestTts(sessionToken)}
@@ -183,13 +206,11 @@ export const PageTTS =({
               Generate
             </Button>
           }
-          {!ttsState.hasAudio && ttsState.hasEnqueued &&
+          {!ttsState.hasTtsResult && ttsState.hasEnqueued &&
             <LoadingDotsTyping className="bg-brand-secondary-500 rounded-lg"/>
           }
-          { ttsState.hasAudio &&
-            <div className="bg-inference-job-success w-full h-full rounded-lg flex items-center justify-center p-2">
-              <H2>Success!! Please Check "My Audio" in the Audio Panel.</H2>
-            </div>
+          { ttsResultFile &&
+            <AudioItemElement item={ttsResultFile}/>
           }
         </div>
         
@@ -199,7 +220,7 @@ export const PageTTS =({
         { ttsState.hasEnqueued &&
           <Button
             type="button"
-            disabled={!ttsState.hasAudio}
+            disabled={!ttsState.hasTtsResult}
             onClick={()=>requestTts(sessionToken)}
             icon={faBrainCircuit}
           >
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
index 6d7588595c..216c294e01 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
@@ -126,4 +126,35 @@ export enum WeightType {
 export enum AudioTabPages {
   LIBRARY = 'library',
   TTS = 'tts',
+}
+
+
+export interface MediaFile {
+  token: string;
+  media_type: MediaFileType;
+  media_class: MediaFileClass | null;
+  maybe_media_subtype: MediaFileSubtype | null;
+  public_bucket_path: string;
+  maybe_engine_extension: string | null;
+  maybe_batch_token: string;
+  maybe_title: string | null;
+  maybe_original_filename: string | null;
+  maybe_creator_user: UserDetailsLight | null;
+  maybe_prompt_token: string | null;
+  creator_set_visibility: string;
+  created_at: Date;
+  updated_at: Date;
+  maybe_model_weight_info: {
+    title: string;
+    weight_token: string;
+    weight_category: WeightCategory;
+    weight_type: WeightType;
+    maybe_weight_creator: UserDetailsLight;
+    maybe_cover_image_public_bucket_path: string;
+  };
+}
+
+export interface GetMediaFileResponse {
+  success: boolean;
+  media_file?: MediaFile;
 }
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
index bbef704d5a..68251b80e0 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
@@ -1,15 +1,36 @@
-import { listTts, inferTts } from '~/api';
+import { listTts, inferTts, listMediaByUser, getMediaFileByToken } from '~/api';
+import { MediaFile, GetMediaFileResponse } from './types';
 import {
   TtsModelListItem,
   TtsModelListResponsePayload,
   GenerateTtsAudioErrorType,
   StatusLike,
   GenerateTtsAudioRequest,
-  // GenerateTtsAudioSuccess,
-  // GenerateTtsAudioError,
   GenerateTtsAudioResponse,
 } from '~/pages/PageEnigma/models/tts';
 
+
+
+export const ListAudioByUser = async(username:string, sessionToken: string) => {
+  return await fetch(listMediaByUser(username),{
+    method: 'GET',
+    headers: {
+      "Accept": "application/json",
+      'session': sessionToken,
+    },
+    // credentials: 'include'
+  })
+  .then(res => res.json())
+  .then(res => { 
+    if(res.success && res.results){
+      return res.results.filter((item:MediaFile)=>item['media_type']==='audio');
+    }else{
+      Promise.reject();
+    }
+  })
+  .catch(e => ({ success : false }));
+}
+
 export async function ListTtsModels(sessionToken:string) : Promise<Array<TtsModelListItem>| undefined> {  
   return await fetch(listTts, {
     method: 'GET',
@@ -81,4 +102,37 @@ export async function GenerateTtsAudio(request: GenerateTtsAudioRequest, session
     return { error: GenerateTtsAudioErrorType.UnknownError };
   });
 
-};
\ No newline at end of file
+};
+
+export async function GetMediaFileByToken (fileToken: string, sessionToken: string) : Promise<GetMediaResponse>
+{
+  return await fetch(getMediaFileByToken(fileToken), {
+    method: "GET",
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'session': sessionToken,
+    },
+  })
+  .then(res =>  res.json())
+  .then(res => {
+    const response: GetMediaFileResponse = res;
+
+      if (response && response.success && response.media_file) {
+        // NB: Timestamps aren't converted to Date objects on their own!
+        response.media_file.created_at = new Date(
+          response.media_file.created_at
+        );
+        response.media_file.updated_at = new Date(
+          response.media_file.updated_at
+        );
+        return response;
+      } else {
+        return { success: false };
+      }
+  })
+  .catch(e => {
+    return { success: false };
+  });
+  ;
+}
\ No newline at end of file

From 966d61c457c26fdce36f43b573d217490d4fa6ef Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 23 Apr 2024 09:57:27 +0700
Subject: [PATCH 14/31] audio tab styling fixes

---
 app/components/Button.tsx                     |  15 +-
 .../AudioTabComponent/WaveformPlayer.tsx      |  45 +--
 .../AudioTabComponent/audioItemElement.tsx    |  26 +-
 .../AudioTabComponent/audioItemElements.tsx   |   3 +-
 .../AudioTabComponent/pageLibrary.tsx         |  24 +-
 .../AudioTabComponent/pageTTS.tsx             | 282 ++++++++++--------
 6 files changed, 207 insertions(+), 188 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 75bd8c00aa..0aa6b15580 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -16,12 +16,8 @@ export const Button = ({
   disabled,
   ...rest
 }: ButtonPropsI) => {
-  const variant = disabled ? "disabled" : propsVariant;
   function getVariantClassNames(variant: string) {
     switch (variant) {
-      case "disabled": {
-        return "bg-brand-secondary-500 text-brand-secondary-300";
-      }
       case "secondary": {
         return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
@@ -30,20 +26,25 @@ export const Button = ({
       }
       case "primary":
       default: {
-        return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
+        return "bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
       }
     }
   }
 
+  const disabledClass = twMerge(
+    disabled ? "opacity-40 pointer-events-none" : "",
+  );
+
   const className = twMerge(
     "text-sm font-medium rounded-lg px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150 flex gap-2 items-center justify-center",
-    getVariantClassNames(variant),
+    getVariantClassNames(propsVariant),
     propsClassName,
+    disabledClass,
   );
 
   return (
     <button className={className} disabled={disabled} {...rest}>
-      {icon && <FontAwesomeIcon icon={icon} size="sm"/>}
+      {icon && <FontAwesomeIcon icon={icon} size="sm" />}
       {children}
     </button>
   );
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
index 1603b8277f..b4b40d7afe 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
@@ -1,54 +1,55 @@
-import { useCallback, useEffect, useState, useRef } from 'react';
-import WaveSurfer from 'wavesurfer.js';
-import { faCirclePlay, faCirclePause, } from "@fortawesome/pro-solid-svg-icons"
-import { ButtonIcon } from '~/components';
+import { useCallback, useEffect, useState, useRef } from "react";
+import WaveSurfer from "wavesurfer.js";
+import { faCirclePlay, faCirclePause } from "@fortawesome/pro-solid-svg-icons";
+import { ButtonIcon } from "~/components";
 
-export const WaveformPlayer = ({
-  audio
-}:{
-  audio: string
-}) => {
+export const WaveformPlayer = ({ audio }: { audio: string }) => {
   const waveSurferRef = useRef<WaveSurfer | undefined>(undefined);
   const [isPlaying, toggleIsPlaying] = useState(false);
 
-  const containerRef = useCallback((node:HTMLDivElement)=>{
-    if(node){
+  const containerRef = useCallback((node: HTMLDivElement) => {
+    if (node) {
       const waveSurfer = WaveSurfer.create({
         container: node,
         barWidth: 2,
-        height: 30,
+        height: 24,
         cursorWidth: 0,
+        waveColor: "#D7C8C8",
+        progressColor: "#FB8381",
       });
       waveSurfer.load(audio);
-      waveSurfer.on('ready', () => {
+      waveSurfer.on("ready", () => {
         waveSurferRef.current = waveSurfer;
       });
-      waveSurfer.on('play', () => {
+      waveSurfer.on("play", () => {
         toggleIsPlaying(true);
       });
-      waveSurfer.on('pause', () => {
+      waveSurfer.on("pause", () => {
         toggleIsPlaying(false);
       });
+      waveSurfer.on("finish", () => {
+        waveSurfer.seekTo(0);
+      });
     }
   }, []);
 
-  useEffect(()=>{
-    return()=>{
+  useEffect(() => {
+    return () => {
       console.log("OK?");
       waveSurferRef.current?.destroy();
-    }
-  },[]);
+    };
+  }, []);
 
   return (
-    <div className="flex py-1 gap-2">
+    <div className="flex items-center gap-2 py-1">
       <ButtonIcon
         icon={isPlaying ? faCirclePause : faCirclePlay}
-        size="2x"
+        className="w-auto bg-transparent p-0 text-2xl hover:bg-transparent hover:opacity-75"
         onClick={() => {
           waveSurferRef.current?.playPause();
         }}
       />
-      <div ref={containerRef} className="w-full h-10"/>
+      <div ref={containerRef} className="w-full" />
     </div>
   );
 };
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
index 9ea1cf7a4b..eaad85487b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
@@ -11,7 +11,7 @@ import {
   initPosition,
 } from "~/pages/PageEnigma/store";
 
-import { H4, H6, Pill } from "~/components";
+import { H5, H6, Pill } from "~/components";
 
 function getGcsUrl(bucketRelativePath: string | undefined | null): string {
   let bucket = "vocodes-public";
@@ -79,20 +79,22 @@ export const AudioItemElement = ({ item }: Props) => {
   return (
     <div
       className="relative w-full cursor-pointer rounded-lg transition-all duration-200"
-      onPointerDown={onPointerDown}
-    >
-      <div
-        className="flex flex-col p-2 gap-1 w-full rounded-lg bg-assets-background"
-      > 
-        <div className="flex justify-between pb-1">
+      onPointerDown={onPointerDown}>
+      <div className="flex w-full flex-col gap-0.5 rounded-lg bg-assets-background p-2.5">
+        <div className="flex justify-between">
           <Pill>Audio</Pill>
         </div>
-        
-        {item.publicBucketPath && <WaveformPlayer audio={getGcsUrl(item.publicBucketPath)} />}
-        
 
-        <H4 className="text-overflow-ellipsis">{item.name}</H4>
-        {item.description && <H6 className="text-overflow-ellipsis">{item.description}</H6>}
+        {item.publicBucketPath && (
+          <WaveformPlayer audio={getGcsUrl(item.publicBucketPath)} />
+        )}
+
+        <H5 className="text-overflow-ellipsis">{item.name}</H5>
+        {item.description && (
+          <H6 className="text-overflow-ellipsis text-xs text-white/90">
+            {item.description}
+          </H6>
+        )}
       </div>
     </div>
   );
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
index 428bb244f9..2dfeaa1144 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
@@ -7,7 +7,6 @@ interface Props {
 }
 
 export const AudioItemElements = ({ items, assetFilter }: Props) => {
-
   const displayItems = items.filter((item) => {
     if (assetFilter === AssetFilterOption.ALL) {
       return true;
@@ -19,7 +18,7 @@ export const AudioItemElements = ({ items, assetFilter }: Props) => {
   });
 
   return (
-    <div className={`grid grid-cols-1 gap-3`}>
+    <div className={`grid grid-cols-1 gap-2.5`}>
       {displayItems.map((item) => (
         <AudioItemElement key={item.media_id} item={item} />
       ))}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
index 79aab7fb6f..2cbc0f992d 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
@@ -10,25 +10,24 @@ import { AudioItemElements } from "./audioItemElements";
 import { AudioTabPages } from "./types";
 
 export const PageLibrary = ({
-  changePage 
-}:{
-  changePage: (newPage:AudioTabPages) => void
-})=>{
+  changePage,
+}: {
+  changePage: (newPage: AudioTabPages) => void;
+}) => {
   useSignals();
   const allAudioItems = [...audioItems.value, ...audioItemsFromServer.value];
 
   return (
     <>
       <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-4 flex justify-start items-center gap-2 px-4">
+        <div className="mb-4 mt-4 flex items-center justify-start gap-2 px-4">
           <button
             className={twMerge(
               "filter-tab",
               audioFilter.value === AssetFilterOption.ALL ? "active" : "",
               "disabled",
             )}
-            onClick={() => (audioFilter.value = AssetFilterOption.ALL)}
-          >
+            onClick={() => (audioFilter.value = AssetFilterOption.ALL)}>
             All
           </button>
           <button
@@ -38,8 +37,7 @@ export const PageLibrary = ({
               "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
-            disabled={!allAudioItems.some((item) => item.isMine)}
-          >
+            disabled={!allAudioItems.some((item) => item.isMine)}>
             My Audios
           </button>
           <button
@@ -51,8 +49,7 @@ export const PageLibrary = ({
               "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
-            disabled={!allAudioItems.some((item) => item.isBookmarked)}
-          >
+            disabled={!allAudioItems.some((item) => item.isBookmarked)}>
             Bookmarked
           </button>
         </div>
@@ -62,8 +59,7 @@ export const PageLibrary = ({
           icon={faCirclePlus}
           variant="action"
           className="w-full py-3 text-sm font-medium"
-          onClick={()=>changePage(AudioTabPages.TTS)}
-        >
+          onClick={() => changePage(AudioTabPages.TTS)}>
           Generate Audio
         </Button>
       </div>
@@ -76,4 +72,4 @@ export const PageLibrary = ({
       </div>
     </>
   );
-}
\ No newline at end of file
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
index fd641f5bbf..b7e1455f80 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
@@ -5,20 +5,31 @@ import { v4 as uuidv4 } from "uuid";
 import {
   faChevronLeft,
   faBrainCircuit,
+  faVolumeHigh,
 } from "@fortawesome/pro-solid-svg-icons";
 
-import { 
-  Button, ButtonIcon, H2, Label,
+import {
+  Button,
+  ButtonIcon,
+  H2,
+  Label,
   LoadingDotsTyping,
   ListSearchDropdown,
-  Textarea
+  Textarea,
 } from "~/components";
 
-import { TtsModelListItem, GenerateTtsAudioResponse } from "~/pages/PageEnigma/models/tts";
+import {
+  TtsModelListItem,
+  GenerateTtsAudioResponse,
+} from "~/pages/PageEnigma/models/tts";
 
-import { addInferenceJob, inferenceJobs} from "../../../store/inferenceJobs";
+import { addInferenceJob, inferenceJobs } from "../../../store/inferenceJobs";
 import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
-import { ListTtsModels, GenerateTtsAudio, GetMediaFileByToken } from "./utilities";
+import {
+  ListTtsModels,
+  GenerateTtsAudio,
+  GetMediaFileByToken,
+} from "./utilities";
 import { AudioTabPages } from "./types";
 import { AudioItemElement } from "./audioItemElement";
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
@@ -26,61 +37,63 @@ import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
 type TtsState = {
   voice: TtsModelListItem | undefined;
   text: string;
-  hasEnqueued :boolean;
+  hasEnqueued: boolean;
   inferenceToken?: string;
   inferenceJobType?: string;
   hasTtsResult: boolean;
-}
-const initialState:TtsState =
-  {
-    voice:undefined,
-    text:"",
-    hasEnqueued:false,
-    inferenceJobType: undefined,
-    inferenceToken: undefined,
-    hasTtsResult:false,
-  };
+};
+const initialState: TtsState = {
+  voice: undefined,
+  text: "",
+  hasEnqueued: false,
+  inferenceJobType: undefined,
+  inferenceToken: undefined,
+  hasTtsResult: false,
+};
 
-export const PageTTS =({
+export const PageTTS = ({
   changePage,
   sessionToken,
-}:{
-  changePage: (newPage:AudioTabPages) => void;
+}: {
+  changePage: (newPage: AudioTabPages) => void;
   sessionToken: string;
-})=>{
+}) => {
   const [ttsState, setTtsState] = useState<TtsState>(initialState);
 
-  const [ttsResultFile, setTtsResultFile] = useState<MediaItem|undefined>();
+  const [ttsResultFile, setTtsResultFile] = useState<MediaItem | undefined>();
 
-  useSignalEffect(()=>{
+  useSignalEffect(() => {
     console.log(inferenceJobs.value);
-    if(ttsState.hasEnqueued && ttsState.inferenceToken){
-      const found = inferenceJobs.value.find((job)=>job.job_id===ttsState.inferenceToken);
+    if (ttsState.hasEnqueued && ttsState.inferenceToken) {
+      const found = inferenceJobs.value.find(
+        (job) => job.job_id === ttsState.inferenceToken,
+      );
       console.log(`finding: ${ttsState.inferenceToken}`);
       console.log(found);
-      if(found?.job_status === JobState.COMPLETE_SUCCESS){
-        setTtsState((curr)=>({
+      if (found?.job_status === JobState.COMPLETE_SUCCESS) {
+        setTtsState((curr) => ({
           ...curr,
           hasTtsResult: true,
-        }))
-        GetMediaFileByToken(found.result.entity_token, sessionToken)
-        .then(res=>{
-          console.log(res);
-          const morphedItem:MediaItem = {
-            version: 1,
-            type: AssetType.AUDIO,
-            media_id: res.media_file.token,
-            object_uuid: res.media_file.token,
-            name: ttsState.voice?.title || '',
-            description: ttsState.text,
-            publicBucketPath: res.media_file.public_bucket_path,
-            length: 25,
-            thumbnail: "/resources/placeholders/audio_placeholder.png",
-            isMine: true,
-            // isBookmarked?: boolean;
-          }
-          setTtsResultFile(morphedItem);
-        })
+        }));
+        GetMediaFileByToken(found.result.entity_token, sessionToken).then(
+          (res) => {
+            console.log(res);
+            const morphedItem: MediaItem = {
+              version: 1,
+              type: AssetType.AUDIO,
+              media_id: res.media_file.token,
+              object_uuid: res.media_file.token,
+              name: ttsState.voice?.title || "",
+              description: ttsState.text,
+              publicBucketPath: res.media_file.public_bucket_path,
+              length: 25,
+              thumbnail: "/resources/placeholders/audio_placeholder.png",
+              isMine: true,
+              // isBookmarked?: boolean;
+            };
+            setTtsResultFile(morphedItem);
+          },
+        );
       }
     }
   });
@@ -102,132 +115,139 @@ export const PageTTS =({
     listModels();
   }, [listModels]);
 
-  useEffect(()=> {
-    if(ttsState.hasEnqueued && ttsState.inferenceToken && ttsState.inferenceJobType){
+  useEffect(() => {
+    if (
+      ttsState.hasEnqueued &&
+      ttsState.inferenceToken &&
+      ttsState.inferenceJobType
+    ) {
       console.log(`tts has Enqueued`);
       addInferenceJob({
-        version:1,
+        version: 1,
         job_id: ttsState.inferenceToken,
         job_type: ttsState.inferenceJobType,
         job_status: JobState.PENDING,
-      })
-    }
-  },[ttsState]);
-
-  const requestTts = useCallback( (sessionToken:string)=>{
-    const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
-
-    if(modelToken){
-      setTtsState((curr)=>({
-        ...curr,
-        hasEnqueued: true,
-        inferenceToken: undefined,
-        inferenceJobType: undefined,
-        hasAudio: false,
-        result: undefined,
-      }));
-
-      const request = {
-        uuid_idempotency_token: uuidv4(),
-        tts_model_token: modelToken,
-        inference_text: ttsState.text,
-      };
-
-      GenerateTtsAudio(request, sessionToken).then((
-        res:GenerateTtsAudioResponse)=>{
-        if(res && res.inference_job_token){
-          setTtsState((curr)=>({
-            ...curr,
-            inferenceToken: res.inference_job_token,
-            inferenceJobType: res.inference_job_token_type
-          }));
-        }
       });
-    }else{
-      console.log("no voice model selected");
     }
-  },[ttsState]);
+  }, [ttsState]);
 
-  const handleTextInput = (
-    e: React.ChangeEvent<HTMLTextAreaElement>
-  )=>{
-    setTtsState((curr)=>({
+  const requestTts = useCallback(
+    (sessionToken: string) => {
+      const modelToken = ttsState.voice
+        ? ttsState.voice.model_token
+        : undefined;
+
+      if (modelToken) {
+        setTtsState((curr) => ({
+          ...curr,
+          hasEnqueued: true,
+          inferenceToken: undefined,
+          inferenceJobType: undefined,
+          hasAudio: false,
+          result: undefined,
+        }));
+
+        const request = {
+          uuid_idempotency_token: uuidv4(),
+          tts_model_token: modelToken,
+          inference_text: ttsState.text,
+        };
+
+        GenerateTtsAudio(request, sessionToken).then(
+          (res: GenerateTtsAudioResponse) => {
+            if (res && res.inference_job_token) {
+              setTtsState((curr) => ({
+                ...curr,
+                inferenceToken: res.inference_job_token,
+                inferenceJobType: res.inference_job_token_type,
+              }));
+            }
+          },
+        );
+      } else {
+        console.log("no voice model selected");
+      }
+    },
+    [ttsState],
+  );
+
+  const handleTextInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTtsState((curr) => ({
       ...curr,
       text: e.target.value,
     }));
   };
 
-  const handleOnSelect = (val:string)=>{
-    console.log( val);
-    const voiceModel = ttsModels.find((item)=>{
-      if (item.title === val) return item
-    })
-    setTtsState((curr)=>({
+  const handleOnSelect = (val: string) => {
+    console.log(val);
+    const voiceModel = ttsModels.find((item) => {
+      if (item.title === val) return item;
+    });
+    setTtsState((curr) => ({
       ...curr,
       voice: voiceModel,
     }));
-  }
+  };
 
-  return(
+  return (
     <div className="flex flex-col p-4">
-      <div className="flex items-center">
+      <div className="mb-5 flex items-center gap-3">
         <ButtonIcon
+          className="w-auto p-0 text-xl opacity-60 hover:opacity-40"
           icon={faChevronLeft}
-          onClick={()=>changePage(AudioTabPages.LIBRARY)}
+          onClick={() => changePage(AudioTabPages.LIBRARY)}
         />
-        <H2>Generate TTS</H2>
+        <H2 className="font-semibold">Generate TTS</H2>
       </div>
       <Label className="mb-1">Select a Voice</Label>
-      {ttsModels.length > 0 && <ListSearchDropdown
-        list={ttsModels}
-        listDisplayKey="title"
-        onSelect={handleOnSelect}
-      /> }
-      <div className="flex w-full justify-between mt-4">
+      {ttsModels.length > 0 && (
+        <ListSearchDropdown
+          list={ttsModels}
+          listDisplayKey="title"
+          onSelect={handleOnSelect}
+        />
+      )}
+      <div className="mt-4 flex w-full justify-between">
         <Label>What would you like to say?</Label>
-        <div className="flex gap-2 items-center">
-        </div>
+        <div className="flex items-center gap-2"></div>
       </div>
       <Textarea
         placeholder="Enter what you want the voice to say here."
         value={ttsState.text}
         onChange={handleTextInput}
+        rows={8}
       />
-      <div className="mt-6 flex gap-2">
-        <div className="w-full h-12">
-          {!ttsState.hasTtsResult && !ttsState.hasEnqueued &&
+      <div className="mt-4 flex gap-2">
+        <div className="h-auto w-full">
+          {!ttsState.hasTtsResult && !ttsState.hasEnqueued && (
             <Button
-              className="w-36 h-full text-xl "
-              variant={ttsState.hasTtsResult ? "secondary" : "primary" }
+              className="h-11 w-full text-sm"
+              variant={ttsState.hasTtsResult ? "secondary" : "primary"}
               disabled={ttsState.text === ""}
-              icon={faBrainCircuit}
-              onClick={()=>requestTts(sessionToken)}
-            >
+              icon={faVolumeHigh}
+              onClick={() => requestTts(sessionToken)}>
               Generate
             </Button>
-          }
-          {!ttsState.hasTtsResult && ttsState.hasEnqueued &&
-            <LoadingDotsTyping className="bg-brand-secondary-500 rounded-lg"/>
-          }
-          { ttsResultFile &&
-            <AudioItemElement item={ttsResultFile}/>
-          }
+          )}
+          {!ttsState.hasTtsResult && ttsState.hasEnqueued && (
+            <LoadingDotsTyping className="rounded-lg bg-brand-secondary-500" />
+          )}
+          {ttsResultFile && <AudioItemElement item={ttsResultFile} />}
         </div>
-        
       </div>
 
-      <div className="mt-6 flex justify-between gap-2">
-        { ttsState.hasEnqueued &&
+      <div className="mt-4 flex justify-between gap-2">
+        {ttsState.hasEnqueued && (
           <Button
+            className="h-11 w-full text-sm"
             type="button"
-            disabled={!ttsState.hasTtsResult}
-            onClick={()=>requestTts(sessionToken)}
-            icon={faBrainCircuit}
-          >
+            disabled={!ttsState.hasTtsResult || ttsState.text === ""}
+            onClick={() => requestTts(sessionToken)}
+            icon={faVolumeHigh}>
             Generate Another
           </Button>
-        }
+        )}
       </div>
     </div>
   );
-}
\ No newline at end of file
+};

From 452a33d125786746a14b70a278949d25f22783b6 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 23 Apr 2024 16:02:50 +0700
Subject: [PATCH 15/31] margin fix

---
 .../comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
index 2cbc0f992d..43c897163c 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
@@ -64,7 +64,7 @@ export const PageLibrary = ({
         </Button>
       </div>
 
-      <div className="h-full w-full overflow-y-auto px-4 pt-4">
+      <div className="mt-4 h-full w-full overflow-y-auto px-4">
         <AudioItemElements
           items={allAudioItems}
           assetFilter={audioFilter.value}

From dedd8340b569152d980d091ba928500beb315040 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 23 Apr 2024 20:48:17 +0700
Subject: [PATCH 16/31] control panel redesign

---
 app/components/InputVector.tsx                | 108 ++++++++++++++----
 .../ControlPanelSceneObject.tsx               | 100 +++++++++-------
 app/styles/base.css                           |  12 ++
 3 files changed, 155 insertions(+), 65 deletions(-)

diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index 9fc8464d44..d25b4c0d37 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -1,24 +1,35 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { disableHotkeyInput,enableHotkeyInput,DomLevels } from "~/pages/PageEnigma/store";
+import {
+  disableHotkeyInput,
+  enableHotkeyInput,
+  DomLevels,
+} from "~/pages/PageEnigma/store";
 
 interface InputVectorProps {
   x: number;
   y: number;
   z: number;
   onChange: (v: { x: number; y: number; z: number }) => void;
+  increment?: number;
 }
 
-export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
+export const InputVector = ({
+  x,
+  y,
+  z,
+  onChange,
+  increment = 0.1,
+}: InputVectorProps) => {
   const xRef = useRef<HTMLInputElement>(null);
   const yRef = useRef<HTMLInputElement>(null);
   const zRef = useRef<HTMLInputElement>(null);
 
   const inputCommonClasses =
-    "relative w-14 h-7 rounded-r-lg bg-brand-secondary p-3 text-sm text-white transition-all duration-150 ease-in-out outline-none -outline-offset-2";
+    "relative h-6 rounded-r-lg bg-brand-secondary p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-brand-secondary-900";
 
   const wrapperCommonClasses =
-    "flex items-center before:inline-block before:w-10 before:h-10 before:bg-brand-primary before:text-white before:rounded-l-lg before:h-7 before:w-5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";
+    "relative flex items-center before:inline-block before:h-6 before:bg-brand-primary before:text-white before:rounded-l-lg before:w-1.5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";
 
   function handleOnChange() {
     const newVector = {
@@ -28,14 +39,67 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
     };
     onChange(newVector);
   }
+
+  const blurAllInputs = () => {
+    xRef.current?.blur();
+    yRef.current?.blur();
+    zRef.current?.blur();
+  };
+
+  // For dragging the input value to increment/decrement
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    ref: React.RefObject<HTMLInputElement>,
+  ) => {
+    e.preventDefault();
+    blurAllInputs();
+    let isDragging = false;
+    let previousMousePosition = e.clientX;
+
+    const mouseMoveHandler = (e: MouseEvent) => {
+      isDragging = true;
+      const currentMousePosition = e.clientX;
+      const direction = currentMousePosition > previousMousePosition ? 1 : -1;
+      previousMousePosition = currentMousePosition;
+
+      const currentValue = Number(ref.current?.value) || 0;
+      const newValue = currentValue + direction * increment;
+
+      if (ref.current) {
+        ref.current.value = newValue.toFixed(1);
+        ref.current.blur();
+      }
+
+      onChange({
+        x: Number(xRef.current?.value) || 0,
+        y: Number(yRef.current?.value) || 0,
+        z: Number(zRef.current?.value) || 0,
+      });
+    };
+
+    const mouseUpHandler = () => {
+      document.removeEventListener("mousemove", mouseMoveHandler);
+      document.removeEventListener("mouseup", mouseUpHandler);
+      if (!isDragging) {
+        ref.current?.focus();
+        ref.current?.select();
+      }
+    };
+
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      (e.currentTarget as HTMLInputElement).blur(); // Unfocus the input field on pressing Enter
+    }
+  };
+
   return (
-    <div className="flex w-full justify-between gap-2">
-      <span
-        className={twMerge(
-          wrapperCommonClasses,
-          "before:bg-axis-x before:content-['X']",
-        )}
-      >
+    <div className="flex w-full flex-col justify-between gap-1.5">
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-x")}>
+        <div className="absolute left-3.5 z-10 font-semibold">X</div>
         <input
           className={twMerge(inputCommonClasses, "focus:outline-axis-x")}
           type="number"
@@ -44,14 +108,12 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           value={x}
           onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
           onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
+          onMouseDown={(e) => handleMouseDown(e, xRef)}
+          onKeyDown={handleKeyDown}
         />
       </span>
-      <span
-        className={twMerge(
-          wrapperCommonClasses,
-          "before:bg-axis-y before:content-['Y']",
-        )}
-      >
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-y")}>
+        <div className="absolute left-3.5 z-10 font-semibold">Y</div>
         <input
           className={twMerge(inputCommonClasses, "focus:outline-axis-y")}
           type="number"
@@ -60,14 +122,12 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           value={y}
           onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
           onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
+          onMouseDown={(e) => handleMouseDown(e, yRef)}
+          onKeyDown={handleKeyDown}
         />
       </span>
-      <span
-        className={twMerge(
-          wrapperCommonClasses,
-          "before:bg-axis-z before:content-['Z']",
-        )}
-      >
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-z")}>
+        <div className="absolute left-3.5 z-10 font-semibold">Z</div>
         <input
           className={twMerge(inputCommonClasses, "focus:outline-axis-z")}
           type="number"
@@ -76,6 +136,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           value={z}
           onFocus={() => disableHotkeyInput(DomLevels.INPUT)}
           onBlur={() => enableHotkeyInput(DomLevels.INPUT)}
+          onMouseDown={(e) => handleMouseDown(e, zRef)}
+          onKeyDown={handleKeyDown}
         />
       </span>
     </div>
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 47d7a976d0..c9535decbb 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -1,7 +1,8 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Transition } from "@headlessui/react";
 import {
-  faArrowRightArrowLeft,
+  faChevronDown,
+  faChevronUp,
   faCube,
   faTrash,
 } from "@fortawesome/pro-solid-svg-icons";
@@ -22,6 +23,11 @@ import { QueueKeyframe } from "~/pages/PageEnigma/models";
 export const ControlPanelSceneObject = () => {
   const editorEngine = useContext(EngineContext);
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
 
   const position =
     appUiState.controlPanel.currentSceneObject?.objectVectors?.position;
@@ -169,63 +175,73 @@ export const ControlPanelSceneObject = () => {
       show={appUiState?.controlPanel.isShowing}
       className={[
         "absolute bottom-0 right-0",
-        "m-4 flex h-fit w-fit flex-col gap-2",
+        "m-4 flex h-fit w-56 flex-col gap-2",
         "rounded-lg",
         "border border-ui-panel-border",
-        "bg-ui-panel p-4 text-white",
+        "bg-ui-panel p-3.5 text-white",
       ].join(" ")}
-      enter="transition-opacity duration-100"
+      enter="transition-opacity duration-150"
       enterFrom="opacity-0"
       enterTo="opacity-100"
-      leave="transition-opacity duration-100"
+      leave="transition-opacity duration-150"
       leaveFrom="opacity-100"
       leaveTo="opacity-0">
-      <div className="flex justify-between">
+      <div className="mb-1 flex justify-between">
         <div className="flex items-center gap-2">
           <FontAwesomeIcon icon={faCube} />
           <p className="font-semibold">
             {appUiState.controlPanel.currentSceneObject.object_name}
           </p>
         </div>
-        <div className="flex items-center gap-2 text-xs font-medium opacity-60">
-          <FontAwesomeIcon icon={faArrowRightArrowLeft} />
-          <p>Swap Object</p>
+        <FontAwesomeIcon
+          icon={isCollapsed ? faChevronUp : faChevronDown}
+          onClick={toggleCollapse}
+          className="cursor-pointer opacity-75 transition-opacity duration-100 ease-in-out hover:opacity-50"
+        />
+      </div>
+
+      <Transition
+        show={!isCollapsed}
+        enter="transition-all duration-200 ease-in-out"
+        enterFrom="opacity-0 max-h-0"
+        enterTo="opacity-100 max-h-96"
+        leave="transition-all duration-200 ease-in-out"
+        leaveFrom="opacity-100 max-h-96"
+        leaveTo="opacity-0 max-h-0"
+        className={"flex flex-col gap-2 overflow-y-auto"}>
+        <div className="flex flex-col gap-1">
+          <H5>Location</H5>
+          <InputVector
+            x={position?.x || 0}
+            y={position?.y || 0}
+            z={position?.z || 0}
+            onChange={handlePositionChange}
+          />
         </div>
-      </div>
-      <span className="h-1" />
 
-      <div className="flex flex-col gap-1">
-        <H5>Position</H5>
-        <InputVector
-          x={position?.x || 0}
-          y={position?.y || 0}
-          z={position?.z || 0}
-          onChange={handlePositionChange}
-        />
-      </div>
+        <div className="flex flex-col gap-1">
+          <H5>Rotation</H5>
+          <InputVector
+            x={rotation?.x || 0}
+            y={rotation?.y || 0}
+            z={rotation?.z || 0}
+            onChange={handleRotationChange}
+            increment={1}
+          />
+        </div>
 
-      <div className="flex flex-col gap-1">
-        <H5>Rotation</H5>
-        <InputVector
-          x={rotation?.x || 0}
-          y={rotation?.y || 0}
-          z={rotation?.z || 0}
-          onChange={handleRotationChange}
-        />
-      </div>
+        <div className="flex flex-col gap-1">
+          <H5>Scale</H5>
+          <InputVector
+            x={scale?.x || 0}
+            y={scale?.y || 0}
+            z={scale?.z || 0}
+            onChange={handleScaleChange}
+          />
+        </div>
+      </Transition>
 
-      <div className="flex flex-col gap-1">
-        <H5>Scale</H5>
-        <InputVector
-          x={scale?.x || 0}
-          y={scale?.y || 0}
-          z={scale?.z || 0}
-          onChange={handleScaleChange}
-        />
-      </div>
-
-      <span className="h-2" />
-      <div className="flex gap-2">
+      <div className="mt-2 flex gap-1.5">
         <Button
           variant="secondary"
           className="grow"
diff --git a/app/styles/base.css b/app/styles/base.css
index aa4a7e8234..5ebaa1d874 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -18,6 +18,18 @@
   border: 3px solid gray;
 }
 
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
 body {
   font-family: "Fira Sans", sans-serif;
   color: #fff;

From 9cf442455f1b6732977d3370c73062b7c2ededa4 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 23 Apr 2024 21:44:48 +0700
Subject: [PATCH 17/31] truncate object text title

---
 .../comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index c9535decbb..1253fac6ba 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -189,7 +189,7 @@ export const ControlPanelSceneObject = () => {
       <div className="mb-1 flex justify-between">
         <div className="flex items-center gap-2">
           <FontAwesomeIcon icon={faCube} />
-          <p className="font-semibold">
+          <p className="max-w-36 truncate font-semibold">
             {appUiState.controlPanel.currentSceneObject.object_name}
           </p>
         </div>

From c902c5e1b46c3aeb78b2bf61e5b1c9d2b0938494 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 23 Apr 2024 11:12:13 -0400
Subject: [PATCH 18/31] cleanup unused routes, expanded and fixed  component
 library

---
 .../SectionComponents.tsx                     | 128 ++++++++++++++++
 .../SectionTypography.tsx                     |  21 +++
 app/pages/PageComponentLibrary/index.tsx      |  19 +++
 app/pages/PageCube/PageCube.tsx               |  72 ---------
 app/pages/PageCube/SceneWithCube.tsx          |  45 ------
 app/pages/PageCube/index.tsx                  |   2 -
 app/routes/ComponentLibrary.tsx               | 137 +-----------------
 app/routes/Cube.tsx                           |  41 ------
 app/routes/Sonic.tsx                          |  34 -----
 9 files changed, 169 insertions(+), 330 deletions(-)
 create mode 100644 app/pages/PageComponentLibrary/SectionComponents.tsx
 create mode 100644 app/pages/PageComponentLibrary/SectionTypography.tsx
 create mode 100644 app/pages/PageComponentLibrary/index.tsx
 delete mode 100644 app/pages/PageCube/PageCube.tsx
 delete mode 100644 app/pages/PageCube/SceneWithCube.tsx
 delete mode 100644 app/pages/PageCube/index.tsx
 delete mode 100644 app/routes/Cube.tsx
 delete mode 100644 app/routes/Sonic.tsx

diff --git a/app/pages/PageComponentLibrary/SectionComponents.tsx b/app/pages/PageComponentLibrary/SectionComponents.tsx
new file mode 100644
index 0000000000..79dc8e8f39
--- /dev/null
+++ b/app/pages/PageComponentLibrary/SectionComponents.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import {
+  H1, H4, H6, P,
+  Button,
+  ButtonLink,
+  ListDropdown,
+  ListSearchDropdown,
+  // LoadingBar,
+  LoadingDotsTyping,
+  LoadingDotsBricks,
+} from "~/components";
+
+
+export function SectionComponents () {
+
+  const [valueListDropdown, setValueListDropdown] = useState<string|undefined>(undefined);
+  const [valueListSearchDropdown, setValueListSearchDropdown] = useState<string|undefined>(undefined);
+
+  const testdata = [
+    { name: 'Wade Cooper' },
+    { name: 'Arlene Mccoy' },
+    { name: 'Devon Webb' },
+    { name: 'Tom Cook' },
+    { name: 'Tanya Fox' },
+    { name: 'Hellen Schmidt' },
+  ]
+
+  // Progress Bar Usage States, Variables and Functions
+  // const [progress, setProgress] = useState(0);
+  // const loopRef = useRef<NodeJS.Timeout | null>(null);
+  // const pushProgressBar: ()=>void = useCallback(()=>{
+  //   loopRef.current = setInterval(function timer(){
+  //     setProgress((curr)=>{
+  //       if (curr < 100){
+  //         return curr+10;
+  //       }else{
+  //         if(loopRef.current)
+  //           clearInterval(loopRef.current);
+  //         return curr;
+  //       }
+  //     })}
+  //   , 3000);
+  // }, []);
+  // useEffect(()=>{
+  //   pushProgressBar();
+  //   return ()=>{
+  //     if(loopRef.current)
+  //       clearInterval(loopRef.current)
+  //   }
+  // },[progress]);
+
+  return(
+    <div className="flex flex-col gap-2 mb-4">
+      <H1>Components</H1>
+      <H4>Buttons</H4>
+      <div className="flex gap-2">
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button className="bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary">
+          Prelim Tertiary
+        </Button>
+        <Button disabled>Disabled</Button>
+      </div>
+
+    <div className="flex flex-col gap-2 mb-4">
+      <H4>ButtonLink</H4>
+      <ButtonLink to="/">Back to /</ButtonLink>
+    </div>
+
+    <div className="flex flex-col gap-2 mb-4 max-w-2xl">
+      <H4>List Dropdowns</H4>
+      <ListDropdown
+        list={testdata}
+        onSelect={(val)=>setValueListDropdown(val)}
+      />
+      <P>Selected Item: <b>{valueListDropdown}</b></P>
+      <ListSearchDropdown
+        list={testdata}
+        onSelect={(val)=>setValueListSearchDropdown(val)}
+      />
+      <P>Selected Item: <b>{valueListSearchDropdown}</b></P>
+    </div>
+
+    <div className="flex flex-col gap-2 mb-4">
+      <H4>Loading Dots</H4>
+      <div className="flex gap-2">
+        <div className="w-60 h-40 rounded-lg overflow-hidden">
+          <LoadingDotsTyping />
+        </div>
+        <div className="w-60 h-40 rounded-lg overflow-hidden">
+          <LoadingDotsBricks />
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-2 mb-4  max-w-2xl">
+      <H4>Loading Bar</H4>
+      <H6>Loading Bar is currently Broken and not reusable</H6>
+      {/* <div className="flex gap-2 items-center">
+        <LoadingBar
+          progress={progress}
+          isShowing={progress !== 100}
+          wrapperClassName="rounded-lg"
+          message="this takes progress from parent"
+        />
+        <Button
+          className="h-fit"
+          onClick={()=>setProgress(0)}
+        >
+          Reset
+        </Button>
+      </div>
+      <LoadingBar
+        label="labeling the bar"
+        message="displaying a message"
+      />
+      <LoadingBar
+        label="useFakeTimer = 30000 (30secs)"
+        useFakeTimer={30000}
+      />
+      <LoadingBar
+        label="useFakeTimer = 3000 (3secs)"
+        useFakeTimer={3000}
+      />*/}
+    </div> 
+  </div>
+  );
+};
\ No newline at end of file
diff --git a/app/pages/PageComponentLibrary/SectionTypography.tsx b/app/pages/PageComponentLibrary/SectionTypography.tsx
new file mode 100644
index 0000000000..a7500e0d03
--- /dev/null
+++ b/app/pages/PageComponentLibrary/SectionTypography.tsx
@@ -0,0 +1,21 @@
+import { 
+  H1,H2,H3,H4,H5,H6,P,Label,
+} from "~/components";
+
+
+export const SectionTypography = () => {
+
+  return(
+    <div className="flex flex-col gap-2 mb-4">
+      <H1>Typography</H1>
+      <H1>H1. This is an H1 Heading</H1>
+      <H2>H2. This is an H2 Heading</H2>
+      <H3>H3. This is an H3 Heading</H3>
+      <H4>H4. This is an H4 Heading</H4>
+      <Label>Label. Is essentially same as H4</Label>
+      <P>P. Is an normal Paragraph</P>
+      <H5>H5. This is an H5 Heading</H5>
+      <H6>H6. This is an H6 Heading</H6>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/pages/PageComponentLibrary/index.tsx b/app/pages/PageComponentLibrary/index.tsx
new file mode 100644
index 0000000000..9ef6f2cc59
--- /dev/null
+++ b/app/pages/PageComponentLibrary/index.tsx
@@ -0,0 +1,19 @@
+import { SectionTypography } from "./SectionTypography";
+import { SectionComponents } from "./SectionComponents";
+
+export const PageComponentLibrary = () => {
+  return (
+    <div
+      className="fixed w-full overflow-scroll"
+      style={{ height: "calc(100% - 72px)" }}
+    >
+      <div
+        className='bg-ui-panel w-10/12 max-w-7xl mx-auto my-6 rounded-lg p-6'
+      >
+        <SectionTypography />
+        <hr className="mt-2 mb-4" />
+        <SectionComponents />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/pages/PageCube/PageCube.tsx b/app/pages/PageCube/PageCube.tsx
deleted file mode 100644
index f6d2062e5a..0000000000
--- a/app/pages/PageCube/PageCube.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons";
-
-import { Button } from "~/components/Button";
-import { ButtonLink } from "~/components/ButtonLink";
-import { TopBarHelmet } from "~/modules/TopBarHelmet";
-
-import { SidePanel } from "~/modules/SidePanel";
-import { SceneWithCube } from "./SceneWithCube";
-
-export const PageCube = () => {
-  const mountRef = useRef<HTMLDivElement | null>(null);
-  const sceneRef = useRef<SceneWithCube | null>(null);
-  const [{ x: rotationX, y: rotationY }, setRotations] = useState<{
-    x: number | undefined;
-    y: number | undefined;
-  }>({ x: undefined, y: undefined });
-
-  const toggleStopped = () => {
-    if (sceneRef.current !== null) {
-      sceneRef.current.stopped = !sceneRef.current.stopped;
-    }
-  };
-
-  const listeningXYRotation = useCallback(
-    ({ x, y }: { x: number; y: number }) => {
-      setRotations({
-        x: Math.round(x * 100) / 100,
-        y: Math.round(y * 100) / 100,
-      });
-    },
-    [],
-  );
-
-  useEffect(() => {
-    //componentDidMount
-    sceneRef.current = new SceneWithCube(listeningXYRotation);
-    mountRef.current?.appendChild(sceneRef.current.renderer.domElement);
-
-    sceneRef.current.renderer.setAnimationLoop(() => {
-      sceneRef.current?.update();
-    });
-
-    // Clean up
-    return () => {
-      if (sceneRef.current)
-        mountRef.current?.removeChild(sceneRef.current.renderer.domElement);
-    };
-  }, []);
-
-  return (
-    <div className="grid grid-cols-12 gap-2	">
-      <TopBarHelmet>
-        <ButtonLink to={"/"} variant="secondary" icon={faChevronLeft}>
-          Back to Dashboard
-        </ButtonLink>
-      </TopBarHelmet>
-      <div className="col-span-6	">
-        <div className="MountingPoint" ref={mountRef} />
-      </div>
-      <div className="col-span-6	">
-        <Button onClick={toggleStopped}> STOP </Button>
-        <p className="text-white">Ration X: {rotationX ? rotationX : ""}</p>
-        <p className="text-white">Ration Y: {rotationY ? rotationY : ""}</p>
-      </div>
-      <SidePanel>
-        <p className="text-white">Side Panel Context</p>
-      </SidePanel>
-    </div>
-  );
-};
diff --git a/app/pages/PageCube/SceneWithCube.tsx b/app/pages/PageCube/SceneWithCube.tsx
deleted file mode 100644
index 853b04dbb8..0000000000
--- a/app/pages/PageCube/SceneWithCube.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as THREE from 'three';
-
-export class SceneWithCube {
-  scene: THREE.Scene;
-  camera: THREE.PerspectiveCamera;
-  renderer: THREE.WebGLRenderer;
-  cube: THREE.Mesh;
-  stopped: boolean;
-  callback: ({x,y}:{x:number;y:number})=>void;
-
-  update(){
-    if(!this.stopped){
-      this.cube.rotation.x += 0.01;
-      this.cube.rotation.y += 0.01;
-      if(this.callback && typeof this.callback === "function")
-        this.callback({
-          x: this.cube.rotation.x,
-          y: this.cube.rotation.y
-        })
-    }
-    this.renderer.render(this.scene, this.camera);
-  }
-
-  constructor(callback: ({x,y}:{x:number;y:number})=>void) {
-    const width = 1000;
-    const height = 750;
-
-    this.callback = callback;
-    this.stopped = false;
-
-    this.scene = new THREE.Scene();
-    this.camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
-    this.renderer = new THREE.WebGLRenderer();
-    this.renderer.setSize(width, height);
-  
-    const geometry = new THREE.BoxGeometry();
-    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-    this.cube = new THREE.Mesh(geometry, material);
-    this.scene.add(this.cube);
-  
-    this.camera.position.z = 5;
-  }
-
-}
-
diff --git a/app/pages/PageCube/index.tsx b/app/pages/PageCube/index.tsx
deleted file mode 100644
index 1f4e7f3f76..0000000000
--- a/app/pages/PageCube/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export { PageCube } from "./PageCube";
\ No newline at end of file
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index d544d4666d..6727c20777 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -1,136 +1 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { 
-  Button,
-  ButtonLink,
-  H1,H2,H3,H4,H5,H6,P,Label,
-  ListDropdown,
-  ListSearchDropdown,
-  LoadingBar,
-  LoadingDotsTyping,
-  LoadingDotsBricks,
-} from "~/components";
-
-
-export default function ComponentLibrary () {
-  const [progress, setProgress] = useState(0);
-  const loopRef = useRef<NodeJS.Timeout | null>(null);
-
-  const testdata = [
-    { name: 'Wade Cooper' },
-    { name: 'Arlene Mccoy' },
-    { name: 'Devon Webb' },
-    { name: 'Tom Cook' },
-    { name: 'Tanya Fox' },
-    { name: 'Hellen Schmidt' },
-  ]
-
-  const pushProgressBar: ()=>void = useCallback(()=>{
-    loopRef.current = setInterval(function timer(){
-      setProgress((curr)=>{
-        if (curr < 100){
-          return curr+10;
-        }else{
-          if(loopRef.current)
-            clearInterval(loopRef.current);
-          return curr;
-        }
-      })}
-    , 3000);
-  }, []);
-  useEffect(()=>{
-    pushProgressBar();
-    return ()=>{
-      if(loopRef.current)
-        clearInterval(loopRef.current)
-    }
-  },[progress]);
-
-  return(
-    <div
-      className="fixed w-full overflow-scroll"
-      style={{height: "calc(100% - 72px)"}}
-    >
-      <div
-        className='bg-ui-panel w-10/12 max-w-7xl mx-auto my-6 rounded-lg p-6'
-      >
-
-        <div className="flex flex-col gap-2 mb-4">
-          <H1>Typography</H1>
-          <H1>H1. This is an H1 Heading</H1>
-          <H2>H2. This is an H2 Heading</H2>
-          <H3>H3. This is an H3 Heading</H3>
-          <H4>H4. This is an H4 Heading</H4>
-          <Label>Label. Is essentially same as H4</Label>
-          <P>P. Is an normal Paragraph</P>
-          <H5>H5. This is an H5 Heading</H5>
-          <H6>H6. This is an H6 Heading</H6>
-    
-          <hr className="mt-2 mb-4"/>
-          <H1>Components</H1>
-          <H4>Buttons</H4>
-          <div className="flex gap-2">
-            <Button>Primary</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button className="bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary">
-              Prelim Tertiary
-            </Button>
-            <Button disabled>Disabled</Button>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-2 mb-4">
-          <H4>ButtonLink</H4>
-          <ButtonLink to="/">Back to /</ButtonLink>
-        </div>
-
-        <div className="flex flex-col gap-2 mb-4 max-w-2xl">
-          <H4>List Dropdowns</H4>
-          <ListDropdown list={testdata}/>
-          <ListSearchDropdown list={testdata}/>
-        </div>
-
-        <div className="flex flex-col gap-2 mb-4">
-          <H4>Loading Dots</H4>
-          <div className="flex gap-2">
-            <div className="w-60 h-40 rounded-lg overflow-hidden">
-              <LoadingDotsTyping />
-            </div>
-            <div className="w-60 h-40 rounded-lg overflow-hidden">
-              <LoadingDotsBricks />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-2 mb-4  max-w-2xl">
-          <H4>Loading Bar</H4>
-          <div className="flex gap-2 items-center">
-            <LoadingBar
-              progress={progress}
-              isShowing={progress !== 100}
-              wrapperClassName="rounded-lg"
-              message="this takes progress from parent"
-            />
-            <Button
-              className="h-fit"
-              onClick={()=>setProgress(0)}
-            >
-              Reset
-            </Button>
-          </div>
-          <LoadingBar
-            label="labeling the bar"
-            message="displaying a message"
-          />
-          <LoadingBar
-            label="useFakeTimer = 30000 (30secs)"
-            useFakeTimer={30000}
-          />
-          <LoadingBar
-            label="useFakeTimer = 3000 (3secs)"
-            useFakeTimer={3000}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
\ No newline at end of file
+export { PageComponentLibrary as default } from "~/pages/PageComponentLibrary";
diff --git a/app/routes/Cube.tsx b/app/routes/Cube.tsx
deleted file mode 100644
index fcdce4c1d9..0000000000
--- a/app/routes/Cube.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { PageCube } from "../pages/PageCube";
-import { Button } from '~/components';
-
-export default function Cube(){
-  const pausedRiddle = true;
-  const [riddle, setRiddle] = useState<string>("");
-  const [submitted, setSubmitted] = useState<boolean>(false);
-
-  const handleInput = (event:React.ChangeEvent<HTMLInputElement>)=>{
-    setRiddle(event.target.value);
-  }
-
- const handleSubmit = () => {
-    const state = riddle.length > 5 && riddle[riddle.length-1] === "!";
-    if(state)
-      setSubmitted(state);
-    else
-      alert("What is the price for your blind eye?")
-  }
-
-  if(submitted || pausedRiddle){
-    return <PageCube />
-  }else{
-    return(
-      <div className="w-full flex justify-center content-center">
-        <form 
-          className="mt-20 flex flex-col content-center"
-          onSubmit={handleSubmit}
-        >
-          <label className='text-white'>
-            Riddle:
-          </label>
-          <input type="text" value={riddle} onChange={handleInput} />
-          <br/>
-          <Button type="submit" className='text-white'>Submit</Button>
-        </form>
-      </div>
-    );
-  }
-}
\ No newline at end of file
diff --git a/app/routes/Sonic.tsx b/app/routes/Sonic.tsx
deleted file mode 100644
index 0c0712364b..0000000000
--- a/app/routes/Sonic.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { MetaFunction } from "@remix-run/deno";
-import { TopBarHelmet } from "~/modules/TopBarHelmet";
-
-import sonic from "./_assets/sonic-the-hedgehog-classic-sonic.gif";
-import { useSignals } from "@preact/signals-react/runtime";
-import { useEffect } from "react";
-import { pageHeight, pageWidth } from "~/store";
-import { sidePanelWidth, timelineHeight } from "~/pages/PageEnigma/store";
-
-export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ];
-};
-
-export default function Sonic() {
-  return (
-    <div className="size-full">
-      <TopBarHelmet>{null}</TopBarHelmet>
-      <img
-        alt="sonic"
-        src={sonic}
-        className="
-          fixed
-          left-0 top-0
-          -z-10 h-screen
-          w-screen
-          object-cover
-        "
-      />
-    </div>
-  );
-}

From 4a2359699e1c5f1ef31c40e4dff7868563902eb8 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Tue, 23 Apr 2024 13:11:28 -0400
Subject: [PATCH 19/31] Added code to eventually fix the transform panel issue
 moving on to another piece of code and merging this in.

---
 .../ControlPanelSceneObject.tsx                 | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 1253fac6ba..05a6064983 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -20,6 +20,21 @@ import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { toTimelineActions } from "../../Queue/toTimelineActions";
 import { QueueKeyframe } from "~/pages/PageEnigma/models";
 
+// TODO this will be useful later to fix the bug on leading zeros
+const formatNumber = (input: string): number => {
+  // Convert the input string to a number to remove leading zeros
+  const num = parseFloat(input);
+  // Convert the number back to a string with at least two decimal places
+  const str = num.toFixed(2);
+  return parseFloat(str);
+}
+
+// console.log(formatNumber("000123.4567"));  // Outputs: "123.46"
+// console.log(formatNumber("000123.4"));     // Outputs: "123.40"
+// console.log(formatNumber("000123"));       // Outputs: "123.00"
+// console.log(formatNumber("0000.00"));      // Outputs: "0.00"
+// console.log(formatNumber("0000.000001"));  // Outputs: "0.00"
+
 export const ControlPanelSceneObject = () => {
   const editorEngine = useContext(EngineContext);
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
@@ -29,6 +44,7 @@ export const ControlPanelSceneObject = () => {
     setIsCollapsed(!isCollapsed);
   };
 
+
   const position =
     appUiState.controlPanel.currentSceneObject?.objectVectors?.position;
   const rotation =
@@ -37,6 +53,7 @@ export const ControlPanelSceneObject = () => {
     appUiState.controlPanel.currentSceneObject?.objectVectors?.scale;
   const currentSceneObject = appUiState.controlPanel.currentSceneObject;
 
+
   useEffect(() => {
     // TODO this causes a subtle bug because it renders way too many times.
     if (!appUiState.controlPanel.currentSceneObject) {

From eaf9a10e4e6bb06e7d32735baef0389d67a6d4a5 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 14:17:47 -0400
Subject: [PATCH 20/31] added focus.

---
 app/pages/PageEnigma/js/editor.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 728b46a170..c4a73e07df 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -332,6 +332,7 @@ class Editor {
     // OnClick and MouseMove events.
     window.addEventListener("mousemove", this.onMouseMove.bind(this), false);
     window.addEventListener("click", this.onMouseClick.bind(this), false);
+    window.addEventListener("keydown", this.onkeydown.bind(this), false);
     // Base control and debug stuff remove debug in prod.
     if (this.control == undefined) {
       return;
@@ -1325,6 +1326,15 @@ class Editor {
     }
   }
 
+  onkeydown(event: any) {
+    if (event.key === 'f' && this.selected && this.orbitControls) {
+      this.orbitControls.target.copy(this.selected.position);
+      this.orbitControls.maxDistance = 4;
+      this.orbitControls.update();
+      this.orbitControls.maxDistance = 999;
+    }
+  }
+
   // Sets new mouse location usually used in raycasts.
   onMouseMove(event: any) {
     const rect = this.canvReference.getBoundingClientRect();

From f359759026f56616813062473797706199f9174f Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 14:41:13 -0400
Subject: [PATCH 21/31] fixed render camera viewport and fixed clipping.

---
 app/pages/PageEnigma/js/editor.ts | 38 +++++++++++++++++++------------
 app/pages/PageEnigma/js/scene.ts  |  6 +++++
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 728b46a170..eff3bfe1ba 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -250,27 +250,34 @@ class Editor {
     // Find the container element
     const container = document.getElementById("video-scene-container");
 
-    if(container == null) { return; }
+    if (container == null) { return; }
 
     // Use the container's dimensions
     const width = container.offsetWidth;
     const height = container.offsetHeight;
 
     // Sets up camera and base position.
-    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.15, 30);
+    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.05, 100);
     this.camera.position.z = 3;
     this.camera.position.y = 3;
     this.camera.position.x = -3;
 
+    this.camera.layers.enable(0);
+    this.camera.layers.enable(1); // This camera does not see this layer
+
+
     this.timeline.camera = this.camera;
 
     this.render_camera = new THREE.PerspectiveCamera(
       70,
       width / height,
-      0.15,
-      30,
+      0.05,
+      100,
     );
 
+
+    this.render_camera.layers.disable(1); // This camera does not see this layer      );
+
     // Base WebGL render and clock for delta time.
     this.renderer = new THREE.WebGLRenderer({
       antialias: true,
@@ -323,10 +330,9 @@ class Editor {
     this.control = new TransformControls(this.camera, this.renderer.domElement);
     this.control.space = "local"; // Local transformation mode
     // .space = 'world'; // Global mode
-
-    this.control.setScaleSnap(0.05);
-    this.control.setTranslationSnap(0.05);
-    this.control.setRotationSnap(0.05);
+    this.control.setScaleSnap(0.01);
+    this.control.setTranslationSnap(0.01);
+    this.control.setRotationSnap(0.01);
     console.log("Control Sensitivity:", this.control.sensitivity);
 
     // OnClick and MouseMove events.
@@ -348,6 +354,10 @@ class Editor {
     });
     this.control.setSize(0.5); // Good default value for visuals.
     this.raycaster = new THREE.Raycaster();
+    // Configure raycaster to check both layers
+    this.raycaster.layers.set(0); // Enable default layer
+    this.raycaster.layers.enable(1); // Also check objects on the custom layer
+
     this.mouse = new THREE.Vector2();
     this.activeScene.scene.add(this.control);
     // Resets canvas size.
@@ -419,7 +429,7 @@ class Editor {
     console.log(result);
   }
 
-  public async testTestTimelineEvents() {}
+  public async testTestTimelineEvents() { }
 
   public async loadScene(scene_media_token: string) {
     this.dispatchAppUiState({
@@ -662,7 +672,7 @@ class Editor {
 
     this.saoPass.params.saoBias = 3.1;
     this.saoPass.params.saoIntensity = 1.0;
-    this.saoPass.params.saoScale = 6.0;
+    this.saoPass.params.saoScale = 12.0;
     this.saoPass.params.saoKernelRadius = 5.0;
     this.saoPass.params.saoMinResolution = 0.0;
 
@@ -928,10 +938,10 @@ class Editor {
       audioSegment,
       "-filter_complex",
       "[1:a]adelay=" +
-        startTime * 1000 +
-        "|" +
-        startTime * 1000 +
-        "[a1];[0:a][a1]amix=inputs=2[a]",
+      startTime * 1000 +
+      "|" +
+      startTime * 1000 +
+      "[a1];[0:a][a1]amix=inputs=2[a]",
       "-map",
       "[a]",
       `${itteration}final_tmp.wav`,
diff --git a/app/pages/PageEnigma/js/scene.ts b/app/pages/PageEnigma/js/scene.ts
index 043daf5e8c..a73b43a67c 100644
--- a/app/pages/PageEnigma/js/scene.ts
+++ b/app/pages/PageEnigma/js/scene.ts
@@ -75,6 +75,7 @@ class Scene {
         obj.receiveShadow = false;
         obj.castShadow = false;
         obj.userData['media_id'] = "Point::" + keyframe_uuid;
+        obj.layers.set(1); // Enable default layer
         if (this.hot_items != undefined) {
             this.hot_items.push(obj);
         }
@@ -105,6 +106,7 @@ class Scene {
             cam_obj.userData["name"] = "::CAM::";
             cam_obj.name = "::CAM::";
             cam_obj.position.set(0, 0.6, 1.5);
+            cam_obj.layers.set(1);
             this.scene.add(cam_obj);
         });
     }
@@ -140,6 +142,7 @@ class Scene {
                 glb.scene.children.forEach(child => {
                     child.traverse((c: THREE.Object3D) => {
                         if (c instanceof THREE.Mesh) {
+                            c.material.side = THREE.FrontSide;
                             c.material.metalness = 0.0;
                             c.material.specular = 0.5;
                             c.material.shininess = 0.0;
@@ -155,6 +158,8 @@ class Scene {
                     child.userData["metalness"] = 0.0;
                     child.userData["shininess"] = 0.5;
                     child.userData["specular"] = 0.5;
+                    child.layers.enable(0);
+                    child.layers.enable(1);
                     if (auto_add) { this.scene.add(child); }
                     resolve(child);
                 });
@@ -251,6 +256,7 @@ class Scene {
         const size = 25;
         const divisions = 50;
         this.gridHelper = new THREE.GridHelper(size, divisions, new THREE.Color("rgb(199,195,195)"), new THREE.Color("rgb(161,157,157)"));
+        this.gridHelper.layers.set(1); // Enable default layer
         this.scene.add(this.gridHelper);
     }
 }

From 76c6ffc0c770be3a218e69bb0cc787c2be0ab779 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 14:47:55 -0400
Subject: [PATCH 22/31] fixed editors SAO for new near.

---
 app/pages/PageEnigma/js/editor.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index eff3bfe1ba..20d7da334a 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -257,7 +257,7 @@ class Editor {
     const height = container.offsetHeight;
 
     // Sets up camera and base position.
-    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.05, 100);
+    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 200);
     this.camera.position.z = 3;
     this.camera.position.y = 3;
     this.camera.position.x = -3;
@@ -271,8 +271,8 @@ class Editor {
     this.render_camera = new THREE.PerspectiveCamera(
       70,
       width / height,
-      0.05,
-      100,
+      0.01,
+      200,
     );
 
 
@@ -670,9 +670,9 @@ class Editor {
 
     this.saoPass = new SAOPass(this.activeScene.scene, this.camera);
 
-    this.saoPass.params.saoBias = 3.1;
+    this.saoPass.params.saoBias = 4.1;
     this.saoPass.params.saoIntensity = 1.0;
-    this.saoPass.params.saoScale = 12.0;
+    this.saoPass.params.saoScale = 32.0;
     this.saoPass.params.saoKernelRadius = 5.0;
     this.saoPass.params.saoMinResolution = 0.0;
 

From 3c382b57c0564ed0e4506fc46e9f05faedcca7c9 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 15:35:45 -0400
Subject: [PATCH 23/31] made camera key markers invisible during camera man
 mode.

---
 app/pages/PageEnigma/js/editor.ts   | 5 +++++
 app/pages/PageEnigma/js/timeline.ts | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 51b8faecee..07e606f37e 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -581,6 +581,11 @@ class Editor {
           type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
         });
         this.updateSelectedUI();
+        if (this.activeScene.hot_items) {
+          this.activeScene.hot_items.forEach((element) => {
+            element.visible = false;
+          });
+        }
       } else {
         this.camera.position.copy(this.last_cam_pos);
         this.camera.rotation.copy(this.last_cam_rot);
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 28ce3ae736..50bc79dbf5 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -290,7 +290,10 @@ export class TimeLine {
       ),
     );
 
-    this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
+    let point = this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
+    if(this.editorEngine.camera_person_mode){
+      point.visible = false;
+    }
   }
 
   public deleteObject(object_uuid: string) {

From 1c40b6be6257dcb646d6cb096fe34fd46dc0f639 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 15:41:19 -0400
Subject: [PATCH 24/31] Made spacebar start playback.

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

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 51b8faecee..d620dc9dec 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -1342,6 +1342,8 @@ class Editor {
       this.orbitControls.maxDistance = 4;
       this.orbitControls.update();
       this.orbitControls.maxDistance = 999;
+    } else if (event.key === ' ') {
+      this.startPlayback();
     }
   }
 

From 08947fb455f2c79d4e371724fd639259b34abed8 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 15:41:57 -0400
Subject: [PATCH 25/31] Added check for rendering.

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

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index d620dc9dec..e837724576 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -1343,7 +1343,9 @@ class Editor {
       this.orbitControls.update();
       this.orbitControls.maxDistance = 999;
     } else if (event.key === ' ') {
-      this.startPlayback();
+      if(this.rendering == false){
+        this.startPlayback();
+      }
     }
   }
 

From e30dbaa46e944585e25b592bd854228df952bbfe Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 18:30:49 -0400
Subject: [PATCH 26/31] Added basic controls for standard user.

---
 app/pages/PageEnigma/js/editor.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index e169dd9b98..13dd13bf2f 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -321,11 +321,14 @@ class Editor {
       this.renderer.domElement,
     );
 
-    this.orbitControls.mouseButtons = {
-      MIDDLE: THREE.MOUSE.ROTATE,
-      RIGHT: THREE.MOUSE.PAN,
-    }; // Blender Style
-    // this.orbitControls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }; // Standard
+    //this.orbitControls.mouseButtons = {
+    //  MIDDLE: THREE.MOUSE.ROTATE,
+    //  RIGHT: THREE.MOUSE.PAN,
+    //}; // Blender Style
+    this.orbitControls.mouseButtons = { 
+      LEFT: THREE.MOUSE.ROTATE, 
+      MIDDLE: THREE.MOUSE.DOLLY, 
+      RIGHT: THREE.MOUSE.PAN }; // Standard
 
     this.control = new TransformControls(this.camera, this.renderer.domElement);
     this.control.space = "local"; // Local transformation mode
@@ -1348,7 +1351,7 @@ class Editor {
       this.orbitControls.update();
       this.orbitControls.maxDistance = 999;
     } else if (event.key === ' ') {
-      if(this.rendering == false){
+      if (this.rendering == false) {
         this.startPlayback();
       }
     }

From 627bb291fc95b28d95c2389c0289c21f34eb1cc6 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 18:45:23 -0400
Subject: [PATCH 27/31] fixed switchtoggle.

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

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index e169dd9b98..8015e31e97 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -1348,7 +1348,7 @@ class Editor {
       this.orbitControls.update();
       this.orbitControls.maxDistance = 999;
     } else if (event.key === ' ') {
-      if(this.rendering == false){
+      if(this.rendering == false && this.switchPreviewToggle == false){
         this.startPlayback();
       }
     }

From 71a48aa25721401327349195a274ddb816ac8ec6 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 18:50:47 -0400
Subject: [PATCH 28/31] Fixed by only allowing when over canvas.

---
 app/pages/PageEnigma/js/editor.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 052592cce6..71400770c8 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -110,6 +110,8 @@ class Editor {
   last_scrub: number;
   record_stream: any | undefined;
   recorder: MediaRecorder | undefined;
+
+  selectedCanvas: boolean;
   // Default params.
 
   constructor() {
@@ -181,6 +183,7 @@ class Editor {
     this.last_scrub = 0;
     this.frames = 0;
     this.last_selected_sum = 0;
+    this.selectedCanvas = false;
     // Audio Engine Test.
 
     this.render_width = 1280;
@@ -409,9 +412,11 @@ class Editor {
             this.orbitControls.enabled = true;
             this.cameraViewControls.enabled = false;
           }
+          this.selectedCanvas = true;
         } else {
           this.orbitControls.enabled = false;
           this.cameraViewControls.enabled = false;
+          this.selectedCanvas = false;
         }
         this.cameraViewControls?.reset();
       }
@@ -1351,7 +1356,7 @@ class Editor {
       this.orbitControls.update();
       this.orbitControls.maxDistance = 999;
     } else if (event.key === ' ') {
-      if(this.rendering == false && this.switchPreviewToggle == false){
+      if(this.rendering == false && this.switchPreviewToggle == false && this.selectedCanvas){
         this.startPlayback();
       }
     }

From eff232a861acf57f5d66252c42e4589888feeee0 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 19:14:15 -0400
Subject: [PATCH 29/31] Had to attach clipuuid to the check for updating and
 deleting items.

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

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 50bc79dbf5..0eccab06e2 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -407,11 +407,13 @@ export class TimeLine {
     const media_id = data["data"]["media_id"];
     const offset = data["data"]["offset"];
     const length = data["data"]["length"] + offset;
+    const clip_uuid = data['data']['clip_uuid'];
 
     for (const element of this.timeline_items) {
       if (
         element.media_id === media_id &&
-        element.object_uuid === object_uuid
+        element.object_uuid === object_uuid &&
+        element.clip_uuid == clip_uuid
       ) {
         element.length = length;
         element.offset = offset;
@@ -424,12 +426,14 @@ export class TimeLine {
     const object_uuid = data["data"]["object_uuid"];
     const media_id = data["data"]["media_id"];
     const type = data["type"];
+    const clip_uuid = data['data']['clip_uuid'];
 
     for (let i = 0; i < this.timeline_items.length; i++) {
       const element = this.timeline_items[i];
       if (
         element.media_id === media_id &&
-        element.object_uuid === object_uuid
+        element.object_uuid === object_uuid &&
+        element.clip_uuid == clip_uuid
       ) {
         this.timeline_items.splice(i, 1);
         break;

From 1a26fb22fca15c15daa497d15013afbc6edcf2b5 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 22:19:05 -0400
Subject: [PATCH 30/31] Both faces are shown back and front.

---
 app/pages/PageEnigma/js/scene.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/scene.ts b/app/pages/PageEnigma/js/scene.ts
index a73b43a67c..d795963502 100644
--- a/app/pages/PageEnigma/js/scene.ts
+++ b/app/pages/PageEnigma/js/scene.ts
@@ -142,7 +142,6 @@ class Scene {
                 glb.scene.children.forEach(child => {
                     child.traverse((c: THREE.Object3D) => {
                         if (c instanceof THREE.Mesh) {
-                            c.material.side = THREE.FrontSide;
                             c.material.metalness = 0.0;
                             c.material.specular = 0.5;
                             c.material.shininess = 0.0;

From 73f1e5bd80822f9312dee94980983c9b56d57942 Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 23 Apr 2024 23:28:39 -0400
Subject: [PATCH 31/31] Fixed by doing rotation of quat.

---
 app/pages/PageEnigma/datastructures/clips/transform_clip.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/datastructures/clips/transform_clip.ts b/app/pages/PageEnigma/datastructures/clips/transform_clip.ts
index 124a070bc1..1731e82bbb 100644
--- a/app/pages/PageEnigma/datastructures/clips/transform_clip.ts
+++ b/app/pages/PageEnigma/datastructures/clips/transform_clip.ts
@@ -133,10 +133,10 @@ export class TransformClip {
     if (this.keyframes.length > 0) {
       let first_pos = this.keyframes[0].position;
       let first_rot = this.keyframes[0].rotation;
-      let first_quat = new THREE.Quaternion().setFromEuler(new THREE.Euler(THREE.MathUtils.degToRad(first_rot.x), THREE.MathUtils.degToRad(first_rot.y), THREE.MathUtils.degToRad(first_rot.z)));
+      let first_quat = new THREE.Euler(THREE.MathUtils.degToRad(first_rot.x), THREE.MathUtils.degToRad(first_rot.y), THREE.MathUtils.degToRad(first_rot.z));
       let first_scl = this.keyframes[0].scale;
       object.position.copy(first_pos);
-      object.rotation.set(first_quat.x, first_quat.y, first_quat.z);
+      object.rotation.copy(first_quat);
       object.scale.copy(first_scl);
       this.step_frame = 0;
     }