Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-05-15 22:42:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui changes

Browse source
This commit is contained in:
tapframe 2025-12-31 03:26:25 +05:30
parent bf75cca438
commit af96d30122
1 changed files with 214 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

302
src/components/player/modals/SubtitleSyncModal.tsx
View file

@ -12,7 +12,19 @@ import {
useWindowDimensions, useWindowDimensions,
StatusBar, StatusBar,
BackHandler, BackHandler,
Platform,
} from 'react-native'; } from 'react-native';
import { BlurView as ExpoBlurView } from 'expo-blur';
// Dynamically import community blur for Android
let AndroidBlurView: any = null;
if (Platform.OS === 'android') {
try {
AndroidBlurView = require('@react-native-community/blur').BlurView;
} catch (e) {
AndroidBlurView = null;
}
}
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Slider from '@react-native-community/slider'; import Slider from '@react-native-community/slider';
@ -265,103 +277,214 @@ export const SubtitleSyncModal: React.FC<SubtitleSyncModalProps> = ({
</View> </View>
</View> </View>
{/* Right side - Controls */} {/* Right side - Controls with blur background */}
<View style={[ {Platform.OS === 'android' && AndroidBlurView ? (
styles.rightPanel, <View style={[
{ styles.rightPanel,
width: rightPanelWidth, styles.androidRightPanelContainer,
paddingBottom: Math.max(insets.bottom, isLargeScreen ? 48 : 16), {
paddingTop: isLargeScreen ? 48 : 32 width: rightPanelWidth,
} paddingBottom: Math.max(insets.bottom, isLargeScreen ? 48 : 16),
]}> paddingTop: isLargeScreen ? 48 : 32,
{/* Offset display */} }
<View style={styles.offsetContainer}> ]}>
<Text style={[styles.offsetLabel, isLargeScreen && styles.offsetLabelLarge]}>Delay</Text> <AndroidBlurView
<Text style={[ blurType="dark"
styles.offsetValue, blurAmount={15}
{ color: primaryColor }, blurRadius={8}
isLargeScreen && styles.offsetValueLarge style={StyleSheet.absoluteFill}
]}> />
{formatOffset(tempOffset)} {/* Offset display */}
</Text> <View style={styles.offsetContainer}>
</View> <Text style={[styles.offsetLabel, isLargeScreen && styles.offsetLabelLarge]}>Delay</Text>
<Text style={[
styles.offsetValue,
{ color: primaryColor },
isLargeScreen && styles.offsetValueLarge
]}>
{formatOffset(tempOffset)}
</Text>
</View>
{/* Slider - horizontal with buttons */} {/* Slider - horizontal with buttons */}
<View style={styles.sliderContainer}> <View style={styles.sliderContainer}>
<View style={styles.sliderRow}> <View style={styles.sliderRow}>
<TouchableOpacity
onPress={() => handleSliderChange(tempOffset - 0.1)}
style={[styles.nudgeBtn, isLargeScreen && styles.nudgeBtnLarge]}
>
<MaterialIcons name="remove" size={isLargeScreen ? 28 : 20} color="#fff" />
</TouchableOpacity>
<Slider
style={styles.slider}
minimumValue={-10}
maximumValue={10}
step={0.1}
value={tempOffset}
onValueChange={handleSliderChange}
minimumTrackTintColor={primaryColor}
maximumTrackTintColor="rgba(255,255,255,0.25)"
thumbTintColor={primaryColor}
/>
<TouchableOpacity
onPress={() => handleSliderChange(tempOffset + 0.1)}
style={[styles.nudgeBtn, isLargeScreen && styles.nudgeBtnLarge]}
>
<MaterialIcons name="add" size={isLargeScreen ? 28 : 20} color="#fff" />
</TouchableOpacity>
</View>
<View style={styles.sliderLabels}>
<Text style={styles.sliderLabel}>-10s</Text>
<Text style={styles.sliderLabel}>+10s</Text>
</View>
</View>
{/* Reset Button */}
<View style={styles.resetBtnContainer}>
<TouchableOpacity <TouchableOpacity
onPress={() => handleSliderChange(tempOffset - 0.1)} onPress={handleReset}
style={[styles.nudgeBtn, isLargeScreen && styles.nudgeBtnLarge]} style={[
styles.resetBtn,
isLargeScreen && styles.resetBtnLarge
]}
activeOpacity={0.7}
> >
<MaterialIcons name="remove" size={isLargeScreen ? 28 : 20} color="#fff" /> <MaterialIcons name="refresh" size={isLargeScreen ? 16 : 14} color="#fff" style={{ marginRight: 4 }} />
</TouchableOpacity> <Text style={[styles.resetBtnText, isLargeScreen && styles.resetBtnTextLarge]}>Reset</Text>
<Slider
style={styles.slider}
minimumValue={-10}
maximumValue={10}
step={0.1}
value={tempOffset}
onValueChange={handleSliderChange}
minimumTrackTintColor={primaryColor}
maximumTrackTintColor="rgba(255,255,255,0.25)"
thumbTintColor={primaryColor}
/>
<TouchableOpacity
onPress={() => handleSliderChange(tempOffset + 0.1)}
style={[styles.nudgeBtn, isLargeScreen && styles.nudgeBtnLarge]}
>
<MaterialIcons name="add" size={isLargeScreen ? 28 : 20} color="#fff" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.sliderLabels}>
<Text style={styles.sliderLabel}>-10s</Text> {/* Buttons - stacked vertically */}
<Text style={styles.sliderLabel}>+10s</Text> <View style={[styles.buttons, isLargeScreen && { gap: 16 }]}>
<TouchableOpacity
style={[
styles.okBtn,
{ backgroundColor: primaryColor },
isLargeScreen && styles.btnLarge
]}
onPress={handleConfirm}
activeOpacity={0.7}
>
<Text style={[styles.okBtnText, isLargeScreen && styles.btnTextLarge]}>OK</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.cancelBtn,
isLargeScreen && styles.btnLarge
]}
onPress={onClose}
activeOpacity={0.7}
>
<Text style={[styles.cancelBtnText, isLargeScreen && styles.btnTextLarge]}>CANCEL</Text>
</TouchableOpacity>
</View> </View>
</View> </View>
) : (
<ExpoBlurView
intensity={80}
tint="dark"
style={[
styles.rightPanel,
{
width: rightPanelWidth,
paddingBottom: Math.max(insets.bottom, isLargeScreen ? 48 : 16),
paddingTop: isLargeScreen ? 48 : 32,
overflow: 'hidden',
}
]}
>
{/* Offset display */}
<View style={styles.offsetContainer}>
<Text style={[styles.offsetLabel, isLargeScreen && styles.offsetLabelLarge]}>Delay</Text>
<Text style={[
styles.offsetValue,
{ color: primaryColor },
isLargeScreen && styles.offsetValueLarge
]}>
{formatOffset(tempOffset)}
</Text>
</View>
{/* Reset Button */} {/* Slider - horizontal with buttons */}
<View style={styles.resetBtnContainer}> <View style={styles.sliderContainer}>
<TouchableOpacity <View style={styles.sliderRow}>
onPress={handleReset} <TouchableOpacity
style={[ onPress={() => handleSliderChange(tempOffset - 0.1)}
styles.resetBtn, style={[styles.nudgeBtn, isLargeScreen && styles.nudgeBtnLarge]}
isLargeScreen && styles.resetBtnLarge >
]} <MaterialIcons name="remove" size={isLargeScreen ? 28 : 20} color="#fff" />
activeOpacity={0.7} </TouchableOpacity>
>
<MaterialIcons name="refresh" size={isLargeScreen ? 16 : 14} color="#fff" style={{ marginRight: 4 }} />
<Text style={[styles.resetBtnText, isLargeScreen && styles.resetBtnTextLarge]}>Reset</Text>
</TouchableOpacity>
</View>
{/* Buttons - stacked vertically */} <Slider
<View style={[styles.buttons, isLargeScreen && { gap: 16 }]}> style={styles.slider}
<TouchableOpacity minimumValue={-10}
style={[ maximumValue={10}
styles.okBtn, step={0.1}
{ backgroundColor: primaryColor }, value={tempOffset}
isLargeScreen && styles.btnLarge onValueChange={handleSliderChange}
]} minimumTrackTintColor={primaryColor}
onPress={handleConfirm} maximumTrackTintColor="rgba(255,255,255,0.25)"
activeOpacity={0.7} thumbTintColor={primaryColor}
> />
<Text style={[styles.okBtnText, isLargeScreen && styles.btnTextLarge]}>OK</Text>
</TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[ onPress={() => handleSliderChange(tempOffset + 0.1)}
styles.cancelBtn, style={[styles.nudgeBtn, isLargeScreen && styles.nudgeBtnLarge]}
isLargeScreen && styles.btnLarge >
]} <MaterialIcons name="add" size={isLargeScreen ? 28 : 20} color="#fff" />
onPress={onClose} </TouchableOpacity>
activeOpacity={0.7} </View>
> <View style={styles.sliderLabels}>
<Text style={[styles.cancelBtnText, isLargeScreen && styles.btnTextLarge]}>CANCEL</Text> <Text style={styles.sliderLabel}>-10s</Text>
</TouchableOpacity> <Text style={styles.sliderLabel}>+10s</Text>
</View> </View>
</View> </View>
{/* Reset Button */}
<View style={styles.resetBtnContainer}>
<TouchableOpacity
onPress={handleReset}
style={[
styles.resetBtn,
isLargeScreen && styles.resetBtnLarge
]}
activeOpacity={0.7}
>
<MaterialIcons name="refresh" size={isLargeScreen ? 16 : 14} color="#fff" style={{ marginRight: 4 }} />
<Text style={[styles.resetBtnText, isLargeScreen && styles.resetBtnTextLarge]}>Reset</Text>
</TouchableOpacity>
</View>
{/* Buttons - stacked vertically */}
<View style={[styles.buttons, isLargeScreen && { gap: 16 }]}>
<TouchableOpacity
style={[
styles.okBtn,
{ backgroundColor: primaryColor },
isLargeScreen && styles.btnLarge
]}
onPress={handleConfirm}
activeOpacity={0.7}
>
<Text style={[styles.okBtnText, isLargeScreen && styles.btnTextLarge]}>OK</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.cancelBtn,
isLargeScreen && styles.btnLarge
]}
onPress={onClose}
activeOpacity={0.7}
>
<Text style={[styles.cancelBtnText, isLargeScreen && styles.btnTextLarge]}>CANCEL</Text>
</TouchableOpacity>
</View>
</ExpoBlurView>
)}
</View> </View>
</Animated.View> </Animated.View>
); );
@ -384,12 +507,15 @@ const styles = StyleSheet.create({
}, },
rightPanel: { rightPanel: {
width: 320, width: 320,
backgroundColor: 'rgba(255,255,255,0.05)',
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 32, paddingVertical: 32,
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
androidRightPanelContainer: {
backgroundColor: 'rgba(20,20,20,0.85)',
overflow: 'hidden',
},
subtitleArea: { subtitleArea: {
alignItems: 'center', alignItems: 'center',
width: '100%', width: '100%',