diff --git a/frontend/src/components/PlexPlaylistView.tsx b/frontend/src/components/PlexPlaylistView.tsx index f77e9606..0bb24816 100644 --- a/frontend/src/components/PlexPlaylistView.tsx +++ b/frontend/src/components/PlexPlaylistView.tsx @@ -32,6 +32,7 @@ import { X, } from "lucide-react"; import { api, type PlexCard } from "../lib/api"; +import { formatRuntime } from "../lib/format"; import { getAccountRaw, LS, setAccountRaw } from "../lib/storage"; import { useConfirm } from "./ConfirmProvider"; import { LoadingState, StateMessage } from "./QueryState"; @@ -387,6 +388,12 @@ export default function PlexPlaylistView({ }, [q.data]); const blocks = useMemo(() => buildBlocks(items), [items]); const order = useMemo(() => items.map((i) => i.id), [items]); + // Total playtime of the whole playlist, mirroring the YouTube playlist header (E9 12D): items with + // an unknown duration count as 0, and the runtime is dropped from the meta line when nothing sums. + const totalSeconds = useMemo( + () => items.reduce((acc, it) => acc + (it.duration_seconds ?? 0), 0), + [items], + ); const invalidate = () => { qc.invalidateQueries({ queryKey: qk.plexPlaylist(playlistId) }); @@ -517,18 +524,26 @@ export default function PlexPlaylistView({