Front: Update Models to support standalone tracks

Arthi-chaud · Dec 21, 2024 · 54ba3a0 · 54ba3a0
1 parent 73df171
commit 54ba3a0
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 53 deletions.
diff --git a/front/src/components/actions/link.tsx b/front/src/components/actions/link.tsx
@@ -27,6 +27,7 @@ import {
 } from "../icons";
 import { NextRouter } from "next/router";
 import Action from "./action";
+import toast from "react-hot-toast";
 
 export const GoToSongLyricsAction = (
 	songIdentifier: string | number,
@@ -76,10 +77,16 @@ export const GoToReleaseAction = (
 
 export const GoToReleaseAsyncAction = (
 	router: NextRouter,
-	albumIdentifier: () => PromiseLike<number | string>,
+	albumIdentifier: () => PromiseLike<number | string | null>,
 ): Action => ({
 	onClick: () =>
-		albumIdentifier().then((id) => router.push(`/releases/${id}`)),
+		albumIdentifier().then((id) => {
+			if (id === null) {
+				toast.error("This resource is not attached to any album.");
+			} else {
+				router.push(`/releases/${id}`);
+			}
+		}),
 	label: "goToAlbum",
 	icon: <AlbumIcon />,
 });

diff --git a/front/src/components/contextual-menu/song-contextual-menu.tsx b/front/src/components/contextual-menu/song-contextual-menu.tsx
@@ -76,7 +76,8 @@ const SongContextualMenu = (props: SongContextualMenuProps) => {
 					GoToArtistAction(props.song.artist.slug),
 					GoToReleaseAsyncAction(
 						router,
-						async () => (await getMasterTrack()).release.slug,
+						async () =>
+							(await getMasterTrack()).release?.slug ?? null,
 					),
 				],
 				[GoToSongLyricsAction(songSlug)],

diff --git a/front/src/components/contextual-menu/track-contextual-menu.tsx b/front/src/components/contextual-menu/track-contextual-menu.tsx
@@ -43,6 +43,7 @@ import { RefreshTrackMetadataAction } from "../actions/refresh-metadata";
 import ChangeSongType from "../actions/song-type";
 import { useTranslation } from "react-i18next";
 import { usePlayerContext } from "../../contexts/player";
+import Action from "../actions/action";
 
 type TrackContextualMenuProps = {
 	track: TrackWithRelations<"song" | "illustration">;
@@ -60,7 +61,8 @@ const TrackContextualMenu = (props: TrackContextualMenuProps) => {
 	const getPlayNextProps = () =>
 		Promise.all([
 			queryClient.fetchQuery(API.getArtist(props.track.song.artistId)),
-			queryClient.fetchQuery(API.getRelease(props.track.releaseId)),
+			props.track.releaseId &&
+				queryClient.fetchQuery(API.getRelease(props.track.releaseId)),
 		]).then(([artist, release]) => ({
 			track: props.track,
 			artist,
@@ -81,12 +83,14 @@ const TrackContextualMenu = (props: TrackContextualMenuProps) => {
 		<ContextualMenu
 			onSelect={props.onSelect}
 			actions={[
-				props.isVideo
-					? [
-							GoToArtistAction(props.track.song.artistId),
-							GoToReleaseAction(props.track.releaseId),
-						]
-					: [GoToReleaseAction(props.track.releaseId)],
+				[
+					props.isVideo
+						? GoToArtistAction(props.track.song.artistId)
+						: undefined,
+					props.track.releaseId
+						? GoToReleaseAction(props.track.releaseId)
+						: undefined,
+				].filter((a): a is Action => a !== undefined),
 				[GoToSongLyricsAction(props.track.song.slug)],
 				[
 					PlayNextAction(getPlayNextProps, playNext),

diff --git a/front/src/components/list-item/song-item.tsx b/front/src/components/list-item/song-item.tsx
@@ -38,7 +38,7 @@ type SongItemProps<
 		song: SongWithRelations<
 			"artist" | "featuring" | "master" | "illustration"
 		>,
-	) => Promise<string>)[];
+	) => Promise<string | null>)[];
 };
 
 export const SongGroupItem = <
@@ -92,7 +92,7 @@ const SongItem = <
 	const artist = song?.artist;
 	const { playTrack } = usePlayerContext();
 	const queryClient = useQueryClient();
-	const [subtitle, setSubtitle] = useState(
+	const [subtitle, setSubtitle] = useState<string | null | undefined>(
 		subtitles?.length
 			? ((<br />) as unknown as string)
 			: song
@@ -105,8 +105,13 @@ const SongItem = <
 			Promise.allSettled(subtitles.map((s) => s(song))).then((r) =>
 				setSubtitle(
 					r
-						.map((s) => (s as PromiseFulfilledResult<string>).value)
-						.join(" • "),
+						.map(
+							(s) =>
+								(s as PromiseFulfilledResult<string | null>)
+									.value,
+						)
+						.filter((s): s is string => s !== null)
+						.join(" • ") || null,
 				),
 			);
 		}

diff --git a/front/src/components/list-item/track-item.tsx b/front/src/components/list-item/track-item.tsx
@@ -53,7 +53,6 @@ const TrackItem = ({ track, onClick }: TrackItemProps) => {
 			}
 			onClick={
 				track &&
-				release &&
 				(() => {
 					onClick?.();
 					queryClient
@@ -67,7 +66,7 @@ const TrackItem = ({ track, onClick }: TrackItemProps) => {
 				})
 			}
 			title={track?.name}
-			secondTitle={release?.name}
+			secondTitle={release?.name ?? null}
 			trailing={
 				<Grid
 					container

diff --git a/front/src/components/player/controls.tsx b/front/src/components/player/controls.tsx
@@ -413,33 +413,49 @@ const ExpandedPlayerControls = (
 								}}
 							>
 								{props.artist && props.track ? (
-									<Link
-										href={`/releases/${props.track.releaseId}`}
-										style={{
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-										}}
-									>
-										<Button
-											onClick={() =>
-												props.onExpand(false)
-											}
+									!props.track.releaseId ? (
+										<Typography
 											sx={{
-												textTransform: "none",
-												color: "inherit",
-												width: "100%",
+												fontWeight: "bold",
+												...playerTextStyle,
 											}}
 										>
-											<Typography
+											{props.track?.name}
+										</Typography>
+									) : (
+										<Link
+											href={
+												props.track.releaseId
+													? `/releases/${props.track.releaseId}`
+													: {}
+											}
+											style={{
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+											}}
+										>
+											<Button
+												onClick={() =>
+													props.track?.releaseId &&
+													props.onExpand(false)
+												}
 												sx={{
-													fontWeight: "bold",
-													...playerTextStyle,
+													textTransform: "none",
+													color: "inherit",
+													width: "100%",
 												}}
 											>
-												{props.track?.name}
-											</Typography>
-										</Button>
-									</Link>
+												<Typography
+													sx={{
+														fontWeight: "bold",
+														...playerTextStyle,
+													}}
+												>
+													{props.track?.name}
+												</Typography>
+											</Button>
+										</Link>
+									)
 								) : (
 									<Skeleton animation={false} width={"70%"} />
 								)}

diff --git a/front/src/models/track.ts b/front/src/models/track.ts
@@ -37,7 +37,7 @@ const Track = Resource.concat(
 		/**
 		 * Unique identifier of the parent release
 		 */
-		releaseId: yup.number().required(),
+		releaseId: yup.number().required().nullable(),
 		/**
 		 * Title of the track
 		 */
@@ -86,7 +86,7 @@ export type TrackInclude = "song" | "release" | "illustration";
 
 const TrackRelations = yup.object({
 	song: yup.lazy(() => Song.required()),
-	release: Release.required(),
+	release: Release.required().nullable(),
 	illustration: Illustration.required().nullable(),
 });
 

diff --git a/front/src/pages/artists/[slugOrId]/songs.tsx b/front/src/pages/artists/[slugOrId]/songs.tsx
@@ -69,8 +69,9 @@ const prepareSSR = async (
 			artistQuery(artistIdentifier),
 			...songs.pages
 				.flatMap(({ items }) => items)
+				.filter(({ master }) => master.releaseId)
 				.map(({ master }) =>
-					API.getRelease(master.releaseId, ["album"]),
+					API.getRelease(master.releaseId!, ["album"]),
 				),
 		],
 		infiniteQueries: [],
@@ -83,10 +84,12 @@ const ArtistSongPage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({
 	const router = useRouter();
 	const isRareSongs = isRareSongsPage(router);
 	const queryClient = useQueryClient();
-	const getTrackReleaseName = (track: Track) =>
-		queryClient
-			.fetchQuery(API.getRelease(track.releaseId))
-			.then((release) => release.name);
+	const getTrackReleaseName = (track: Track): Promise<string | null> =>
+		track.releaseId
+			? queryClient
+					.fetchQuery(API.getRelease(track.releaseId))
+					.then((release) => release.name)
+			: Promise.resolve(null);
 	const artistIdentifier =
 		props?.artistIdentifier ?? getSlugOrId(router.query);
 	const artist = useQuery(artistQuery, artistIdentifier);

diff --git a/front/src/pages/playlists/[slugOrId]/index.tsx b/front/src/pages/playlists/[slugOrId]/index.tsx
@@ -22,6 +22,7 @@ import RelationPageHeader from "../../../components/relation-page-header/relatio
 import { GetPropsTypesFrom, Page } from "../../../ssr";
 import getSlugOrId from "../../../utils/getSlugOrId";
 import {
+	Query,
 	prepareMeeloQuery,
 	useQueries,
 	useQuery,
@@ -89,7 +90,16 @@ const prepareSSR = async (
 		additionalProps: { playlistIdentifier },
 		queries: [
 			playlistQuery(playlistIdentifier),
-			...entries.map((entry) => API.getRelease(entry.master.releaseId)),
+			...entries
+				.map((entry) =>
+					entry.master.releaseId
+						? API.getRelease(entry.master.releaseId)
+						: undefined,
+				)
+				.filter(
+					(promise): promise is Query<Release> =>
+						promise !== undefined,
+				),
 		],
 	};
 };
@@ -219,13 +229,15 @@ const PlaylistPage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({
 	const playlist = useQuery(playlistQuery, playlistIdentifier);
 	const entriesQuery = useQuery(playlistEntriesQuery, playlistIdentifier);
 	const masterTracksReleaseQueries = useQueries(
-		...(entriesQuery.data?.map(
-			({
-				master,
-			}): Parameters<
-				typeof useQuery<Release, Parameters<typeof API.getRelease>>
-			> => [API.getRelease, master.releaseId],
-		) ?? []),
+		...(entriesQuery.data
+			?.filter(({ master }) => master.releaseId)
+			.map(
+				({
+					master,
+				}): Parameters<
+					typeof useQuery<Release, Parameters<typeof API.getRelease>>
+				> => [API.getRelease, master.releaseId ?? undefined],
+			) ?? []),
 	);
 	const reorderMutation = useMutation((reorderedEntries: number[]) => {
 		return API.reorderPlaylist(playlistIdentifier, reorderedEntries)
@@ -240,7 +252,10 @@ const PlaylistPage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({
 		const releases = masterTracksReleaseQueries.map((query) => query.data);
 		const resolvedReleases = releases.filter((data) => data !== undefined);
 
-		if (resolvedReleases.length !== entriesQuery.data?.length) {
+		if (
+			resolvedReleases.length !==
+			entriesQuery.data?.filter((t) => t.master.releaseId != null).length
+		) {
 			return undefined;
 		}