@myinterview/widget-react 1.0.52-experimental-6 → 1.0.52

package/dist/esm/index.js

@@ -32470,6 +32470,7 @@ const displayedItemsNumber = isMobile ? 1 : 3;
 const CHANGE_SLIDE_COOLDOWN = 30;
 const SLIDE_RATIO = 0.25;
 const SLIDE_EDGE_TRANSFORM_RATIO = 0.25;
+const TRANSITION_DURATION = '300ms';
 const TITLE_TEXT_OPTIONS = {
     ONLY_ONE_TAKE: 'Click Submit to move to the next question',
     LAST_TAKE: 'Select your video to submit',
@@ -32530,8 +32531,8 @@ const PreviewList = ({ previewRef, onNextQuestion, onNextRetake, onQuestionMode,
             const indexOffset = Math.max(previewIndex.current - displayedItemsNumber, previewIndex.current);
             transformX.current = (-width / displayedItemsNumber) * indexOffset;
             itemsWrapperRef.current.style.setProperty('--myinterview-widget-preview-transform-x', '0px');
-            itemsWrapperRef.current.style.setProperty('--myinterview-widget-preview-item-transition', '300ms');
-            itemsWrapperRef.current.style.transitionDuration = '300ms';
+            itemsWrapperRef.current.style.setProperty('--myinterview-widget-preview-item-transition', TRANSITION_DURATION);
+            itemsWrapperRef.current.style.transitionDuration = TRANSITION_DURATION;
             updateWrapperPosition();
         }
     };
@@ -32594,13 +32595,21 @@ const PreviewList = ({ previewRef, onNextQuestion, onNextRetake, onQuestionMode,
         if (itemsWrapperRef.current) {
             itemsWrapperRef.current.style.setProperty('--myinterview-widget-item-width', `calc(100% / ${displayedItemsNumber})`);
         }
-        setTimeout(adjustWrapperPosition, 500);
         return () => {
             var _a, _b;
             (_a = myinterviewRef === null || myinterviewRef === void 0 ? void 0 : myinterviewRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--myitnerview-widget-background-height', 'calc(40vh - 100px)');
             (_b = myinterviewRef === null || myinterviewRef === void 0 ? void 0 : myinterviewRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--myinterview-widget-background-preview-display', 'none');
         };
     }, []);
+    const handleItemsWrapperRef = useCallback((node) => {
+        itemsWrapperRef.current = node;
+        adjustWrapperPosition();
+    }, []);
+    useEffect(() => {
+        setPreviewVideoIndex(Math.max(videosUrls.length - displayedItemsNumber, 0));
+        previewIndex.current = Math.max(videosUrls.length - displayedItemsNumber, 0);
+        adjustWrapperPosition();
+    }, [videosUrls.length]);
     useEffect(() => {
         setPreviewModeIndex(null);
     }, [previewVideoIndex]);
@@ -32653,7 +32662,7 @@ const PreviewList = ({ previewRef, onNextQuestion, onNextRetake, onQuestionMode,
             previewVideoIndex > 0 && (React__default.createElement("div", { className: "myinterview-widget-preview__arrow myinterview-widget-preview__arrow--prev" },
                 React__default.createElement("div", { className: "myinterview-widget-preview__arrow-icon-wrapper", onClick: () => onUpdatePreviewIndex(previewVideoIndex - 1), role: "presentation" },
                     React__default.createElement(Be, null)))),
-            React__default.createElement("div", { role: "presentation", ref: itemsWrapperRef, className: itemsWrapperClassNames, 
+            React__default.createElement("div", { role: "presentation", ref: handleItemsWrapperRef, className: itemsWrapperClassNames, 
                 // onMouseDown={resetTransition}
                 // onMouseMove={handleMouseMove}
                 // onMouseUp={handleMouseUp}