From 6a4c2c6aea377a90f817dc9e1e2d8f636686b49a Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Mon, 5 Jun 2023 15:41:15 +0900 Subject: [PATCH] Switch to the pointer event api instead of the pressable api on the player to support firefox android --- .../ui/src/player/components/hover.tsx | 6 ++- front/packages/ui/src/player/index.tsx | 52 +++++++++---------- front/packages/ui/src/player/video.web.tsx | 2 +- 3 files changed, 29 insertions(+), 31 deletions(-) diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx index 97718cd4..3c92dba7 100644 --- a/front/packages/ui/src/player/components/hover.tsx +++ b/front/packages/ui/src/player/components/hover.tsx @@ -35,7 +35,7 @@ import { } from "@kyoo/primitives"; import { Chapter, Font, Track, WatchItem } from "@kyoo/models"; import { useAtomValue, useSetAtom, useAtom } from "jotai"; -import { View, ViewProps } from "react-native"; +import { Platform, View, ViewProps } from "react-native"; import { useTranslation } from "react-i18next"; import { percent, rem, useYoshiki } from "yoshiki/native"; import { useRouter } from "solito/router"; @@ -87,7 +87,8 @@ export const Hover = ({ {...css( [ { - position: "absolute", + // Fixed is used because firefox android make the hover disapear under the navigation bar in absolute + position: Platform.OS === "web" ? "fixed" as any : "absolute", bottom: 0, left: 0, right: 0, @@ -106,6 +107,7 @@ export const Hover = ({ marginLeft: { xs: ts(0.5), sm: ts(3) }, flexDirection: "column", flexGrow: 1, + maxWidth: percent(100), })} >

diff --git a/front/packages/ui/src/player/index.tsx b/front/packages/ui/src/player/index.tsx index b264852f..7ab5325b 100644 --- a/front/packages/ui/src/player/index.tsx +++ b/front/packages/ui/src/player/index.tsx @@ -21,7 +21,7 @@ import { QueryIdentifier, QueryPage, WatchItem, WatchItemP, useFetch } from "@kyoo/models"; import { Head } from "@kyoo/primitives"; import { useState, useEffect, ComponentProps } from "react"; -import { Platform, Pressable, StyleSheet } from "react-native"; +import { Platform, Pressable, StyleSheet, View } from "react-native"; import { useTranslation } from "react-i18next"; import { useRouter } from "solito/router"; import { useAtom } from "jotai"; @@ -42,7 +42,7 @@ const mapData = ( data: WatchItem | undefined, previousSlug?: string, nextSlug?: string, -): Partial> => { +): Partial> & { isLoading: boolean } => { if (!data) return { isLoading: true }; return { isLoading: false, @@ -132,12 +132,12 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => { data.isMovie ? data.name : data.showTitle + - " " + - episodeDisplayNumber({ - seasonNumber: data.seasonNumber, - episodeNumber: data.episodeNumber, - absoluteNumber: data.absoluteNumber, - }) + " " + + episodeDisplayNumber({ + seasonNumber: data.seasonNumber, + episodeNumber: data.episodeNumber, + absoluteNumber: data.absoluteNumber, + }) } description={data.overview} /> @@ -148,9 +148,9 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => { next={next} previous={previous} /> - setMouseMoved(false)} + onPointerLeave={(e) => { if (e.nativeEvent.pointerType === "mouse") setMouseMoved(false) }} {...css({ flexGrow: 1, bg: "black", @@ -158,11 +158,9 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => { cursor: displayControls ? "unset" : "none", })} > - { - // TODO: use onPress event to diferenciate touch and click on the web (requires react native web 0.19) - if (Platform.OS !== "web") { + { + if (e.nativeEvent.pointerType !== "mouse") { displayControls ? setMouseMoved(false) : show(); return; } @@ -178,13 +176,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => { }, 400); setPlay(!isPlaying); }} - {...css([ - StyleSheet.absoluteFillObject, - { - // @ts-ignore Web only - cursor: "unset", - }, - ])} + {...css(StyleSheet.absoluteFillObject)} > + setHover(true)} - // @ts-ignore Web only types - onMouseLeave={() => setHover(false)} + onPointerEnter={(e) => { if (e.nativeEvent.pointerType === "mouse") setHover(true) }} + onPointerLeave={(e) => { if (e.nativeEvent.pointerType === "mouse") setHover(false) }} + onPointerDown={(e) => { + // also handle touch here because if we dont, the area where the hover should be will catch touches + // without openning the hover. + if (e.nativeEvent.pointerType !== "mouse") + displayControls ? setMouseMoved(false) : show(); + }} onMenuOpen={() => setMenuOpen(true)} onMenuClose={() => { // Disable hover since the menu overlay makes the mouseout unreliable. @@ -216,7 +212,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => { }} show={displayControls} /> - + ); }; diff --git a/front/packages/ui/src/player/video.web.tsx b/front/packages/ui/src/player/video.web.tsx index 6705905b..215f728e 100644 --- a/front/packages/ui/src/player/video.web.tsx +++ b/front/packages/ui/src/player/video.web.tsx @@ -138,7 +138,7 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function }); hls.on(Hls.Events.ERROR, (_, d) => { console.log("Hls error", d); - if (!d.fatal) return; + if (!d.fatal || !hls?.media) return; onError?.call(null, { error: { "": "", errorString: d.reason ?? d.err?.message ?? "Unknown hls error" }, });