@thefittingroom/shop-ui 3.0.0-alpha-5 → 3.0.0-alpha-6

package/dist/esm/components/Vto.d.ts

@@ -1,6 +1,8 @@
 export declare class VtoComponent {
     private readonly vtoMainDivId;
     private isInit;
+    private currentSliderValue;
+    private slider;
     constructor(vtoMainDivId: string);
     init(): void;
     onNewFramesReady(frames: string[]): void;

package/dist/esm/components/slider.d.ts

@@ -1,3 +1,3 @@
 export declare const InitImageSlider: (sliderID: string, onChange: (slider: HTMLInputElement, imageUrl: string) => void) => {
-    Load(imageURLs: string[]): Error | (() => void);
+    Load(imageURLs: string[], initialValue?: number): Error | (() => void);
 };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v3.0.0-alpha-5 (2025-04-18T16:10:37.729Z)
+* thefittingroom v3.0.0-alpha-6 (2025-04-18T16:48:31.249Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -23,13 +23,13 @@ const InitImageSlider = (sliderID, onChange) => {
         throw new Error(`Slider with id ${sliderID} not found`);
     }
     return {
-        Load(imageURLs) {
+        Load(imageURLs, initialValue) {
             if (!Array.isArray(imageURLs) || !imageURLs.length) {
                 console.debug('slider has no images to load');
                 return new Error('slider has no images to load');
             }
             loadImages(imageURLs);
-            const defaultScrollValue = 0;
+            const defaultScrollValue = initialValue !== undefined ? initialValue : 0;
             slider.value = defaultScrollValue.toString();
             slider.max = (imageURLs.length - 1).toString();
             const handleSliderChange = () => {
@@ -26591,6 +26591,8 @@ class VtoComponent {
     constructor(vtoMainDivId) {
         this.vtoMainDivId = vtoMainDivId;
         this.isInit = false;
+        this.currentSliderValue = 0;
+        this.slider = null;
     }
     init() {
         if (this.isInit)
@@ -26604,21 +26606,34 @@ class VtoComponent {
           <input type="range" id="tfr-slider" />
         </div>
     `;
-        this.isInit = true;
-    }
-    onNewFramesReady(frames) {
         const tryOnImage = document.getElementById('tfr-tryon-image');
         const onChange = (slider, imageUrl) => {
             console.debug('slider change', slider, imageUrl);
             tryOnImage.src = imageUrl;
+            this.currentSliderValue = parseInt(slider.value);
         };
-        const slider = InitImageSlider('tfr-slider', onChange);
+        this.slider = InitImageSlider('tfr-slider', onChange);
+        this.isInit = true;
+    }
+    onNewFramesReady(frames) {
+        if (!this.isInit) {
+            this.init();
+        }
         if (Array.isArray(frames) && frames.length > 0) {
-            const e = slider.Load(frames);
+            // Ensure the current slider value is within bounds of the new frames array
+            const boundedValue = Math.min(this.currentSliderValue, frames.length - 1);
+            const e = this.slider.Load(frames, boundedValue);
             if (e instanceof Error) {
                 console.error(e);
                 return;
             }
+            // Restore previous slider position if it's within bounds
+            const sliderElement = document.getElementById('tfr-slider');
+            if (sliderElement && this.currentSliderValue < frames.length) {
+                sliderElement.value = this.currentSliderValue.toString();
+                const tryOnImage = document.getElementById('tfr-tryon-image');
+                tryOnImage.src = frames[this.currentSliderValue];
+            }
         }
     }
 }
@@ -27602,15 +27617,15 @@ class SizeRecComponent {
             try {
                 // Get all size buttons
                 const allSizeButtons = Array.from(document.querySelectorAll('.tfr-size-rec-select-button'));
-                // Request frames for all sizes
-                for (const button of allSizeButtons) {
+                // Request frames for all sizes concurrently
+                await Promise.all(allSizeButtons.map(async (button) => {
                     const sizeId = Number(button.getAttribute('data-size-id'));
                     if (Number.isNaN(sizeId))
-                        continue;
+                        return;
                     // Only display the active size, others are just requested
                     const shouldDisplay = button === activeButton;
                     await this.onTryOnClick(this.styleId, sizeId, shouldDisplay);
-                }
+                }));
             }
             catch (error) {
                 console.error('Error during try-on:', error);