Error modal simplified for videoplayers

This commit is contained in:
tapframe 2025-12-22 16:06:52 +05:30
parent 0d6d69e0a8
commit 967b90b98e
3 changed files with 149 additions and 1 deletions

View file

@ -35,6 +35,7 @@ import SpeedModal from './modals/SpeedModal';
import { SourcesModal } from './modals/SourcesModal';
import { EpisodesModal } from './modals/EpisodesModal';
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
import { ErrorModal } from './modals/ErrorModal';
// Android-specific components
import { VideoSurface } from './android/components/VideoSurface';
@ -543,6 +544,15 @@ const AndroidVideoPlayer: React.FC = () => {
}}
/>
<ErrorModal
showErrorModal={modals.showErrorModal}
setShowErrorModal={modals.setShowErrorModal}
errorDetails={modals.errorDetails}
onDismiss={handleClose}
/>
<EpisodeStreamsModal
visible={modals.showEpisodeStreamsModal}
onClose={() => modals.setShowEpisodeStreamsModal(false)}

View file

@ -14,6 +14,7 @@ import SubtitleModals from './modals/SubtitleModals';
import SourcesModal from './modals/SourcesModal';
import EpisodesModal from './modals/EpisodesModal';
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
import { ErrorModal } from './modals/ErrorModal';
import CustomSubtitles from './subtitles/CustomSubtitles';
import { SpeedActivatedOverlay, PauseOverlay, GestureControls } from './components';
@ -325,7 +326,25 @@ const KSPlayerCore: React.FC = () => {
};
const handleError = (error: any) => {
modals.setErrorDetails(typeof error === 'string' ? error : error?.message || 'Unknown Error');
let msg = 'Unknown Error';
try {
if (typeof error === 'string') {
msg = error;
} else if (error?.error?.localizedDescription) {
msg = error.error.localizedDescription;
} else if (error?.error?.message) {
msg = error.error.message;
} else if (error?.message) {
msg = error.message;
} else if (error?.error) {
msg = typeof error.error === 'string' ? error.error : JSON.stringify(error.error);
} else {
msg = JSON.stringify(error);
}
} catch (e) {
msg = 'Error parsing error details';
}
modals.setErrorDetails(msg);
modals.setShowErrorModal(true);
};
@ -605,6 +624,13 @@ const KSPlayerCore: React.FC = () => {
selectAudioTrack={tracks.selectAudioTrack}
/>
<ErrorModal
showErrorModal={modals.showErrorModal}
setShowErrorModal={modals.setShowErrorModal}
errorDetails={modals.errorDetails}
onDismiss={handleClose}
/>
<SpeedModal
showSpeedModal={modals.showSpeedModal}
setShowSpeedModal={modals.setShowSpeedModal}

View file

@ -0,0 +1,112 @@
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import Animated, {
FadeIn,
FadeOut,
ZoomIn,
ZoomOut,
} from 'react-native-reanimated';
interface ErrorModalProps {
showErrorModal: boolean;
setShowErrorModal: (show: boolean) => void;
errorDetails: string;
onDismiss?: () => void;
}
export const ErrorModal: React.FC<ErrorModalProps> = ({
showErrorModal,
setShowErrorModal,
errorDetails,
onDismiss,
}) => {
const { width } = useWindowDimensions();
const MODAL_WIDTH = Math.min(width * 0.8, 400);
const handleClose = () => {
setShowErrorModal(false);
if (onDismiss) {
onDismiss();
}
};
if (!showErrorModal) return null;
return (
<View style={[StyleSheet.absoluteFill, { zIndex: 99999, justifyContent: 'center', alignItems: 'center' }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }} />
</TouchableOpacity>
<Animated.View
entering={FadeIn.duration(300)}
exiting={FadeOut.duration(200)}
style={{
width: MODAL_WIDTH,
backgroundColor: '#1a1a1a',
borderRadius: 20,
padding: 24,
alignItems: 'center',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
}}
>
<View style={{
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: 'rgba(239, 68, 68, 0.1)',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 16
}}>
<MaterialIcons name="error-outline" size={32} color="#EF4444" />
</View>
<Text style={{
color: 'white',
fontSize: 20,
fontWeight: '700',
marginBottom: 8,
textAlign: 'center'
}}>
Playback Error
</Text>
<Text style={{
color: 'rgba(255,255,255,0.7)',
fontSize: 15,
textAlign: 'center',
marginBottom: 24,
lineHeight: 22
}}>
{errorDetails || 'An unknown error occurred during playback.'}
</Text>
<TouchableOpacity
style={{
backgroundColor: 'white',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 12,
width: '100%',
alignItems: 'center'
}}
onPress={handleClose}
activeOpacity={0.9}
>
<Text style={{
color: 'black',
fontSize: 16,
fontWeight: '700'
}}>
Dismiss
</Text>
</TouchableOpacity>
</Animated.View>
</View>
);
};
export default ErrorModal;