mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-01-11 20:10:25 +00:00
Ui change of Audio track menu
This commit is contained in:
AdityasahuX07
GitHub
parent
2d5b1263b5
commit
89f99dba85
1 changed files with 76 additions and 182 deletions
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import { View, Text, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
|
||||
import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
SlideInRight,
|
||||
SlideOutRight,
|
||||
SlideInDown,
|
||||
SlideOutDown,
|
||||
} from 'react-native-reanimated';
|
||||
import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
|
@ -18,9 +18,6 @@ interface AudioTrackModalProps {
|
|||
selectAudioTrack: (trackId: number) => void;
|
||||
}
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const MENU_WIDTH = Math.min(width * 0.85, 400);
|
||||
|
||||
export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
|
||||
showAudioModal,
|
||||
setShowAudioModal,
|
||||
|
|
@ -28,202 +25,99 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
|
|||
selectedAudioTrack,
|
||||
selectAudioTrack,
|
||||
}) => {
|
||||
const handleClose = () => {
|
||||
setShowAudioModal(false);
|
||||
};
|
||||
const { width, height } = useWindowDimensions();
|
||||
|
||||
// Debug logging when modal opens
|
||||
React.useEffect(() => {
|
||||
if (showAudioModal && DEBUG_MODE) {
|
||||
logger.log(`[AudioTrackModal] Modal opened with selectedAudioTrack:`, selectedAudioTrack);
|
||||
logger.log(`[AudioTrackModal] Available tracks:`, ksAudioTracks);
|
||||
if (typeof selectedAudioTrack === 'number') {
|
||||
const selectedTrack = ksAudioTracks.find(track => track.id === selectedAudioTrack);
|
||||
if (selectedTrack) {
|
||||
logger.log(`[AudioTrackModal] Selected track found: ${selectedTrack.name} (${selectedTrack.language})`);
|
||||
} else {
|
||||
logger.warn(`[AudioTrackModal] Selected track ${selectedAudioTrack} not found in available tracks`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [showAudioModal, selectedAudioTrack, ksAudioTracks]);
|
||||
// Size constants matching SubtitleModal aesthetics
|
||||
const menuWidth = Math.min(width * 0.9, 420);
|
||||
const menuMaxHeight = height * 0.8;
|
||||
|
||||
const handleClose = () => setShowAudioModal(false);
|
||||
|
||||
if (!showAudioModal) return null;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
zIndex: 9998,
|
||||
}}
|
||||
<View style={StyleSheet.absoluteFill} zIndex={9999}>
|
||||
{/* Backdrop matching SubtitleModal */}
|
||||
<TouchableOpacity
|
||||
style={StyleSheet.absoluteFill}
|
||||
activeOpacity={1}
|
||||
onPress={handleClose}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1 }}
|
||||
onPress={handleClose}
|
||||
activeOpacity={1}
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }}
|
||||
/>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Side Menu */}
|
||||
<Animated.View
|
||||
entering={SlideInRight.duration(300)}
|
||||
exiting={SlideOutRight.duration(250)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: MENU_WIDTH,
|
||||
backgroundColor: '#1A1A1A',
|
||||
zIndex: 9999,
|
||||
elevation: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: -5, height: 0 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 10,
|
||||
borderTopLeftRadius: 20,
|
||||
borderBottomLeftRadius: 20,
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
|
||||
}}>
|
||||
<Text style={{
|
||||
color: '#FFFFFF',
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
}}>
|
||||
Audio Tracks
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
onPress={handleClose}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<MaterialIcons name="close" size={20} color="#FFFFFF" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
{/* Center Alignment Container */}
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
|
||||
<Animated.View
|
||||
entering={SlideInDown.duration(300)}
|
||||
exiting={SlideOutDown.duration(250)}
|
||||
style={{
|
||||
width: menuWidth,
|
||||
maxHeight: menuMaxHeight,
|
||||
backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
|
||||
borderRadius: 24,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{/* Audio Tracks */}
|
||||
<View>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginBottom: 15,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
Available Tracks ({ksAudioTracks.length})
|
||||
</Text>
|
||||
|
||||
{/* Header with shared aesthetics */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
|
||||
<Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
|
||||
>
|
||||
<View style={{ gap: 8 }}>
|
||||
{ksAudioTracks.map((track) => {
|
||||
// Determine if track is selected
|
||||
const isSelected = selectedAudioTrack === track.id;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={track.id}
|
||||
style={{
|
||||
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
|
||||
}}
|
||||
onPress={() => {
|
||||
if (DEBUG_MODE) {
|
||||
logger.log(`[AudioTrackModal] Selecting track: ${track.id} (${track.name})`);
|
||||
}
|
||||
selectAudioTrack(track.id);
|
||||
// Close modal after selection
|
||||
setTimeout(() => {
|
||||
setShowAudioModal(false);
|
||||
}, 200);
|
||||
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'
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
|
||||
<Text style={{
|
||||
color: '#FFFFFF',
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
flex: 1,
|
||||
}}>
|
||||
{getTrackDisplayName(track)}
|
||||
</Text>
|
||||
</View>
|
||||
{track.language && (
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 13,
|
||||
}}>
|
||||
{track.language.toUpperCase()}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
{isSelected && (
|
||||
<MaterialIcons name="check" size={20} color="#22C55E" />
|
||||
)}
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{ksAudioTracks.length === 0 && (
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<MaterialIcons name="volume-off" size={48} color="rgba(255,255,255,0.3)" />
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 16,
|
||||
marginTop: 16,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
No audio tracks available
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue