Display videos on memory page

src/api/memories.ts

@@ -1,54 +1,47 @@
-import {
-  memoriesLink,
-  memoriesPhotosLink,
-  memoriesThumbnailLink,
-} from '@global/global';
+import type { Photo } from 'react-photo-album/*';
+import type { Slide } from 'yet-another-react-lightbox';
 
-export type MemoryImage = {
-  name: string;
+import { memoriesLink } from '@global/global';
+
+export type ApiReturnType = {
+  type: 'image' | 'video';
   src: string;
-  date: Date;
+  thumbnail: string;
+  name: string;
+  date: string;
   location: [number, number] | null;
   width: number;
   height: number;
 };
 
 export async function getImageMetadata(): Promise<
-  [metadata: MemoryImage[], thumbnailMetadata: MemoryImage[]]
+  [metadata: Slide[], thumbnailMetadata: Photo[]]
 > {
   const response = await fetch(memoriesLink + 'image_metadata.json');
-  const json = (await response.json()) as {
-    [key: string]: unknown;
-    name: string;
-    date: string;
-  }[];
+  const json = (await response.json()) as ApiReturnType[];
 
-  // Convert the date string to a Date object
-  let imageData: MemoryImage[] = json.map(
-    (img) =>
-      ({
-        ...img,
-        date: new Date(
-          img.date.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3')
-        ),
-        src: memoriesPhotosLink + img.name,
-      }) as MemoryImage
-  );
+  json.reverse();
 
-  let thumbnailImageData: MemoryImage[] = json.map(
-    (img) =>
-      ({
-        ...img,
-        date: new Date(
-          img.date.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3')
-        ),
-        src: memoriesThumbnailLink + img.name,
-      }) as MemoryImage
-  );
+  // Convert the date string to a Date object
+  const imageData: Slide[] = json.map((img) => ({
+    ...img,
+    type: img.type,
+    date: new Date(img.date.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3')),
+    src: memoriesLink + img.src,
+    sources: [
+      {
+        src: memoriesLink + img.src,
+        type: 'video/' + img.name.split('.').pop(),
+      },
+    ],
+  }));
 
-  imageData = imageData.sort((a, b) => b.date.getTime() - a.date.getTime());
-  thumbnailImageData = thumbnailImageData.sort(
-    (a, b) => b.date.getTime() - a.date.getTime()
-  );
+  const thumbnailImageData: Photo[] = json.map((img) => ({
+    ...img,
+    date: new Date(img.date.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3')),
+    src: memoriesLink + img.thumbnail,
+    width: img.width ?? 0,
+    height: img.height ?? 0,
+  }));
   return [imageData, thumbnailImageData];
 }

src/components/memories/memories.tsx

@@ -1,18 +1,20 @@
 import { useEffect, useState } from 'react';
+import type { Photo } from 'react-photo-album';
 import { RowsPhotoAlbum } from 'react-photo-album';
 import 'react-photo-album/rows.css';
 import { useNavigate } from 'react-router';
+import type { Slide } from 'yet-another-react-lightbox';
 import { Lightbox } from 'yet-another-react-lightbox';
+import Video from 'yet-another-react-lightbox/plugins/video';
 import 'yet-another-react-lightbox/styles.css';
 
-import type { MemoryImage } from '@api/memories';
 import { getImageMetadata } from '@api/memories';
 
 export default function Memories() {
   const [index, setIndex] = useState<number>(-1);
 
-  const [metadata, setMetadata] = useState<MemoryImage[]>([]);
-  const [thumbnailMetadata, setThumbnailMetadata] = useState<MemoryImage[]>([]);
+  const [metadata, setMetadata] = useState<Slide[]>([]);
+  const [thumbnailMetadata, setThumbnailMetadata] = useState<Photo[]>([]);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -48,6 +50,8 @@ export default function Memories() {
         />
       </div>
       <Lightbox
+        plugins={[Video]}
+        video={{ autoPlay: true }}
         index={index}
         slides={metadata}
         open={index >= 0}

src/global/global.ts

@@ -3,8 +3,6 @@ export const assetUrl = homepageUrl + 'owenmoogk/';
 export const resumeLink = assetUrl + 'resume/resume.pdf';
 export const extracurricularsLink = assetUrl + 'extracurriculars.pdf';
 export const memoriesLink = homepageUrl + 'owenmoogk.github.io-memories/';
-export const memoriesPhotosLink = memoriesLink + 'photos/';
-export const memoriesThumbnailLink = memoriesPhotosLink + 'thumbnails/';
 export const blogLink = 'https://owenmoogk.github.io/blogs';
 
 export const linkedIn = 'https://linkedin.com/in/owenmoogk';