add support for track subtitle display (#1177)

src/renderer/components/item-list/item-table-list/columns/title-column.module.css

@@ -16,3 +16,7 @@
 .name-container.large {
     -webkit-line-clamp: 3;
 }
+
+.active {
+    color: var(--theme-colors-primary);
+}

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

@@ -83,8 +83,6 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
         const item = props.data[props.rowIndex] as any;
 
-        const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
-
         const titleLinkProps = path
             ? {
                   component: Link,
@@ -98,15 +96,29 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
             <TableColumnContainer {...props}>
                 <Text
                     className={clsx({
+                        [styles.active]: isActive,
                         [styles.compact]: props.size === 'compact',
                         [styles.large]: props.size === 'large',
                         [styles.nameContainer]: true,
                     })}
                     isNoSelect
                     {...titleLinkProps}
-                    style={textStyles}
                 >
                     {row}
+                    {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
+                        <Text
+                            className={clsx({
+                                [styles.active]: isActive,
+                            })}
+                            component="span"
+                            isMuted
+                            size="sm"
+                        >
+                            {' ('}
+                            {song.trackSubtitle}
+                            {')'}
+                        </Text>
+                    )}
                 </Text>
             </TableColumnContainer>
         );

src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css

@@ -70,3 +70,7 @@
     width: 24px;
     height: 24px;
 }
+
+.active {
+    color: var(--theme-colors-primary);
+}

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -213,7 +213,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
 
         const item = props.data[props.rowIndex] as any;
-        const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
 
         const titleLinkProps = path
             ? {
@@ -265,17 +264,34 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 </div>
                 <div
                     className={clsx(styles.textContainer, {
+                        [styles.active]: isActive,
                         [styles.compact]: props.size === 'compact',
                     })}
                 >
                     <Text
-                        className={styles.title}
+                        className={clsx({
+                            [styles.active]: isActive,
+                            [styles.title]: true,
+                        })}
                         isNoSelect
                         size="md"
                         {...titleLinkProps}
-                        style={textStyles}
                     >
                         {row.name as string}
+                        {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
+                            <Text
+                                className={clsx({
+                                    [styles.active]: isActive,
+                                })}
+                                component="span"
+                                isMuted
+                                size="sm"
+                            >
+                                {' ('}
+                                {song.trackSubtitle}
+                                {')'}
+                            </Text>
+                        )}
                     </Text>
                     <div className={styles.artists}>
                         <JoinedArtists

src/renderer/features/player/components/left-controls.tsx

@@ -173,6 +173,13 @@ export const LeftControls = () => {
                                         to={AppRoute.NOW_PLAYING}
                                     >
                                         {title || '—'}
+                                        {currentSong?.trackSubtitle && (
+                                            <Text component="span" isMuted size="sm">
+                                                {' ('}
+                                                {currentSong.trackSubtitle}
+                                                {')'}
+                                            </Text>
+                                        )}
                                     </Text>
                                     {isSongDefined && (
                                         <ActionIcon

src/shared/api/jellyfin/jellyfin-normalize.ts

@@ -244,6 +244,7 @@ const normalizeSong = (
         size,
         tags: getTags(item),
         trackNumber: item.IndexNumber,
+        trackSubtitle: null,
         updatedAt: item.DateCreated,
         userFavorite: (item.UserData && item.UserData.IsFavorite) || false,
         userRating: null,

src/shared/api/navidrome/navidrome-normalize.ts

@@ -226,6 +226,7 @@ const normalizeSong = (
         size: item.size,
         tags: item.tags || null,
         trackNumber: item.trackNumber,
+        trackSubtitle: item.tags?.subtitle ? item.tags.subtitle.join(' · ') : null,
         updatedAt: item.updatedAt,
         userFavorite: item.starred || false,
         userRating: item.rating || null,

src/shared/api/subsonic/subsonic-normalize.ts

@@ -195,6 +195,7 @@ const normalizeSong = (
         size: item.size,
         tags: null,
         trackNumber: item.track || 1,
+        trackSubtitle: null,
         updatedAt: '',
         userFavorite: Boolean(item.starred) || false,
         userRating: item.userRating || null,

src/shared/types/domain-types.ts

@@ -392,6 +392,7 @@ export type Song = {
     size: number;
     tags: null | Record<string, string[]>;
     trackNumber: number;
+    trackSubtitle: null | string;
     updatedAt: string;
     userFavorite: boolean;
     userRating: null | number;