{
const baseWidths = parsedColumns.map((c) => c.width);
- // When autoSizeColumns is enabled, treat all widths as proportions and scale to fit container
+ // When autoSizeColumns is enabled, treat unpinned widths as proportions and scale to fit container.
+ // Pinned columns keep their base width so they don't get squeezed.
if (autoFitColumns) {
- const totalReferenceWidth = baseWidths.reduce((sum, width) => sum + width, 0);
+ const pinnedWidth = parsedColumns.reduce(
+ (sum, col, idx) => (col.pinned !== null ? sum + baseWidths[idx] : sum),
+ 0,
+ );
+ const unpinnedIndices: number[] = [];
+ parsedColumns.forEach((col, idx) => {
+ if (col.pinned === null) {
+ unpinnedIndices.push(idx);
+ }
+ });
- if (totalReferenceWidth === 0 || totalContainerWidth === 0) {
+ const unpinnedReferenceWidth = unpinnedIndices.reduce(
+ (sum, idx) => sum + baseWidths[idx],
+ 0,
+ );
+ const availableForUnpinned = totalContainerWidth - pinnedWidth;
+
+ if (unpinnedReferenceWidth === 0 || availableForUnpinned <= 0) {
return baseWidths.map((width) => Math.round(width));
}
- const scaleFactor = totalContainerWidth / totalReferenceWidth;
- const scaledWidths = baseWidths.map((width) => Math.round(width * scaleFactor));
+ const scaleFactor = availableForUnpinned / unpinnedReferenceWidth;
+ const scaledWidths = baseWidths.map((width, idx) => {
+ if (parsedColumns[idx].pinned !== null) {
+ return Math.round(width);
+ }
+ return Math.round(width * scaleFactor);
+ });
- // Adjust for rounding errors: ensure total equals totalContainerWidth
+ // Adjust for rounding errors on unpinned columns only
const totalScaled = scaledWidths.reduce((sum, width) => sum + width, 0);
const difference = totalContainerWidth - totalScaled;
- if (difference !== 0 && scaledWidths.length > 0) {
- const sortedIndices = scaledWidths
- .map((width, idx) => ({ idx, width }))
+ if (difference !== 0 && unpinnedIndices.length > 0) {
+ const sortedIndices = unpinnedIndices
+ .map((idx) => ({ idx, width: scaledWidths[idx] }))
.sort((a, b) => b.width - a.width);
const adjustmentPerColumn = Math.sign(difference);
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
index 54ca49524..fe3968480 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
@@ -30,6 +30,7 @@ import { isNoHorizontalPaddingColumn } from '/@/renderer/components/item-list/it
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
+import { AlbumGroupColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-group-column';
import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column';
import { ComposerColumn } from '/@/renderer/components/item-list/item-table-list/columns/composer-column';
import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
@@ -213,6 +214,11 @@ const ItemTableListColumnBase = (props: ItemTableListColumn) => {
case TableColumn.SONG_COUNT:
return
;
+ case TableColumn.ALBUM_GROUP:
+ return (
+
+ );
+
case TableColumn.ARTIST:
return
;
@@ -362,6 +368,27 @@ export const ItemTableListColumn = memo(ItemTableListColumnBase, (prevProps, nex
const NonMutedColumns = [TableColumn.TITLE, TableColumn.TITLE_ARTIST, TableColumn.TITLE_COMBINED];
+export function isAlbumGroupingActive(columns: { id: string; isEnabled?: boolean }[]): boolean {
+ return columns.some((col) => col.id === TableColumn.ALBUM_GROUP && col.isEnabled);
+}
+
+export function isLastInAlbumGroup(
+ rowIndex: number,
+ getRowItem: ((index: number) => unknown) | undefined,
+ enableHeader: boolean | undefined,
+ dataLength: number,
+): boolean {
+ const item = getRowItem?.(rowIndex) as null | undefined | { album?: string };
+ if (!item?.album) return true;
+
+ const nextRowIndex = rowIndex + 1;
+ const maxRow = enableHeader ? dataLength + 1 : dataLength;
+ if (nextRowIndex >= maxRow) return true;
+
+ const nextItem = getRowItem?.(nextRowIndex) as null | undefined | { album?: string };
+ return !nextItem || nextItem.album !== item.album;
+}
+
export const TableColumnTextContainer = (
props: ItemTableListColumn & {
children: React.ReactNode;
@@ -493,7 +520,14 @@ export const TableColumnTextContainer = (
props.enableHorizontalBorders &&
props.enableHeader &&
props.rowIndex > 0 &&
- (props.rowIndex === 1 || !isLastRow),
+ (isAlbumGroupingActive(props.columns)
+ ? isLastInAlbumGroup(
+ props.rowIndex,
+ props.getRowItem,
+ !!props.enableHeader,
+ props.data.length,
+ )
+ : props.rowIndex === 1 || !isLastRow),
[styles.withVerticalBorder]: props.enableVerticalBorders && !isLastColumn,
})}
data-row-index={isDataRow ? `${props.tableId}-${props.rowIndex}` : undefined}
@@ -641,13 +675,24 @@ export const TableColumnContainer = (
[styles.paddingXl]: props.cellPadding === 'xl',
[styles.paddingXs]: props.cellPadding === 'xs',
[styles.right]: props.columns[props.columnIndex].align === 'end',
- [styles.rowHoverHighlightEnabled]: isDataRow && props.enableRowHoverHighlight,
- [styles.rowSelected]: isDataRow && isSelected,
+ [styles.rowHoverHighlightEnabled]:
+ isDataRow &&
+ props.enableRowHoverHighlight &&
+ props.type !== TableColumn.ALBUM_GROUP,
+ [styles.rowSelected]:
+ isDataRow && isSelected && props.type !== TableColumn.ALBUM_GROUP,
[styles.withHorizontalBorder]:
props.enableHorizontalBorders &&
props.enableHeader &&
props.rowIndex > 0 &&
- (props.rowIndex === 1 || !isLastRow),
+ (isAlbumGroupingActive(props.columns)
+ ? isLastInAlbumGroup(
+ props.rowIndex,
+ props.getRowItem,
+ !!props.enableHeader,
+ props.data.length,
+ )
+ : props.rowIndex === 1 || !isLastRow),
[styles.withVerticalBorder]: props.enableVerticalBorders && !isLastColumn,
})}
data-row-index={isDataRow ? `${props.tableId}-${props.rowIndex}` : undefined}
@@ -898,6 +943,9 @@ export const columnLabelMap: Record
= {
[TableColumn.ALBUM_COUNT]: i18n.t('table.column.albumCount', {
postProcess: 'upperCase',
}) as string,
+ [TableColumn.ALBUM_GROUP]: i18n.t('table.config.label.albumGroup', {
+ postProcess: 'upperCase',
+ }) as string,
[TableColumn.ARTIST]: i18n.t('table.column.artist', { postProcess: 'upperCase' }) as string,
[TableColumn.BIOGRAPHY]: i18n.t('table.column.biography', {
postProcess: 'upperCase',
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx
index 4d297ecd0..a563556d1 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx
@@ -94,7 +94,7 @@ const hasRequiredStateItemProperties = (
);
};
-enum TableItemSize {
+export enum TableItemSize {
COMPACT = 40,
DEFAULT = 64,
LARGE = 88,
@@ -204,17 +204,6 @@ const VirtualizedTableGrid = ({
[columnWidth, pinnedLeftColumnCount],
);
- const rowHeightMemoized = useCallback(
- (index: number, cellProps: TableItemProps) =>
- getRowHeight(index + pinnedRowCount, cellProps),
- [getRowHeight, pinnedRowCount],
- );
-
- const pinnedRightColumnWidthMemoized = useCallback(
- (index: number) => columnWidth(index + pinnedLeftColumnCount + totalColumnCount),
- [columnWidth, pinnedLeftColumnCount, totalColumnCount],
- );
-
const groupHeaderInfoByRowIndex = useMemo(() => {
if (!groups || groups.length === 0) return undefined;
@@ -231,6 +220,19 @@ const VirtualizedTableGrid = ({
return map;
}, [groups, enableHeader]);
+ const rowHeightMemoized = useCallback(
+ (index: number, cellProps: TableItemProps) => {
+ const adjustedIndex = index + pinnedRowCount;
+ return getRowHeight(adjustedIndex, cellProps);
+ },
+ [getRowHeight, pinnedRowCount],
+ );
+
+ const pinnedRightColumnWidthMemoized = useCallback(
+ (index: number) => columnWidth(index + pinnedLeftColumnCount + totalColumnCount),
+ [columnWidth, pinnedLeftColumnCount, totalColumnCount],
+ );
+
const getGroupRenderData = useCallback(() => data, [data]);
// Calculate pinned column widths for group header positioning
@@ -349,6 +351,7 @@ const VirtualizedTableGrid = ({
controls,
enableHeader,
getRowHeight,
+ hasAlbumGroupColumn: parsedColumns.some((col) => col.id === TableColumn.ALBUM_GROUP),
internalState,
itemType,
playerContext,
@@ -802,6 +805,7 @@ export interface TableItemProps {
getRowItem?: (rowIndex: number) => null | undefined | unknown;
groupHeaderInfoByRowIndex?: Map;
groups?: TableGroupHeader[];
+ hasAlbumGroupColumn?: boolean;
internalState: ItemListStateActions;
itemType: ItemTableListProps['itemType'];
onRowClick?: (item: any, event: React.MouseEvent) => void;
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
old mode 100755
new mode 100644
diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-table.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-table.tsx
index 14989fe15..8baa771c5 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-table.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-table.tsx
@@ -21,7 +21,7 @@ import {
PlaylistSongListResponse,
Song,
} from '/@/shared/types/domain-types';
-import { ItemListKey, Play } from '/@/shared/types/types';
+import { ItemListKey, Play, TableColumn } from '/@/shared/types/types';
interface PlaylistDetailSongListTableProps
extends Omit, 'query'> {
@@ -68,6 +68,10 @@ export const PlaylistDetailSongListTable = forwardRef col.id === TableColumn.ALBUM_GROUP && col.isEnabled,
+ );
+
const songDataFromData = useMemo(() => {
let list = data?.items || [];
if (searchTerm) {
@@ -117,6 +121,11 @@ export const PlaylistDetailSongListTable = forwardRef {
+ if (albumGroupingEnabled) return columns;
+ return columns.filter((col) => col.id !== TableColumn.ALBUM_GROUP);
+ }, [columns, albumGroupingEnabled]);
+
const isPaginated =
typeof currentPage === 'number' &&
typeof itemsPerPage === 'number' &&
@@ -135,7 +144,7 @@ export const PlaylistDetailSongListTable = forwardRef
- {item.pinned === null && (
-
-
- handleAutoSize(item, e.currentTarget.checked)
- }
- size="xs"
- />
-
- )}
-
+
+ handleAutoSize(item, e.currentTarget.checked)}
+ size="xs"
+ />
+
}
max={2000}
min={0}
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 4e884240b..cb5fb7bbe 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -2239,10 +2239,44 @@ export const useSettingsStore = createWithEqualityFn()(
}
}
+ if (version <= 26) {
+ // Add ALBUM_GROUP column to the song table config
+ const listKeysToUpdate: ItemListKey[] = [
+ ItemListKey.SONG,
+ ItemListKey.FOLDER,
+ ItemListKey.PLAYLIST_SONG,
+ ItemListKey.ALBUM_ARTIST_SONG,
+ ItemListKey.GENRE_SONG,
+ ItemListKey.QUEUE_SONG,
+ ItemListKey.FULL_SCREEN,
+ ItemListKey.SIDE_QUEUE,
+ ];
+
+ listKeysToUpdate.forEach((listKey) => {
+ const listConfig = state.lists[listKey as keyof typeof state.lists];
+ if (listConfig?.table?.columns) {
+ const columns = listConfig.table.columns;
+ const hasAlbumGroup = columns.some(
+ (col) => col.id === TableColumn.ALBUM_GROUP,
+ );
+ if (!hasAlbumGroup) {
+ columns.push({
+ align: 'start',
+ autoSize: false,
+ id: TableColumn.ALBUM_GROUP,
+ isEnabled: false,
+ pinned: 'left',
+ width: 200,
+ });
+ }
+ }
+ });
+ }
+
return persistedState;
},
name: 'store_settings',
- version: 25,
+ version: 26,
},
),
);
diff --git a/src/shared/api/utils.ts b/src/shared/api/utils.ts
index bbc97c07c..d48fc3b88 100644
--- a/src/shared/api/utils.ts
+++ b/src/shared/api/utils.ts
@@ -158,7 +158,12 @@ export const sortSongList = (songs: Song[], sortBy: SongListSort, sortOrder: Sor
case SongListSort.ALBUM_ARTIST:
results = orderBy(
results,
- [(v) => v.albumArtists[0]?.name.toLowerCase(), 'discNumber', 'trackNumber'],
+ [
+ (v) => v.albumArtists[0]?.name.toLowerCase(),
+ (v) => v.album?.toLowerCase(),
+ 'discNumber',
+ 'trackNumber',
+ ],
[order, order, order, order],
);
break;
diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx
old mode 100755
new mode 100644
diff --git a/src/shared/types/types.ts b/src/shared/types/types.ts
index 8eec81468..e076dc558 100644
--- a/src/shared/types/types.ts
+++ b/src/shared/types/types.ts
@@ -166,6 +166,7 @@ export enum TableColumn {
ALBUM = 'album',
ALBUM_ARTIST = 'albumArtists',
ALBUM_COUNT = 'albumCount',
+ ALBUM_GROUP = 'albumGroup',
ARTIST = 'artists',
BIOGRAPHY = 'biography',
BIT_DEPTH = 'bitDepth',