mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
Merge branch 'development' into related-similar-songs
This commit is contained in:
commit
132b0e173f
69 changed files with 891 additions and 565 deletions
|
|
@ -15,7 +15,7 @@ import {
|
|||
RiSettings3Fill,
|
||||
} from 'react-icons/ri';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { AlbumListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
|
||||
import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
|
||||
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
|
||||
import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
|
||||
|
|
@ -31,7 +31,7 @@ import {
|
|||
useListStoreActions,
|
||||
useListStoreByKey,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, Play, ServerType, TableColumn } from '/@/renderer/types';
|
||||
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
|
||||
const FILTERS = {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { RiFolder2Line, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react
|
|||
import { useListContext } from '../../../context/list-context';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
|
||||
import { AlbumArtistListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
|
||||
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
|
||||
import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
|
||||
|
|
@ -21,7 +21,7 @@ import {
|
|||
useListStoreActions,
|
||||
useListStoreByKey,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, ServerType, TableColumn } from '/@/renderer/types';
|
||||
import { ListDisplayType, TableColumn } from '/@/renderer/types';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
|
||||
const FILTERS = {
|
||||
|
|
|
|||
|
|
@ -522,7 +522,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
|
|||
|
||||
const handleUpdateRating = useCallback(
|
||||
(rating: number) => {
|
||||
if (!ctx.dataNodes || !ctx.data) return;
|
||||
if (!ctx.dataNodes && !ctx.data) return;
|
||||
|
||||
let uniqueServerIds: string[] = [];
|
||||
let items: AnyLibraryItems = [];
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ import {
|
|||
usePlayerStore,
|
||||
} from '/@/renderer/store';
|
||||
import { SetActivity } from '@xhayper/discord-rpc';
|
||||
import { PlayerStatus, ServerType } from '/@/renderer/types';
|
||||
import { PlayerStatus } from '/@/renderer/types';
|
||||
import { ServerType } from '/@/renderer/api/types';
|
||||
|
||||
const discordRpc = isElectron() ? window.electron.discordRpc : null;
|
||||
|
||||
|
|
@ -40,7 +41,7 @@ export const useDiscordRpc = () => {
|
|||
largeImageText: currentSong?.album || 'Unknown album',
|
||||
smallImageKey: undefined,
|
||||
smallImageText: currentStatus,
|
||||
state: artists && `By ${artists}` || "Unknown artist",
|
||||
state: (artists && `By ${artists}`) || 'Unknown artist',
|
||||
};
|
||||
|
||||
if (currentStatus === PlayerStatus.PLAYING) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useQueryClient } from '@tanstack/react-query';
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { RiFolder2Fill, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
|
||||
import { GenreListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
|
||||
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
|
||||
import { GENRE_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
|
||||
|
|
@ -19,7 +19,7 @@ import {
|
|||
useListStoreActions,
|
||||
useListStoreByKey,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, ServerType, TableColumn } from '/@/renderer/types';
|
||||
import { ListDisplayType, TableColumn } from '/@/renderer/types';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
|
||||
const FILTERS = {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,16 @@ import {
|
|||
InternetProviderLyricResponse,
|
||||
FullLyricsMetadata,
|
||||
LyricGetQuery,
|
||||
SubsonicExtensions,
|
||||
StructuredLyric,
|
||||
ServerType,
|
||||
} from '/@/renderer/api/types';
|
||||
import { QueryHookArgs } from '/@/renderer/lib/react-query';
|
||||
import { getServerById, useLyricsSettings } from '/@/renderer/store';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { ServerType } from '/@/renderer/types';
|
||||
import { api } from '/@/renderer/api';
|
||||
import isElectron from 'is-electron';
|
||||
import { hasFeature } from '/@/renderer/api/utils';
|
||||
import { ServerFeature } from '/@/renderer/api/features.types';
|
||||
|
||||
const lyricsIpc = isElectron() ? window.electron.lyrics : null;
|
||||
|
||||
|
|
@ -112,7 +113,7 @@ export const useSongLyricsBySong = (
|
|||
source: server?.name ?? 'music server',
|
||||
};
|
||||
}
|
||||
} else if (server.features && SubsonicExtensions.SONG_LYRICS in server.features) {
|
||||
} else if (hasFeature(server, ServerFeature.SONG_LYRICS)) {
|
||||
const subsonicLyrics = await api.controller
|
||||
.getStructuredLyrics({
|
||||
apiClientProps: { server, signal },
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export const FullScreenPlayerImage = () => {
|
|||
const albumArtRes = useSettingsStore((store) => store.general.albumArtRes);
|
||||
|
||||
const { queue } = usePlayerData();
|
||||
const { opacity, useImageAspectRatio } = useFullScreenPlayerStore();
|
||||
const { useImageAspectRatio } = useFullScreenPlayerStore();
|
||||
const currentSong = queue.current;
|
||||
const { color: background } = useFastAverageColor({
|
||||
algorithm: 'dominant',
|
||||
|
|
@ -250,7 +250,6 @@ export const FullScreenPlayerImage = () => {
|
|||
<MetadataContainer
|
||||
className="full-screen-player-image-metadata"
|
||||
maw="100%"
|
||||
opacity={opacity}
|
||||
spacing="xs"
|
||||
>
|
||||
<TextTitle
|
||||
|
|
@ -278,7 +277,6 @@ export const FullScreenPlayerImage = () => {
|
|||
to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
|
||||
albumId: currentSong?.albumId || '',
|
||||
})}
|
||||
transform="uppercase"
|
||||
w="100%"
|
||||
weight={600}
|
||||
>
|
||||
|
|
@ -292,7 +290,6 @@ export const FullScreenPlayerImage = () => {
|
|||
style={{
|
||||
textShadow: 'var(--fullscreen-player-text-shadow)',
|
||||
}}
|
||||
transform="uppercase"
|
||||
>
|
||||
{index > 0 && (
|
||||
<Text
|
||||
|
|
@ -313,7 +310,6 @@ export const FullScreenPlayerImage = () => {
|
|||
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: artist.id,
|
||||
})}
|
||||
transform="uppercase"
|
||||
weight={600}
|
||||
>
|
||||
{artist.name}
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@ const HeaderItemWrapper = styled.div`
|
|||
z-index: 2;
|
||||
`;
|
||||
|
||||
interface TransparendGridContainerProps {
|
||||
interface TransparentGridContainerProps {
|
||||
opacity: number;
|
||||
}
|
||||
|
||||
const GridContainer = styled.div<TransparendGridContainerProps>`
|
||||
const GridContainer = styled.div<TransparentGridContainerProps>`
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ const Controls = () => {
|
|||
defaultValue={opacity}
|
||||
label={(e) => `${e} %`}
|
||||
max={100}
|
||||
min={1}
|
||||
min={0}
|
||||
w="100%"
|
||||
onChangeEnd={(e) => setStore({ opacity: Number(e) })}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,12 @@ import {
|
|||
ServerType,
|
||||
GenreListSort,
|
||||
SortOrder,
|
||||
ServerListItem,
|
||||
} from '/@/renderer/api/types';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { useAuthStore } from '/@/renderer/store';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { Play, PlayQueueAddOptions, ServerListItem } from '/@/renderer/types';
|
||||
import { Play, PlayQueueAddOptions } from '/@/renderer/types';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
|
||||
interface ShuffleAllSlice extends RandomSongListQuery {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ import {
|
|||
SongListResponse,
|
||||
SongListSort,
|
||||
SortOrder,
|
||||
ServerListItem,
|
||||
ServerType,
|
||||
} from '/@/renderer/api/types';
|
||||
import { ServerListItem, ServerType } from '/@/renderer/types';
|
||||
|
||||
export const getPlaylistSongsById = async (args: {
|
||||
id: string;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/crea
|
|||
import { convertQueryGroupToNDQuery } from '/@/renderer/features/playlists/utils';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { hasFeature } from '/@/renderer/api/utils';
|
||||
import { ServerFeature } from '/@/renderer/api/features.types';
|
||||
|
||||
interface CreatePlaylistFormProps {
|
||||
onCancel: () => void;
|
||||
|
|
@ -120,12 +122,13 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
|
|||
})}
|
||||
/>
|
||||
)}
|
||||
{server?.type === ServerType.NAVIDROME && (
|
||||
<Switch
|
||||
label="Is smart playlist?"
|
||||
onChange={(e) => setIsSmartPlaylist(e.currentTarget.checked)}
|
||||
/>
|
||||
)}
|
||||
{server?.type === ServerType.NAVIDROME &&
|
||||
hasFeature(server, ServerFeature.SMART_PLAYLISTS) && (
|
||||
<Switch
|
||||
label="Is smart playlist?"
|
||||
onChange={(e) => setIsSmartPlaylist(e.currentTarget.checked)}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
{server?.type === ServerType.NAVIDROME && isSmartPlaylist && (
|
||||
<Stack pt="1rem">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,13 @@ import {
|
|||
} 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 {
|
||||
LibraryItem,
|
||||
PlaylistSongListQuery,
|
||||
ServerType,
|
||||
SongListSort,
|
||||
SortOrder,
|
||||
} from '/@/renderer/api/types';
|
||||
import {
|
||||
DropdownMenu,
|
||||
Button,
|
||||
|
|
@ -39,7 +45,7 @@ import {
|
|||
useSetPlaylistStore,
|
||||
useSetPlaylistTablePagination,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, ServerType, Play, TableColumn } from '/@/renderer/types';
|
||||
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
|
||||
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
|
||||
import { useParams, useNavigate } from 'react-router';
|
||||
import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/compon
|
|||
import { LibraryHeaderBar } from '/@/renderer/features/shared';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import { PlaylistListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
|
||||
import { ListDisplayType, ServerType } from '/@/renderer/types';
|
||||
import { ListDisplayType } from '/@/renderer/types';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiFileAddFill } from 'react-icons/ri';
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { LibraryItem, ServerType } from '/@/renderer/api/types';
|
||||
import { useListFilterRefresh } from '../../../hooks/use-list-filter-refresh';
|
||||
import { useListContext } from '/@/renderer/context/list-context';
|
||||
import { useListStoreByKey } from '../../../store/list.store';
|
||||
|
|
|
|||
|
|
@ -4,12 +4,11 @@ import { nanoid } from 'nanoid/non-secure';
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { generatePath, useNavigate } from 'react-router';
|
||||
import { createSearchParams } from 'react-router-dom';
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { LibraryItem, ServerType } from '/@/renderer/api/types';
|
||||
import { CreatePlaylistForm } from '/@/renderer/features/playlists';
|
||||
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
import { ServerType } from '/@/renderer/types';
|
||||
|
||||
interface HomeCommandsProps {
|
||||
handleClose: () => void;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { openModal } from '@mantine/modals';
|
|||
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
|
||||
import { ServerList } from '/@/renderer/features/servers';
|
||||
import { useAuthStoreActions, useServerList } from '/@/renderer/store';
|
||||
import { ServerListItem } from '/@/renderer/types';
|
||||
import { ServerListItem } from '/@/renderer/api/types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ import { useFocusTrap } from '@mantine/hooks';
|
|||
import { closeAllModals } from '@mantine/modals';
|
||||
import isElectron from 'is-electron';
|
||||
import { nanoid } from 'nanoid/non-secure';
|
||||
import { AuthenticationResponse } from '/@/renderer/api/types';
|
||||
import { AuthenticationResponse, ServerType } from '/@/renderer/api/types';
|
||||
import { useAuthStoreActions } from '/@/renderer/store';
|
||||
import { ServerType } from '/@/renderer/types';
|
||||
import { ServerType, toServerType } from '/@/renderer/types';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
|
@ -33,15 +33,27 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
|
|||
const form = useForm({
|
||||
initialValues: {
|
||||
legacyAuth: false,
|
||||
name: '',
|
||||
name: (localSettings ? localSettings.env.SERVER_NAME : window.SERVER_NAME) ?? '',
|
||||
password: '',
|
||||
savePassword: false,
|
||||
type: ServerType.JELLYFIN,
|
||||
url: 'http://',
|
||||
type:
|
||||
(localSettings
|
||||
? localSettings.env.SERVER_TYPE
|
||||
: toServerType(window.SERVER_TYPE)) ?? ServerType.JELLYFIN,
|
||||
url: (localSettings ? localSettings.env.SERVER_URL : window.SERVER_URL) ?? 'https://',
|
||||
username: '',
|
||||
},
|
||||
});
|
||||
|
||||
// server lock for web is only true if lock is true *and* all other properties are set
|
||||
const serverLock =
|
||||
(localSettings
|
||||
? !!localSettings.env.SERVER_LOCK
|
||||
: !!window.SERVER_LOCK &&
|
||||
window.SERVER_TYPE &&
|
||||
window.SERVER_NAME &&
|
||||
window.SERVER_URL) || false;
|
||||
|
||||
const isSubmitDisabled = !form.values.name || !form.values.url || !form.values.username;
|
||||
|
||||
const handleSubmit = form.onSubmit(async (values) => {
|
||||
|
|
@ -62,7 +74,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
|
|||
password: values.password,
|
||||
username: values.username,
|
||||
},
|
||||
values.type,
|
||||
values.type as ServerType,
|
||||
);
|
||||
|
||||
if (!data) {
|
||||
|
|
@ -76,7 +88,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
|
|||
id: nanoid(),
|
||||
name: values.name,
|
||||
ndCredential: data.ndCredential,
|
||||
type: values.type,
|
||||
type: values.type as ServerType,
|
||||
url: values.url.replace(/\/$/, ''),
|
||||
userId: data.userId,
|
||||
username: data.username,
|
||||
|
|
@ -117,11 +129,13 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
|
|||
>
|
||||
<SegmentedControl
|
||||
data={SERVER_TYPES}
|
||||
disabled={serverLock}
|
||||
{...form.getInputProps('type')}
|
||||
/>
|
||||
<Group grow>
|
||||
<TextInput
|
||||
data-autofocus
|
||||
disabled={serverLock}
|
||||
label={t('form.addServer.input', {
|
||||
context: 'name',
|
||||
postProcess: 'titleCase',
|
||||
|
|
@ -129,6 +143,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
|
|||
{...form.getInputProps('name')}
|
||||
/>
|
||||
<TextInput
|
||||
disabled={serverLock}
|
||||
label={t('form.addServer.input', {
|
||||
context: 'url',
|
||||
postProcess: 'titleCase',
|
||||
|
|
|
|||
|
|
@ -7,9 +7,8 @@ import { closeAllModals } from '@mantine/modals';
|
|||
import isElectron from 'is-electron';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiInformationLine } from 'react-icons/ri';
|
||||
import { AuthenticationResponse } from '/@/renderer/api/types';
|
||||
import { AuthenticationResponse, ServerListItem, ServerType } from '/@/renderer/api/types';
|
||||
import { useAuthStoreActions } from '/@/renderer/store';
|
||||
import { ServerListItem, ServerType } from '/@/renderer/types';
|
||||
import { api } from '/@/renderer/api';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
|
|||
import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
|
||||
import { ServerSection } from '/@/renderer/features/servers/components/server-section';
|
||||
import { useAuthStoreActions } from '/@/renderer/store';
|
||||
import { ServerListItem as ServerItem } from '/@/renderer/types';
|
||||
import { ServerListItem as ServerItem } from '/@/renderer/api/types';
|
||||
|
||||
const localSettings = isElectron() ? window.electron.localSettings : null;
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,31 @@ export const WindowSettings = () => {
|
|||
isHidden: !isElectron(),
|
||||
title: t('setting.exitToTray', { postProcess: 'sentenceCase' }),
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
aria-label="Toggle start in tray"
|
||||
defaultChecked={settings.startMinimized}
|
||||
disabled={!isElectron()}
|
||||
onChange={(e) => {
|
||||
if (!e) return;
|
||||
localSettings?.set('window_start_minimized', e.currentTarget.checked);
|
||||
setSettings({
|
||||
window: {
|
||||
...settings,
|
||||
startMinimized: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: t('setting.startMinimized', {
|
||||
context: 'description',
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
isHidden: !isElectron(),
|
||||
title: t('setting.startMinimized', { postProcess: 'sentenceCase' }),
|
||||
},
|
||||
];
|
||||
|
||||
return <SettingsSection options={windowOptions} />;
|
||||
|
|
|
|||
|
|
@ -38,6 +38,9 @@ export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
|
|||
case AppRoute.LIBRARY_ALBUMS:
|
||||
if (active) return <RiAlbumFill size={size} />;
|
||||
return <RiAlbumLine size={size} />;
|
||||
case AppRoute.LIBRARY_ALBUM_ARTISTS:
|
||||
if (active) return <RiUserVoiceFill size={size} />;
|
||||
return <RiUserVoiceLine size={size} />;
|
||||
case AppRoute.LIBRARY_ARTISTS:
|
||||
if (active) return <RiUserVoiceFill size={size} />;
|
||||
return <RiUserVoiceLine size={size} />;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { Flex, Group } from '@mantine/core';
|
||||
import { Box, Flex, Group } from '@mantine/core';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
|
||||
import { generatePath } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { LibraryItem, Playlist } from '/@/renderer/api/types';
|
||||
import { Button, Text } from '/@/renderer/components';
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { usePlaylistList } from '/@/renderer/features/playlists';
|
||||
|
|
@ -14,7 +14,7 @@ import { Play } from '/@/renderer/types';
|
|||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
||||
import { useHideScrollbar } from '/@/renderer/hooks';
|
||||
import { useGeneralSettings } from '/@/renderer/store';
|
||||
import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
|
||||
|
||||
interface SidebarPlaylistListProps {
|
||||
data: ReturnType<typeof usePlaylistList>['data'];
|
||||
|
|
@ -22,6 +22,20 @@ interface SidebarPlaylistListProps {
|
|||
|
||||
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (data?.items[index] === null) {
|
||||
return (
|
||||
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
|
||||
<Box
|
||||
fw="600"
|
||||
sx={{ fontSize: '1.2rem' }}
|
||||
>
|
||||
{t('page.sidebar.shared', { postProcess: 'titleCase' })}
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const path = data?.items[index].id
|
||||
? data.defaultFullPlaylist
|
||||
? generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data.items[index].id })
|
||||
|
|
@ -125,6 +139,7 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
|||
const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const { defaultFullPlaylist } = useGeneralSettings();
|
||||
const { type, username } = useCurrentServer() || {};
|
||||
|
||||
const [rect, setRect] = useState({
|
||||
height: 0,
|
||||
|
|
@ -147,12 +162,30 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
|||
);
|
||||
|
||||
const memoizedItemData = useMemo(() => {
|
||||
return {
|
||||
defaultFullPlaylist,
|
||||
handlePlay: handlePlayPlaylist,
|
||||
items: data?.items,
|
||||
};
|
||||
}, [data?.items, defaultFullPlaylist, handlePlayPlaylist]);
|
||||
const base = { defaultFullPlaylist, handlePlay: handlePlayPlaylist };
|
||||
|
||||
if (!type || !username || !data?.items) {
|
||||
return { ...base, items: data?.items };
|
||||
}
|
||||
|
||||
const owned: Array<Playlist | null> = [];
|
||||
const shared: Playlist[] = [];
|
||||
|
||||
for (const playlist of data.items) {
|
||||
if (playlist.owner !== username) {
|
||||
shared.push(playlist);
|
||||
} else {
|
||||
owned.push(playlist);
|
||||
}
|
||||
}
|
||||
|
||||
if (shared.length > 0) {
|
||||
// Use `null` as a separator between owned and shared playlists
|
||||
owned.push(null);
|
||||
}
|
||||
|
||||
return { ...base, items: owned.concat(shared) };
|
||||
}, [data?.items, defaultFullPlaylist, handlePlayPlaylist, type, username]);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
|
|
@ -168,7 +201,7 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
|||
: 'overlay-scrollbar'
|
||||
}
|
||||
height={debounced.height}
|
||||
itemCount={data?.items?.length || 0}
|
||||
itemCount={memoizedItemData?.items?.length || 0}
|
||||
itemData={memoizedItemData}
|
||||
itemSize={25}
|
||||
overscanCount={20}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
} from 'react-icons/ri';
|
||||
import { useListStoreByKey } from '../../../store/list.store';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { LibraryItem, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import { LibraryItem, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
|
||||
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
|
||||
import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
|
||||
|
|
@ -27,7 +27,7 @@ import { useContainerQuery } from '/@/renderer/hooks';
|
|||
import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
|
||||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
import { SongListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
|
||||
import { ListDisplayType, Play, ServerType, TableColumn } from '/@/renderer/types';
|
||||
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
|
||||
const FILTERS = {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import {
|
|||
useSidebarStore,
|
||||
useAppStoreActions,
|
||||
} from '/@/renderer/store';
|
||||
import { ServerListItem, ServerType } from '/@/renderer/types';
|
||||
import { ServerListItem, ServerType } from '/@/renderer/api/types';
|
||||
import packageJson from '../../../../../package.json';
|
||||
|
||||
const browser = isElectron() ? window.electron.browser : null;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue