media batch carousel endpoint binding

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<string, GetMediaRequest, GetMediaResponse,{}>({
+export const GetMedia = MakeRequest<
+  string,
+  GetMediaRequest,
+  GetMediaResponse,
+  {}
+>({
   method: "GET",
-  routingFunction: (mediaFileToken: string) => `/v1/media_files/file/${mediaFileToken}`,
-});
+  routingFunction: (mediaFileToken: string) =>
+    `/v1/media_files/file/${mediaFileToken}`,
+});

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}`,
+});

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<string, GetMediaRequest, GetMediaListResponse, GetMediaParams>({
+export const GetMediaByUser = MakeRequest<
+  string,
+  GetMediaRequest,
+  GetMediaListResponse,
+  GetMediaParams
+>({
   method: "GET",
-  routingFunction: (userToken: string) => `/v1/media_files/list/user/${userToken}`,
-});
+  routingFunction: (userToken: string) =>
+    `/v1/media_files/list/user/${userToken}`,
+});

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<string[]>([]);
 
   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 ? (
-              <SdCoverImagePanel src={sdMediaImage} />
-            ) : (
+            {!one ? (
               <SdBatchMediaPanel images={images} />
+            ) : (
+              <SdCoverImagePanel src={sdMediaImage} />
             )}
           </>
         );