diff --git a/src/components/player/modals/AudioTrackModal.tsx b/src/components/player/modals/AudioTrackModal.tsx index cd37b69e..0ddf7c76 100644 --- a/src/components/player/modals/AudioTrackModal.tsx +++ b/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, - SlideOutRight, + SlideInDown, + 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 = ({ selectedAudioTrack, selectAudioTrack, }) => { - const { width } = useWindowDimensions(); - const MENU_WIDTH = Math.min(width * 0.85, 400); + const { width, height } = useWindowDimensions(); + + // 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 ( - - - + + {/* Backdrop matching SubtitleModal */} + + - - - - Audio Tracks - - - - + - - {ksAudioTracks.map((track) => { - const isSelected = selectedAudioTrack === track.id; - - return ( - { - 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' - }} - > - - - {getTrackDisplayName(track)} - - - {isSelected && } - - ); - })} - - {ksAudioTracks.length === 0 && ( - - - No audio tracks available - - )} + {/* Header with shared aesthetics */} + + Audio Tracks - - + + + + {ksAudioTracks.map((track) => { + const isSelected = selectedAudioTrack === track.id; + + return ( + { + 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' + }} + > + + + {getTrackDisplayName(track)} + + + {isSelected && } + + ); + })} + + {ksAudioTracks.length === 0 && ( + + + No audio tracks available + + )} + + + + ); };