good state for the audio panel to be played with, and merged to test

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}`;
+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}`;

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";
 

app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx

@@ -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 }));
-}
-

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}
           >

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;
 }

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 };
   });
 
-};
+};
+
+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 };
+  });
+  ;
+}