Implement middle controls

front/src/ui/player/controls/bottom-controls.tsx

@@ -11,10 +11,10 @@ import {
 	IconButton,
 	Link,
 	type Menu,
-	noTouch,
 	Poster,
 	tooltip,
 	ts,
+	useIsTouch,
 } from "~/primitives";
 import { FullscreenButton, PlayButton, VolumeSlider } from "./misc";
 import { ProgressBar, ProgressText } from "./progress";
@@ -102,6 +102,7 @@ const ControlButtons = ({
 }) => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
+	const isTouch = useIsTouch();
 
 	const spacing = css({ marginHorizontal: ts(1) });
 	const menuProps = {
@@ -123,34 +124,36 @@ const ControlButtons = ({
 			)}
 		>
 			<View {...css({ flexDirection: "row" })}>
-				<View {...css({ flexDirection: "row" }, noTouch)}>
+				{isTouch && (
-					{previous && (
+					<View {...css({ flexDirection: "row" })}>
-						<IconButton
+						{previous && (
-							icon={SkipPrevious}
+							<IconButton
-							as={Link}
+								icon={SkipPrevious}
-							href={previous}
+								as={Link}
-							replace
+								href={previous}
-							{...tooltip(t("player.previous"), true)}
+								replace
-							{...spacing}
+								{...tooltip(t("player.previous"), true)}
-						/>
+								{...spacing}
-					)}
+							/>
-					<PlayButton player={player} {...spacing} />
+						)}
-					{next && (
+						<PlayButton player={player} {...spacing} />
-						<IconButton
+						{next && (
-							icon={SkipNext}
+							<IconButton
-							as={Link}
+								icon={SkipNext}
-							href={next}
+								as={Link}
-							replace
+								href={next}
-							{...tooltip(t("player.next"), true)}
+								replace
-							{...spacing}
+								{...tooltip(t("player.next"), true)}
-						/>
+								{...spacing}
-					)}
+							/>
-					{Platform.OS === "web" && <VolumeSlider player={player} />}
+						)}
-				</View>
+						{Platform.OS === "web" && <VolumeSlider player={player} />}
+					</View>
+				)}
 				<ProgressText player={player} {...spacing} />
 			</View>
 			<View {...css({ flexDirection: "row" })}>
-				<SubtitleMenu {...menuProps}  />
+				<SubtitleMenu {...menuProps} />
 				<AudioMenu {...menuProps} />
 				<QualityMenu {...menuProps} />
 				{Platform.OS === "web" && <FullscreenButton {...spacing} />}

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

@@ -3,8 +3,10 @@ import type { ViewProps } from "react-native";
 import type { VideoPlayer } from "react-native-video";
 import { useYoshiki } from "yoshiki/native";
 import type { Chapter, KImage } from "~/models";
+import { useIsTouch } from "~/primitives";
 import { Back } from "./back";
 import { BottomControls } from "./bottom-controls";
+import { MiddleControls } from "./middle-controls";
 import { TouchControls } from "./touch";
 
 export const Controls = ({
@@ -25,6 +27,7 @@ export const Controls = ({
 	next: string | null;
 }) => {
 	const { css } = useYoshiki();
+	const isTouch = useIsTouch();
 
 	const [hover, setHover] = useState(false);
 	const [menuOpenned, setMenu] = useState(false);
@@ -56,6 +59,9 @@ export const Controls = ({
 					hoverControls,
 				)}
 			/>
+			{isTouch && (
+				<MiddleControls player={player} previous={previous} next={next} />
+			)}
 			<BottomControls
 				player={player}
 				name={subTitle}
@@ -66,7 +72,7 @@ export const Controls = ({
 				setMenu={setMenu}
 				{...css(
 					{
-						// Fixed is used because firefox android make the hover disapear under the navigation bar in absolute
+						// Fixed is used because firefox android make the hover disappear under the navigation bar in absolute
 						// position: Platform.OS === "web" ? ("fixed" as any) : "absolute",
 						position: "absolute",
 						bottom: 0,

front/src/ui/player/controls/middle-controls.tsx

@@ -0,0 +1,61 @@
+import SkipNext from "@material-symbols/svg-400/rounded/skip_next-fill.svg";
+import SkipPrevious from "@material-symbols/svg-400/rounded/skip_previous-fill.svg";
+import { View } from "react-native";
+import type { VideoPlayer } from "react-native-video";
+import { useYoshiki } from "yoshiki/native";
+import { IconButton, Link, ts } from "~/primitives";
+import { PlayButton } from "./misc";
+
+export const MiddleControls = ({
+	player,
+	previous,
+	next,
+	...props
+}: {
+	player: VideoPlayer;
+	previous?: string | null;
+	next?: string | null;
+}) => {
+	const { css } = useYoshiki();
+
+	const common = css({
+		backgroundColor: (theme) => theme.darkOverlay,
+		marginHorizontal: ts(3),
+	});
+
+	return (
+		<View
+			{...css(
+				{
+					flexDirection: "row",
+					justifyContent: "center",
+					alignItems: "center",
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+				},
+				props,
+			)}
+		>
+			<IconButton
+				icon={SkipPrevious}
+				as={Link}
+				href={previous}
+				replace
+				size={ts(4)}
+				{...css([!previous && { opacity: 0, pointerEvents: "none" }], common)}
+			/>
+			<PlayButton player={player} size={ts(8)} {...common} />
+			<IconButton
+				icon={SkipNext}
+				as={Link}
+				href={next}
+				replace
+				size={ts(4)}
+				{...css([!next && { opacity: 0, pointerEvents: "none" }], common)}
+			/>
+		</View>
+	);
+};

front/src/ui/player/old/left-buttons.tsx

@@ -10,8 +10,8 @@ import { useAtom, useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { px, type Stylable, useYoshiki } from "yoshiki/native";
-import { HoverTouch, hoverAtom } from "../controls";
+import { HoverTouch, hoverAtom } from ".";
-import { playAtom } from "./state";
+import { playAtom } from "../old/state";
 
 export const TouchControls = ({
 	previousSlug,