Add new Navidrome smart playlist operators (up to v0.52.0)

src/i18n/locales/en.json

@@ -84,6 +84,7 @@
         "owner": "owner",
         "path": "path",
         "playerMustBePaused": "player must be paused",
+        "preview": "preview",
         "previousSong": "previous $t(entity.track_one)",
         "quit": "quit",
         "random": "random",

src/renderer/api/navidrome.types.ts

@@ -400,6 +400,7 @@ export const NDSongQueryFields = [
     { label: 'File Type', type: 'string', value: 'filetype' },
     { label: 'Genre', type: 'string', value: 'genre' },
     { label: 'Has CoverArt', type: 'boolean', value: 'hascoverart' },
+    { label: 'Playlist', type: 'playlist', value: 'id' },
     { label: 'Is Compilation', type: 'boolean', value: 'compilation' },
     { label: 'Is Favorite', type: 'boolean', value: 'loved' },
     { label: 'Lyrics', type: 'string', value: 'lyrics' },
@@ -415,6 +416,11 @@ export const NDSongQueryFields = [
     { label: 'Year', type: 'number', value: 'year' },
 ];
 
+export const NDSongQueryPlaylistOperators = [
+    { label: 'is in', value: 'inPlaylist' },
+    { label: 'is not in', value: 'notInPlaylist' },
+];
+
 export const NDSongQueryDateOperators = [
     { label: 'is', value: 'is' },
     { label: 'is not', value: 'isNot' },

src/renderer/components/query-builder/index.tsx

@@ -54,8 +54,10 @@ interface QueryBuilderProps {
         boolean: { label: string; value: string }[];
         date: { label: string; value: string }[];
         number: { label: string; value: string }[];
+        playlist: { label: string; value: string }[];
         string: { label: string; value: string }[];
     };
+    playlists?: { label: string; value: string }[];
     uniqueId: string;
 }
 
@@ -73,6 +75,7 @@ export const QueryBuilder = ({
     onChangeValue,
     onClearFilters,
     onResetFilters,
+    playlists,
     groupIndex,
     uniqueId,
     filters,
@@ -180,6 +183,7 @@ export const QueryBuilder = ({
                             level={level}
                             noRemove={data?.rules?.length === 1}
                             operators={operators}
+                            selectData={playlists}
                             onChangeField={onChangeField}
                             onChangeOperator={onChangeOperator}
                             onChangeValue={onChangeValue}
@@ -204,6 +208,7 @@ export const QueryBuilder = ({
                                 groupIndex={[...(groupIndex || []), index]}
                                 level={level + 1}
                                 operators={operators}
+                                playlists={playlists}
                                 uniqueId={group.uniqueId}
                                 onAddRule={onAddRule}
                                 onAddRuleGroup={onAddRuleGroup}

src/renderer/components/query-builder/query-builder-option.tsx

@@ -28,9 +28,10 @@ interface QueryOptionProps {
         number: { label: string; value: string }[];
         string: { label: string; value: string }[];
     };
+    selectData?: { label: string; value: string }[];
 }
 
-const QueryValueInput = ({ onChange, type, ...props }: any) => {
+const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
     const [numberRange, setNumberRange] = useState([0, 0]);
 
     switch (type) {
@@ -59,7 +60,6 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     {...props}
                 />
             );
-
         case 'dateRange':
             return (
                 <>
@@ -87,7 +87,6 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     />
                 </>
             );
-
         case 'boolean':
             return (
                 <Select
@@ -99,6 +98,14 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     {...props}
                 />
             );
+        case 'playlist':
+            return (
+                <Select
+                    data={data}
+                    onChange={onChange}
+                    {...props}
+                />
+            );
 
         default:
             return <></>;
@@ -116,6 +123,7 @@ export const QueryBuilderOption = ({
     onChangeField,
     onChangeOperator,
     onChangeValue,
+    selectData,
 }: QueryOptionProps) => {
     const { field, operator, uniqueId, value } = data;
 
@@ -133,10 +141,7 @@ export const QueryBuilderOption = ({
 
     const handleChangeValue = (e: any) => {
         const isDirectValue =
-            typeof e === 'string' ||
-            typeof e === 'number' ||
-            typeof e === 'undefined' ||
-            typeof e === null;
+            typeof e === 'string' || typeof e === 'number' || typeof e === 'undefined';
 
         if (isDirectValue) {
             return onChangeValue({
@@ -207,6 +212,7 @@ export const QueryBuilderOption = ({
             />
             {field ? (
                 <QueryValueInput
+                    data={selectData || []}
                     defaultValue={value}
                     maxWidth={170}
                     size="sm"

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

@@ -1,6 +1,7 @@
-import { forwardRef, Ref, useImperativeHandle, useState } from 'react';
+import { forwardRef, Ref, useImperativeHandle, useMemo, useState } from 'react';
 import { Group } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { openModal } from '@mantine/modals';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import setWith from 'lodash/setWith';
@@ -21,14 +22,18 @@ import {
 import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
 import { useTranslation } from 'react-i18next';
 import { RiMore2Fill, RiSaveLine } from 'react-icons/ri';
-import { SongListSort } from '/@/renderer/api/types';
+import { PlaylistListSort, SongListSort, SortOrder } from '/@/renderer/api/types';
 import {
     NDSongQueryBooleanOperators,
     NDSongQueryDateOperators,
     NDSongQueryFields,
     NDSongQueryNumberOperators,
+    NDSongQueryPlaylistOperators,
     NDSongQueryStringOperators,
 } from '/@/renderer/api/navidrome.types';
+import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
+import { useCurrentServer } from '/@/renderer/store';
+import { JsonPreview } from '/@/renderer/features/shared/components/json-preview';
 
 type AddArgs = {
     groupIndex: number[];
@@ -52,6 +57,7 @@ interface PlaylistQueryBuilderProps {
         parsedFilter: any,
         extraFilters: { limit?: number; sortBy?: string; sortOrder?: string },
     ) => void;
+    playlistId?: string;
     query: any;
     sortBy: SongListSort;
     sortOrder: 'asc' | 'desc';
@@ -84,14 +90,43 @@ export type PlaylistQueryBuilderRef = {
 
 export const PlaylistQueryBuilder = forwardRef(
     (
-        { sortOrder, sortBy, limit, isSaving, query, onSave, onSaveAs }: PlaylistQueryBuilderProps,
+        {
+            sortOrder,
+            sortBy,
+            limit,
+            isSaving,
+            query,
+            onSave,
+            onSaveAs,
+            playlistId,
+        }: PlaylistQueryBuilderProps,
         ref: Ref<PlaylistQueryBuilderRef>,
     ) => {
         const { t } = useTranslation();
+        const server = useCurrentServer();
         const [filters, setFilters] = useState<QueryBuilderGroup>(
             query ? convertNDQueryToQueryGroup(query) : DEFAULT_QUERY,
         );
 
+        const { data: playlists } = usePlaylistList({
+            query: { sortBy: PlaylistListSort.NAME, sortOrder: SortOrder.ASC, startIndex: 0 },
+            serverId: server?.id,
+        });
+
+        const playlistData = useMemo(() => {
+            if (!playlists) return [];
+
+            return playlists.items
+                .filter((p) => {
+                    if (!playlistId) return true;
+                    return p.id !== playlistId;
+                })
+                .map((p) => ({
+                    label: p.name,
+                    value: p.id,
+                }));
+        }, [playlistId, playlists]);
+
         const extraFiltersForm = useForm({
             initialValues: {
                 limit,
@@ -131,6 +166,16 @@ export const PlaylistQueryBuilder = forwardRef(
             onSaveAs?.(convertQueryGroupToNDQuery(filters), extraFiltersForm.values);
         };
 
+        const openPreviewModal = () => {
+            const previewValue = convertQueryGroupToNDQuery(filters);
+
+            openModal({
+                children: <JsonPreview value={previewValue} />,
+                size: 'xl',
+                title: t('common.preview', { postProcess: 'titleCase' }),
+            });
+        };
+
         const handleAddRuleGroup = (args: AddArgs) => {
             const { level, groupIndex } = args;
             const filtersCopy = clone(filters);
@@ -367,7 +412,7 @@ export const PlaylistQueryBuilder = forwardRef(
         return (
             <MotionFlex
                 direction="column"
-                h="calc(100% - 2.5rem)"
+                h="calc(100% - 3.5rem)"
                 justify="space-between"
             >
                 <ScrollArea
@@ -383,8 +428,10 @@ export const PlaylistQueryBuilder = forwardRef(
                             boolean: NDSongQueryBooleanOperators,
                             date: NDSongQueryDateOperators,
                             number: NDSongQueryNumberOperators,
+                            playlist: NDSongQueryPlaylistOperators,
                             string: NDSongQueryStringOperators,
                         }}
+                        playlists={playlistData}
                         uniqueId={filters.uniqueId}
                         onAddRule={handleAddRule}
                         onAddRuleGroup={handleAddRuleGroup}
@@ -428,7 +475,7 @@ export const PlaylistQueryBuilder = forwardRef(
                                     value: 'desc',
                                 },
                             ]}
-                            label={t('common.order', { postProcess: 'titleCase' })}
+                            label={t('common.sortOrder', { postProcess: 'titleCase' })}
                             maxWidth="20%"
                             width={125}
                             {...extraFiltersForm.getInputProps('sortOrder')}
@@ -452,6 +499,13 @@ export const PlaylistQueryBuilder = forwardRef(
                             >
                                 {t('common.saveAs', { postProcess: 'titleCase' })}
                             </Button>
+                            <Button
+                                p="0.5em"
+                                variant="default"
+                                onClick={openPreviewModal}
+                            >
+                                {t('common.preview', { postProcess: 'titleCase' })}
+                            </Button>
                             <DropdownMenu position="bottom-end">
                                 <DropdownMenu.Target>
                                     <Button

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

@@ -196,6 +196,7 @@ const PlaylistDetailSongListRoute = () => {
                                 key={JSON.stringify(detailQuery?.data?.rules)}
                                 isSaving={createPlaylistMutation?.isLoading}
                                 limit={detailQuery?.data?.rules?.limit}
+                                playlistId={playlistId}
                                 query={detailQuery?.data?.rules}
                                 sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
                                 sortOrder={detailQuery?.data?.rules?.order || 'asc'}

src/renderer/features/shared/components/json-preview.tsx

@@ -0,0 +1,7 @@
+interface JsonPreviewProps {
+    value: string | Record<string, any>;
+}
+
+export const JsonPreview = ({ value }: JsonPreviewProps) => {
+    return <pre style={{ userSelect: 'all' }}>{JSON.stringify(value, null, 2)}</pre>;
+};