Add basics episodes more menu

front/packages/primitives/src/menu.tsx

@@ -49,15 +49,21 @@ const Menu = <AsProps,>({
 	onMenuOpen,
 	onMenuClose,
 	children,
+	isOpen: outerOpen,
+	setOpen: outerSetOpen,
 	...props
 }: {
 	Trigger: ComponentType<AsProps>;
 	children?: ReactNode | ReactNode[] | null;
 	onMenuOpen?: () => void;
 	onMenuClose?: () => void;
+	isOpen?: boolean;
+	setOpen?: (v: boolean) => void;
 } & Omit<AsProps, "onPress">) => {
 	const insets = useSafeAreaInsets();
-	const [isOpen, setOpen] = useState(false);
+	const [isOpen, setOpen] =
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		outerOpen !== undefined && outerSetOpen ? [outerOpen, outerSetOpen] : useState(false);
 
 	useEffect(() => {
 		if (isOpen) onMenuOpen?.call(null);

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

@@ -50,18 +50,24 @@ const Menu = <AsProps extends { onPress: PressableProps["onPress"] }>({
 	onMenuOpen,
 	onMenuClose,
 	children,
+	isOpen,
+	setOpen,
 	...props
 }: {
 	Trigger: ComponentType<AsProps>;
 	children: ReactNode | ReactNode[] | null;
 	onMenuOpen?: () => void;
 	onMenuClose?: () => void;
+	isOpen?: boolean;
+	setOpen?: (v: boolean) => void;
 } & Omit<AsProps, "onPress">) => {
 	return (
 		<DropdownMenu.Root
 			modal
-			onOpenChange={(isOpen) => {
-				if (isOpen) onMenuOpen?.call(null);
+			open={isOpen}
+			onOpenChange={(newOpen) => {
+				if (setOpen) setOpen(newOpen)
+				if (newOpen) onMenuOpen?.call(null);
 				else onMenuClose?.call(null);
 			}}
 		>

front/packages/ui/src/components/context-menus.tsx

@@ -1,9 +1,38 @@
-import { Menu } from "@kyoo/primitives";
+/*
+ * 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 { IconButton, Menu, tooltip } from "@kyoo/primitives";
+import { ComponentProps } from "react";
+import { useTranslation } from "react-i18next";
+import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg";
+import Info from "@material-symbols/svg-400/rounded/info.svg";
+
+export const EpisodesContext = ({
+	showSlug,
+	...props
+}: { showSlug: string } & Partial<ComponentProps<typeof Menu<typeof IconButton>>>) => {
+	const { t } = useTranslation();
 
-export const EpisodesContext = () => {
 	return (
-		<Menu>
-			<Menu.Item />
+		<Menu Trigger={IconButton} icon={MoreVert} {...tooltip(t("misc.more"))} {...(props as any)}>
+			<Menu.Item label={t("home.episodeMore.goToShow")} icon={Info} href={`/show/${showSlug}`} />
 		</Menu>
 	);
 };

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

@@ -30,11 +30,13 @@ import {
 	ts,
 } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
-import { ImageStyle, PressableProps, View } from "react-native";
+import { ImageStyle, Platform, PressableProps, View } from "react-native";
 import { Layout, WithLoading } from "../fetch";
 import { percent, rem, Stylable, Theme, useYoshiki } from "yoshiki/native";
 import { KyooImage, WatchStatusV } from "@kyoo/models";
 import { ItemProgress } from "../browse/grid";
+import { EpisodesContext } from "../components/context-menus";
+import { useRef, useState } from "react";
 
 export const episodeDisplayNumber = (
 	episode: {
@@ -172,21 +174,31 @@ export const EpisodeLine = ({
 	watchedStatus: WatchStatusV | null;
 }> &
 	Partial<PressableProps>) => {
+	const [moreOpened, setMoreOpened] = useState(false);
 	const { css } = useYoshiki("episode-line");
 	const { t } = useTranslation();
 
 	return (
 		<Link
 			href={slug ? `/watch/${slug}` : ""}
+			onLongPress={() => setMoreOpened(true)}
 			{...css(
 				{
 					alignItems: "center",
 					flexDirection: "row",
+					child: {
+						more: {
+							display: "none",
+						},
+					},
 					fover: {
 						self: focusReset,
 						title: {
 							textDecorationLine: "underline",
 						},
+						more: {
+							display: "flex",
+						},
 					},
 				},
 				props as any,
@@ -249,7 +261,17 @@ export const EpisodeLine = ({
 					{isLoading ||
 						(runtime && <Skeleton>{isLoading || <SubP>{displayRuntime(runtime)}</SubP>}</Skeleton>)}
 				</View>
-				<Skeleton>{isLoading || <P numberOfLines={3}>{overview}</P>}</Skeleton>
+				<View {...css({ flexDirection: "row" })}>
+					<Skeleton>{isLoading || <P numberOfLines={3}>{overview}</P>}</Skeleton>
+					<EpisodesContext
+						isOpen={moreOpened}
+						setOpen={setMoreOpened}
+						{...css([
+							"more",
+							Platform.OS === "web" && moreOpened && { display: "flex !important" as any },
+						])}
+					/>
+				</View>
 			</View>
 		</Link>
 	);

front/translations/en.json

@@ -5,7 +5,10 @@
 		"watchlist": "Continue watching",
 		"info": "See more",
 		"none": "No episodes",
-		"watchlistLogin": "To keep track of what you watched or plan to watch, you need to login."
+		"watchlistLogin": "To keep track of what you watched or plan to watch, you need to login.",
+		"episodeMore": {
+			"goToShow": "Go to show"
+		}
 	},
 	"show": {
 		"play": "Play",
@@ -58,7 +61,8 @@
 		"prev-page": "Previous page",
 		"next-page": "Next page",
 		"delete": "Delete",
-		"cancel": "Cancel"
+		"cancel": "Cancel",
+		"more": "More"
 	},
 	"navbar": {
 		"home": "Home",

front/translations/fr.json

@@ -5,7 +5,10 @@
 		"watchlist": "Continuer de regarder",
 		"info": "Voir plus",
 		"none": "Aucun episode",
-		"watchlistLogin": "Pour suivre ce que vous avez regardé ou prévoyez de regarder, vous devez vous connecter."
+		"watchlistLogin": "Pour suivre ce que vous avez regardé ou prévoyez de regarder, vous devez vous connecter.",
+		"episodeMore": {
+			"goToShow": "Aller a la serie"
+		}
 	},
 	"show": {
 		"play": "Lecture",
@@ -58,7 +61,8 @@
 		"prev-page": "Page précédente",
 		"next-page": "Page suivante",
 		"delete": "Supprimer",
-		"cancel": "Annuler"
+		"cancel": "Annuler",
+		"more": "Plus"
 	},
 	"navbar": {
 		"home": "Accueil",