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

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/locale.d.ts

@@ -11,6 +11,7 @@ declare var L: {
     EnterPhoneNumber: string;
     FailedToLoadLocale: string;
     ForgotPasswordWithSymbol: string;
+    GetVirtualTryOnFramesErrorText: string;
     HaveAcc: string;
     Loading: string;
     LoadingAvatar: string;

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-7 (2025-04-18T19:07:37.264Z)
 * 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];
+            }
         }
     }
 }
@@ -26636,6 +26651,7 @@ var L = {
     EnterPhoneNumber: 'Enter your number for download link',
     FailedToLoadLocale: 'Something went wrong when fetching another language.',
     ForgotPasswordWithSymbol: 'Forgot password?',
+    GetVirtualTryOnFramesErrorText: 'The try-on request timed out. Please try again!',
     HaveAcc: 'Have an account? Sign in',
     Loading: 'Loading...',
     LoadingAvatar: 'Your avatar is loading...',
@@ -27602,15 +27618,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);
@@ -28103,14 +28119,26 @@ class FittingRoom {
     async onTryOnClick(styleId, sizeId, shouldDisplay = true) {
         if (!this.vtoComponent)
             return console.error('VtoComponent is not initialized');
-        const frames = await this.shop.tryOn(styleId, sizeId);
-        if (shouldDisplay) {
-            try {
-                this.vtoComponent.init();
-                this.vtoComponent.onNewFramesReady(frames);
+        try {
+            const frames = await this.shop.tryOn(styleId, sizeId);
+            if (shouldDisplay) {
+                try {
+                    this.vtoComponent.init();
+                    this.vtoComponent.onNewFramesReady(frames);
+                }
+                catch (e) {
+                    console.error('Error initializing VTO:', e);
+                    this.tfrModal.onError(L.SomethingWentWrong);
+                }
             }
-            catch (e) {
-                console.error(e);
+        }
+        catch (error) {
+            console.error('Error during try-on:', error);
+            if (error instanceof Error && error.name === 'TimeoutError') {
+                this.tfrModal.onError(L.GetVirtualTryOnFramesErrorText);
+            }
+            else {
+                this.tfrModal.onError(L.SomethingWentWrong);
             }
         }
     }