diff --git a/components/FullScreenVideoPlayer.tsx b/components/FullScreenVideoPlayer.tsx index 0010b7d2..dc0a5e09 100644 --- a/components/FullScreenVideoPlayer.tsx +++ b/components/FullScreenVideoPlayer.tsx @@ -7,13 +7,15 @@ import { useSettings } from "@/utils/atoms/settings"; import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl"; import { getAuthHeaders } from "@/utils/jellyfin/jellyfin"; import { writeToLog } from "@/utils/log"; +import orientationToOrientationLock from "@/utils/OrientationLockConverter"; import { secondsToTicks } from "@/utils/secondsToTicks"; import { runtimeTicksToSeconds } from "@/utils/time"; import { Ionicons } from "@expo/vector-icons"; import { useQuery } from "@tanstack/react-query"; import { Image } from "expo-image"; -import { useNavigation, useRouter, useSegments } from "expo-router"; +import { useRouter, useSegments } from "expo-router"; import * as ScreenOrientation from "expo-screen-orientation"; +import { setStatusBarHidden, StatusBar } from "expo-status-bar"; import { useAtom } from "jotai"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { @@ -22,7 +24,6 @@ import { AppStateStatus, BackHandler, Dimensions, - Platform, TouchableOpacity, View, } from "react-native"; @@ -40,11 +41,6 @@ import Video, { OnProgressData } from "react-native-video"; import { Text } from "./common/Text"; import { itemRouter } from "./common/TouchableItemRouter"; import { Loader } from "./Loader"; -import * as NavigationBar from "expo-navigation-bar"; -import { setStatusBarHidden, StatusBar } from "expo-status-bar"; -import orientationToOrientationLock from "@/utils/OrientationLockConverter"; -import { BlurView } from "expo-blur"; -import { PlatformBlurView } from "./PlatformBlurView"; async function lockOrientation(orientation: ScreenOrientation.OrientationLock) { await ScreenOrientation.lockAsync(orientation); @@ -78,12 +74,14 @@ export const FullScreenVideoPlayer: React.FC = () => { const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(currentlyPlaying); const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying }); - const { showControls, hideControls, opacity } = useControlsVisibility(3000); + // const { showControls, hideControls, opacity } = useControlsVisibility(3000); const [isInteractive, setIsInteractive] = useState(true); const [orientation, setOrientation] = useState( ScreenOrientation.OrientationLock.UNKNOWN ); + const opacity = useSharedValue(1); + const [ignoreSafeArea, setIgnoreSafeArea] = useState(false); const from = useMemo(() => segments[2], [segments]); @@ -95,6 +93,16 @@ export const FullScreenVideoPlayer: React.FC = () => { const cacheProgress = useSharedValue(0); const [isStatusBarHidden, setIsStatusBarHidden] = useState(false); + const hideControls = useCallback(() => { + "worklet"; + opacity.value = 0; + }, [opacity]); + + const showControls = useCallback(() => { + "worklet"; + opacity.value = 1; + }, [opacity]); + useEffect(() => { const backAction = () => { if (currentlyPlaying) { @@ -373,17 +381,20 @@ export const FullScreenVideoPlayer: React.FC = () => { }, [videoRef, showControls]); const handlePlayPause = useCallback(() => { + console.log("handlePlayPause"); if (isPlaying) pauseVideo(); else playVideo(); showControls(); }, [isPlaying, pauseVideo, playVideo, showControls]); const handleSliderStart = useCallback(() => { + if (opacity.value === 0) return; sliding.current = true; }, []); const handleSliderComplete = useCallback( (val: number) => { + if (opacity.value === 0) return; const tick = Math.floor(val); videoRef.current?.seek(tick / 10000000); sliding.current = false; @@ -393,6 +404,7 @@ export const FullScreenVideoPlayer: React.FC = () => { const handleSliderChange = useCallback( (val: number) => { + if (opacity.value === 0) return; const tick = Math.floor(val); progress.value = tick; calculateTrickplayUrl(progress); @@ -428,9 +440,14 @@ export const FullScreenVideoPlayer: React.FC = () => { }); const playPauseGesture = Gesture.Tap() - .enabled(opacity.value !== 0) + .onBegin(() => { + console.log("playPauseGesture ~", opacity.value); + }) .onStart(() => { runOnJS(handlePlayPause)(); + }) + .onFinalize(() => { + if (opacity.value === 0) opacity.value = 1; }); const goToPreviouItemGesture = Gesture.Tap() @@ -595,9 +612,9 @@ export const FullScreenVideoPlayer: React.FC = () => { animatedStyles.controls, ]} > - + - + { color="white" /> - + - + { stopPlayback(); @@ -617,7 +634,7 @@ export const FullScreenVideoPlayer: React.FC = () => { > - + @@ -712,7 +729,6 @@ export const FullScreenVideoPlayer: React.FC = () => { `} >