diff --git a/front/packages/ui/src/details/episode.tsx b/front/packages/ui/src/details/episode.tsx index 123b8fdf..bd9abbd8 100644 --- a/front/packages/ui/src/details/episode.tsx +++ b/front/packages/ui/src/details/episode.tsx @@ -21,6 +21,7 @@ import { focusReset, H6, + IconButton, ImageBackground, ImageProps, important, @@ -28,6 +29,7 @@ import { P, Skeleton, SubP, + tooltip, ts, } from "@kyoo/primitives"; import { useTranslation } from "react-i18next"; @@ -38,6 +40,8 @@ import { KyooImage, WatchStatusV } from "@kyoo/models"; import { ItemProgress } from "../browse/grid"; import { EpisodesContext } from "../components/context-menus"; import { useState } from "react"; +import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg"; +import ExpandLess from "@material-symbols/svg-400/rounded/expand_less-fill.svg"; export const episodeDisplayNumber = ( episode: { @@ -99,7 +103,7 @@ export const EpisodeBox = ({ borderStyle: "solid", }, more: { - display: "none", + opacity: 0, }, }, fover: { @@ -111,7 +115,7 @@ export const EpisodeBox = ({ textDecorationLine: "underline", }, more: { - display: "flex", + opacity: 1, }, }, }, @@ -214,6 +218,7 @@ export const EpisodeLine = ({ PressableProps & Stylable) => { const [moreOpened, setMoreOpened] = useState(false); + const [descriptionExpanded, setDescriptionExpanded] = useState(false); const { css } = useYoshiki("episode-line"); const { t } = useTranslation(); @@ -227,7 +232,7 @@ export const EpisodeLine = ({ flexDirection: "row", child: { more: { - display: "none", + opacity: 0, }, }, fover: { @@ -236,7 +241,7 @@ export const EpisodeLine = ({ textDecorationLine: "underline", }, more: { - display: "flex", + opacity: 1, }, }, }, @@ -297,15 +302,28 @@ export const EpisodeLine = ({ )} - {isLoading || - (runtime && ( - - {isLoading || {displayRuntime(runtime)}} - - ))} + + {isLoading || + (runtime && ( + + {isLoading || {displayRuntime(runtime)}} + + ))} + - {isLoading ||

{overview}

}
+ + {isLoading ||

{overview}

} +
+ { + e.preventDefault(); + setDescriptionExpanded((isExpanded) => !isExpanded); + }} + /> {slug && watchedStatus !== undefined && ( setMoreOpened(v)} {...css([ "more", + { display: "flex", marginLeft: ts(3) }, Platform.OS === "web" && moreOpened && { display: important("flex") }, ])} /> diff --git a/front/translations/en.json b/front/translations/en.json index 2343c0eb..66e10fa7 100644 --- a/front/translations/en.json +++ b/front/translations/en.json @@ -64,7 +64,9 @@ "next-page": "Next page", "delete": "Delete", "cancel": "Cancel", - "more": "More" + "more": "More", + "expand": "Expand", + "collapse": "Collapse" }, "navbar": { "home": "Home", diff --git a/front/translations/fr.json b/front/translations/fr.json index 6b784645..fc9e77da 100644 --- a/front/translations/fr.json +++ b/front/translations/fr.json @@ -64,7 +64,9 @@ "next-page": "Page suivante", "delete": "Supprimer", "cancel": "Annuler", - "more": "Plus" + "more": "Plus", + "expand": "Développer", + "collapse": "Replier" }, "navbar": { "home": "Accueil",