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 6c1298ee8..b3f53f95c 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 000000000..1a94a0e24 --- /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 000000000..e14dc65d5 --- /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 000000000..cd22b4597 --- /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 000000000..ec4dfd07c --- /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 000000000..8cb2a8394 --- /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 8acbb7384..39e36ceab 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 ec4dfd07c..d61fe378d 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 b3f53f95c..705249aba 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 d61fe378d..964f1afd3 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 f7c67981a..000000000 --- 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 ddc4db172..000000000 --- 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 964f1afd3..97037b4fd 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 705249aba..54d82b97d 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 000000000..8fd9d8ee3 --- /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 000000000..7d6daab7c --- /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 000000000..366853b1f --- /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 000000000..1d3483e02 --- /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 000000000..28ff89d7e --- /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 000000000..e8a1b251a --- /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 000000000..a2f59e40b --- /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 000000000..1ca5a2267 --- /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 000000000..2508b1458 --- /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 62682ba82..464328c66 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 f72841e45..9943d8b6f 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 1a94a0e24..dc2763baa 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 d262485b3..a6d6befc5 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 9a77a5247..667e86bdc 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 a0849337e..deacd02d1 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 4380c46c1..e9216c332 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 874167138..94946a02b 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 000000000..af52e438e --- /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 b2b3462e1..bd95287c7 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 667e86bdc..51c2a7f5f 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 12b7c816c..57d148974 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 25e1d4281..7b2f6ef07 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 f62b1cade..2dfedb1d2 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 331e47756..871b61037 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 51c2a7f5f..293483ab7 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 293483ab7..38919b74f 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 38919b74f..aad467ce7 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 bd95287c7..8e9056173 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 aad467ce7..6f5d974e2 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 7b2f6ef07..f86e65d2f 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 8e9056173..6f5f04790 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 6f5d974e2..3c3340148 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 6f5f04790..da4780ee4 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 a8ae3ca28..965c52dff 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 3c3340148..3aeaceb77 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 3aeaceb77..0c4be0b9d 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 459efd25f..6c55b60b5 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 000000000..a913fe44d --- /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 000000000..b104aeaa7 --- /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 000000000..29bdc1a7f --- /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 deacd02d1..3bd36b349 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 3c4ca809e..9feb2c887 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 958d05790..4b5cd6481 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 a6d6befc5..000000000 --- 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 4e55f7559..b09ee77ac 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 313b4c72f..786de72de 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 57d148974..38cea68bf 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