Initial work: support showing studios for jellyfin, allow pill to be clickable (#1566)

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

@@ -49,6 +49,7 @@ import {
     AlbumListSort,
     ExplicitStatus,
     LibraryItem,
+    ServerType,
     Song,
     SongListSort,
     SortOrder,
@@ -152,8 +153,15 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
         if (!album?.recordLabels || album.recordLabels.length === 0) return [];
 
         return album.recordLabels.map((label) => {
+            if (album._serverType === ServerType.SUBSONIC) {
+                return { id: label, label: label, url: null };
+            }
+
             const searchParams = new URLSearchParams();
-            const customFilters = { recordlabel: [label] };
+            const customFilters =
+                album._serverType === ServerType.JELLYFIN
+                    ? { Studios: [label] }
+                    : { recordlabel: [label] };
             const paramsWithCustom = setJsonSearchParam(
                 searchParams,
                 FILTER_KEYS.ALBUM._CUSTOM,
@@ -183,15 +191,21 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
                     </Text>
                     <div className={styles['pill-group-wrapper']}>
                         <Pill.Group>
-                            {recordLabels.map((recordLabel) => (
-                                <PillLink
-                                    key={`recordlabel-${recordLabel.id}`}
-                                    size="md"
-                                    to={recordLabel.url}
-                                >
-                                    {recordLabel.label}
-                                </PillLink>
-                            ))}
+                            {recordLabels.map((recordLabel) =>
+                                recordLabel.url ? (
+                                    <PillLink
+                                        key={`recordlabel-${recordLabel.id}`}
+                                        size="md"
+                                        to={recordLabel.url}
+                                    >
+                                        {recordLabel.label}
+                                    </PillLink>
+                                ) : (
+                                    <Pill key={`recordlabel-${recordLabel.id}`} size="md">
+                                        {recordLabel.label}
+                                    </Pill>
+                                ),
+                            )}
                         </Pill.Group>
                     </div>
                 </Stack>

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

@@ -3,16 +3,15 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
 import { useCurrentServerId } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
 import { Button } from '/@/shared/components/button/button';
@@ -78,19 +77,6 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
         }));
     }, [genreListQuery.data]);
 
-    const tagsQuery = useQuery(
-        sharedQueries.tagList({
-            options: {
-                gcTime: 1000 * 60 * 2,
-                staleTime: 1000 * 60 * 1,
-            },
-            query: {
-                type: LibraryItem.ALBUM,
-            },
-            serverId,
-        }),
-    );
-
     const yesNoFilter = useMemo(() => {
         const filters = [
             {
@@ -204,13 +190,6 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
         [setAlbumArtist],
     );
 
-    const handleTagFilter = useCallback(
-        (e: null | string[]) => {
-            setCustom({ Tags: e && e.length > 0 ? e.join('|') : null });
-        },
-        [setCustom],
-    );
-
     const debouncedHandleMinYearFilter = useDebouncedCallback(handleMinYearFilter, 300);
     const debouncedHandleMaxYearFilter = useDebouncedCallback(handleMaxYearFilter, 300);
 
@@ -358,17 +337,7 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
                     value={query.maxYear ?? undefined}
                 />
             </Group>
-            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
-                <MultiSelectWithInvalidData
-                    clearable
-                    data={tagsQuery.data.boolTags}
-                    label={t('common.tags', { postProcess: 'sentenceCase' })}
-                    onChange={handleTagFilter}
-                    searchable
-                    value={query._custom?.[tagsQuery.data.boolTags.join('|')] || []}
-                    width={250}
-                />
-            )}
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.ALBUM} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}

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

@@ -1,22 +1,19 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
-import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
+import { useCurrentServer } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
-import { titleCase } from '/@/renderer/utils';
-import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
@@ -50,6 +47,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
         query,
         setAlbumArtist,
         setCompilation,
+        setCustom,
         setFavorite,
         setGenreId,
         setHasRating,
@@ -355,8 +353,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
                 onChange={(e) => debouncedHandleYearFilter(e)}
                 value={query.minYear ?? undefined}
             />
-            <Divider my="md" />
-            <TagFilters />
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.ALBUM} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}
@@ -364,111 +361,3 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
         </Stack>
     );
 };
