From b3ec4e0c01e75561c38332b52c551387254d61e4 Mon Sep 17 00:00:00 2001
From: AdityasahuX07 <smily998800@gmail.com>
Date: Tue, 23 Dec 2025 15:17:18 +0530
Subject: [PATCH] Video player Ui changes

---
 src/components/player/modals/SpeedModal.tsx | 301 +++++++-------------
 1 file changed, 96 insertions(+), 205 deletions(-)

diff --git a/src/components/player/modals/SpeedModal.tsx b/src/components/player/modals/SpeedModal.tsx
index 2bb7bcc6a..4e1580346 100644
--- a/src/components/player/modals/SpeedModal.tsx
+++ b/src/components/player/modals/SpeedModal.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, Platform, useWindowDimensions, ScrollView, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, useWindowDimensions, StyleSheet } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import Animated, {
   FadeIn,
   FadeOut,
-  SlideInRight,
-  SlideOutRight,
+  SlideInDown,
+  SlideOutDown,
+  useAnimatedStyle,
+  withTiming,
 } from 'react-native-reanimated';
 
 interface SpeedModalProps {
@@ -19,7 +21,31 @@ interface SpeedModalProps {
   setHoldToSpeedValue: (speed: number) => void;
 }
 
-export const SpeedModal: React.FC<SpeedModalProps> = ({
+const MorphingButton = ({ label, isSelected, onPress, isSmall = false }: any) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      // Linear transition from 40 (Pill) to 10 (Rectangle)
+      borderRadius: withTiming(isSelected ? 10 : 40, { duration: 250 }),
+      backgroundColor: withTiming(isSelected ? (isSmall ? 'rgba(255,255,255,0.2)' : 'white') : 'rgba(255,255,255,0.06)', { duration: 50 }),
+    };
+  });
+
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={0.8} style={{ flex: isSmall ? 0 : 1 }}>
+      <Animated.View style={[{ paddingVertical: isSmall ? 6 : 8, paddingHorizontal: isSmall ? 14 : 0, alignItems: 'center', justifyContent: 'center' }, animatedStyle]}>
+        <Text style={{
+          color: isSelected && !isSmall ? 'black' : 'white',
+          fontWeight: isSelected ? '700' : '400',
+          fontSize: isSmall ? 11 : 13
+        }}>
+          {label}
+        </Text>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+const SpeedModal: React.FC<SpeedModalProps> = ({
   showSpeedModal,
   setShowSpeedModal,
   currentSpeed,
@@ -30,219 +56,84 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
   setHoldToSpeedValue,
 }) => {
   const { width } = useWindowDimensions();
-  const MENU_WIDTH = Math.min(width * 0.85, 400);
-
-  const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5];
-  const holdSpeedOptions = [1.5, 2.0];
-
-  const handleClose = () => {
-    setShowSpeedModal(false);
-  };
-
-  const handleSpeedSelect = (speed: number) => {
-    setPlaybackSpeed(speed);
-  };
-
-  const handleHoldSpeedSelect = (speed: number) => {
-    setHoldToSpeedValue(speed);
-  };
+  const speedPresets = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
+  const holdSpeedOptions = [1.0, 2.0, 3.0];
 
   if (!showSpeedModal) return null;
 
   return (
-    <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
-      <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
+    <View style={StyleSheet.absoluteFill} zIndex={9999}>
+      <TouchableOpacity
+        style={StyleSheet.absoluteFill}
+        activeOpacity={1}
+        onPress={() => setShowSpeedModal(false)}
+      >
+        <Animated.View entering={FadeIn} exiting={FadeOut} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.2)' }} />
       </TouchableOpacity>
 
-      <Animated.View
-        entering={SlideInRight.duration(300)}
-        exiting={SlideOutRight.duration(250)}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          width: MENU_WIDTH,
-          backgroundColor: '#0f0f0f',
-          borderLeftWidth: 1,
-          borderColor: 'rgba(255,255,255,0.1)',
-        }}
-      >
-        <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
-            <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Playback Speed</Text>
-          </View>
-        </View>
-
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
-        >
-          {/* Current Speed Display */}
-          <View style={{
-            backgroundColor: 'rgba(59, 130, 246, 0.15)',
-            borderRadius: 12,
-            padding: 12,
-            marginBottom: 20,
+      <View pointerEvents="box-none" style={{ ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center', paddingBottom: 20 }}>
+        <Animated.View
+          entering={SlideInDown.duration(300)}
+          exiting={SlideOutDown.duration(250)}
+          style={{
+            width: Math.min(width * 0.9, 420),
+            backgroundColor: 'rgba(15, 15, 15, 0.95)',
+            borderRadius: 24,
+            padding: 20,
             borderWidth: 1,
-            borderColor: 'rgba(59, 130, 246, 0.3)',
-          }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
-              <MaterialIcons name="play-arrow" size={20} color="#3B82F6" />
-              <Text style={{
-                color: '#3B82F6',
-                fontSize: 18,
-                fontWeight: '700',
-                marginLeft: 6
+            borderColor: 'rgba(255,255,255,0.1)'
+          }}
+        >
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, alignItems: 'center' }}>
+            <Text style={{ color: 'white', fontSize: 16, fontWeight: '600'}}>Playback Speed</Text>
+          </View>
+
+          {/* Speed Selection Row */}
+          <View style={{ flexDirection: 'row', gap: 6, marginBottom: 20 }}>
+            {speedPresets.map((speed) => (
+              <MorphingButton
+                key={speed}
+                label={`${speed}x`}
+                isSelected={currentSpeed === speed}
+                onPress={() => setPlaybackSpeed(speed)}
+              />
+            ))}
+          </View>
+
+          <View style={{ height: 1, backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 14 }} />
+
+          {/* On Hold Section */}
+          <View>
+            <TouchableOpacity
+              onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
+              style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: holdToSpeedEnabled ? 15 : 0 }}
+            >
+              <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>On Hold</Text>
+              <View style={{
+                width: 34, height: 18, borderRadius: 10,
+                backgroundColor: holdToSpeedEnabled ? 'white' : 'rgba(255,255,255,0.2)',
+                padding: 2, alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start'
               }}>
-                Current: {currentSpeed}x
-              </Text>
-            </View>
-          </View>
+                <View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: holdToSpeedEnabled ? 'black' : 'white' }} />
+              </View>
+            </TouchableOpacity>
 
