fix thumbnails loop duplication and animations

wix-incubator · Nov 28, 2023 · 02654d7 · 02654d7
1 parent d9b2a20
commit 02654d7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/gallery/src/components/gallery/proGallery/navigationPanel.js b/packages/gallery/src/components/gallery/proGallery/navigationPanel.js
@@ -68,7 +68,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: options[optionsMap.layoutParams.thumbnails.size],
               height: options[optionsMap.layoutParams.thumbnails.size],
@@ -94,7 +94,7 @@ class NavigationPanel extends React.Component {
                 }
                 data-key={thumbnailItem.id}
                 style={itemStyle}
-                onClick={() => this.scrollToThumbnail(idx)}
+                onClick={() => this.scrollToThumbnail(idx, activeIndex)}
               >
                 {thumbnailItem.type === 'video' &&
                   options[optionsMap.behaviourParams.item.video.enableThumbnailsPlayButton] && (

diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
@@ -268,10 +268,8 @@ class SlideshowView extends React.Component {
       );
 
       if (this.props.options.layoutParams_groups_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);
         }
       }
@@ -436,11 +434,23 @@ class SlideshowView extends React.Component {
     }
   };
 
+  findFirstIdx(itemIdx) {
+    const activeItem = this.props.galleryStructure.galleryItems[itemIdx];
+    const itemId = activeItem.itemId;
+    const firstItemInstance = this.props.galleryStructure.galleryItems.find((item) => item.itemId === itemId);
+    const firstItemInstanceIdx = firstItemInstance.idx;
+    return firstItemInstanceIdx;
+  }
+
   scrollToThumbnail(itemIdx, scrollDuration) {
     //not to confuse with this.props.actions.scrollToItem. this is used to replace it only for thumbnail items
 
-    this.props.actions.eventsListener(GALLERY_CONSTS.events.THUMBNAIL_CLICKED, this.props);
-    this.scrollToIndex({ itemIdx, scrollDuration });
+    const activeItemFirstIdx = this.findFirstIdx(this.state.activeIndex);
+    const firstTargetItemIdx = this.findFirstIdx(itemIdx);
+    const distance = firstTargetItemIdx - activeItemFirstIdx;
+    const targetIdx = this.state.activeIndex + distance;
+
+    this.scrollToIndex({ itemIdx: targetIdx, scrollDuration });
   }
 
   scrollToIndex({ itemIdx, scrollDuration }) {

diff --git a/packages/lib/src/core/helpers/thumbnailsLogic.ts b/packages/lib/src/core/helpers/thumbnailsLogic.ts
@@ -24,7 +24,7 @@ function calculateActiveIndexOffset({ activeIndex, prevActiveIndex, activeIndexO
 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);
@@ -109,6 +109,7 @@ function getThumbnailsData({
     height,
     thumbnailSizeWithSpacing,
     activeIndex: activeIndexWithOffset,
+    numberOfGalleryItems: galleryItems.length,
   });
 
   const thumbnailsStyleWithRTLCalc = isRTL
@@ -193,12 +194,14 @@ function getThumbnailsStyles({
   height,
   activeIndex,
   thumbnailSizeWithSpacing,
+  numberOfGalleryItems: numberOfItems,
 }: {
   horizontalThumbnails: boolean;
   width: number;
   height: number;
   activeIndex: number;
   thumbnailSizeWithSpacing: number;
+  numberOfGalleryItems: number;
 }): any {
   const baseStyle = {
     overflow: 'visible',
@@ -207,7 +210,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 {