diff --git a/front/packages/primitives/src/menu.tsx b/front/packages/primitives/src/menu.tsx index 32409128..28e064b6 100644 --- a/front/packages/primitives/src/menu.tsx +++ b/front/packages/primitives/src/menu.tsx @@ -49,15 +49,21 @@ const Menu = ({ onMenuOpen, onMenuClose, children, + isOpen: outerOpen, + setOpen: outerSetOpen, ...props }: { Trigger: ComponentType; children?: ReactNode | ReactNode[] | null; onMenuOpen?: () => void; onMenuClose?: () => void; + isOpen?: boolean; + setOpen?: (v: boolean) => void; } & Omit) => { 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); diff --git a/front/packages/primitives/src/menu.web.tsx b/front/packages/primitives/src/menu.web.tsx index 808114b8..33b7db78 100644 --- a/front/packages/primitives/src/menu.web.tsx +++ b/front/packages/primitives/src/menu.web.tsx @@ -50,18 +50,24 @@ const Menu = ({ onMenuOpen, onMenuClose, children, + isOpen, + setOpen, ...props }: { Trigger: ComponentType; children: ReactNode | ReactNode[] | null; onMenuOpen?: () => void; onMenuClose?: () => void; + isOpen?: boolean; + setOpen?: (v: boolean) => void; } & Omit) => { return ( { - if (isOpen) onMenuOpen?.call(null); + open={isOpen} + onOpenChange={(newOpen) => { + if (setOpen) setOpen(newOpen) + if (newOpen) onMenuOpen?.call(null); else onMenuClose?.call(null); }} > diff --git a/front/packages/ui/src/components/context-menus.tsx b/front/packages/ui/src/components/context-menus.tsx index b5794c7c..ec34ea63 100644 --- a/front/packages/ui/src/components/context-menus.tsx +++ b/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 . + */ + +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>>) => { + const { t } = useTranslation(); -export const EpisodesContext = () => { return ( - - + + ); }; diff --git a/front/packages/ui/src/details/episode.tsx b/front/packages/ui/src/details/episode.tsx index 5065eddf..280223c9 100644 --- a/front/packages/ui/src/details/episode.tsx +++ b/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) => { + const [moreOpened, setMoreOpened] = useState(false); const { css } = useYoshiki("episode-line"); const { t } = useTranslation(); return ( 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 && {isLoading || {displayRuntime(runtime)}})} - {isLoading ||

{overview}

}
+ + {isLoading ||

{overview}

}
+ +
); diff --git a/front/translations/en.json b/front/translations/en.json index cb17c603..6441742e 100644 --- a/front/translations/en.json +++ b/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", diff --git a/front/translations/fr.json b/front/translations/fr.json index f44291df..bab47e63 100644 --- a/front/translations/fr.json +++ b/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",