movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 10:23:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: ignore pan gesture in slider vicinity

Browse Source
This commit is contained in:
Adrian Castro
2024-03-09 11:35:43 +01:00
parent 887949ed8a
commit b6b8f34d70
2 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/expo/src/components/player/VideoPlayer.tsx
View File

@@ -27,6 +27,7 @@ import { usePlayerStore } from "~/stores/player/store";
import { Text } from "../ui/Text"; import { Text } from "../ui/Text";
import { CaptionRenderer } from "./CaptionRenderer"; import { CaptionRenderer } from "./CaptionRenderer";
import { ControlsOverlay } from "./ControlsOverlay"; import { ControlsOverlay } from "./ControlsOverlay";
import { isPointInSliderVicinity } from "./VideoSlider";
export const VideoPlayer = () => { export const VideoPlayer = () => {
const { const {
@@ -51,6 +52,7 @@ export const VideoPlayer = () => {
const [resizeMode, setResizeMode] = useState(ResizeMode.CONTAIN); const [resizeMode, setResizeMode] = useState(ResizeMode.CONTAIN);
const [shouldPlay, setShouldPlay] = useState(true); const [shouldPlay, setShouldPlay] = useState(true);
const [hasStartedPlaying, setHasStartedPlaying] = useState(false); const [hasStartedPlaying, setHasStartedPlaying] = useState(false);
const isGestureInSliderVicinity = useSharedValue(false);
const router = useRouter(); const router = useRouter();
const scale = useSharedValue(1); const scale = useSharedValue(1);
const [lastVelocityY, setLastVelocityY] = useState(0); const [lastVelocityY, setLastVelocityY] = useState(0);
@@ -63,6 +65,10 @@ export const VideoPlayer = () => {
const setStatus = usePlayerStore((state) => state.setStatus); const setStatus = usePlayerStore((state) => state.setStatus);
const setIsIdle = usePlayerStore((state) => state.setIsIdle); const setIsIdle = usePlayerStore((state) => state.setIsIdle);
const checkGestureInSliderVicinity = (x: number, y: number) => {
isGestureInSliderVicinity.value = isPointInSliderVicinity(x, y);
};
const updateResizeMode = (newMode: ResizeMode) => { const updateResizeMode = (newMode: ResizeMode) => {
setResizeMode(newMode); setResizeMode(newMode);
void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
@@ -90,6 +96,12 @@ export const VideoPlayer = () => {
const screenHalfWidth = Dimensions.get("window").width / 2; const screenHalfWidth = Dimensions.get("window").width / 2;
const panGesture = Gesture.Pan() const panGesture = Gesture.Pan()
.onStart((event) => {
runOnJS(checkGestureInSliderVicinity)(event.x, event.y);
if (isGestureInSliderVicinity.value) {
return;
}
})
.onUpdate((event) => { .onUpdate((event) => {
const divisor = 5000; const divisor = 5000;
const panIsInHeaderOrFooter = event.y < 100 || event.y > 400; const panIsInHeaderOrFooter = event.y < 100 || event.y > 400;

16
apps/expo/src/components/player/VideoSlider.tsx
View File

@@ -30,6 +30,22 @@ interface VideoSliderProps {
onSlidingComplete?: (value: number) => void; onSlidingComplete?: (value: number) => void;
} }
const SLIDER_VICINITY = {
x: 20,
y: 200,
width: Dimensions.get("window").width - 40,
height: 20,
};
export const isPointInSliderVicinity = (x: number, y: number) => {
return (
x >= SLIDER_VICINITY.x &&
x <= SLIDER_VICINITY.x + SLIDER_VICINITY.width &&
y >= SLIDER_VICINITY.y &&
y <= SLIDER_VICINITY.y + SLIDER_VICINITY.height
);
};
const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => { const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
const tapRef = useRef<TapGestureHandler>(null); const tapRef = useRef<TapGestureHandler>(null);
const panRef = useRef<PanGestureHandler>(null); const panRef = useRef<PanGestureHandler>(null);