@thewhateverapp/tile-sdk 0.13.17 → 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,140 +239,177 @@ 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;
-        console.log('[Slideshow Swipe] Effect running:', {
-            hasContainer: !!container,
-            swipeable,
-            totalSlides: state.totalSlides,
-            isTransitioning: state.isTransitioning,
-        });
-        if (!container) {
-            console.log('[Slideshow Swipe] ❌ No container ref');
-            return;
-        }
-        if (!swipeable) {
-            console.log('[Slideshow Swipe] ❌ Swipeable is false');
-            return;
-        }
-        if (state.totalSlides <= 1) {
-            console.log('[Slideshow Swipe] ❌ Only', state.totalSlides, 'slide(s)');
+        if (!container || !swipeable) {
             return;
         }
-        console.log('[Slideshow Swipe] ✅ Attaching touch listeners to container');
+        // Get singleton reference once - we'll check its state directly in handlers
+        const swipeSingleton = getSlideshowSingleton();
         const handleTouchStart = (e) => {
+            // Check totalSlides from singleton (not stale closure)
+            if (swipeSingleton.getState().totalSlides <= 1)
+                return;
             const touch = e.touches[0];
-            console.log('[Slideshow Swipe] touchstart:', {
-                hasTouch: !!touch,
-                clientX: touch?.clientX,
-                clientY: touch?.clientY,
-                target: e.target?.tagName,
-                currentTarget: e.currentTarget?.tagName,
-            });
             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) {
-                console.log('[Slideshow Swipe] touchmove: no touchStart ref');
+            if (!touchStartRef.current)
                 return;
-            }
             const touch = e.touches[0];
-            if (!touch) {
-                console.log('[Slideshow Swipe] touchmove: no touch');
+            if (!touch)
                 return;
-            }
             touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
-            // Prevent default and stop propagation for horizontal swipes
             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) {
-                console.log('[Slideshow Swipe] touchmove: horizontal swipe detected, preventing default', { deltaX, deltaY });
+            // 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) => {
-            console.log('[Slideshow Swipe] touchend:', {
-                hasTouchStart: !!touchStartRef.current,
-                hasTouchCurrent: !!touchCurrentRef.current,
-                isTransitioning: state.isTransitioning,
-            });
+            const wasDragging = !!touchStartRef.current;
             if (!touchStartRef.current || !touchCurrentRef.current) {
-                console.log('[Slideshow Swipe] touchend: missing refs, aborting');
                 touchStartRef.current = null;
                 touchCurrentRef.current = null;
+                setIsDragging(false);
+                setDragOffset(0);
                 return;
             }
-            // Don't process if transitioning
-            if (state.isTransitioning) {
-                console.log('[Slideshow Swipe] touchend: transitioning, aborting');
+            // 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;
             const deltaY = touchCurrentRef.current.y - touchStartRef.current.y;
             const deltaTime = Date.now() - touchStartRef.current.time;
-            // Lower threshold for smaller tiles - 30px minimum swipe distance
+            // 30px minimum swipe distance, must be horizontal
             const minSwipeDistance = 30;
             const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
             const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
             const isQuickSwipe = deltaTime < 500 || Math.abs(deltaX) > 60;
-            console.log('[Slideshow Swipe] touchend analysis:', {
-                deltaX,
-                deltaY,
-                deltaTime,
-                minSwipeDistance,
-                isHorizontalSwipe,
-                isValidSwipe,
-                isQuickSwipe,
-                willTrigger: isValidSwipe && isQuickSwipe,
-                direction: deltaX > 0 ? 'prev' : 'next',
-            });
+            // Reset drag state before triggering transition
+            setIsDragging(false);
+            setDragOffset(0);
             if (isValidSwipe && isQuickSwipe) {
                 e.preventDefault();
                 e.stopPropagation();
                 if (deltaX > 0) {
-                    console.log('[Slideshow Swipe] 🎯 Triggering PREV');
-                    singleton.prev();
+                    swipeSingleton.prev();
                 }
                 else {
-                    console.log('[Slideshow Swipe] 🎯 Triggering NEXT');
-                    singleton.next();
+                    swipeSingleton.next();
                 }
             }
-            else {
-                console.log('[Slideshow Swipe] ❌ Swipe not valid:', {
-                    reason: !isHorizontalSwipe ? 'not horizontal' : !isValidSwipe ? 'too short' : 'too slow',
-                });
-            }
             touchStartRef.current = null;
             touchCurrentRef.current = null;
         };
-        // Use passive: false on all to allow preventDefault()
+        // 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 });
-        console.log('[Slideshow Swipe] ✅ Listeners attached successfully');
+        container.addEventListener('touchcancel', handleTouchCancel, { passive: false });
         return () => {
-            console.log('[Slideshow Swipe] Cleaning up listeners');
             container.removeEventListener('touchstart', handleTouchStart);
             container.removeEventListener('touchmove', handleTouchMove);
             container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchCancel);
         };
-    }, [swipeable, state.totalSlides, state.isTransitioning, singleton]);
-    // Get transition styles
+    }, [swipeable]); // Only re-attach if swipeable changes - check singleton for dynamic state
+    // 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.17",
+  "version": "0.13.19",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",