support collapsing shared playlists

This commit is contained in:
Kendall Garner 2024-08-24 21:09:44 -07:00
parent ccb6f2c8b0
commit 0b383b758e
No known key found for this signature in database
GPG key ID: 18D2767419676C87
2 changed files with 56 additions and 10 deletions

View file

@ -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

View file

@ -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,
})), })),