diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx index 50021f0b..ed1bcd06 100644 --- a/front/packages/ui/src/player/components/hover.tsx +++ b/front/packages/ui/src/player/components/hover.tsx @@ -39,7 +39,7 @@ import { Chapter, KyooImage, Subtitle, Audio } from "@kyoo/models"; import { useAtomValue, useSetAtom, useAtom } from "jotai"; import { ImageStyle, Platform, Pressable, View, ViewProps } from "react-native"; import { useTranslation } from "react-i18next"; -import { percent, rem, useYoshiki, vh } from "yoshiki/native"; +import { percent, rem, useYoshiki } from "yoshiki/native"; import { useRouter } from "solito/router"; import ArrowBack from "@material-symbols/svg-400/rounded/arrow_back-fill.svg"; import { LeftButtons, TouchControls } from "./left-buttons"; @@ -200,6 +200,7 @@ export const HoverTouch = ({ children, ...props }: { children: ReactNode }) => { const mouseCallback = useRef(null); const touch = useRef<{ count: number; timeout?: NodeJS.Timeout }>({ count: 0 }); const playerWidth = useRef(null); + const isTouch = useIsTouch(); const show = useCallback(() => { setHover((x) => ({ ...x, mouseMoved: true })); @@ -283,18 +284,9 @@ export const HoverTouch = ({ children, ...props }: { children: ReactNode }) => { onPointerLeave={(e) => { if (e.nativeEvent.pointerType === "mouse") setHover((x) => ({ ...x, mouseMoved: false })); }} - onPointerDown={(e) => { - // Theorically, this is available everywhere but android never calls this pointerDown so - // touch are handled in the onPress and we early return here if it is every called to prevent - // the click action to run twice. - if (Platform.OS !== "web") return; - e.preventDefault(); - onAnyPress(e.nativeEvent); - }} onPress={(e) => { - if (Platform.OS === "web") return; e.preventDefault(); - onAnyPress({ pointerType: "touch", x: e.nativeEvent.locationX }); + onAnyPress({ pointerType: isTouch ? "touch" : "mouse", x: e.nativeEvent.locationX }); }} onLayout={(e) => { playerWidth.current = e.nativeEvent.layout.width; diff --git a/front/packages/ui/src/player/components/left-buttons.tsx b/front/packages/ui/src/player/components/left-buttons.tsx index 9de75102..bfaa8d63 100644 --- a/front/packages/ui/src/player/components/left-buttons.tsx +++ b/front/packages/ui/src/player/components/left-buttons.tsx @@ -101,9 +101,6 @@ export const TouchControls = ({ backgroundColor: (theme) => theme.darkOverlay, marginHorizontal: ts(3), }, - !hover && { - display: "none", - }, ], touchOnly, ); @@ -124,28 +121,34 @@ export const TouchControls = ({ props, )} > - - setPlay(!isPlaying)} - size={ts(8)} - {...common} - /> - + {hover && ( + <> + + { + console.log("play pressed") + setPlay(!isPlaying)}} + size={ts(8)} + {...common} + /> + + + )} ); }; diff --git a/front/packages/ui/src/player/video.tsx b/front/packages/ui/src/player/video.tsx index 8763350c..bba5a0ee 100644 --- a/front/packages/ui/src/player/video.tsx +++ b/front/packages/ui/src/player/video.tsx @@ -64,7 +64,7 @@ const videoAtom = atom(0); const clientId = uuid.v4() as string; const Video = forwardRef(function Video( - { onLoad, onBuffer, source, onPointerDown, subtitles, ...props }, + { onLoad, onBuffer, source, subtitles, ...props }, ref, ) { const { css } = useYoshiki(); diff --git a/front/packages/ui/src/player/video.web.tsx b/front/packages/ui/src/player/video.web.tsx index dfdc55ad..d1bbe626 100644 --- a/front/packages/ui/src/player/video.web.tsx +++ b/front/packages/ui/src/player/video.web.tsx @@ -118,7 +118,6 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function onPlayPause, onMediaUnsupported, fonts, - onPointerDown, }, forwaredRef, ) { @@ -241,7 +240,6 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function // onPlay={() => onPlayPause?.call(null, true)} // onPause={() => onPlayPause?.call(null, false)} onEnded={onEnd} - onPointerDown={(e) => onPointerDown?.(e as any)} {...css({ width: "100%", height: "100%", objectFit: "contain" })} /> );