media audio view updates (#311)

* remove header title

* update

* commented out buttons for now

* audio player view fixes and styling updates

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -310,6 +310,15 @@ styles with important tags:
       box-shadow: none !important;
     }
 
+    .video-bg {
+      background-color: $black;
+    }
+
+    .panel-border {
+      border-color: #ffffff12 !important;
+      border: 1px solid;
+    }
+
     .panel-inner {
       background-color: lighten($panel, 4%);
     }
@@ -510,7 +519,7 @@ styles with important tags:
     box-shadow: none;
   }
 
-  .panel-border {
+  .pricing-border {
     box-sizing: border-box;
     box-shadow: inset 0px 0px 0px 3px $primary;
   }

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

@@ -2,9 +2,14 @@ import React from "react";
 import WaveSurfer from "wavesurfer.js";
 import { useEffect, useState } from "react";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlay, faPause } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faPlay,
+  faPause,
+  faRepeat,
+  faArrowRight,
+} from "@fortawesome/pro-solid-svg-icons";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile";
+import Button from "components/common/Button";
 
 enum PlaybackSpeed {
   HALF,
@@ -26,13 +31,12 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) {
     const wavesurferInstance = WaveSurfer.create({
       container: "#waveform", // Previousy I used 'this.ref.current' and React.createRef()
       height: 200,
-
       responsive: true,
       waveColor: "#cbcbcb",
       progressColor: "#fc8481",
       cursorColor: "#fc6b68",
       cursorWidth: 2,
-      normalize: false,
+      normalize: true,
     });
 
     setWaveSurfer(wavesurferInstance);
@@ -93,20 +97,12 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) {
     setPlaybackSpeed(nextSpeed);
   };
 
-  let playButtonText = (
-    <>
-      <FontAwesomeIcon icon={faPlay} />
-    </>
-  );
+  let playButtonIcon = faPlay;
   if (isPlaying) {
-    playButtonText = (
-      <>
-        <FontAwesomeIcon icon={faPause} />
-      </>
-    );
+    playButtonIcon = faPause;
   }
 
-  let repeatButtonText = isRepeating ? "Repeat" : "NoRepeat";
+  let repeatButtonIcon = isRepeating ? faRepeat : faArrowRight;
 
   let speedButtonText = "1x";
   switch (playbackSpeed) {
@@ -117,33 +113,34 @@ export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) {
       speedButtonText = "2x";
       break;
     case PlaybackSpeed.HALF:
-      speedButtonText = "1/2x";
+      speedButtonText = "0.5x";
       break;
   }
 
   return (
     <div>
       <div id="waveform"></div>
-      <div className="d-flex gap-4 flex-column justify-content-center align-items-center mt-4">
-        <div className="d-flex gap-2">
-          <button className="btn btn-primary" onClick={() => togglePlayPause()}>
-            {playButtonText}
-          </button>
+      <div className="d-flex justify-content-center gap-2 mt-3">
+        <Button
+          square={true}
+          icon={playButtonIcon}
+          onClick={() => togglePlayPause()}
+        />
 
-          <button
-            className="btn btn-secondary"
-            onClick={() => toggleIsRepeating()}
-          >
-            {repeatButtonText}
-          </button>
+        <Button
+          tooltip="Toggle Repeat"
+          variant="secondary"
+          square={true}
+          icon={repeatButtonIcon}
+          onClick={() => toggleIsRepeating()}
+        />
 
-          <button
-            className="btn btn-secondary"
-            onClick={() => togglePlaybackSpeed()}
-          >
-            {speedButtonText}
-          </button>
-        </div>
+        <Button
+          tooltip="Speed"
+          label={speedButtonText}
+          variant="secondary"
+          onClick={() => togglePlaybackSpeed()}
+        />
       </div>
     </div>
   );

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

@@ -61,24 +61,39 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
     switch (mediaFile.media_type) {
       case MediaFileType.Audio:
         return (
-          <div className="panel p-3 p-lg-4 d-flex flex-column gap-4 rounded">
+          <div className="panel p-3 p-lg-4 d-flex flex-column">
+            {/* Voice model name that is used to generate the audio */}
+            <h3 className="fw-bold mb-4">[Voice Model Name]</h3>
+
             <MediaAudioComponent mediaFile={mediaFile} />
-            <div>
-              <h5 className="fw-semibold">
-                <FontAwesomeIcon icon={faSquareQuote} className="me-2" />
-                Audio Text
-              </h5>
-              {/*<p>{mediaFile?.audio_text && mediaFile.audio_text}</p>*/}
-            </div>
+
+            {/* Show TTS text input if it is a TTS result */}
+            {mediaFile.public_bucket_path.includes("tts_inference_output") && (
+              <div className="mt-4">
+                <h5 className="fw-semibold">
+                  <FontAwesomeIcon icon={faSquareQuote} className="me-2" />
+                  Audio Text
+                </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>
+              </div>
+            )}
           </div>
         );
       case MediaFileType.Video:
         return (
-          <div className="panel panel-clear">
-            <div className="ratio ratio-16x9">
-              <MediaVideoComponent mediaFile={mediaFile} />
+          <>
+            <div className="panel panel-clear">
+              <div className="ratio ratio-16x9 video-bg panel-border rounded">
+                <MediaVideoComponent mediaFile={mediaFile} />
+              </div>
             </div>
-          </div>
+          </>
         );
 
       case MediaFileType.Image:
@@ -187,24 +202,26 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
     },
   ];
 
+  const imageDetails = [
+    { property: "Type", value: mediaFile.media_type },
+    { property: "Created at", value: mediaFile.created_at.toString() },
+    {
+      property: "Visibility",
+      value: mediaFile.creator_set_visibility.toString(),
+    },
+  ];
+
   let mediaDetails = undefined;
 
   switch (mediaFile.media_type) {
     case MediaFileType.Audio:
-      mediaDetails = (
-        <Accordion.Item title="Audio Details" defaultOpen={true}>
-          <DataTable data={audioDetails} />
-        </Accordion.Item>
-      );
+      mediaDetails = <DataTable data={audioDetails} />;
       break;
     case MediaFileType.Video:
-      mediaDetails = (
-        <Accordion.Item title="Video Details" defaultOpen={true}>
-          <DataTable data={videoDetails} />
-        </Accordion.Item>
-      );
+      mediaDetails = <DataTable data={videoDetails} />;
       break;
     case MediaFileType.Image:
+      mediaDetails = <DataTable data={imageDetails} />;
       break;
     default:
   }
@@ -307,7 +324,10 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
               </div>
 
               <Accordion>
-                {mediaDetails}
+                <Accordion.Item title="Video Details" defaultOpen={true}>
+                  {mediaDetails}
+                </Accordion.Item>
+
                 {modMediaDetails}
               </Accordion>
             </div>

packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx

@@ -143,7 +143,7 @@ function PricingPage(props: Props) {
 
   // Highlight the mid-tier plan if nothing is subscribed
   if (!userHasPaidPremium) {
-    proBorderCss = "rounded panel p-4 h-100  panel-border";
+    proBorderCss = "rounded panel p-4 h-100  pricing-border";
   }
 
   return (