mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-25 10:33:07 +00:00
Video player Ui changes
This commit is contained in:
AdityasahuX07
GitHub
parent
32df7d79ad
commit
b3ec4e0c01
1 changed files with 96 additions and 205 deletions
|
|
@ -1,11 +1,13 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { View, Text, TouchableOpacity, Platform, useWindowDimensions, ScrollView, StyleSheet } from 'react-native';
|
import { View, Text, TouchableOpacity, useWindowDimensions, StyleSheet } 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,
|
||||||
|
useAnimatedStyle,
|
||||||
|
withTiming,
|
||||||
} from 'react-native-reanimated';
|
} from 'react-native-reanimated';
|
||||||
|
|
||||||
interface SpeedModalProps {
|
interface SpeedModalProps {
|
||||||
|
|
@ -19,7 +21,31 @@ interface SpeedModalProps {
|
||||||
setHoldToSpeedValue: (speed: number) => void;
|
setHoldToSpeedValue: (speed: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SpeedModal: React.FC<SpeedModalProps> = ({
|
const MorphingButton = ({ label, isSelected, onPress, isSmall = false }: any) => {
|
||||||
|
const animatedStyle = useAnimatedStyle(() => {
|
||||||
|
return {
|
||||||
|
// Linear transition from 40 (Pill) to 10 (Rectangle)
|
||||||
|
borderRadius: withTiming(isSelected ? 10 : 40, { duration: 250 }),
|
||||||
|
backgroundColor: withTiming(isSelected ? (isSmall ? 'rgba(255,255,255,0.2)' : 'white') : 'rgba(255,255,255,0.06)', { duration: 50 }),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity onPress={onPress} activeOpacity={0.8} style={{ flex: isSmall ? 0 : 1 }}>
|
||||||
|
<Animated.View style={[{ paddingVertical: isSmall ? 6 : 8, paddingHorizontal: isSmall ? 14 : 0, alignItems: 'center', justifyContent: 'center' }, animatedStyle]}>
|
||||||
|
<Text style={{
|
||||||
|
color: isSelected && !isSmall ? 'black' : 'white',
|
||||||
|
fontWeight: isSelected ? '700' : '400',
|
||||||
|
fontSize: isSmall ? 11 : 13
|
||||||
|
}}>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</Animated.View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const SpeedModal: React.FC<SpeedModalProps> = ({
|
||||||
showSpeedModal,
|
showSpeedModal,
|
||||||
setShowSpeedModal,
|
setShowSpeedModal,
|
||||||
currentSpeed,
|
currentSpeed,
|
||||||
|
|
@ -30,219 +56,84 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
|
||||||
setHoldToSpeedValue,
|
setHoldToSpeedValue,
|
||||||
}) => {
|
}) => {
|
||||||
const { width } = useWindowDimensions();
|
const { width } = useWindowDimensions();
|
||||||
const MENU_WIDTH = Math.min(width * 0.85, 400);
|
const speedPresets = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
|
||||||
|
const holdSpeedOptions = [1.0, 2.0, 3.0];
|
||||||
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);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!showSpeedModal) return null;
|
if (!showSpeedModal) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
|
<View style={StyleSheet.absoluteFill} zIndex={9999}>
|
||||||
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
|
<TouchableOpacity
|
||||||
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
style={StyleSheet.absoluteFill}
|
||||||
|
activeOpacity={1}
|
||||||
|
onPress={() => setShowSpeedModal(false)}
|
||||||
|
>
|
||||||
|
<Animated.View entering={FadeIn} exiting={FadeOut} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.2)' }} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<View pointerEvents="box-none" style={{ ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center', paddingBottom: 20 }}>
|
||||||
<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: Math.min(width * 0.9, 420),
|
||||||
top: 0,
|
backgroundColor: 'rgba(15, 15, 15, 0.95)',
|
||||||
right: 0,
|
borderRadius: 24,
|
||||||
bottom: 0,
|
padding: 20,
|
||||||
width: MENU_WIDTH,
|
borderWidth: 1,
|
||||||
backgroundColor: '#0f0f0f',
|
borderColor: 'rgba(255,255,255,0.1)'
|
||||||
borderLeftWidth: 1,
|
|
||||||
borderColor: 'rgba(255,255,255,0.1)',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, alignItems: 'center' }}>
|
||||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
<Text style={{ color: 'white', fontSize: 16, fontWeight: '600'}}>Playback Speed</Text>
|
||||||
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Playback Speed</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<ScrollView
|
{/* Speed Selection Row */}
|
||||||
showsVerticalScrollIndicator={false}
|
<View style={{ flexDirection: 'row', gap: 6, marginBottom: 20 }}>
|
||||||
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
|
{speedPresets.map((speed) => (
|
||||||
>
|
<MorphingButton
|
||||||
{/* Current Speed Display */}
|
|
||||||
<View style={{
|
|
||||||
backgroundColor: 'rgba(59, 130, 246, 0.15)',
|
|
||||||
borderRadius: 12,
|
|
||||||
padding: 12,
|
|
||||||
marginBottom: 20,
|
|
||||||
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: 18,
|
|
||||||
fontWeight: '700',
|
|
||||||
marginLeft: 6
|
|
||||||
}}>
|
|
||||||
Current: {currentSpeed}x
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Speed Presets */}
|
|
||||||
<View style={{ marginBottom: 20 }}>
|
|
||||||
<Text style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.7)',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: '600',
|
|
||||||
marginBottom: 12,
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: 0.5,
|
|
||||||
}}>
|
|
||||||
Speed Presets
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<View style={{ gap: 8 }}>
|
|
||||||
{speedPresets.map((speed) => {
|
|
||||||
const isSelected = currentSpeed === speed;
|
|
||||||
return (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={speed}
|
key={speed}
|
||||||
onPress={() => handleSpeedSelect(speed)}
|
label={`${speed}x`}
|
||||||
style={{
|
isSelected={currentSpeed === speed}
|
||||||
paddingHorizontal: 16,
|
onPress={() => setPlaybackSpeed(speed)}
|
||||||
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',
|
|
||||||
}}
|
|
||||||
activeOpacity={0.7}
|
|
||||||
>
|
|
||||||
<Text style={{
|
|
||||||
color: isSelected ? 'black' : 'white',
|
|
||||||
fontWeight: isSelected ? '700' : '500',
|
|
||||||
fontSize: 15
|
|
||||||
}}>
|
|
||||||
{speed}x
|
|
||||||
</Text>
|
|
||||||
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* Hold-to-Speed Settings */}
|
<View style={{ height: 1, backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 14 }} />
|
||||||
<View style={{ backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 12, padding: 16, borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)' }}>
|
|
||||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
|
|
||||||
<MaterialIcons name="touch-app" size={18} color="rgba(255,255,255,0.7)" />
|
|
||||||
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, marginLeft: 6, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 0.5 }}>
|
|
||||||
Hold-to-Speed
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Enable Toggle */}
|
{/* On Hold Section */}
|
||||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
<View>
|
||||||
<Text style={{ color: 'white', fontWeight: '600', fontSize: 15 }}>Enable Hold Speed</Text>
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={{
|
|
||||||
width: 54,
|
|
||||||
height: 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)}
|
onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
|
||||||
|
style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: holdToSpeedEnabled ? 15 : 0 }}
|
||||||
>
|
>
|
||||||
<View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} />
|
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>On Hold</Text>
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Hold Speed Selector */}
|
|
||||||
{holdToSpeedEnabled && (
|
|
||||||
<View style={{ marginBottom: 16 }}>
|
|
||||||
<Text style={{ color: 'white', fontWeight: '600', marginBottom: 10, fontSize: 15 }}>Hold Speed</Text>
|
|
||||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
|
|
||||||
{holdSpeedOptions.map((speed) => {
|
|
||||||
const isSelected = holdToSpeedValue === speed;
|
|
||||||
return (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={speed}
|
|
||||||
onPress={() => handleHoldSpeedSelect(speed)}
|
|
||||||
style={{
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingVertical: 8,
|
|
||||||
borderRadius: 20,
|
|
||||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
|
|
||||||
}}
|
|
||||||
activeOpacity={0.7}
|
|
||||||
>
|
|
||||||
<Text style={{
|
|
||||||
color: isSelected ? 'black' : 'white',
|
|
||||||
fontWeight: isSelected ? '700' : '500',
|
|
||||||
fontSize: 14
|
|
||||||
}}>
|
|
||||||
{speed}x
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Info Text */}
|
|
||||||
<View style={{
|
<View style={{
|
||||||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
width: 34, height: 18, borderRadius: 10,
|
||||||
borderRadius: 10,
|
backgroundColor: holdToSpeedEnabled ? 'white' : 'rgba(255,255,255,0.2)',
|
||||||
padding: 12,
|
padding: 2, alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start'
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: 'rgba(34, 197, 94, 0.3)',
|
|
||||||
}}>
|
}}>
|
||||||
<View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
|
<View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: holdToSpeedEnabled ? 'black' : 'white' }} />
|
||||||
<MaterialIcons name="info" size={16} color="#22C55E" />
|
|
||||||
<View style={{ flex: 1 }}>
|
|
||||||
<Text style={{
|
|
||||||
color: '#22C55E',
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: '600',
|
|
||||||
marginBottom: 4,
|
|
||||||
}}>
|
|
||||||
Hold left/right sides
|
|
||||||
</Text>
|
|
||||||
<Text style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
|
||||||
fontSize: 12,
|
|
||||||
lineHeight: 16,
|
|
||||||
}}>
|
|
||||||
Hold and press the left or right side of the video player to temporarily boost playback speed.
|
|
||||||
</Text>
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</TouchableOpacity>
|
||||||
</View>
|
|
||||||
</View>
|
{holdToSpeedEnabled && (
|
||||||
</ScrollView>
|
<Animated.View entering={FadeIn} style={{ flexDirection: 'row', gap: 8 }}>
|
||||||
|
{holdSpeedOptions.map((speed) => (
|
||||||
|
<MorphingButton
|
||||||
|
key={speed}
|
||||||
|
isSmall
|
||||||
|
label={`${speed}x`}
|
||||||
|
isSelected={holdToSpeedValue === speed}
|
||||||
|
onPress={() => setHoldToSpeedValue(speed)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</Animated.View>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue