apple hero drag changes

ios/Podfile.lock

@@ -3178,13 +3178,13 @@ EXTERNAL SOURCES:
 
 CHECKOUT OPTIONS:
   DisplayCriteria:
-    :commit: 83ba8419ca365e9397c0b45c4147755da522324e
+    :commit: cbc74996afb55e096bf1ff240f07d1d206ac86df
     :git: https://github.com/kingslay/KSPlayer.git
   FFmpegKit:
     :commit: d7048037a2eb94a3b08113fbf43aa92bdcb332d9
     :git: https://github.com/kingslay/FFmpegKit.git
   KSPlayer:
-    :commit: 83ba8419ca365e9397c0b45c4147755da522324e
+    :commit: cbc74996afb55e096bf1ff240f07d1d206ac86df
     :git: https://github.com/kingslay/KSPlayer.git
   Libass:
     :commit: d7048037a2eb94a3b08113fbf43aa92bdcb332d9

src/components/home/AppleTVHero.tsx

@@ -188,6 +188,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
   // Animation values
   const dragProgress = useSharedValue(0);
   const dragDirection = useSharedValue(0); // -1 for left, 1 for right
+  const isDragging = useSharedValue(0); // 1 when dragging, 0 when not
   const logoOpacity = useSharedValue(1);
   const [nextIndex, setNextIndex] = useState(currentIndex);
   const thumbnailOpacity = useSharedValue(1);
@@ -197,11 +198,11 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
 
   // Animated style for trailer container - 60% height with zoom
   const trailerContainerStyle = useAnimatedStyle(() => {
-    // Fade out trailer during drag with smooth curve (inverse of next image fade)
+    // Faster fade out during drag - complete fade by 0.3 progress instead of 1.0
     const dragFade = interpolate(
       dragProgress.value,
-      [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.85, 1],
+      [0, 0.05, 0.1, 0.15, 0.2, 0.3],
-      [1, 0.95, 0.88, 0.78, 0.65, 0.5, 0.35, 0.22, 0.08, 0],
+      [1, 0.85, 0.65, 0.4, 0.15, 0],
       Extrapolation.CLAMP
     );
 
@@ -225,11 +226,21 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
     };
   });
 
-  // Parallax style for background images
+  // Parallax style for background images - disabled during drag
   const backgroundParallaxStyle = useAnimatedStyle(() => {
     'worklet';
     const scrollYValue = scrollY.value;
 
+    // Disable parallax during drag to avoid transform conflicts
+    if (isDragging.value > 0) {
+      return {
+        transform: [
+          { scale: 1.0 },
+          { translateY: 0 }
+        ],
+      };
+    }
+
     // Pre-calculated constants - start at 1.0 for normal size
     const DEFAULT_ZOOM = 1.0;
     const SCROLL_UP_MULTIPLIER = 0.002;
@@ -253,11 +264,21 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
     };
   });
 
-  // Parallax style for trailer
+  // Parallax style for trailer - disabled during drag
   const trailerParallaxStyle = useAnimatedStyle(() => {
     'worklet';
     const scrollYValue = scrollY.value;
 
+    // Disable parallax during drag to avoid transform conflicts
+    if (isDragging.value > 0) {
+      return {
+        transform: [
+          { scale: 1.0 },
+          { translateY: 0 }
+        ],
+      };
+    }
+
     // Pre-calculated constants - start at 1.0 for normal size
     const DEFAULT_ZOOM = 1.0;
     const SCROLL_UP_MULTIPLIER = 0.0015;
@@ -580,6 +601,9 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
         .activeOffsetX([-5, 5]) // Smaller activation area - more sensitive
         .failOffsetY([-15, 15]) // Fail if vertical movement is detected
         .onStart(() => {
+          // Mark as dragging to disable parallax
+          isDragging.value = 1;
+
           // Determine which direction and set preview
           runOnJS(updateInteractionTime)();
           // Immediately stop trailer playback when drag starts
@@ -626,6 +650,9 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
               },
               (finished) => {
                 if (finished) {
+                  // Re-enable parallax after navigation completes
+                  isDragging.value = withTiming(0, { duration: 200 });
+
                   if (translationX > 0) {
                     runOnJS(goToPrevious)();
                   } else {
@@ -640,6 +667,9 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
               duration: 450,
               easing: Easing.bezier(0.25, 0.1, 0.25, 1), // Custom ease-out for buttery smooth return
             });
+
+            // Re-enable parallax immediately on cancel
+            isDragging.value = withTiming(0, { duration: 200 });
           }
         }),
     [goToPrevious, goToNext, updateInteractionTime, setPreviewIndex, hideTrailerOnDrag, currentIndex, items.length]