Create the subtitle menu for the web

front/apps/web/package.json

@@ -13,7 +13,6 @@
 	"dependencies": {
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
-		"@gorhom/portal": "^1.0.14",
 		"@kyoo/models": "workspace:^",
 		"@kyoo/primitives": "workspace:^",
 		"@kyoo/ui": "workspace:^",
@@ -21,6 +20,7 @@
 		"@mui/icons-material": "^5.8.4",
 		"@mui/material": "^5.8.7",
 		"@mui/system": "^5.10.10",
+		"@radix-ui/react-dropdown-menu": "^2.0.1",
 		"@tanstack/react-query": "^4.19.1",
 		"clsx": "^1.2.1",
 		"csstype": "^3.1.1",

front/apps/web/src/pages/_app.tsx

@@ -20,7 +20,6 @@
 
 import "../polyfill";
 
-import { PortalProvider } from "@gorhom/portal";
 import { createTheme, ThemeProvider as MTheme } from "@mui/material";
 import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
@@ -105,9 +104,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 				<Hydrate state={queryState}>
 					<ThemeSelector>
 						<GlobalCssTheme />
-						<PortalProvider>
-							<Layout page={<Component {...props} />} />
-						</PortalProvider>
+						<Layout page={<Component {...props} />} />
 					</ThemeSelector>
 				</Hydrate>
 			</QueryClientProvider>

front/packages/primitives/package.json

@@ -10,6 +10,7 @@
 	"peerDependencies": {
 		"@gorhom/portal": "*",
 		"@material-symbols/svg-400": "*",
+		"@radix-ui/react-dropdown-menu": "*",
 		"expo-linear-gradient": "*",
 		"moti": "*",
 		"react": "*",
@@ -19,6 +20,12 @@
 		"yoshiki": "*"
 	},
 	"peerDependenciesMeta": {
+		"@gorhom/portal": {
+			"optional": true
+		},
+		"@radix-ui/react-dropdown-menu": {
+			"optional": true
+		},
 		"react-native-web": {
 			"optional": true
 		}

front/packages/primitives/src/icons.tsx

@@ -18,13 +18,19 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ComponentProps, ComponentType } from "react";
+import React, { ComponentProps, ComponentType, ForwardedRef, forwardRef } from "react";
 import { Pressable, Platform, PressableProps, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { YoshikiStyle } from "yoshiki/dist/type";
 import { px, useYoshiki } from "yoshiki/native";
 import { ts } from "./utils";
 
+declare module "react" {
+	function forwardRef<T, P = {}>(
+		render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null,
+	): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+
 type IconProps = {
 	icon: ComponentType<SvgProps>;
 	color?: YoshikiStyle<string>;
@@ -51,19 +57,25 @@ export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	);
 };
 
-export const IconButton = <AsProps = PressableProps,>({
-	icon,
-	size,
-	color,
-	as,
-	...asProps
-}: IconProps & { as?: ComponentType<AsProps> } & AsProps) => {
+export const IconButton = forwardRef(function _IconButton<AsProps = PressableProps>(
+	{
+		icon,
+		size,
+		color,
+		as,
+		...asProps
+	}: IconProps & {
+		as?: ComponentType<AsProps>;
+	} & AsProps,
+	ref: ForwardedRef<unknown>,
+) {
 	const { css } = useYoshiki();
 
 	const Container = as ?? Pressable;
 
 	return (
-		<Container 
+		<Container
+			ref={ref as any}
 			accessibilityRole="button"
 			{...(css(
 				{
@@ -77,7 +89,7 @@ export const IconButton = <AsProps = PressableProps,>({
 			<Icon icon={icon} size={size} color={color} />
 		</Container>
 	);
-};
+});
 
 export const IconFab = <AsProps = PressableProps,>(
 	props: ComponentProps<typeof IconButton<AsProps>>,

front/packages/primitives/src/links.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ComponentProps, ComponentType, Fragment, ReactNode } from "react";
+import { ComponentProps, ComponentType, forwardRef, Fragment, ReactNode } from "react";
 import {
 	Platform,
 	Pressable,
@@ -28,7 +28,7 @@ import {
 	View,
 	ViewProps,
 	StyleSheet,
-    PressableProps,
+	PressableProps,
 } from "react-native";
 import { LinkCore, TextLink } from "solito/link";
 import { useYoshiki } from "yoshiki/native";
@@ -60,27 +60,27 @@ export const A = ({
 	);
 };
 
-export const PressableFeedback = ({
-	children,
-	WebComponent,
-	...props
-}: ViewProps & {
-	onFocus?: PressableProps["onFocus"];
-	onBlur?: PressableProps["onBlur"];
-	onPressIn?: PressableProps["onPressIn"];
-	onPressOut?: PressableProps["onPressOut"];
-	onPress?: PressableProps["onPress"];
-	WebComponent?: ComponentType;
-}) => {
+export const PressableFeedback = forwardRef<
+	unknown,
+	ViewProps & {
+		onFocus?: PressableProps["onFocus"];
+		onBlur?: PressableProps["onBlur"];
+		onPressIn?: PressableProps["onPressIn"];
+		onPressOut?: PressableProps["onPressOut"];
+		onPress?: PressableProps["onPress"];
+		WebComponent?: ComponentType;
+	}
+>(function _Feedback({ children, WebComponent, ...props }, ref) {
 	const { onBlur, onFocus, onPressIn, onPressOut, onPress, ...noPressProps } = props;
 	const pressProps = { onBlur, onFocus, onPressIn, onPressOut, onPress };
-	const radiusStyle = Platform.select<ViewProps>({
+	const wrapperProps = Platform.select<ViewProps & { ref?: any }>({
 		android: {
 			style: { borderRadius: StyleSheet.flatten(props?.style)?.borderRadius, overflow: "hidden" },
+			ref,
 		},
 		default: {},
 	});
-	const Wrapper = radiusStyle.style ? View : Fragment;
+	const Wrapper = wrapperProps.style ? View : Fragment;
 	const InnerPressable = Platform.select<ComponentType<{ children?: any }>>({
 		web: WebComponent ?? Pressable,
 		android: TouchableNativeFeedback,
@@ -89,11 +89,11 @@ export const PressableFeedback = ({
 	});
 
 	return (
-		<Wrapper {...radiusStyle}>
+		<Wrapper {...wrapperProps}>
 			<InnerPressable
 				{...Platform.select<object>({
 					android: { useForeground: true, ...pressProps },
-					default: props,
+					default: { ref, ...props },
 				})}
 			>
 				{Platform.select<ReactNode>({
@@ -104,7 +104,7 @@ export const PressableFeedback = ({
 			</InnerPressable>
 		</Wrapper>
 	);
-};
+});
 
 export const Link = ({
 	href,

front/packages/primitives/src/menu.tsx

@@ -21,18 +21,19 @@
 import { Portal } from "@gorhom/portal";
 import { ScrollView } from "moti";
 import { ComponentType, createContext, ReactNode, useContext, useEffect, useState } from "react";
-import { PressableProps, StyleSheet, Pressable } from "react-native";
+import { StyleSheet, Pressable } from "react-native";
 import { percent, px, sm, useYoshiki, xl } from "yoshiki/native";
 import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
-import { IconButton } from "./icons";
+import { Icon, IconButton } from "./icons";
 import { PressableFeedback } from "./links";
 import { P } from "./text";
 import { ContrastArea } from "./themes";
 import { ts } from "./utils";
+import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
 
 const MenuContext = createContext<((open: boolean) => void) | undefined>(undefined);
 
-const Menu = <AsProps extends { onPress: PressableProps["onPress"] }>({
+const Menu = <AsProps,>({
 	Triger,
 	onMenuOpen,
 	onMenuClose,
@@ -107,37 +108,39 @@ const Menu = <AsProps extends { onPress: PressableProps["onPress"] }>({
 	);
 };
 
-const MenuItem = <AsProps extends PressableProps>({
+const MenuItem = ({
 	label,
-	icon,
 	selected,
-	as,
-	onPress,
+	onSelect,
 	...props
 }: {
 	label: string;
-	icon?: JSX.Element;
 	selected?: boolean;
-	as?: ComponentType<AsProps>;
-} & AsProps) => {
-	const { css } = useYoshiki();
+	onSelect: () => void;
+}) => {
+	const { css, theme } = useYoshiki();
 	const setOpen = useContext(MenuContext);
 
-	const As: ComponentType<any> = as ?? PressableFeedback;
 	return (
-		<As
-			onPress={(e: any) => {
+		<PressableFeedback
+			onPress={() => {
 				setOpen?.call(null, false);
-				onPress?.call(null, e);
+				onSelect?.call(null);
 			}}
 			{...css(
-				{ paddingHorizontal: ts(2), width: percent(100), height: ts(5), justifyContent: "center" },
+				{
+					paddingHorizontal: ts(2),
+					width: percent(100),
+					height: ts(5),
+					alignItems: "center",
+					flexDirection: "row",
+				},
 				props as any,
 			)}
 		>
-			{icon ?? null}
-			<P>{label}</P>
-		</As>
+			{selected && <Icon icon={Check} color={theme.paragraph} size={24} />}
+			<P {...css({ paddingLeft: ts(2) + +!selected * px(24) })}>{label}</P>
+		</PressableFeedback>
 	);
 };
 Menu.Item = MenuItem;

front/packages/primitives/src/menu.web.tsx

@@ -0,0 +1,148 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ComponentType, forwardRef, ReactNode } from "react";
+import { PressableProps } from "react-native";
+import { useYoshiki } from "yoshiki/web";
+import { px, useYoshiki as useNativeYoshiki } from "yoshiki/native";
+import { P } from "./text";
+import { ContrastArea } from "./themes";
+import { Icon } from "./icons";
+import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg";
+
+type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
+const YoshikiProvider = ({ children }: { children: YoshikiFunc<ReactNode> }) => {
+	const yoshiki = useYoshiki();
+	return <>{children(yoshiki)}</>;
+};
+const InternalTriger = forwardRef<unknown, any>(function _Triger(
+	{ Component, ComponentProps, ...props },
+	ref,
+) {
+	return (
+		<Component ref={ref} {...ComponentProps} {...props} onClickCapture={props.onPointerDown} />
+	);
+});
+
+const Menu = <AsProps extends { onPress: PressableProps["onPress"] }>({
+	Triger,
+	onMenuOpen,
+	onMenuClose,
+	children,
+	...props
+}: {
+	Triger: ComponentType<AsProps>;
+	children: ReactNode | ReactNode[] | null;
+	onMenuOpen: () => void;
+	onMenuClose: () => void;
+} & Omit<AsProps, "onPress">) => {
+	return (
+		<DropdownMenu.Root
+			modal
+			onOpenChange={(isOpen) => {
+				if (isOpen) onMenuOpen?.call(null);
+				else onMenuClose?.call(null);
+			}}
+		>
+			<DropdownMenu.Trigger asChild>
+				<InternalTriger Component={Triger} ComponentProps={props} />
+			</DropdownMenu.Trigger>
+			<ContrastArea mode="user">
+				<YoshikiProvider>
+					{({ css }) => (
+						<DropdownMenu.Portal>
+							<DropdownMenu.Content
+								onFocusOutside={(e) => e.stopImmediatePropagation()}
+								{...css({
+									bg: (theme) => theme.background,
+									overflow: "hidden",
+									minWidth: "220px",
+									borderRadius: "8px",
+									boxShadow:
+										"0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+								})}
+							>
+								{children}
+							</DropdownMenu.Content>
+						</DropdownMenu.Portal>
+					)}
+				</YoshikiProvider>
+			</ContrastArea>
+		</DropdownMenu.Root>
+	);
+};
+
+const MenuItem = ({
+	label,
+	icon,
+	selected,
+	onSelect,
+	...props
+}: {
+	label: string;
+	icon?: JSX.Element;
+	selected?: boolean;
+	onSelect: () => void;
+}) => {
+	const { css: nCss } = useNativeYoshiki();
+	const { css, theme } = useYoshiki();
+
+	return (
+		<>
+			<style jsx global>{`
+				[data-highlighted] {
+					background: ${theme.alternate.accent};
+				}
+			`}</style>
+			<DropdownMenu.Item
+				onSelect={onSelect}
+				{...css(
+					[
+						{
+							display: "flex",
+							alignItems: "center",
+							padding: "8px",
+							height: "32px",
+							color: (theme) => theme.paragraph,
+							focus: {
+								boxShadow: "none",
+							},
+						},
+					],
+					props as any,
+				)}
+			>
+				{selected && (
+					<Icon
+						icon={Dot}
+						color={theme.paragraph}
+						size={px(8)}
+						{...nCss({ paddingRight: px(8) })}
+					/>
+				)}
+				{<P {...nCss([{ color: "inherit" }, !selected && { paddingLeft: px(8 * 2) }])}>{label}</P>}
+			</DropdownMenu.Item>
+		</>
+	);
+};
+Menu.Item = MenuItem;
+
+export { Menu };

front/packages/primitives/src/slider.tsx

@@ -104,6 +104,8 @@ export const Slider = ({
 			{...css(
 				{
 					paddingVertical: ts(1),
+					// @ts-ignore Web only
+					cursor: "pointer",
 					focus: {
 						shadowRadius: 0,
 					},

front/packages/primitives/src/text.tsx

@@ -46,8 +46,7 @@ const styleText = (
 				{...css(
 					[
 						{
-							marginTop: 0,
-							marginBottom: rem(0.5),
+							marginVertical: rem(0.5),
 							// fontFamily: type === "header" ? theme.fonts.heading : theme.fonts.paragraph,
 							color: type === "header" ? theme.heading : theme.paragraph,
 						},

front/packages/primitives/src/themes/theme.tsx

@@ -63,6 +63,7 @@ declare module "yoshiki" {
 		light: Mode & Variant;
 		dark: Mode & Variant;
 		user: Mode & Variant;
+		alternate: Mode & Variant;
 	}
 }
 declare module "yoshiki/native" {
@@ -70,6 +71,7 @@ declare module "yoshiki/native" {
 		light: Mode & Variant;
 		dark: Mode & Variant;
 		user: Mode & Variant;
+		alternate: Mode & Variant;
 	}
 }
 
@@ -84,12 +86,14 @@ const selectMode = (theme: ThemeBuilder, mode: "light" | "dark"): Theme => {
 	const light = { ...lightBuilder, ...lightBuilder.default };
 	const dark = { ...darkBuilder, ...darkBuilder.default };
 	const value = mode === "light" ? light : dark;
+	const alternate = mode === "light" ? dark : light;
 	return {
 		...options,
 		...value,
 		light,
 		dark,
 		user: value,
+		alternate,
 	};
 };
 

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

@@ -143,6 +143,7 @@ const TitleLine = ({
 									{...css({
 										fontWeight: "300",
 										fontSize: rem(1.5),
+										marginTop: 0,
 										letterSpacing: 0,
 										textAlign: { xs: "center", sm: "left" },
 										color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }),

front/packages/ui/src/player/components/hover.tsx

@@ -74,22 +74,26 @@ export const Hover = ({
 	show: boolean;
 } & ViewProps) => {
 	// TODO animate show
+	const opacity = !show && { opacity: 0 };
 	return (
 		<ContrastArea mode="dark">
 			{({ css }) => (
-				<View {...css([{ flexGrow: 1 }, !show && { opacity: 0 }])}>
-					<Back isLoading={isLoading} name={showName} href={href} {...props} />
+				<>
+					<Back isLoading={isLoading} name={showName} href={href} {...css(opacity, props)} />
 					<View
 						{...css(
-							{
-								position: "absolute",
-								bottom: 0,
-								left: 0,
-								right: 0,
-								bg: (theme) => alpha(theme.colors.black, 0.6),
-								flexDirection: "row",
-								padding: percent(1),
-							},
+							[
+								{
+									position: "absolute",
+									bottom: 0,
+									left: 0,
+									right: 0,
+									bg: (theme) => alpha(theme.colors.black, 0.6),
+									flexDirection: "row",
+									padding: percent(1),
+								},
+								opacity,
+							],
 							props,
 						)}
 					>
@@ -118,7 +122,7 @@ export const Hover = ({
 							</View>
 						</View>
 					</View>
-				</View>
+				</>
 			)}
 		</ContrastArea>
 	);
@@ -178,12 +182,11 @@ export const Back = ({
 			/>
 			<Skeleton>
 				{isLoading ? (
-					<Skeleton {...css({ width: rem(5), marginBottom: 0 })} />
+					<Skeleton {...css({ width: rem(5), })} />
 				) : (
 					<H1
 						{...css({
 							alignSelf: "center",
-							marginBottom: 0,
 							fontSize: rem(1.5),
 							marginLeft: rem(1),
 						})}
@@ -224,6 +227,7 @@ export const LoadingIndicator = () => {
 
 	return (
 		<View
+			pointerEvents="none"
 			{...css({
 				position: "absolute",
 				top: 0,

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

@@ -123,7 +123,7 @@ const ProgressText = () => {
 	const { css } = useYoshiki();
 
 	return (
-		<P {...css({ alignSelf: "center", marginBottom: 0 })}>
+		<P {...css({ alignSelf: "center" })}>
 			{toTimerString(progress, duration)} : {toTimerString(duration)}
 		</P>
 	);

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

@@ -21,7 +21,6 @@
 import { Font, Track } from "@kyoo/models";
 import { IconButton, tooltip, Menu, ts, A } from "@kyoo/primitives";
 import { useAtom } from "jotai";
-import { useRouter } from "solito/router";
 import { Platform, View } from "react-native";
 import { useTranslation } from "react-i18next";
 import ClosedCaption from "@material-symbols/svg-400/rounded/closed_caption-fill.svg";
@@ -31,7 +30,7 @@ import { Stylable, useYoshiki } from "yoshiki/native";
 import { createParam } from "solito";
 import { fullscreenAtom, subtitleAtom } from "../state";
 
-const { useParam } = createParam<{ subtitle?: string }>();
+const { useParam } = createParam<{ subtitle?: (string) }>();
 
 export const RightButtons = ({
 	subtitles,
@@ -52,32 +51,28 @@ export const RightButtons = ({
 
 	const spacing = css({ marginHorizontal: ts(1) });
 
-	subtitles = [{ id: 1, slug: "oto", displayName: "toto" }];
-
 	return (
 		<View {...css({ flexDirection: "row" }, props)}>
 			{subtitles && (
 				<Menu
 					Triger={IconButton}
 					icon={ClosedCaption}
+					onMenuOpen={onMenuOpen}
+					onMenuClose={onMenuClose}
 					{...tooltip(t("player.subtitles"), true)}
 					{...spacing}
-					// id="sortby"
-					// aria-controls={subtitleAnchor ? "subtitle-menu" : undefined}
-					// aria-haspopup="true"
-					// aria-expanded={subtitleAnchor ? "true" : undefined}
 				>
 					<Menu.Item
 						label={t("player.subtitle-none")}
 						selected={!selectedSubtitle}
-						onPress={() => setSubtitle(undefined)}
+						onSelect={() => setSubtitle(undefined)}
 					/>
 					{subtitles.map((x) => (
 						<Menu.Item
 							key={x.id}
 							label={x.displayName}
-							selected={selectedSubtitle === x.slug}
-							onPress={() => setSubtitle(x.slug)}
+							selected={selectedSubtitle === x.language || selectedSubtitle === x.id.toString()}
+							onSelect={() => setSubtitle(x.language ?? x.id.toString())}
 						/>
 					))}
 				</Menu>
@@ -90,84 +85,7 @@ export const RightButtons = ({
 					{...spacing}
 				/>
 			)}
-			{/* {subtitleAnchor && ( */}
-			{/* 	<SubtitleMenu */}
-			{/* 		subtitles={subtitles!} */}
-			{/* 		fonts={fonts!} */}
-			{/* 		anchor={subtitleAnchor} */}
-			{/* 		onClose={() => { */}
-			{/* 			setSubtitleAnchor(null); */}
-			{/* 			onMenuClose(); */}
-			{/* 		}} */}
-			{/* 	/> */}
-			{/* )} */}
 		</View>
 	);
 };
 
-const SubtitleMenu = ({
-	subtitles,
-	fonts,
-	anchor,
-	onClose,
-}: {
-	subtitles: Track[];
-	fonts: Font[];
-	anchor: HTMLElement;
-	onClose: () => void;
-}) => {
-	const router = useRouter();
-	const { t } = useTranslation("player");
-	const [selectedSubtitle, setSubtitle] = useAtom(subtitleAtom);
-	const { subtitle, ...queryWithoutSubs } = router.query;
-
-	return (
-		<Menu
-			id="subtitle-menu"
-			MenuListProps={{
-				"aria-labelledby": "subtitle",
-			}}
-			anchorEl={anchor}
-			open={!!anchor}
-			onClose={onClose}
-			anchorOrigin={{
-				vertical: "top",
-				horizontal: "center",
-			}}
-			transformOrigin={{
-				vertical: "bottom",
-				horizontal: "center",
-			}}
-		>
-			<MenuItem
-				selected={!selectedSubtitle}
-				onClick={() => {
-					setSubtitle(null);
-					onClose();
-				}}
-				component={Link}
-				to={{ query: queryWithoutSubs }}
-				shallow
-				replace
-			>
-				<ListItemText>{t("subtitle-none")}</ListItemText>
-			</MenuItem>
-			{subtitles.map((sub) => (
-				<MenuItem
-					key={sub.id}
-					selected={selectedSubtitle?.id === sub.id}
-					onClick={() => {
-						setSubtitle({ track: sub, fonts });
-						onClose();
-					}}
-					component={Link}
-					to={{ query: { ...router.query, subtitle: sub.language ?? sub.id } }}
-					shallow
-					replace
-				>
-					<ListItemText>{sub.displayName}</ListItemText>
-				</MenuItem>
-			))}
-		</Menu>
-	);
-};

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

@@ -23,7 +23,6 @@ import { Head } from "@kyoo/primitives";
 import { useState, useEffect, PointerEvent as ReactPointerEvent, ComponentProps } from "react";
 import { Platform, Pressable, StyleSheet, View } from "react-native";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useRouter } from "solito/router";
 import { percent, useYoshiki } from "yoshiki/native";
 import { Back, Hover, LoadingIndicator } from "./components/hover";
 import { fullscreenAtom, playAtom, Video } from "./state";
@@ -83,7 +82,6 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 	// useSubtitleController(playerRef, data?.subtitles, data?.fonts);
 	useVideoKeyboard(data?.subtitles, data?.fonts, previous, next);
 
-	const router = useRouter();
 	const [isFullscreen, setFullscreen] = useAtom(fullscreenAtom);
 	const [isPlaying, setPlay] = useAtom(playAtom);
 	const [showHover, setHover] = useState(false);
@@ -157,44 +155,51 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 			{/* 	} */}
 			{/* `}</style> */}
 			<Pressable
+				focusable={false}
 				onHoverOut={() => setMouseMoved(false)}
-				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
 					bg: "black",
+					// @ts-ignore Web only
+					cursor: "unset",
 				})}
 			>
-				<Video
-					links={data?.link}
-					videoStyle={{ width: percent(100), height: percent(100) }}
-					setError={setPlaybackError}
+				<Pressable
+					focusable={false}
+					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);
+							  }
+							: () => displayControls ? setMouseMoved(false) : show()
+					}
 					{...css(StyleSheet.absoluteFillObject)}
-					// onEnded={() => {
-					// 	if (!data) return;
-					// 	if (data.isMovie) router.push(`/movie/${data.slug}`);
-					// 	else
-					// 		router.push(
-					// 			data.nextEpisode ? `/watch/${data.nextEpisode.slug}` : `/show/${data.showSlug}`,
-					// 		);
-					// }}
-				/>
+				>
+					<Video
+						links={data?.link}
+						videoStyle={{ width: percent(100), height: percent(100) }}
+						setError={setPlaybackError}
+						{...css(StyleSheet.absoluteFillObject)}
+						// onEnded={() => {
+						// 	if (!data) return;
+						// 	if (data.isMovie) router.push(`/movie/${data.slug}`);
+						// 	else
+						// 		router.push(
+						// 			data.nextEpisode ? `/watch/${data.nextEpisode.slug}` : `/show/${data.showSlug}`,
+						// 		);
+						// }}
+					/>
+				</Pressable>
 				<LoadingIndicator />
 				<Hover
 					{...mapData(data, previous, next)}

front/yarn.lock

@@ -2135,6 +2135,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^0.7.3":
+  version: 0.7.3
+  resolution: "@floating-ui/core@npm:0.7.3"
+  checksum: f48f9fb0d19dcbe7a68c38e8de7fabb11f0c0e6e0ef215ae60b5004900bacb1386e7b89cb377d91a90ff7d147ea1f06c2905136ecf34dea162d9696d8f448d5f
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^0.5.3":
+  version: 0.5.4
+  resolution: "@floating-ui/dom@npm:0.5.4"
+  dependencies:
+    "@floating-ui/core": ^0.7.3
+  checksum: 9f9d8a51a828c6be5f187204aa6d293c6c9ef70d51dcc5891a4d85683745fceebf79ff8826d0f75ae41b45c3b138367d339756f27f41be87a8770742ebc0de42
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:0.7.2":
+  version: 0.7.2
+  resolution: "@floating-ui/react-dom@npm:0.7.2"
+  dependencies:
+    "@floating-ui/dom": ^0.5.3
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: bc3f2b5557f87f6f4bbccfe3e8d097abafad61a41083d3b79f3499f27590e273bcb3dc7136c2444841ee7a8c0d2a70cc1385458c16103fa8b70eade80c24af52
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -2353,6 +2382,7 @@ __metadata:
   peerDependencies:
     "@gorhom/portal": "*"
     "@material-symbols/svg-400": "*"
+    "@radix-ui/react-dropdown-menu": "*"
     expo-linear-gradient: "*"
     moti: "*"
     react: "*"
@@ -2361,6 +2391,10 @@ __metadata:
     react-native-svg: "*"
     yoshiki: "*"
   peerDependenciesMeta:
+    "@gorhom/portal":
+      optional: true
+    "@radix-ui/react-dropdown-menu":
+      optional: true
     react-native-web:
       optional: true
   languageName: unknown
@@ -2830,6 +2864,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/primitive@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  checksum: 72996afaf346ec4f4c73422f14f6cb2d0de994801ba7cbb9a4a67b0050e0cd74625182c349ef8017ccae1406579d4b74a34a225ef2efe61e8e5337decf235deb
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-arrow@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-arrow@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.1
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 808ad81fb7a10281b2c3e549f40259891aff84e93d448100ce466ccb46ac8d21e68e1e8d8e45000fcf72d1f21bcffce6d58c689936f01f10b623a7abea3e9a23
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-collection@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-collection@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-slot": 1.0.1
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 4922b358baf54aa343da5235fd061a289bedef9488254696bb4eb09b320da9da91bf55e148d89f07df80afa5429804f8a203159978cddeea423e58fdea703cd0
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
@@ -2841,7 +2913,215 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.0":
+"@radix-ui/react-context@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-context@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 43c6b6f2183398161fe6b109e83fff240a6b7babbb27092b815932342a89d5ca42aa9806bfae5927970eed5ff90feed04c67aa29c6721f84ae826f17fcf34ce0
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-direction@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-direction@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 92a40de4087b161a56957872daf204a7735bd21f2fccbd42deff322d759977d085ad3dcdae05af437b7e64e628e939e0d67e5bc468a3027e1b02e0a7dc90c485
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-escape-keydown": 1.0.2
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 6529517cb0fbee6aed86feb3f004c410a23aaeffea0d069936654ca9ed1a7f3cd3fa07cded560e03fa8f349ccc961487df46dcd82f9c278d7fdd694a1a3d66db
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dropdown-menu@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@radix-ui/react-dropdown-menu@npm:2.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-id": 1.0.0
+    "@radix-ui/react-menu": 2.0.1
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-use-controllable-state": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 3f24e4708df93a516d38e305b22d354da03f3171f69dee9511ea63a396bdb4ff4def03083fe52f7b959334f12cc39df4f7e76a13de6ff09e743ba725f6310131
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 8c714e8caa6032f5402eecb0323addd7456d3496946dbad1b9ee8ebf5845943876945e7af9bca179e9f8ffe5100e61cb4ba54a185873949125c310c406be5aa4
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-scope@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: cc68bd757ddf4d012aca6b92fee30878f6db83107a7b17f23a092358920f988ebf04b7051dcf866e2b9378ffbf88761e13b3b2d1cfacb9494d7ee8ca800a29bf
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-id@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-id@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: ba323cedd6a6df6f6e51ed1f7f7747988ce432b47fd94d860f962b14b342dcf049eae33f8ad0b72fd7df6329a7375542921132271fba64ab0a271c93f09c48d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-menu@npm:2.0.1":
+  version: 2.0.1
+  resolution: "@radix-ui/react-menu@npm:2.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-collection": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-direction": 1.0.0
+    "@radix-ui/react-dismissable-layer": 1.0.2
+    "@radix-ui/react-focus-guards": 1.0.0
+    "@radix-ui/react-focus-scope": 1.0.1
+    "@radix-ui/react-id": 1.0.0
+    "@radix-ui/react-popper": 1.0.1
+    "@radix-ui/react-portal": 1.0.1
+    "@radix-ui/react-presence": 1.0.0
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-roving-focus": 1.0.1
+    "@radix-ui/react-slot": 1.0.1
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    aria-hidden: ^1.1.1
+    react-remove-scroll: 2.5.5
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: dbe436bb29b9d3b6b2b7d60283c18bf1e42dfbe8402685a0cc446336343bb656cf9bfc39b957e7603e778cbd28affc7e96c62e437a2681d4dd8314f46002c468
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-popper@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-popper@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@floating-ui/react-dom": 0.7.2
+    "@radix-ui/react-arrow": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-use-layout-effect": 1.0.0
+    "@radix-ui/react-use-rect": 1.0.0
+    "@radix-ui/react-use-size": 1.0.0
+    "@radix-ui/rect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 8216f8fd5ee5de41206ec89a7c66152f55a8d6ba905f8a2575581f3d42e8a032c3dd66b1529c813f3addc9178e1d13d4262ac25296fd395f8361fcfb160590d4
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-portal@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-portal@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.1
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 3bdcf6e1d918e473e328d45df659853cc0da687e4e885eaf7bd7bb76825a30e6f8384f15db3cbe523d80c5381fa9886f80718a8679ff66a7a10167aab290c4f7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-presence@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-presence@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: a607d67795aa265e88f1765dcc7c18bebf6d88d116cb7f529ebe5a3fbbe751a42763aff0c1c89cdd8ce7f7664355936c4070fd3d4685774aff1a80fa95f4665b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-slot": 1.0.1
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 1cc86b72f926be4a42122e7e456e965de0906f16b0dc244b8448bac05905f208598c984a0dd40026f654b4a71d0235335d48a18e377b07b0ec6c6917576a8080
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-roving-focus@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-roving-focus@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-collection": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-direction": 1.0.0
+    "@radix-ui/react-id": 1.0.0
+    "@radix-ui/react-primitive": 1.0.1
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-controllable-state": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: a8f1d22086622d7439b36ee5d38c6eb412bb99e71fa6986c25ed4506528ac48f32cbc06ed329bc7844fc9c9d402dec06e749b6272bef3ea26688620ad6b11fad
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.0.1, @radix-ui/react-slot@npm:^1.0.0":
   version: 1.0.1
   resolution: "@radix-ui/react-slot@npm:1.0.1"
   dependencies:
@@ -2853,6 +3133,85 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-callback-ref@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a8dda76ba0a26e23dc6ab5003831ad7439f59ba9d696a517643b9ee6a7fb06b18ae7a8f5a3c00c530d5c8104745a466a077b7475b99b4c0f5c15f5fc29474471
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-controllable-state@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 35f1e714bbe3fc9f5362a133339dd890fb96edb79b63168a99403c65dd5f2b63910e0c690255838029086719e31360fa92544a55bc902cfed4442bb3b55822e2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-escape-keydown@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 5bec1b73ed6c38139bf1db3c626c0474ca6221ae55f154ef83f1c6429ea866280b2a0ba9436b807334d0215bb4389f0b492c65471cf565635957a8ee77cce98a
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fcdc8cfa79bd45766ebe3de11039c58abe3fed968cb39c12b2efce5d88013c76fe096ea4cee464d42576d02fe7697779b682b4268459bca3c4e48644f5b4ac5e
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-rect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-rect@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/rect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: c755cee1a8846a74d4f6f486c65134a552c65d0bfb934d1d3d4f69f331c32cfd8b279c08c8907d64fbb68388fc3683f854f336e4f9549e1816fba32156bb877b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-size@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: b319564668512bb5c8c64530e3c12810c4b7c75c19a00d5ef758c246e8d85cd5015df19688e174db1cc44b0584c8d7f22411eb00af5f8ac6c2e789aa5c8e34f5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/rect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/rect@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  checksum: d5b54984148ac52e30c6a92834deb619cf74b4af02709a20eb43e7895f98fed098968b597a715bf5b5431ae186372e65499a801d93e835f53bbc39e3a549f664
+  languageName: node
+  linkType: hard
+
 "@react-native-community/cli-clean@npm:^9.2.1":
   version: 9.2.1
   resolution: "@react-native-community/cli-clean@npm:9.2.1"
@@ -4261,6 +4620,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1":
+  version: 1.2.2
+  resolution: "aria-hidden@npm:1.2.2"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.9.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ee1a3688db5491eeb87b73eea624614f24ef62a74cf9e47bc8229dde1ff7457f7e4a26425cadc0d3efd89380305e6fb4a4e505bccdee16beaa4686014861d7b1
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^4.2.2":
   version: 4.2.2
   resolution: "aria-query@npm:4.2.2"
@@ -5804,6 +6178,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "diff@npm:^5.0.0":
   version: 5.1.0
   resolution: "diff@npm:5.1.0"
@@ -7309,6 +7690,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
+  languageName: node
+  linkType: hard
+
 "get-port@npm:^3.2.0":
   version: 3.2.0
   resolution: "get-port@npm:3.2.0"
@@ -11439,6 +11827,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.4
+  resolution: "react-remove-scroll-bar@npm:2.3.4"
+  dependencies:
+    react-style-singleton: ^2.2.1
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b5ce5f2f98d65c97a3e975823ae4043a4ba2a3b63b5ba284b887e7853f051b5cd6afb74abde6d57b421931c52f2e1fdbb625dc858b1cb5a32c27c14ab85649d4
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.3
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 2c7fe9cbd766f5e54beb4bec2e2efb2de3583037b23fef8fa511ab426ed7f1ae992382db5acd8ab5bfb030a4b93a06a2ebca41377d6eeaf0e6791bb0a59616a4
+  languageName: node
+  linkType: hard
+
 "react-shallow-renderer@npm:^16.15.0":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
@@ -11451,6 +11874,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: ^1.0.0
+    invariant: ^2.2.4
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
@@ -13136,7 +13576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
   version: 2.4.1
   resolution: "tslib@npm:2.4.1"
   checksum: 19480d6e0313292bd6505d4efe096a6b31c70e21cf08b5febf4da62e95c265c8f571f7b36fcc3d1a17e068032f59c269fab3459d6cd3ed6949eafecf64315fca
@@ -13494,6 +13934,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-callback-ref@npm:1.3.0"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
+  languageName: node
+  linkType: hard
+
+"use-isomorphic-layout-effect@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "use-isomorphic-layout-effect@npm:1.1.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb
+  languageName: node
+  linkType: hard
+
 "use-latest-callback@npm:^0.1.5":
   version: 0.1.5
   resolution: "use-latest-callback@npm:0.1.5"
@@ -13501,6 +13968,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: ^1.1.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
+  languageName: node
+  linkType: hard
+
 "use-sync-external-store@npm:^1.0.0, use-sync-external-store@npm:^1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"
@@ -13650,7 +14133,6 @@ __metadata:
   dependencies:
     "@emotion/react": ^11.9.3
     "@emotion/styled": ^11.9.3
-    "@gorhom/portal": ^1.0.14
     "@kyoo/models": "workspace:^"
     "@kyoo/primitives": "workspace:^"
     "@kyoo/ui": "workspace:^"
@@ -13658,6 +14140,7 @@ __metadata:
     "@mui/icons-material": ^5.8.4
     "@mui/material": ^5.8.7
     "@mui/system": ^5.10.10
+    "@radix-ui/react-dropdown-menu": ^2.0.1
     "@svgr/webpack": ^6.5.1
     "@tanstack/react-query": ^4.19.1
     "@types/node": 18.11.9