From 3cef2b140e32f38d7d639aaccae6e8dcfffc2b87 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 13 Oct 2023 20:10:57 +0700 Subject: [PATCH 01/26] media page test --- .../fakeyou.com/src/v2/view/PageContainer.tsx | 5 ++ .../view/pages/media_page/AudioComponent.tsx | 20 ++++++ .../view/pages/media_page/ImageComponent.tsx | 21 ++++++ .../view/pages/media_page/MediaDataTypes.ts | 18 +++++ .../v2/view/pages/media_page/MediaPage.tsx | 66 +++++++++++++++++++ .../view/pages/media_page/VideoComponent.tsx | 18 +++++ .../tts/tts_result_view/TtsResultViewPage.tsx | 54 --------------- 7 files changed, 148 insertions(+), 54 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/media_page/AudioComponent.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/media_page/ImageComponent.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/media_page/MediaDataTypes.ts create mode 100644 packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/media_page/VideoComponent.tsx 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) {
- {/* - - - */} From 6495a10fcadfeb446ab2a0423e4ad350b6a555c6 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 13 Oct 2023 20:39:49 +0700 Subject: [PATCH 02/26] update --- .../src/v2/view/pages/media_page/MediaPage.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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 index ec4dfd07c8..d61fe378da 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx @@ -6,16 +6,14 @@ import ImageComponent from "./ImageComponent"; const MediaFilePage = () => { const { token } = useParams(); - const [mediaData, setMediaData] = useState<{ - /* media data properties */ - } | null>(null); + const [mediaData, setMediaData] = useState<{} | 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 + token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", + media_type: "video", // Change to somthing like "video" or "image" to test different types public_bucket_path: - "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.wav", // Replace with actual URLs + "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs maybe_creator_user: { user_token: "u_00XGM6M2TE4J9", username: "hanashi", From 92133f2a4787e1cb769d1f3b70d37d4c17eafa76 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 13 Oct 2023 20:47:40 +0700 Subject: [PATCH 03/26] fixes --- packages/fakeyou.com/src/v2/view/PageContainer.tsx | 5 ++--- .../pages/{media_page => media}/AudioComponent.tsx | 0 .../pages/{media_page => media}/ImageComponent.tsx | 0 .../pages/{media_page => media}/MediaDataTypes.ts | 0 .../v2/view/pages/{media_page => media}/MediaPage.tsx | 4 ++-- .../pages/{media_page => media}/VideoComponent.tsx | 0 .../fakeyou.com/src/v2/view/pages/media/index.tsx | 3 --- .../fakeyou.com/src/v2/view/pages/media/media.tsx | 11 ----------- 8 files changed, 4 insertions(+), 19 deletions(-) rename packages/fakeyou.com/src/v2/view/pages/{media_page => media}/AudioComponent.tsx (100%) rename packages/fakeyou.com/src/v2/view/pages/{media_page => media}/ImageComponent.tsx (100%) rename packages/fakeyou.com/src/v2/view/pages/{media_page => media}/MediaDataTypes.ts (100%) rename packages/fakeyou.com/src/v2/view/pages/{media_page => media}/MediaPage.tsx (96%) rename packages/fakeyou.com/src/v2/view/pages/{media_page => media}/VideoComponent.tsx (100%) delete mode 100644 packages/fakeyou.com/src/v2/view/pages/media/index.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/media/media.tsx diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index b3f53f95c6..705249aba2 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -6,7 +6,6 @@ import { LoginPage } from "./pages/login/LoginPage"; import { ModerationFc } from "./pages/moderation/moderation_main/ModerationFc"; import { ModerationIpBanListFc } from "./pages/moderation/moderation_ip_ban_list/ModerationIpBanListFc"; import { ModerationViewIpBanFc } from "./pages/moderation/moderation_view_ip_ban/ModerationViewIpBanFc"; -import { Media } from "./pages/media"; import { LipsyncEditor } from "./pages/lipsync"; import { ProfileEditFc } from "./pages/profile/profile_edit/ProfileEditFc"; import { ProfilePage } from "./pages/profile/profile_view/ProfilePage"; @@ -90,7 +89,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"; +import MediaPage from "./pages/media/MediaPage"; interface Props { sessionWrapper: SessionWrapper; @@ -469,7 +468,7 @@ 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/AudioComponent.tsx similarity index 100% rename from packages/fakeyou.com/src/v2/view/pages/media_page/AudioComponent.tsx rename to packages/fakeyou.com/src/v2/view/pages/media/AudioComponent.tsx diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/ImageComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/ImageComponent.tsx similarity index 100% rename from packages/fakeyou.com/src/v2/view/pages/media_page/ImageComponent.tsx rename to packages/fakeyou.com/src/v2/view/pages/media/ImageComponent.tsx diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/MediaDataTypes.ts b/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts similarity index 100% rename from packages/fakeyou.com/src/v2/view/pages/media_page/MediaDataTypes.ts rename to packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx similarity index 96% rename from packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx rename to packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index d61fe378da..964f1afd3f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media_page/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -4,7 +4,7 @@ import AudioComponent from "./AudioComponent"; import VideoComponent from "./VideoComponent"; import ImageComponent from "./ImageComponent"; -const MediaFilePage = () => { +const MediaPage = () => { const { token } = useParams(); const [mediaData, setMediaData] = useState<{} | null>(null); @@ -61,4 +61,4 @@ const MediaFilePage = () => { ); }; -export default MediaFilePage; +export default MediaPage; diff --git a/packages/fakeyou.com/src/v2/view/pages/media_page/VideoComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/VideoComponent.tsx similarity index 100% rename from packages/fakeyou.com/src/v2/view/pages/media_page/VideoComponent.tsx rename to packages/fakeyou.com/src/v2/view/pages/media/VideoComponent.tsx diff --git a/packages/fakeyou.com/src/v2/view/pages/media/index.tsx b/packages/fakeyou.com/src/v2/view/pages/media/index.tsx deleted file mode 100644 index f7c67981af..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/media/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import media from './media'; - -export { media as Media }; diff --git a/packages/fakeyou.com/src/v2/view/pages/media/media.tsx b/packages/fakeyou.com/src/v2/view/pages/media/media.tsx deleted file mode 100644 index ddc4db1725..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/media/media.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -interface Props { - value?: any; -} - -export default function media({ value }: Props) { - return
-

Media

-
; -}; \ No newline at end of file From 7d436267d578f81d3f877d5f48d210f9d74b5d8b Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 14 Oct 2023 06:48:28 +0700 Subject: [PATCH 04/26] changes --- .../src/v2/view/pages/media/MediaPage.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 964f1afd3f..97037b4fd6 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -3,13 +3,14 @@ import { useParams } from "react-router-dom"; import AudioComponent from "./AudioComponent"; import VideoComponent from "./VideoComponent"; import ImageComponent from "./ImageComponent"; +import MediaData from "./MediaDataTypes"; const MediaPage = () => { - const { token } = useParams(); - const [mediaData, setMediaData] = useState<{} | null>(null); + const { token } = useParams<{ token: string }>(); + const [mediaData, setMediaData] = useState(null); // Dummy media data (replace with actual API data) - const dummyMediaData = { + let dummyMediaData = { token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", media_type: "video", // Change to somthing like "video" or "image" to test different types public_bucket_path: @@ -32,8 +33,8 @@ const MediaPage = () => { // Simulate API call useEffect(() => { setTimeout(() => { - setMediaData(dummyMediaData); // Replace with actual API data - }, 1000); // Simulated delay of 1 second + setMediaData(dummyMediaData); + }, 1000); }, [token]); const renderMediaComponent = () => { @@ -41,13 +42,13 @@ const MediaPage = () => { return
Loading...
; } - switch (dummyMediaData.media_type) { + switch (mediaData.media_type) { case "audio": - return ; + return ; case "video": - return ; + return ; case "image": - return ; + return ; default: return
Unsupported media type
; } @@ -55,7 +56,7 @@ const MediaPage = () => { return (
-

{dummyMediaData.token}

+

{mediaData?.token}

{renderMediaComponent()}
); From e4e7fa94b343f49cbd6ca113be72894706a55971 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 14 Oct 2023 07:17:53 +0700 Subject: [PATCH 05/26] loading and error states --- .../fakeyou.com/src/v2/view/PageContainer.tsx | 6 +- .../src/v2/view/pages/media/MediaPage.tsx | 86 +++++++++++-------- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 705249aba2..54d82b97d6 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -319,7 +319,7 @@ class PageContainer extends React.Component< - + @@ -467,10 +467,6 @@ class PageContainer extends React.Component< - - - - { +interface MediaPageProps { + sessionWrapper: SessionWrapper; +} + +// Dummy media data (replace with actual API data) +let dummyMediaData = { + token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", + media_type: "video", // Change to somthing like "video" or "image" to test different types + public_bucket_path: + "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // 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", +}; + +export default function MediaPage({ sessionWrapper }: MediaPageProps) { const { token } = useParams<{ token: string }>(); const [mediaData, setMediaData] = useState(null); - - // Dummy media data (replace with actual API data) - let dummyMediaData = { - token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", - media_type: "video", // Change to somthing like "video" or "image" to test different types - public_bucket_path: - "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // 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", - }; + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(false); // Simulate API call useEffect(() => { setTimeout(() => { - setMediaData(dummyMediaData); + //Check if token is valid + if (token !== dummyMediaData.token) { + //if invalid token, set error to true + setError(true); + setIsLoading(false); + } else { + setMediaData(dummyMediaData); + setIsLoading(false); + } }, 1000); }, [token]); - const renderMediaComponent = () => { - if (!mediaData) { - return
Loading...
; - } - - switch (mediaData.media_type) { + function renderMediaComponent(data: MediaData) { + switch (data.media_type) { case "audio": - return ; + return ; case "video": - return ; + return ; case "image": - return ; + return ; default: return
Unsupported media type
; } - }; + } + + if (isLoading) return
Loading...
; + if (error || !mediaData) return
Media not found
; return (

{mediaData?.token}

- {renderMediaComponent()} + {renderMediaComponent(mediaData)}
); -}; - -export default MediaPage; +} From ba31bf47f9ae0fa2ec53eeba3d43c597fadb9da1 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 14 Oct 2023 13:06:58 +0700 Subject: [PATCH 06/26] many new components --- .../common/Accordion/Accordion.scss | 44 +++++++ .../components/common/Accordion/Accordion.tsx | 79 +++++++++++++ .../src/components/common/Accordion/index.ts | 1 + .../common/DataTable/DataTable.scss | 31 +++++ .../components/common/DataTable/DataTable.tsx | 26 ++++ .../src/components/common/DataTable/index.tsx | 1 + .../components/common/Skeleton/Skeleton.scss | 37 ++++++ .../components/common/Skeleton/Skeleton.tsx | 13 ++ .../src/components/common/Skeleton/index.ts | 1 + .../layout/PageHeader/PageHeader.tsx | 2 +- .../fakeyou.com/src/scss/site-refresh.scss | 2 +- .../v2/view/pages/media/AudioComponent.tsx | 4 +- .../src/v2/view/pages/media/MediaPage.tsx | 111 ++++++++++++++++-- .../v2/view/pages/media/VideoComponent.tsx | 16 +-- 14 files changed, 345 insertions(+), 23 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/Accordion/Accordion.scss create mode 100644 packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx create mode 100644 packages/fakeyou.com/src/components/common/Accordion/index.ts create mode 100644 packages/fakeyou.com/src/components/common/DataTable/DataTable.scss create mode 100644 packages/fakeyou.com/src/components/common/DataTable/DataTable.tsx create mode 100644 packages/fakeyou.com/src/components/common/DataTable/index.tsx create mode 100644 packages/fakeyou.com/src/components/common/Skeleton/Skeleton.scss create mode 100644 packages/fakeyou.com/src/components/common/Skeleton/Skeleton.tsx create mode 100644 packages/fakeyou.com/src/components/common/Skeleton/index.ts diff --git a/packages/fakeyou.com/src/components/common/Accordion/Accordion.scss b/packages/fakeyou.com/src/components/common/Accordion/Accordion.scss new file mode 100644 index 0000000000..8fd9d8ee37 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Accordion/Accordion.scss @@ -0,0 +1,44 @@ +@import "scss/colours.scss"; + +.fy-accordion-item { + border: 1px solid rgba($white, 0.12); + border-radius: 5px; + overflow: hidden; +} + +.fy-accordion-header { + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + background-color: $secondary; + transition: all 0.2s ease; + + &.open { + background-color: lighten($secondary, 5%); + } +} + +.fy-accordion-content { + overflow: hidden; + background-color: lighten($panel, 4%); + + &.open { + opacity: 1; + max-height: 100%; + visibility: visible; + } +} + +.fy-accordion-content table { + width: 100%; +} + +.caret-icon { + transition: transform 0.2s ease; + transform-origin: center; +} + +.caret-rotated { + transform: rotate(180deg); +} diff --git a/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx b/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx new file mode 100644 index 0000000000..7d6daab7c6 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx @@ -0,0 +1,79 @@ +import React, { useState, useRef, useEffect } from "react"; +import "./Accordion.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; +import { animated, useSpring } from "@react-spring/web"; + +interface AccordionProps { + children: React.ReactNode; +} + +interface AccordionItemProps { + title: string; + defaultOpen?: boolean; + children: React.ReactNode; +} + +function AccordionItem({ + title, + defaultOpen = false, + children, +}: AccordionItemProps) { + const [isOpen, setIsOpen] = useState(defaultOpen); + const [contentHeight, setContentHeight] = useState( + defaultOpen ? undefined : 0 + ); + const contentRef = useRef(null); + + useEffect(() => { + if (isOpen && contentRef.current) { + setContentHeight(contentRef.current.scrollHeight); + } else { + setContentHeight(0); + } + }, [isOpen]); + + const heightProps = useSpring({ + height: `${contentHeight}px`, + from: { + height: defaultOpen ? "auto" : "0px", + config: { tension: 300, friction: 25 }, + }, + }); + + const contentOpacityProps = useSpring({ + opacity: isOpen ? 1 : 0, + config: { tension: 300, friction: 25 }, + }); + + return ( +
+
setIsOpen(!isOpen)} + > + {title} + + + +
+ + + {children} + + +
+ ); +} + +function Accordion({ children }: AccordionProps) { + return
{children}
; +} + +Accordion.Item = AccordionItem; + +export default Accordion; diff --git a/packages/fakeyou.com/src/components/common/Accordion/index.ts b/packages/fakeyou.com/src/components/common/Accordion/index.ts new file mode 100644 index 0000000000..366853b1f2 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Accordion/index.ts @@ -0,0 +1 @@ +export { default } from "./Accordion"; diff --git a/packages/fakeyou.com/src/components/common/DataTable/DataTable.scss b/packages/fakeyou.com/src/components/common/DataTable/DataTable.scss new file mode 100644 index 0000000000..1d3483e027 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/DataTable/DataTable.scss @@ -0,0 +1,31 @@ +@import "scss/colours.scss"; + +table { + margin-bottom: 0 !important; +} + +td { + padding: 8px 16px !important; +} + +.no-outer-border { + border: none !important; +} + +.no-outer-border > thead > tr > th:first-child, +.no-outer-border > tbody > tr > td:first-child { + border-left: none !important; +} + +.no-outer-border > thead > tr > th:last-child, +.no-outer-border > tbody > tr > td:last-child { + border-right: none !important; +} + +.no-outer-border > tbody > tr:last-child > td { + border-bottom: none !important; +} + +.data-table-property { + background-color: lighten($panel, 7%) !important; +} diff --git a/packages/fakeyou.com/src/components/common/DataTable/DataTable.tsx b/packages/fakeyou.com/src/components/common/DataTable/DataTable.tsx new file mode 100644 index 0000000000..28ff89d7e4 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/DataTable/DataTable.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import "./DataTable.scss"; + +type Data = { + property: string; + value: string; +}; + +interface DataTableProps { + data: Data[]; +} + +export default function DataTable({ data }: DataTableProps) { + return ( +
Original text - {ttsInferenceResult.raw_inference_text} -
Audio creator {creatorDetails}
+ + {data.map((row, index) => ( + + + + + ))} + +
{row.property}{row.value}
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/DataTable/index.tsx b/packages/fakeyou.com/src/components/common/DataTable/index.tsx new file mode 100644 index 0000000000..e8a1b251a1 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/DataTable/index.tsx @@ -0,0 +1 @@ +export { default } from "./DataTable"; diff --git a/packages/fakeyou.com/src/components/common/Skeleton/Skeleton.scss b/packages/fakeyou.com/src/components/common/Skeleton/Skeleton.scss new file mode 100644 index 0000000000..a2f59e40b5 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Skeleton/Skeleton.scss @@ -0,0 +1,37 @@ +@import "scss/colours.scss"; + +.skeleton { + background: linear-gradient( + -90deg, + rgba($white, 10%) 25%, + rgba(darken($white, 20%), 10%) 50%, + rgba($white, 10%) 75% + ); + background-size: 200% 100%; + animation: loading 1.5s infinite; + border-radius: 0.25rem; + width: 100%; + height: 1em; + display: inline-block; +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +.skeleton.rounded { + border-radius: 50%; +} + +.skeleton.medium { + width: 40%; +} + +.skeleton.short { + width: 20%; +} diff --git a/packages/fakeyou.com/src/components/common/Skeleton/Skeleton.tsx b/packages/fakeyou.com/src/components/common/Skeleton/Skeleton.tsx new file mode 100644 index 0000000000..1ca5a22671 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Skeleton/Skeleton.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import "./Skeleton.scss"; + +interface SkeletonProps { + type?: "full" | "medium" | "short"; + rounded?: boolean; +} + +export default function Skeleton({ type = "full", rounded }: SkeletonProps) { + const skeletonClass = `skeleton ${type} ${rounded && "rounded"}`; + + return
; +} diff --git a/packages/fakeyou.com/src/components/common/Skeleton/index.ts b/packages/fakeyou.com/src/components/common/Skeleton/index.ts new file mode 100644 index 0000000000..2508b14587 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Skeleton/index.ts @@ -0,0 +1 @@ +export { default } from "./Skeleton"; diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index 62682ba82d..464328c665 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -6,7 +6,7 @@ import Button from "components/common/Button"; interface PageHeaderProps { titleIcon?: IconDefinition; - title: string; + title: string | React.ReactNode; subText: string | React.ReactNode; full?: boolean; showButton?: boolean; diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index f72841e452..9943d8b6f9 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -1517,7 +1517,7 @@ textarea { padding-left: var(--bs-gutter-x, 1rem); margin-right: auto; margin-left: auto; - max-width: 1080px; + max-width: 1200px; border-radius: 0.5rem; } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/AudioComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/AudioComponent.tsx index 1a94a0e249..dc2763baad 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/AudioComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/AudioComponent.tsx @@ -8,8 +8,8 @@ interface AudioComponentProps { const AudioComponent: React.FC = ({ mediaData }) => { return ( -
-
From dc51b1ca1e11686c1b6a9b2d62edda9c8d0796d4 Mon Sep 17 00:00:00 2001 From: BFlat Date: Mon, 16 Oct 2023 23:33:07 +0700 Subject: [PATCH 16/26] mediadata interface update --- .../src/v2/view/pages/media/MediaDataTypes.ts | 12 ++++-- .../src/v2/view/pages/media/MediaPage.tsx | 40 +++++++++++-------- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts b/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts index d262485b3b..a6d6befc5d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts @@ -1,6 +1,12 @@ +export enum MediaType { + Audio = "audio", + Video = "video", + Image = "image", +} + export default interface MediaData { token: string; - media_type: string; + media_type: MediaType; public_bucket_path: string; maybe_creator_user: { user_token: string; @@ -16,6 +22,6 @@ export default interface MediaData { model_used: string; model_link: string; creator_set_visibility: string; - created_at: string; - updated_at: string; + created_at: Date; + updated_at: Date; } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 9a77a52473..667e86bdcb 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -3,7 +3,7 @@ import { Link, useParams } from "react-router-dom"; import MediaAudioComponent from "./MediaAudioComponent"; import MediaVideoComponent from "./MediaVideoComponent"; import MediaImageComponent from "./MediaImageComponent"; -import MediaData from "./MediaDataTypes"; +import MediaData, { MediaType } from "./MediaDataTypes"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import Container from "components/common/Container"; import Panel from "components/common/Panel"; @@ -33,7 +33,7 @@ interface MediaPageProps { // Dummy media data (replace with actual API data) let dummyMediaData = { token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", - media_type: "video", // Change to somthing like "video" or "image" to test different types + media_type: MediaType.Video, // Change to somthing like "video" or "image" to test different types public_bucket_path: "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs maybe_creator_user: { @@ -51,8 +51,8 @@ let dummyMediaData = { "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", model_link: "/tts/TM:6g1mfb9b6fb8", creator_set_visibility: "public", - created_at: "2023-05-12T07:49:53Z", - updated_at: "2023-05-12T07:49:53Z", + created_at: new Date("2023-05-12T07:49:53Z"), + updated_at: new Date("2023-05-12T07:49:53Z"), }; export default function MediaPage({ sessionWrapper }: MediaPageProps) { @@ -61,7 +61,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(false); - const timeCreated = useTimeAgo(mediaData?.created_at || ""); + const timeCreated = useTimeAgo(mediaData?.created_at.toISOString() || ""); // Simulate API call useEffect(() => { @@ -80,7 +80,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { function renderMediaComponent(data: MediaData) { switch (data.media_type) { - case "audio": + case MediaType.Audio: return (
@@ -89,18 +89,20 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { Audio Text -

{mediaData?.audio_text}

+

+ {mediaData?.audio_text && mediaData.audio_text} +

); - case "video": + case MediaType.Video: return (
); - case "image": + case MediaType.Image: return ; default: return
Unsupported media type
; @@ -154,8 +156,11 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { const audioDetails = [ { property: "Type", value: mediaData.media_type }, - { property: "Created at", value: mediaData.created_at }, - { property: "Visibility", value: mediaData.creator_set_visibility }, + { property: "Created at", value: mediaData.created_at.toString() }, + { + property: "Visibility", + value: mediaData.creator_set_visibility.toString(), + }, { property: "Model", value: mediaData.model_used, @@ -177,8 +182,11 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { const videoDetails = [ { property: "Type", value: mediaData.media_type }, - { property: "Created at", value: mediaData.created_at }, - { property: "Visibility", value: mediaData.creator_set_visibility }, + { property: "Created at", value: mediaData.created_at.toString() }, + { + property: "Visibility", + value: mediaData.creator_set_visibility.toString(), + }, ]; let pageTitle = "Result"; @@ -186,7 +194,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { let mediaDetails = undefined; switch (mediaData.media_type) { - case "audio": + case MediaType.Audio: pageTitle = "Audio Result"; pageSubText = mediaData.token; mediaDetails = ( @@ -195,7 +203,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { ); break; - case "video": + case MediaType.Video: pageTitle = "Video Result"; pageSubText = mediaData.token; mediaDetails = ( @@ -204,7 +212,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { ); break; - case "image": + case MediaType.Image: pageTitle = "Image Model"; pageSubText = "Image Model SubText"; break; From 099ffa4c76c9793772f37beca41818ab35451630 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Oct 2023 06:48:24 +0700 Subject: [PATCH 17/26] bootstrap changes and updates --- packages/fakeyou.com/package.json | 1 + packages/fakeyou.com/src/App.tsx | 16 ++- packages/fakeyou.com/src/index.tsx | 48 ++++---- .../src/scss/custom-bootstrap.scss | 11 ++ .../fakeyou.com/src/scss/site-refresh.scss | 17 +-- .../src/v2/view/pages/media/MediaPage.tsx | 108 +++++++++++++----- yarn.lock | 11 +- 7 files changed, 142 insertions(+), 70 deletions(-) create mode 100644 packages/fakeyou.com/src/scss/custom-bootstrap.scss diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index a0849337e4..deacd02d14 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -32,6 +32,7 @@ "@types/react-dom": "^16.9.8", "axios": "^0.21.0", "bulma": "^0.9.0", + "bootstrap": "5.1.3", "craco": "^0.0.3", "date-fns": "2.22.1", "framer-motion": "^6.5.1", diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 4380c46c10..e9216c3325 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -1,4 +1,5 @@ import "./AppNew.scss"; +import "scss/custom-bootstrap.scss"; import React from "react"; import { ApiConfig } from "@storyteller/components"; @@ -184,12 +185,15 @@ function newVocodes() { return discord || twitter || alphaCookie; } -function initInferenceJobsByCategoryMap() : Map { - let inferenceJobsByCategory = new Map(); - inferenceJobsByCategory.set(FrontendInferenceJobType.FaceAnimation, []); - inferenceJobsByCategory.set(FrontendInferenceJobType.TextToSpeech, []); - inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceConversion, []); - return inferenceJobsByCategory; +function initInferenceJobsByCategoryMap(): Map< + FrontendInferenceJobType, + InferenceJob[] +> { + let inferenceJobsByCategory = new Map(); + inferenceJobsByCategory.set(FrontendInferenceJobType.FaceAnimation, []); + inferenceJobsByCategory.set(FrontendInferenceJobType.TextToSpeech, []); + inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceConversion, []); + return inferenceJobsByCategory; } function isMacOs() { diff --git a/packages/fakeyou.com/src/index.tsx b/packages/fakeyou.com/src/index.tsx index 8741671386..94946a02b5 100644 --- a/packages/fakeyou.com/src/index.tsx +++ b/packages/fakeyou.com/src/index.tsx @@ -1,32 +1,40 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import * as serviceWorker from './serviceWorker'; -import AppTranslated from './AppTranslated'; +import React from "react"; +import ReactDOM from "react-dom"; +import * as serviceWorker from "./serviceWorker"; +import AppTranslated from "./AppTranslated"; -const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || ""); +const IS_IOS: boolean = /iPad|iPhone|iPod/.test(navigator.platform || ""); const enableSpectrograms = !IS_IOS; -const flashVocodesNotice = new URLSearchParams(window.location.search).has('vocodes'); +const flashVocodesNotice = new URLSearchParams(window.location.search).has( + "vocodes" +); -const designSystemClass = 'fakeyou-refresh'; +const designSystemClass = "fakeyou-refresh"; -document.getElementsByTagName('html')[0].classList.add(designSystemClass); +document.getElementsByTagName("html")[0].classList.add(designSystemClass); // We can't include Bootstrap CSS along with Bulma since some of the class names conflict. // TODO(echelon): Once ported, statically move CSS to "index.html". -const bootstrapCss = document.createElement("link"); -bootstrapCss.setAttribute("rel", "stylesheet"); -bootstrapCss.setAttribute("crossorigin", "anonymous"); -bootstrapCss.setAttribute("integrity", "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"); -bootstrapCss.setAttribute("href", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"); -document.getElementsByTagName("head")[0].appendChild(bootstrapCss); +// const bootstrapCss = document.createElement("link"); +// bootstrapCss.setAttribute("rel", "stylesheet"); +// bootstrapCss.setAttribute("crossorigin", "anonymous"); +// bootstrapCss.setAttribute("integrity", "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"); +// bootstrapCss.setAttribute("href", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"); +// document.getElementsByTagName("head")[0].appendChild(bootstrapCss); const bootstrapJs = document.createElement("script"); bootstrapJs.setAttribute("rel", "stylesheet"); bootstrapJs.setAttribute("crossorigin", "anonymous"); -bootstrapJs.setAttribute("integrity", "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"); -bootstrapJs.setAttribute("src", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"); +bootstrapJs.setAttribute( + "integrity", + "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" +); +bootstrapJs.setAttribute( + "src", + "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" +); document.getElementsByTagName("body")[0].appendChild(bootstrapJs); // NB: Posthog turned off for most users (anonymous users) due to cost. @@ -37,11 +45,11 @@ document.getElementsByTagName("body")[0].appendChild(bootstrapJs); ReactDOM.render( + enableSpectrograms={enableSpectrograms} + flashVocodesNotice={flashVocodesNotice} + /> , - document.getElementById('root') + document.getElementById("root") ); // If you want your app to work offline and load faster, you can change diff --git a/packages/fakeyou.com/src/scss/custom-bootstrap.scss b/packages/fakeyou.com/src/scss/custom-bootstrap.scss new file mode 100644 index 0000000000..af52e438e1 --- /dev/null +++ b/packages/fakeyou.com/src/scss/custom-bootstrap.scss @@ -0,0 +1,11 @@ +// Override the $spacers variable +$spacers: ( + 0: 0, + 1: 0.25rem, + 2: 0.5rem, + 3: 1rem, + 4: 1.75rem, + 5: 2rem, +); + +@import "~bootstrap/scss/bootstrap"; diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index b2b3462e19..bd95287c79 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -168,11 +168,6 @@ styles with important tags: padding-bottom: 0.4rem !important; } - .py-4 { - padding-top: 2rem !important; - padding-bottom: 2rem !important; - } - .lead { color: rgba($white, 0.8); font-size: 17px; @@ -288,6 +283,10 @@ styles with important tags: border-radius: 50px; } + .bg-panel { + background-color: lighten($panel, 1%); + } + .panel { position: relative; width: 100%; @@ -1481,10 +1480,6 @@ textarea { } } - .p-lg-4 { - padding: 2rem !important; - } - .lead { font-size: 18px; } @@ -1551,9 +1546,5 @@ textarea { height: 100%; border-radius: 0.5rem; } - - .p-md-4 { - padding: 2rem !important; - } } } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 667e86bdcb..51c2a7f5f8 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -111,31 +111,61 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { if (isLoading) return ( - - } - subText={} - /> - -
+ <> + +
+

+ +

+

+ +

+
+ + + +
+
+

+ +

+
+ +
+

+ +

+

+ +

+
+
+
+

+ +

-
-

- - -

- -

- - + + +
+ +

+ +

+

+ +

+ +
+ ); if (error || !mediaData) @@ -259,14 +289,29 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { // ); return ( - - - + <> + +
+

{pageTitle}

+

{pageSubText}

+
+ + +
-
+
{renderMediaComponent(mediaData)}
+ +
+

Comments

+ +
@@ -322,15 +367,18 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- - -

Comments

- - - + + +
+ +

Comments

+ + +
+ ); } diff --git a/yarn.lock b/yarn.lock index 12b7c816ce..57d148974a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4569,8 +4569,8 @@ __metadata: resolution: "@storyteller/root@workspace:." dependencies: "@react-spring/types": ^9.7.3 + bootstrap: 5.1.3 craco: ^0.0.3 - date-fns: 2.22.1 lerna: ^4.0.0 yarn: ^1.22.19 languageName: unknown @@ -7281,6 +7281,15 @@ __metadata: languageName: node linkType: hard +"bootstrap@npm:5.1.3": + version: 5.1.3 + resolution: "bootstrap@npm:5.1.3" + peerDependencies: + "@popperjs/core": ^2.10.2 + checksum: 301b5ed872efba061104cf22ac93568e3837867fb5527ab9326a51510fb752bd4883e1d488225c8be72f86d9d3a55ef5b166aa7fa62c2fdd077c3f05b65752f8 + languageName: node + linkType: hard + "brace-expansion@npm:^1.1.7": version: 1.1.11 resolution: "brace-expansion@npm:1.1.11" From 3abaeb5ff3e94aac549b1b296cea35bc0fb094da Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Oct 2023 07:01:25 +0700 Subject: [PATCH 18/26] panel component update --- .../src/components/common/Panel/Panel.tsx | 13 ++++----- .../layout/PageHeader/PageHeader.tsx | 2 +- .../PageHeaderModelView.tsx | 2 +- .../src/v2/view/pages/media/MediaPage.tsx | 28 ++++++++++--------- 4 files changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx index 25e1d4281e..7b2f6ef07b 100644 --- a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx +++ b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx @@ -5,18 +5,15 @@ interface PanelProps { padding?: boolean; mb?: boolean; mt?: boolean; - full?: boolean; } -export default function Panel({ children, padding, mb, mt, full }: PanelProps) { +export default function Panel({ children, padding, mb, mt }: PanelProps) { return ( -
-
- {children} -
+ > + {children}
); } diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index f62b1cade1..2dfedb1d2c 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -37,7 +37,7 @@ export default function PageHeader({ return (
- +
diff --git a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx index 331e477565..871b610374 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx @@ -35,7 +35,7 @@ export default function PageHeaderModelView({ return (
{view === "regular" && ( - +

diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 51c2a7f5f8..293483ab78 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -33,7 +33,7 @@ interface MediaPageProps { // Dummy media data (replace with actual API data) let dummyMediaData = { token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", - media_type: MediaType.Video, // Change to somthing like "video" or "image" to test different types + media_type: MediaType.Audio, // Change to somthing like "video" or "image" to test different types public_bucket_path: "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs maybe_creator_user: { @@ -82,7 +82,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { switch (data.media_type) { case MediaType.Audio: return ( -
+
@@ -97,7 +97,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { ); case MediaType.Video: return ( -
+
); @@ -298,9 +298,9 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { -
+
-
+
{renderMediaComponent(mediaData)}
@@ -370,14 +370,16 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- -

Comments

- - + + +

Comments

+ + +
); From 776fa078a0286490b5284262544056349aeef136 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Oct 2023 07:04:43 +0700 Subject: [PATCH 19/26] padding added to comments --- packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 293483ab78..38919b74f2 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -369,9 +369,9 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
-
+
- +

Comments

Date: Tue, 17 Oct 2023 07:05:42 +0700 Subject: [PATCH 20/26] default dummy data to video --- packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 38919b74f2..aad467ce72 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -33,7 +33,7 @@ interface MediaPageProps { // Dummy media data (replace with actual API data) let dummyMediaData = { token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", - media_type: MediaType.Audio, // Change to somthing like "video" or "image" to test different types + media_type: MediaType.Video, // Change to somthing like "video" or "image" to test different types public_bucket_path: "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs maybe_creator_user: { From 7566d8760c79164fe9175f0d6e4c2dddfbf97dc1 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Oct 2023 15:23:11 +0700 Subject: [PATCH 21/26] panel padding fixes --- .../fakeyou.com/src/scss/site-refresh.scss | 14 ++ .../src/v2/view/pages/media/MediaPage.tsx | 134 +++++++++--------- 2 files changed, 84 insertions(+), 64 deletions(-) diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index bd95287c79..8e90561738 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -299,6 +299,15 @@ styles with important tags: 0 10px 8px rgb(0 0 0 / 3%), 0 4px 4px rgb(0 0 0 / 2%), 0 2px 2px rgb(0 0 0 / 1%) !important; + &.panel-clear { + padding-left: 1rem; + padding-right: 1rem; + background-color: transparent; + border: none; + border-color: transparent !important; + box-shadow: none !important; + } + .panel-inner { background-color: lighten($panel, 4%); } @@ -1531,6 +1540,11 @@ textarea { .panel { border-radius: 0.5rem; + + &.panel-clear { + padding-left: 0rem; + padding-right: 0rem; + } } ul.patrons-list { diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index aad467ce72..6f5d974e22 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -97,8 +97,10 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { ); case MediaType.Video: return ( -
- +
+
+ +
); @@ -297,74 +299,78 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- -
-
-
- {renderMediaComponent(mediaData)} -
- -
-

Comments

- -
-
-
-
- -
- - {mediaData.maybe_creator_user.display_name} - - {timeCreated} + +
+
+
+
+ {renderMediaComponent(mediaData)}
-
-
-
+
+
+
+ +
+ + {mediaData.maybe_creator_user.display_name} + + {timeCreated} +
+
- - {mediaDetails} - {modMediaDetails} - +
+
+
+ + + {mediaDetails} + {modMediaDetails} + +
+
From 39ff6f036dcb6d9195e46fbf9968865a78044a11 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Oct 2023 15:28:32 +0700 Subject: [PATCH 22/26] comments padding --- packages/fakeyou.com/src/components/common/Panel/Panel.tsx | 2 +- packages/fakeyou.com/src/scss/site-refresh.scss | 1 + packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx index 7b2f6ef07b..f86e65d2f9 100644 --- a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx +++ b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx @@ -10,7 +10,7 @@ interface PanelProps { export default function Panel({ children, padding, mb, mt }: PanelProps) { return (
{children} diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 8e90561738..6f5f04790b 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -1540,6 +1540,7 @@ textarea { .panel { border-radius: 0.5rem; + border: 0px !important; &.panel-clear { padding-left: 0rem; diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 6f5d974e22..3c33401482 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -376,7 +376,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- +

Comments

Date: Tue, 17 Oct 2023 15:46:58 +0700 Subject: [PATCH 23/26] panel border css --- packages/fakeyou.com/src/scss/site-refresh.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 6f5f04790b..da4780ee4c 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -293,6 +293,8 @@ styles with important tags: background-color: $panel; border-color: #ffffff12 !important; border: 1px solid; + border-left: none; + border-right: none; border-radius: 0px; box-shadow: 0 0 0 1px rgba(0 0 0 / 16%), 0 70px 65px rgb(0 0 0 / 8%), 0 30px 30px rgb(0 0 0 / 7%), 0 15px 15px rgb(0 0 0 / 5%), @@ -1540,7 +1542,7 @@ textarea { .panel { border-radius: 0.5rem; - border: 0px !important; + border: 1px solid; &.panel-clear { padding-left: 0rem; From f7b05c3f7698c50bdacbc76f3f764e71816db7b9 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Oct 2023 23:02:16 +0700 Subject: [PATCH 24/26] container panel update --- .../components/common/Container/Container.tsx | 11 +- .../src/v2/view/pages/media/MediaPage.tsx | 159 ++++++++---------- 2 files changed, 79 insertions(+), 91 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Container/Container.tsx b/packages/fakeyou.com/src/components/common/Container/Container.tsx index a8ae3ca28e..965c52dff4 100644 --- a/packages/fakeyou.com/src/components/common/Container/Container.tsx +++ b/packages/fakeyou.com/src/components/common/Container/Container.tsx @@ -3,11 +3,13 @@ import React from "react"; interface ContainerProps { children: React.ReactNode; type?: "full" | "padded" | "panel"; + className?: string; } export default function PageContainer({ children, - type = "panel", + type = "full", + className = "", }: ContainerProps) { let containerClass = ""; @@ -19,12 +21,15 @@ export default function PageContainer({ containerClass = "container"; break; case "panel": - containerClass = ""; + containerClass = "container-panel"; break; default: containerClass = "container-fluid"; break; } - return
{children}
; + // Merge the classNames + const mergedClassNames = `${containerClass} ${className}`; + + return
{children}
; } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 3c33401482..3aeaceb770 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -23,8 +23,6 @@ import DataTable from "components/common/DataTable"; import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; import useTimeAgo from "hooks/useTimeAgo"; import { CommentComponent } from "v2/view/_common/comments/CommentComponent"; -// import { RatingButtons } from "v2/view/_common/ratings/RatingButtons"; -// import { RatingStats } from "v2/view/_common/ratings/RatingStats"; interface MediaPageProps { sessionWrapper: SessionWrapper; @@ -32,7 +30,7 @@ interface MediaPageProps { // Dummy media data (replace with actual API data) let dummyMediaData = { - token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", + token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", //-----access view at /media/m_v032bt6ecm0rwhebbhgdmk5rexf7cij to view this media media_type: MediaType.Video, // Change to somthing like "video" or "image" to test different types public_bucket_path: "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs @@ -89,9 +87,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { Audio Text
-

- {mediaData?.audio_text && mediaData.audio_text} -

+

{mediaData?.audio_text && mediaData.audio_text}

); @@ -117,10 +113,10 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {

- +

- +

@@ -281,95 +277,82 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { ); } - // const resultRatings = ( - //
- //
- // - //
- // - //
- // ); - return ( <> - -
-

{pageTitle}

-

{pageSubText}

-
+ +

{pageTitle}

+

{pageSubText}

 -
-
-
-
- {renderMediaComponent(mediaData)} -
- -
-

Comments

- -
+
+
+
+ {renderMediaComponent(mediaData)}
-
-
-
- -
- - {mediaData.maybe_creator_user.display_name} - - {timeCreated} -
-
-
-
+
+

Comments

+ +
+
+
+
+
+ +
+ + {mediaData.maybe_creator_user.display_name} + + {timeCreated}
- - - {mediaDetails} - {modMediaDetails} -
+ +
+
+
+ + + {mediaDetails} + {modMediaDetails} +
From bd6bd3b284e94f70849de5a5a375b71d39bb3989 Mon Sep 17 00:00:00 2001 From: BFlat Date: Wed, 18 Oct 2023 10:07:46 +0700 Subject: [PATCH 25/26] skeleton length change --- packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 3aeaceb770..0c4be0b9d3 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -132,7 +132,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {

- +

@@ -141,7 +141,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {

- +

@@ -156,7 +156,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {

- +

From 4f0079e715dc1e57bf93f9e92ae7e6bc5a68827e Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 18 Oct 2023 04:13:28 -0400 Subject: [PATCH 26/26] Hook up to API --- packages/components/src/api/ApiConfig.ts | 6 + .../src/api/_common/UserDetailsLight.ts | 17 +++ .../src/api/_common/enums/MediaFileType.ts | 6 + .../src/api/media_files/GetMediaFile.ts | 52 +++++++ packages/fakeyou.com/package.json | 2 +- .../view/pages/media/MediaAudioComponent.tsx | 8 +- .../v2/view/pages/media/MediaAudioPlayer.tsx | 10 +- .../src/v2/view/pages/media/MediaDataTypes.ts | 27 ---- .../view/pages/media/MediaImageComponent.tsx | 8 +- .../src/v2/view/pages/media/MediaPage.tsx | 130 +++++++----------- .../view/pages/media/MediaVideoComponent.tsx | 13 +- yarn.lock | 2 +- 12 files changed, 158 insertions(+), 123 deletions(-) create mode 100644 packages/components/src/api/_common/UserDetailsLight.ts create mode 100644 packages/components/src/api/_common/enums/MediaFileType.ts create mode 100644 packages/components/src/api/media_files/GetMediaFile.ts delete mode 100644 packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 459efd25f2..6c55b60b55 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/packages/components/src/api/ApiConfig.ts @@ -410,6 +410,12 @@ class ApiConfig { return `${this.getApiOrigin()}/voice_clone_requests/check`; } + // =============== Media Files =============== + + getMediaFile(mediaFileToken: string): string { + return `${this.getApiOrigin()}/v1/media_files/file/${mediaFileToken}`; + } + // =============== File Uploads =============== uploadAudio(): string { diff --git a/packages/components/src/api/_common/UserDetailsLight.ts b/packages/components/src/api/_common/UserDetailsLight.ts new file mode 100644 index 0000000000..a913fe44df --- /dev/null +++ b/packages/components/src/api/_common/UserDetailsLight.ts @@ -0,0 +1,17 @@ +/// A common type returned by several endpoints. +/// Basic information to display a user and their avatar. +export interface UserDetailsLight { + user_token: string, + /// Username (lowercase) + username: string, + /// Username with user-specified capitalization + display_name: string, + gravatar_hash: string, + default_avatar: DefaultAvatarInfo, + +} + +export interface DefaultAvatarInfo { + image_index: number, + color_index: number, +} diff --git a/packages/components/src/api/_common/enums/MediaFileType.ts b/packages/components/src/api/_common/enums/MediaFileType.ts new file mode 100644 index 0000000000..b104aeaa7b --- /dev/null +++ b/packages/components/src/api/_common/enums/MediaFileType.ts @@ -0,0 +1,6 @@ + +export enum MediaFileType { + Audio = "audio", + Video = "video", + Image = "image", +} diff --git a/packages/components/src/api/media_files/GetMediaFile.ts b/packages/components/src/api/media_files/GetMediaFile.ts new file mode 100644 index 0000000000..29bdc1a7fc --- /dev/null +++ b/packages/components/src/api/media_files/GetMediaFile.ts @@ -0,0 +1,52 @@ +import { ApiConfig } from "../ApiConfig"; +import { UserDetailsLight } from "../_common/UserDetailsLight"; +import { MediaFileType } from "../_common/enums/MediaFileType"; + +export interface MediaFile { + token: string, + media_type: MediaFileType, + public_bucket_path: string, + maybe_creator_user: UserDetailsLight | null, + creator_set_visibility: string, + created_at: Date, + updated_at: Date, +} + +export enum MediaFileLookupError { + NotFound, + ServerError, + FrontendError, +} + +export interface GetMediaFileResponse { + success: boolean, + media_file?: MediaFile, +} + +export async function GetMediaFile(mediaFileToken: string) : Promise { + const endpoint = new ApiConfig().getMediaFile(mediaFileToken); + + return await fetch(endpoint, { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + credentials: 'include', + }) + .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 }; + }); +} diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index deacd02d14..3bd36b3497 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -31,8 +31,8 @@ "@types/react": "^16.9.36", "@types/react-dom": "^16.9.8", "axios": "^0.21.0", - "bulma": "^0.9.0", "bootstrap": "5.1.3", + "bulma": "^0.9.0", "craco": "^0.0.3", "date-fns": "2.22.1", "framer-motion": "^6.5.1", diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx index 3c4ca809e6..9feb2c8878 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx @@ -1,17 +1,17 @@ -import MediaData from "./MediaDataTypes"; import React from "react"; import MediaAudioPlayer from "./MediaAudioPlayer"; +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile"; interface MediaAudioComponentProps { - mediaData: MediaData; + mediaFile: MediaFile; } export default function MediaAudioComponent({ - mediaData, + mediaFile, }: MediaAudioComponentProps) { return (
- +
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx index 958d05790b..4b5cd6481b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioPlayer.tsx @@ -4,7 +4,7 @@ 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 MediaData from "./MediaDataTypes"; +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile"; enum PlaybackSpeed { HALF, @@ -13,10 +13,10 @@ enum PlaybackSpeed { } interface MediaAudioPlayerProps { - mediaData: MediaData; + mediaFile: MediaFile; } -export default function MediaAudioPlayer({ mediaData }: MediaAudioPlayerProps) { +export default function MediaAudioPlayer({ mediaFile }: MediaAudioPlayerProps) { let [isPlaying, setIsPlaying] = useState(false); let [isRepeating, setIsRepeating] = useState(false); let [playbackSpeed, setPlaybackSpeed] = useState(PlaybackSpeed.NORMAL); @@ -40,12 +40,12 @@ export default function MediaAudioPlayer({ mediaData }: MediaAudioPlayerProps) { useEffect(() => { const audioLink = new BucketConfig().getGcsUrl( - mediaData.public_bucket_path + mediaFile.public_bucket_path ); if (waveSurfer) { waveSurfer.load(audioLink); } - }, [waveSurfer, mediaData]); + }, [waveSurfer, mediaFile]); useEffect(() => { if (waveSurfer) { diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts b/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts deleted file mode 100644 index a6d6befc5d..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaDataTypes.ts +++ /dev/null @@ -1,27 +0,0 @@ -export enum MediaType { - Audio = "audio", - Video = "video", - Image = "image", -} - -export default interface MediaData { - token: string; - media_type: MediaType; - 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; - }; - }; - audio_text: string; - model_used: string; - model_link: string; - creator_set_visibility: string; - created_at: Date; - updated_at: Date; -} diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaImageComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaImageComponent.tsx index 4e55f75596..b09ee77ac3 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaImageComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaImageComponent.tsx @@ -1,17 +1,17 @@ +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile"; import React from "react"; -import MediaData from "./MediaDataTypes"; interface MediaImageComponentProps { - mediaData: MediaData; + mediaFile: MediaFile; } export default function MediaImageComponent({ - mediaData, + mediaFile, }: MediaImageComponentProps) { return (
test(); - const [mediaData, setMediaData] = useState(null); + const [mediaFile, setMediaFile] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(false); - const timeCreated = useTimeAgo(mediaData?.created_at.toISOString() || ""); + const timeCreated = useTimeAgo(mediaFile?.created_at.toISOString() || ""); + + const getMediaFile = useCallback(async (mediaFileToken: string) => { + let result = await GetMediaFile(mediaFileToken); + if (result.media_file) { + setMediaFile(result.media_file); + setIsLoading(false); + } else { + setError(true); + setIsLoading(false); + } + }, []); - // Simulate API call useEffect(() => { - setTimeout(() => { - //Check if token is valid - if (token !== dummyMediaData.token) { - //if invalid token, set error to true - setError(true); - setIsLoading(false); - } else { - setMediaData(dummyMediaData); - setIsLoading(false); - } - }, 1000); - }, [token]); + getMediaFile(token); + }, [token, getMediaFile]); - function renderMediaComponent(data: MediaData) { - switch (data.media_type) { - case MediaType.Audio: + function renderMediaComponent(mediaFile: MediaFile) { + switch (mediaFile.media_type) { + case MediaFileType.Audio: return (
- +
Audio Text
-

{mediaData?.audio_text && mediaData.audio_text}

+ {/*

{mediaFile?.audio_text && mediaFile.audio_text}

*/}
); - case MediaType.Video: + case MediaFileType.Video: return (
- +
); - case MediaType.Image: - return ; + case MediaFileType.Image: + return ; default: return
Unsupported media type
; } @@ -166,7 +142,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { ); - if (error || !mediaData) + if (error || !mediaFile) return ( ); break; - case MediaType.Video: + case MediaFileType.Video: pageTitle = "Video Result"; - pageSubText = mediaData.token; + pageSubText = mediaFile.token; mediaDetails = ( ); break; - case MediaType.Image: + case MediaFileType.Image: pageTitle = "Image Model"; pageSubText = "Image Model SubText"; break; @@ -288,14 +264,14 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- {renderMediaComponent(mediaData)} + {renderMediaComponent(mediaFile)}

Comments

@@ -305,20 +281,20 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- {mediaData.maybe_creator_user.display_name} + {mediaFile.maybe_creator_user?.display_name} {timeCreated}
@@ -364,7 +340,7 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {

Comments

diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaVideoComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaVideoComponent.tsx index 313b4c72f5..786de72de2 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaVideoComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaVideoComponent.tsx @@ -1,16 +1,21 @@ +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile"; import React from "react"; -import MediaData from "./MediaDataTypes"; interface MediaVideoComponentProps { - mediaData: MediaData; + mediaFile: MediaFile; } export default function MediaVideoComponent({ - mediaData, + mediaFile, }: MediaVideoComponentProps) { + let mediaLink = new BucketConfig().getGcsUrl( + mediaFile.public_bucket_path + ); + return ( ); diff --git a/yarn.lock b/yarn.lock index 57d148974a..38cea68bf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4440,6 +4440,7 @@ __metadata: "@types/uuid": ^8.3.0 "@types/wavesurfer.js": ^5.2.0 axios: ^0.21.0 + bootstrap: 5.1.3 bulma: ^0.9.0 craco: ^0.0.3 date-fns: 2.22.1 @@ -4569,7 +4570,6 @@ __metadata: resolution: "@storyteller/root@workspace:." dependencies: "@react-spring/types": ^9.7.3 - bootstrap: 5.1.3 craco: ^0.0.3 lerna: ^4.0.0 yarn: ^1.22.19