Add volume slider (keyboard accessible)

Fix tooltip position on the bottom of the screen.
Add fullscreen support on the web

front/packages/primitives/src/icons.tsx

@@ -63,7 +63,8 @@ export const IconButton = <AsProps = PressableProps,>({
 	const Container = as ?? Pressable;
 
 	return (
-		<Container
+		<Container 
+			accessibilityRole="button"
 			{...(css(
 				{
 					p: ts(1),

front/packages/primitives/src/slider.tsx

@@ -20,8 +20,7 @@
 
 import { useRef, useState } from "react";
 import { GestureResponderEvent, Platform, View } from "react-native";
-import { percent, Stylable, useYoshiki } from "yoshiki/native";
-import { ts } from "./utils";
+import { px, percent, Stylable, useYoshiki } from "yoshiki/native";
 
 export const Slider = ({
 	progress,
@@ -31,6 +30,7 @@ export const Slider = ({
 	setProgress,
 	startSeek,
 	endSeek,
+	size = 6,
 	...props
 }: {
 	progress: number;
@@ -40,6 +40,7 @@ export const Slider = ({
 	setProgress: (progress: number) => void;
 	startSeek?: () => void;
 	endSeek?: () => void;
+	size?: number;
 } & Stylable) => {
 	const { css } = useYoshiki();
 	const ref = useRef<View>(null);
@@ -49,6 +50,8 @@ export const Slider = ({
 	const [isFocus, setFocus] = useState(false);
 	const smallBar = !(isSeeking || isHover || isFocus);
 
+	const ts = (value: number) => px(value * size);
+
 	const change = (event: GestureResponderEvent) => {
 		event.preventDefault();
 		const locationX = Platform.select({
@@ -58,7 +61,6 @@ export const Slider = ({
 		setProgress(Math.max(0, Math.min(locationX / layout.width, 1)) * max);
 	};
 
-	// TODO keyboard handling (left, right, up, down)
 	return (
 		<View
 			ref={ref}
@@ -66,8 +68,7 @@ export const Slider = ({
 			onMouseEnter={() => setHover(true)}
 			// @ts-ignore Web only
 			onMouseLeave={() => setHover(false)}
-			// TODO: This does not work
-			tabindex={0}
+			focusable
 			onFocus={() => setFocus(true)}
 			onBlur={() => setFocus(false)}
 			onStartShouldSetResponder={() => true}
@@ -84,6 +85,22 @@ export const Slider = ({
 			onLayout={() =>
 				ref.current?.measure((_, __, width, ___, pageX) => setLayout({ width: width, x: pageX }))
 			}
+			onKeyDown={(e: KeyboardEvent) => {
+				switch (e.code) {
+					case "ArrowLeft":
+						setProgress(Math.max(progress - 0.05 * max, 0));
+						break;
+					case "ArrowRight":
+						setProgress(Math.min(progress + 0.05 * max, max));
+						break;
+					case "ArrowDown":
+						setProgress(Math.max(progress - 0.1 * max, 0));
+						break;
+					case "ArrowUp":
+						setProgress(Math.min(progress + 0.1 * max, max));
+						break;
+				}
+			}}
 			{...css(
 				{
 					paddingVertical: ts(1),
@@ -155,11 +172,12 @@ export const Slider = ({
 							position: "absolute",
 							top: 0,
 							bottom: 0,
-							marginY: ts(0.5),
+							marginY: ts(Platform.OS === "android" ? -0.5 : 0.5),
 							bg: (theme) => theme.accent,
 							width: ts(2),
 							height: ts(2),
 							borderRadius: ts(1),
+							marginLeft: ts(-1),
 						},
 						smallBar && { opacity: 0 },
 					],

front/packages/primitives/src/tooltip.tsx

@@ -18,13 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ToastAndroid, Platform } from "react-native";
+import { ToastAndroid, Platform, ViewProps, PressableProps } from "react-native";
 import { Theme } from "yoshiki/native";
 
-export const tooltip = (tooltip: string) =>
+export const tooltip = (tooltip: string, up?: boolean) =>
 	Platform.select({
 		web: {
-			dataSet: { tooltip, label: tooltip },
+			dataSet: { tooltip, label: tooltip, tooltipPos: up ? "up" : undefined },
 		},
 		android: {
 			onLongPress: () => {
@@ -66,6 +66,11 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
 				visibility: hidden;
 				transition: opacity 0.3s ease-in-out;
 			}
+			[data-tooltip-pos]::after {
+				top: unset;
+				bottom: 100%;
+				margin-bottom: 8px;
+			}
 
 			:where(body:not(.noHover)) [data-tooltip]:hover::after,
 			[data-tooltip]:focus-visible::after {
@@ -81,7 +86,6 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
 				outline: none;
 				transition: box-shadow 0.15s ease-in-out;
 				box-shadow: 0 0 0 2px ${theme.colors.black};
-				/* box-shadow: ${theme.accent} 1px; */
 			}
 		`}</style>
 	);

front/packages/ui/src/details/staff.tsx

@@ -26,16 +26,14 @@ import { PersonAvatar } from "./person";
 export const Staff = ({ slug }: { slug: string }) => {
 	const { t } = useTranslation();
 
-	// TODO: handle infinite scroll
-
 	return (
 		<InfiniteFetch
 			query={Staff.query(slug)}
 			horizontal
 			layout={{ numColumns: 1, size: PersonAvatar.width }}
+			empty={t("show.staff-none")}
 			placeholderCount={20}
 		>
-			{/* <HorizontalList title={t("show.staff")} noContent={t("show.staff-none")}> */}
 			{(item, key) => (
 				<PersonAvatar
 					key={key}

front/packages/ui/src/player/components/left-buttons.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { IconButton, Link, P, tooltip, ts } from "@kyoo/primitives";
+import { IconButton, Link, P, Slider, tooltip, ts } from "@kyoo/primitives";
 import { useAtom, useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
@@ -31,7 +31,7 @@ import VolumeMute from "@material-symbols/svg-400/rounded/volume_mute-fill.svg";
 import VolumeDown from "@material-symbols/svg-400/rounded/volume_down-fill.svg";
 import VolumeUp from "@material-symbols/svg-400/rounded/volume_up-fill.svg";
 import { durationAtom, mutedAtom, playAtom, progressAtom, volumeAtom } from "../state";
-import { useYoshiki } from "yoshiki/native";
+import { px, useYoshiki } from "yoshiki/native";
 
 export const LeftButtons = ({
 	previousSlug,
@@ -53,14 +53,14 @@ export const LeftButtons = ({
 					icon={SkipPrevious}
 					as={Link}
 					href={previousSlug}
-					{...tooltip(t("player.previous"))}
+					{...tooltip(t("player.previous"), true)}
 					{...spacing}
 				/>
 			)}
 			<IconButton
 				icon={isPlaying ? Pause : PlayArrow}
 				onPress={() => setPlay(!isPlaying)}
-				{...tooltip(isPlaying ? t("player.pause") : t("player.play"))}
+				{...tooltip(isPlaying ? t("player.pause") : t("player.play"), true)}
 				{...spacing}
 			/>
 			{nextSlug && (
@@ -68,7 +68,7 @@ export const LeftButtons = ({
 					icon={SkipNext}
 					as={Link}
 					href={nextSlug}
-					{...tooltip(t("player.next"))}
+					{...tooltip(t("player.next"), true)}
 					{...spacing}
 				/>
 			)}
@@ -84,13 +84,13 @@ const VolumeSlider = () => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
 
-	return null;
 	return (
 		<View
 			{...css({
 				display: { xs: "none", sm: "flex" },
-				p: ts(1),
-				"body.hoverEnabled &:hover .slider": { width: "100px", px: "16px" },
+				alignItems: "center",
+				flexDirection: "row",
+				paddingRight: ts(1),
 			})}
 		>
 			<IconButton
@@ -103,26 +103,16 @@ const VolumeSlider = () => {
 						? VolumeDown
 						: VolumeUp
 				}
-				onClick={() => setMuted(!isMuted)}
-				{...tooltip(t("mute"))}
+				onPress={() => setMuted(!isMuted)}
+				{...tooltip(t("player.mute"), true)}
+			/>
+			<Slider
+				progress={volume}
+				setProgress={setVolume}
+				size={4}
+				{...css({ width: px(100) })}
+				{...tooltip(t("player.volume"), true)}
 			/>
-			<View
-				className="slider"
-				sx={{
-					width: 0,
-					transition: "width .2s cubic-bezier(0.4,0, 1, 1), padding .2s cubic-bezier(0.4,0, 1, 1)",
-					overflow: "hidden",
-					alignSelf: "center",
-				}}
-			>
-				<Slider
-					value={volume}
-					onChange={(_, value) => setVolume(value as number)}
-					size="small"
-					aria-label={t("volume")}
-					sx={{ alignSelf: "center" }}
-				/>
-			</View>
 		</View>
 	);
 };

front/packages/ui/src/player/components/right-buttons.tsx

@@ -23,7 +23,7 @@ import { IconButton, tooltip } from "@kyoo/primitives";
 import { useAtom } from "jotai";
 import { useRouter } from "solito/router";
 import { useState } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { useTranslation } from "react-i18next";
 import Fullscreen from "@material-symbols/svg-400/rounded/fullscreen-fill.svg";
 import FullscreenExit from "@material-symbols/svg-400/rounded/fullscreen_exit-fill.svg";
@@ -72,12 +72,13 @@ export const RightButtons = ({
 			{/* 		</IconButton> */}
 			{/* 	</Tooltip> */}
 			{/* )} */}
-			<IconButton
-				icon={isFullscreen ? FullscreenExit : Fullscreen}
-				onClick={() => setFullscreen(!isFullscreen)}
-				{...tooltip(t("player.fullscreen"))}
-				sx={{ color: "white" }}
-			/>
+			{Platform.OS === "web" && (
+				<IconButton
+					icon={isFullscreen ? FullscreenExit : Fullscreen}
+					onPress={() => setFullscreen(!isFullscreen)}
+					{...tooltip(t("player.fullscreen"), true)}
+				/>
+			)}
 			{/* {subtitleAnchor && ( */}
 			{/* 	<SubtitleMenu */}
 			{/* 		subtitles={subtitles!} */}

front/packages/ui/src/player/index.tsx

@@ -33,10 +33,6 @@ import { MediaSessionManager } from "./media-session";
 import { ErrorView } from "../fetch";
 import { useTranslation } from "react-i18next";
 
-// 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;
-
 const query = (slug: string): QueryIdentifier<WatchItem> => ({
 	path: ["watch", slug],
 	parser: WatchItemP,
@@ -62,6 +58,14 @@ const mapData = (
 	};
 };
 
+// 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;
+// Number of time the video has been pressed. Used to handle double click. Since there is only one player,
+// this can be global and not in the state.
+let touchCount = 0;
+let touchTimeout: NodeJS.Timeout;
+
 export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
@@ -80,7 +84,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 	// useVideoKeyboard(data?.subtitles, data?.fonts, previous, next);
 
 	const router = useRouter();
-	const setFullscreen = useSetAtom(fullscreenAtom);
+	const [isFullscreen, setFullscreen] = useAtom(fullscreenAtom);
 	const [isPlaying, setPlay] = useAtom(playAtom);
 	const [showHover, setHover] = useState(false);
 	const [mouseMoved, setMouseMoved] = useState(false);
@@ -154,7 +158,23 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 			{/* `}</style> */}
 			<Pressable
 				onHoverOut={() => setMouseMoved(false)}
-				onPress={Platform.OS === "web" ? () => setPlay(!isPlaying) : show}
+				onPress={
+					Platform.OS === "web"
+						? (e) => {
+								e.preventDefault();
+								touchCount++;
+								if (touchCount == 2) {
+									touchCount = 0;
+									setFullscreen(!isFullscreen);
+									clearTimeout(touchTimeout);
+								} else
+									touchTimeout = setTimeout(() => {
+										touchCount = 0;
+									}, 400);
+								setPlay(!isPlaying);
+						  }
+						: show
+				}
 				{...css({
 					flexGrow: 1,
 					// @ts-ignore

front/packages/ui/src/player/state.tsx

@@ -36,6 +36,7 @@ const playModeAtom = atom<PlayMode>(PlayMode.Direct);
 
 export const playAtom = atom(true);
 export const loadAtom = atom(false);
+
 export const bufferedAtom = atom(0);
 export const durationAtom = atom<number | undefined>(undefined);
 
@@ -49,18 +50,9 @@ export const progressAtom = atom<number, number>(
 const privateProgressAtom = atom(0);
 const publicProgressAtom = atom(0);
 
-export const [_volumeAtom, volumeAtom] = bakedAtom(100, (get, set, value, baker) => {
-	const player = get(playerAtom);
-	if (!player?.current) return;
-	set(baker, value);
-	if (player.current) player.current.volume = Math.max(0, Math.min(value, 100)) / 100;
-});
-export const [_mutedAtom, mutedAtom] = bakedAtom(false, (get, set, value, baker) => {
-	const player = get(playerAtom);
-	if (!player?.current) return;
-	set(baker, value);
-	if (player.current) player.current.muted = value;
-});
+export const volumeAtom = atom(100);
+export const mutedAtom = atom(false);
+
 export const [_, fullscreenAtom] = bakedAtom(false, async (_, set, value, baker) => {
 	try {
 		if (value) {
@@ -82,11 +74,6 @@ export const Video = ({
 	setError,
 	...props
 }: { links?: WatchItem["link"]; setError: (error: string | undefined) => void } & VideoProps) => {
-	// const player = useRef<HTMLVideoElement>(null);
-	// const setPlayer = useSetAtom(playerAtom);
-	// const setVolume = useSetAtom(_volumeAtom);
-	// const setMuted = useSetAtom(_mutedAtom);
-	// const setFullscreen = useSetAtom(fullscreenAtom);
 	// const [playMode, setPlayMode] = useAtom(playModeAtom);
 
 	const ref = useRef<NativeVideo | null>(null);
@@ -101,17 +88,12 @@ export const Video = ({
 	const setPrivateProgress = useSetAtom(privateProgressAtom);
 	const setBuffered = useSetAtom(bufferedAtom);
 	const setDuration = useSetAtom(durationAtom);
-
 	useEffect(() => {
 		ref.current?.setStatusAsync({ positionMillis: publicProgress });
 	}, [publicProgress]);
 
-	// setPlayer(player);
-
-	// useEffect(() => {
-	// 	if (!player.current) return;
-	// 	setPlay(!player.current.paused);
-	// }, [setPlay]);
+	const volume = useAtomValue(volumeAtom);
+	const isMuted = useAtomValue(mutedAtom);
 
 	// useEffect(() => {
 	// 	setPlayMode(PlayMode.Direct);
@@ -150,6 +132,8 @@ export const Video = ({
 			{...props}
 			source={links ? { uri: links.direct } : undefined}
 			shouldPlay={isPlaying}
+			isMuted={isMuted}
+			volume={volume}
 			onPlaybackStatusUpdate={(status) => {
 				if (!status.isLoaded) {
 					setLoad(true);
@@ -158,7 +142,6 @@ export const Video = ({
 				}
 
 				setLoad(status.isPlaying !== status.shouldPlay);
-				setPlay(status.shouldPlay);
 				setPrivateProgress(status.positionMillis);
 				setBuffered(status.playableDurationMillis ?? 0);
 				setDuration(status.durationMillis);