Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-05-07 18:49:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

macos fullscreen player issue fix

Browse source
This commit is contained in:
tapframe 2025-10-19 18:08:37 +05:30
parent ac5326ba3f
commit 18bd6ff3ca
4 changed files with 40 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/player/KSPlayerCore.tsx
View file

@ -94,13 +94,20 @@ const KSPlayerCore: React.FC = () => {
const screenData = Dimensions.get('screen'); const screenData = Dimensions.get('screen');
const [screenDimensions, setScreenDimensions] = useState(screenData); const [screenDimensions, setScreenDimensions] = useState(screenData);
// iPad-specific fullscreen handling // iPad/macOS-specific fullscreen handling
const isIPad = Platform.OS === 'ios' && (screenData.width > 1000 || screenData.height > 1000); const isIPad = Platform.OS === 'ios' && (screenData.width > 1000 || screenData.height > 1000);
const shouldUseFullscreen = isIPad; const isMacOS = Platform.OS === 'ios' && Platform.isPad === true;
const shouldUseFullscreen = isIPad || isMacOS;
// Use window dimensions for iPad instead of screen dimensions // Use window dimensions for iPad instead of screen dimensions
const windowData = Dimensions.get('window'); const windowData = Dimensions.get('window');
const effectiveDimensions = shouldUseFullscreen ? windowData : screenData; const effectiveDimensions = shouldUseFullscreen ? windowData : screenData;
// Helper to get appropriate dimensions for gesture areas and overlays
const getDimensions = () => ({
width: shouldUseFullscreen ? windowData.width : screenDimensions.width,
height: shouldUseFullscreen ? windowData.height : screenDimensions.height,
});
const [paused, setPaused] = useState(false); const [paused, setPaused] = useState(false);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
@ -2419,7 +2426,7 @@ const KSPlayerCore: React.FC = () => {
<View style={[ <View style={[
styles.container, styles.container,
shouldUseFullscreen ? { shouldUseFullscreen ? {
// iPad fullscreen: use flex layout instead of absolute positioning // iPad/macOS fullscreen: use flex layout instead of absolute positioning
flex: 1, flex: 1,
width: '100%', width: '100%',
height: '100%', height: '100%',
@ -2438,8 +2445,8 @@ const KSPlayerCore: React.FC = () => {
{ {
opacity: backgroundFadeAnim, opacity: backgroundFadeAnim,
zIndex: shouldHideOpeningOverlay ? -1 : 3000, zIndex: shouldHideOpeningOverlay ? -1 : 3000,
width: screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
} }
]} ]}
pointerEvents={shouldHideOpeningOverlay ? 'none' : 'auto'} pointerEvents={shouldHideOpeningOverlay ? 'none' : 'auto'}
@ -2448,8 +2455,8 @@ const KSPlayerCore: React.FC = () => {
<Animated.View style={[ <Animated.View style={[
StyleSheet.absoluteFill, StyleSheet.absoluteFill,
{ {
width: screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
opacity: backdropImageOpacityAnim opacity: backdropImageOpacityAnim
} }
]}> ]}>
@ -2514,8 +2521,8 @@ const KSPlayerCore: React.FC = () => {
style={[ style={[
styles.sourceChangeOverlay, styles.sourceChangeOverlay,
{ {
width: screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
opacity: fadeAnim, opacity: fadeAnim,
} }
]} ]}
@ -2535,8 +2542,8 @@ const KSPlayerCore: React.FC = () => {
{ {
opacity: DISABLE_OPENING_OVERLAY ? 1 : openingFadeAnim, opacity: DISABLE_OPENING_OVERLAY ? 1 : openingFadeAnim,
transform: DISABLE_OPENING_OVERLAY ? [] : [{ scale: openingScaleAnim }], transform: DISABLE_OPENING_OVERLAY ? [] : [{ scale: openingScaleAnim }],
width: screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
} }
]} ]}
> >
@ -2556,10 +2563,10 @@ const KSPlayerCore: React.FC = () => {
> >
<View style={{ <View style={{
position: 'absolute', position: 'absolute',
top: screenDimensions.height * 0.15, // Back to original margin top: getDimensions().height * 0.15, // Back to original margin
left: 0, left: 0,
width: screenDimensions.width * 0.4, // Back to larger area (40% of screen) width: getDimensions().width * 0.4, // Back to larger area (40% of screen)
height: screenDimensions.height * 0.7, // Back to larger middle portion (70% of screen) height: getDimensions().height * 0.7, // Back to larger middle portion (70% of screen)
zIndex: 10, // Higher z-index to capture gestures zIndex: 10, // Higher z-index to capture gestures
}} /> }} />
</TapGestureHandler> </TapGestureHandler>
@ -2581,10 +2588,10 @@ const KSPlayerCore: React.FC = () => {
> >
<View style={{ <View style={{
position: 'absolute', position: 'absolute',
top: screenDimensions.height * 0.15, // Back to original margin top: getDimensions().height * 0.15, // Back to original margin
right: 0, right: 0,
width: screenDimensions.width * 0.4, // Back to larger area (40% of screen) width: getDimensions().width * 0.4, // Back to larger area (40% of screen)
height: screenDimensions.height * 0.7, // Back to larger middle portion (70% of screen) height: getDimensions().height * 0.7, // Back to larger middle portion (70% of screen)
zIndex: 10, // Higher z-index to capture gestures zIndex: 10, // Higher z-index to capture gestures
}} /> }} />
</TapGestureHandler> </TapGestureHandler>
@ -2613,18 +2620,18 @@ const KSPlayerCore: React.FC = () => {
> >
<View style={{ <View style={{
position: 'absolute', position: 'absolute',
top: screenDimensions.height * 0.15, top: getDimensions().height * 0.15,
left: screenDimensions.width * 0.4, // Start after left gesture area left: getDimensions().width * 0.4, // Start after left gesture area
width: screenDimensions.width * 0.2, // Center area (20% of screen) width: getDimensions().width * 0.2, // Center area (20% of screen)
height: screenDimensions.height * 0.7, height: getDimensions().height * 0.7,
zIndex: 5, // Lower z-index, controls use box-none to allow touches through zIndex: 5, // Lower z-index, controls use box-none to allow touches through
}} /> }} />
</TapGestureHandler> </TapGestureHandler>
<View <View
style={[styles.videoContainer, { style={[styles.videoContainer, {
width: screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
}]} }]}
> >
@ -2637,8 +2644,8 @@ const KSPlayerCore: React.FC = () => {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
width: screenDimensions.width, width: getDimensions().width,
height: screenDimensions.height, height: getDimensions().height,
}}> }}>
<TouchableOpacity <TouchableOpacity
style={{ flex: 1 }} style={{ flex: 1 }}
@ -2727,7 +2734,7 @@ const KSPlayerCore: React.FC = () => {
}} }}
> >
{/* Strong horizontal fade from left side */} {/* Strong horizontal fade from left side */}
<View style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: screenDimensions.width * 0.7 }}> <View style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: getDimensions().width * 0.7 }}>
<LinearGradient <LinearGradient
start={{ x: 0, y: 0.5 }} start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }} end={{ x: 1, y: 0.5 }}
@ -3085,8 +3092,8 @@ const KSPlayerCore: React.FC = () => {
<Animated.View <Animated.View
style={{ style={{
position: 'absolute', position: 'absolute',
left: screenDimensions.width / 2 - 60, left: getDimensions().width / 2 - 60,
top: screenDimensions.height / 2 - 60, top: getDimensions().height / 2 - 60,
opacity: volumeOverlayOpacity, opacity: volumeOverlayOpacity,
zIndex: 1000, zIndex: 1000,
}} }}
@ -3182,8 +3189,8 @@ const KSPlayerCore: React.FC = () => {
<Animated.View <Animated.View
style={{ style={{
position: 'absolute', position: 'absolute',
left: screenDimensions.width / 2 - 60, left: getDimensions().width / 2 - 60,
top: screenDimensions.height / 2 - 60, top: getDimensions().height / 2 - 60,
opacity: brightnessOverlayOpacity, opacity: brightnessOverlayOpacity,
zIndex: 1000, zIndex: 1000,
}} }}

1
src/components/ui/ToastManager.tsx
View file

@ -33,3 +33,4 @@ const styles = StyleSheet.create({
}); });
export default ToastManager; export default ToastManager;

1
src/contexts/ToastContext.tsx
View file

@ -69,3 +69,4 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
</ToastContext.Provider> </ToastContext.Provider>
); );
}; };

1
src/services/toastService.ts
View file

@ -150,3 +150,4 @@ class ToastService {
export const toastService = ToastService.getInstance(); export const toastService = ToastService.getInstance();
export default toastService; export default toastService;