diff --git a/components/FullScreenVideoPlayer.tsx b/components/FullScreenVideoPlayer.tsx index dc0a5e09..a7572f35 100644 --- a/components/FullScreenVideoPlayer.tsx +++ b/components/FullScreenVideoPlayer.tsx @@ -74,8 +74,6 @@ export const FullScreenVideoPlayer: React.FC = () => { const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(currentlyPlaying); const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying }); - // const { showControls, hideControls, opacity } = useControlsVisibility(3000); - const [isInteractive, setIsInteractive] = useState(true); const [orientation, setOrientation] = useState( ScreenOrientation.OrientationLock.UNKNOWN ); @@ -89,7 +87,7 @@ export const FullScreenVideoPlayer: React.FC = () => { const min = useSharedValue(0); const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0); const sliding = useRef(false); - const localIsBuffering = useSharedValue(false); + const localIsBuffering = useSharedValue(true); const cacheProgress = useSharedValue(0); const [isStatusBarHidden, setIsStatusBarHidden] = useState(false); @@ -164,26 +162,6 @@ export const FullScreenVideoPlayer: React.FC = () => { }; }, [currentlyPlaying, api, poster]); - useEffect(() => { - const handleAppStateChange = (nextAppState: AppStateStatus) => { - if (nextAppState === "active") { - setIsInteractive(true); - showControls(); - } else { - setIsInteractive(false); - } - }; - - const subscription = AppState.addEventListener( - "change", - handleAppStateChange - ); - - return () => { - subscription.remove(); - }; - }, [showControls]); - useEffect(() => { max.value = currentlyPlaying?.item.RunTimeTicks || 0; }, [currentlyPlaying?.item.RunTimeTicks]); @@ -251,7 +229,10 @@ export const FullScreenVideoPlayer: React.FC = () => { ), })), loader: useAnimatedStyle(() => ({ - opacity: withTiming(localIsBuffering.value ? 1 : 0, { duration: 300 }), + opacity: withTiming( + localIsBuffering.value === true || progress.value === 0 ? 1 : 0, + { duration: 300 } + ), })), }; @@ -293,7 +274,9 @@ export const FullScreenVideoPlayer: React.FC = () => { progress.value > showButtonAt && progress.value < hideButtonAt; return { opacity: withTiming( - localIsBuffering.value === false && showButton ? 1 : 0, + localIsBuffering.value === false && showButton && progress.value !== 0 + ? 1 + : 0, { duration: 300, } @@ -539,7 +522,7 @@ export const FullScreenVideoPlayer: React.FC = () => { } }} onBuffer={(e) => { - if (e.isBuffering && !isPlaying) { + if (e.isBuffering) { console.log("Buffering..."); setIsBuffering(true); localIsBuffering.value = true; @@ -551,6 +534,14 @@ export const FullScreenVideoPlayer: React.FC = () => { onVolumeChange={(e) => { setVolume(e.volume); }} + fullscreen={false} + onLoadStart={() => { + localIsBuffering.value = true; + }} + onLoad={() => { + localIsBuffering.value = true + }} + progressUpdateInterval={1000} onError={handleVideoError} /> @@ -614,27 +605,22 @@ export const FullScreenVideoPlayer: React.FC = () => { > - - - - - - - - - { - stopPlayback(); - }} - className="aspect-square flex flex-col items-center justify-center p-2" - > - + + - + + { + stopPlayback(); + }} + className="aspect-square bg-neutral-800 rounded-xl flex flex-col items-center justify-center p-2" + > + +