audio text transcript

packages/components/src/api/media_files/GetMediaFile.ts

@@ -21,6 +21,7 @@ export interface MediaFile {
     maybe_weight_creator: UserDetailsLight;
     maybe_cover_image_public_bucket_path: string;
   };
+  maybe_text_transcript?: string;
 }
 
 export enum MediaFileLookupError {

packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -111,6 +111,11 @@ export default function AudioCard({
                 : "Media Audio"}
             </h6>
             <p className="fs-7 opacity-75">{timeAgo}</p>
+            {data.maybe_text_transcript && (
+              <p className="fs-7 mt-2 two-line-ellipsis">
+                {data.maybe_text_transcript}
+              </p>
+            )}
           </div>
           <AudioPlayer src={data.public_bucket_path} id={data.token} />
           <CardFooter

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -75,19 +75,13 @@ export default function MediaPage() {
             <MediaAudioComponent mediaFile={mediaFile} />
 
             {/* Show TTS text input if it is a TTS result */}
-            {mediaFile.public_bucket_path.includes("tts_inference_output") && (
+            {mediaFile.maybe_text_transcript && (
               <div className="mt-4">
                 <h5 className="fw-semibold">
                   <FontAwesomeIcon icon={faSquareQuote} className="me-2" />
-                  Audio Text
+                  Audio Text Transcript
                 </h5>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Pellentesque elit ullamcorper dignissim cras tincidunt
-                  lobortis. Integer malesuada nunc vel risus commodo viverra
-                  maecenas accumsan lacus.
-                </p>
+                <p>{mediaFile.maybe_text_transcript}</p>
               </div>
             )}
           </div>
@@ -401,14 +395,14 @@ export default function MediaPage() {
                       }}
                     />
                     <BookmarkButton
-                        {...{
-                          large: true,
-                          ...bookmarks.makeProps({
-                            entityToken: token,
-                            entityType: "media_file",
-                          }),
-                        }}
-                      />
+                      {...{
+                        large: true,
+                        ...bookmarks.makeProps({
+                          entityToken: token,
+                          entityType: "media_file",
+                        }),
+                      }}
+                    />
                   </div>
                 </div>
               </div>