diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 7ceafa5a8..e46f22ac8 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -922,6 +922,8 @@
"showLyricsInSidebar": "show lyrics in player sidebar",
"showRatings_description": "controls if the star ratings feature shows up in the interface",
"showRatings": "show star ratings",
+ "enableGridMultiSelect": "enable grid multi-select",
+ "enableGridMultiSelect_description": "when enabled, allows selecting multiple items in grid views. when disabled, clicking grid item images will navigate to the item page",
"showVisualizerInSidebar_description": "a panel will be added to the player sidebar that displays the visualizer",
"showVisualizerInSidebar": "show visualizer in player sidebar",
"combinedLyricsAndVisualizer_description": "combine lyrics and visualizer into the same panel",
diff --git a/src/renderer/components/feature-carousel/single-feature-carousel.tsx b/src/renderer/components/feature-carousel/single-feature-carousel.tsx
index 8aa533b22..baa692645 100644
--- a/src/renderer/components/feature-carousel/single-feature-carousel.tsx
+++ b/src/renderer/components/feature-carousel/single-feature-carousel.tsx
@@ -118,9 +118,9 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
containerClassName={styles.albumImageContainer}
enableDebounce={false}
enableViewport={false}
+ fetchPriority="high"
id={album.imageId}
itemType={LibraryItem.ALBUM}
- fetchPriority="high"
type="itemCard"
/>
diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css
index c38bfbc70..c3fbe9ebd 100644
--- a/src/renderer/components/item-card/item-card.module.css
+++ b/src/renderer/components/item-card/item-card.module.css
@@ -35,6 +35,7 @@
left: 0;
width: 100%;
height: 100%;
+ pointer-events: none;
content: '';
background-color: rgb(0 0 0);
opacity: 0;
diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx
index 8752588a4..98c3a1885 100644
--- a/src/renderer/components/item-card/item-card.tsx
+++ b/src/renderer/components/item-card/item-card.tsx
@@ -57,6 +57,7 @@ export interface ItemCardProps {
enableDrag?: boolean;
enableExpansion?: boolean;
enableNavigation?: boolean;
+ imageAsLink?: boolean;
internalState?: ItemListStateActions;
isRound?: boolean;
itemType: LibraryItem;
@@ -71,6 +72,7 @@ export const ItemCard = ({
enableDrag,
enableExpansion,
enableNavigation = true,
+ imageAsLink,
internalState,
isRound,
itemType,
@@ -91,6 +93,7 @@ export const ItemCard = ({
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableNavigation={enableNavigation}
+ imageAsLink={imageAsLink}
imageUrl={imageUrl}
internalState={internalState}
isRound={isRound}
@@ -108,6 +111,7 @@ export const ItemCard = ({
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableNavigation={enableNavigation}
+ imageAsLink={imageAsLink}
imageUrl={imageUrl}
internalState={internalState}
isRound={isRound}
@@ -126,6 +130,7 @@ export const ItemCard = ({
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableNavigation={enableNavigation}
+ imageAsLink={imageAsLink}
imageUrl={imageUrl}
internalState={internalState}
isRound={isRound}
@@ -142,6 +147,7 @@ export interface ItemCardDerivativeProps extends Omit {
controls?: ItemControls;
enableExpansion?: boolean;
enableNavigation?: boolean;
+ imageAsLink?: boolean;
imageUrl: string | undefined;
internalState?: ItemListStateActions;
rows: DataRow[];
@@ -154,6 +160,7 @@ const CompactItemCard = ({
enableDrag,
enableExpansion,
enableNavigation,
+ imageAsLink,
internalState,
isRound,
itemType,
@@ -381,7 +388,7 @@ const CompactItemCard = ({
})}
ref={ref}
>
- {enableNavigation && navigationPath && !internalState ? (
+ {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
- {enableNavigation && navigationPath && !internalState ? (
+ {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
- {enableNavigation && navigationPath && !internalState ? (
+ {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
ItemCardProps['data'];
@@ -86,6 +87,7 @@ const VirtualizedGridList = React.memo(
dataVersion,
enableDrag,
enableExpansion,
+ enableMultiSelect,
enableSelection,
gap,
getItem,
@@ -116,6 +118,7 @@ const VirtualizedGridList = React.memo(
dataVersion,
enableDrag,
enableExpansion,
+ enableMultiSelect,
enableSelection,
gap,
getItem,
@@ -135,6 +138,7 @@ const VirtualizedGridList = React.memo(
dataVersion,
enableDrag,
enableExpansion,
+ enableMultiSelect,
enableSelection,
gap,
internalState,
@@ -313,6 +317,7 @@ export interface GridItemProps {
dataVersion?: number;
enableDrag?: boolean;
enableExpansion?: boolean;
+ enableMultiSelect: boolean;
enableSelection?: boolean;
gap: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
getItem?: (index: number) => ItemCardProps['data'];
@@ -335,6 +340,7 @@ export interface ItemGridListProps {
enableDrag?: boolean;
enableEntranceAnimation?: boolean;
enableExpansion?: boolean;
+ enableMultiSelect?: boolean;
enableSelection?: boolean;
enableSelectionDialog?: boolean;
gap?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
@@ -364,6 +370,7 @@ const BaseItemGridList = ({
enableDrag = true,
enableEntranceAnimation = true,
enableExpansion = false,
+ enableMultiSelect = false,
enableSelection = true,
gap = 'sm',
getItem,
@@ -798,6 +805,7 @@ const BaseItemGridList = ({
dataVersion={dataVersion}
enableDrag={enableDrag}
enableExpansion={enableExpansion}
+ enableMultiSelect={enableMultiSelect}
enableSelection={enableSelection}
gap={gap}
getItem={resolvedGetItem}
@@ -828,8 +836,18 @@ const BaseItemGridList = ({
const ListComponent = memo((props: ListChildComponentProps) => {
const { index, style } = props;
- const { columns, controls, enableDrag, gap, getItem, itemCount, itemType, rows, size } =
- props.data;
+ const {
+ columns,
+ controls,
+ enableDrag,
+ enableMultiSelect,
+ gap,
+ getItem,
+ itemCount,
+ itemType,
+ rows,
+ size,
+ } = props.data;
const items: ReactNode[] = [];
const startIndex = index * columns;
@@ -857,6 +875,7 @@ const ListComponent = memo((props: ListChildComponentProps) => {
data={item}
enableDrag={enableDrag}
enableExpansion={props.data.enableExpansion}
+ imageAsLink={!enableMultiSelect}
internalState={props.data.internalState}
itemType={itemType}
rows={rows}
diff --git a/src/renderer/features/albums/components/album-list-infinite-grid.tsx b/src/renderer/features/albums/components/album-list-infinite-grid.tsx
index ae65ce588..308e2e72c 100644
--- a/src/renderer/features/albums/components/album-list-infinite-grid.tsx
+++ b/src/renderer/features/albums/components/album-list-infinite-grid.tsx
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import { useGeneralSettings } from '/@/renderer/store';
import {
AlbumListQuery,
AlbumListSort,
@@ -52,12 +53,14 @@ export const AlbumListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
+ const { enableGridMultiSelect } = useGeneralSettings();
return (
{
isHidden: false,
title: t('setting.showRatings', { postProcess: 'sentenceCase' }),
},
+ {
+ control: (
+
+ setSettings({
+ general: {
+ ...settings,
+ enableGridMultiSelect: e.currentTarget.checked,
+ },
+ })
+ }
+ />
+ ),
+ description: t('setting.enableGridMultiSelect', {
+ context: 'description',
+ postProcess: 'sentenceCase',
+ }),
+ isHidden: false,
+ title: t('setting.enableGridMultiSelect', { postProcess: 'sentenceCase' }),
+ },
{
control: (