Refactor AudioTrackModal for better layout and animations

Updated the AudioTrackModal component to improve layout and animations.

src/components/player/modals/AudioTrackModal.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Platform, useWindowDimensions } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import Animated, {
   FadeIn,
   FadeOut,
-  SlideInRight,
+  SlideInDown,
-  SlideOutRight,
+  SlideOutDown,
 } from 'react-native-reanimated';
-import { getTrackDisplayName } from '../utils/playerUtils';
+import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
+import { logger } from '../../../utils/logger';
 
 interface AudioTrackModalProps {
   showAudioModal: boolean;
   setShowAudioModal: (show: boolean) => void;
-  ksAudioTracks: Array<{ id: number, name: string, language?: string }>;
+  ksAudioTracks: Array<{id: number, name: string, language?: string}>;
   selectedAudioTrack: number | null;
   selectAudioTrack: (trackId: number) => void;
 }
@@ -24,89 +25,99 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
   selectedAudioTrack,
   selectAudioTrack,
 }) => {
-  const { width } = useWindowDimensions();
+  const { width, height } = useWindowDimensions();
-  const MENU_WIDTH = Math.min(width * 0.85, 400);
+
+  // Size constants matching SubtitleModal aesthetics
+  const menuWidth = Math.min(width * 0.9, 420);
+  const menuMaxHeight = height * 0.9;
 
   const handleClose = () => setShowAudioModal(false);
 
   if (!showAudioModal) return null;
 
   return (
-    <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
+    <View style={StyleSheet.absoluteFill} zIndex={9999}>
-      <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
+      {/* Backdrop matching SubtitleModal */}
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
+      <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.4)' }}
+        />
       </TouchableOpacity>
 
-      <Animated.View
+      {/* Center Alignment Container */}
-        entering={SlideInRight.duration(300)}
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
-        exiting={SlideOutRight.duration(250)}
+        <Animated.View
-        style={{
+          entering={SlideInDown.duration(300)}
-          position: 'absolute',
+          exiting={SlideOutDown.duration(250)}
-          top: 0,
+          style={{
-          right: 0,
+            width: menuWidth,
-          bottom: 0,
+            maxHeight: menuMaxHeight,
-          width: MENU_WIDTH,
+            backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
-          backgroundColor: '#0f0f0f',
+            borderRadius: 24,
-          borderLeftWidth: 1,
+            borderWidth: 1,
-          borderColor: 'rgba(255,255,255,0.1)',
+            borderColor: 'rgba(255,255,255,0.1)',
-        }}
+            overflow: 'hidden'
-      >
+          }}
-        <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' }}>Audio Tracks</Text>
-          </View>
-        </View>
-
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
         >
-          <View style={{ gap: 8 }}>
+          {/* Header with shared aesthetics */}
-            {ksAudioTracks.map((track) => {
+          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
-              const isSelected = selectedAudioTrack === track.id;
+            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
-
-              return (
-                <TouchableOpacity
-                  key={track.id}
-                  onPress={() => {
-                    selectAudioTrack(track.id);
-                    setTimeout(handleClose, 200);
-                  }}
-                  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'
-                  }}
-                >
-                  <View style={{ flex: 1 }}>
-                    <Text style={{
-                      color: isSelected ? 'black' : 'white',
-                      fontWeight: isSelected ? '700' : '500',
-                      fontSize: 15
-                    }}>
-                      {getTrackDisplayName(track)}
-                    </Text>
-                  </View>
-                  {isSelected && <MaterialIcons name="check" size={18} color="black" />}
-                </TouchableOpacity>
-              );
-            })}
-
-            {ksAudioTracks.length === 0 && (
-              <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
-                <MaterialIcons name="volume-off" size={32} color="white" />
-                <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
-              </View>
-            )}
           </View>
-        </ScrollView>
+
-      </Animated.View>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
+          >
+            <View style={{ gap: 8 }}>
+              {ksAudioTracks.map((track) => {
+                const isSelected = selectedAudioTrack === track.id;
+
+                return (
+                  <TouchableOpacity
+                    key={track.id}
+                    onPress={() => {
+                      selectAudioTrack(track.id);
+                      setTimeout(handleClose, 200);
+                    }}
+                    style={{
+                      padding: 10,
+                      borderRadius: 12,
+                      backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                      alignItems: 'center'
+                    }}
+                  >
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                        color: isSelected ? 'black' : 'white',
+                        fontWeight: isSelected ? '700' : '400',
+                        fontSize: 15
+                      }}>
+                        {getTrackDisplayName(track)}
+                      </Text>
+                    </View>
+                    {isSelected && <MaterialIcons name="check" size={18} color="black" />}
+                  </TouchableOpacity>
+                );
+              })}
+
+              {ksAudioTracks.length === 0 && (
+                <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
+                  <MaterialIcons name="volume-off" size={32} color="white" />
+                  <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
+                </View>
+              )}
+            </View>
+          </ScrollView>
+        </Animated.View>
+      </View>
     </View>
   );
 };