@thewhateverapp/tile-sdk 0.13.18 → 0.13.19

package/dist/react/overlay/Slideshow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"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"}

package/dist/react/overlay/Slideshow.js

@@ -239,10 +239,13 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
         resume: useCallback(() => singleton.resume(), []),
         toggle: useCallback(() => singleton.toggle(), []),
     };
-    // Touch/swipe handlers using native events (React touch events are passive)
+    // Touch/swipe handlers with visual drag feedback
     // NOTE: We attach listeners once and check singleton state directly to avoid
     // stale closure issues and listener teardown during swipe sequences.
     const touchCurrentRef = useRef(null);
+    const [dragOffset, setDragOffset] = useState(0); // Pixels dragged horizontally
+    const [isDragging, setIsDragging] = useState(false);
+    const containerWidthRef = useRef(0);
     useEffect(() => {
         const container = containerRef.current;
         if (!container || !swipeable) {
@@ -257,12 +260,16 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             const touch = e.touches[0];
             if (!touch)
                 return;
+            // Store container width for percentage calculations
+            containerWidthRef.current = container.offsetWidth;
             touchStartRef.current = {
                 x: touch.clientX,
                 y: touch.clientY,
                 time: Date.now(),
             };
             touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
+            setIsDragging(true);
+            setDragOffset(0);
         };
         const handleTouchMove = (e) => {
             if (!touchStartRef.current)
@@ -271,24 +278,41 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             if (!touch)
                 return;
             touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
-            // Prevent default for horizontal swipes to avoid scroll interference
             const deltaX = touch.clientX - touchStartRef.current.x;
             const deltaY = touch.clientY - touchStartRef.current.y;
-            if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
+            // Only start visual drag if horizontal movement dominates
+            if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 5) {
                 e.preventDefault();
                 e.stopPropagation();
+                // Apply resistance at edges (can't drag past first/last)
+                const currentIndex = swipeSingleton.getState().currentIndex;
+                const totalSlides = swipeSingleton.getState().totalSlides;
+                const isAtStart = currentIndex === 0 && deltaX > 0;
+                const isAtEnd = currentIndex === totalSlides - 1 && deltaX < 0;
+                if (isAtStart || isAtEnd) {
+                    // Rubber band effect - reduced movement at edges
+                    setDragOffset(deltaX * 0.3);
+                }
+                else {
+                    setDragOffset(deltaX);
+                }
             }
         };
         const handleTouchEnd = (e) => {
+            const wasDragging = !!touchStartRef.current;
             if (!touchStartRef.current || !touchCurrentRef.current) {
                 touchStartRef.current = null;
                 touchCurrentRef.current = null;
+                setIsDragging(false);
+                setDragOffset(0);
                 return;
             }
             // Check transitioning from singleton directly (not stale closure)
             if (swipeSingleton.getState().isTransitioning) {
                 touchStartRef.current = null;
                 touchCurrentRef.current = null;
+                setIsDragging(false);
+                setDragOffset(0);
                 return;
             }
             const deltaX = touchCurrentRef.current.x - touchStartRef.current.x;
@@ -299,6 +323,9 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
             const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
             const isQuickSwipe = deltaTime < 500 || Math.abs(deltaX) > 60;
+            // Reset drag state before triggering transition
+            setIsDragging(false);
+            setDragOffset(0);
             if (isValidSwipe && isQuickSwipe) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -312,19 +339,77 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             touchStartRef.current = null;
             touchCurrentRef.current = null;
         };
+        // Also handle touch cancel (e.g., incoming call)
+        const handleTouchCancel = () => {
+            touchStartRef.current = null;
+            touchCurrentRef.current = null;
+            setIsDragging(false);
+            setDragOffset(0);
+        };
         // Use passive: false to allow preventDefault()
         container.addEventListener('touchstart', handleTouchStart, { passive: false });
         container.addEventListener('touchmove', handleTouchMove, { passive: false });
         container.addEventListener('touchend', handleTouchEnd, { passive: false });
+        container.addEventListener('touchcancel', handleTouchCancel, { passive: false });
         return () => {
             container.removeEventListener('touchstart', handleTouchStart);
             container.removeEventListener('touchmove', handleTouchMove);
             container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchCancel);
         };
     }, [swipeable]); // Only re-attach if swipeable changes - check singleton for dynamic state
-    // Get transition styles
+    // Get transition styles with drag offset support
     const getTransitionStyles = (index) => {
         const isActive = index === state.currentIndex;
+        const isPrev = index === state.currentIndex - 1 ||
+            (state.currentIndex === 0 && index === state.totalSlides - 1); // Wrap around
+        const isNext = index === state.currentIndex + 1 ||
+            (state.currentIndex === state.totalSlides - 1 && index === 0); // Wrap around
+        // During drag, use slide-style movement for visual feedback
+        if (isDragging && swipeable && state.totalSlides > 1) {
+            const containerWidth = containerWidthRef.current || 256;
+            const dragPercent = (dragOffset / containerWidth) * 100;
+            // Show current, prev, and next slides during drag
+            if (isActive) {
+                return {
+                    transform: `translateX(${dragPercent}%)`,
+                    transition: 'none', // Immediate response during drag
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 2,
+                };
+            }
+            else if (isPrev && dragOffset > 0) {
+                // Dragging right - show previous slide coming in from left
+                return {
+                    transform: `translateX(${-100 + dragPercent}%)`,
+                    transition: 'none',
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 1,
+                };
+            }
+            else if (isNext && dragOffset < 0) {
+                // Dragging left - show next slide coming in from right
+                return {
+                    transform: `translateX(${100 + dragPercent}%)`,
+                    transition: 'none',
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 1,
+                };
+            }
+            else {
+                // Hide other slides during drag
+                return {
+                    opacity: 0,
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 0,
+                };
+            }
+        }
+        // Normal transition styles (when not dragging)
         switch (transition) {
             case 'fade':
                 return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.13.18",
+  "version": "0.13.19",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",