Switch to the pointer event api instead of the pressable api on the player to support firefox android

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),
 							})}
 						>
 							<H2 {...css({ paddingBottom: ts(1) })}>

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<ComponentProps<typeof Hover>> => {
+): Partial<ComponentProps<typeof Hover>> & { 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({
+							episodeDisplayNumber({
-									seasonNumber: data.seasonNumber,
+								seasonNumber: data.seasonNumber,
-									episodeNumber: data.episodeNumber,
+								episodeNumber: data.episodeNumber,
-									absoluteNumber: data.absoluteNumber,
+								absoluteNumber: data.absoluteNumber,
-							  })
+							})
 					}
 					description={data.overview}
 				/>
@@ -148,9 +148,9 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 				next={next}
 				previous={previous}
 			/>
-			<Pressable
+			<View
 				focusable={false}
-				onHoverOut={() => 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",
 				})}
 			>
-				<Pressable
+				<View
-					focusable={false}
+					onPointerDown={(e) => {
-					onPress={(e) => {
+						if (e.nativeEvent.pointerType !== "mouse") {
-						// TODO: use onPress event to diferenciate touch and click on the web (requires react native web 0.19)
-						if (Platform.OS !== "web") {
 							displayControls ? setMouseMoved(false) : show();
 							return;
 						}
@@ -178,13 +176,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 							}, 400);
 						setPlay(!isPlaying);
 					}}
-					{...css([
+					{...css(StyleSheet.absoluteFillObject)}
-						StyleSheet.absoluteFillObject,
-						{
-							// @ts-ignore Web only
-							cursor: "unset",
-						},
-					])}
 				>
 					<Video
 						links={data?.link}
@@ -200,14 +192,18 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 						}}
 						{...css(StyleSheet.absoluteFillObject)}
 					/>
-				</Pressable>
+				</View>
 				<LoadingIndicator />
 				<Hover
 					{...mapData(data, previous, next)}
-					// @ts-ignore Web only types
+					onPointerEnter={(e) => { if (e.nativeEvent.pointerType === "mouse") setHover(true) }}
-					onMouseEnter={() => setHover(true)}
+					onPointerLeave={(e) => { if (e.nativeEvent.pointerType === "mouse") setHover(false) }}
-					// @ts-ignore Web only types
+					onPointerDown={(e) => {
-					onMouseLeave={() => setHover(false)}
+						// 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}
 				/>
-			</Pressable>
+			</View>
 		</>
 	);
 };

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" },
 					});