From 924e9468be2d68a2ac7bb5f425dc6289ffe8b425 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 17:45:33 -0400
Subject: [PATCH] Side Panel Audio Tab scaffolding done

---
 .../comps/SidePanelTabs/TabAudio.tsx          | 68 +++++++++++++++++++
 .../PageEnigma/comps/SidePanelTabs/index.tsx  |  4 +-
 2 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
new file mode 100644
index 0000000000..c466cb9c9e
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
@@ -0,0 +1,68 @@
+import { useContext, useEffect, useState } from "react";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
+import { APPUI_ACTION_TYPES } from "../../reducers";
+import { AppUiContext } from "../../contexts/AppUiContext";
+import { useSignals } from "@preact/signals-react/runtime";
+import { timelineHeight } from "~/pages/PageEnigma/store";
+
+import { AnimationElement } from "./AnimationElement";
+import { Button, Label, P } from "~/components";
+
+export const TabAudio = () => {
+  const { audioClips } = useContext(TrackContext);
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+
+  useSignals();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    setHeight(window.outerHeight - timelineHeight.value);
+  }, []);
+
+  const openTTSPanel = () =>{
+    dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+    })
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col">
+        <Label>Generate</Label>
+        <Button
+          onClick={openTTSPanel}
+          variant="secondary"
+        >
+          Create TTS Audio
+        </Button>
+        <span className="w-full h-3" />
+        <Button
+          disabled
+          variant="secondary"
+        >
+          Create Voice to Voice Audio
+        </Button>
+      </div>
+      <div className="flex flex-col mt-1">
+        <Label>Preset Dialogues</Label>
+      
+        <div className="flex flex-wrap gap-2">
+          {audioClips.map((clip) => {
+            return (
+              <AnimationElement key={clip.media_id} clip={clip} type="audio" />
+            );
+        })}
+        </div>
+      </div>
+
+      <div className="flex flex-col mt-1">
+        <Label>My Dialogues</Label>
+        <div className="flex justify-center items-center text-center w-full h-40">
+          <P className="text-brand-secondary-300"> No audio generated yet</P>
+        </div>
+      </div>
+
+      <Button className="w-fit m-auto px-6 py-2"> Add to Lip Sync Track</Button>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
index 8a3a31b967..02911e9b53 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
@@ -1,7 +1,7 @@
 import { Tabs } from "~/modules/Tabs";
 import { TabStylization } from "./TabStylization";
 import { AnimationElements } from "./AnimationElements";
-import { AudioElements } from "~/pages/PageEnigma/comps/SidePanelTabs/AudioElements";
+import { TabAudio } from "~/pages/PageEnigma/comps/SidePanelTabs/TabAudio";
 
 export const SidePanelTabs = () => {
   return (
@@ -17,7 +17,7 @@ export const SidePanelTabs = () => {
         },
         {
           header: "Audio",
-          children: <AudioElements />,
+          children: <TabAudio />,
         },
         {
           header: "Stylization",