mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-21 08:41:57 +00:00
Added subtitlemodal
This commit is contained in:
tapframe
parent
83df75915e
commit
ed3aef88ff
3 changed files with 459 additions and 5 deletions
|
|
@ -30,10 +30,14 @@ import {
|
||||||
RESUME_PREF,
|
RESUME_PREF,
|
||||||
SUBTITLE_SIZE_KEY
|
SUBTITLE_SIZE_KEY
|
||||||
} from './utils/playerTypes';
|
} from './utils/playerTypes';
|
||||||
|
|
||||||
|
// Speed settings storage key
|
||||||
|
const SPEED_SETTINGS_KEY = '@nuvio_speed_settings';
|
||||||
import { safeDebugLog, parseSRT, DEBUG_MODE, formatTime } from './utils/playerUtils';
|
import { safeDebugLog, parseSRT, DEBUG_MODE, formatTime } from './utils/playerUtils';
|
||||||
import { styles } from './utils/playerStyles';
|
import { styles } from './utils/playerStyles';
|
||||||
import { SubtitleModals } from './modals/SubtitleModals';
|
import { SubtitleModals } from './modals/SubtitleModals';
|
||||||
import { AudioTrackModal } from './modals/AudioTrackModal';
|
import { AudioTrackModal } from './modals/AudioTrackModal';
|
||||||
|
import SpeedModal from './modals/SpeedModal';
|
||||||
// Removed ResumeOverlay usage when alwaysResume is enabled
|
// Removed ResumeOverlay usage when alwaysResume is enabled
|
||||||
import PlayerControls from './controls/PlayerControls';
|
import PlayerControls from './controls/PlayerControls';
|
||||||
import CustomSubtitles from './subtitles/CustomSubtitles';
|
import CustomSubtitles from './subtitles/CustomSubtitles';
|
||||||
|
|
@ -219,6 +223,54 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
// Speed boost state for hold-to-speed-up feature
|
// Speed boost state for hold-to-speed-up feature
|
||||||
const [isSpeedBoosted, setIsSpeedBoosted] = useState(false);
|
const [isSpeedBoosted, setIsSpeedBoosted] = useState(false);
|
||||||
const [originalSpeed, setOriginalSpeed] = useState<number>(1.0);
|
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
|
// Debounce track updates to prevent excessive processing
|
||||||
const trackUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
const trackUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
|
@ -811,14 +863,36 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
|
|
||||||
// Long press gesture handlers for speed boost
|
// Long press gesture handlers for speed boost
|
||||||
const onLongPressActivated = useCallback(() => {
|
const onLongPressActivated = useCallback(() => {
|
||||||
if (!isSpeedBoosted && playbackSpeed !== 2.0) {
|
if (!holdToSpeedEnabled) return;
|
||||||
|
|
||||||
|
if (!isSpeedBoosted && playbackSpeed !== holdToSpeedValue) {
|
||||||
setOriginalSpeed(playbackSpeed);
|
setOriginalSpeed(playbackSpeed);
|
||||||
setPlaybackSpeed(2.0);
|
setPlaybackSpeed(holdToSpeedValue);
|
||||||
setIsSpeedBoosted(true);
|
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(() => {
|
const onLongPressEnd = useCallback(() => {
|
||||||
if (isSpeedBoosted) {
|
if (isSpeedBoosted) {
|
||||||
|
|
@ -3510,6 +3584,7 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
currentPlaybackSpeed={playbackSpeed}
|
currentPlaybackSpeed={playbackSpeed}
|
||||||
setShowAudioModal={setShowAudioModal}
|
setShowAudioModal={setShowAudioModal}
|
||||||
setShowSubtitleModal={setShowSubtitleModal}
|
setShowSubtitleModal={setShowSubtitleModal}
|
||||||
|
setShowSpeedModal={setShowSpeedModal}
|
||||||
isSubtitleModalOpen={showSubtitleModal}
|
isSubtitleModalOpen={showSubtitleModal}
|
||||||
setShowSourcesModal={setShowSourcesModal}
|
setShowSourcesModal={setShowSourcesModal}
|
||||||
onSliderValueChange={handleSliderValueChange}
|
onSliderValueChange={handleSliderValueChange}
|
||||||
|
|
@ -4092,6 +4167,42 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
</Animated.View>
|
</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 */}
|
{/* Resume overlay removed when AlwaysResume is enabled; overlay component omitted */}
|
||||||
</View>
|
</View>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
|
@ -4151,6 +4262,17 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
setSubtitleOffsetSec={setSubtitleOffsetSec}
|
setSubtitleOffsetSec={setSubtitleOffsetSec}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<SpeedModal
|
||||||
|
showSpeedModal={showSpeedModal}
|
||||||
|
setShowSpeedModal={setShowSpeedModal}
|
||||||
|
currentSpeed={playbackSpeed}
|
||||||
|
setPlaybackSpeed={setPlaybackSpeed}
|
||||||
|
holdToSpeedEnabled={holdToSpeedEnabled}
|
||||||
|
setHoldToSpeedEnabled={setHoldToSpeedEnabled}
|
||||||
|
holdToSpeedValue={holdToSpeedValue}
|
||||||
|
setHoldToSpeedValue={setHoldToSpeedValue}
|
||||||
|
/>
|
||||||
|
|
||||||
<SourcesModal
|
<SourcesModal
|
||||||
showSourcesModal={showSourcesModal}
|
showSourcesModal={showSourcesModal}
|
||||||
setShowSourcesModal={setShowSourcesModal}
|
setShowSourcesModal={setShowSourcesModal}
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@ interface PlayerControlsProps {
|
||||||
currentPlaybackSpeed: number;
|
currentPlaybackSpeed: number;
|
||||||
setShowAudioModal: (show: boolean) => void;
|
setShowAudioModal: (show: boolean) => void;
|
||||||
setShowSubtitleModal: (show: boolean) => void;
|
setShowSubtitleModal: (show: boolean) => void;
|
||||||
|
setShowSpeedModal: (show: boolean) => void;
|
||||||
isSubtitleModalOpen?: boolean;
|
isSubtitleModalOpen?: boolean;
|
||||||
setShowSourcesModal?: (show: boolean) => void;
|
setShowSourcesModal?: (show: boolean) => void;
|
||||||
// Slider-specific props
|
// Slider-specific props
|
||||||
|
|
@ -77,6 +78,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
|
||||||
currentPlaybackSpeed,
|
currentPlaybackSpeed,
|
||||||
setShowAudioModal,
|
setShowAudioModal,
|
||||||
setShowSubtitleModal,
|
setShowSubtitleModal,
|
||||||
|
setShowSpeedModal,
|
||||||
isSubtitleModalOpen,
|
isSubtitleModalOpen,
|
||||||
setShowSourcesModal,
|
setShowSourcesModal,
|
||||||
onSliderValueChange,
|
onSliderValueChange,
|
||||||
|
|
@ -537,7 +539,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
|
||||||
|
|
||||||
{/* Playback Speed Button - Temporarily hidden on iOS */}
|
{/* Playback Speed Button - Temporarily hidden on iOS */}
|
||||||
{Platform.OS !== 'ios' && (
|
{Platform.OS !== 'ios' && (
|
||||||
<TouchableOpacity style={styles.bottomButton} onPress={cyclePlaybackSpeed}>
|
<TouchableOpacity style={styles.bottomButton} onPress={() => setShowSpeedModal(true)}>
|
||||||
<Ionicons name="speedometer" size={20} color="white" />
|
<Ionicons name="speedometer" size={20} color="white" />
|
||||||
<Text style={styles.bottomButtonText}>
|
<Text style={styles.bottomButtonText}>
|
||||||
Speed {currentPlaybackSpeed}x
|
Speed {currentPlaybackSpeed}x
|
||||||
|
|
|
||||||
330
src/components/player/modals/SpeedModal.tsx
Normal file
330
src/components/player/modals/SpeedModal.tsx
Normal 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;
|
||||||
Loading…
Reference in a new issue