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",