support collapsing shared playlists
This commit is contained in:
parent
ccb6f2c8b0
commit
0b383b758e
2 changed files with 56 additions and 10 deletions
|
@ -2,7 +2,13 @@ import { useCallback, useMemo, useState } from 'react';
|
||||||
import { Box, Flex, Group } from '@mantine/core';
|
import { Box, Flex, Group } from '@mantine/core';
|
||||||
import { useDebouncedValue } from '@mantine/hooks';
|
import { useDebouncedValue } from '@mantine/hooks';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
|
import {
|
||||||
|
RiAddBoxFill,
|
||||||
|
RiAddCircleFill,
|
||||||
|
RiArrowDownSLine,
|
||||||
|
RiArrowUpSLine,
|
||||||
|
RiPlayFill,
|
||||||
|
} from 'react-icons/ri';
|
||||||
import { generatePath } from 'react-router';
|
import { generatePath } from 'react-router';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { LibraryItem, Playlist } from '/@/renderer/api/types';
|
import { LibraryItem, Playlist } from '/@/renderer/api/types';
|
||||||
|
@ -14,7 +20,7 @@ import { Play } from '/@/renderer/types';
|
||||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||||
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
||||||
import { useHideScrollbar } from '/@/renderer/hooks';
|
import { useHideScrollbar } from '/@/renderer/hooks';
|
||||||
import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
|
import { useCurrentServer, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
|
||||||
|
|
||||||
interface SidebarPlaylistListProps {
|
interface SidebarPlaylistListProps {
|
||||||
data: ReturnType<typeof usePlaylistList>['data'];
|
data: ReturnType<typeof usePlaylistList>['data'];
|
||||||
|
@ -23,14 +29,35 @@ interface SidebarPlaylistListProps {
|
||||||
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
|
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (data?.items[index] === null) {
|
if (Array.isArray(data?.items[index])) {
|
||||||
|
const [collapse, setCollapse] = data.items[index];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
|
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
|
||||||
<Box
|
<Box
|
||||||
fw="600"
|
fw="600"
|
||||||
sx={{ fontSize: '1.2rem' }}
|
sx={{ fontSize: '1.2rem' }}
|
||||||
>
|
>
|
||||||
{t('page.sidebar.shared', { postProcess: 'titleCase' })}
|
<Group>
|
||||||
|
<Text>{t('page.sidebar.shared', { postProcess: 'titleCase' })}</Text>
|
||||||
|
<Button
|
||||||
|
compact
|
||||||
|
tooltip={{
|
||||||
|
label: t(collapse ? 'common.expand' : 'common.collapse', {
|
||||||
|
postProcess: 'titleCase',
|
||||||
|
}),
|
||||||
|
openDelay: 500,
|
||||||
|
}}
|
||||||
|
variant="default"
|
||||||
|
onClick={() => setCollapse()}
|
||||||
|
>
|
||||||
|
{collapse ? (
|
||||||
|
<RiArrowUpSLine size={20} />
|
||||||
|
) : (
|
||||||
|
<RiArrowDownSLine size={20} />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
</Box>
|
</Box>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -138,7 +165,8 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
|
||||||
export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
|
const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
|
||||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||||
const { defaultFullPlaylist } = useGeneralSettings();
|
const { defaultFullPlaylist, sidebarCollapseShared } = useGeneralSettings();
|
||||||
|
const { toggleSidebarCollapseShare } = useSettingsStoreActions();
|
||||||
const { type, username } = useCurrentServer() || {};
|
const { type, username } = useCurrentServer() || {};
|
||||||
|
|
||||||
const [rect, setRect] = useState({
|
const [rect, setRect] = useState({
|
||||||
|
@ -168,7 +196,7 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
return { ...base, items: data?.items };
|
return { ...base, items: data?.items };
|
||||||
}
|
}
|
||||||
|
|
||||||
const owned: Array<Playlist | null> = [];
|
const owned: Array<Playlist | [boolean, () => void]> = [];
|
||||||
const shared: Playlist[] = [];
|
const shared: Playlist[] = [];
|
||||||
|
|
||||||
for (const playlist of data.items) {
|
for (const playlist of data.items) {
|
||||||
|
@ -180,12 +208,21 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (shared.length > 0) {
|
if (shared.length > 0) {
|
||||||
// Use `null` as a separator between owned and shared playlists
|
owned.push([sidebarCollapseShared, toggleSidebarCollapseShare]);
|
||||||
owned.push(null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return { ...base, items: owned.concat(shared) };
|
const final = sidebarCollapseShared ? owned : owned.concat(shared);
|
||||||
}, [data?.items, defaultFullPlaylist, handlePlayPlaylist, type, username]);
|
|
||||||
|
return { ...base, items: final };
|
||||||
|
}, [
|
||||||
|
sidebarCollapseShared,
|
||||||
|
data?.items,
|
||||||
|
defaultFullPlaylist,
|
||||||
|
handlePlayPlaylist,
|
||||||
|
type,
|
||||||
|
username,
|
||||||
|
toggleSidebarCollapseShare,
|
||||||
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
|
|
|
@ -209,6 +209,7 @@ export interface SettingsState {
|
||||||
resume: boolean;
|
resume: boolean;
|
||||||
showQueueDrawerButton: boolean;
|
showQueueDrawerButton: boolean;
|
||||||
sideQueueType: SideQueueType;
|
sideQueueType: SideQueueType;
|
||||||
|
sidebarCollapseShared: boolean;
|
||||||
sidebarCollapsedNavigation: boolean;
|
sidebarCollapsedNavigation: boolean;
|
||||||
sidebarItems: SidebarItemType[];
|
sidebarItems: SidebarItemType[];
|
||||||
sidebarPlaylistList: boolean;
|
sidebarPlaylistList: boolean;
|
||||||
|
@ -292,6 +293,7 @@ export interface SettingsSlice extends SettingsState {
|
||||||
setSettings: (data: Partial<SettingsState>) => void;
|
setSettings: (data: Partial<SettingsState>) => void;
|
||||||
setSidebarItems: (items: SidebarItemType[]) => void;
|
setSidebarItems: (items: SidebarItemType[]) => void;
|
||||||
setTable: (type: TableType, data: DataTableProps) => void;
|
setTable: (type: TableType, data: DataTableProps) => void;
|
||||||
|
toggleSidebarCollapseShare: () => void;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -335,6 +337,7 @@ const initialState: SettingsState = {
|
||||||
resume: false,
|
resume: false,
|
||||||
showQueueDrawerButton: false,
|
showQueueDrawerButton: false,
|
||||||
sideQueueType: 'sideQueue',
|
sideQueueType: 'sideQueue',
|
||||||
|
sidebarCollapseShared: false,
|
||||||
sidebarCollapsedNavigation: true,
|
sidebarCollapsedNavigation: true,
|
||||||
sidebarItems,
|
sidebarItems,
|
||||||
sidebarPlaylistList: true,
|
sidebarPlaylistList: true,
|
||||||
|
@ -645,6 +648,12 @@ export const useSettingsStore = create<SettingsSlice>()(
|
||||||
state.tables[type] = data;
|
state.tables[type] = data;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
toggleSidebarCollapseShare: () => {
|
||||||
|
set((state) => {
|
||||||
|
state.general.sidebarCollapseShared =
|
||||||
|
!state.general.sidebarCollapseShared;
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
...initialState,
|
...initialState,
|
||||||
})),
|
})),
|
||||||
|
|
Reference in a new issue