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; +}