diff --git a/src/renderer/components/item-list/helpers/get-title-path.ts b/src/renderer/components/item-list/helpers/get-title-path.ts new file mode 100644 index 000000000..7e0a1ba94 --- /dev/null +++ b/src/renderer/components/item-list/helpers/get-title-path.ts @@ -0,0 +1,19 @@ +import { generatePath } from 'react-router'; + +import { AppRoute } from '/@/renderer/router/routes'; +import { LibraryItem } from '/@/shared/types/domain-types'; + +export const getTitlePath = (itemType: LibraryItem, id: string) => { + switch (itemType) { + case LibraryItem.ALBUM: + return generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: id }); + case LibraryItem.ALBUM_ARTIST: + return generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId: id }); + case LibraryItem.ARTIST: + return generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, { artistId: id }); + case LibraryItem.GENRE: + return generatePath(AppRoute.LIBRARY_GENRES, { genreId: id }); + default: + return null; + } +}; diff --git a/src/renderer/components/item-list/item-table-list/columns/image-column.module.css b/src/renderer/components/item-list/item-table-list/columns/image-column.module.css index dc4f6d26e..8e7a5646d 100644 --- a/src/renderer/components/item-list/item-table-list/columns/image-column.module.css +++ b/src/renderer/components/item-list/item-table-list/columns/image-column.module.css @@ -1,3 +1,4 @@ .skeleton { + width: initial; aspect-ratio: 1 / 1; } diff --git a/src/renderer/components/item-list/item-table-list/columns/name-column.tsx b/src/renderer/components/item-list/item-table-list/columns/name-column.tsx deleted file mode 100644 index c8e0bf9eb..000000000 --- a/src/renderer/components/item-list/item-table-list/columns/name-column.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { - ItemTableListInnerColumn, - TableColumnTextContainer, -} from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; -import { Skeleton } from '/@/shared/components/skeleton/skeleton'; - -export const NameColumn = (props: ItemTableListInnerColumn) => { - const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[ - props.columns[props.columnIndex].id - ]; - - if (typeof row === 'string') { - return {row}; - } - - return ( - - - - ); -}; diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css new file mode 100644 index 000000000..91f8b53f2 --- /dev/null +++ b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css @@ -0,0 +1,14 @@ +.name-container { + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.name-container.compact { + -webkit-line-clamp: 1; +} + +.name-container.large { + -webkit-line-clamp: 3; +} diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx new file mode 100644 index 000000000..cd140abbd --- /dev/null +++ b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx @@ -0,0 +1,52 @@ +import clsx from 'clsx'; +import { Link } from 'react-router-dom'; + +import styles from './title-column.module.css'; + +import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path'; +import { + ItemTableListInnerColumn, + TableColumnContainer, + TableColumnTextContainer, +} from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; +import { Skeleton } from '/@/shared/components/skeleton/skeleton'; +import { Text } from '/@/shared/components/text/text'; + +export const TitleColumn = (props: ItemTableListInnerColumn) => { + const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[ + props.columns[props.columnIndex].id + ]; + + if (typeof row === 'string') { + const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); + + const titleLinkProps = path + ? { + component: Link, + isLink: true, + to: path, + } + : {}; + + return ( + + + {row} + + + ); + } + + return ( + + + + ); +}; diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx index 48447f7d1..62b98870a 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx @@ -3,6 +3,7 @@ import { generatePath, Link } from 'react-router-dom'; import styles from './title-combined-column.module.css'; +import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path'; import { ItemTableListInnerColumn, TableColumnContainer, @@ -31,6 +32,15 @@ export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => { if (row && 'name' in row && 'imageUrl' in row && 'artists' in row) { const rowHeight = props.getRowHeight(props.rowIndex, props); + const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); + + const titleLinkProps = path + ? { + component: Link, + isLink: true, + to: path, + } + : {}; return ( { >
- + {row.name as string}
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 cddaa0a69..591bb8707 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 @@ -26,6 +26,7 @@ import { RatingColumn } from '/@/renderer/components/item-list/item-table-list/c import { RowIndexColumn } from '/@/renderer/components/item-list/item-table-list/columns/row-index-column'; import { SizeColumn } from '/@/renderer/components/item-list/item-table-list/columns/size-column'; import { TextColumn } from '/@/renderer/components/item-list/item-table-list/columns/text-column'; +import { TitleColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-column'; import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-combined-column'; import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list'; import { ItemControls } from '/@/renderer/components/item-list/types'; @@ -128,6 +129,9 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => { case TableColumn.SIZE: return ; + case TableColumn.TITLE: + return ; + case TableColumn.TITLE_COMBINED: return ;