From 4c258f44a1e3f203717cdf20d5c1b16c22d54bf7 Mon Sep 17 00:00:00 2001
From: IzaacAyelin <izaaca@wix.com>
Date: Mon, 27 May 2024 18:13:26 +0300
Subject: [PATCH] fix thumbnails duplication

---
 .../gallery/proGallery/navigationPanel.js         |  2 +-
 .../gallery/proGallery/slideshowView.js           | 15 +++++++++++----
 .../src/components/helpers/thumbnailsLogic.ts     |  7 +++++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/gallery/src/components/gallery/proGallery/navigationPanel.js b/packages/gallery/src/components/gallery/proGallery/navigationPanel.js
index 21db4c6d91..4ededecba7 100644
--- a/packages/gallery/src/components/gallery/proGallery/navigationPanel.js
+++ b/packages/gallery/src/components/gallery/proGallery/navigationPanel.js
@@ -83,7 +83,7 @@ class NavigationPanel extends React.Component {
           style={{ ...thumbnailsStyle }}
         >
           {items.map(({ thumbnailItem, location, idx }) => {
-            const highlighted = idx === activeIndex;
+            const highlighted = idx === activeIndex % items.length;
             const itemStyle = {
               width: thumbnailSize,
               height: thumbnailSize,
diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
index 089d6386b9..41be7fa93c 100644
--- a/packages/gallery/src/components/gallery/proGallery/slideshowView.js
+++ b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
@@ -306,10 +306,8 @@ class SlideshowView extends React.Component {
         this.props.options.groupSize === 1 &&
         !this.props.isScrollLessGallery
       ) {
-        const skipToSlide = this.skipFromSlide - this.props.totalItemsCount;
-
         if (nextItem >= this.skipFromSlide) {
-          nextItem = skipToSlide;
+          nextItem = utils.inRange(nextItem, this.props.totalItemsCount);
           await this.props.actions.scrollToItem(nextItem);
         }
       }
@@ -487,6 +485,12 @@ class SlideshowView extends React.Component {
     }
   };
 
+  getFirstIdx(itemIdx) {
+    const { galleryItems } = this.props.galleryStructure;
+    const activeItemId = galleryItems[itemIdx].itemId;
+    return galleryItems.find((item) => item.itemId === activeItemId).idx;
+  }
+
   scrollToThumbnail(itemIdx, scrollDuration) {
     //not to confuse with this.props.actions.scrollToItem. this is used to replace it only for thumbnail items
 
@@ -494,8 +498,11 @@ class SlideshowView extends React.Component {
       GALLERY_CONSTS.events.THUMBNAIL_CLICKED,
       this.props
     );
+    const activeIdx = this.state.activeIndex;
+    const targetIdx =
+      activeIdx + (this.getFirstIdx(itemIdx) - this.getFirstIdx(activeIdx));
     this.scrollToIndex({
-      itemIdx,
+      itemIdx: targetIdx,
       scrollDuration,
       isRTL: this.props.options.isRTL,
     });
diff --git a/packages/gallery/src/components/helpers/thumbnailsLogic.ts b/packages/gallery/src/components/helpers/thumbnailsLogic.ts
index ea14dfc4ad..2b3ba333b3 100644
--- a/packages/gallery/src/components/helpers/thumbnailsLogic.ts
+++ b/packages/gallery/src/components/helpers/thumbnailsLogic.ts
@@ -34,7 +34,7 @@ function calculateActiveIndexOffset({
 export function clearGalleryItems(items: any[], galleryItems: any[]): any[] {
   const clear = (list) =>
     utils
-      .uniqueBy(list, 'idx')
+      .uniqueBy(list, 'id')
       .filter((item) => item.idx !== undefined)
       .sort((a, b) => a.idx - b.idx);
   const clearedGalleryItems = clear(galleryItems);
@@ -117,6 +117,7 @@ export function getThumbnailsData({
     height,
     thumbnailSizeWithSpacing,
     activeIndex: activeIndexWithOffset,
+    itemsCount: galleryItems.length,
   });
 
   const thumbnailsStyleWithRTLCalc = isRTL
@@ -201,12 +202,14 @@ function getThumbnailsStyles({
   height,
   activeIndex,
   thumbnailSizeWithSpacing,
+  itemsCount: numberOfItems,
 }: {
   horizontalThumbnails: boolean;
   width: number;
   height: number;
   activeIndex: number;
   thumbnailSizeWithSpacing: number;
+  itemsCount: number;
 }): CSSProperties {
   const baseStyle = {
     overflow: 'visible',
@@ -215,7 +218,7 @@ function getThumbnailsStyles({
   };
   const size = horizontalThumbnails ? width : height;
   const unit = horizontalThumbnails ? 'left' : 'top';
-  const distance = thumbnailSizeWithSpacing * activeIndex;
+  const distance = thumbnailSizeWithSpacing * (activeIndex % numberOfItems);
   const initialCenter = size / 2 - thumbnailSizeWithSpacing / 2;
 
   return {