pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign sidebar / header and other misc. improvements (#24)

Browse source 
* Remove 1920px max width

* Fix position of list controls menu

* Match size and color of search input

* Adjust library header sizing

* Move app menu to sidebar

* Increase row buffer on play queue list

* Fix query builder styles

* Fix playerbar slider track bg

* Adjust titlebar styles

* Fix invalid modal prop

* Various adjustments to detail pages

* Fix sidebar height calculation

* Fix list null indicators, add filter indicator

* Adjust playqueue styles

* Fix jellyfin releaseYear normalization

* Suppress browser context menu on ag-grid

* Add radius to drawer queue -- normalize layout

* Add modal styles to provider theme

* Fix playlist song list pagination

* Add disc number to albums with more than one disc

* Fix query builder boolean values

* Adjust input placeholder color

* Properly handle rating/favorite from context menu on table

* Conform dropdown menu styles to context menu

* Increase sort type select width

* Fix drawer queue radius

* Change primary color

* Prevent volume wheel from invalid values

* Add icons to query builder dropdowns

* Update notification styles

* Update scrollbar thumb styles

* Remove "add to playlist" on smart playlists

* Fix "add to playlist" from context menu
This commit is contained in:
Jeff 2023-02-07 22:47:23 -08:00 • committed by GitHub
parent d2c0d4c11f
commit 9f2e873366
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
80 changed files with 1427 additions and 1101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/api/jellyfin.api.ts
View file

@ -848,7 +848,7 @@ const normalizeAlbum = (item: JFAlbum, server: ServerListItem, imageSize?: numbe
name: item.Name,
playCount: item.UserData?.PlayCount || 0,
releaseDate: item.PremiereDate?.split('T')[0] || null,
releaseYear: item.ProductionYear,
releaseYear: item.ProductionYear || null,
serverId: server.id,
serverType: ServerType.JELLYFIN,
size: null,

20
src/renderer/app.tsx
View file

@ -7,7 +7,6 @@ import { ModalsProvider } from '@mantine/modals';
import { initSimpleImg } from 'react-simple-img';
import { BaseContextModal } from './components';
import { useTheme } from './hooks';
import { Notifications } from '@mantine/notifications';
import { AppRouter } from './router/app-router';
import { useSettingsStore } from './store/settings.store';
import './styles/global.scss';
@ -38,7 +37,21 @@ export const App = () => {
withNormalizeCSS
theme={{
colorScheme: theme as 'light' | 'dark',
components: { Modal: { styles: { body: { padding: '.5rem' } } } },
components: {
Modal: {
styles: {
body: { background: 'var(--modal-bg)', padding: '1rem !important' },
close: { marginRight: '0.5rem' },
content: { borderRadius: '10px' },
header: {
background: 'var(--modal-bg)',
borderBottom: '1px solid var(--generic-border-color)',
paddingBottom: '1rem',
},
title: { fontSize: 'medium', fontWeight: 'bold' },
},
},
},
defaultRadius: 'xs',
dir: 'ltr',
focusRing: 'auto',
@ -85,8 +98,8 @@ export const App = () => {
<ModalsProvider
modalProps={{
centered: true,
transitionDuration: 300,
transitionProps: {
duration: 300,
exitDuration: 300,
transition: 'slide-down',
},
@ -95,7 +108,6 @@ export const App = () => {
>
<PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
<ContextMenuProvider>
<Notifications />
<AppRouter />
</ContextMenuProvider>
</PlayQueueHandlerContext.Provider>

15
src/renderer/components/dropdown-menu/index.tsx
View file

@ -6,7 +6,6 @@ import type {
MenuDropdownProps as MantineMenuDropdownProps,
} from '@mantine/core';
import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core';
import { RiArrowLeftSFill } from 'react-icons/ri';
import styled from 'styled-components';
type MenuProps = MantineMenuProps;
@ -56,18 +55,10 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
background-color: var(--dropdown-menu-bg-hover);
}
& .mantine-Menu-itemIcon {
margin-right: 1rem;
}
& .mantine-Menu-itemLabel {
margin-right: 2rem;
margin-left: 1rem;
color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
font-weight: 500;
}
& .mantine-Menu-itemRightSection {
display: flex;
margin-left: 2rem !important;
}
cursor: default;
@ -110,7 +101,7 @@ const pMenuItem = ({ $isActive, $danger, children, ...props }: MenuItemProps) =>
<StyledMenuItem
$danger={$danger}
$isActive={$isActive}
rightSection={$isActive && <RiArrowLeftSFill size={20} />}
// rightSection={$isActive && <RiArrowLeftSFill size={20} />}
{...props}
>
{children}

4
src/renderer/components/page-header/index.tsx
View file

@ -12,6 +12,7 @@ const Container = styled(motion(Flex))<{
z-index: 2000;
width: 100%;
height: ${(props) => props.height || '65px'};
background: var(--titlebar-bg);
`;
const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
@ -19,7 +20,7 @@ const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
z-index: 15;
width: 100%;
height: 100%;
margin-right: ${(props) => props.$padRight && '170px'};
margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
-webkit-app-region: drag;
@ -66,6 +67,7 @@ export interface PageHeaderProps
const TitleWrapper = styled(motion.div)`
position: absolute;
display: flex;
width: 100%;
height: 100%;
`;

23
src/renderer/components/query-builder/index.tsx
View file

@ -1,7 +1,7 @@
import { Group, Stack } from '@mantine/core';
import { Select } from '/@/renderer/components/select';
import { AnimatePresence, motion } from 'framer-motion';
import { RiAddLine, RiMore2Line } from 'react-icons/ri';
import { RiAddFill, RiAddLine, RiDeleteBinFill, RiMore2Line, RiRestartLine } from 'react-icons/ri';
import { Button } from '/@/renderer/components/button';
import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
@ -87,8 +87,11 @@ export const QueryBuilder = ({
};
return (
<Stack ml={`${level * 10}px`}>
<Group>
<Stack
ml={`${level * 10}px`}
spacing="sm"
>
<Group spacing="sm">
<Select
data={FILTER_GROUP_OPTIONS_DATA}
maxWidth={175}
@ -117,10 +120,18 @@ export const QueryBuilder = ({
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item onClick={handleAddRuleGroup}>Add rule group</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiAddFill />}
onClick={handleAddRuleGroup}
>
Add rule group
</DropdownMenu.Item>
{level > 0 && (
<DropdownMenu.Item onClick={handleDeleteRuleGroup}>
<DropdownMenu.Item
icon={<RiDeleteBinFill />}
onClick={handleDeleteRuleGroup}
>
Remove rule group
</DropdownMenu.Item>
)}
@ -129,12 +140,14 @@ export const QueryBuilder = ({
<DropdownMenu.Divider />
<DropdownMenu.Item
$danger
icon={<RiRestartLine color="var(--danger-color)" />}
onClick={onResetFilters}
>
Reset to default
</DropdownMenu.Item>
<DropdownMenu.Item
$danger
icon={<RiDeleteBinFill color="var(--danger-color)" />}
onClick={onClearFilters}
>
Clear filters

19
src/renderer/components/query-builder/query-builder-option.tsx
View file

@ -91,7 +91,11 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
case 'boolean':
return (
<Select
data={[]}
data={[
{ label: 'true', value: 'true' },
{ label: 'false', value: 'false' },
]}
onChange={onChange}
{...props}
/>
);
@ -178,14 +182,17 @@ export const QueryBuilderOption = ({
const ml = (level + 1) * 10;
return (
<Group ml={ml}>
<Group
ml={ml}
spacing="sm"
>
<Select
searchable
data={filters}
maxWidth={170}
size="sm"
value={field}
width="20%"
width="25%"
onChange={handleChangeField}
/>
<Select
@ -195,7 +202,7 @@ export const QueryBuilderOption = ({
maxWidth={170}
size="sm"
value={operator}
width="20%"
width="25%"
onChange={handleChangeOperator}
/>
{field ? (
@ -204,7 +211,7 @@ export const QueryBuilderOption = ({
maxWidth={170}
size="sm"
type={operator === 'inTheRange' ? 'dateRange' : fieldType}
width="20%"
width="25%"
onChange={handleChangeValue}
/>
) : (
@ -213,7 +220,7 @@ export const QueryBuilderOption = ({
defaultValue={value}
maxWidth={170}
size="sm"
width="20%"
width="25%"
onChange={handleChangeValue}
/>
)}

6
src/renderer/components/scroll-area/index.tsx
View file

@ -31,11 +31,11 @@ const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string }>`
overflow-y: overlay !important;
&::-webkit-scrollbar-track {
margin-top: ${(props) => props.scrollBarOffset || '35px'};
margin-top: ${(props) => props.scrollBarOffset || '65px'};
}
&::-webkit-scrollbar-thumb {
margin-top: ${(props) => props.scrollBarOffset || '35px'};
margin-top: ${(props) => props.scrollBarOffset || '65px'};
}
`;
@ -78,7 +78,7 @@ export const NativeScrollArea = forwardRef(
const [hideHeader, setHideHeader] = useState(true);
const { start, clear } = useTimeout(
() => setHideScrollbar(true),
scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 1000,
scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 0,
);
const containerRef = useRef(null);

4
src/renderer/components/search-input/index.tsx
View file

@ -43,10 +43,10 @@ export const SearchInput = ({
<TextInput
ref={mergedRef}
{...props}
icon={showIcon && <RiSearchLine size={15} />}
icon={showIcon && <RiSearchLine />}
size="md"
styles={{
icon: { svg: { fill: 'var(--btn-default-fg)' } },
icon: { svg: { fill: 'var(--titlebar-fg)' } },
input: {
backgroundColor: isOpened ? 'inherit' : 'transparent !important',
border: 'none !important',

14
src/renderer/components/toast/index.tsx
View file

@ -30,15 +30,19 @@ const showToast = ({ type, ...props }: NotificationProps) => {
? 'Error'
: 'Info';
const defaultDuration = type === 'error' ? 3500 : 2000;
const defaultDuration = type === 'error' ? 4000 : 2000;
return showNotification({
autoClose: defaultDuration,
styles: () => ({
closeButton: {},
closeButton: {
'&:hover': {
background: 'transparent',
},
},
description: {
color: 'var(--toast-description-fg)',
fontSize: '.9em',
fontSize: '1rem',
},
loader: {
margin: '1rem',
@ -46,10 +50,12 @@ const showToast = ({ type, ...props }: NotificationProps) => {
root: {
'&::before': { backgroundColor: color },
background: 'var(--toast-bg)',
border: '2px solid var(--generic-border-color)',
bottom: '90px',
},
title: {
color: 'var(--toast-title-fg)',
fontSize: '1em',
fontSize: '1.3rem',
},
}),
title: defaultTitle,

16
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
View file

@ -29,13 +29,13 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
setItemData: (data: any[]) => void;
}
const constrainWidth = (width: number) => {
if (width < 1920) {
return width;
}
// const constrainWidth = (width: number) => {
// if (width < 1920) {
// return width;
// }
return 1920;
};
// return 1920;
// };
export const VirtualInfiniteGrid = forwardRef(
(
@ -65,9 +65,7 @@ export const VirtualInfiniteGrid = forwardRef(
const loader = useRef<InfiniteLoader>(null);
const { itemHeight, rowCount, columnCount } = useMemo(() => {
const itemsPerRow = Math.floor(
(constrainWidth(Number(width)) - itemGap + 3) / (itemSize! + itemGap + 2),
);
const itemsPerRow = Math.floor((Number(width) - itemGap + 3) / (itemSize! + itemGap + 2));
return {
columnCount: itemsPerRow,

17
src/renderer/components/virtual-table/cells/favorite-cell.tsx
View file

@ -6,11 +6,7 @@ import { useMutation } from '@tanstack/react-query';
import { HTTPError } from 'ky';
import { api } from '/@/renderer/api';
import { RawFavoriteResponse, FavoriteArgs, LibraryItem } from '/@/renderer/api/types';
import {
useCurrentServer,
useSetAlbumListItemDataById,
useSetQueueFavorite,
} from '/@/renderer/store';
import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
const useCreateFavorite = () => {
const server = useCurrentServer();
@ -50,9 +46,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
const createMutation = useCreateFavorite();
const deleteMutation = useDeleteFavorite();
// Since the queue is using client-side state, we need to update it manually
const setFavorite = useSetQueueFavorite();
const handleToggleFavorite = () => {
const newFavoriteValue = !value;
@ -66,10 +59,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
},
{
onSuccess: () => {
if (data.itemType === LibraryItem.SONG) {
setFavorite([data.id], newFavoriteValue);
}
node.setData({ ...data, userFavorite: newFavoriteValue });
},
},
@ -84,10 +73,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
},
{
onSuccess: () => {
if (data.itemType === LibraryItem.SONG) {
setFavorite([data.id], newFavoriteValue);
}
node.setData({ ...data, userFavorite: newFavoriteValue });
},
},

50
src/renderer/components/virtual-table/cells/rating-cell.tsx
View file

@ -1,47 +1,55 @@
import { MouseEvent, useState } from 'react';
import { MouseEvent } from 'react';
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Rating } from '/@/renderer/components/rating';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { useUpdateRating } from '/@/renderer/components/virtual-table/hooks/use-rating';
export const RatingCell = ({ value }: ICellRendererParams) => {
export const RatingCell = ({ value, node }: ICellRendererParams) => {
const updateRatingMutation = useUpdateRating();
const [ratingValue, setRatingValue] = useState(value?.userRating);
const handleUpdateRating = (rating: number) => {
if (!value) return;
updateRatingMutation.mutate({
_serverId: value?.serverId,
query: {
item: [value],
rating,
updateRatingMutation.mutate(
{
_serverId: value?.serverId,
query: {
item: [value],
rating,
},
},
});
setRatingValue(rating);
{
onSuccess: () => {
node.setData({ ...node.data, userRating: rating });
},
},
);
};
const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
updateRatingMutation.mutate({
_serverId: value?.serverId,
query: {
item: [value],
rating: 0,
updateRatingMutation.mutate(
{
_serverId: value?.serverId,
query: {
item: [value],
rating: 0,
},
},
});
setRatingValue(0);
{
onSuccess: () => {
node.setData({ ...node.data, userRating: 0 });
},
},
);
};
return (
<CellContainer position="center">
<Rating
defaultValue={value?.userRating || 0}
size="xs"
value={ratingValue}
value={value?.userRating}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>

4
src/renderer/components/virtual-table/index.tsx
View file

@ -254,6 +254,7 @@ const tableColumns: { [key: string]: ColDef } = {
colId: TableColumn.TITLE_COMBINED,
headerName: 'Title',
initialWidth: 500,
minWidth: 150,
valueGetter: (params: ValueGetterParams) =>
params.data
? {
@ -292,7 +293,7 @@ const tableColumns: { [key: string]: ColDef } = {
width: 50,
},
userRating: {
cellClass: (params) => (params.value ? 'visible ag-cell-rating' : 'ag-cell-rating'),
cellClass: (params) => (params.value.userRating ? 'visible ag-cell-rating' : 'ag-cell-rating'),
cellRenderer: RatingCell,
colId: TableColumn.USER_RATING,
field: 'userRating',
@ -427,6 +428,7 @@ export const VirtualTable = forwardRef(
ref={mergedRef}
animateRows
maintainColumnOrder
suppressAsyncEvents
suppressContextMenu
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging

18
src/renderer/features/action-required/components/server-required.tsx
View file

@ -1,10 +1,24 @@
import { Text } from '/@/renderer/components';
import { RiMenuFill } from 'react-icons/ri';
import { Button, DropdownMenu, Text } from '/@/renderer/components';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
export const ServerRequired = () => {
return (
<>
<Text>No server selected.</Text>
<Text>Add or select a server in the file menu.</Text>
<DropdownMenu>
<DropdownMenu.Target>
<Button
leftIcon={<RiMenuFill />}
variant="filled"
>
Open menu
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
</>
);
};

120
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -3,28 +3,28 @@ import {
Button,
getColumnDefs,
GridCarousel,
Text,
TextTitle,
useFixedTableHeader,
VirtualTable,
} from '/@/renderer/components';
import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
import { ColDef, RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Box, Group, Stack } from '@mantine/core';
import { useSetState } from '@mantine/hooks';
import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
import { RiDiscFill, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
import { generatePath, useParams } from 'react-router';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { useSongListStore } from '/@/renderer/store';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { AppRoute } from '/@/renderer/router/routes';
import { useContainerQuery } from '/@/renderer/hooks';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { PersistedTableColumn, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import {
useHandleGeneralContextMenu,
useHandleTableContextMenu,
} from '/@/renderer/features/context-menu';
import { Play } from '/@/renderer/types';
import { Play, ServerType, TableColumn } from '/@/renderer/types';
import {
ALBUM_CONTEXT_MENU_ITEMS,
SONG_CONTEXT_MENU_ITEMS,
@ -34,11 +34,14 @@ import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-que
import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types';
import { usePlayQueueAdd } from '/@/renderer/features/player';
const isFullWidthRow = (node: RowNode) => {
return node.id?.includes('disc-');
};
const ContentContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
max-width: 1920px;
padding: 1rem 2rem 5rem;
overflow: hidden;
@ -61,13 +64,82 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
const cq = useContainerQuery();
const handlePlayQueueAdd = usePlayQueueAdd();
const page = useSongListStore();
// TODO: Make this customizable
const columnDefs: ColDef[] = useMemo(() => {
const userRatingColumn =
detailQuery?.data?.serverType !== ServerType.JELLYFIN
? [
{
column: TableColumn.USER_RATING,
width: 0,
},
]
: [];
const columnDefs: ColDef[] = useMemo(
() =>
getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
[page.table.columns],
);
const cols: PersistedTableColumn[] = [
{
column: TableColumn.TRACK_NUMBER,
width: 0,
},
{
column: TableColumn.TITLE_COMBINED,
width: 0,
},
{
column: TableColumn.DURATION,
width: 0,
},
{
column: TableColumn.BIT_RATE,
width: 0,
},
{
column: TableColumn.PLAY_COUNT,
width: 0,
},
{
column: TableColumn.LAST_PLAYED,
width: 0,
},
...userRatingColumn,
{
column: TableColumn.USER_FAVORITE,
width: 0,
},
];
return getColumnDefs(cols).filter((c) => c.colId !== 'album' && c.colId !== 'artist');
}, [detailQuery?.data?.serverType]);
const getRowHeight = useCallback((params: RowHeightParams) => {
if (isFullWidthRow(params.node)) {
return 45;
}
return 60;
}, []);
const songsRowData = useMemo(() => {
if (!detailQuery.data?.songs) {
return [];
}
const uniqueDiscNumbers = new Set(detailQuery.data?.songs.map((s) => s.discNumber));
if (uniqueDiscNumbers.size === 1) {
return detailQuery.data?.songs;
}
const rowData: (QueueSong | { id: string; name: string })[] = [];
for (const discNumber of uniqueDiscNumbers.values()) {
const songsByDiscNumber = detailQuery.data?.songs.filter((s) => s.discNumber === discNumber);
rowData.push({ id: `disc-${discNumber}`, name: `DISC ${discNumber}` });
rowData.push(...songsByDiscNumber);
}
return rowData;
}, [detailQuery.data?.songs]);
const [pagination, setPagination] = useSetState({
artist: 0,
@ -261,9 +333,29 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
suppressRowDrag
columnDefs={columnDefs}
enableCellChangeFlash={false}
fullWidthCellRenderer={(data: any) => {
if (!data.data) return null;
return (
<Group
align="center"
h="100%"
spacing="sm"
>
<RiDiscFill />
<Text>{data.data.name}</Text>
</Group>
);
}}
getRowHeight={getRowHeight}
getRowId={(data) => data.data.id}
rowData={detailQuery.data?.songs}
rowHeight={60}
isFullWidthRow={(data) => {
return isFullWidthRow(data.rowNode) || false;
}}
isRowSelectable={(data) => {
if (isFullWidthRow(data.data)) return false;
return true;
}}
rowData={songsRowData}
rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onRowDoubleClicked={handleRowDoubleClick}

6
src/renderer/features/albums/components/album-list-content.tsx
View file

@ -114,7 +114,7 @@ export const AlbumListContent = ({
);
const albums = api.normalize.albumList(albumsRes, server);
params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
@ -341,7 +341,7 @@ export const AlbumListContent = ({
itemGap={20}
itemSize={150 + page.grid?.size}
itemType={LibraryItem.ALBUM}
loading={!itemCount}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
@ -366,7 +366,7 @@ export const AlbumListContent = ({
blockLoadDebounceMillis={200}
columnDefs={columnDefs}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 1}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}

47
src/renderer/features/albums/components/album-list-header-filters.tsx
View file

@ -1,4 +1,4 @@
import { MutableRefObject, useCallback, MouseEvent, ChangeEvent } from 'react';
import { MutableRefObject, useCallback, MouseEvent, ChangeEvent, useMemo } from 'react';
import { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group, Stack } from '@mantine/core';
@ -8,13 +8,13 @@ import {
RiSortAsc,
RiSortDesc,
RiFolder2Line,
RiFilter3Line,
RiMoreFill,
RiAddBoxFill,
RiPlayFill,
RiAddCircleFill,
RiRefreshLine,
RiSettings3Fill,
RiFilterFill,
} from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
@ -189,7 +189,7 @@ export const AlbumListHeaderFilters = ({
);
const albums = api.normalize.albumList(albumsRes, server);
params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
@ -371,6 +371,20 @@ export const AlbumListHeaderFilters = ({
}
};
const isFilterApplied = useMemo(() => {
const isNavidromeFilterApplied =
server?.type === ServerType.NAVIDROME &&
page.filter.ndParams &&
Object.values(page.filter.ndParams).some((value) => value !== undefined);
const isJellyfinFilterApplied =
server?.type === ServerType.JELLYFIN &&
page.filter.jfParams &&
Object.values(page.filter.jfParams).some((value) => value !== undefined);
return isNavidromeFilterApplied || isJellyfinFilterApplied;
}, [page.filter.jfParams, page.filter.ndParams, server?.type]);
return (
<Flex justify="space-between">
<Group
@ -447,15 +461,6 @@ export const AlbumListHeaderFilters = ({
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
<Button
compact
fw={600}
size="md"
variant="subtle"
onClick={handleOpenFiltersModal}
>
{cq.isSm ? 'Filters' : <RiFilter3Line size="1.3rem" />}
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
@ -495,12 +500,26 @@ export const AlbumListHeaderFilters = ({
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>
<Group>
<DropdownMenu position="bottom-start">
<Group
noWrap
spacing="sm"
>
<Button
compact
size="md"
sx={{ svg: { fill: isFilterApplied ? 'var(--primary-color) !important' : undefined } }}
tooltip={{ label: 'Filters' }}
variant="subtle"
onClick={handleOpenFiltersModal}
>
<RiFilterFill size="1.3rem" />
</Button>
<DropdownMenu position="bottom-end">
<DropdownMenu.Target>
<Button
compact
size="md"
tooltip={{ label: 'Configure' }}
variant="subtle"
>
<RiSettings3Fill size="1.3rem" />

10
src/renderer/features/albums/components/album-list-header.tsx
View file

@ -129,7 +129,7 @@ export const AlbumListHeader = ({
);
const albums = api.normalize.albumList(albumsRes, server);
params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
@ -209,13 +209,11 @@ export const AlbumListHeader = ({
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex
justify="space-between"
py="1rem"
w="100%"
>
<LibraryHeaderBar>
<Group noWrap>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.Title>{title || 'Albums'}</LibraryHeaderBar.Title>
</Group>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.Title>{title || 'Albums'}</LibraryHeaderBar.Title>
<Paper
fw="600"
px="1rem"

42
src/renderer/features/albums/components/jellyfin-album-filters.tsx
View file

@ -4,7 +4,6 @@ import { MultiSelect, NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer
import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres';
import { useDebouncedValue } from '@mantine/hooks';
import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
@ -48,30 +47,30 @@ export const JellyfinAlbumFilters = ({
},
];
const handleMinYearFilter = debounce((e: number | undefined) => {
if (e && (e < 1700 || e > 2300)) return;
const handleMinYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
minYear: e,
minYear: e === '' ? undefined : (e as number),
},
});
handleFilterChange(updatedFilters);
}, 500);
const handleMaxYearFilter = debounce((e: number | undefined) => {
if (e && (e < 1700 || e > 2300)) return;
const handleMaxYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
maxYear: e,
maxYear: e === '' ? undefined : (e as number),
},
});
handleFilterChange(updatedFilters);
}, 500);
const handleGenresFilter = debounce((e: string[] | undefined) => {
const genreFilterString = e?.join(',');
const genreFilterString = e?.length ? e.join(',') : undefined;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
@ -82,18 +81,16 @@ export const JellyfinAlbumFilters = ({
}, 250);
const [albumArtistSearchTerm, setAlbumArtistSearchTerm] = useState<string>('');
const [debouncedSearchTerm] = useDebouncedValue(albumArtistSearchTerm, 200);
const albumArtistListQuery = useAlbumArtistList(
{
limit: 300,
searchTerm: debouncedSearchTerm,
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
{
enabled: debouncedSearchTerm ? debouncedSearchTerm !== '' : false,
cacheTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
);
@ -106,6 +103,17 @@ export const JellyfinAlbumFilters = ({
}));
}, [albumArtistListQuery?.data?.items]);
const handleAlbumArtistFilter = (e: string[] | null) => {
const albumArtistFilterString = e?.length ? e.join(',') : undefined;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
albumArtistIds: albumArtistFilterString,
},
});
handleFilterChange(updatedFilters);
};
return (
<Stack p="0.8rem">
{toggleFilters.map((filter) => (
@ -124,22 +132,22 @@ export const JellyfinAlbumFilters = ({
<Divider my="0.5rem" />
<Group grow>
<NumberInput
defaultValue={filter.jfParams?.minYear}
hideControls={false}
label="From year"
max={2300}
min={1700}
required={!!filter.jfParams?.maxYear}
value={filter.jfParams?.minYear}
onChange={handleMinYearFilter}
onChange={(e) => handleMinYearFilter(e)}
/>
<NumberInput
defaultValue={filter.jfParams?.maxYear}
hideControls={false}
label="To year"
max={2300}
min={1700}
required={!!filter.jfParams?.minYear}
value={filter.jfParams?.maxYear}
onChange={handleMaxYearFilter}
onChange={(e) => handleMaxYearFilter(e)}
/>
</Group>
<Group grow>
@ -158,12 +166,14 @@ export const JellyfinAlbumFilters = ({
clearable
searchable
data={selectableAlbumArtists}
defaultValue={filter.jfParams?.albumArtistIds?.split(',')}
disabled={disableArtistFilter}
label="Artist"
limit={300}
placeholder="Type to search for an artist"
rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
searchValue={albumArtistSearchTerm}
onChange={handleAlbumArtistFilter}
onSearchChange={setAlbumArtistSearchTerm}
/>
</Group>

28
src/renderer/features/albums/components/navidrome-album-filters.tsx
View file

@ -2,7 +2,6 @@ import { ChangeEvent, useMemo, useState } from 'react';
import { Divider, Group, Stack } from '@mantine/core';
import { NumberInput, Switch, Text, Select, SpinnerIcon } from '/@/renderer/components';
import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
import { useDebouncedValue } from '@mantine/hooks';
import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
@ -86,29 +85,28 @@ export const NavidromeAlbumFilters = ({
},
];
const handleYearFilter = debounce((e: number | undefined) => {
const handleYearFilter = debounce((e: number | string) => {
const updatedFilters = setFilters({
ndParams: {
...filter.ndParams,
year: e,
year: e === '' ? undefined : (e as number),
},
});
handleFilterChange(updatedFilters);
}, 500);
const [albumArtistSearchTerm, setAlbumArtistSearchTerm] = useState<string>('');
const [debouncedSearchTerm] = useDebouncedValue(albumArtistSearchTerm, 200);
const albumArtistListQuery = useAlbumArtistList(
{
limit: 300,
searchTerm: debouncedSearchTerm,
// searchTerm: debouncedSearchTerm,
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
{
enabled: debouncedSearchTerm ? debouncedSearchTerm !== '' : false,
cacheTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
);
@ -121,6 +119,16 @@ export const NavidromeAlbumFilters = ({
}));
}, [albumArtistListQuery?.data?.items]);
const handleAlbumArtistFilter = (e: string | null) => {
const updatedFilters = setFilters({
ndParams: {
...filter.ndParams,
artist_id: e || undefined,
},
});
handleFilterChange(updatedFilters);
};
return (
<Stack p="0.8rem">
{toggleFilters.map((filter) => (
@ -138,12 +146,12 @@ export const NavidromeAlbumFilters = ({
<Divider my="0.5rem" />
<Group grow>
<NumberInput
defaultValue={filter.ndParams?.year}
hideControls={false}
label="Year"
max={5000}
min={0}
value={filter.ndParams?.year}
onChange={handleYearFilter}
onChange={(e) => handleYearFilter(e)}
/>
<Select
clearable
@ -159,12 +167,14 @@ export const NavidromeAlbumFilters = ({
clearable
searchable
data={selectableAlbumArtists}
defaultValue={filter.ndParams?.artist_id}
disabled={disableArtistFilter}
label="Artist"
limit={300}
placeholder="Type to search for an artist"
rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
searchValue={albumArtistSearchTerm}
onChange={handleAlbumArtistFilter}
onSearchChange={setAlbumArtistSearchTerm}
/>
</Group>

1
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -44,7 +44,6 @@ const ContentContainer = styled.div`
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 1920px;
padding: 1rem 2rem 5rem;
overflow: hidden;

2
src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
View file

@ -143,7 +143,7 @@ export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHe
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};

2
src/renderer/features/artists/components/album-artist-detail-header.tsx
View file

@ -54,8 +54,6 @@ export const AlbumArtistDetailHeader = forwardRef(
const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
if (!detailQuery?.data || !detailQuery?.data.userRating) return;
console.log(rating, detailQuery.data.userRating);
const isSameRatingAsPrevious = rating === detailQuery.data.userRating;
if (!isSameRatingAsPrevious) return;

2
src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx
View file

@ -94,7 +94,7 @@ export const AlbumArtistDetailSongListContent = ({
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};

2
src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
View file

@ -143,7 +143,7 @@ export const AlbumArtistDetailSongListHeader = ({
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};

113
src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
View file

@ -1,16 +1,9 @@
import { Flex, Group } from '@mantine/core';
import { RiMoreFill } from 'react-icons/ri';
import { RiAddBoxFill, RiAddCircleFill, RiMoreFill, RiPlayFill } from 'react-icons/ri';
import { QueueSong } from '/@/renderer/api/types';
import {
Button,
DropdownMenu,
PageHeader,
TextTitle,
Badge,
SpinnerIcon,
} from '/@/renderer/components';
import { Button, DropdownMenu, PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useContainerQuery } from '/@/renderer/hooks';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { Play } from '/@/renderer/types';
interface AlbumArtistDetailTopSongsListHeaderProps {
@ -25,7 +18,7 @@ export const AlbumArtistDetailTopSongsListHeader = ({
data,
}: AlbumArtistDetailTopSongsListHeaderProps) => {
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
const playButtonBehavior = usePlayButtonBehavior();
const handlePlay = async (play: Play) => {
handlePlayQueueAdd?.({
@ -36,61 +29,49 @@ export const AlbumArtistDetailTopSongsListHeader = ({
return (
<PageHeader p="1rem">
<Flex
ref={cq.ref}
direction="row"
justify="space-between"
>
<Flex
align="center"
gap="md"
justify="center"
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.Title>Top songs from {title}</LibraryHeaderBar.Title>
<Paper
fw="600"
px="1rem"
py="0.3rem"
radius="sm"
>
<Button
compact
size="xl"
sx={{ paddingLeft: 0, paddingRight: 0 }}
variant="subtle"
>
<Group noWrap>
<TextTitle
maw="20vw"
order={2}
overflow="hidden"
weight={700}
>
{title}
</TextTitle>
<Badge
radius="xl"
size="lg"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
Add to queue next
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>
</Flex>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Paper>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item
icon={<RiPlayFill />}
onClick={() => handlePlay(Play.NOW)}
>
Play
</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiAddBoxFill />}
onClick={() => handlePlay(Play.LAST)}
>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiAddCircleFill />}
onClick={() => handlePlay(Play.NEXT)}
>
Add to queue next
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</LibraryHeaderBar>
</PageHeader>
);
};

5
src/renderer/features/artists/components/album-artist-list-content.tsx
View file

@ -109,10 +109,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
);
const albums = api.normalize.albumArtistList(albumArtistsRes, server);
params.successCallback(
albums?.items || [],
albumArtistsRes?.totalRecordCount || undefined,
);
params.successCallback(albums?.items || [], albumArtistsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};

8
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
View file

@ -8,8 +8,8 @@ import {
RiSortDesc,
RiFolder2Line,
RiMoreFill,
RiSettings2Fill,
RiRefreshLine,
RiSettings3Fill,
} from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
@ -168,7 +168,7 @@ export const AlbumArtistListHeaderFilters = ({
const albumArtists = api.normalize.albumArtistList(albumArtistsRes, server);
params.successCallback(
albumArtists?.items || [],
albumArtistsRes?.totalRecordCount || undefined,
albumArtistsRes?.totalRecordCount || 0,
);
},
rowCount: undefined,
@ -379,14 +379,14 @@ export const AlbumArtistListHeaderFilters = ({
</DropdownMenu>
</Group>
<Group>
<DropdownMenu position="bottom-start">
<DropdownMenu position="bottom-end">
<DropdownMenu.Target>
<Button
compact
size="md"
variant="subtle"
>
<RiSettings2Fill size="1.3rem" />
<RiSettings3Fill size="1.3rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>

8
src/renderer/features/artists/components/album-artist-list-header.tsx
View file

@ -108,7 +108,7 @@ export const AlbumArtistListHeader = ({
const albumArtists = api.normalize.albumArtistList(albumArtistsRes, server);
params.successCallback(
albumArtists?.items || [],
albumArtistsRes?.totalRecordCount || undefined,
albumArtistsRes?.totalRecordCount || 0,
);
},
rowCount: undefined,
@ -151,12 +151,10 @@ export const AlbumArtistListHeader = ({
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex
justify="space-between"
py="1rem"
w="100%"
>
<LibraryHeaderBar>
<Group noWrap>
<LibraryHeaderBar.Title>Album Artists</LibraryHeaderBar.Title>
</Group>
<LibraryHeaderBar.Title>Album Artists</LibraryHeaderBar.Title>
<Paper
fw="600"
px="1rem"

10
src/renderer/features/context-menu/context-menu-items.tsx
View file

@ -21,6 +21,16 @@ export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ children: true, disabled: false, id: 'setRating' },
];
export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' },
{ id: 'playLast' },
{ divider: true, id: 'playNext' },
{ divider: true, id: 'addToPlaylist' },
{ id: 'addToFavorites' },
{ divider: true, id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
];
export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'play' },
{ id: 'playLast' },

70
src/renderer/features/context-menu/context-menu-provider.tsx
View file

@ -40,7 +40,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useDeletePlaylist } from '/@/renderer/features/playlists';
import { useRemoveFromPlaylist } from '/@/renderer/features/playlists/mutations/remove-from-playlist-mutation';
import { useCreateFavorite, useDeleteFavorite, useUpdateRating } from '/@/renderer/features/shared';
import { useCurrentServer } from '/@/renderer/store';
import { useAuthStore, useCurrentServer } from '/@/renderer/store';
import { Play } from '/@/renderer/types';
type ContextMenuContextProps = {
@ -65,6 +65,10 @@ const ContextMenuContext = createContext<ContextMenuContextProps>({
},
});
const JELLYFIN_IGNORED_MENU_ITEMS: ContextMenuItemType[] = ['setRating'];
// const NAVIDROME_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
// const SUBSONIC_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
export interface ContextMenuProviderProps {
children: React.ReactNode;
}
@ -92,6 +96,13 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const openContextMenu = (args: OpenContextMenuProps) => {
const { xPos, yPos, menuItems, data, type, tableRef, dataNodes, context } = args;
const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type;
let validMenuItems = menuItems;
if (serverType === ServerType.JELLYFIN) {
validMenuItems = menuItems.filter((item) => !JELLYFIN_IGNORED_MENU_ITEMS.includes(item.id));
}
// If the context menu dimension can't be automatically calculated, calculate it manually
// This is a hacky way since resize observer may not automatically recalculate when not rendered
const menuHeight = menuRect.height || (menuItems.length + 1) * 50;
@ -107,7 +118,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
context,
data,
dataNodes,
menuItems,
menuItems: validMenuItems,
tableRef,
type,
xPos: calculatedXPos,
@ -187,8 +198,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
},
onSuccess: () => {
toast.success({
message: `${item.name} was successfully deleted`,
title: 'Playlist deleted',
message: `Playlist has been deleted`,
});
},
},
@ -269,9 +279,9 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
let nodesToUnfavorite: RowNode<any>[] = [];
if (ctx.dataNodes) {
nodesToUnfavorite = ctx.dataNodes.filter((item) => !item.data.userFavorite);
nodesToUnfavorite = ctx.dataNodes.filter((item) => item.data.userFavorite);
} else {
itemsToUnfavorite = ctx.data.filter((item) => !item.userFavorite);
itemsToUnfavorite = ctx.data.filter((item) => item.userFavorite);
}
const idsToUnfavorite = nodesToUnfavorite
@ -304,7 +314,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
if (ctx.dataNodes) {
for (const node of ctx.dataNodes) {
switch (node.data.type) {
switch (node.data.itemType) {
case LibraryItem.ALBUM:
albumId.push(node.data.id);
break;
@ -318,7 +328,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
}
} else {
for (const item of ctx.data) {
switch (item.type) {
switch (item.itemType) {
case LibraryItem.ALBUM:
albumId.push(item.id);
break;
@ -370,7 +380,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
onSuccess: () => {
toast.success({
message: `${songId.length} song(s) were removed from the playlist`,
title: 'Song(s) removed from playlist',
});
ctx.context?.tableRef?.current?.api?.refreshInfiniteCache();
closeAllModals();
@ -432,13 +441,24 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
items = ctx.data.filter((item) => item.serverId === serverId);
}
updateRatingMutation.mutate({
_serverId: serverId,
query: {
item: items,
rating,
updateRatingMutation.mutate(
{
_serverId: serverId,
query: {
item: items,
rating,
},
},
});
{
onSuccess: () => {
if (ctx.dataNodes) {
for (const node of ctx.dataNodes) {
node.setData({ ...node.data, userRating: rating });
}
}
},
},
);
}
},
[ctx.data, ctx.dataNodes, updateRatingMutation],
@ -625,17 +645,15 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<HoverCard.Dropdown>
<Stack spacing={0}>
{contextMenuItems[item.id].children?.map((child) => (
<>
<ContextMenuButton
key={`sub-${child.id}`}
disabled={child.disabled}
leftIcon={child.leftIcon}
rightIcon={child.rightIcon}
onClick={child.onClick}
>
{child.label}
</ContextMenuButton>
</>
<ContextMenuButton
key={`sub-${child.id}`}
disabled={child.disabled}
leftIcon={child.leftIcon}
rightIcon={child.rightIcon}
onClick={child.onClick}
>
{child.label}
</ContextMenuButton>
))}
</Stack>
</HoverCard.Dropdown>

1
src/renderer/features/home/routes/home-route.tsx
View file

@ -210,7 +210,6 @@ const HomeRoute = () => {
px="2rem"
sx={{
height: '100%',
maxWidth: '1920px',
width: '100%',
}}
>

35
src/renderer/features/now-playing/components/drawer-play-queue.tsx
View file

@ -1,6 +1,6 @@
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Stack } from '@mantine/core';
import { Box, Flex } from '@mantine/core';
import { PlayQueueListControls } from './play-queue-list-controls';
import { Song } from '/@/renderer/api/types';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
@ -9,18 +9,29 @@ export const DrawerPlayQueue = () => {
const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
return (
<Stack
<Flex
direction="column"
h="100%"
spacing={0}
sx={{
borderTopLeftRadius: '5px',
borderTopRightRadius: '5px',
}}
>
<PlayQueue
ref={queueRef}
type="sideQueue"
/>
<PlayQueueListControls
tableRef={queueRef}
type="sideQueue"
/>
</Stack>
<Box
bg="var(--main-bg)"
sx={{ borderTopLeftRadius: '5px', borderTopRightRadius: '5px' }}
>
<PlayQueueListControls
tableRef={queueRef}
type="sideQueue"
/>
</Box>
<Flex h="100%">
<PlayQueue
ref={queueRef}
type="sideQueue"
/>
</Flex>
</Flex>
);
};

17
src/renderer/features/now-playing/components/now-playing-header.tsx
View file

@ -1,20 +1,15 @@
import { Group } from '@mantine/core';
import { PageHeader, TextTitle } from '/@/renderer/components';
import { PageHeader } from '/@/renderer/components';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
export const NowPlayingHeader = () => {
// const currentSong = useCurrentSong();
// const theme = useTheme();
return (
<PageHeader>
<Group p="1rem">
<TextTitle
order={2}
weight={700}
>
Queue
</TextTitle>
</Group>
<PageHeader backgroundColor="var(--titlebar-bg)">
<LibraryHeaderBar>
<LibraryHeaderBar.Title>Queue</LibraryHeaderBar.Title>
</LibraryHeaderBar>
</PageHeader>
);
};

7
src/renderer/features/now-playing/components/play-queue-list-controls.tsx
View file

@ -138,13 +138,16 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
</Button>
</Group>
<Group>
<Popover transition="fade">
<Popover
position="top-end"
transition="fade"
>
<Popover.Target>
<Button
compact
size="md"
tooltip={{ label: 'Configure' }}
variant="default"
variant="subtle"
>
<RiListSettingsLine size="1.1rem" />
</Button>

51
src/renderer/features/now-playing/components/play-queue.tsx
View file

@ -8,11 +8,7 @@ import type {
} from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import '@ag-grid-community/styles/ag-theme-alpine.css';
import {
VirtualGridAutoSizerContainer,
VirtualGridContainer,
getColumnDefs,
} from '/@/renderer/components';
import { VirtualGridAutoSizerContainer, getColumnDefs } from '/@/renderer/components';
import {
useAppStoreActions,
useCurrentSong,
@ -190,29 +186,28 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<VirtualGridContainer>
<VirtualGridAutoSizerContainer>
<VirtualTable
ref={mergedRef}
alwaysShowHorizontalScroll
rowDragEntireRow
rowDragMultiRow
autoFitColumns={tableConfig.autoFit}
columnDefs={columnDefs}
getRowId={(data) => data.data.uniqueId}
rowClassRules={rowClassRules}
rowData={queue}
rowHeight={tableConfig.rowHeight || 40}
onCellDoubleClicked={handleDoubleClick}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onDragStarted={handleDragStart}
onGridReady={handleGridReady}
onGridSizeChanged={handleGridSizeChange}
onRowDragEnd={handleDragEnd}
/>
</VirtualGridAutoSizerContainer>
</VirtualGridContainer>
<VirtualGridAutoSizerContainer>
<VirtualTable
ref={mergedRef}
alwaysShowHorizontalScroll
rowDragEntireRow
rowDragMultiRow
autoFitColumns={tableConfig.autoFit}
columnDefs={columnDefs}
getRowId={(data) => data.data.uniqueId}
rowBuffer={50}
rowClassRules={rowClassRules}
rowData={queue}
rowHeight={tableConfig.rowHeight || 40}
onCellDoubleClicked={handleDoubleClick}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onDragStarted={handleDragStart}
onGridReady={handleGridReady}
onGridSizeChanged={handleGridSizeChange}
onRowDragEnd={handleDragEnd}
/>
</VirtualGridAutoSizerContainer>
</ErrorBoundary>
);
});

55
src/renderer/features/now-playing/components/sidebar-play-queue.tsx
View file

@ -1,58 +1,29 @@
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex } from '@mantine/core';
import { Stack } from '@mantine/core';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import styled from 'styled-components';
import { PlayQueueListControls } from './play-queue-list-controls';
import { Song } from '/@/renderer/api/types';
const BackgroundImageOverlay = styled.div`
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 30%), var(--background-noise);
`;
import { PageHeader, Paper, VirtualGridContainer } from '/@/renderer/components';
export const SidebarPlayQueue = () => {
const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
return (
<>
<Flex
bg="var(--titlebar-bg)"
h="65px"
sx={{ position: 'relative' }}
w="100%"
>
<BackgroundImageOverlay />
<Flex
h="100%"
mr="160px"
sx={{
WebkitAppRegion: 'drag',
background: 'var(--titlebar-bg)',
}}
w="100%"
/>
</Flex>
<Flex
direction="column"
h="calc(100% - 65px)"
sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
w="100%"
>
<PlayQueue
ref={queueRef}
type="sideQueue"
/>
<VirtualGridContainer>
<Stack>
<PageHeader backgroundColor="var(--titlebar-bg)" />
</Stack>
<Paper>
<PlayQueueListControls
tableRef={queueRef}
type="sideQueue"
/>
</Flex>
</>
</Paper>
<PlayQueue
ref={queueRef}
type="sideQueue"
/>
</VirtualGridContainer>
);
};

23
src/renderer/features/now-playing/routes/now-playing-route.tsx
View file

@ -1,33 +1,30 @@
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Stack } from '@mantine/core';
import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
import type { Song } from '/@/renderer/api/types';
import { AnimatedPage } from '/@/renderer/features/shared';
import { Paper, VirtualGridContainer } from '/@/renderer/components';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
const NowPlayingRoute = () => {
const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
return (
<AnimatedPage>
<Stack
h="100%"
spacing={0}
>
<VirtualGridContainer>
<NowPlayingHeader />
<PlayQueue
ref={queueRef}
type="nowPlaying"
/>
<Flex sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
<Paper sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
<PlayQueueListControls
tableRef={queueRef}
type="nowPlaying"
/>
</Flex>
</Stack>
</Paper>
<PlayQueue
ref={queueRef}
type="nowPlaying"
/>
</VirtualGridContainer>
</AnimatedPage>
);
};

1
src/renderer/features/player/components/center-controls.tsx
View file

@ -227,7 +227,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
onChangeEnd={(e) => {
handleSeekSlider(e);
setIsSeeking(false);
console.log('end');
}}
/>
</SliderWrapper>

5
src/renderer/features/player/components/playerbar-slider.tsx
View file

@ -33,6 +33,11 @@ export const PlayerbarSlider = ({ ...props }: SliderProps) => {
opacity: 0,
width: '1rem',
},
track: {
'&::before': {
backgroundColor: 'var(--playerbar-slider-track-bg)',
},
},
}}
{...props}
/>

36
src/renderer/features/player/components/right-controls.tsx
View file

@ -13,7 +13,6 @@ import {
useCurrentServer,
useCurrentSong,
useMuted,
useSetQueueFavorite,
useSidebarStore,
useVolume,
} from '/@/renderer/store';
@ -36,24 +35,16 @@ export const RightControls = () => {
const updateRatingMutation = useUpdateRating();
const addToFavoritesMutation = useCreateFavorite();
const removeFromFavoritesMutation = useDeleteFavorite();
const setFavorite = useSetQueueFavorite();
const handleAddToFavorites = () => {
if (!currentSong) return;
addToFavoritesMutation.mutate(
{
query: {
id: [currentSong.id],
type: LibraryItem.SONG,
},
addToFavoritesMutation.mutate({
query: {
id: [currentSong.id],
type: LibraryItem.SONG,
},
{
onSuccess: () => {
setFavorite([currentSong.id], true);
},
},
);
});
};
const handleUpdateRating = (rating: number) => {
@ -83,19 +74,12 @@ export const RightControls = () => {
const handleRemoveFromFavorites = () => {
if (!currentSong) return;
removeFromFavoritesMutation.mutate(
{
query: {
id: [currentSong.id],
type: LibraryItem.SONG,
},
removeFromFavoritesMutation.mutate({
query: {
id: [currentSong.id],
type: LibraryItem.SONG,
},
{
onSuccess: () => {
setFavorite([currentSong.id], false);
},
},
);
});
};
const handleToggleFavorite = () => {

20
src/renderer/features/player/hooks/use-right-controls.ts
View file

@ -34,15 +34,25 @@ export const useRightControls = () => {
};
const handleVolumeWheel = (e: WheelEvent<HTMLDivElement>) => {
let newVolume;
let volumeToSet;
if (e.deltaY > 0) {
newVolume = volume - volumeWheelStep;
const newVolumeLessThanZero = volume - volumeWheelStep < 0;
if (newVolumeLessThanZero) {
volumeToSet = 0;
} else {
volumeToSet = volume - volumeWheelStep;
}
} else {
newVolume = volume + volumeWheelStep;
const newVolumeGreaterThanHundred = volume + volumeWheelStep > 100;
if (newVolumeGreaterThanHundred) {
volumeToSet = 100;
} else {
volumeToSet = volume + volumeWheelStep;
}
}
mpvPlayer.volume(newVolume);
setVolume(newVolume);
mpvPlayer.volume(volumeToSet);
setVolume(volumeToSet);
};
const handleMute = () => {

2
src/renderer/features/playlists/components/create-playlist-form.tsx
View file

@ -63,7 +63,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
toast.error({ message: err.message, title: 'Error creating playlist' });
},
onSuccess: () => {
toast.success({ message: 'Playlist created successfully' });
toast.success({ message: `Playlist has been created` });
onCancel();
},
},

26
src/renderer/features/playlists/components/playlist-detail-content.tsx
View file

@ -28,7 +28,10 @@ import {
VirtualTable,
} from '/@/renderer/components';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { PLAYLIST_SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import {
PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
} from '/@/renderer/features/context-menu/context-menu-items';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { UpdatePlaylistForm } from '/@/renderer/features/playlists/components/update-playlist-form';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
@ -44,7 +47,6 @@ const ContentContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
max-width: 1920px;
padding: 1rem 2rem 5rem;
overflow: hidden;
@ -90,11 +92,17 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
[page.table.columns],
);
const handleContextMenu = useHandleTableContextMenu(
LibraryItem.SONG,
PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
{ playlistId },
);
const contextMenuItems = useMemo(() => {
if (detailQuery?.data?.rules) {
return SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
}
return PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
}, [detailQuery?.data?.rules]);
const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, contextMenuItems, {
playlistId,
});
const playlistSongData = useMemo(
() => playlistSongsQueryInfinite.data?.pages.flatMap((p) => p.items),
@ -117,8 +125,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
},
onSuccess: () => {
toast.success({
message: `${detailQuery?.data?.name} was successfully deleted`,
title: 'Playlist deleted',
message: `Playlist has been deleted`,
});
closeAllModals();
navigate(AppRoute.PLAYLISTS);
@ -203,7 +210,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
<ContentContainer>
<Group
ref={intersectRef}
maw="1920px"
p="1rem"
position="apart"
>

17
src/renderer/features/playlists/components/playlist-detail-header.tsx
View file

@ -1,7 +1,7 @@
import { forwardRef, Fragment, Ref } from 'react';
import { Group, Stack } from '@mantine/core';
import { useParams } from 'react-router';
import { Text } from '/@/renderer/components';
import { Badge, Text } from '/@/renderer/components';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { LibraryHeader } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
@ -35,6 +35,8 @@ export const PlaylistDetailHeader = forwardRef(
},
];
const isSmartPlaylist = detailQuery?.data?.rules;
return (
<Stack>
<LibraryHeader
@ -46,13 +48,24 @@ export const PlaylistDetailHeader = forwardRef(
title={detailQuery?.data?.name || ''}
>
<Stack>
<Group>
<Group spacing="sm">
{metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text $noSelect>•</Text>}
<Text $secondary={item.secondary}>{item.value}</Text>
</Fragment>
))}
{isSmartPlaylist && (
<>
<Text $noSelect>•</Text>
<Badge
radius="sm"
size="md"
>
Smart Playlist
</Badge>
</>
)}
</Group>
<Text lineClamp={3}>{detailQuery?.data?.description}</Text>
</Stack>

123
src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
View file

@ -26,7 +26,10 @@ import { useQueryClient } from '@tanstack/react-query';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { PLAYLIST_SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import {
PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
} from '/@/renderer/features/context-menu/context-menu-items';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import {
LibraryItem,
@ -40,6 +43,7 @@ import { useParams } from 'react-router';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
interface PlaylistDetailContentProps {
tableRef: MutableRefObject<AgGridReactType | null>;
@ -57,6 +61,8 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
};
}, [page?.table.id, playlistId]);
const detailQuery = usePlaylistDetail({ id: playlistId });
const p = usePlaylistDetailTablePagination(playlistId);
const pagination = {
currentPage: p?.currentPage || 0,
@ -115,12 +121,12 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(pagination.scrollOffset, 'top');
params.api?.ensureIndexVisible(pagination.scrollOffset, 'top');
},
[filters, pagination.scrollOffset, playlistId, queryClient, server],
);
@ -135,9 +141,13 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
try {
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setPagination(playlistId, {
itemsPerPage: event.api.paginationGetPageSize(),
@ -185,11 +195,18 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
setPagination(playlistId, { scrollOffset });
};
const handleContextMenu = useHandleTableContextMenu(
LibraryItem.SONG,
PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
{ playlistId, tableRef },
);
const contextMenuItems = useMemo(() => {
if (detailQuery?.data?.rules) {
return SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
}
return PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
}, [detailQuery?.data?.rules]);
const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, contextMenuItems, {
playlistId,
tableRef,
});
const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
if (!e.data) return;
@ -200,45 +217,49 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
};
return (
<VirtualGridAutoSizerContainer>
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
autoFitColumns={page.table.autoFit}
columnDefs={columnDefs}
getRowId={(data) => data.data.uniqueId}
infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 1}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={pagination.itemsPerPage || 100}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
onBodyScrollEnd={handleScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
id={playlistId}
pagination={pagination}
setIdPagination={setPagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
</VirtualGridAutoSizerContainer>
<>
<VirtualGridAutoSizerContainer>
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
autoFitColumns={page.table.autoFit}
columnDefs={columnDefs}
getRowId={(data) => data.data.uniqueId}
infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={pagination.itemsPerPage || 100}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
onBodyScrollEnd={handleScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
</VirtualGridAutoSizerContainer>
{isPaginationEnabled && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
id={playlistId}
pagination={pagination}
setIdPagination={setPagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
)}
</>
);
};

434
src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx Normal file
View file

@ -0,0 +1,434 @@
import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
import { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group, Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import {
RiSortAsc,
RiSortDesc,
RiMoreFill,
RiSettings3Fill,
RiPlayFill,
RiAddCircleFill,
RiAddBoxFill,
RiEditFill,
RiDeleteBinFill,
RiRefreshLine,
} from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { LibraryItem, PlaylistSongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
import {
DropdownMenu,
SONG_TABLE_COLUMNS,
Button,
Slider,
MultiSelect,
Switch,
Text,
} from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useContainerQuery } from '/@/renderer/hooks';
import {
useCurrentServer,
SongListFilter,
usePlaylistDetailStore,
useSetPlaylistDetailFilters,
useSetPlaylistDetailTable,
useSetPlaylistStore,
useSetPlaylistTablePagination,
} from '/@/renderer/store';
import { ListDisplayType, ServerType, Play, TableColumn } from '/@/renderer/types';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { useParams } from 'react-router';
const FILTERS = {
jellyfin: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
],
navidrome: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
{ defaultOrder: SortOrder.ASC, name: 'Id', value: SongListSort.ID },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
interface PlaylistDetailSongListHeaderFiltersProps {
handleToggleShowQueryBuilder: () => void;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const PlaylistDetailSongListHeaderFilters = ({
tableRef,
handleToggleShowQueryBuilder,
}: PlaylistDetailSongListHeaderFiltersProps) => {
const { playlistId } = useParams() as { playlistId: string };
const queryClient = useQueryClient();
const server = useCurrentServer();
const setPage = useSetPlaylistStore();
const setFilter = useSetPlaylistDetailFilters();
const page = usePlaylistDetailStore();
const filters: Partial<PlaylistSongListQuery> = {
sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
};
const detailQuery = usePlaylistDetail({ id: playlistId });
const isSmartPlaylist = detailQuery.data?.rules;
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
const setPagination = useSetPlaylistTablePagination();
const setTable = useSetPlaylistDetailTable();
const sortByLabel =
(server?.type &&
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
const handleItemSize = (e: number) => {
setTable({ rowHeight: e });
};
const handleFilterChange = useCallback(
async (filters: SongListFilter) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
id: playlistId,
limit,
startIndex,
...filters,
});
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getPlaylistSongList({
query: {
id: playlistId,
limit,
startIndex,
...filters,
},
server,
signal,
}),
{ cacheTime: 1000 * 60 * 1 },
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
if (page.display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 });
}
},
[tableRef, page.display, server, playlistId, queryClient, setPagination],
);
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
handleFilterChange({ ...page?.table.id[playlistId].filter, ...filters });
};
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
(f) => f.value === e.currentTarget.value,
)?.defaultOrder;
const updatedFilters = setFilter(playlistId, {
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
handleFilterChange(updatedFilters);
},
[handleFilterChange, playlistId, server?.type, setFilter],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
handleFilterChange(updatedFilters);
}, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
setPage({ detail: { ...page, display: e.currentTarget.value as ListDisplayType } });
},
[page, setPage],
);
const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns;
if (values.length === 0) {
return setTable({
columns: [],
});
}
// If adding a column
if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 };
setTable({ columns: [...existingColumns, newColumn] });
} else {
// If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column));
setTable({ columns: newColumns });
}
return tableRef.current?.api.sizeColumnsToFit();
};
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked });
if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit();
}
};
const handlePlay = async (playType: Play) => {
handlePlayQueueAdd?.({
byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
play: playType,
});
};
return (
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
size="md"
variant="subtle"
>
{sortByLabel}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
<DropdownMenu.Item
key={`filter-${filter.name}`}
$isActive={filter.value === filters.sortBy}
value={filter.value}
onClick={handleSetSortBy}
>
{filter.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
fw="600"
size="md"
variant="subtle"
onClick={handleToggleSortOrder}
>
{cq.isSm ? (
sortOrderLabel
) : (
<>
{filters.sortOrder === SortOrder.ASC ? (
<RiSortAsc size="1.3rem" />
) : (
<RiSortDesc size="1.3rem" />
)}
</>
)}
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
size="md"
variant="subtle"
>
<RiMoreFill size="1.3rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item
icon={<RiPlayFill />}
onClick={() => handlePlay(Play.NOW)}
>
Play
</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiAddBoxFill />}
onClick={() => handlePlay(Play.LAST)}
>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiAddCircleFill />}
onClick={() => handlePlay(Play.NEXT)}
>
Add to queue next
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item
disabled
icon={<RiEditFill />}
onClick={() => handlePlay(Play.LAST)}
>
Edit playlist
</DropdownMenu.Item>
<DropdownMenu.Item
disabled
icon={<RiDeleteBinFill />}
onClick={() => handlePlay(Play.LAST)}
>
Delete playlist
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item
icon={<RiRefreshLine />}
onClick={handleRefresh}
>
Refresh
</DropdownMenu.Item>
{server?.type === ServerType.NAVIDROME && !isSmartPlaylist && (
<>
<DropdownMenu.Divider />
<DropdownMenu.Item
$danger
onClick={handleToggleShowQueryBuilder}
>
Toggle smart playlist editor
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>
<Group>
<DropdownMenu position="bottom-end">
<DropdownMenu.Target>
<Button
compact
size="md"
variant="subtle"
>
<RiSettings3Fill size="1.3rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
onClick={handleSetViewType}
>
Table
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType}
>
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={page.table.rowHeight}
label={null}
max={100}
min={25}
onChangeEnd={handleItemSize}
/>
</DropdownMenu.Item>
{(page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED) && (
<>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>
</Stack>
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>
</Flex>
);
};

419
src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
View file

@ -1,240 +1,31 @@
import { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group, Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
import { RiArrowDownSLine, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
import { Stack } from '@mantine/core';
import { MutableRefObject } from 'react';
import { useParams } from 'react-router';
import styled from 'styled-components';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
LibraryItem,
PlaylistSongListQuery,
ServerType,
SongListSort,
SortOrder,
} from '/@/renderer/api/types';
import {
Button,
DropdownMenu,
MultiSelect,
PageHeader,
Slider,
SONG_TABLE_COLUMNS,
Switch,
Text,
TextTitle,
} from '/@/renderer/components';
import { LibraryItem } from '/@/renderer/api/types';
import { Badge, PageHeader, Paper, SpinnerIcon } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { useContainerQuery } from '/@/renderer/hooks';
import {
useCurrentServer,
usePlaylistDetailStore,
useSetPlaylistTablePagination,
useSetPlaylistDetailTable,
SongListFilter,
useSetPlaylistDetailFilters,
useSetPlaylistStore,
} from '/@/renderer/store';
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
const FILTERS = {
jellyfin: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
],
navidrome: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
{ defaultOrder: SortOrder.ASC, name: 'Id', value: SongListSort.ID },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
const HeaderItems = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`;
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { Play } from '/@/renderer/types';
interface PlaylistDetailHeaderProps {
handleToggleShowQueryBuilder: () => void;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const PlaylistDetailSongListHeader = ({
tableRef,
itemCount,
handleToggleShowQueryBuilder,
}: PlaylistDetailHeaderProps) => {
const { playlistId } = useParams() as { playlistId: string };
const queryClient = useQueryClient();
const server = useCurrentServer();
const setPage = useSetPlaylistStore();
const setFilter = useSetPlaylistDetailFilters();
const page = usePlaylistDetailStore();
const filters: Partial<PlaylistSongListQuery> = {
sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
};
const detailQuery = usePlaylistDetail({ id: playlistId });
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
const setPagination = useSetPlaylistTablePagination();
const setTable = useSetPlaylistDetailTable();
const sortByLabel =
(server?.type &&
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
const handleItemSize = (e: number) => {
setTable({ rowHeight: e });
};
const handleFilterChange = useCallback(
async (filters: SongListFilter) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
id: playlistId,
limit,
startIndex,
...filters,
});
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getPlaylistSongList({
query: {
id: playlistId,
limit,
startIndex,
...filters,
},
server,
signal,
}),
{ cacheTime: 1000 * 60 * 1 },
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || undefined);
},
rowCount: undefined,
};
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
if (page.display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 });
}
},
[tableRef, page.display, server, playlistId, queryClient, setPagination],
);
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
(f) => f.value === e.currentTarget.value,
)?.defaultOrder;
const updatedFilters = setFilter(playlistId, {
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
handleFilterChange(updatedFilters);
},
[handleFilterChange, playlistId, server?.type, setFilter],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
handleFilterChange(updatedFilters);
}, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
setPage({ detail: { ...page, display: e.currentTarget.value as ListDisplayType } });
},
[page, setPage],
);
const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns;
if (values.length === 0) {
return setTable({
columns: [],
});
}
// If adding a column
if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 };
setTable({ columns: [...existingColumns, newColumn] });
} else {
// If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column));
setTable({ columns: newColumns });
}
return tableRef.current?.api.sizeColumnsToFit();
};
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked });
if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit();
}
};
const handlePlay = async (playType: Play) => {
handlePlayQueueAdd?.({
byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
@ -242,176 +33,34 @@ export const PlaylistDetailSongListHeader = ({
});
};
const playButtonBehavior = usePlayButtonBehavior();
if (detailQuery.isLoading) return null;
const isSmartPlaylist = detailQuery?.data?.rules;
return (
<PageHeader p="1rem">
<HeaderItems ref={cq.ref}>
<Flex
align="center"
gap="md"
justify="center"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
px={0}
rightIcon={<RiArrowDownSLine size={15} />}
size="xl"
variant="subtle"
>
<TextTitle
order={2}
weight={700}
>
{detailQuery?.data?.name}
</TextTitle>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
onClick={handleSetViewType}
>
Table
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType}
>
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={page.table.rowHeight}
label={null}
max={100}
min={25}
onChangeEnd={handleItemSize}
/>
</DropdownMenu.Item>
{(page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED) && (
<>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>
</Stack>
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
{sortByLabel}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
<DropdownMenu.Item
key={`filter-${filter.name}`}
$isActive={filter.value === filters.sortBy}
value={filter.value}
onClick={handleSetSortBy}
>
{filter.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
<Stack spacing={0}>
<PageHeader backgroundColor="var(--titlebar-bg)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
<Paper
fw="600"
variant="subtle"
onClick={handleToggleSortOrder}
px="1rem"
py="0.3rem"
radius="sm"
>
{cq.isMd ? (
sortOrderLabel
) : (
<>
{filters.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} />
) : (
<RiSortDesc size={15} />
)}
</>
)}
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
Add to queue next
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item
disabled
onClick={() => handlePlay(Play.LAST)}
>
Edit playlist
</DropdownMenu.Item>
<DropdownMenu.Item
disabled
onClick={() => handlePlay(Play.LAST)}
>
Delete playlist
</DropdownMenu.Item>
{server?.type === ServerType.NAVIDROME && !detailQuery?.data?.rules && (
<>
<DropdownMenu.Divider />
<DropdownMenu.Item
$danger
onClick={handleToggleShowQueryBuilder}
>
Toggle smart playlist editor
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>
</HeaderItems>
</PageHeader>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Paper>
{isSmartPlaylist && <Badge size="lg">Smart playlist</Badge>}
</LibraryHeaderBar>
</PageHeader>
<Paper p="1rem">
<PlaylistDetailSongListHeaderFilters
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
tableRef={tableRef}
/>
</Paper>
</Stack>
);
};

2
src/renderer/features/playlists/components/playlist-list-content.tsx
View file

@ -93,7 +93,7 @@ export const PlaylistListContent = ({ tableRef, itemCount }: PlaylistListContent
);
const playlists = api.normalize.playlistList(playlistsRes, server);
params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount);
params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};

4
src/renderer/features/playlists/components/playlist-list-header-filters.tsx
View file

@ -103,7 +103,7 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
);
const playlists = api.normalize.playlistList(playlistsRes, server);
params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount);
params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
@ -257,7 +257,7 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
</DropdownMenu>
</Group>
<Group>
<DropdownMenu position="bottom-start">
<DropdownMenu position="bottom-end">
<DropdownMenu.Target>
<Button
compact

11
src/renderer/features/playlists/components/playlist-list-header.tsx
View file

@ -1,5 +1,5 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group, Stack } from '@mantine/core';
import { Flex, Stack } from '@mantine/core';
import { MutableRefObject } from 'react';
import { PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
@ -20,14 +20,9 @@ export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderPr
spacing={0}
>
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex
justify="space-between"
py="1rem"
>
<Flex justify="space-between">
<LibraryHeaderBar>
<Group>
<LibraryHeaderBar.Title>Playlists</LibraryHeaderBar.Title>
</Group>
<LibraryHeaderBar.Title>Playlists</LibraryHeaderBar.Title>
<Paper
fw="600"
px="1rem"

19
src/renderer/features/playlists/components/playlist-query-builder.tsx
View file

@ -359,7 +359,7 @@ export const PlaylistQueryBuilder = forwardRef(
return (
<MotionFlex
direction="column"
h="calc(100% - 3rem)"
h="calc(100% - 2.5rem)"
justify="space-between"
>
<ScrollArea
@ -393,11 +393,12 @@ export const PlaylistQueryBuilder = forwardRef(
<Group
noWrap
align="flex-end"
p="1rem"
m="1rem"
position="apart"
>
<Group
noWrap
spacing="sm"
w="100%"
>
<Select
@ -405,7 +406,7 @@ export const PlaylistQueryBuilder = forwardRef(
data={sortOptions}
label="Sort"
maxWidth="20%"
width={125}
width={150}
{...extraFiltersForm.getInputProps('sortBy')}
/>
<Select
@ -432,7 +433,10 @@ export const PlaylistQueryBuilder = forwardRef(
/>
</Group>
{onSave && onSaveAs && (
<Group noWrap>
<Group
noWrap
spacing="sm"
>
<Button
loading={isSaving}
variant="filled"
@ -453,12 +457,7 @@ export const PlaylistQueryBuilder = forwardRef(
<DropdownMenu.Dropdown>
<DropdownMenu.Item
$danger
rightSection={
<RiSaveLine
color="var(--danger-color)"
size={15}
/>
}
icon={<RiSaveLine color="var(--danger-color)" />}
onClick={handleSave}
>
Save and replace

2
src/renderer/features/playlists/components/save-as-playlist-form.tsx
View file

@ -35,7 +35,7 @@ export const SaveAsPlaylistForm = ({ body, onSuccess, onCancel }: SaveAsPlaylist
toast.error({ message: err.message, title: 'Error creating playlist' });
},
onSuccess: (data) => {
toast.success({ message: 'Playlist created successfully' });
toast.success({ message: `Playlist has been created` });
onSuccess(data);
onCancel();
},

2
src/renderer/features/playlists/components/update-playlist-form.tsx
View file

@ -43,7 +43,7 @@ export const UpdatePlaylistForm = ({ users, query, body, onCancel }: UpdatePlayl
toast.error({ message: err.message, title: 'Error updating playlist' });
},
onSuccess: () => {
toast.success({ message: 'Playlist updated successfully' });
toast.success({ message: `Playlist has been saved` });
onCancel();
},
},

32
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
View file

@ -15,8 +15,9 @@ import { AppRoute } from '/@/renderer/router/routes';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { Button, Paper, Text, toast, VirtualGridContainer } from '/@/renderer/components';
import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
import { useCurrentServer } from '/@/renderer/store';
import { ServerType, SongListSort } from '/@/renderer/api/types';
import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
const PlaylistDetailSongListRoute = () => {
const navigate = useNavigate();
@ -57,7 +58,7 @@ const PlaylistDetailSongListRoute = () => {
},
{
onSuccess: (data) => {
toast.success({ message: 'Smart playlist saved' });
toast.success({ message: 'Playlist has been saved' });
navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data?.id || '' }), {
replace: true,
});
@ -135,11 +136,36 @@ const PlaylistDetailSongListRoute = () => {
setIsQueryBuilderExpanded(true);
};
const page = usePlaylistDetailStore();
const filters: Partial<PlaylistSongListQuery> = {
sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
};
const itemCountCheck = usePlaylistSongList(
{
id: playlistId,
limit: 1,
startIndex: 0,
...filters,
},
{
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
);
const itemCount =
itemCountCheck.data?.totalRecordCount === null
? undefined
: itemCountCheck.data?.totalRecordCount;
return (
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
<VirtualGridContainer>
<PlaylistDetailSongListHeader
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
itemCount={itemCount}
tableRef={tableRef}
/>
<AnimatePresence

29
src/renderer/features/playlists/utils.ts
View file

@ -1,4 +1,5 @@
import { nanoid } from 'nanoid/non-secure';
import { NDSongQueryFields } from '/@/renderer/api/navidrome.types';
import { QueryBuilderGroup } from '/@/renderer/types';
export const parseQueryBuilderChildren = (groups: QueryBuilderGroup[], data: any[]) => {
@ -53,15 +54,24 @@ export const convertQueryGroupToNDQuery = (filter: QueryBuilderGroup) => {
for (const rule of filter.rules) {
if (rule.field && rule.operator) {
const [table] = rule.field.split('.');
const [field] = rule.field.split('.');
const operator = rule.operator;
const value = rule.value;
let value = rule.value;
switch (table) {
const booleanFields = NDSongQueryFields.filter(
(queryField) => queryField.type === 'boolean',
).map((field) => field.value);
// Convert string values to boolean
if (booleanFields.includes(field)) {
value = value === 'true';
}
switch (field) {
default:
rootQuery[rootQueryType].push({
[operator]: {
[table]: value,
[field]: value,
},
});
break;
@ -94,7 +104,16 @@ export const convertNDQueryToQueryGroup = (query: Record<string, any>) => {
} else {
const operator = Object.keys(rule)[0];
const field = Object.keys(rule[operator])[0];
const value = rule[operator][field];
let value = rule[operator][field];
const booleanFields = NDSongQueryFields.filter(
(queryField) => queryField.type === 'boolean',
).map((field) => field.value);
// Convert boolean values to string
if (booleanFields.includes(field)) {
value = value.toString();
}
rootGroup.rules.push({
field,

4
src/renderer/features/servers/components/add-server-form.tsx
View file

@ -79,10 +79,10 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
closeAllModals();
if (serverList.length === 0) {
toast.success({ message: 'Server added, reloading...' });
toast.success({ message: 'Server has been added, reloading...' });
setTimeout(() => window.location.reload(), 2000);
} else {
toast.success({ message: 'Server added' });
toast.success({ message: 'Server has been added' });
}
} catch (err: any) {
setIsLoading(false);

2
src/renderer/features/servers/components/edit-server-form.tsx
View file

@ -73,7 +73,7 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
updateServer(server.id, serverItem);
setCurrentServer(serverItem);
toast.success({ message: 'Server updated' });
toast.success({ message: 'Server has been updated' });
} catch (err: any) {
setIsLoading(false);
return toast.error({ message: err?.message });

1
src/renderer/features/shared/components/library-header-bar.tsx
View file

@ -15,6 +15,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
h="100%"
px="1rem"
spacing="md"
w="100%"
>
{children}
</Group>

12
src/renderer/features/shared/components/library-header.tsx
View file

@ -90,12 +90,12 @@ export const LibraryHeader = forwardRef(
: cq.isLg
? '5.5rem'
: cq.isMd
? '4.5rem'
? '5rem'
: cq.isSm
? '3.5rem'
: '2rem';
? '4.5rem'
: '3rem';
const imageSize = cq.isLg ? 225 : cq.isMd ? 200 : cq.isSm ? 175 : 150;
const imageSize = cq.isLg ? 250 : cq.isMd ? 225 : cq.isSm ? 200 : 175;
return (
<HeaderContainer
@ -142,10 +142,10 @@ export const LibraryHeader = forwardRef(
</Text>
</Group>
<TextTitle
lh="5.1rem"
lh={1.15}
lineClamp={2}
mb="1rem"
overflow="hidden"
pb={cq.isXs ? '0' : cq.isSm ? '0.2rem' : '0.36rem'}
sx={{ fontSize: titleSize, overflow: 'hidden' }}
weight={900}
>

11
src/renderer/features/shared/mutations/create-favorite-mutation.ts
View file

@ -7,12 +7,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
import { SSAlbumArtistDetail, SSAlbumDetail } from '/@/renderer/api/subsonic.types';
import { FavoriteArgs, LibraryItem, RawFavoriteResponse, ServerType } from '/@/renderer/api/types';
import { MutationOptions } from '/@/renderer/lib/react-query';
import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
import {
useCurrentServer,
useSetAlbumListItemDataById,
useSetQueueFavorite,
} from '/@/renderer/store';
export const useCreateFavorite = (options?: MutationOptions) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const setAlbumListData = useSetAlbumListItemDataById();
const setQueueFavorite = useSetQueueFavorite();
return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
@ -24,6 +29,10 @@ export const useCreateFavorite = (options?: MutationOptions) => {
}
}
if (variables.query.type === LibraryItem.SONG) {
setQueueFavorite(variables.query.id, true);
}
// We only need to set if we're already on the album detail page
if (variables.query.type === LibraryItem.ALBUM && variables.query.id.length === 1) {
const queryKey = queryKeys.albums.detail(server?.id || '', { id: variables.query.id[0] });

11
src/renderer/features/shared/mutations/delete-favorite-mutation.ts
View file

@ -7,12 +7,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
import { SSAlbumArtistDetail, SSAlbumDetail } from '/@/renderer/api/subsonic.types';
import { FavoriteArgs, LibraryItem, RawFavoriteResponse, ServerType } from '/@/renderer/api/types';
import { MutationOptions } from '/@/renderer/lib/react-query';
import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
import {
useCurrentServer,
useSetAlbumListItemDataById,
useSetQueueFavorite,
} from '/@/renderer/store';
export const useDeleteFavorite = (options?: MutationOptions) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const setAlbumListData = useSetAlbumListItemDataById();
const setQueueFavorite = useSetQueueFavorite();
return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
@ -24,6 +29,10 @@ export const useDeleteFavorite = (options?: MutationOptions) => {
}
}
if (variables.query.type === LibraryItem.SONG) {
setQueueFavorite(variables.query.id, false);
}
// We only need to set if we're already on the album detail page
if (variables.query.type === LibraryItem.ALBUM && variables.query.id.length === 1) {
const queryKey = queryKeys.albums.detail(server?.id || '', { id: variables.query.id[0] });

4
src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
View file

@ -42,9 +42,10 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
return (
<NativeScrollArea
ref={scrollAreaRef}
noHeader
scrollBarOffset="0px"
scrollHideDelay={0}
style={{ margin: '0.5rem 0', padding: '0 1rem' }}
style={{ margin: '0.5rem 0', padding: '0 1.5rem' }}
>
<div
style={{
@ -68,7 +69,6 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
<Group
noWrap
className="sidebar-playlist-item"
pl="1rem"
pos="relative"
position="apart"
sx={{

114
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
import { Stack, Grid, Accordion, Center, Group, Divider, Box } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion } from 'framer-motion';
import { Button, MotionStack, Spinner, TextInput } from '/@/renderer/components';
import { Button, DropdownMenu, MotionStack, Spinner, TextInput } from '/@/renderer/components';
import {
RiAddFill,
RiAlbumFill,
@ -18,6 +18,7 @@ import {
RiHome5Fill,
RiHome5Line,
RiListUnordered,
RiMenuFill,
RiMusic2Fill,
RiMusic2Line,
RiSearchLine,
@ -38,10 +39,12 @@ import { fadeIn } from '/@/renderer/styles';
import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { useContainerQuery } from '/@/renderer/hooks';
const SidebarContainer = styled.div`
height: 100%;
max-height: calc(100vh - 85px); // Account for playerbar
max-height: calc(100vh - 149px); // Playerbar (90px), titlebar (65px)
user-select: none;
`;
@ -69,7 +72,13 @@ const SidebarImage = styled.img`
`;
const ActionsContainer = styled(Grid)`
height: 65px;
padding: 1rem;
-webkit-app-region: drag;
input {
-webkit-app-region: no-drag;
}
`;
export const Sidebar = () => {
@ -103,8 +112,59 @@ export const Sidebar = () => {
startIndex: 0,
});
const cq = useContainerQuery({ sm: 300 });
return (
<SidebarContainer>
<SidebarContainer ref={cq.ref}>
<ActionsContainer gutter="sm">
<Grid.Col span={cq.isSm ? 7 : 5}>
<TextInput
disabled
readOnly
icon={<RiSearchLine />}
placeholder="Search"
size="md"
/>
</Grid.Col>
<Grid.Col span={cq.isSm ? 5 : 7}>
<Group
grow
noWrap
spacing="sm"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p="0.5rem"
size="md"
variant="default"
>
<RiMenuFill size="1rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
</Grid.Col>
</ActionsContainer>
<Stack
h="100%"
justify="space-between"
@ -115,47 +175,6 @@ export const Sidebar = () => {
spacing={0}
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
>
<ActionsContainer
gutter="sm"
p={10}
>
<Grid.Col span={8}>
<TextInput
disabled
readOnly
icon={<RiSearchLine />}
placeholder="Search"
rightSectionWidth={90}
size="md"
/>
</Grid.Col>
<Grid.Col span={4}>
<Group
grow
spacing="sm"
>
<Button
px={5}
size="md"
sx={{ color: 'var(--titlebar-fg)' }}
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size={20} />
</Button>
<Button
px={5}
size="md"
sx={{ color: 'var(--titlebar-fg)' }}
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size={20} />
</Button>
</Group>
</Grid.Col>
</ActionsContainer>
<Stack spacing={0}>
<SidebarItem
px="1rem"
@ -253,11 +272,14 @@ export const Sidebar = () => {
</Accordion.Item>
</Accordion>
</Stack>
<Divider my="0.5rem" />
<Divider
mx="1rem"
my="0.5rem"
/>
<Group
position="apart"
pt="1rem"
px="1rem"
px="1.5rem"
>
<Group>
<Box

16
src/renderer/features/songs/components/jellyfin-song-filters.tsx
View file

@ -45,25 +45,25 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
},
];
const handleMinYearFilter = debounce((e: number | undefined) => {
if (e && (e < 1700 || e > 2300)) return;
const handleMinYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
minYear: e,
minYear: e === '' ? undefined : (e as number),
},
});
handleFilterChange(updatedFilters);
}, 500);
const handleMaxYearFilter = debounce((e: number | undefined) => {
if (e && (e < 1700 || e > 2300)) return;
const handleMaxYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({
jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
maxYear: e,
maxYear: e === '' ? undefined : (e as number),
},
});
handleFilterChange(updatedFilters);
@ -99,17 +99,17 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
<Group grow>
<NumberInput
required
defaultValue={filter.jfParams?.minYear}
label="From year"
max={2300}
min={1700}
value={filter.jfParams?.minYear}
onChange={handleMinYearFilter}
/>
<NumberInput
defaultValue={filter.jfParams?.maxYear}
label="To year"
max={2300}
min={1700}
value={filter.jfParams?.maxYear}
onChange={handleMaxYearFilter}
/>
</Group>

6
src/renderer/features/songs/components/navidrome-song-filters.tsx
View file

@ -46,11 +46,11 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
},
];
const handleYearFilter = debounce((e: number | undefined) => {
const handleYearFilter = debounce((e: number | string) => {
const updatedFilters = setFilters({
ndParams: {
...filter.ndParams,
year: e,
year: e === '' ? undefined : (e as number),
},
});
@ -80,7 +80,7 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
min={0}
value={filter.ndParams?.year}
width={50}
onChange={handleYearFilter}
onChange={(e) => handleYearFilter(e)}
/>
<Select
clearable

2
src/renderer/features/songs/components/song-list-content.tsx
View file

@ -87,7 +87,7 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};

76
src/renderer/features/songs/components/song-list-header-filters.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
import { useCallback, useMemo, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
import { IDatasource } from '@ag-grid-community/core';
import { Flex, Group, Stack } from '@mantine/core';
import { openModal } from '@mantine/modals';
@ -6,9 +6,13 @@ import {
RiSortAsc,
RiSortDesc,
RiFolder2Line,
RiFilter3Line,
RiMoreFill,
RiSettings3Fill,
RiPlayFill,
RiAddBoxFill,
RiAddCircleFill,
RiRefreshLine,
RiFilterFill,
} from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
@ -138,7 +142,7 @@ export const SongListHeaderFilters = ({
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
@ -274,6 +278,22 @@ export const SongListHeaderFilters = ({
});
};
const isFilterApplied = useMemo(() => {
const isNavidromeFilterApplied =
server?.type === ServerType.NAVIDROME &&
page.filter.ndParams &&
Object.values(page.filter.ndParams).some((value) => value !== undefined);
const isJellyfinFilterApplied =
server?.type === ServerType.JELLYFIN &&
page.filter.jfParams &&
Object.values(page.filter.jfParams)
.filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
.some((value) => value !== undefined);
return isNavidromeFilterApplied || isJellyfinFilterApplied;
}, [page.filter.jfParams, page.filter.ndParams, server?.type]);
return (
<Flex justify="space-between">
<Group
@ -350,15 +370,6 @@ export const SongListHeaderFilters = ({
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
<Button
compact
fw="600"
size="md"
variant="subtle"
onClick={handleOpenFiltersModal}
>
{cq.isSm ? 'Filters' : <RiFilter3Line size="1.3rem" />}
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
@ -371,20 +382,49 @@ export const SongListHeaderFilters = ({
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
<DropdownMenu.Item
icon={<RiPlayFill />}
onClick={() => handlePlay(Play.NOW)}
>
Play
</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiAddBoxFill />}
onClick={() => handlePlay(Play.LAST)}
>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
<DropdownMenu.Item
icon={<RiAddCircleFill />}
onClick={() => handlePlay(Play.NEXT)}
>
Add to queue next
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiRefreshLine />}
onClick={handleRefresh}
>
Refresh
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>
<Group>
<DropdownMenu position="bottom-start">
<Group
noWrap
spacing="sm"
>
<Button
compact
size="md"
sx={{ svg: { fill: isFilterApplied ? 'var(--primary-color) !important' : undefined } }}
tooltip={{ label: 'Filters' }}
variant="subtle"
onClick={handleOpenFiltersModal}
>
<RiFilterFill size="1.3rem" />
</Button>
<DropdownMenu position="bottom-end">
<DropdownMenu.Target>
<Button
compact

10
src/renderer/features/songs/components/song-list-header.tsx
View file

@ -72,7 +72,7 @@ export const SongListHeader = ({
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
@ -114,13 +114,11 @@ export const SongListHeader = ({
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex
justify="space-between"
py="1rem"
w="100%"
>
<LibraryHeaderBar>
<Group>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.Title>{title || 'Tracks'}</LibraryHeaderBar.Title>
</Group>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.Title>{title || 'Tracks'}</LibraryHeaderBar.Title>
<Paper
fw="600"
px="1rem"

113
src/renderer/features/titlebar/components/app-menu.tsx
View file

@ -1,15 +1,8 @@
import { Group } from '@mantine/core';
import { openModal, closeAllModals } from '@mantine/modals';
import {
RiSearch2Line,
RiSettings2Fill,
RiSettings2Line,
RiEdit2Line,
RiLockLine,
RiMenuFill,
} from 'react-icons/ri';
import { RiLockLine, RiServerFill, RiEdit2Fill, RiSettings3Fill } from 'react-icons/ri';
import { useNavigate } from 'react-router';
import { DropdownMenu, Text, Button } from '/@/renderer/components';
import { DropdownMenu, Text } from '/@/renderer/components';
import { ServerList } from '/@/renderer/features/servers';
import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
import { Settings } from '/@/renderer/features/settings';
@ -55,7 +48,7 @@ export const AppMenu = () => {
size: 'xl',
title: (
<Group position="center">
<RiSettings2Fill size={20} />
<RiSettings3Fill size={20} />
<Text>Settings</Text>
</Group>
),
@ -63,72 +56,40 @@ export const AppMenu = () => {
};
return (
<DropdownMenu
withArrow
withinPortal
position="bottom"
>
<DropdownMenu.Target>
<Button
px={5}
size="xs"
variant="subtle"
>
<RiMenuFill
color="var(--titlebar-fg)"
size={15}
/>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Select a server</DropdownMenu.Label>
{serverList.map((s) => {
const isNavidromeExpired = s.type === ServerType.NAVIDROME && !s.ndCredential;
const isJellyfinExpired = false;
const isSessionExpired = isNavidromeExpired || isJellyfinExpired;
<>
<DropdownMenu.Label>Select a server</DropdownMenu.Label>
{serverList.map((s) => {
const isNavidromeExpired = s.type === ServerType.NAVIDROME && !s.ndCredential;
const isJellyfinExpired = false;
const isSessionExpired = isNavidromeExpired || isJellyfinExpired;
return (
<DropdownMenu.Item
key={`server-${s.id}`}
$isActive={s.id === currentServer?.id}
icon={
isSessionExpired && (
<RiLockLine
color="var(--danger-color)"
size={12}
/>
)
}
onClick={() => {
if (!isSessionExpired) return handleSetCurrentServer(s);
return handleCredentialsModal(s);
}}
>
<Group>{s.name}</Group>
</DropdownMenu.Item>
);
})}
<DropdownMenu.Divider />
<DropdownMenu.Item
disabled
rightSection={<RiSearch2Line />}
>
Search
</DropdownMenu.Item>
<DropdownMenu.Item
rightSection={<RiSettings2Line />}
onClick={handleSettingsModal}
>
Settings
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item
rightSection={<RiEdit2Line />}
onClick={handleManageServersModal}
>
Manage servers
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
return (
<DropdownMenu.Item
key={`server-${s.id}`}
$isActive={s.id === currentServer?.id}
icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerFill />}
onClick={() => {
if (!isSessionExpired) return handleSetCurrentServer(s);
return handleCredentialsModal(s);
}}
>
<Group>{s.name}</Group>
</DropdownMenu.Item>
);
})}
<DropdownMenu.Divider />
<DropdownMenu.Item
icon={<RiEdit2Fill />}
onClick={handleManageServersModal}
>
Manage servers
</DropdownMenu.Item>
<DropdownMenu.Item
icon={<RiSettings3Fill />}
onClick={handleSettingsModal}
>
Settings
</DropdownMenu.Item>
</>
);
};

5
src/renderer/features/titlebar/components/titlebar.tsx
View file

@ -2,7 +2,6 @@ import type { ReactNode } from 'react';
import { Group } from '@mantine/core';
import styled from 'styled-components';
import { WindowControls } from '../../window-controls';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
interface TitlebarProps {
children?: ReactNode;
@ -51,10 +50,6 @@ export const Titlebar = ({ children }: TitlebarProps) => {
<Right>
{children}
<Group spacing="xs">
<>
{/* <ActivityMenu /> */}
<AppMenu />
</>
<WindowControls />
</Group>
</Right>

2
src/renderer/features/window-controls/components/window-controls.tsx
View file

@ -23,7 +23,7 @@ export const WindowsButton = styled.div<{ $exit?: boolean }>`
justify-content: center;
-webkit-app-region: no-drag;
width: 50px;
height: 30px;
height: 65px;
img {
width: 35%;

8
src/renderer/hooks/use-should-pad-titlebar.tsx
View file

@ -1,9 +1,15 @@
import { useLocation } from 'react-router';
import { AppRoute } from '/@/renderer/router/routes';
import { useSidebarRightExpanded } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
export const useShouldPadTitlebar = () => {
const location = useLocation();
const isSidebarExpanded = useSidebarRightExpanded();
const isQueuePage = location.pathname === AppRoute.NOW_PLAYING;
const { sideQueueType } = useGeneralSettings();
return !(isSidebarExpanded && sideQueueType === 'sideQueue');
// If the sidebar is expanded, the sidebar queue is enabled, and the user is not on the queue page
return !(isSidebarExpanded && sideQueueType === 'sideQueue' && !isQueuePage);
};

5
src/renderer/index.tsx
View file

@ -1,3 +1,4 @@
import { Notifications } from '@mantine/notifications';
import { QueryClientProvider } from '@tanstack/react-query';
import { createRoot } from 'react-dom/client';
import { App } from './app';
@ -8,6 +9,10 @@ const root = createRoot(container);
root.render(
<QueryClientProvider client={queryClient}>
<Notifications
containerWidth="300px"
position="bottom-center"
/>
<App />
</QueryClientProvider>,
);

14
src/renderer/layouts/default-layout.tsx
View file

@ -30,7 +30,7 @@ const Layout = styled.div`
grid-template-areas:
'main-content'
'player';
grid-template-rows: calc(100vh - 85px) 85px;
grid-template-rows: calc(100vh - 90px) 90px;
grid-template-columns: 1fr;
gap: 0;
height: 100%;
@ -97,8 +97,9 @@ const ResizeHandle = styled.div<{
`;
const QueueDrawer = styled(motion.div)`
background: var(--sidebar-bg);
border-left: var(--sidebar-border);
background: transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
`;
const QueueDrawerArea = styled(motion.div)`
@ -162,7 +163,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
const queueDrawerVariants: Variants = {
closed: {
height: 'calc(100vh - 170px)',
height: 'calc(100vh - 190px)',
position: 'absolute',
right: 0,
top: '75px',
@ -174,12 +175,11 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
x: '50vw',
},
open: {
boxShadow: '1px 1px 10px 5px rgba(0, 0, 0, 0.3)',
height: 'calc(100vh - 170px)',
boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
height: 'calc(100vh - 190px)',
position: 'absolute',
right: '20px',
top: '75px',
transition: {
damping: 10,
delay: 0,

2
src/renderer/router/titlebar-outlet.tsx
View file

@ -7,7 +7,7 @@ const TitlebarContainer = styled.header`
top: 0;
right: 0;
z-index: 5000;
height: 30px;
height: 65px;
background: var(--titlebar-controls-bg);
-webkit-app-region: drag;
`;

2
src/renderer/styles/global.scss
View file

@ -64,7 +64,7 @@ html {
}
::-webkit-scrollbar-thumb:hover {
background: rgb(136, 136, 136);
background: var(--scrollbar-thumb-bg-hover);
}
a {

36
src/renderer/themes/default.scss
View file

@ -2,7 +2,7 @@
--root-font-size: 13px;
--icon-color: rgb(255, 255, 255);
--primary-color: rgb(34, 104, 255);
--primary-color: rgb(53, 116, 252);
--secondary-color: rgb(255, 120, 120);
--success-color: green;
--warning-color: orange;
@ -14,7 +14,7 @@
--main-fg-secondary: rgb(150, 150, 150);
--titlebar-fg: rgb(255, 255, 255);
--titlebar-bg: rgb(7, 7, 7);
--titlebar-bg: rgb(24, 24, 24);
--titlebar-controls-bg: rgba(0, 0, 0, 0);
--sidebar-bg: rgb(0, 0, 0);
@ -40,10 +40,11 @@
--tooltip-fg: #000000;
--scrollbar-track-bg: transparent;
--scrollbar-thumb-bg: rgba(90, 90, 90, 0.5);
--scrollbar-thumb-bg: rgba(160, 160, 160, 0.3);
--scrollbar-thumb-bg-hover: rgba(160, 160, 160, 0.6);
--btn-primary-bg: var(--primary-color);
--btn-primary-bg-hover: rgb(0, 71, 252);
--btn-primary-bg-hover: rgb(34, 96, 255);
--btn-primary-fg: #ffffff;
--btn-primary-fg-hover: #ffffff;
@ -59,7 +60,7 @@
--input-bg: rgb(35, 35, 35);
--input-fg: rgb(193, 193, 193);
--input-placeholder-fg: rgb(119, 126, 139);
--input-placeholder-fg: rgb(107, 108, 109);
--input-active-fg: rgb(193, 193, 193);
--input-active-bg: rgba(255, 255, 255, 0.1);
@ -84,12 +85,12 @@
--toast-description-fg: rgb(193, 194, 197);
--toast-bg: rgb(16, 16, 16);
--modal-bg: rgb(26, 26, 26);
--modal-bg: var(--main-bg);
--badge-bg: rgb(0, 0, 0);
--badge-fg: rgb(255, 255, 255);
--paper-bg: rgb(30, 30, 30);
--paper-bg: rgb(20, 20, 20);
--placeholder-bg: rgba(53, 53, 53, 0.5);
--placeholder-fg: rgba(126, 126, 126);
@ -180,25 +181,4 @@
.current-song {
background: rgba(96, 144, 240, 0.3) !important;
}
.mantine-Modal-modal {
background: var(--modal-bg);
border-radius: 10px;
backdrop-filter: blur(8px);
}
.mantine-Modal-header {
padding-bottom: 1rem;
margin-right: 0.5rem;
border-bottom: 1px solid var(--generic-border-color);
}
.mantine-Modal-title {
font-weight: bold;
font-size: medium;
}
.mantine-Modal-body {
padding: 1rem;
}
}

7
src/renderer/themes/light.scss
View file

@ -7,7 +7,7 @@ body[data-theme='defaultLight'] {
--titlebar-fg: rgb(25, 25, 25);
--titlebar-bg: rgb(240, 241, 242);
--titlebar-controls-bg: rgba(240, 240, 240, 0.2);
--titlebar-controls-bg: rgba(0, 0, 0, 0);
--sidebar-bg: rgb(240, 241, 242);
--sidebar-fg: rgb(0, 0, 0);
@ -35,7 +35,8 @@ body[data-theme='defaultLight'] {
--tooltip-fg: rgb(0, 0, 0);
--scrollbar-track-bg: transparent;
--scrollbar-thumb-bg: rgb(140, 140, 140);
--scrollbar-thumb-bg: rgba(140, 140, 140, 0.3);
--scrollbar-thumb-bg: rgba(140, 140, 140, 0.6);
--btn-primary-bg: var(--primary-color);
--btn-primary-fg: #ffffff;
@ -78,7 +79,7 @@ body[data-theme='defaultLight'] {
--modal-bg: rgb(255, 255, 255);
--paper-bg: rgb(240, 240, 240);
--paper-bg: rgb(235, 235, 235);
--placeholder-bg: rgba(204, 204, 204, 0.5);
--placeholder-fg: rgb(126, 126, 126);

4
src/renderer/utils/constrain-sidebar-width.ts
View file

@ -1,6 +1,6 @@
export const constrainSidebarWidth = (num: number) => {
if (num < 225) {
return 225;
if (num < 260) {
return 260;
}
if (num > 400) {