update aspect ratio indicator ios

This commit is contained in:
tapframe 2026-01-21 17:51:17 +05:30
parent 154d568aa3
commit a042cf5ca6
3 changed files with 38 additions and 1 deletions

View file

@ -802,6 +802,7 @@ const KSPlayerCore: React.FC = () => {
volume={volume} volume={volume}
brightness={brightness} brightness={brightness}
controlsTimeout={controlsTimeout} controlsTimeout={controlsTimeout}
resizeMode={resizeMode}
/> />
{/* UI Controls */} {/* UI Controls */}
@ -829,7 +830,21 @@ const KSPlayerCore: React.FC = () => {
togglePlayback={controls.togglePlayback} togglePlayback={controls.togglePlayback}
skip={controls.skip} skip={controls.skip}
handleClose={handleClose} handleClose={handleClose}
cycleAspectRatio={() => setResizeMode(prev => prev === 'cover' ? 'contain' : 'cover')} cycleAspectRatio={() => {
gestureControls.showResizeModeOverlayFn(() => {
setResizeMode(prev => {
switch (prev) {
case 'contain':
return 'cover';
case 'cover':
return 'stretch';
case 'stretch':
default:
return 'contain';
}
});
});
}}
cyclePlaybackSpeed={() => speedControl.setPlaybackSpeed(speedControl.playbackSpeed >= 2 ? 1 : speedControl.playbackSpeed + 0.25)} cyclePlaybackSpeed={() => speedControl.setPlaybackSpeed(speedControl.playbackSpeed >= 2 ? 1 : speedControl.playbackSpeed + 0.25)}
currentPlaybackSpeed={speedControl.playbackSpeed} currentPlaybackSpeed={speedControl.playbackSpeed}
setShowAudioModal={modals.setShowAudioModal} setShowAudioModal={modals.setShowAudioModal}

View file

@ -10,6 +10,7 @@ export interface MpvPlayerRef {
seek: (positionSeconds: number) => void; seek: (positionSeconds: number) => void;
setAudioTrack: (trackId: number) => void; setAudioTrack: (trackId: number) => void;
setSubtitleTrack: (trackId: number) => void; setSubtitleTrack: (trackId: number) => void;
setResizeMode: (mode: 'contain' | 'cover' | 'stretch') => void;
} }
export interface MpvPlayerProps { export interface MpvPlayerProps {
@ -65,6 +66,9 @@ const MpvPlayer = forwardRef<MpvPlayerRef, MpvPlayerProps>((props, ref) => {
setSubtitleTrack: (trackId: number) => { setSubtitleTrack: (trackId: number) => {
dispatchCommand('setSubtitleTrack', [trackId]); dispatchCommand('setSubtitleTrack', [trackId]);
}, },
setResizeMode: (mode: 'contain' | 'cover' | 'stretch') => {
dispatchCommand('setResizeMode', [mode]);
},
}), [dispatchCommand]); }), [dispatchCommand]);
if (Platform.OS !== 'android' || !MpvPlayerNative) { if (Platform.OS !== 'android' || !MpvPlayerNative) {

View file

@ -183,6 +183,12 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
console.log('[VideoSurface] Headers:', exoRequestHeaders); console.log('[VideoSurface] Headers:', exoRequestHeaders);
}, [streamUrl, useExoPlayer, exoRequestHeaders]); }, [streamUrl, useExoPlayer, exoRequestHeaders]);
useEffect(() => {
if (mpvPlayerRef?.current && !useExoPlayer) {
mpvPlayerRef.current.setResizeMode(getMpvResizeMode());
}
}, [resizeMode, useExoPlayer, mpvPlayerRef]);
const handleMpvLoad = (data: { duration: number; width: number; height: number }) => { const handleMpvLoad = (data: { duration: number; width: number; height: number }) => {
console.log('[VideoSurface] MPV onLoad received:', data); console.log('[VideoSurface] MPV onLoad received:', data);
onLoad({ onLoad({
@ -300,6 +306,18 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
} }
}; };
const getMpvResizeMode = (): 'contain' | 'cover' | 'stretch' => {
switch (resizeMode) {
case 'cover':
return 'cover';
case 'stretch':
return 'stretch';
case 'contain':
default:
return 'contain';
}
};
const alphaHex = (opacity01: number) => { const alphaHex = (opacity01: number) => {
const a = Math.max(0, Math.min(1, opacity01)); const a = Math.max(0, Math.min(1, opacity01));
return Math.round(a * 255).toString(16).padStart(2, '0').toUpperCase(); return Math.round(a * 255).toString(16).padStart(2, '0').toUpperCase();