-          {/* Speed Presets */}
-          <View style={{ marginBottom: 20 }}>
-            <Text style={{
-              color: 'rgba(255, 255, 255, 0.7)',
-              fontSize: 14,
-              fontWeight: '600',
-              marginBottom: 12,
-              textTransform: 'uppercase',
-              letterSpacing: 0.5,
-            }}>
-              Speed Presets
-            </Text>
-
-            <View style={{ gap: 8 }}>
-              {speedPresets.map((speed) => {
-                const isSelected = currentSpeed === speed;
-                return (
-                  <TouchableOpacity
-                    key={speed}
-                    onPress={() => handleSpeedSelect(speed)}
-                    style={{
-                      paddingHorizontal: 16,
-                      paddingVertical: 12,
-                      borderRadius: 12,
-                      backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
-                      borderWidth: 1,
-                      borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
-                      flexDirection: 'row',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                    }}
-                    activeOpacity={0.7}
-                  >
-                    <Text style={{
-                      color: isSelected ? 'black' : 'white',
-                      fontWeight: isSelected ? '700' : '500',
-                      fontSize: 15
-                    }}>
-                      {speed}x
-                    </Text>
-                    {isSelected && <MaterialIcons name="check" size={18} color="black" />}
-                  </TouchableOpacity>
-                );
-              })}
-            </View>
-          </View>
-
-          {/* Hold-to-Speed Settings */}
-          <View style={{ backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 12, padding: 16, borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)' }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
-              <MaterialIcons name="touch-app" size={18} color="rgba(255,255,255,0.7)" />
-              <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, marginLeft: 6, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                Hold-to-Speed
-              </Text>
-            </View>
-
-            {/* Enable Toggle */}
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-              <Text style={{ color: 'white', fontWeight: '600', fontSize: 15 }}>Enable Hold Speed</Text>
-              <TouchableOpacity
-                style={{
-                  width: 54,
-                  height: 30,
-                  backgroundColor: holdToSpeedEnabled ? '#22C55E' : 'rgba(255,255,255,0.25)',
-                  borderRadius: 15,
-                  justifyContent: 'center',
-                  alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start',
-                  paddingHorizontal: 3
-                }}
-                onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
-              >
-                <View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} />
-              </TouchableOpacity>
-            </View>
-
-            {/* Hold Speed Selector */}
             {holdToSpeedEnabled && (
-              <View style={{ marginBottom: 16 }}>
-                <Text style={{ color: 'white', fontWeight: '600', marginBottom: 10, fontSize: 15 }}>Hold Speed</Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
-                  {holdSpeedOptions.map((speed) => {
-                    const isSelected = holdToSpeedValue === speed;
-                    return (
-                      <TouchableOpacity
-                        key={speed}
-                        onPress={() => handleHoldSpeedSelect(speed)}
-                        style={{
-                          paddingHorizontal: 16,
-                          paddingVertical: 8,
-                          borderRadius: 20,
-                          backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
-                          borderWidth: 1,
-                          borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
-                        }}
-                        activeOpacity={0.7}
-                      >
-                        <Text style={{
-                          color: isSelected ? 'black' : 'white',
-                          fontWeight: isSelected ? '700' : '500',
-                          fontSize: 14
-                        }}>
-                          {speed}x
-                        </Text>
-                      </TouchableOpacity>
-                    );
-                  })}
-                </ScrollView>
-              </View>
+              <Animated.View entering={FadeIn} style={{ flexDirection: 'row', gap: 8 }}>
+                {holdSpeedOptions.map((speed) => (
+                  <MorphingButton
+                    key={speed}
+                    isSmall
+                    label={`${speed}x`}
+                    isSelected={holdToSpeedValue === speed}
+                    onPress={() => setHoldToSpeedValue(speed)}
+                  />
+                ))}
+              </Animated.View>
             )}
-
-            {/* Info Text */}
-            <View style={{
-              backgroundColor: 'rgba(34, 197, 94, 0.1)',
-              borderRadius: 10,
-              padding: 12,
-              borderWidth: 1,
-              borderColor: 'rgba(34, 197, 94, 0.3)',
-            }}>
-              <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
-                <MaterialIcons name="info" size={16} color="#22C55E" />
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                    color: '#22C55E',
-                    fontSize: 13,
-                    fontWeight: '600',
-                    marginBottom: 4,
-                  }}>
-                    Hold left/right sides
-                  </Text>
-                  <Text style={{
-                    color: 'rgba(255, 255, 255, 0.8)',
-                    fontSize: 12,
-                    lineHeight: 16,
-                  }}>
-                    Hold and press the left or right side of the video player to temporarily boost playback speed.
-                  </Text>
-                </View>
-              </View>
-            </View>
           </View>
-        </ScrollView>
-      </Animated.View>
+        </Animated.View>
+      </View>
     </View>
   );
 };