Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-03-11 17:45:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added subtitlemodal

Browse source
This commit is contained in:
tapframe 2025-10-24 21:54:30 +05:30
parent 83df75915e
commit ed3aef88ff
3 changed files with 459 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
src/components/player/AndroidVideoPlayer.tsx
View file

@ -30,10 +30,14 @@ import {
RESUME_PREF,
SUBTITLE_SIZE_KEY
} from './utils/playerTypes';
// Speed settings storage key
const SPEED_SETTINGS_KEY = '@nuvio_speed_settings';
import { safeDebugLog, parseSRT, DEBUG_MODE, formatTime } from './utils/playerUtils';
import { styles } from './utils/playerStyles';
import { SubtitleModals } from './modals/SubtitleModals';
import { AudioTrackModal } from './modals/AudioTrackModal';
import SpeedModal from './modals/SpeedModal';
// Removed ResumeOverlay usage when alwaysResume is enabled
import PlayerControls from './controls/PlayerControls';
import CustomSubtitles from './subtitles/CustomSubtitles';
@ -219,6 +223,54 @@ const AndroidVideoPlayer: React.FC = () => {
// Speed boost state for hold-to-speed-up feature
const [isSpeedBoosted, setIsSpeedBoosted] = useState(false);
const [originalSpeed, setOriginalSpeed] = useState<number>(1.0);
const [showSpeedActivatedOverlay, setShowSpeedActivatedOverlay] = useState(false);
const speedActivatedOverlayOpacity = useRef(new Animated.Value(0)).current;
// Speed modal state
const [showSpeedModal, setShowSpeedModal] = useState(false);
const [holdToSpeedEnabled, setHoldToSpeedEnabled] = useState(true);
const [holdToSpeedValue, setHoldToSpeedValue] = useState(2.0);
// Load speed settings from storage
const loadSpeedSettings = useCallback(async () => {
try {
const saved = await AsyncStorage.getItem(SPEED_SETTINGS_KEY);
if (saved) {
const settings = JSON.parse(saved);
if (typeof settings.holdToSpeedEnabled === 'boolean') {
setHoldToSpeedEnabled(settings.holdToSpeedEnabled);
}
if (typeof settings.holdToSpeedValue === 'number') {
setHoldToSpeedValue(settings.holdToSpeedValue);
}
}
} catch (error) {
logger.warn('[AndroidVideoPlayer] Error loading speed settings:', error);
}
}, []);
// Save speed settings to storage
const saveSpeedSettings = useCallback(async () => {
try {
const settings = {
holdToSpeedEnabled,
holdToSpeedValue,
};
await AsyncStorage.setItem(SPEED_SETTINGS_KEY, JSON.stringify(settings));
} catch (error) {
logger.warn('[AndroidVideoPlayer] Error saving speed settings:', error);
}
}, [holdToSpeedEnabled, holdToSpeedValue]);
// Load speed settings on mount
useEffect(() => {
loadSpeedSettings();
}, [loadSpeedSettings]);
// Save speed settings when they change
useEffect(() => {
saveSpeedSettings();
}, [saveSpeedSettings]);
// Debounce track updates to prevent excessive processing
const trackUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@ -811,14 +863,36 @@ const AndroidVideoPlayer: React.FC = () => {
// Long press gesture handlers for speed boost
const onLongPressActivated = useCallback(() => {
if (!isSpeedBoosted && playbackSpeed !== 2.0) {
if (!holdToSpeedEnabled) return;
if (!isSpeedBoosted && playbackSpeed !== holdToSpeedValue) {
setOriginalSpeed(playbackSpeed);
setPlaybackSpeed(2.0);
setPlaybackSpeed(holdToSpeedValue);
setIsSpeedBoosted(true);
logger.log('[AndroidVideoPlayer] Speed boost activated: 2x');
// Show "Activated" overlay
setShowSpeedActivatedOverlay(true);
Animated.spring(speedActivatedOverlayOpacity, {
toValue: 1,
tension: 100,
friction: 8,
useNativeDriver: true,
}).start();
// Auto-hide after 2 seconds
setTimeout(() => {
Animated.timing(speedActivatedOverlayOpacity, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start(() => {
setShowSpeedActivatedOverlay(false);
});
}, 2000);
logger.log(`[AndroidVideoPlayer] Speed boost activated: ${holdToSpeedValue}x`);
}
}, [isSpeedBoosted, playbackSpeed]);
}, [isSpeedBoosted, playbackSpeed, holdToSpeedEnabled, holdToSpeedValue, speedActivatedOverlayOpacity]);
const onLongPressEnd = useCallback(() => {
if (isSpeedBoosted) {
@ -3510,6 +3584,7 @@ const AndroidVideoPlayer: React.FC = () => {
currentPlaybackSpeed={playbackSpeed}
setShowAudioModal={setShowAudioModal}
setShowSubtitleModal={setShowSubtitleModal}
setShowSpeedModal={setShowSpeedModal}
isSubtitleModalOpen={showSubtitleModal}
setShowSourcesModal={setShowSourcesModal}
onSliderValueChange={handleSliderValueChange}
@ -4092,6 +4167,42 @@ const AndroidVideoPlayer: React.FC = () => {
</Animated.View>
)}
{/* Speed Activated Overlay */}
{showSpeedActivatedOverlay && (
<Animated.View
style={{
position: 'absolute',
top: screenDimensions.height * 0.1,
left: screenDimensions.width / 2 - 40,
opacity: speedActivatedOverlayOpacity,
zIndex: 1000,
}}
>
<View style={{
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 6,
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 5,
}}>
<Text style={{
color: '#FFFFFF',
fontSize: 14,
fontWeight: '600',
letterSpacing: 0.5,
}}>
{holdToSpeedValue}x Speed Activated
</Text>
</View>
</Animated.View>
)}
{/* Resume overlay removed when AlwaysResume is enabled; overlay component omitted */}
</View>
</Animated.View>
@ -4151,6 +4262,17 @@ const AndroidVideoPlayer: React.FC = () => {
setSubtitleOffsetSec={setSubtitleOffsetSec}
/>
<SpeedModal
showSpeedModal={showSpeedModal}
setShowSpeedModal={setShowSpeedModal}
currentSpeed={playbackSpeed}
setPlaybackSpeed={setPlaybackSpeed}
holdToSpeedEnabled={holdToSpeedEnabled}
setHoldToSpeedEnabled={setHoldToSpeedEnabled}
holdToSpeedValue={holdToSpeedValue}
setHoldToSpeedValue={setHoldToSpeedValue}
/>
<SourcesModal
showSourcesModal={showSourcesModal}
setShowSourcesModal={setShowSourcesModal}

4
src/components/player/controls/PlayerControls.tsx
View file

@ -35,6 +35,7 @@ interface PlayerControlsProps {
currentPlaybackSpeed: number;
setShowAudioModal: (show: boolean) => void;
setShowSubtitleModal: (show: boolean) => void;
setShowSpeedModal: (show: boolean) => void;
isSubtitleModalOpen?: boolean;
setShowSourcesModal?: (show: boolean) => void;
// Slider-specific props
@ -77,6 +78,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
currentPlaybackSpeed,
setShowAudioModal,
setShowSubtitleModal,
setShowSpeedModal,
isSubtitleModalOpen,
setShowSourcesModal,
onSliderValueChange,
@ -537,7 +539,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
{/* Playback Speed Button - Temporarily hidden on iOS */}
{Platform.OS !== 'ios' && (
<TouchableOpacity style={styles.bottomButton} onPress={cyclePlaybackSpeed}>
<TouchableOpacity style={styles.bottomButton} onPress={() => setShowSpeedModal(true)}>
<Ionicons name="speedometer" size={20} color="white" />
<Text style={styles.bottomButtonText}>
Speed {currentPlaybackSpeed}x

330
src/components/player/modals/SpeedModal.tsx Normal file
View file

@ -0,0 +1,330 @@
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, 3.0];
const holdSpeedOptions = [1.5, 2.0, 2.5, 3.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 - Android Only */}
{Platform.OS === 'android' && (
<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;