Merge branch 'preview'

Author: pdelfan

src/components/contentDisplay/profileHeader/ProfileHeader.tsx

@@ -219,13 +219,13 @@ export default function ProfileHeader(props: Props) {
 
           {showAvatar && profile.avatar && (
             <Gallery
-              images={profile.avatar}
+              images={[{ src: profile.avatar }]}
               onClose={() => setShowAvatar(false)}
             />
           )}
           {showBanner && profile.banner && (
             <Gallery
-              images={profile.banner}
+              images={[{ src: profile.banner }]}
               onClose={() => setShowBanner(false)}
             />
           )}

src/components/dataDisplay/gallery/Gallery.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import { AppBskyEmbedImages } from "@atproto/api";
 import * as Dialog from "@radix-ui/react-dialog";
 import { KeyboardEvent, useState, useEffect, useCallback } from "react";
 import Button from "@/components/actions/button/Button";
@@ -10,15 +9,24 @@ import {
   BiSolidCloudDownload,
 } from "react-icons/bi";
 
+type GalleryImage = {
+  src: string;
+  alt?: string;
+  aspectRatio?: {
+    width: number;
+    height: number;
+  };
+};
+
 interface Props {
-  images: AppBskyEmbedImages.ViewImage[] | string;
+  images: GalleryImage[];
   startingIndex?: number;
   onClose: () => void;
 }
 
 export default function Gallery(props: Props) {
   const { images, startingIndex = 0, onClose } = props;
-  const imageCount = Array.isArray(images) ? images.length : 0;
+  const imageCount = images.length;
   const [currentIndex, setCurrentIndex] = useState(startingIndex);
 
   const handleBackward = useCallback(() => {
@@ -47,13 +55,11 @@ export default function Gallery(props: Props) {
           break;
       }
     },
-    [handleBackward, handleForward],
+    [handleBackward, handleForward]
   );
 
   const handleSaveImage = () => {
-    const imageUrl = Array.isArray(images)
-      ? images[currentIndex].fullsize
-      : images;
+    const imageUrl = images[currentIndex].src;
     const a = document.createElement("a");
     a.href = imageUrl;
     a.click();
@@ -121,28 +127,14 @@ export default function Gallery(props: Props) {
             </Button>
           )}
 
-          {/* Image Display */}
-          {Array.isArray(images) && (
-            <Image
-              src={images[currentIndex].fullsize}
-              alt={images[currentIndex].alt}
-              width={images[currentIndex].aspectRatio?.width ?? 900}
-              height={images[currentIndex].aspectRatio?.height ?? 900}
-              priority
-              className="fixed inset-0 z-[60] mx-auto h-full w-fit object-contain"
-            />
-          )}
-
-          {typeof images === "string" && (
-            <Image
-              src={images}
-              alt={"Image"}
-              width={900}
-              height={900}
-              priority
-              className="fixed inset-0 z-[60] mx-auto h-full w-fit object-contain"
-            />
-          )}
+          <Image
+            src={images[currentIndex].src}
+            alt={images[currentIndex].alt ?? ""}
+            width={images[currentIndex].aspectRatio?.width ?? 900}
+            height={images[currentIndex].aspectRatio?.height ?? 900}
+            priority
+            className="fixed inset-0 z-[60] mx-auto h-full w-fit object-contain"
+          />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

src/components/dataDisplay/postEmbed/ImageEmbed.tsx

@@ -14,11 +14,11 @@ interface Props {
 export default function ImageEmbed(props: Props) {
   const { content, depth } = props;
   const imageCount = content.images.length;
-  const [showImage, setShowImage] = useState<number | undefined>(undefined);
+  const [currentImage, setCurrentImage] = useState<number>();
 
   const generateImageLayout = (
     count: number,
-    images: AppBskyEmbedImages.ViewImage[],
+    images: AppBskyEmbedImages.ViewImage[]
   ) => {
     // adjust image grid layout based on number of images
     switch (count) {
@@ -36,7 +36,7 @@ export default function ImageEmbed(props: Props) {
                   className="rounded-md h-full max-h-62 object-cover cursor-pointer hover:brightness-90 border border-skin-base"
                   onClick={(e) => {
                     e.stopPropagation();
-                    setShowImage(i);
+                    setCurrentImage(i);
                   }}
                 />
                 {image.alt && <AltTag text={image.alt} />}
@@ -60,7 +60,7 @@ export default function ImageEmbed(props: Props) {
                     className="rounded-md object-cover h-full cursor-pointer hover:brightness-90 border border-skin-base"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setShowImage(0);
+                      setCurrentImage(0);
                     }}
                   />
                   {images[2].alt && <AltTag text={images[2].alt} />}
@@ -78,7 +78,7 @@ export default function ImageEmbed(props: Props) {
                     className="rounded-md object-cover w-full h-full cursor-pointer hover:brightness-90 border border-skin-base"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setShowImage(1);
+                      setCurrentImage(1);
                     }}
                   />
                   {images[1].alt && <AltTag text={images[1].alt} />}
@@ -94,7 +94,7 @@ export default function ImageEmbed(props: Props) {
                     className="rounded-md object-cover w-full h-full cursor-pointer hover:brightness-90 border border-skin-base"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setShowImage(2);
+                      setCurrentImage(2);
                     }}
                   />
                   {images[2].alt && <AltTag text={images[2].alt} />}
@@ -117,7 +117,7 @@ export default function ImageEmbed(props: Props) {
                   className="object-cover aspect-square rounded-md h-full max-h-64 cursor-pointer hover:brightness-90 border border-skin-base"
                   onClick={(e) => {
                     e.stopPropagation();
-                    setShowImage(i);
+                    setCurrentImage(i);
                   }}
                 />
                 {images[i].alt && <AltTag text={images[i].alt} />}
@@ -140,7 +140,7 @@ export default function ImageEmbed(props: Props) {
                   className="rounded-md max-h-96 w-full object-cover cursor-pointer hover:brightness-90 border border-skin-base"
                   onClick={(e) => {
                     e.stopPropagation();
-                    setShowImage(0);
+                    setCurrentImage(0);
                   }}
                 />
                 {images[0].alt && <AltTag text={images[0].alt} />}
@@ -153,11 +153,15 @@ export default function ImageEmbed(props: Props) {
 
   return (
     <>
-      {showImage !== undefined && (
+      {currentImage !== undefined && (
         <Gallery
-          images={content.images}
-          startingIndex={showImage}
-          onClose={() => setShowImage(undefined)}
+          images={content.images.map((img) => ({
+            src: img.fullsize,
+            alt: img.alt,
+            aspectRatio: img.aspectRatio,
+          }))}
+          startingIndex={currentImage}
+          onClose={() => setCurrentImage(undefined)}
         />
       )}
       {depth < 2 && (