diff --git a/packages/components/src/api/media_files/GetMedia.ts b/packages/components/src/api/media_files/GetMedia.ts index 1e005058b3..1fd37c665a 100644 --- a/packages/components/src/api/media_files/GetMedia.ts +++ b/packages/components/src/api/media_files/GetMedia.ts @@ -8,6 +8,7 @@ export interface MediaFile { token: string; media_type: MediaFileType; public_bucket_path: string; + maybe_batch_token: string; maybe_creator_user: UserDetailsLight | null; creator_set_visibility: string; created_at: Date; @@ -25,11 +26,17 @@ export interface MediaFile { export interface GetMediaRequest {} export interface GetMediaResponse { - success: boolean, - media_file?: MediaFile + success: boolean; + media_file?: MediaFile; } -export const GetMedia = MakeRequest({ +export const GetMedia = MakeRequest< + string, + GetMediaRequest, + GetMediaResponse, + {} +>({ method: "GET", - routingFunction: (mediaFileToken: string) => `/v1/media_files/file/${mediaFileToken}`, -}); \ No newline at end of file + routingFunction: (mediaFileToken: string) => + `/v1/media_files/file/${mediaFileToken}`, +}); diff --git a/packages/components/src/api/media_files/GetMediaBatchImages.ts b/packages/components/src/api/media_files/GetMediaBatchImages.ts new file mode 100644 index 0000000000..8fbb96042a --- /dev/null +++ b/packages/components/src/api/media_files/GetMediaBatchImages.ts @@ -0,0 +1,22 @@ +import MakeRequest from "../MakeRequest"; +import { MediaFile } from "./GetMedia"; + +export interface GetMediaBatchImagesRequest {} + +export interface GetMediaBatchImagesResponse { + success: boolean; + results: MediaFile[]; +} + +export interface GetMediaBatchImagesParams {} + +export const GetMediaBatchImages = MakeRequest< + string, + GetMediaBatchImagesRequest, + GetMediaBatchImagesResponse, + GetMediaBatchImagesParams +>({ + method: "GET", + routingFunction: (batchToken: string) => + `/v1/media_files/batch/${batchToken}`, +}); diff --git a/packages/components/src/api/media_files/GetMediaByUser.ts b/packages/components/src/api/media_files/GetMediaByUser.ts index 340b623620..d5de1230b7 100644 --- a/packages/components/src/api/media_files/GetMediaByUser.ts +++ b/packages/components/src/api/media_files/GetMediaByUser.ts @@ -1,21 +1,26 @@ import MakeRequest from "../MakeRequest"; import { MediaFile } from "./GetMedia"; -import { MediaFileType } from "../_common/enums/MediaFileType"; import { Pagination } from "../_common/SharedFetchTypes"; export interface GetMediaRequest {} export interface GetMediaListResponse { - pagination: Pagination, - success: boolean, - results: MediaFile[] + pagination: Pagination; + success: boolean; + results: MediaFile[]; } export interface GetMediaParams { - page_index: number, + page_index: number; } -export const GetMediaByUser = MakeRequest({ +export const GetMediaByUser = MakeRequest< + string, + GetMediaRequest, + GetMediaListResponse, + GetMediaParams +>({ method: "GET", - routingFunction: (userToken: string) => `/v1/media_files/list/user/${userToken}`, -}); \ No newline at end of file + routingFunction: (userToken: string) => + `/v1/media_files/list/user/${userToken}`, +}); 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 7c2be2cb1a..9bfa8e0474 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; import MediaAudioComponent from "./MediaAudioComponent"; import MediaVideoComponent from "./MediaVideoComponent"; @@ -36,6 +36,7 @@ import SdCoverImagePanel from "../weight/cover_image_panels/SdCoverImagePanel"; import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory"; import Iframe from "react-iframe"; import SdBatchMediaPanel from "./components/SdBatchMediaPanel/SdBatchMediaPanel"; +import { GetMediaBatchImages } from "@storyteller/components/src/api/media_files/GetMediaBatchImages"; export default function MediaPage() { const { user } = useSession(); @@ -47,11 +48,31 @@ export default function MediaPage() { ratings.gather({ res, key: "token" }); }, }); + const batchToken = mediaFile?.maybe_batch_token; + const [images, setImages] = useState([]); const timeCreated = moment(mediaFile?.created_at || "").fromNow(); const dateCreated = moment(mediaFile?.created_at || "").format("LLL"); const [buttonLabel, setButtonLabel] = useState("Copy"); + useEffect(() => { + if (batchToken) { + GetMediaBatchImages(batchToken, {}, {}) + .then(response => { + if (response.success) { + const imageUrls = response.results.map(result => + bucketConfig.getGcsUrl(result.public_bucket_path) + ); + setImages(imageUrls); + } else { + console.error("Failed to fetch batch images"); + } + }) + .catch(err => console.error("Error fetching batch images:", err)); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [batchToken]); + function renderMediaComponent(mediaFile: MediaFile) { switch (mediaFile.media_type) { case MediaFileType.Audio: @@ -92,25 +113,15 @@ export default function MediaPage() { ); case MediaFileType.Image: - const one = false; - const multi = one ? false : true; - let sdMediaImage = "/images/avatars/default-pfp.png"; - if (mediaFile.public_bucket_path) { - sdMediaImage = bucketConfig.getGcsUrl(mediaFile.public_bucket_path); - } - - //Replace this with images from btach media endpoint - const images = [ - "/images/test/castle-1.png", - "/images/test/castle-2.png", - ]; + const one = images.length === 1; + let sdMediaImage = one ? images[0] : "/images/avatars/default-pfp.png"; return ( <> - {!multi ? ( - - ) : ( + {!one ? ( + ) : ( + )} );