rn video init for trailers

This commit is contained in:
tapframe 2025-10-17 20:35:48 +05:30
parent 2303c32940
commit e8ec05bd51

View file

@ -14,7 +14,7 @@ import { MaterialIcons } from '@expo/vector-icons';
import { useTheme } from '../../contexts/ThemeContext'; import { useTheme } from '../../contexts/ThemeContext';
import { logger } from '../../utils/logger'; import { logger } from '../../utils/logger';
import TrailerService from '../../services/trailerService'; import TrailerService from '../../services/trailerService';
import TrailerPlayer from '../video/TrailerPlayer'; import Video, { VideoRef, OnLoadData, OnProgressData } from 'react-native-video';
const { width, height } = Dimensions.get('window'); const { width, height } = Dimensions.get('window');
const isTablet = width >= 768; const isTablet = width >= 768;
@ -62,6 +62,7 @@ const TrailerModal: React.FC<TrailerModalProps> = memo(({
contentTitle contentTitle
}) => { }) => {
const { currentTheme } = useTheme(); const { currentTheme } = useTheme();
const videoRef = React.useRef<VideoRef>(null);
const [trailerUrl, setTrailerUrl] = useState<string | null>(null); const [trailerUrl, setTrailerUrl] = useState<string | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@ -223,19 +224,37 @@ const TrailerModal: React.FC<TrailerModalProps> = memo(({
{trailerUrl && !loading && !error && ( {trailerUrl && !loading && !error && (
<View style={styles.playerWrapper}> <View style={styles.playerWrapper}>
<TrailerPlayer <Video
trailerUrl={trailerUrl} ref={videoRef}
autoPlay={isPlaying} source={{ uri: trailerUrl }}
muted={false} // Allow sound in modal
style={styles.player} style={styles.player}
hideLoadingSpinner={true} controls={true}
onLoad={() => logger.info('TrailerModal', 'Trailer loaded successfully')} paused={!isPlaying}
onError={handleTrailerError} resizeMode="contain"
onEnd={handleTrailerEnd} volume={1.0}
onPlaybackStatusUpdate={(status) => { rate={1.0}
if (status.isLoaded && !isPlaying) { playInBackground={false}
setIsPlaying(true); playWhenInactive={false}
} ignoreSilentSwitch="ignore"
onLoad={(data: OnLoadData) => {
logger.info('TrailerModal', 'Trailer loaded successfully', data);
}}
onError={(error) => {
logger.error('TrailerModal', 'Video error:', error);
handleTrailerError();
}}
onEnd={() => {
logger.info('TrailerModal', 'Trailer ended');
handleTrailerEnd();
}}
onProgress={(data: OnProgressData) => {
// Handle progress if needed
}}
onLoadStart={() => {
logger.info('TrailerModal', 'Video load started');
}}
onReadyForDisplay={() => {
logger.info('TrailerModal', 'Video ready for display');
}} }}
/> />
</View> </View>