Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-22 09:11:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #284 from AdityasahuX07/patch-10

Browse source 
Ui change of Audio track menu
This commit is contained in:
Nayif 2025-12-20 20:41:57 +05:30 committed by GitHub
commit aaf0b498f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 75 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

247
src/components/player/modals/AudioTrackModal.tsx
View file

@ -1,11 +1,11 @@
import React from 'react'; 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 { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInRight, SlideInDown,
SlideOutRight, SlideOutDown,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils'; import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
@ -18,9 +18,6 @@ interface AudioTrackModalProps {
selectAudioTrack: (trackId: number) => void; selectAudioTrack: (trackId: number) => void;
} }
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
showAudioModal, showAudioModal,
setShowAudioModal, setShowAudioModal,
@ -28,202 +25,98 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
selectedAudioTrack, selectedAudioTrack,
selectAudioTrack, selectAudioTrack,
}) => { }) => {
const handleClose = () => { const { width, height } = useWindowDimensions();
setShowAudioModal(false);
};
// Debug logging when modal opens const menuWidth = Math.min(width * 0.9, 420);
React.useEffect(() => { const menuMaxHeight = height * 0.9;
if (showAudioModal && DEBUG_MODE) {
logger.log(`[AudioTrackModal] Modal opened with selectedAudioTrack:`, selectedAudioTrack); const handleClose = () => setShowAudioModal(false);
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]);
if (!showAudioModal) return null; if (!showAudioModal) return null;
return ( return (
<> <View style={StyleSheet.absoluteFill} zIndex={9999}>
{/* Backdrop */} {/* Backdrop matching SubtitleModal */}
<Animated.View <TouchableOpacity
entering={FadeIn.duration(200)} style={StyleSheet.absoluteFill}
exiting={FadeOut.duration(150)} activeOpacity={1}
style={{ onPress={handleClose}
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
> >
<TouchableOpacity <Animated.View
style={{ flex: 1 }} entering={FadeIn.duration(200)}
onPress={handleClose} exiting={FadeOut.duration(150)}
activeOpacity={1} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }}
/> />
</Animated.View> </TouchableOpacity>
{/* Side Menu */} {/* Center Alignment Container */}
<Animated.View <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
entering={SlideInRight.duration(300)} <Animated.View
exiting={SlideOutRight.duration(250)} entering={SlideInDown.duration(300)}
style={{ exiting={SlideOutDown.duration(250)}
position: 'absolute', style={{
top: 0, width: menuWidth,
right: 0, maxHeight: menuMaxHeight,
bottom: 0, backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
width: MENU_WIDTH, borderRadius: 24,
backgroundColor: '#1A1A1A', borderWidth: 1,
zIndex: 9999, borderColor: 'rgba(255,255,255,0.1)',
elevation: 20, overflow: 'hidden'
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}
> >
{/* Audio Tracks */} {/* Header with shared aesthetics */}
<View> <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
<Text style={{ <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
color: 'rgba(255, 255, 255, 0.7)', </View>
fontSize: 14,
fontWeight: '600',
marginBottom: 15,
textTransform: 'uppercase',
letterSpacing: 0.5,
}}>
Available Tracks ({ksAudioTracks.length})
</Text>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
>
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => { {ksAudioTracks.map((track) => {
// Determine if track is selected
const isSelected = selectedAudioTrack === track.id; const isSelected = selectedAudioTrack === track.id;
return ( return (
<TouchableOpacity <TouchableOpacity
key={track.id} 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={() => { onPress={() => {
if (DEBUG_MODE) {
logger.log(`[AudioTrackModal] Selecting track: ${track.id} (${track.name})`);
}
selectAudioTrack(track.id); selectAudioTrack(track.id);
// Close modal after selection setTimeout(handleClose, 200);
setTimeout(() => { }}
setShowAudioModal(false); style={{
}, 200); 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={{ flex: 1 }}> <Text style={{
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}> color: isSelected ? 'black' : 'white',
<Text style={{ fontWeight: isSelected ? '700' : '400',
color: '#FFFFFF', fontSize: 15
fontSize: 15, }}>
fontWeight: '500', {getTrackDisplayName(track)}
flex: 1, </Text>
}}>
{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> </View>
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
</TouchableOpacity> </TouchableOpacity>
); );
})} })}
</View>
{ksAudioTracks.length === 0 && ( {ksAudioTracks.length === 0 && (
<View style={{ <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
backgroundColor: 'rgba(255, 255, 255, 0.05)', <MaterialIcons name="volume-off" size={32} color="white" />
borderRadius: 16, <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
padding: 20, </View>
alignItems: 'center', )}
}}> </View>
<MaterialIcons name="volume-off" size={48} color="rgba(255,255,255,0.3)" /> </ScrollView>
<Text style={{ </Animated.View>
color: 'rgba(255, 255, 255, 0.6)', </View>
fontSize: 16, </View>
marginTop: 16,
textAlign: 'center',
}}>
No audio tracks available
</Text>
</View>
)}
</View>
</ScrollView>
</Animated.View>
</>
); );
}; };