-
-interface TagFilterItemProps {
-    label: string;
-    onChange: (value: null | string[]) => void;
-    options: Array<{ id: string; name: string }>;
-    tagValue: string;
-    value: string | string[] | undefined;
-}
-
-const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
-    const selectData = useMemo(
-        () =>
-            options.map((option) => ({
-                label: option.name,
-                value: option.id,
-            })),
-        [options],
-    );
-
-    const currentValue = useMemo(() => {
-        if (!value) return [];
-        return Array.isArray(value) ? value : [value];
-    }, [value]);
-
-    const handleChange = useCallback(
-        (e: null | string[]) => {
-            if (e && e.length > 0) {
-                onChange(e);
-            } else {
-                onChange(null);
-            }
-        },
-        [onChange],
-    );
-
-    return (
-        <MultiSelectWithInvalidData
-            clearable
-            data={selectData}
-            key={tagValue}
-            label={label}
-            limit={100}
-            onChange={handleChange}
-            searchable
-            value={currentValue}
-        />
-    );
-};
-
-TagFilterItem.displayName = 'TagFilterItem';
-
-const TagFilters = () => {
-    const { query, setCustom } = useAlbumListFilters();
-
-    const serverId = useCurrentServerId();
-
-    const tagsQuery = useSuspenseQuery(
-        sharedQueries.tagList({
-            options: {
-                gcTime: 1000 * 60 * 60,
-                staleTime: 1000 * 60 * 60,
-            },
-            query: {
-                type: LibraryItem.ALBUM,
-            },
-            serverId,
-        }),
-    );
-
-    const handleTagFilter = useMemo(
-        () => (tag: string, e: null | string[]) => {
-            setCustom({ [tag]: e });
-        },
-        [setCustom],
-    );
-
-    const tags = useMemo(() => {
-        const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
-            [];
-
-        for (const tag of tagsQuery.data?.enumTags || []) {
-            if (!tagsQuery.data?.excluded.album.includes(tag.name)) {
-                results.push({
-                    label: NDSongQueryFieldsLabelMap[tag.name] ?? titleCase(tag.name),
-                    options: tag.options,
-                    value: tag.name,
-                });
-            }
-        }
-
-        return results;
-    }, [tagsQuery.data]);
-
-    return (
-        <>
-            {tags.map((tag) => (
-                <TagFilterItem
-                    key={tag.value}
-                    label={tag.label}
-                    onChange={(e) => handleTagFilter(tag.value, e)}
-                    options={tag.options}
-                    tagValue={tag.value}
-                    value={query._custom?.[tag.value] as string | string[] | undefined}
-                />
-            ))}
-        </>
-    );
-};

src/renderer/features/shared/components/tag-filter.tsx

@@ -0,0 +1,124 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+
+import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
+import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
+import { useCurrentServerId } from '/@/renderer/store';
+import { titleCase } from '/@/renderer/utils';
+import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+interface TagFilterItemProps {
+    label: string;
+    onChange: (value: null | string[]) => void;
+    options: Array<{ id: string; name: string }>;
+    tagValue: string;
+    value: string | string[] | undefined;
+}
+
+const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
+    const selectData = useMemo(
+        () =>
+            options.map((option) => ({
+                label: option.name,
+                value: option.id,
+            })),
+        [options],
+    );
+
+    const defaultValue = useMemo(() => {
+        if (!value) return [];
+        return Array.isArray(value) ? value : [value];
+    }, [value]);
+
+    const handleChange = useCallback(
+        (e: null | string[]) => {
+            if (e && e.length > 0) {
+                onChange(e);
+            } else {
+                onChange(null);
+            }
+        },
+        [onChange],
+    );
+
+    return (
+        <MultiSelectWithInvalidData
+            clearable
+            data={selectData}
+            defaultValue={defaultValue}
+            key={tagValue}
+            label={label}
+            limit={100}
+            onChange={handleChange}
+            searchable
+        />
+    );
+};
+
+TagFilterItem.displayName = 'TagFilterItem';
+
+interface TagFiltersProps {
+    query: Record<string, any | undefined>;
+    setCustom: (value: null | Record<string, any>) => void;
+    type: LibraryItem.ALBUM | LibraryItem.SONG;
+}
+
+export const TagFilters = ({ query, setCustom, type }: TagFiltersProps) => {
+    const serverId = useCurrentServerId();
+
+    const tagsQuery = useSuspenseQuery(
+        sharedQueries.tagList({
+            options: {
+                gcTime: 1000 * 60 * 60,
+                staleTime: 1000 * 60 * 60,
+            },
+            query: { type },
+            serverId,
+        }),
+    );
+
+    const handleTagFilter = useMemo(
+        () => (tag: string, e: null | string[]) => {
+            setCustom({ [tag]: e || undefined });
+        },
+        [setCustom],
+    );
+
+    const enumTags = useMemo(() => {
+        const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
+            [];
+
+        const excluded =
+            type === LibraryItem.ALBUM
+                ? tagsQuery.data?.excluded.album
+                : tagsQuery.data?.excluded.song;
+
+        for (const tag of tagsQuery.data?.tags || []) {
+            if (!excluded.includes(tag.name)) {
+                results.push({
+                    label: NDSongQueryFieldsLabelMap[tag.name] ?? titleCase(tag.name),
+                    options: tag.options,
+                    value: tag.name,
+                });
+            }
+        }
+
+        return results;
+    }, [tagsQuery.data?.tags, tagsQuery.data?.excluded.album, tagsQuery.data?.excluded.song, type]);
+
+    return (
+        <>
+            {enumTags.map((tag) => (
+                <TagFilterItem
+                    key={tag.value}
+                    label={tag.label}
+                    onChange={(e) => handleTagFilter(tag.value, e)}
+                    options={tag.options}
+                    tagValue={tag.value}
+                    value={query._custom?.[tag.value] as string | string[] | undefined}
+                />
+            ))}
+        </>
+    );
+};

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

@@ -1,17 +1,16 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { useCurrentServer } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
@@ -87,25 +86,12 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
         }));
     }, [albumArtistListQuery.data?.items]);
 
