addded playback speed to ksplayer.

This commit is contained in:
tapframe 2025-10-26 13:45:15 +05:30
parent c317e8562e
commit e1634195be
3 changed files with 204 additions and 53 deletions

View file

@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useNavigation, useRoute, RouteProp, useFocusEffect } from '@react-navigation/native'; import { useNavigation, useRoute, RouteProp, useFocusEffect } from '@react-navigation/native';
import FastImage from '@d11/react-native-fast-image'; import FastImage from '@d11/react-native-fast-image';
import { RootStackParamList, RootStackNavigationProp } from '../../navigation/AppNavigator'; import { RootStackParamList, RootStackNavigationProp } from '../../navigation/AppNavigator';
import { PinchGestureHandler, PanGestureHandler, TapGestureHandler, State, PinchGestureHandlerGestureEvent, PanGestureHandlerGestureEvent, TapGestureHandlerGestureEvent } from 'react-native-gesture-handler'; import { PinchGestureHandler, PanGestureHandler, TapGestureHandler, LongPressGestureHandler, State, PinchGestureHandlerGestureEvent, PanGestureHandlerGestureEvent, TapGestureHandlerGestureEvent, LongPressGestureHandlerGestureEvent } from 'react-native-gesture-handler';
import RNImmersiveMode from 'react-native-immersive-mode'; import RNImmersiveMode from 'react-native-immersive-mode';
import * as ScreenOrientation from 'expo-screen-orientation'; import * as ScreenOrientation from 'expo-screen-orientation';
import { storageService } from '../../services/storageService'; import { storageService } from '../../services/storageService';
@ -34,8 +34,12 @@ import {
} from './utils/playerTypes'; } from './utils/playerTypes';
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';
// Speed settings storage key
const SPEED_SETTINGS_KEY = '@nuvio_speed_settings';
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';
@ -199,8 +203,15 @@ const KSPlayerCore: React.FC = () => {
const [showSourcesModal, setShowSourcesModal] = useState<boolean>(false); const [showSourcesModal, setShowSourcesModal] = useState<boolean>(false);
const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: any[]; addonName: string } }>(passedAvailableStreams || {}); const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: any[]; addonName: string } }>(passedAvailableStreams || {});
// Playback speed controls required by PlayerControls // Playback speed controls required by PlayerControls
const speedOptions = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5, 3.0]; const speedOptions = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
const [playbackSpeed, setPlaybackSpeed] = useState<number>(1.0); const [playbackSpeed, setPlaybackSpeed] = useState<number>(1.0);
// Hold-to-speed-up feature state
const [holdToSpeedEnabled, setHoldToSpeedEnabled] = useState(true);
const [holdToSpeedValue, setHoldToSpeedValue] = useState(2.0);
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;
const cyclePlaybackSpeed = useCallback(() => { const cyclePlaybackSpeed = useCallback(() => {
const idx = speedOptions.indexOf(playbackSpeed); const idx = speedOptions.indexOf(playbackSpeed);
const nextIdx = (idx + 1) % speedOptions.length; const nextIdx = (idx + 1) % speedOptions.length;
@ -270,6 +281,47 @@ const KSPlayerCore: React.FC = () => {
debugMode: DEBUG_MODE, debugMode: DEBUG_MODE,
}); });
// Load speed settings from storage
const loadSpeedSettings = useCallback(async () => {
try {
const saved = await mmkvStorage.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('[KSPlayerCore] Error loading speed settings:', error);
}
}, []);
// Save speed settings to storage
const saveSpeedSettings = useCallback(async () => {
try {
const settings = {
holdToSpeedEnabled,
holdToSpeedValue,
};
await mmkvStorage.setItem(SPEED_SETTINGS_KEY, JSON.stringify(settings));
} catch (error) {
logger.warn('[KSPlayerCore] Error saving speed settings:', error);
}
}, [holdToSpeedEnabled, holdToSpeedValue]);
// Load speed settings on mount
useEffect(() => {
loadSpeedSettings();
}, [loadSpeedSettings]);
// Save speed settings when they change
useEffect(() => {
saveSpeedSettings();
}, [saveSpeedSettings]);
// Get metadata to access logo (only if we have a valid id) // Get metadata to access logo (only if we have a valid id)
const shouldLoadMetadata = Boolean(id && type); const shouldLoadMetadata = Boolean(id && type);
const metadataResult = useMetadata({ const metadataResult = useMetadata({
@ -434,6 +486,48 @@ const KSPlayerCore: React.FC = () => {
} }
}; };
// Long press gesture handlers for speed boost
const onLongPressActivated = useCallback(() => {
if (!holdToSpeedEnabled) return;
if (!isSpeedBoosted && playbackSpeed !== holdToSpeedValue) {
setOriginalSpeed(playbackSpeed);
setPlaybackSpeed(holdToSpeedValue);
setIsSpeedBoosted(true);
// 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(`[KSPlayerCore] Speed boost activated: ${holdToSpeedValue}x`);
}
}, [isSpeedBoosted, playbackSpeed, holdToSpeedEnabled, holdToSpeedValue, speedActivatedOverlayOpacity]);
const onLongPressEnd = useCallback(() => {
if (isSpeedBoosted) {
setPlaybackSpeed(originalSpeed);
setIsSpeedBoosted(false);
logger.log('[KSPlayerCore] Speed boost deactivated, restored to:', originalSpeed);
}
}, [isSpeedBoosted, originalSpeed]);
useEffect(() => { useEffect(() => {
if (videoAspectRatio && effectiveDimensions.width > 0 && effectiveDimensions.height > 0) { if (videoAspectRatio && effectiveDimensions.width > 0 && effectiveDimensions.height > 0) {
const styles = calculateVideoStyles( const styles = calculateVideoStyles(
@ -2489,55 +2583,71 @@ const KSPlayerCore: React.FC = () => {
} }
]} ]}
> >
{/* Combined gesture handler for left side - brightness + tap */} {/* Combined gesture handler for left side - brightness + tap + long press */}
<PanGestureHandler <LongPressGestureHandler
onGestureEvent={gestureControls.onBrightnessGestureEvent} onActivated={onLongPressActivated}
activeOffsetY={[-10, 10]} onEnded={onLongPressEnd}
failOffsetX={[-30, 30]} minDurationMs={500}
shouldCancelWhenOutside={false} shouldCancelWhenOutside={false}
simultaneousHandlers={[]} simultaneousHandlers={[]}
maxPointers={1}
> >
<TapGestureHandler <PanGestureHandler
onActivated={toggleControls} onGestureEvent={gestureControls.onBrightnessGestureEvent}
activeOffsetY={[-10, 10]}
failOffsetX={[-30, 30]}
shouldCancelWhenOutside={false} shouldCancelWhenOutside={false}
simultaneousHandlers={[]} simultaneousHandlers={[]}
maxPointers={1}
> >
<View style={{ <TapGestureHandler
position: 'absolute', onActivated={toggleControls}
top: getDimensions().height * 0.15, // Back to original margin shouldCancelWhenOutside={false}
left: 0, simultaneousHandlers={[]}
width: getDimensions().width * 0.4, // Back to larger area (40% of screen) >
height: getDimensions().height * 0.7, // Back to larger middle portion (70% of screen) <View style={{
zIndex: 10, // Higher z-index to capture gestures position: 'absolute',
}} /> top: getDimensions().height * 0.15, // Back to original margin
</TapGestureHandler> left: 0,
</PanGestureHandler> width: getDimensions().width * 0.4, // Back to larger area (40% of screen)
height: getDimensions().height * 0.7, // Back to larger middle portion (70% of screen)
zIndex: 10, // Higher z-index to capture gestures
}} />
</TapGestureHandler>
</PanGestureHandler>
</LongPressGestureHandler>
{/* Combined gesture handler for right side - volume + tap */} {/* Combined gesture handler for right side - volume + tap + long press */}
<PanGestureHandler <LongPressGestureHandler
onGestureEvent={gestureControls.onVolumeGestureEvent} onActivated={onLongPressActivated}
activeOffsetY={[-10, 10]} onEnded={onLongPressEnd}
failOffsetX={[-30, 30]} minDurationMs={500}
shouldCancelWhenOutside={false} shouldCancelWhenOutside={false}
simultaneousHandlers={[]} simultaneousHandlers={[]}
maxPointers={1}
> >
<TapGestureHandler <PanGestureHandler
onActivated={toggleControls} onGestureEvent={gestureControls.onVolumeGestureEvent}
activeOffsetY={[-10, 10]}
failOffsetX={[-30, 30]}
shouldCancelWhenOutside={false} shouldCancelWhenOutside={false}
simultaneousHandlers={[]} simultaneousHandlers={[]}
maxPointers={1}
> >
<View style={{ <TapGestureHandler
position: 'absolute', onActivated={toggleControls}
top: getDimensions().height * 0.15, // Back to original margin shouldCancelWhenOutside={false}
right: 0, simultaneousHandlers={[]}
width: getDimensions().width * 0.4, // Back to larger area (40% of screen) >
height: getDimensions().height * 0.7, // Back to larger middle portion (70% of screen) <View style={{
zIndex: 10, // Higher z-index to capture gestures position: 'absolute',
}} /> top: getDimensions().height * 0.15, // Back to original margin
</TapGestureHandler> right: 0,
</PanGestureHandler> width: getDimensions().width * 0.4, // Back to larger area (40% of screen)
height: getDimensions().height * 0.7, // Back to larger middle portion (70% of screen)
zIndex: 10, // Higher z-index to capture gestures
}} />
</TapGestureHandler>
</PanGestureHandler>
</LongPressGestureHandler>
{/* Center area tap handler - handles both show and hide */} {/* Center area tap handler - handles both show and hide */}
<TapGestureHandler <TapGestureHandler
@ -3235,6 +3345,41 @@ const KSPlayerCore: React.FC = () => {
</Animated.View> </Animated.View>
)} )}
{/* Speed Activated Overlay */}
{showSpeedActivatedOverlay && (
<Animated.View
style={{
position: 'absolute',
top: getDimensions().height * 0.1,
left: getDimensions().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>
@ -3247,6 +3392,16 @@ const KSPlayerCore: React.FC = () => {
selectedAudioTrack={selectedAudioTrack} selectedAudioTrack={selectedAudioTrack}
selectAudioTrack={selectAudioTrack} selectAudioTrack={selectAudioTrack}
/> />
<SpeedModal
showSpeedModal={showSpeedModal}
setShowSpeedModal={setShowSpeedModal}
currentSpeed={playbackSpeed}
setPlaybackSpeed={setPlaybackSpeed}
holdToSpeedEnabled={holdToSpeedEnabled}
setHoldToSpeedEnabled={setHoldToSpeedEnabled}
holdToSpeedValue={holdToSpeedValue}
setHoldToSpeedValue={setHoldToSpeedValue}
/>
<SubtitleModals <SubtitleModals
showSubtitleModal={showSubtitleModal} showSubtitleModal={showSubtitleModal}
setShowSubtitleModal={setShowSubtitleModal} setShowSubtitleModal={setShowSubtitleModal}

View file

@ -537,15 +537,13 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
{/* Playback Speed Button - Temporarily hidden on iOS */} {/* Playback Speed Button */}
{Platform.OS !== 'ios' && ( <TouchableOpacity style={styles.bottomButton} onPress={() => setShowSpeedModal(true)}>
<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 </Text>
</Text> </TouchableOpacity>
</TouchableOpacity>
)}
{/* Audio Button - Updated to use ksAudioTracks */} {/* Audio Button - Updated to use ksAudioTracks */}
<TouchableOpacity <TouchableOpacity

View file

@ -45,8 +45,8 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
isIos ? 380 : 360 isIos ? 380 : 360
); );
const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5, 3.0]; const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5];
const holdSpeedOptions = [1.5, 2.0, 2.5, 3.0]; const holdSpeedOptions = [1.5, 2.0];
const handleClose = () => { const handleClose = () => {
setShowSpeedModal(false); setShowSpeedModal(false);
@ -215,9 +215,8 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
</View> </View>
</View> </View>
{/* Hold-to-Speed Settings - Android Only */} {/* Hold-to-Speed Settings */}
{Platform.OS === 'android' && ( <View style={{ gap: isCompact ? 8 : 12 }}>
<View style={{ gap: isCompact ? 8 : 12 }}>
<View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: sectionPad }}> <View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: sectionPad }}>
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}> <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
<MaterialIcons name="touch-app" size={14} color="rgba(255,255,255,0.7)" /> <MaterialIcons name="touch-app" size={14} color="rgba(255,255,255,0.7)" />
@ -313,7 +312,6 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
</View> </View>
</View> </View>
</View> </View>
)}
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</> </>