Front: better Format of Video Metadata for Episodes

front/packages/ui/src/player/index.tsx

@@ -65,6 +65,17 @@ const mapData = (
 	};
 };
 
+const formatTitleMetadata = (item: Item) => {
+	if (item.type === "movie") {
+		return item.name;
+	}
+	return `${item.name} (${episodeDisplayNumber({
+		seasonNumber: item.seasonNumber,
+		episodeNumber: item.episodeNumber,
+		absoluteNumber: item.absoluteNumber,
+	})})`;
+};
+
 export const Player = ({
 	slug,
 	type,
@@ -81,10 +92,7 @@ export const Player = ({
 	const [playbackError, setPlaybackError] = useState<string | undefined>(undefined);
 	const { data, error } = useFetch(Player.query(type, slug));
 	const { data: info, error: infoError } = useFetch(Player.infoQuery(type, slug));
-	const image =
+	const image = data && data.type === "episode" ? data.show?.poster ?? data?.poster : data?.poster;
-		data && data.type === "episode"
-			? data.show?.poster ?? data?.thumbnail
-			: data?.thumbnail;
 	const previous =
 		data && data.type === "episode" && data.previousEpisode
 			? `/watch/${data.previousEpisode.slug}?t=0`
@@ -93,15 +101,8 @@ export const Player = ({
 		data && data.type === "episode" && data.nextEpisode
 			? `/watch/${data.nextEpisode.slug}?t=0`
 			: undefined;
-	const title =
+	const title = data && formatTitleMetadata(data);
-		data &&
+	const subtitle = data && data.type === "episode" ? data.show?.name : undefined;
-		(data.type === "movie"
-			? data.name
-			: `${data.show!.name} ${episodeDisplayNumber({
-					seasonNumber: data.seasonNumber,
-					episodeNumber: data.episodeNumber,
-					absoluteNumber: data.absoluteNumber,
-				})}`);
 
 	useVideoKeyboard(info?.subtitles, info?.fonts, previous, next);
 
@@ -145,6 +146,7 @@ export const Player = ({
 				<Video
 					metadata={{
 						title: title ?? t("show.episodeNoMetadata"),
+						subtitle: subtitle ?? undefined,
 						description: data?.overview ?? undefined,
 						imageUri: image?.medium,
 						next: next,

front/packages/ui/src/player/media-session.tsx

@@ -26,11 +26,13 @@ import { durationAtom, playAtom, progressAtom } from "./state";
 
 export const MediaSessionManager = ({
 	title,
+	subtitle,
 	imageUri,
 	previous,
 	next,
 }: {
 	title?: string;
+	subtitle?: string;
 	imageUri?: string | null;
 	previous?: string;
 	next?: string;
@@ -45,9 +47,10 @@ export const MediaSessionManager = ({
 		if (!("mediaSession" in navigator)) return;
 		navigator.mediaSession.metadata = new MediaMetadata({
 			title: title,
+			album: subtitle,
 			artwork: imageUri ? [{ src: imageUri }] : undefined,
 		});
-	}, [title, imageUri]);
+	}, [title, subtitle, imageUri]);
 
 	useEffect(() => {
 		if (!("mediaSession" in navigator)) return;

front/packages/ui/src/player/state.tsx

@@ -116,6 +116,7 @@ export const Video = memo(function Video({
 	startTime?: number | null;
 	metadata: {
 		title?: string;
+		subtitle?: string;
 		description?: string;
 		imageUri?: string;
 		previous?: string;