add new table to album detail

2026-06-20 02:14:23 +02:00 · 2025-11-16 13:53:04 -08:00
parent 31d9ab048d
commit f366b50550
10 changed files with 1318 additions and 194 deletions
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link, useParams } from 'react-router';

@@ -25,139 +25,142 @@ interface AlbumDetailHeaderProps {
    };
 }

-export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
-    const { albumId } = useParams() as { albumId: string };
-    const server = useCurrentServer();
-    const detailQuery = useQuery(
-        albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
-    );
-    const { t } = useTranslation();
+export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderProps>(
+    ({ background }, ref) => {
+        const { albumId } = useParams() as { albumId: string };
+        const server = useCurrentServer();
+        const detailQuery = useQuery(
+            albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
+        );
+        const { t } = useTranslation();

-    const showRating =
-        detailQuery?.data?._serverType === ServerType.NAVIDROME ||
-        detailQuery?.data?._serverType === ServerType.SUBSONIC;
+        const showRating =
+            detailQuery?.data?._serverType === ServerType.NAVIDROME ||
+            detailQuery?.data?._serverType === ServerType.SUBSONIC;

-    const originalDifferentFromRelease =
-        detailQuery.data?.originalDate &&
-        detailQuery.data.originalDate !== detailQuery.data.releaseDate;
+        const originalDifferentFromRelease =
+            detailQuery.data?.originalDate &&
+            detailQuery.data.originalDate !== detailQuery.data.releaseDate;

-    const releasePrefix = originalDifferentFromRelease
-        ? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
-        : '♫';
+        const releasePrefix = originalDifferentFromRelease
+            ? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
+            : '♫';

-    const releaseTypes = useMemo(
-        () =>
-            normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
-                id: type,
-                value: titleCase(type),
-            })) || [],
-        [detailQuery.data?.releaseTypes, t],
-    );
+        const releaseTypes = useMemo(
+            () =>
+                normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
+                    id: type,
+                    value: titleCase(type),
+                })) || [],
+            [detailQuery.data?.releaseTypes, t],
+        );

-    const metadataItems = releaseTypes.concat([
-        {
-            id: 'releaseDate',
-            value:
-                detailQuery?.data?.releaseDate &&
-                `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`,
-        },
-        {
-            id: 'songCount',
-            value: t('entity.trackWithCount', {
-                count: detailQuery?.data?.songCount as number,
-            }),
-        },
-        {
-            id: 'duration',
-            value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
-        },
-        {
-            id: 'playCount',
-            value:
-                typeof detailQuery?.data?.playCount === 'number' &&
-                t('entity.play', {
-                    count: detailQuery?.data?.playCount,
-                }),
-        },
-        {
-            id: 'version',
-            value: detailQuery.data?.version,
-        },
-    ]);
-
-    if (originalDifferentFromRelease) {
-        const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`;
-        metadataItems.splice(0, 0, {
-            id: 'originalDate',
-            value: formatted,
-        });
-    }
-
-    const updateRatingMutation = useSetRating({});
-
-    const handleUpdateRating = (rating: number) => {
-        if (!detailQuery?.data) return;
-
-        updateRatingMutation.mutate({
-            apiClientProps: { serverId: detailQuery.data._serverId },
-            query: {
-                id: [detailQuery.data.id],
-                rating,
-                type: LibraryItem.ALBUM,
+        const metadataItems = releaseTypes.concat([
+            {
+                id: 'releaseDate',
+                value:
+                    detailQuery?.data?.releaseDate &&
+                    `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`,
            },
-        });
-    };
+            {
+                id: 'songCount',
+                value: t('entity.trackWithCount', {
+                    count: detailQuery?.data?.songCount as number,
+                }),
+            },
+            {
+                id: 'duration',
+                value:
+                    detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
+            },
+            {
+                id: 'playCount',
+                value:
+                    typeof detailQuery?.data?.playCount === 'number' &&
+                    t('entity.play', {
+                        count: detailQuery?.data?.playCount,
+                    }),
+            },
+            {
+                id: 'version',
+                value: detailQuery.data?.version,
+            },
+        ]);

-    return (
-        <Stack>
-            <LibraryHeader
-                imageUrl={detailQuery?.data?.imageUrl}
-                item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
-                title={detailQuery?.data?.name || ''}
-                {...background}
-            >
-                <Stack gap="lg">
-                    <Pill.Group>
-                        {metadataItems.map(
-                            (item, index) =>
-                                item.value && (
-                                    <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
-                                ),
+        if (originalDifferentFromRelease) {
+            const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`;
+            metadataItems.splice(0, 0, {
+                id: 'originalDate',
+                value: formatted,
+            });
+        }
+
+        const updateRatingMutation = useSetRating({});
+
+        const handleUpdateRating = (rating: number) => {
+            if (!detailQuery?.data) return;
+
+            updateRatingMutation.mutate({
+                apiClientProps: { serverId: detailQuery.data._serverId },
+                query: {
+                    id: [detailQuery.data.id],
+                    rating,
+                    type: LibraryItem.ALBUM,
+                },
+            });
+        };
+
+        return (
+            <Stack ref={ref}>
+                <LibraryHeader
+                    imageUrl={detailQuery?.data?.imageUrl}
+                    item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
+                    title={detailQuery?.data?.name || ''}
+                    {...background}
+                >
+                    <Stack gap="lg">
+                        <Pill.Group>
+                            {metadataItems.map(
+                                (item, index) =>
+                                    item.value && (
+                                        <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
+                                    ),
+                            )}
+                        </Pill.Group>
+                        {showRating && (
+                            <Rating
+                                onChange={handleUpdateRating}
+                                readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
+                                value={detailQuery?.data?.userRating || 0}
+                            />
                        )}
-                    </Pill.Group>
-                    {showRating && (
-                        <Rating
-                            onChange={handleUpdateRating}
-                            readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
-                            value={detailQuery?.data?.userRating || 0}
-                        />
-                    )}
-                    <Group
-                        gap="md"
-                        mah="4rem"
-                        style={{
-                            overflow: 'hidden',
-                            WebkitBoxOrient: 'vertical',
-                            WebkitLineClamp: 2,
-                        }}
-                    >
-                        {detailQuery?.data?.albumArtists.map((artist) => (
-                            <Text
-                                component={Link}
-                                fw={600}
-                                isLink
-                                key={`artist-${artist.id}`}
-                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                    albumArtistId: artist.id,
-                                })}
-                                variant="subtle"
-                            >
-                                {artist.name}
-                            </Text>
-                        ))}
-                    </Group>
-                </Stack>
-            </LibraryHeader>
-        </Stack>
-    );
-};
+                        <Group
+                            gap="md"
+                            mah="4rem"
+                            style={{
+                                overflow: 'hidden',
+                                WebkitBoxOrient: 'vertical',
+                                WebkitLineClamp: 2,
+                            }}
+                        >
+                            {detailQuery?.data?.albumArtists.map((artist) => (
+                                <Text
+                                    component={Link}
+                                    fw={600}
+                                    isLink
+                                    key={`artist-${artist.id}`}
+                                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                        albumArtistId: artist.id,
+                                    })}
+                                    variant="subtle"
+                                >
+                                    {artist.name}
+                                </Text>
+                            ))}
+                        </Group>
+                    </Stack>
+                </LibraryHeader>
+            </Stack>
+        );
+    },
+);