diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 6c1298ee8e..b3f53f95c6 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/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< /> + + + + diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/AudioComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media_page/AudioComponent.tsx new file mode 100644 index 0000000000..1a94a0e249 --- /dev/null +++ b/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 = ({ mediaData }) => { + return ( +
+ +
+ ); +}; + +export default AudioComponent; diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/ImageComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media_page/ImageComponent.tsx new file mode 100644 index 0000000000..e14dc65d51 --- /dev/null +++ b/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 = ({ mediaData }) => { + return ( +
+ test +
+ ); +}; + +export default ImageComponent; diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/MediaDataTypes.ts b/packages/fakeyou.com/src/v2/view/pages/media_page/MediaDataTypes.ts new file mode 100644 index 0000000000..cd22b4597f --- /dev/null +++ b/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; +} diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx new file mode 100644 index 0000000000..ec4dfd07c8 --- /dev/null +++ b/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
Loading...
; + } + + switch (dummyMediaData.media_type) { + case "audio": + return ; + case "video": + return ; + case "image": + return ; + default: + return
Unsupported media type
; + } + }; + + return ( +
+

{dummyMediaData.token}

+ {renderMediaComponent()} +
+ ); +}; + +export default MediaFilePage; diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/VideoComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media_page/VideoComponent.tsx new file mode 100644 index 0000000000..8cb2a83941 --- /dev/null +++ b/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 = ({ mediaData }) => { + return ( +
+ +
+ ); +}; + +export default VideoComponent; diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx index 8acbb7384a..39e36ceaba 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx @@ -434,46 +434,6 @@ function TtsResultViewPage(props: Props) {

{headingTitle}

- {/* Rate Result Buttons */} - {/* Commented out because not ready yet. */} - {/*
-
- - - - -
- - - - -
-
- -

- 1,518 likes -

-
-
*/}

- {/* Without wavesurfer, - */} -
{socialSharing}
@@ -517,12 +469,6 @@ function TtsResultViewPage(props: Props) {
- {/* - - - */}
Original text - {ttsInferenceResult.raw_inference_text} -
Audio creator {creatorDetails}