Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-29 20:33:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor AudioTrackModal for better layout and animations

Browse source 
Updated the AudioTrackModal component to improve layout and animations.
This commit is contained in:
AdityasahuX07 2025-12-23 15:18:45 +05:30 committed by GitHub
parent b3ec4e0c01
commit 034fd8a9aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 89 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,19 @@
import React from 'react'; 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 { 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 } from '../utils/playerUtils'; import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
import { logger } from '../../../utils/logger';
interface AudioTrackModalProps { interface AudioTrackModalProps {
showAudioModal: boolean; showAudioModal: boolean;
setShowAudioModal: (show: boolean) => void; setShowAudioModal: (show: boolean) => void;
ksAudioTracks: Array<{ id: number, name: string, language?: string }>; ksAudioTracks: Array<{id: number, name: string, language?: string}>;
selectedAudioTrack: number | null; selectedAudioTrack: number | null;
selectAudioTrack: (trackId: number) => void; selectAudioTrack: (trackId: number) => void;
} }
@ -24,42 +25,54 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
selectedAudioTrack, selectedAudioTrack,
selectAudioTrack, 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); const handleClose = () => setShowAudioModal(false);
if (!showAudioModal) return null; if (!showAudioModal) return null;
return ( 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> </TouchableOpacity>
{/* Center Alignment Container */}
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInDown.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutDown.duration(250)}
style={{ style={{
position: 'absolute', width: menuWidth,
top: 0, maxHeight: menuMaxHeight,
right: 0, backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
bottom: 0, borderRadius: 24,
width: MENU_WIDTH, borderWidth: 1,
backgroundColor: '#0f0f0f',
borderLeftWidth: 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 }}> {/* Header with shared aesthetics */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Audio Tracks</Text> <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
</View>
</View> </View>
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }} contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
> >
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => { {ksAudioTracks.map((track) => {
@ -73,12 +86,9 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
setTimeout(handleClose, 200); setTimeout(handleClose, 200);
}} }}
style={{ style={{
paddingHorizontal: 16, padding: 10,
paddingVertical: 12,
borderRadius: 12, borderRadius: 12,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)', backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
borderWidth: 1,
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center' alignItems: 'center'
@ -87,7 +97,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={{ <Text style={{
color: isSelected ? 'black' : 'white', color: isSelected ? 'black' : 'white',
fontWeight: isSelected ? '700' : '500', fontWeight: isSelected ? '700' : '400',
fontSize: 15 fontSize: 15
}}> }}>
{getTrackDisplayName(track)} {getTrackDisplayName(track)}
@ -108,5 +118,6 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</View> </View>
</View>
); );
}; };