From 2146b661aab7f742c2a6ad056bb881aa51355800 Mon Sep 17 00:00:00 2001
From: futurGH <me@futuristick.ca>
Date: Mon, 13 Nov 2023 23:04:50 -0500
Subject: [PATCH] Update current image index on product gallery slide

---
 src/components/product/ProductGallery.client.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/product/ProductGallery.client.tsx b/src/components/product/ProductGallery.client.tsx
index 52322a5..1dd9dc0 100644
--- a/src/components/product/ProductGallery.client.tsx
+++ b/src/components/product/ProductGallery.client.tsx
@@ -1,11 +1,11 @@
 import clsx from "clsx";
+import { RefObject, useState } from "react";
 import ImageGallery, { type ReactImageGalleryItem } from "react-image-gallery";
 import { ExpandIcon } from "../../assets/icons/expand";
 import { MinimizeIcon } from "../../assets/icons/minimize";
 import { PrintFillIcon } from "../../assets/icons/print-fill";
 import { MediaContentType } from "../../graphql/storefront.generated";
 import type { MediaFragment, MediaImage } from "../../graphql/storefront.generated";
-import type { RefObject } from "react";
 
 interface ProductGalleryProps {
 	media: Array<MediaFragment>;
@@ -44,7 +44,9 @@ export function ProductGallery({ media, galleryRef }: ProductGalleryProps) {
 			thumbnailWidth: previewImage?.width || undefined,
 			thumbnailAlt: previewImage?.altText || undefined,
 		}));
-	const currentImageIsRender = items[galleryRef.current?.getCurrentIndex() ?? -1]?.originalAlt?.startsWith("RENDER:");
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const currentImage = items[currentIndex];
+	const currentImageIsRender = currentImage?.originalAlt?.startsWith("RENDER:");
 	return (
 		<div className="relative h-fit w-full md:mt-16">
 			{currentImageIsRender ? <RenderBadge /> : null}
@@ -54,6 +56,7 @@ export function ProductGallery({ media, galleryRef }: ProductGalleryProps) {
 				lazyLoad={true}
 				showNav={false}
 				showPlayButton={false}
+				onBeforeSlide={(currentIndex) => setCurrentIndex(currentIndex)}
 				renderFullscreenButton={(onClick, isFullscreen) => {
 					const FullscreenIcon = isFullscreen ? MinimizeIcon : ExpandIcon;
 					return (