mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 14:37:06 +01:00
Finalize base features for smart playlist editor
This commit is contained in:
jeffvli
parent
0c7a0cc88a
commit
df4f05b14c
@ -353,40 +353,74 @@ export type NDPlaylistSongList = {
|
||||
};
|
||||
|
||||
export const NDSongQueryFields = [
|
||||
{ label: 'Title', value: 'title' },
|
||||
{ label: 'Album', value: 'album' },
|
||||
{ label: 'Artist', value: 'artist' },
|
||||
{ label: 'Album artist', value: 'albumartist' },
|
||||
{ label: 'Has cover art', value: 'hascoverart' },
|
||||
{ label: 'Track number', value: 'tracknumber' },
|
||||
{ label: 'Disc number', value: 'discnumber' },
|
||||
{ label: 'Year', value: 'year' },
|
||||
{ label: 'Size', value: 'size' },
|
||||
{ label: 'Is compilation', value: 'compilation' },
|
||||
{ label: 'Date added', value: 'dateadded' },
|
||||
{ label: 'Date modified', value: 'datemodified' },
|
||||
{ label: 'Disc subtitle', value: 'discsubtitle' },
|
||||
{ label: 'Comment', value: 'comment' },
|
||||
{ label: 'Lyrics', value: 'lyrics' },
|
||||
{ label: 'Sort title', value: 'sorttitle' },
|
||||
{ label: 'Sort album', value: 'sortalbum' },
|
||||
{ label: 'Sort artist', value: 'sortartist' },
|
||||
{ label: 'Sort album artist', value: 'sortalbumartist' },
|
||||
{ label: 'Album type', value: 'albumtype' },
|
||||
{ label: 'Album comment', value: 'albumcomment' },
|
||||
{ label: 'Catalog number', value: 'catalognumber' },
|
||||
{ label: 'File path', value: 'filepath' },
|
||||
{ label: 'File type', value: 'filetype' },
|
||||
{ label: 'Duration', value: 'duration' },
|
||||
{ label: 'Bitrate', value: 'bitrate' },
|
||||
{ label: 'BPM', value: 'bpm' },
|
||||
{ label: 'Channels', value: 'channels' },
|
||||
{ label: 'Genre', value: 'genre' },
|
||||
{ label: 'Is favorite', value: 'loved' },
|
||||
{ label: 'Date favorited', value: 'dateloved' },
|
||||
{ label: 'Last played', value: 'lastplayed' },
|
||||
{ label: 'Play count', value: 'playcount' },
|
||||
{ label: 'Rating', value: 'rating' },
|
||||
{ label: 'Album', type: 'string', value: 'album' },
|
||||
{ label: 'Album Artist', type: 'string', value: 'albumartist' },
|
||||
{ label: 'Album Comment', type: 'string', value: 'albumcomment' },
|
||||
{ label: 'Album Type', type: 'string', value: 'albumtype' },
|
||||
{ label: 'Artist', type: 'string', value: 'artist' },
|
||||
{ label: 'Bitrate', type: 'number', value: 'bitrate' },
|
||||
{ label: 'BPM', type: 'number', value: 'bpm' },
|
||||
{ label: 'Catalog Number', type: 'string', value: 'catalognumber' },
|
||||
{ label: 'Channels', type: 'number', value: 'channels' },
|
||||
{ label: 'Comment', type: 'string', value: 'comment' },
|
||||
{ label: 'Date Added', type: 'date', value: 'dateadded' },
|
||||
{ label: 'Date Favorited', type: 'date', value: 'dateloved' },
|
||||
{ label: 'Date Last Played', type: 'date', value: 'lastplayed' },
|
||||
{ label: 'Date Modified', type: 'date', value: 'datemodified' },
|
||||
{ label: 'Disc Subtitle', type: 'string', value: 'discsubtitle' },
|
||||
{ label: 'Disc Number', type: 'number', value: 'discnumber' },
|
||||
{ label: 'Duration', type: 'number', value: 'duration' },
|
||||
{ label: 'File Path', type: 'string', value: 'filepath' },
|
||||
{ label: 'File Type', type: 'string', value: 'filetype' },
|
||||
{ label: 'Genre', type: 'string', value: 'genre' },
|
||||
{ label: 'Has CoverArt', type: 'boolean', value: 'hascoverart' },
|
||||
{ label: 'Is Compilation', type: 'boolean', value: 'compilation' },
|
||||
{ label: 'Is Favorite', type: 'boolean', value: 'loved' },
|
||||
{ label: 'Lyrics', type: 'string', value: 'lyrics' },
|
||||
{ label: 'Name', type: 'string', value: 'title' },
|
||||
{ label: 'Play Count', type: 'number', value: 'playcount' },
|
||||
{ label: 'Rating', type: 'number', value: 'rating' },
|
||||
{ label: 'Size', type: 'number', value: 'size' },
|
||||
{ label: 'Sort Album', type: 'string', value: 'sortalbum' },
|
||||
{ label: 'Sort Album Artist', type: 'string', value: 'sortalbumartist' },
|
||||
{ label: 'Sort Artist', type: 'string', value: 'sortartist' },
|
||||
{ label: 'Sort Name', type: 'string', value: 'sorttitle' },
|
||||
{ label: 'Track Number', type: 'number', value: 'tracknumber' },
|
||||
{ label: 'Year', type: 'number', value: 'year' },
|
||||
];
|
||||
|
||||
export const NDSongQueryDateOperators = [
|
||||
{ label: 'is', value: 'is' },
|
||||
{ label: 'is not', value: 'isNot' },
|
||||
{ label: 'is before', value: 'before' },
|
||||
{ label: 'is after', value: 'after' },
|
||||
{ label: 'is in the last', value: 'inTheLast' },
|
||||
{ label: 'is not in the last', value: 'notInTheLast' },
|
||||
{ label: 'is in the range', value: 'inTheRange' },
|
||||
];
|
||||
|
||||
export const NDSongQueryStringOperators = [
|
||||
{ label: 'is', value: 'is' },
|
||||
{ label: 'is not', value: 'isNot' },
|
||||
{ label: 'contains', value: 'contains' },
|
||||
{ label: 'does not contain', value: 'notContains' },
|
||||
{ label: 'starts with', value: 'startsWith' },
|
||||
{ label: 'ends with', value: 'endsWith' },
|
||||
];
|
||||
|
||||
export const NDSongQueryBooleanOperators = [
|
||||
{ label: 'is', value: 'is' },
|
||||
{ label: 'is not', value: 'isNot' },
|
||||
];
|
||||
|
||||
export const NDSongQueryNumberOperators = [
|
||||
{ label: 'is', value: 'is' },
|
||||
{ label: 'is not', value: 'isNot' },
|
||||
{ label: 'contains', value: 'contains' },
|
||||
{ label: 'does not contain', value: 'notContains' },
|
||||
{ label: 'is greater than', value: 'gt' },
|
||||
{ label: 'is less than', value: 'lt' },
|
||||
{ label: 'is in the range', value: 'inTheRange' },
|
||||
];
|
||||
|
||||
export type NDUserListParams = {
|
||||
|
||||
@ -30,7 +30,7 @@ type DeleteArgs = {
|
||||
};
|
||||
interface QueryBuilderProps {
|
||||
data: Record<string, any>;
|
||||
filters: { label: string; value: string }[];
|
||||
filters: { label: string; type: string; value: string }[];
|
||||
groupIndex: number[];
|
||||
level: number;
|
||||
onAddRule: (args: AddArgs) => void;
|
||||
@ -39,8 +39,16 @@ interface QueryBuilderProps {
|
||||
onChangeOperator: (args: any) => void;
|
||||
onChangeType: (args: any) => void;
|
||||
onChangeValue: (args: any) => void;
|
||||
onClearFilters: () => void;
|
||||
onDeleteRule: (args: DeleteArgs) => void;
|
||||
onDeleteRuleGroup: (args: DeleteArgs) => void;
|
||||
onResetFilters: () => void;
|
||||
operators: {
|
||||
boolean: { label: string; value: string }[];
|
||||
date: { label: string; value: string }[];
|
||||
number: { label: string; value: string }[];
|
||||
string: { label: string; value: string }[];
|
||||
};
|
||||
uniqueId: string;
|
||||
}
|
||||
|
||||
@ -53,8 +61,11 @@ export const QueryBuilder = ({
|
||||
onAddRuleGroup,
|
||||
onChangeType,
|
||||
onChangeField,
|
||||
operators,
|
||||
onChangeOperator,
|
||||
onChangeValue,
|
||||
onClearFilters,
|
||||
onResetFilters,
|
||||
groupIndex,
|
||||
uniqueId,
|
||||
filters,
|
||||
@ -95,7 +106,7 @@ export const QueryBuilder = ({
|
||||
>
|
||||
<RiAddLine size={20} />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
p={0}
|
||||
@ -107,18 +118,33 @@ export const QueryBuilder = ({
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Item onClick={handleAddRuleGroup}>Add rule group</DropdownMenu.Item>
|
||||
|
||||
{level > 0 && (
|
||||
<DropdownMenu.Item onClick={handleDeleteRuleGroup}>
|
||||
Remove rule group
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
{level === 0 && (
|
||||
<>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Item
|
||||
$danger
|
||||
onClick={onResetFilters}
|
||||
>
|
||||
Reset to default
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$danger
|
||||
onClick={onClearFilters}
|
||||
>
|
||||
Clear filters
|
||||
</DropdownMenu.Item>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
</Group>
|
||||
<AnimatePresence
|
||||
key="advanced-filter-option"
|
||||
initial={false}
|
||||
>
|
||||
<AnimatePresence initial={false}>
|
||||
{data?.rules?.map((rule: QueryBuilderRule) => (
|
||||
<motion.div
|
||||
key={rule.uniqueId}
|
||||
@ -131,9 +157,9 @@ export const QueryBuilder = ({
|
||||
data={rule}
|
||||
filters={filters}
|
||||
groupIndex={groupIndex || []}
|
||||
// groupValue={groupValue}
|
||||
level={level}
|
||||
noRemove={data?.rules?.length === 1}
|
||||
operators={operators}
|
||||
onChangeField={onChangeField}
|
||||
onChangeOperator={onChangeOperator}
|
||||
onChangeValue={onChangeValue}
|
||||
@ -143,10 +169,7 @@ export const QueryBuilder = ({
|
||||
))}
|
||||
</AnimatePresence>
|
||||
{data?.group && (
|
||||
<AnimatePresence
|
||||
key="advanced-filter-group"
|
||||
initial={false}
|
||||
>
|
||||
<AnimatePresence initial={false}>
|
||||
{data.group?.map((group: QueryBuilderGroup, index: number) => (
|
||||
<motion.div
|
||||
key={group.uniqueId}
|
||||
@ -160,6 +183,7 @@ export const QueryBuilder = ({
|
||||
filters={filters}
|
||||
groupIndex={[...(groupIndex || []), index]}
|
||||
level={level + 1}
|
||||
operators={operators}
|
||||
uniqueId={group.uniqueId}
|
||||
onAddRule={onAddRule}
|
||||
onAddRuleGroup={onAddRuleGroup}
|
||||
@ -167,8 +191,10 @@ export const QueryBuilder = ({
|
||||
onChangeOperator={onChangeOperator}
|
||||
onChangeType={onChangeType}
|
||||
onChangeValue={onChangeValue}
|
||||
onClearFilters={onClearFilters}
|
||||
onDeleteRule={onDeleteRule}
|
||||
onDeleteRuleGroup={onDeleteRuleGroup}
|
||||
onResetFilters={onResetFilters}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
@ -1,27 +1,11 @@
|
||||
import { Group } from '@mantine/core';
|
||||
import dayjs from 'dayjs';
|
||||
import { useState } from 'react';
|
||||
import { RiSubtractLine } from 'react-icons/ri';
|
||||
import { Button } from '/@/renderer/components/button';
|
||||
import { TextInput } from '/@/renderer/components/input';
|
||||
import { NumberInput, TextInput } from '/@/renderer/components/input';
|
||||
import { Select } from '/@/renderer/components/select';
|
||||
import { QueryBuilderRule } from '/@/renderer/types';
|
||||
|
||||
const operators = [
|
||||
{ label: 'is', value: 'is' },
|
||||
{ label: 'is not', value: 'isNot' },
|
||||
{ label: 'is greater than', value: 'gt' },
|
||||
{ label: 'is less than', value: 'lt' },
|
||||
{ label: 'contains', value: 'contains' },
|
||||
{ label: 'does not contain', value: 'notContains' },
|
||||
{ label: 'starts with', value: 'startsWith' },
|
||||
{ label: 'ends with', value: 'endsWith' },
|
||||
{ label: 'is in the range', value: 'inTheRange' },
|
||||
{ label: 'before', value: 'before' },
|
||||
{ label: 'after', value: 'after' },
|
||||
{ label: 'is in the last', value: 'inTheLast' },
|
||||
{ label: 'is not in the last', value: 'notInTheLast' },
|
||||
];
|
||||
|
||||
type DeleteArgs = {
|
||||
groupIndex: number[];
|
||||
level: number;
|
||||
@ -30,22 +14,98 @@ type DeleteArgs = {
|
||||
|
||||
interface QueryOptionProps {
|
||||
data: QueryBuilderRule;
|
||||
filters: { label: string; value: string }[];
|
||||
filters: { label: string; type: string; value: string }[];
|
||||
groupIndex: number[];
|
||||
// groupValue: string;
|
||||
level: number;
|
||||
noRemove: boolean;
|
||||
onChangeField: (args: any) => void;
|
||||
onChangeOperator: (args: any) => void;
|
||||
onChangeValue: (args: any) => void;
|
||||
onDeleteRule: (args: DeleteArgs) => void;
|
||||
operators: {
|
||||
boolean: { label: string; value: string }[];
|
||||
date: { label: string; value: string }[];
|
||||
number: { label: string; value: string }[];
|
||||
string: { label: string; value: string }[];
|
||||
};
|
||||
}
|
||||
|
||||
const QueryValueInput = ({ onChange, type, ...props }: any) => {
|
||||
const [numberRange, setNumberRange] = useState([0, 0]);
|
||||
|
||||
switch (type) {
|
||||
case 'string':
|
||||
return (
|
||||
<TextInput
|
||||
size="sm"
|
||||
onChange={onChange}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
case 'number':
|
||||
return (
|
||||
<NumberInput
|
||||
size="sm"
|
||||
onChange={onChange}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
case 'date':
|
||||
return (
|
||||
<TextInput
|
||||
size="sm"
|
||||
onChange={onChange}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'dateRange':
|
||||
return (
|
||||
<>
|
||||
<NumberInput
|
||||
{...props}
|
||||
defaultValue={props.defaultValue?.[0]}
|
||||
maxWidth={81}
|
||||
width="10%"
|
||||
onChange={(e) => {
|
||||
const newRange = [e || 0, numberRange[1]];
|
||||
setNumberRange(newRange);
|
||||
onChange(newRange);
|
||||
}}
|
||||
/>
|
||||
<NumberInput
|
||||
{...props}
|
||||
defaultValue={props.defaultValue?.[1]}
|
||||
maxWidth={81}
|
||||
width="10%"
|
||||
onChange={(e) => {
|
||||
const newRange = [numberRange[0], e || 0];
|
||||
setNumberRange(newRange);
|
||||
onChange(newRange);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
case 'boolean':
|
||||
return (
|
||||
<Select
|
||||
data={[]}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
};
|
||||
|
||||
export const QueryBuilderOption = ({
|
||||
data,
|
||||
filters,
|
||||
level,
|
||||
onDeleteRule,
|
||||
operators,
|
||||
groupIndex,
|
||||
noRemove,
|
||||
onChangeField,
|
||||
@ -67,8 +127,6 @@ export const QueryBuilderOption = ({
|
||||
};
|
||||
|
||||
const handleChangeValue = (e: any) => {
|
||||
console.log('e', e);
|
||||
|
||||
const isDirectValue =
|
||||
typeof e === 'string' ||
|
||||
typeof e === 'number' ||
|
||||
@ -84,14 +142,25 @@ export const QueryBuilderOption = ({
|
||||
});
|
||||
}
|
||||
|
||||
const isDate = e instanceof Date;
|
||||
// const isDate = e instanceof Date;
|
||||
|
||||
if (isDate) {
|
||||
// if (isDate) {
|
||||
// return onChangeValue({
|
||||
// groupIndex,
|
||||
// level,
|
||||
// uniqueId,
|
||||
// value: dayjs(e).format('YYYY-MM-DD'),
|
||||
// });
|
||||
// }
|
||||
|
||||
const isArray = Array.isArray(e);
|
||||
|
||||
if (isArray) {
|
||||
return onChangeValue({
|
||||
groupIndex,
|
||||
level,
|
||||
uniqueId,
|
||||
value: dayjs(e).format('YYYY-MM-DD'),
|
||||
value: e,
|
||||
});
|
||||
}
|
||||
|
||||
@ -103,233 +172,8 @@ export const QueryBuilderOption = ({
|
||||
});
|
||||
};
|
||||
|
||||
// const filterOperatorMap = {
|
||||
// date: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={DATE_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// id: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={ID_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// number: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={NUMBER_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// string: (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={STRING_FILTER_OPTIONS_DATA}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={operator}
|
||||
// width="20%"
|
||||
// onChange={handleChangeOperator}
|
||||
// />
|
||||
// ),
|
||||
// };
|
||||
|
||||
// const filterInputValueMap = {
|
||||
// 'albumArtists.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.albumArtist || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albumArtists.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albumArtists.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.dateAdded': (
|
||||
// <DatePicker
|
||||
// initialLevel="year"
|
||||
// maxDate={dayjs(new Date()).year(3000).toDate()}
|
||||
// maxWidth={175}
|
||||
// minDate={dayjs(new Date()).year(1950).toDate()}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.album || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.playCount': (
|
||||
// <NumberInput
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={(e) => handleChangeValue(e)}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.releaseDate': (
|
||||
// <DatePicker
|
||||
// initialLevel="year"
|
||||
// maxDate={dayjs(new Date()).year(3000).toDate()}
|
||||
// maxWidth={175}
|
||||
// minDate={dayjs(new Date()).year(1950).toDate()}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'albums.releaseYear': (
|
||||
// <NumberInput
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'artists.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.artist || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'artists.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'artists.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.genres.id': (
|
||||
// <Select
|
||||
// searchable
|
||||
// data={genresData?.song || []}
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.name': (
|
||||
// <TextInput
|
||||
// maxWidth={175}
|
||||
// size="xs"
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.playCount': (
|
||||
// <NumberInput
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// 'songs.ratings.value': (
|
||||
// <NumberInput
|
||||
// max={5}
|
||||
// maxWidth={175}
|
||||
// min={0}
|
||||
// size="xs"
|
||||
// value={value}
|
||||
// width="20%"
|
||||
// onChange={handleChangeValue}
|
||||
// />
|
||||
// ),
|
||||
// };
|
||||
|
||||
const fieldType = filters.find((f) => f.value === field)?.type;
|
||||
const operatorsByFieldType = operators[fieldType as keyof typeof operators];
|
||||
const ml = (level + 1) * 10;
|
||||
|
||||
return (
|
||||
@ -337,7 +181,7 @@ export const QueryBuilderOption = ({
|
||||
<Select
|
||||
searchable
|
||||
data={filters}
|
||||
maxWidth={175}
|
||||
maxWidth={170}
|
||||
size="sm"
|
||||
value={field}
|
||||
width="20%"
|
||||
@ -345,19 +189,20 @@ export const QueryBuilderOption = ({
|
||||
/>
|
||||
<Select
|
||||
searchable
|
||||
data={operators}
|
||||
data={operatorsByFieldType || []}
|
||||
disabled={!field}
|
||||
maxWidth={175}
|
||||
maxWidth={170}
|
||||
size="sm"
|
||||
value={operator}
|
||||
width="20%"
|
||||
onChange={handleChangeOperator}
|
||||
/>
|
||||
{field ? (
|
||||
<TextInput
|
||||
<QueryValueInput
|
||||
defaultValue={value}
|
||||
maxWidth={175}
|
||||
maxWidth={170}
|
||||
size="sm"
|
||||
type={operator === 'inTheRange' ? 'dateRange' : fieldType}
|
||||
width="20%"
|
||||
onChange={handleChangeValue}
|
||||
/>
|
||||
@ -365,14 +210,12 @@ export const QueryBuilderOption = ({
|
||||
<TextInput
|
||||
disabled
|
||||
defaultValue={value}
|
||||
maxWidth={175}
|
||||
maxWidth={170}
|
||||
size="sm"
|
||||
width="20%"
|
||||
onChange={handleChangeValue}
|
||||
/>
|
||||
)}
|
||||
{/* // filterOperatorMap[ // OPTIONS_MAP[field as keyof typeof OPTIONS_MAP].type as keyof typeof
|
||||
filterOperatorMap // ] */}
|
||||
<Button
|
||||
disabled={noRemove}
|
||||
px={5}
|
||||
|
||||
@ -8,7 +8,7 @@ import { useParams } from 'react-router';
|
||||
import styled from 'styled-components';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { PlaylistSongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
@ -79,10 +79,14 @@ const HeaderItems = styled.div`
|
||||
`;
|
||||
|
||||
interface PlaylistDetailHeaderProps {
|
||||
handleToggleShowQueryBuilder: () => void;
|
||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||
}
|
||||
|
||||
export const PlaylistDetailSongListHeader = ({ tableRef }: PlaylistDetailHeaderProps) => {
|
||||
export const PlaylistDetailSongListHeader = ({
|
||||
tableRef,
|
||||
handleToggleShowQueryBuilder,
|
||||
}: PlaylistDetailHeaderProps) => {
|
||||
const { playlistId } = useParams() as { playlistId: string };
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
@ -365,18 +369,36 @@ export const PlaylistDetailSongListHeader = ({ tableRef }: PlaylistDetailHeaderP
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
|
||||
Add to queue (last)
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
|
||||
Add to queue (next)
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Item
|
||||
disabled
|
||||
onClick={() => handlePlay(Play.NEXT)}
|
||||
onClick={() => handlePlay(Play.LAST)}
|
||||
>
|
||||
Add to queue (last)
|
||||
Edit playlist
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
disabled
|
||||
onClick={() => handlePlay(Play.LAST)}
|
||||
>
|
||||
Add to queue (next)
|
||||
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>
|
||||
|
||||
@ -1,17 +1,33 @@
|
||||
import { useState, useImperativeHandle, forwardRef } from 'react';
|
||||
import { Flex, Group, ScrollArea } from '@mantine/core';
|
||||
import { useState } from 'react';
|
||||
import { Group } from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import clone from 'lodash/clone';
|
||||
import get from 'lodash/get';
|
||||
import setWith from 'lodash/setWith';
|
||||
import { nanoid } from 'nanoid';
|
||||
import { NDSongQueryFields } from '/@/renderer/api/navidrome.types';
|
||||
import { Button, DropdownMenu, NumberInput, QueryBuilder } from '/@/renderer/components';
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
MotionFlex,
|
||||
NumberInput,
|
||||
QueryBuilder,
|
||||
ScrollArea,
|
||||
Select,
|
||||
} from '/@/renderer/components';
|
||||
import {
|
||||
convertNDQueryToQueryGroup,
|
||||
convertQueryGroupToNDQuery,
|
||||
} from '/@/renderer/features/playlists/utils';
|
||||
import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
|
||||
import { RiMore2Fill } from 'react-icons/ri';
|
||||
import { RiMore2Fill, RiSaveLine } from 'react-icons/ri';
|
||||
import { SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import {
|
||||
NDSongQueryBooleanOperators,
|
||||
NDSongQueryDateOperators,
|
||||
NDSongQueryFields,
|
||||
NDSongQueryNumberOperators,
|
||||
NDSongQueryStringOperators,
|
||||
} from '/@/renderer/api/navidrome.types';
|
||||
|
||||
type AddArgs = {
|
||||
groupIndex: number[];
|
||||
@ -25,38 +41,78 @@ type DeleteArgs = {
|
||||
};
|
||||
|
||||
interface PlaylistQueryBuilderProps {
|
||||
onSave: (parsedFilter: any) => void;
|
||||
onSaveAs: (parsedFilter: any) => void;
|
||||
isSaving?: boolean;
|
||||
limit?: number;
|
||||
onSave: (
|
||||
parsedFilter: any,
|
||||
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
|
||||
) => void;
|
||||
onSaveAs: (
|
||||
parsedFilter: any,
|
||||
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
|
||||
) => void;
|
||||
query: any;
|
||||
sortBy: SongListSort;
|
||||
sortOrder: SortOrder;
|
||||
}
|
||||
|
||||
export const PlaylistQueryBuilder = forwardRef(
|
||||
({ query, onSave, onSaveAs }: PlaylistQueryBuilderProps, ref) => {
|
||||
const [filters, setFilters] = useState<any>(
|
||||
convertNDQueryToQueryGroup(query) || {
|
||||
all: [],
|
||||
const DEFAULT_QUERY = {
|
||||
group: [],
|
||||
rules: [
|
||||
{
|
||||
field: '',
|
||||
operator: '',
|
||||
uniqueId: nanoid(),
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
type: 'all' as 'all' | 'any',
|
||||
uniqueId: nanoid(),
|
||||
};
|
||||
|
||||
export const PlaylistQueryBuilder = ({
|
||||
sortOrder,
|
||||
sortBy,
|
||||
limit,
|
||||
isSaving,
|
||||
query,
|
||||
onSave,
|
||||
onSaveAs,
|
||||
}: PlaylistQueryBuilderProps) => {
|
||||
const [filters, setFilters] = useState<QueryBuilderGroup>(
|
||||
query ? convertNDQueryToQueryGroup(query) : DEFAULT_QUERY,
|
||||
);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
reset() {
|
||||
setFilters({
|
||||
all: [],
|
||||
});
|
||||
const extraFiltersForm = useForm({
|
||||
initialValues: {
|
||||
limit,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
const handleResetFilters = () => {
|
||||
if (query) {
|
||||
setFilters(convertNDQueryToQueryGroup(query));
|
||||
} else {
|
||||
setFilters(DEFAULT_QUERY);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setFilters(DEFAULT_QUERY);
|
||||
};
|
||||
|
||||
const setFilterHandler = (newFilters: QueryBuilderGroup) => {
|
||||
setFilters(newFilters);
|
||||
// onSave(newFilters);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(convertQueryGroupToNDQuery(filters));
|
||||
onSave(convertQueryGroupToNDQuery(filters), extraFiltersForm.values);
|
||||
};
|
||||
|
||||
const handleSaveAs = () => {
|
||||
onSaveAs(convertQueryGroupToNDQuery(filters));
|
||||
onSaveAs(convertQueryGroupToNDQuery(filters), extraFiltersForm.values);
|
||||
};
|
||||
|
||||
const handleAddRuleGroup = (args: AddArgs) => {
|
||||
@ -124,11 +180,7 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
const updatedFilters = setWith(
|
||||
filtersCopy,
|
||||
path,
|
||||
[
|
||||
...get(filtersCopy, path).filter(
|
||||
(group: QueryBuilderGroup) => group.uniqueId !== uniqueId,
|
||||
),
|
||||
],
|
||||
[...get(filtersCopy, path).filter((group: QueryBuilderGroup) => group.uniqueId !== uniqueId)],
|
||||
clone,
|
||||
);
|
||||
|
||||
@ -157,8 +209,8 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
[
|
||||
...get(filtersCopy, path),
|
||||
{
|
||||
field: 'title',
|
||||
operator: 'contains',
|
||||
field: '',
|
||||
operator: '',
|
||||
uniqueId: nanoid(),
|
||||
value: null,
|
||||
},
|
||||
@ -194,10 +246,6 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
path,
|
||||
get(filtersCopy, path).map((rule: QueryBuilderGroup) => {
|
||||
if (rule.uniqueId !== uniqueId) return rule;
|
||||
// const defaultOperator = FILTER_OPTIONS_DATA.find(
|
||||
// (option) => option.value === value,
|
||||
// )?.default;
|
||||
|
||||
return {
|
||||
...rule,
|
||||
field: value,
|
||||
@ -269,7 +317,6 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
const filtersCopy = clone(filters);
|
||||
|
||||
const path = getRulePath(level, groupIndex);
|
||||
console.log('path', path);
|
||||
const updatedFilters = setWith(
|
||||
filtersCopy,
|
||||
path,
|
||||
@ -286,18 +333,29 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
setFilterHandler(updatedFilters);
|
||||
};
|
||||
|
||||
const sortOptions = [{ label: 'Random', type: 'string', value: 'random' }, ...NDSongQueryFields];
|
||||
|
||||
return (
|
||||
<Flex
|
||||
<MotionFlex
|
||||
direction="column"
|
||||
h="100%"
|
||||
h="calc(100% - 3rem)"
|
||||
justify="space-between"
|
||||
>
|
||||
<ScrollArea h="100%">
|
||||
<ScrollArea
|
||||
h="100%"
|
||||
p="1rem"
|
||||
>
|
||||
<QueryBuilder
|
||||
data={filters}
|
||||
filters={NDSongQueryFields}
|
||||
groupIndex={[]}
|
||||
level={0}
|
||||
operators={{
|
||||
boolean: NDSongQueryBooleanOperators,
|
||||
date: NDSongQueryDateOperators,
|
||||
number: NDSongQueryNumberOperators,
|
||||
string: NDSongQueryStringOperators,
|
||||
}}
|
||||
uniqueId={filters.uniqueId}
|
||||
onAddRule={handleAddRule}
|
||||
onAddRuleGroup={handleAddRuleGroup}
|
||||
@ -305,29 +363,65 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
onChangeOperator={handleChangeOperator}
|
||||
onChangeType={handleChangeType}
|
||||
onChangeValue={handleChangeValue}
|
||||
onClearFilters={handleClearFilters}
|
||||
onDeleteRule={handleDeleteRule}
|
||||
onDeleteRuleGroup={handleDeleteRuleGroup}
|
||||
onResetFilters={handleResetFilters}
|
||||
/>
|
||||
</ScrollArea>
|
||||
<Group
|
||||
noWrap
|
||||
align="flex-end"
|
||||
p="1rem 1rem 0"
|
||||
p="1rem"
|
||||
position="apart"
|
||||
>
|
||||
<NumberInput
|
||||
label="Limit to"
|
||||
width={75}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
variant="filled"
|
||||
onClick={handleSave}
|
||||
<Group
|
||||
noWrap
|
||||
w="100%"
|
||||
>
|
||||
Save
|
||||
<Select
|
||||
searchable
|
||||
data={sortOptions}
|
||||
label="Sort"
|
||||
maxWidth="20%"
|
||||
width={125}
|
||||
{...extraFiltersForm.getInputProps('sortBy')}
|
||||
/>
|
||||
<Select
|
||||
data={[
|
||||
{
|
||||
label: 'Ascending',
|
||||
value: 'asc',
|
||||
},
|
||||
{
|
||||
label: 'Descending',
|
||||
value: 'desc',
|
||||
},
|
||||
]}
|
||||
label="Order"
|
||||
maxWidth="20%"
|
||||
width={125}
|
||||
{...extraFiltersForm.getInputProps('sortOrder')}
|
||||
/>
|
||||
<NumberInput
|
||||
label="Limit"
|
||||
maxWidth="20%"
|
||||
width={75}
|
||||
{...extraFiltersForm.getInputProps('limit')}
|
||||
/>
|
||||
</Group>
|
||||
<Group noWrap>
|
||||
<Button
|
||||
loading={isSaving}
|
||||
variant="filled"
|
||||
onClick={handleSaveAs}
|
||||
>
|
||||
Save as
|
||||
</Button>
|
||||
<DropdownMenu position="bottom-end">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
disabled={isSaving}
|
||||
p="0.5em"
|
||||
variant="default"
|
||||
>
|
||||
@ -335,12 +429,22 @@ export const PlaylistQueryBuilder = forwardRef(
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Item onClick={handleSaveAs}>Save as</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$danger
|
||||
rightSection={
|
||||
<RiSaveLine
|
||||
color="var(--danger-color)"
|
||||
size={15}
|
||||
/>
|
||||
}
|
||||
onClick={handleSave}
|
||||
>
|
||||
Save and replace
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
</Group>
|
||||
</Group>
|
||||
</Flex>
|
||||
</MotionFlex>
|
||||
);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { useRef } from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { Stack } from '@mantine/core';
|
||||
import { Group, Stack } from '@mantine/core';
|
||||
import { closeAllModals, openModal } from '@mantine/modals';
|
||||
import { AnimatePresence, motion, Variants } from 'framer-motion';
|
||||
import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
|
||||
import { generatePath, useNavigate, useParams } from 'react-router';
|
||||
import { PlaylistDetailSongListContent } from '../components/playlist-detail-song-list-content';
|
||||
import { PlaylistDetailSongListHeader } from '../components/playlist-detail-song-list-header';
|
||||
@ -11,23 +13,30 @@ import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playli
|
||||
import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
|
||||
import { Paper, toast } from '/@/renderer/components';
|
||||
import { Button, Paper, Text, toast } from '/@/renderer/components';
|
||||
import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
import { ServerType } from '/@/renderer/api/types';
|
||||
|
||||
const PlaylistDetailSongListRoute = () => {
|
||||
const navigate = useNavigate();
|
||||
const tableRef = useRef<AgGridReactType | null>(null);
|
||||
const { playlistId } = useParams() as { playlistId: string };
|
||||
const currentServer = useCurrentServer();
|
||||
|
||||
const detailQuery = usePlaylistDetail({ id: playlistId });
|
||||
const createPlaylistMutation = useCreatePlaylist();
|
||||
const deletePlaylistMutation = useDeletePlaylist();
|
||||
|
||||
const handleSave = (filter: Record<string, any>) => {
|
||||
const handleSave = (
|
||||
filter: Record<string, any>,
|
||||
extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
|
||||
) => {
|
||||
const rules = {
|
||||
...filter,
|
||||
order: 'desc',
|
||||
sort: 'year',
|
||||
limit: extraFilters.limit || undefined,
|
||||
order: extraFilters.sortOrder || 'desc',
|
||||
sort: extraFilters.sortBy || 'dateAdded',
|
||||
};
|
||||
|
||||
if (!detailQuery?.data) return;
|
||||
@ -87,28 +96,105 @@ const PlaylistDetailSongListRoute = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const smartPlaylistVariants: Variants = {
|
||||
animate: (custom: { isQueryBuilderExpanded: boolean }) => {
|
||||
return {
|
||||
maxHeight: custom.isQueryBuilderExpanded ? '35vh' : '3.5em',
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.3,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
y: 0,
|
||||
};
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -25,
|
||||
},
|
||||
initial: {
|
||||
opacity: 0,
|
||||
y: -25,
|
||||
},
|
||||
};
|
||||
|
||||
const isSmartPlaylist =
|
||||
!detailQuery?.isLoading &&
|
||||
detailQuery?.data?.rules &&
|
||||
currentServer?.type === ServerType.NAVIDROME;
|
||||
|
||||
const [showQueryBuilder, setShowQueryBuilder] = useState(false);
|
||||
const [isQueryBuilderExpanded, setIsQueryBuilderExpanded] = useState(false);
|
||||
|
||||
const handleToggleExpand = () => {
|
||||
setIsQueryBuilderExpanded((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleToggleShowQueryBuilder = () => {
|
||||
setShowQueryBuilder((prev) => !prev);
|
||||
setIsQueryBuilderExpanded(true);
|
||||
};
|
||||
|
||||
console.log('detailQuery?.data?.rules', detailQuery?.data?.rules);
|
||||
|
||||
return (
|
||||
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
|
||||
<Stack
|
||||
h="100%"
|
||||
spacing={0}
|
||||
>
|
||||
<PlaylistDetailSongListHeader tableRef={tableRef} />
|
||||
<PlaylistDetailSongListHeader
|
||||
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
|
||||
tableRef={tableRef}
|
||||
/>
|
||||
<AnimatePresence
|
||||
custom={{ isQueryBuilderExpanded }}
|
||||
initial={false}
|
||||
>
|
||||
{(isSmartPlaylist || showQueryBuilder) && (
|
||||
<motion.div
|
||||
animate="animate"
|
||||
custom={{ isQueryBuilderExpanded }}
|
||||
exit="exit"
|
||||
initial="initial"
|
||||
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||||
variants={smartPlaylistVariants}
|
||||
>
|
||||
<Paper
|
||||
sx={{
|
||||
maxHeight: '35vh',
|
||||
padding: '1rem',
|
||||
}}
|
||||
h="100%"
|
||||
pos="relative"
|
||||
w="100%"
|
||||
>
|
||||
{!detailQuery?.isLoading && (
|
||||
<Group
|
||||
pt="1rem"
|
||||
px="1rem"
|
||||
>
|
||||
<Button
|
||||
compact
|
||||
variant="default"
|
||||
onClick={handleToggleExpand}
|
||||
>
|
||||
{isQueryBuilderExpanded ? (
|
||||
<RiArrowUpSLine size={20} />
|
||||
) : (
|
||||
<RiArrowDownSLine size={20} />
|
||||
)}
|
||||
</Button>
|
||||
<Text>Query Editor</Text>
|
||||
</Group>
|
||||
<PlaylistQueryBuilder
|
||||
query={detailQuery?.data?.rules || { all: [] }}
|
||||
isSaving={createPlaylistMutation?.isLoading}
|
||||
limit={detailQuery?.data?.rules?.limit}
|
||||
query={detailQuery?.data?.rules}
|
||||
sortBy={detailQuery?.data?.rules?.sort || 'year'}
|
||||
sortOrder={detailQuery?.data?.rules?.order || 'desc'}
|
||||
onSave={handleSave}
|
||||
onSaveAs={handleSaveAs}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<PlaylistDetailSongListContent tableRef={tableRef} />
|
||||
</Stack>
|
||||
</AnimatedPage>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user