diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx
index 80268029..c4f5dc9a 100644
--- a/front/packages/ui/src/details/header.tsx
+++ b/front/packages/ui/src/details/header.tsx
@@ -19,65 +19,165 @@
*/
import {
+ Genre,
+ KyooImage,
Movie,
QueryIdentifier,
Show,
- getDisplayDate,
- Genre,
Studio,
- KyooImage,
+ getDisplayDate,
+ queryFn,
+ useAccount,
} from "@kyoo/models";
+import { WatchStatusV } from "@kyoo/models/src/resources/watch-status";
import {
+ A,
+ Chip,
Container,
+ DottedSeparator,
H1,
- ImageBackground,
- Skeleton,
- Poster,
- P,
- tooltip,
- Link,
+ H2,
+ HR,
+ Head,
IconButton,
IconFab,
- Head,
- HR,
- H2,
- UL,
+ ImageBackground,
LI,
- A,
+ Link,
+ Menu,
+ P,
+ Poster,
+ Skeleton,
+ UL,
+ capitalize,
+ tooltip,
ts,
- Chip,
- DottedSeparator,
usePopup,
} from "@kyoo/primitives";
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
+import Refresh from "@material-symbols/svg-400/rounded/autorenew.svg";
+import Download from "@material-symbols/svg-400/rounded/download.svg";
+import MoreHoriz from "@material-symbols/svg-400/rounded/more_horiz.svg";
import MovieInfo from "@material-symbols/svg-400/rounded/movie_info.svg";
-import { ImageStyle, Platform, View } from "react-native";
-import {
- Theme,
- md,
- px,
- min,
- max,
- em,
- percent,
- rem,
- vh,
- useYoshiki,
- Stylable,
-} from "yoshiki/native";
-import { Fetch } from "../fetch";
import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
import Theaters from "@material-symbols/svg-400/rounded/theaters-fill.svg";
-import { Rating } from "../components/rating";
-import { displayRuntime } from "./episode";
-import { WatchListInfo } from "../components/watchlist-info";
-import { WatchStatusV } from "@kyoo/models/src/resources/watch-status";
-import { capitalize } from "@kyoo/primitives";
-import { ShowWatchStatusCard } from "./show";
-import Download from "@material-symbols/svg-400/rounded/download.svg";
-import { useDownloader } from "../downloads";
+import { useMutation } from "@tanstack/react-query";
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { ImageStyle, Platform, View } from "react-native";
+import {
+ Stylable,
+ Theme,
+ em,
+ max,
+ md,
+ min,
+ percent,
+ px,
+ rem,
+ useYoshiki,
+ vh,
+} from "yoshiki/native";
import { MediaInfoPopup } from "../components/media-info";
+import { Rating } from "../components/rating";
+import { WatchListInfo } from "../components/watchlist-info";
+import { useDownloader } from "../downloads";
+import { Fetch } from "../fetch";
+import { displayRuntime } from "./episode";
+import { ShowWatchStatusCard } from "./show";
+
+const ButtonList = ({
+ playHref,
+ trailerUrl,
+ watchStatus,
+ type,
+ slug,
+}: {
+ type: "movie" | "show" | "collection";
+ slug?: string;
+ playHref?: string | null;
+ trailerUrl?: string | null;
+ watchStatus?: WatchStatusV | null;
+}) => {
+ const account = useAccount();
+ const { css, theme } = useYoshiki();
+ const { t } = useTranslation();
+ const downloader = useDownloader();
+ const [setPopup, close] = usePopup();
+
+ const metadataRefreshMutation = useMutation({
+ mutationFn: () =>
+ queryFn({
+ path: [type, slug, "refresh"],
+ method: "POST",
+ }),
+ });
+
+ return (
+
+ {playHref !== null && (
+
+ )}
+ {trailerUrl && (
+
+ )}
+ {watchStatus !== undefined && type !== "collection" && slug && (
+
+ )}
+ {((type === "movie" && slug) || account?.isAdmin === true) && (
+
+ )}
+
+ );
+};
export const TitleLine = ({
isLoading,
@@ -111,8 +211,6 @@ export const TitleLine = ({
} & Stylable) => {
const { css, theme } = useYoshiki();
const { t } = useTranslation();
- const downloader = useDownloader();
- const [setPopup, close] = usePopup();
return (
-
- {playHref !== null && (
-
- )}
- {trailerUrl && (
-
- )}
- {watchStatus !== undefined && type !== "collection" && slug && (
-
- )}
- {type === "movie" && slug && (
- <>
- downloader(type, slug)}
- color={{ xs: theme.user.contrast, md: theme.colors.white }}
- {...tooltip(t("home.episodeMore.download"))}
- />
-
- setPopup(
- ,
- )
- }
- />
- >
- )}
-
+