mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 10:03:33 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
Jeff
GitHub
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -1,200 +1,150 @@
|
|||
import { Box, Flex, Group } from '@mantine/core';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { closeAllModals, openModal } from '@mantine/modals';
|
||||
import { MouseEvent, useCallback, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
RiAddBoxFill,
|
||||
RiAddCircleFill,
|
||||
RiArrowDownSLine,
|
||||
RiArrowUpSLine,
|
||||
RiPlayFill,
|
||||
RiShuffleFill,
|
||||
} from 'react-icons/ri';
|
||||
import { generatePath } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
||||
|
||||
import { Button, Text } from '/@/renderer/components';
|
||||
import { openContextMenu } from '/@/renderer/features/context-menu';
|
||||
import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
|
||||
import styles from './sidebar-playlist-list.module.css';
|
||||
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { usePlaylistList } from '/@/renderer/features/playlists';
|
||||
import { useHideScrollbar } from '/@/renderer/hooks';
|
||||
import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
|
||||
import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useCurrentServer, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
|
||||
import { LibraryItem, Playlist, PlaylistListSort, SortOrder } from '/@/shared/types/domain-types';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
import { Accordion } from '/@/shared/components/accordion/accordion';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { ButtonProps } from '/@/shared/components/button/button';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import {
|
||||
LibraryItem,
|
||||
Playlist,
|
||||
PlaylistListSort,
|
||||
ServerType,
|
||||
SortOrder,
|
||||
} from '/@/shared/types/domain-types';
|
||||
import { Play } from '/@/shared/types/types';
|
||||
|
||||
const PlaylistRow = ({ data, index, style }: ListChildComponentProps) => {
|
||||
const { t } = useTranslation();
|
||||
interface PlaylistRowButtonProps extends Omit<ButtonProps, 'onPlay'> {
|
||||
name: string;
|
||||
onPlay: (id: string, playType: Play.LAST | Play.NEXT | Play.NOW | Play.SHUFFLE) => void;
|
||||
to: string;
|
||||
}
|
||||
|
||||
if (Array.isArray(data?.items[index])) {
|
||||
const [collapse, setCollapse] = data.items[index];
|
||||
const PlaylistRowButton = ({ name, onPlay, to, ...props }: PlaylistRowButtonProps) => {
|
||||
const url = generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: to });
|
||||
|
||||
return (
|
||||
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
|
||||
<Box
|
||||
fw="600"
|
||||
sx={{ fontSize: '1.2rem' }}
|
||||
>
|
||||
<Group>
|
||||
<Text>{t('page.sidebar.shared', { postProcess: 'titleCase' })}</Text>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => setCollapse()}
|
||||
tooltip={{
|
||||
label: t(collapse ? 'common.expand' : 'common.collapse', {
|
||||
postProcess: 'titleCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
{collapse ? (
|
||||
<RiArrowUpSLine size={20} />
|
||||
) : (
|
||||
<RiArrowDownSLine size={20} />
|
||||
)}
|
||||
</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const path = data?.items[index].id
|
||||
? generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data.items[index].id })
|
||||
: undefined;
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (!data?.items?.[index].id) return;
|
||||
|
||||
openContextMenu({
|
||||
data: [data?.items?.[index]],
|
||||
dataNodes: undefined,
|
||||
menuItems: PLAYLIST_CONTEXT_MENU_ITEMS,
|
||||
type: LibraryItem.PLAYLIST,
|
||||
xPos: e.clientX + 15,
|
||||
yPos: e.clientY + 5,
|
||||
});
|
||||
}}
|
||||
style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}
|
||||
className={styles.row}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<Group
|
||||
className="sidebar-playlist-item"
|
||||
noWrap
|
||||
pos="relative"
|
||||
position="apart"
|
||||
sx={{
|
||||
'&:hover': {
|
||||
'.sidebar-playlist-controls': {
|
||||
display: 'flex',
|
||||
},
|
||||
'.sidebar-playlist-name': {
|
||||
color: 'var(--sidebar-fg-hover) !important',
|
||||
},
|
||||
},
|
||||
}}
|
||||
<SidebarItem
|
||||
to={url}
|
||||
variant="subtle"
|
||||
{...props}
|
||||
>
|
||||
<Text
|
||||
className="sidebar-playlist-name"
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
sx={{
|
||||
color: 'var(--sidebar-fg) !important',
|
||||
cursor: 'default',
|
||||
width: '100%',
|
||||
}}
|
||||
to={path}
|
||||
>
|
||||
{data?.items[index].name}
|
||||
</Text>
|
||||
<Group
|
||||
className="sidebar-playlist-controls"
|
||||
display="none"
|
||||
noWrap
|
||||
pos="absolute"
|
||||
right="0"
|
||||
spacing="sm"
|
||||
>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.NOW);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.play', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiPlayFill />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.SHUFFLE);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiShuffleFill />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.LAST);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.addLast', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiAddBoxFill />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.NEXT);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.addNext', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiAddCircleFill />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
{name}
|
||||
</SidebarItem>
|
||||
{isHovered && (
|
||||
<RowControls
|
||||
id={to}
|
||||
onPlay={onPlay}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RowControls = ({
|
||||
id,
|
||||
onPlay,
|
||||
}: {
|
||||
id: string;
|
||||
onPlay: (id: string, playType: Play) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Group
|
||||
className={styles.controls}
|
||||
gap="xs"
|
||||
wrap="nowrap"
|
||||
>
|
||||
<ActionIcon
|
||||
icon="mediaPlay"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.NOW);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.play', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaShuffle"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.SHUFFLE);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaPlayLast"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.LAST);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.addLast', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaPlayNext"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.NEXT);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.addNext', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarPlaylistList = () => {
|
||||
const { hideScrollbarElementProps, isScrollbarHidden } = useHideScrollbar(0);
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const { sidebarCollapseShared } = useGeneralSettings();
|
||||
const { toggleSidebarCollapseShare } = useSettingsStoreActions();
|
||||
const { t } = useTranslation();
|
||||
const server = useCurrentServer();
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
|
|
@ -206,13 +156,6 @@ export const SidebarPlaylistList = () => {
|
|||
serverId: server?.id,
|
||||
});
|
||||
|
||||
const [rect, setRect] = useState({
|
||||
height: 0,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
const [debounced] = useDebouncedValue(rect, 25);
|
||||
|
||||
const handlePlayPlaylist = useCallback(
|
||||
(id: string, playType: Play) => {
|
||||
handlePlayQueueAdd?.({
|
||||
|
|
@ -236,56 +179,164 @@ export const SidebarPlaylistList = () => {
|
|||
}
|
||||
|
||||
const owned: Array<[boolean, () => void] | Playlist> = [];
|
||||
|
||||
for (const playlist of data.items) {
|
||||
owned.push(playlist);
|
||||
}
|
||||
|
||||
return { ...base, items: owned };
|
||||
}, [data?.items, handlePlayPlaylist, server?.type, server?.username]);
|
||||
|
||||
const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
openModal({
|
||||
children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
|
||||
size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm',
|
||||
title: t('form.createPlaylist.title', { postProcess: 'titleCase' }),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Accordion.Item value="playlists">
|
||||
<Accordion.Control
|
||||
component="div"
|
||||
role="button"
|
||||
style={{ userSelect: 'none' }}
|
||||
>
|
||||
<Group
|
||||
justify="space-between"
|
||||
pr="var(--theme-spacing-md)"
|
||||
>
|
||||
<Text fw={600}>
|
||||
{t('page.sidebar.playlists', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
</Text>
|
||||
<Group gap="xs">
|
||||
<ActionIcon
|
||||
icon="add"
|
||||
iconProps={{
|
||||
size: 'lg',
|
||||
}}
|
||||
onClick={handleCreatePlaylistModal}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('action.createPlaylist', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
component={Link}
|
||||
icon="list"
|
||||
iconProps={{
|
||||
size: 'lg',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
size="xs"
|
||||
to={AppRoute.PLAYLISTS}
|
||||
tooltip={{
|
||||
label: t('action.viewPlaylists', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{memoizedItemData?.items?.map((item, index) => (
|
||||
<PlaylistRowButton
|
||||
key={index}
|
||||
name={item.name}
|
||||
onPlay={handlePlayPlaylist}
|
||||
to={item.id}
|
||||
/>
|
||||
))}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarSharedPlaylistList = () => {
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const { t } = useTranslation();
|
||||
const server = useCurrentServer();
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
query: {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
},
|
||||
serverId: server?.id,
|
||||
});
|
||||
|
||||
const handlePlayPlaylist = useCallback(
|
||||
(id: string, playType: Play) => {
|
||||
handlePlayQueueAdd?.({
|
||||
byItemType: {
|
||||
id: [id],
|
||||
type: LibraryItem.PLAYLIST,
|
||||
},
|
||||
playType,
|
||||
});
|
||||
},
|
||||
[handlePlayQueueAdd],
|
||||
);
|
||||
|
||||
const data = playlistsQuery.data;
|
||||
|
||||
const memoizedItemData = useMemo(() => {
|
||||
const base = { handlePlay: handlePlayPlaylist };
|
||||
|
||||
if (!server?.type || !server?.username || !data?.items) {
|
||||
return { ...base, items: data?.items };
|
||||
}
|
||||
|
||||
const shared: Playlist[] = [];
|
||||
|
||||
for (const playlist of data.items) {
|
||||
if (playlist.owner && playlist.owner !== server.username) {
|
||||
console.log(playlist.owner, server.username);
|
||||
shared.push(playlist);
|
||||
} else {
|
||||
owned.push(playlist);
|
||||
}
|
||||
}
|
||||
|
||||
if (shared.length > 0) {
|
||||
owned.push([sidebarCollapseShared, toggleSidebarCollapseShare]);
|
||||
}
|
||||
return { ...base, items: shared };
|
||||
}, [data?.items, handlePlayPlaylist, server?.type, server?.username]);
|
||||
|
||||
const final = sidebarCollapseShared ? owned : owned.concat(shared);
|
||||
|
||||
return { ...base, items: final };
|
||||
}, [
|
||||
data?.items,
|
||||
handlePlayPlaylist,
|
||||
server?.type,
|
||||
server?.username,
|
||||
sidebarCollapseShared,
|
||||
toggleSidebarCollapseShare,
|
||||
]);
|
||||
if (memoizedItemData?.items?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
h="100%"
|
||||
{...hideScrollbarElementProps}
|
||||
>
|
||||
<AutoSizer onResize={(e) => setRect(e as { height: number; width: number })}>
|
||||
{() => (
|
||||
<FixedSizeList
|
||||
className={
|
||||
isScrollbarHidden
|
||||
? 'hide-scrollbar overlay-scrollbar'
|
||||
: 'overlay-scrollbar'
|
||||
}
|
||||
height={debounced.height}
|
||||
itemCount={memoizedItemData?.items?.length || 0}
|
||||
itemData={memoizedItemData}
|
||||
itemSize={25}
|
||||
overscanCount={20}
|
||||
width={debounced.width}
|
||||
>
|
||||
{PlaylistRow}
|
||||
</FixedSizeList>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</Flex>
|
||||
<Accordion.Item value="shared-playlists">
|
||||
<Accordion.Control>
|
||||
<Text
|
||||
fw={600}
|
||||
variant="secondary"
|
||||
>
|
||||
{t('page.sidebar.shared', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
</Text>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{memoizedItemData?.items?.map((item, index) => (
|
||||
<PlaylistRowButton
|
||||
key={index}
|
||||
name={item.name}
|
||||
onPlay={handlePlayPlaylist}
|
||||
to={item.id}
|
||||
/>
|
||||
))}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue