mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-11 12:11:11 +00:00
328 lines
12 KiB
TypeScript
328 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, Platform, useWindowDimensions, ScrollView } from 'react-native';
|
|
import { MaterialIcons } from '@expo/vector-icons';
|
|
import Animated, {
|
|
FadeIn,
|
|
FadeOut,
|
|
SlideInRight,
|
|
SlideOutRight,
|
|
} from 'react-native-reanimated';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
interface SpeedModalProps {
|
|
showSpeedModal: boolean;
|
|
setShowSpeedModal: (show: boolean) => void;
|
|
currentSpeed: number;
|
|
setPlaybackSpeed: (speed: number) => void;
|
|
holdToSpeedEnabled: boolean;
|
|
setHoldToSpeedEnabled: (enabled: boolean) => void;
|
|
holdToSpeedValue: number;
|
|
setHoldToSpeedValue: (speed: number) => void;
|
|
}
|
|
|
|
export const SpeedModal: React.FC<SpeedModalProps> = ({
|
|
showSpeedModal,
|
|
setShowSpeedModal,
|
|
currentSpeed,
|
|
setPlaybackSpeed,
|
|
holdToSpeedEnabled,
|
|
setHoldToSpeedEnabled,
|
|
holdToSpeedValue,
|
|
setHoldToSpeedValue,
|
|
}) => {
|
|
const insets = useSafeAreaInsets();
|
|
const { width, height } = useWindowDimensions();
|
|
const isIos = Platform.OS === 'ios';
|
|
const isLandscape = width > height;
|
|
|
|
// Responsive tuning - more aggressive compacting
|
|
const isCompact = width < 360 || height < 640;
|
|
const sectionPad = isCompact ? 6 : 8;
|
|
const chipPadH = isCompact ? 4 : 6;
|
|
const chipPadV = isCompact ? 3 : 4;
|
|
const menuWidth = Math.min(
|
|
width * (isIos ? (isLandscape ? 0.55 : 0.8) : 0.85),
|
|
isIos ? 380 : 360
|
|
);
|
|
|
|
const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5];
|
|
const holdSpeedOptions = [1.5, 2.0];
|
|
|
|
const handleClose = () => {
|
|
setShowSpeedModal(false);
|
|
};
|
|
|
|
const handleSpeedSelect = (speed: number) => {
|
|
setPlaybackSpeed(speed);
|
|
};
|
|
|
|
const handleHoldSpeedSelect = (speed: number) => {
|
|
setHoldToSpeedValue(speed);
|
|
};
|
|
|
|
const renderSpeedModal = () => {
|
|
if (!showSpeedModal) 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,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={{ flex: 1 }}
|
|
onPress={handleClose}
|
|
activeOpacity={1}
|
|
/>
|
|
</Animated.View>
|
|
|
|
{/* Side Menu */}
|
|
<Animated.View
|
|
entering={SlideInRight.duration(300)}
|
|
exiting={SlideOutRight.duration(250)}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: menuWidth,
|
|
backgroundColor: '#1A1A1A',
|
|
zIndex: 9999,
|
|
elevation: 20,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: -5, height: 0 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 10,
|
|
borderTopLeftRadius: 20,
|
|
borderBottomLeftRadius: 20,
|
|
paddingRight: 0,
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 20,
|
|
paddingTop: insets.top + (isCompact ? 4 : 6),
|
|
paddingBottom: 6,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
|
|
}}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
|
|
<MaterialIcons name="speed" size={20} color="#FFFFFF" />
|
|
<Text style={{ color: '#FFFFFF', fontSize: 18, fontWeight: '700' }}>Playback Speed</Text>
|
|
</View>
|
|
<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: 12,
|
|
paddingBottom: (isCompact ? 16 : 20) + (isIos ? insets.bottom : 0)
|
|
}}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
|
|
{/* Current Speed Display */}
|
|
<View style={{
|
|
backgroundColor: 'rgba(59, 130, 246, 0.15)',
|
|
borderRadius: 12,
|
|
padding: sectionPad * 0.75,
|
|
marginBottom: 12,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(59, 130, 246, 0.3)',
|
|
}}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
|
<MaterialIcons name="play-arrow" size={20} color="#3B82F6" />
|
|
<Text style={{
|
|
color: '#3B82F6',
|
|
fontSize: isCompact ? 16 : 18,
|
|
fontWeight: '700',
|
|
marginLeft: 6
|
|
}}>
|
|
Current: {currentSpeed}x
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Speed Presets */}
|
|
<View style={{ marginBottom: 16 }}>
|
|
<Text style={{
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
marginBottom: 10,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
}}>
|
|
Speed Presets
|
|
</Text>
|
|
|
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
|
|
{speedPresets.map((speed) => {
|
|
const isSelected = currentSpeed === speed;
|
|
return (
|
|
<TouchableOpacity
|
|
key={speed}
|
|
onPress={() => handleSpeedSelect(speed)}
|
|
style={{
|
|
paddingHorizontal: chipPadH,
|
|
paddingVertical: chipPadV,
|
|
borderRadius: 12,
|
|
backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
|
|
borderWidth: 1,
|
|
borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)',
|
|
minWidth: 50,
|
|
alignItems: 'center',
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={{
|
|
color: isSelected ? '#3B82F6' : '#FFFFFF',
|
|
fontWeight: '600',
|
|
fontSize: isCompact ? 11 : 12
|
|
}}>
|
|
{speed}x
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Hold-to-Speed Settings */}
|
|
<View style={{ gap: isCompact ? 8 : 12 }}>
|
|
<View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: sectionPad }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
|
|
<MaterialIcons name="touch-app" size={14} color="rgba(255,255,255,0.7)" />
|
|
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 11, marginLeft: 4, fontWeight: '600' }}>
|
|
Hold-to-Speed
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Enable Toggle */}
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
|
|
<Text style={{ color: '#FFFFFF', fontWeight: '600', fontSize: 13 }}>Enable Hold Speed</Text>
|
|
<TouchableOpacity
|
|
style={{
|
|
width: isCompact ? 48 : 54,
|
|
height: isCompact ? 28 : 30,
|
|
backgroundColor: holdToSpeedEnabled ? '#22C55E' : 'rgba(255,255,255,0.25)',
|
|
borderRadius: 15,
|
|
justifyContent: 'center',
|
|
alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start',
|
|
paddingHorizontal: 3
|
|
}}
|
|
onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
|
|
>
|
|
<View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Hold Speed Selector */}
|
|
{holdToSpeedEnabled && (
|
|
<View style={{ marginBottom: 8 }}>
|
|
<Text style={{ color: '#FFFFFF', fontWeight: '600', marginBottom: 6, fontSize: 13 }}>Hold Speed</Text>
|
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
|
|
{holdSpeedOptions.map((speed) => {
|
|
const isSelected = holdToSpeedValue === speed;
|
|
return (
|
|
<TouchableOpacity
|
|
key={speed}
|
|
onPress={() => handleHoldSpeedSelect(speed)}
|
|
style={{
|
|
paddingHorizontal: chipPadH,
|
|
paddingVertical: chipPadV,
|
|
borderRadius: 10,
|
|
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
|
|
borderWidth: 1,
|
|
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
|
|
minWidth: 45,
|
|
alignItems: 'center',
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={{
|
|
color: isSelected ? '#22C55E' : '#FFFFFF',
|
|
fontWeight: '600',
|
|
fontSize: isCompact ? 10 : 11
|
|
}}>
|
|
{speed}x
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Info Text */}
|
|
<View style={{
|
|
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
|
borderRadius: 10,
|
|
padding: sectionPad * 0.75,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(34, 197, 94, 0.3)',
|
|
}}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
|
|
<MaterialIcons name="info" size={14} color="#22C55E" />
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{
|
|
color: '#22C55E',
|
|
fontSize: isCompact ? 12 : 13,
|
|
fontWeight: '600',
|
|
marginBottom: 4,
|
|
}}>
|
|
Hold left/right sides
|
|
</Text>
|
|
<Text style={{
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
fontSize: isCompact ? 11 : 12,
|
|
lineHeight: isCompact ? 14 : 16,
|
|
}}>
|
|
Hold and press the left or right side of the video player to temporarily boost playback speed.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</Animated.View>
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{renderSpeedModal()}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SpeedModal;
|