mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-20 16:22:04 +00:00
addded playback speed to ksplayer.
This commit is contained in:
parent
c317e8562e
commit
e1634195be
3 changed files with 204 additions and 53 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue