add additional album group metadata rows

src/renderer/components/item-list/item-table-list/album-group-header.module.css

@@ -43,8 +43,8 @@
 }
 
 .info {
-    display: grid;
-    grid-template-rows: auto auto auto;
+    display: flex;
+    flex-direction: column;
     gap: 0;
     align-content: start;
     min-width: 0;
@@ -71,7 +71,7 @@
     }
 }
 
-.artist-name {
+.metadata-row {
     font-size: var(--theme-font-size-xs);
     line-height: 1.25;
     overflow-wrap: anywhere;

src/renderer/components/item-list/item-table-list/album-group-header.tsx

@@ -1,26 +1,33 @@
 import clsx from 'clsx';
-import { ReactElement, useLayoutEffect, useRef, useState } from 'react';
+import { ReactElement, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { generatePath, Link } from 'react-router';
 
 import imageColumnStyles from '../item-detail-list/columns/image-column.module.css';
 import { AlbumGroupControls } from './album-group-controls';
 import styles from './album-group-header.module.css';
+import { AlbumGroupMetadata, renderAlbumGroupMetadataItem } from './album-group-metadata';
 import { TableItemSize } from './item-table-list';
 
 import { ItemImage } from '/@/renderer/components/item-image/item-image';
-import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import {
     LONG_PRESS_PLAY_BEHAVIOR,
     PlayTooltip,
 } from '/@/renderer/features/shared/components/play-button-group';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useAlbumGroupImageSize, usePlayButtonBehavior } from '/@/renderer/store';
+import {
+    useAlbumGroupImageSize,
+    useAlbumGroupItems,
+    useAlbumGroupShowFavoriteRating,
+    usePlayButtonBehavior,
+} from '/@/renderer/store';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 interface AlbumGroupHeaderProps {
     groupRowCount?: number;
+    metadata: AlbumGroupMetadata;
     onPlay?: (playType: Play) => void;
     rowIndex?: number;
     setAlbumGroupContentHeight?: (rowIndex: number, height: number) => void;
@@ -30,12 +37,16 @@ interface AlbumGroupHeaderProps {
 
 export const AlbumGroupHeader = ({
     groupRowCount,
+    metadata,
     onPlay,
     rowIndex,
     setAlbumGroupContentHeight,
     size = 'normal',
     song,
 }: AlbumGroupHeaderProps): ReactElement => {
+    const { t } = useTranslation();
+    const albumGroupItems = useAlbumGroupItems();
+    const showFavoriteRating = useAlbumGroupShowFavoriteRating();
     const [isHovered, setIsHovered] = useState(false);
     const [resolvedInfoHeight, setResolvedInfoHeight] = useState<number | undefined>();
     const playButtonBehavior = usePlayButtonBehavior();
@@ -50,6 +61,16 @@ export const AlbumGroupHeader = ({
         ? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: song.albumId })
         : null;
 
+    const metadataRows = useMemo(() => {
+        return albumGroupItems
+            .filter((item) => !item.disabled)
+            .map((item) => ({
+                content: renderAlbumGroupMetadataItem(item.id, song, metadata, t),
+                id: item.id,
+            }))
+            .filter((item) => item.content != null);
+    }, [albumGroupItems, metadata, song, t]);
+
     // The album group spans the combined row height, but when the image is
     // enlarged the group's last row is grown so the total reaches the img size.
     const infoHeight =
@@ -145,22 +166,21 @@ export const AlbumGroupHeader = ({
                         (song?.album ?? '')
                     )}
                 </div>
-                <div className={styles.artistName}>
-                    <JoinedArtists
-                        artistName={song?.albumArtistName ?? ''}
-                        artists={song?.albumArtists ?? []}
-                        linkProps={{ fw: 400 }}
-                        rootTextProps={{ fw: 400, size: 'xs' }}
-                    />
-                </div>
-                <div className={styles.controlsRow}>
-                    <AlbumGroupControls
-                        albumId={song?.albumId}
-                        isGroupHovered={isHovered}
-                        serverId={song?._serverId}
-                        serverType={song?._serverType}
-                    />
-                </div>
+                {metadataRows.map((row) => (
+                    <div className={styles.metadataRow} key={row.id}>
+                        {row.content}
+                    </div>
+                ))}
+                {showFavoriteRating && (
+                    <div className={styles.controlsRow}>
+                        <AlbumGroupControls
+                            albumId={song?.albumId}
+                            isGroupHovered={isHovered}
+                            serverId={song?._serverId}
+                            serverType={song?._serverType}
+                        />
+                    </div>
+                )}
             </div>
         </div>
     );

src/renderer/components/item-list/item-table-list/album-group-metadata.tsx

@@ -0,0 +1,147 @@
+import { TFunction } from 'i18next';
+import { Fragment, ReactNode } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import { AppRoute } from '/@/renderer/router/routes';
+import { AlbumGroupItem } from '/@/renderer/store';
+import { formatDurationString, formatPartialIsoDateUTC, formatSizeString } from '/@/renderer/utils';
+import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
+import { Text } from '/@/shared/components/text/text';
+import { Genre, Song } from '/@/shared/types/domain-types';
+
+export type AlbumGroupMetadata = {
+    duration: number;
+    genres: Genre[];
+    releaseDate: Song['releaseDate'];
+    releaseType: null | string;
+    releaseYear: Song['releaseYear'];
+    size: number;
+    songCount: number;
+};
+
+export const computeAlbumGroupMetadata = (
+    songs: Song[],
+    songCount: number,
+    t: TFunction,
+): AlbumGroupMetadata => {
+    const genreMap = new Map<string, Genre>();
+    let duration = 0;
+    let size = 0;
+
+    for (const song of songs) {
+        duration += song.duration ?? 0;
+        size += song.size ?? 0;
+
+        for (const genre of song.genres ?? []) {
+            if (!genreMap.has(genre.id)) {
+                genreMap.set(genre.id, genre);
+            }
+        }
+    }
+
+    const firstSong = songs[0];
+    const releaseTypes = firstSong?.tags?.releasetype;
+    const releaseType = releaseTypes?.length
+        ? (normalizeReleaseTypes(releaseTypes, t)[0] ?? null)
+        : null;
+
+    return {
+        duration,
+        genres: Array.from(genreMap.values()),
+        releaseDate: firstSong?.releaseDate ?? null,
+        releaseType,
+        releaseYear: firstSong?.releaseYear ?? null,
+        size,
+        songCount,
+    };
+};
+
+const formatReleaseDate = (metadata: AlbumGroupMetadata): null | string => {
+    if (metadata.releaseDate) {
+        return formatPartialIsoDateUTC(metadata.releaseDate);
+    }
+
+    return null;
+};
+
+export const renderAlbumGroupMetadataItem = (
+    itemId: AlbumGroupItem,
+    song: Song | undefined,
+    metadata: AlbumGroupMetadata,
+    t: TFunction,
+): null | ReactNode => {
+    switch (itemId) {
+        case AlbumGroupItem.ALBUM_ARTISTS:
+            if (!song?.albumArtistName && !(song?.albumArtists?.length ?? 0)) {
+                return null;
+            }
+
+            return (
+                <JoinedArtists
+                    artistName={song?.albumArtistName ?? ''}
+                    artists={song?.albumArtists ?? []}
+                    linkProps={{ fw: 400 }}
+                    rootTextProps={{ fw: 400, size: 'xs' }}
+                />
+            );
+
+        case AlbumGroupItem.DURATION:
+            return metadata.duration > 0 ? (
+                <Text size="xs">{formatDurationString(metadata.duration)}</Text>
+            ) : null;
+
+        case AlbumGroupItem.GENRES:
+            if (metadata.genres.length === 0) {
+                return null;
+            }
+
+            return (
+                <>
+                    {metadata.genres.map((genre, index) => (
+                        <Fragment key={genre.id}>
+                            <Text
+                                component={Link}
+                                fw={400}
+                                isLink
+                                size="xs"
+                                state={{ item: genre }}
+                                to={generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
+                                    genreId: genre.id,
+                                })}
+                            >
+                                {genre.name}
+                            </Text>
+                            {index < metadata.genres.length - 1 && ', '}
+                        </Fragment>
+                    ))}
+                </>
+            );
+
+        case AlbumGroupItem.RELEASE_DATE: {
+            const releaseDate = formatReleaseDate(metadata);
+            return releaseDate ? <Text size="xs">{releaseDate}</Text> : null;
+        }
+
+        case AlbumGroupItem.RELEASE_TYPE:
+            return metadata.releaseType ? <Text size="xs">{metadata.releaseType}</Text> : null;
+
+        case AlbumGroupItem.RELEASE_YEAR:
+            return metadata.releaseYear != null && metadata.releaseYear > 0 ? (
+                <Text size="xs">{metadata.releaseYear}</Text>
+            ) : null;
+
+        case AlbumGroupItem.SIZE:
+            return metadata.size > 0 ? (
+                <Text size="xs">{formatSizeString(metadata.size)}</Text>
+            ) : null;
+
+        case AlbumGroupItem.SONG_COUNT:
+            return metadata.songCount > 0 ? (
+                <Text size="xs">{t('entity.trackWithCount', { count: metadata.songCount })}</Text>
+            ) : null;
+
+        default:
+            return null;
+    }
+};

src/renderer/components/item-list/item-table-list/columns/album-group-column.tsx

@@ -1,6 +1,8 @@
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { AlbumGroupHeader } from '/@/renderer/components/item-list/item-table-list/album-group-header';
+import { computeAlbumGroupMetadata } from '/@/renderer/components/item-list/item-table-list/album-group-metadata';
 import {
     isLastInAlbumGroup,
     ItemTableListInnerColumn,
@@ -10,6 +12,7 @@ import { Song } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 export const AlbumGroupColumn = (props: ItemTableListInnerColumn) => {
+    const { t } = useTranslation();
     const firstDataRow = props.enableHeader ? 1 : 0;
     const item = props.getRowItem?.(props.rowIndex) as null | Song | undefined;
 
@@ -76,13 +79,17 @@ export const AlbumGroupColumn = (props: ItemTableListInnerColumn) => {
     }
 
     let groupRowCount = 1;
+    const groupSongs: Song[] = [item];
     const totalDataRows = props.data.length + firstDataRow;
     for (let idx = props.rowIndex + 1; idx < totalDataRows; idx++) {
         const nextItem = props.getRowItem?.(idx) as null | Song | undefined;
         if (!nextItem || nextItem.album !== item.album) break;
         groupRowCount++;
+        groupSongs.push(nextItem);
     }
 
+    const metadata = computeAlbumGroupMetadata(groupSongs, groupRowCount, t);
+
     return (
         <TableColumnContainer
             {...props}
@@ -92,6 +99,7 @@ export const AlbumGroupColumn = (props: ItemTableListInnerColumn) => {
         >
             <AlbumGroupHeader
                 groupRowCount={groupRowCount}
+                metadata={metadata}
                 onPlay={handlePlay}
                 rowIndex={props.rowIndex}
                 setAlbumGroupContentHeight={props.setAlbumGroupContentHeight}