From 46cdf95cd48e8947d220853c5934ab457ae47057 Mon Sep 17 00:00:00 2001 From: tapframe Date: Mon, 1 Sep 2025 19:41:55 +0530 Subject: [PATCH] small bug fixes --- App.tsx | 5 ++- src/components/metadata/HeroSection.tsx | 11 +++--- src/components/video/TrailerPlayer.tsx | 5 +++ src/contexts/TrailerContext.tsx | 47 +++++++++++++++++++++++++ src/screens/StreamsScreen.tsx | 13 +++++++ 5 files changed, 75 insertions(+), 6 deletions(-) create mode 100644 src/contexts/TrailerContext.tsx diff --git a/App.tsx b/App.tsx index 1b2a225..a2130bd 100644 --- a/App.tsx +++ b/App.tsx @@ -25,6 +25,7 @@ import { CatalogProvider } from './src/contexts/CatalogContext'; import { GenreProvider } from './src/contexts/GenreContext'; import { TraktProvider } from './src/contexts/TraktContext'; import { ThemeProvider, useTheme } from './src/contexts/ThemeContext'; +import { TrailerProvider } from './src/contexts/TrailerContext'; import SplashScreen from './src/components/SplashScreen'; import AsyncStorage from '@react-native-async-storage/async-storage'; import * as Sentry from '@sentry/react-native'; @@ -129,7 +130,9 @@ function App(): React.JSX.Element { - + + + diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx index 16b56a4..e5fdb72 100644 --- a/src/components/metadata/HeroSection.tsx +++ b/src/components/metadata/HeroSection.tsx @@ -29,6 +29,7 @@ import Animated, { import { useTheme } from '../../contexts/ThemeContext'; import { useTraktContext } from '../../contexts/TraktContext'; import { useSettings } from '../../hooks/useSettings'; +import { useTrailer } from '../../contexts/TrailerContext'; import { logger } from '../../utils/logger'; import { TMDBService } from '../../services/tmdbService'; import TrailerService from '../../services/trailerService'; @@ -697,6 +698,7 @@ const HeroSection: React.FC = memo(({ const { currentTheme } = useTheme(); const { isAuthenticated: isTraktAuthenticated } = useTraktContext(); const { settings, updateSetting } = useSettings(); + const { isTrailerPlaying: globalTrailerPlaying, setTrailerPlaying } = useTrailer(); // Performance optimization: Refs for avoiding re-renders const interactionComplete = useRef(false); @@ -710,7 +712,6 @@ const HeroSection: React.FC = memo(({ const [trailerError, setTrailerError] = useState(false); // Use persistent setting instead of local state const trailerMuted = settings.trailerMuted; - const [isTrailerPlaying, setIsTrailerPlaying] = useState(false); const [trailerReady, setTrailerReady] = useState(false); const [trailerPreloaded, setTrailerPreloaded] = useState(false); const trailerVideoRef = useRef(null); @@ -745,7 +746,7 @@ const HeroSection: React.FC = memo(({ setTrailerPreloaded(true); } setTrailerReady(true); - setIsTrailerPlaying(true); + setTrailerPlaying(true); // Smooth transition: fade out thumbnail, fade in trailer thumbnailOpacity.value = withTiming(0, { duration: 500 }); @@ -768,7 +769,7 @@ const HeroSection: React.FC = memo(({ const handleTrailerError = useCallback(() => { setTrailerError(true); setTrailerReady(false); - setIsTrailerPlaying(false); + setTrailerPlaying(false); // Fade back to thumbnail trailerOpacity.value = withTiming(0, { duration: 300 }); @@ -1068,7 +1069,7 @@ const HeroSection: React.FC = memo(({ = memo(({ getEpisodeDetails={getEpisodeDetails} animatedStyle={watchProgressAnimatedStyle} isWatched={isWatched} - isTrailerPlaying={isTrailerPlaying} + isTrailerPlaying={globalTrailerPlaying} trailerMuted={trailerMuted} /> diff --git a/src/components/video/TrailerPlayer.tsx b/src/components/video/TrailerPlayer.tsx index 2127ee3..40affd6 100644 --- a/src/components/video/TrailerPlayer.tsx +++ b/src/components/video/TrailerPlayer.tsx @@ -164,6 +164,11 @@ const TrailerPlayer = React.forwardRef(({ setIsMuted(muted); }, [muted]); + // Sync internal playing state with autoPlay prop + useEffect(() => { + setIsPlaying(autoPlay); + }, [autoPlay]); + // Cleanup timeout on unmount useEffect(() => { return () => { diff --git a/src/contexts/TrailerContext.tsx b/src/contexts/TrailerContext.tsx new file mode 100644 index 0000000..53c1438 --- /dev/null +++ b/src/contexts/TrailerContext.tsx @@ -0,0 +1,47 @@ +import React, { createContext, useContext, useState, useCallback, useMemo, ReactNode } from 'react'; + +interface TrailerContextValue { + isTrailerPlaying: boolean; + pauseTrailer: () => void; + resumeTrailer: () => void; + setTrailerPlaying: (playing: boolean) => void; +} + +const TrailerContext = createContext(undefined); + +export const TrailerProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [isTrailerPlaying, setIsTrailerPlaying] = useState(true); + + const pauseTrailer = useCallback(() => { + setIsTrailerPlaying(false); + }, []); + + const resumeTrailer = useCallback(() => { + setIsTrailerPlaying(true); + }, []); + + const setTrailerPlaying = useCallback((playing: boolean) => { + setIsTrailerPlaying(playing); + }, []); + + const value: TrailerContextValue = useMemo(() => ({ + isTrailerPlaying, + pauseTrailer, + resumeTrailer, + setTrailerPlaying, + }), [isTrailerPlaying, pauseTrailer, resumeTrailer, setTrailerPlaying]); + + return ( + + {children} + + ); +}; + +export const useTrailer = (): TrailerContextValue => { + const context = useContext(TrailerContext); + if (!context) { + throw new Error('useTrailer must be used within a TrailerProvider'); + } + return context; +}; diff --git a/src/screens/StreamsScreen.tsx b/src/screens/StreamsScreen.tsx index 0f330f5..ea632df 100644 --- a/src/screens/StreamsScreen.tsx +++ b/src/screens/StreamsScreen.tsx @@ -30,6 +30,7 @@ import { RootStackParamList, RootStackNavigationProp } from '../navigation/AppNa import { useMetadata } from '../hooks/useMetadata'; import { useMetadataAssets } from '../hooks/useMetadataAssets'; import { useTheme } from '../contexts/ThemeContext'; +import { useTrailer } from '../contexts/TrailerContext'; import { Stream } from '../types/metadata'; import { tmdbService } from '../services/tmdbService'; import { stremioService } from '../services/stremioService'; @@ -360,6 +361,7 @@ export const StreamsScreen = () => { const { settings } = useSettings(); const { currentTheme } = useTheme(); const { colors } = currentTheme; + const { pauseTrailer, resumeTrailer } = useTrailer(); // Add ref to prevent excessive updates const isMounted = useRef(true); @@ -383,6 +385,17 @@ export const StreamsScreen = () => { console.log('[StreamsScreen] Received thumbnail from params:', episodeThumbnail); }, [episodeThumbnail]); + // Pause trailer when StreamsScreen is opened + useEffect(() => { + // Pause trailer when component mounts + pauseTrailer(); + + // Resume trailer when component unmounts + return () => { + resumeTrailer(); + }; + }, [pauseTrailer, resumeTrailer]); + const { metadata, episodes,