Skip to content

Commit f9978bb

Browse files
pdelfanpdelfan
committed
Merge branch 'preview'
2 parents 100ac01 + 9be4979 commit f9978bb

File tree

3 files changed

+39
-43
lines changed

3 files changed

+39
-43
lines changed

‎src/components/contentDisplay/profileHeader/ProfileHeader.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -219,13 +219,13 @@ export default function ProfileHeader(props: Props) {
219219

220220
{showAvatar && profile.avatar && (
221221
<Gallery
222-
images={profile.avatar}
222+
images={[{ src: profile.avatar }]}
223223
onClose={() => setShowAvatar(false)}
224224
/>
225225
)}
226226
{showBanner && profile.banner && (
227227
<Gallery
228-
images={profile.banner}
228+
images={[{ src: profile.banner }]}
229229
onClose={() => setShowBanner(false)}
230230
/>
231231
)}

‎src/components/dataDisplay/gallery/Gallery.tsx

+21-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Image from "next/image";
2-
import { AppBskyEmbedImages } from "@atproto/api";
32
import * as Dialog from "@radix-ui/react-dialog";
43
import { KeyboardEvent, useState, useEffect, useCallback } from "react";
54
import Button from "@/components/actions/button/Button";
@@ -10,15 +9,24 @@ import {
109
BiSolidCloudDownload,
1110
} from "react-icons/bi";
1211

12+
type GalleryImage = {
13+
src: string;
14+
alt?: string;
15+
aspectRatio?: {
16+
width: number;
17+
height: number;
18+
};
19+
};
20+
1321
interface Props {
14-
images: AppBskyEmbedImages.ViewImage[] | string;
22+
images: GalleryImage[];
1523
startingIndex?: number;
1624
onClose: () => void;
1725
}
1826

1927
export default function Gallery(props: Props) {
2028
const { images, startingIndex = 0, onClose } = props;
21-
const imageCount = Array.isArray(images) ? images.length : 0;
29+
const imageCount = images.length;
2230
const [currentIndex, setCurrentIndex] = useState(startingIndex);
2331

2432
const handleBackward = useCallback(() => {
@@ -47,13 +55,11 @@ export default function Gallery(props: Props) {
4755
break;
4856
}
4957
},
50-
[handleBackward, handleForward],
58+
[handleBackward, handleForward]
5159
);
5260

5361
const handleSaveImage = () => {
54-
const imageUrl = Array.isArray(images)
55-
? images[currentIndex].fullsize
56-
: images;
62+
const imageUrl = images[currentIndex].src;
5763
const a = document.createElement("a");
5864
a.href = imageUrl;
5965
a.click();
@@ -121,28 +127,14 @@ export default function Gallery(props: Props) {
121127
</Button>
122128
)}
123129

124-
{/* Image Display */}
125-
{Array.isArray(images) && (
126-
<Image
127-
src={images[currentIndex].fullsize}
128-
alt={images[currentIndex].alt}
129-
width={images[currentIndex].aspectRatio?.width ?? 900}
130-
height={images[currentIndex].aspectRatio?.height ?? 900}
131-
priority
132-
className="fixed inset-0 z-[60] mx-auto h-full w-fit object-contain"
133-
/>
134-
)}
135-
136-
{typeof images === "string" && (
137-
<Image
138-
src={images}
139-
alt={"Image"}
140-
width={900}
141-
height={900}
142-
priority
143-
className="fixed inset-0 z-[60] mx-auto h-full w-fit object-contain"
144-
/>
145-
)}
130+
<Image
131+
src={images[currentIndex].src}
132+
alt={images[currentIndex].alt ?? ""}
133+
width={images[currentIndex].aspectRatio?.width ?? 900}
134+
height={images[currentIndex].aspectRatio?.height ?? 900}
135+
priority
136+
className="fixed inset-0 z-[60] mx-auto h-full w-fit object-contain"
137+
/>
146138
</Dialog.Content>
147139
</Dialog.Portal>
148140
</Dialog.Root>

‎src/components/dataDisplay/postEmbed/ImageEmbed.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ interface Props {
1414
export default function ImageEmbed(props: Props) {
1515
const { content, depth } = props;
1616
const imageCount = content.images.length;
17-
const [showImage, setShowImage] = useState<number | undefined>(undefined);
17+
const [currentImage, setCurrentImage] = useState<number>();
1818

1919
const generateImageLayout = (
2020
count: number,
21-
images: AppBskyEmbedImages.ViewImage[],
21+
images: AppBskyEmbedImages.ViewImage[]
2222
) => {
2323
// adjust image grid layout based on number of images
2424
switch (count) {
@@ -36,7 +36,7 @@ export default function ImageEmbed(props: Props) {
3636
className="rounded-md h-full max-h-62 object-cover cursor-pointer hover:brightness-90 border border-skin-base"
3737
onClick={(e) => {
3838
e.stopPropagation();
39-
setShowImage(i);
39+
setCurrentImage(i);
4040
}}
4141
/>
4242
{image.alt && <AltTag text={image.alt} />}
@@ -60,7 +60,7 @@ export default function ImageEmbed(props: Props) {
6060
className="rounded-md object-cover h-full cursor-pointer hover:brightness-90 border border-skin-base"
6161
onClick={(e) => {
6262
e.stopPropagation();
63-
setShowImage(0);
63+
setCurrentImage(0);
6464
}}
6565
/>
6666
{images[2].alt && <AltTag text={images[2].alt} />}
@@ -78,7 +78,7 @@ export default function ImageEmbed(props: Props) {
7878
className="rounded-md object-cover w-full h-full cursor-pointer hover:brightness-90 border border-skin-base"
7979
onClick={(e) => {
8080
e.stopPropagation();
81-
setShowImage(1);
81+
setCurrentImage(1);
8282
}}
8383
/>
8484
{images[1].alt && <AltTag text={images[1].alt} />}
@@ -94,7 +94,7 @@ export default function ImageEmbed(props: Props) {
9494
className="rounded-md object-cover w-full h-full cursor-pointer hover:brightness-90 border border-skin-base"
9595
onClick={(e) => {
9696
e.stopPropagation();
97-
setShowImage(2);
97+
setCurrentImage(2);
9898
}}
9999
/>
100100
{images[2].alt && <AltTag text={images[2].alt} />}
@@ -117,7 +117,7 @@ export default function ImageEmbed(props: Props) {
117117
className="object-cover aspect-square rounded-md h-full max-h-64 cursor-pointer hover:brightness-90 border border-skin-base"
118118
onClick={(e) => {
119119
e.stopPropagation();
120-
setShowImage(i);
120+
setCurrentImage(i);
121121
}}
122122
/>
123123
{images[i].alt && <AltTag text={images[i].alt} />}
@@ -140,7 +140,7 @@ export default function ImageEmbed(props: Props) {
140140
className="rounded-md max-h-96 w-full object-cover cursor-pointer hover:brightness-90 border border-skin-base"
141141
onClick={(e) => {
142142
e.stopPropagation();
143-
setShowImage(0);
143+
setCurrentImage(0);
144144
}}
145145
/>
146146
{images[0].alt && <AltTag text={images[0].alt} />}
@@ -153,11 +153,15 @@ export default function ImageEmbed(props: Props) {
153153

154154
return (
155155
<>
156-
{showImage !== undefined && (
156+
{currentImage !== undefined && (
157157
<Gallery
158-
images={content.images}
159-
startingIndex={showImage}
160-
onClose={() => setShowImage(undefined)}
158+
images={content.images.map((img) => ({
159+
src: img.fullsize,
160+
alt: img.alt,
161+
aspectRatio: img.aspectRatio,
162+
}))}
163+
startingIndex={currentImage}
164+
onClose={() => setCurrentImage(undefined)}
161165
/>
162166
)}
163167
{depth < 2 && (

0 commit comments

Comments
 (0)