media page test

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -90,6 +90,7 @@ import MobileMenu from "components/layout/MobileMenu/MobileMenu";
 import { TopNav } from "./nav/TopNav";
 import { TestingPage } from "./pages/testing/TestingPage";
 import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage";
+import MediaPage from "./pages/media_page/MediaPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -318,6 +319,10 @@ class PageContainer extends React.Component<
               />
             </Route>
 
+            <Route path="/media/:token">
+              <MediaPage />
+            </Route>
+
             <Route path="/dev-tts">
               <TtsModelSearchPage sessionWrapper={this.props.sessionWrapper} />
             </Route>

packages/fakeyou.com/src/v2/view/pages/media_page/AudioComponent.tsx

@@ -0,0 +1,20 @@
+import MediaData from "./MediaDataTypes";
+
+import React from "react";
+
+interface AudioComponentProps {
+  mediaData: MediaData;
+}
+
+const AudioComponent: React.FC<AudioComponentProps> = ({ mediaData }) => {
+  return (
+    <div>
+      <audio controls>
+        <source src={mediaData.public_bucket_path} />
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  );
+};
+
+export default AudioComponent;

packages/fakeyou.com/src/v2/view/pages/media_page/ImageComponent.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import MediaData from "./MediaDataTypes";
+
+interface ImageComponentProps {
+  mediaData: MediaData;
+}
+
+const ImageComponent: React.FC<ImageComponentProps> = ({ mediaData }) => {
+  return (
+    <div>
+      <img
+        src={mediaData.public_bucket_path}
+        alt="test" // Make sure to provide alt text
+        width="400"
+        height="300"
+      />
+    </div>
+  );
+};
+
+export default ImageComponent;

packages/fakeyou.com/src/v2/view/pages/media_page/MediaDataTypes.ts

@@ -0,0 +1,18 @@
+export default interface MediaData {
+  token: string;
+  media_type: string;
+  public_bucket_path: string;
+  maybe_creator_user: {
+    user_token: string;
+    username: string;
+    display_name: string;
+    gravatar_hash: string;
+    default_avatar: {
+      image_index: number;
+      color_index: number;
+    };
+  };
+  creator_set_visibility: string;
+  created_at: string;
+  updated_at: string;
+}

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import AudioComponent from "./AudioComponent";
+import VideoComponent from "./VideoComponent";
+import ImageComponent from "./ImageComponent";
+
+const MediaFilePage = () => {
+  const { token } = useParams();
+  const [mediaData, setMediaData] = useState<{
+    /* media data properties */
+  } | null>(null);
+
+  // Dummy media data (replace with actual API data)
+  const dummyMediaData = {
+    token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", // Initialize with an empty string or your default token value
+    media_type: "video", // Change to "video" or "image" to test different types
+    public_bucket_path:
+      "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.wav", // Replace with actual URLs
+    maybe_creator_user: {
+      user_token: "u_00XGM6M2TE4J9",
+      username: "hanashi",
+      display_name: "hanashi",
+      gravatar_hash: "c45b453fcb1d27b348504ae7f5d6a6c",
+      default_avatar: {
+        image_index: 1,
+        color_index: 3,
+      },
+    },
+    creator_set_visibility: "public",
+    created_at: "2023-10-12T07:49:53Z",
+    updated_at: "2023-10-12T07:49:53Z",
+  };
+
+  // Simulate API call
+  useEffect(() => {
+    setTimeout(() => {
+      setMediaData(dummyMediaData); // Replace with actual API data
+    }, 1000); // Simulated delay of 1 second
+  }, [token]);
+
+  const renderMediaComponent = () => {
+    if (!mediaData) {
+      return <div>Loading...</div>;
+    }
+
+    switch (dummyMediaData.media_type) {
+      case "audio":
+        return <AudioComponent mediaData={dummyMediaData} />;
+      case "video":
+        return <VideoComponent mediaData={dummyMediaData} />;
+      case "image":
+        return <ImageComponent mediaData={dummyMediaData} />;
+      default:
+        return <div>Unsupported media type</div>;
+    }
+  };
+
+  return (
+    <div>
+      <h1>{dummyMediaData.token}</h1>
+      {renderMediaComponent()}
+    </div>
+  );
+};
+
+export default MediaFilePage;

packages/fakeyou.com/src/v2/view/pages/media_page/VideoComponent.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import MediaData from "./MediaDataTypes";
+interface VideoComponentProps {
+  mediaData: MediaData;
+}
+
+const VideoComponent: React.FC<VideoComponentProps> = ({ mediaData }) => {
+  return (
+    <div>
+      <video controls width="640" height="360">
+        <source src={mediaData.public_bucket_path} />
+        Your browser does not support the video element.
+      </video>
+    </div>
+  );
+};
+
+export default VideoComponent;

packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx

@@ -434,46 +434,6 @@ function TtsResultViewPage(props: Props) {
       <div className="container py-5">
         <div className="d-flex flex-column">
           <h1 className=" fw-bold mb-2">{headingTitle}</h1>
-          {/* Rate Result Buttons */}
-          {/* Commented out because not ready yet. */}
-          {/*<div className="d-flex gap-3">
-            <div className="d-flex">
-              <Tippy
-                content="I like this audio"
-                hideOnClick
-                placement="bottom"
-                theme="fakeyou"
-                arrow={false}
-              >
-                <button className="btn-rate left rated">
-                  <FontAwesomeIcon icon={faThumbsUp} />
-                </button>
-              </Tippy>
-
-              <div className="vr"></div>
-
-              <Tippy
-                content="I dislike this audio"
-                hideOnClick
-                placement="bottom"
-                theme="fakeyou"
-                arrow={false}
-              >
-                <button className="btn-rate right">
-                  <FontAwesomeIcon icon={faThumbsDown} />
-                </button>
-              </Tippy>
-            </div>
-            <div className="d-flex align-items-center">
-              <FontAwesomeIcon
-                icon={faHeart}
-                className="me-2 rating-icon heart"
-              />
-              <p>
-                <span className="fw-medium">1,518 likes</span>
-              </p>
-            </div>
-          </div>*/}
 
           <p className="mb-3 result-text pt-2">
             <TextExpander
@@ -494,14 +454,6 @@ function TtsResultViewPage(props: Props) {
         </div>
       </div>
 
-      {/* Without wavesurfer, 
-      <audio
-        controls
-        src={audioLink}>
-            Your browser does not support the
-            <code>audio</code> element.
-      </audio>*/}
-
       <div className="container-panel pt-3 pb-5">{socialSharing}</div>
 
       <div className="container-panel pt-3 pb-5">
@@ -517,12 +469,6 @@ function TtsResultViewPage(props: Props) {
           <div className="py-6">
             <table className="table tts-result-table">
               <tbody>
-                {/* <tr>
-                  <th scope="row">Original text</th>
-                  <td className="overflow-fix">
-                    {ttsInferenceResult.raw_inference_text}
-                  </td>
-                </tr> */}
                 <tr>
                   <th scope="row">Audio creator</th>
                   <td>{creatorDetails}</td>