Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix hover issues on android

Browse Source
This commit is contained in:
Zoe Roux 2023-06-13 10:24:49 +09:00
parent 4993ae50fe
commit 72e74cea32
4 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/packages/ui/src/player/components/hover.tsx
View File

@ -77,7 +77,7 @@ export const Hover = ({
show: boolean;
} & ViewProps) => {
// TODO animate show
const opacity = !show && { opacity: 0 };
const opacity = !show && (Platform.OS === "web" ? { opacity: 0 } : { display: "none" as const});
return (
<ContrastArea mode="dark">
{({ css }) => (

103
front/packages/ui/src/player/index.tsx
View File

@ -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, View } from "react-native";
import { Platform, Pressable, PressableProps, StyleSheet, View } from "react-native";
import { useTranslation } from "react-i18next";
import { useRouter } from "solito/router";
import { useAtom } from "jotai";
@ -59,6 +59,17 @@ const mapData = (
};
};
const PressView =
Platform.OS === "web"
? View
: ({
onPointerDown,
onMobilePress,
...props
}: PressableProps & { onMobilePress: PressableProps["onPress"] }) => (
<Pressable focusable={false} onPress={(e) => onMobilePress?.(e)} {...props} />
);
// Callback used to hide the controls when the mouse goes iddle. This is stored globally to clear the old timeout
// if the mouse moves again (if this is stored as a state, the whole page is redrawn on mouse move)
let mouseCallback: NodeJS.Timeout;
@ -148,9 +159,33 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
next={next}
previous={previous}
/>
<View
<PressView
focusable={false}
onPointerLeave={(e) => { if (e.nativeEvent.pointerType === "mouse") setMouseMoved(false) }}
onMobilePress={(e) => {
e.preventDefault();
displayControls ? setMouseMoved(false) : show();
}}
onStartShouldSetResponder={(e) => true}
onPointerDown={(e) => {
e.preventDefault();
if (e.nativeEvent.pointerType !== "mouse") {
displayControls ? setMouseMoved(false) : show();
return;
}
touchCount++;
if (touchCount == 2) {
touchCount = 0;
setFullscreen(!isFullscreen);
clearTimeout(touchTimeout);
} else
touchTimeout = setTimeout(() => {
touchCount = 0;
}, 400);
setPlay(!isPlaying);
}}
onPointerLeave={(e) => {
if (e.nativeEvent.pointerType === "mouse") setMouseMoved(false);
}}
{...css({
flexGrow: 1,
bg: "black",
@ -158,51 +193,33 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
cursor: displayControls ? "unset" : "none",
})}
>
<View
onPointerDown={(e) => {
if (e.nativeEvent.pointerType !== "mouse") {
displayControls ? setMouseMoved(false) : show();
return;
}
e.preventDefault();
touchCount++;
if (touchCount == 2) {
touchCount = 0;
setFullscreen(!isFullscreen);
clearTimeout(touchTimeout);
} else
touchTimeout = setTimeout(() => {
touchCount = 0;
}, 400);
setPlay(!isPlaying);
<Video
links={data?.link}
setError={setPlaybackError}
fonts={data?.fonts}
onEnd={() => {
if (!data) return;
if (data.isMovie) router.push(`/movie/${data.slug}`);
else
router.push(
data.nextEpisode ? `/watch/${data.nextEpisode.slug}` : `/show/${data.showSlug}`,
);
}}
{...css(StyleSheet.absoluteFillObject)}
>
<Video
links={data?.link}
setError={setPlaybackError}
fonts={data?.fonts}
onEnd={() => {
if (!data) return;
if (data.isMovie) router.push(`/movie/${data.slug}`);
else
router.push(
data.nextEpisode ? `/watch/${data.nextEpisode.slug}` : `/show/${data.showSlug}`,
);
}}
{...css(StyleSheet.absoluteFillObject)}
/>
</View>
/>
<LoadingIndicator />
<Hover
{...mapData(data, previous, next)}
onPointerEnter={(e) => { if (e.nativeEvent.pointerType === "mouse") setHover(true) }}
onPointerLeave={(e) => { if (e.nativeEvent.pointerType === "mouse") 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();
// Prevent clicks on the hover to play/pause.
e.preventDefault();
e.stopPropagation();
}}
onMenuOpen={() => setMenuOpen(true)}
onMenuClose={() => {
@ -212,7 +229,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
}}
show={displayControls}
/>
</View>
</PressView>
</>
);
};

4
front/packages/ui/src/player/state.tsx
View File

@ -20,7 +20,7 @@
import { Track, WatchItem, Font } from "@kyoo/models";
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
import { ElementRef, memo, useEffect, useLayoutEffect, useRef, useState } from "react";
import NativeVideo, { VideoProperties as VideoProps } from "./video";
import { Platform } from "react-native";
@ -84,7 +84,7 @@ export const Video = memo(function _Video({
setError: (error: string | undefined) => void;
fonts?: Font[];
} & Partial<VideoProps>) {
const ref = useRef<NativeVideo | null>(null);
const ref = useRef<ElementRef<typeof NativeVideo> | null>(null);
const [isPlaying, setPlay] = useAtom(playAtom);
const setLoad = useSetAtom(loadAtom);
const [source, setSource] = useState<string | null>(null);

14
front/packages/ui/src/player/video.tsx
View File

@ -33,7 +33,7 @@ export * from "react-native-video";
import { Font } from "@kyoo/models";
import { IconButton, Menu } from "@kyoo/primitives";
import { ComponentProps, useRef } from "react";
import { ComponentProps, forwardRef } from "react";
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import NativeVideo, { OnLoadData } from "react-native-video";
import { useTranslation } from "react-i18next";
@ -43,17 +43,17 @@ const infoAtom = atom<OnLoadData | null>(null);
const videoAtom = atom(0);
const audioAtom = atom(0);
const Video = ({ onLoad, ...props }: ComponentProps<typeof NativeVideo>) => {
const player = useRef<NativeVideo | null>(null);
const Video = forwardRef<NativeVideo, ComponentProps<typeof NativeVideo>>(function _NativeVideo(
{ onLoad, ...props },
ref,
) {
const setInfo = useSetAtom(infoAtom);
const video = useAtomValue(videoAtom);
const audio = useAtomValue(audioAtom);
return (
<NativeVideo
ref={(ref) => {
player.current = ref;
}}
ref={ref}
onLoad={(info) => {
setInfo(info);
onLoad?.(info);
@ -63,7 +63,7 @@ const Video = ({ onLoad, ...props }: ComponentProps<typeof NativeVideo>) => {
{...props}
/>
);
};
});
export default Video;