-    const tagsQuery = useQuery(
-        sharedQueries.tagList({
-            query: {
-                type: LibraryItem.SONG,
-            },
-            serverId,
-        }),
-    );
-
     const selectedArtistIds = useMemo(() => query.artistIds || [], [query.artistIds]);
 
     const selectedGenres = useMemo(() => {
         return query._custom?.GenreIds?.split(',') || [];
     }, [query._custom?.GenreIds]);
 
-    const selectedTags = useMemo(() => {
-        return query._custom?.Tags?.split('|');
-    }, [query._custom?.Tags]);
-
     const yesNoFilters = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
@@ -181,13 +167,6 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
         [setCustom],
     );
 
-    const handleTagFilter = useCallback(
-        (e: null | string[]) => {
-            setCustom({ Tags: e && e.length > 0 ? e.join('|') : null });
-        },
-        [setCustom],
-    );
-
     const artistSelectMode = useAppStore((state) => state.artistSelectMode);
     const genreSelectMode = useAppStore((state) => state.genreSelectMode);
     const { setArtistSelectMode, setGenreSelectMode } = useAppStoreActions();
@@ -339,16 +318,7 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
                     value={query.maxYear ?? undefined}
                 />
             </Group>
-            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
-                <MultiSelectWithInvalidData
-                    clearable
-                    data={tagsQuery.data.boolTags}
-                    label={t('common.tags', { postProcess: 'sentenceCase' })}
-                    onChange={handleTagFilter}
-                    searchable
-                    value={selectedTags}
-                />
-            )}
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.SONG} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}

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

@@ -3,20 +3,17 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
-import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
+import { useCurrentServer } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
-import { titleCase } from '/@/renderer/utils';
-import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
@@ -32,8 +29,16 @@ export const NavidromeSongFilters = () => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const serverId = server.id;
-    const { clear, query, setArtistIds, setFavorite, setGenreId, setMaxYear, setMinYear } =
-        useSongListFilters();
+    const {
+        clear,
+        query,
+        setArtistIds,
+        setCustom,
+        setFavorite,
+        setGenreId,
+        setMaxYear,
+        setMinYear,
+    } = useSongListFilters();
 
     const { customFilters } = useListContext();
 
@@ -292,8 +297,7 @@ export const NavidromeSongFilters = () => {
                 onChange={(e) => debouncedHandleYearFilter(e)}
                 value={query.minYear ?? undefined}
             />
-            <Divider my="md" />
-            <TagFilters />
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.SONG} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}
@@ -301,105 +305,3 @@ export const NavidromeSongFilters = () => {
         </Stack>
     );
 };
-
-interface TagFilterItemProps {
-    label: string;
-    onChange: (value: null | string[]) => void;
-    options: Array<{ id: string; name: string }>;
-    tagValue: string;
-    value: string | string[] | undefined;
-}
-
-const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
-    const selectData = useMemo(
-        () =>
-            options.map((option) => ({
-                label: option.name,
-                value: option.id,
-            })),
-        [options],
-    );
-
-    const currentValue = useMemo(() => {
-        if (!value) return [];
-        return Array.isArray(value) ? value : [value];
-    }, [value]);
-
-    const handleChange = useCallback(
-        (e: null | string[]) => {
-            if (e && e.length > 0) {
-                onChange(e);
-            } else {
-                onChange(null);
-            }
-        },
-        [onChange],
-    );
-
-    return (
-        <MultiSelectWithInvalidData
-            clearable
-            data={selectData}
-            key={tagValue}
-            label={label}
-            limit={100}
-            onChange={handleChange}
-            searchable
-            value={currentValue}
-        />
-    );
-};
-
-TagFilterItem.displayName = 'TagFilterItem';
-
-const TagFilters = () => {
-    const { query, setCustom } = useSongListFilters();
-
-    const serverId = useCurrentServerId();
-
-    const tagsQuery = useSuspenseQuery(
-        sharedQueries.tagList({
-            query: { type: LibraryItem.SONG },
-            serverId,
-        }),
-    );
-
-    const handleTagFilter = useMemo(
-        () => (tag: string, e: null | string[]) => {
-            setCustom({ [tag]: e });
-        },
-        [setCustom],
-    );
-
-    const tags = useMemo(() => {
-        const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
-            [];
-
-        for (const tag of tagsQuery.data?.enumTags || []) {
-            if (!tagsQuery.data?.excluded.song.includes(tag.name)) {
-                results.push({
-                    label: NDSongQueryFieldsLabelMap[tag.name] ?? titleCase(tag.name),
-                    options: tag.options,
-                    value: tag.name,
-                });
-            }
-        }
-
-        return results;
-    }, [tagsQuery.data]);
-
-    return (
-        <>
-            {tags.map((tag) => (
-                <TagFilterItem
-                    key={tag.value}
-                    label={tag.label}
-                    onChange={(e) => handleTagFilter(tag.value, e)}
-                    options={tag.options}
-                    tagValue={tag.value}
-                    value={query._custom?.[tag.value] as string | string[] | undefined}
-                />
-            ))}
-        </>
-    );
-};