mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 06:27:09 +01:00
[enhancement]: support reordering homepage (#494)
* [enhancement]: support reordering homepage --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Kendall Garner
GitHub
parent
83d5fee442
commit
f796a35f5c
@ -37,6 +37,7 @@
|
||||
"channel_one": "channel",
|
||||
"channel_other": "channels",
|
||||
"clear": "clear",
|
||||
"close": "close",
|
||||
"collapse": "collapse",
|
||||
"comingSoon": "coming soon…",
|
||||
"configure": "configure",
|
||||
@ -459,6 +460,8 @@
|
||||
"gaplessAudio_optionWeak": "weak (recommended)",
|
||||
"globalMediaHotkeys": "global media hotkeys",
|
||||
"globalMediaHotkeys_description": "enable or disable the usage of your system media hotkeys to control playback",
|
||||
"homeConfiguration": "home page configuration",
|
||||
"homeConfiguration_description": "configure what items are shown, and in what order, on the home page",
|
||||
"hotkey_browserBack": "browser back",
|
||||
"hotkey_browserForward": "browser forward",
|
||||
"hotkey_favoriteCurrentSong": "favorite $t(common.currentSong)",
|
||||
|
||||
@ -12,7 +12,12 @@ import { useAlbumList } from '/@/renderer/features/albums';
|
||||
import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
|
||||
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useCurrentServer, useWindowSettings } from '/@/renderer/store';
|
||||
import {
|
||||
HomeItem,
|
||||
useCurrentServer,
|
||||
useGeneralSettings,
|
||||
useWindowSettings,
|
||||
} from '/@/renderer/store';
|
||||
import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
|
||||
import { Platform } from '/@/renderer/types';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
@ -28,6 +33,7 @@ const HomeRoute = () => {
|
||||
const server = useCurrentServer();
|
||||
const itemsPerPage = 15;
|
||||
const { windowBarStyle } = useWindowSettings();
|
||||
const { homeItems } = useGeneralSettings();
|
||||
|
||||
const feature = useAlbumList({
|
||||
options: {
|
||||
@ -129,16 +135,15 @@ const HomeRoute = () => {
|
||||
return <Spinner container />;
|
||||
}
|
||||
|
||||
const carousels = [
|
||||
{
|
||||
const carousels = {
|
||||
[HomeItem.RANDOM]: {
|
||||
data: random?.data?.items,
|
||||
itemType: LibraryItem.ALBUM,
|
||||
sortBy: AlbumListSort.RANDOM,
|
||||
sortOrder: SortOrder.ASC,
|
||||
title: t('page.home.explore', { postProcess: 'sentenceCase' }),
|
||||
uniqueId: 'random',
|
||||
},
|
||||
{
|
||||
[HomeItem.RECENTLY_PLAYED]: {
|
||||
data: recentlyPlayed?.data?.items,
|
||||
itemType: LibraryItem.ALBUM,
|
||||
pagination: {
|
||||
@ -147,9 +152,8 @@ const HomeRoute = () => {
|
||||
sortBy: AlbumListSort.RECENTLY_PLAYED,
|
||||
sortOrder: SortOrder.DESC,
|
||||
title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
|
||||
uniqueId: 'recentlyPlayed',
|
||||
},
|
||||
{
|
||||
[HomeItem.RECENTLY_ADDED]: {
|
||||
data: recentlyAdded?.data?.items,
|
||||
itemType: LibraryItem.ALBUM,
|
||||
pagination: {
|
||||
@ -158,9 +162,8 @@ const HomeRoute = () => {
|
||||
sortBy: AlbumListSort.RECENTLY_ADDED,
|
||||
sortOrder: SortOrder.DESC,
|
||||
title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
|
||||
uniqueId: 'recentlyAdded',
|
||||
},
|
||||
{
|
||||
[HomeItem.MOST_PLAYED]: {
|
||||
data:
|
||||
server?.type === ServerType.JELLYFIN
|
||||
? mostPlayedSongs?.data?.items
|
||||
@ -175,9 +178,24 @@ const HomeRoute = () => {
|
||||
: AlbumListSort.PLAY_COUNT,
|
||||
sortOrder: SortOrder.DESC,
|
||||
title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
|
||||
uniqueId: 'mostPlayed',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const sortedCarousel = homeItems
|
||||
.filter((item) => {
|
||||
if (item.disabled) {
|
||||
return false;
|
||||
}
|
||||
if (server?.type === ServerType.JELLYFIN && item.id === HomeItem.RECENTLY_PLAYED) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
.map((item) => ({
|
||||
...carousels[item.id],
|
||||
uniqueId: item.id,
|
||||
}));
|
||||
|
||||
const invalidateCarouselQuery = (carousel: {
|
||||
itemType: LibraryItem;
|
||||
@ -232,87 +250,76 @@ const HomeRoute = () => {
|
||||
spacing="lg"
|
||||
>
|
||||
<FeatureCarousel data={featureItemsWithImage} />
|
||||
{carousels
|
||||
.filter((carousel) => {
|
||||
if (
|
||||
server?.type === ServerType.JELLYFIN &&
|
||||
carousel.uniqueId === 'recentlyPlayed'
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return carousel;
|
||||
})
|
||||
.map((carousel) => (
|
||||
<MemoizedSwiperGridCarousel
|
||||
key={`carousel-${carousel.uniqueId}`}
|
||||
cardRows={[
|
||||
{
|
||||
property: 'name',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
|
||||
slugs: [
|
||||
{
|
||||
idProperty:
|
||||
server?.type === ServerType.JELLYFIN &&
|
||||
carousel.itemType === LibraryItem.SONG
|
||||
? 'albumId'
|
||||
: 'id',
|
||||
slugProperty: 'albumId',
|
||||
},
|
||||
],
|
||||
},
|
||||
{sortedCarousel.map((carousel) => (
|
||||
<MemoizedSwiperGridCarousel
|
||||
key={`carousel-${carousel.uniqueId}`}
|
||||
cardRows={[
|
||||
{
|
||||
property: 'name',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
|
||||
slugs: [
|
||||
{
|
||||
idProperty:
|
||||
server?.type === ServerType.JELLYFIN &&
|
||||
carousel.itemType === LibraryItem.SONG
|
||||
? 'albumId'
|
||||
: 'id',
|
||||
slugProperty: 'albumId',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
arrayProperty: 'name',
|
||||
property: 'albumArtists',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [
|
||||
{
|
||||
idProperty: 'id',
|
||||
slugProperty: 'albumArtistId',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
arrayProperty: 'name',
|
||||
property: 'albumArtists',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [
|
||||
{
|
||||
idProperty: 'id',
|
||||
slugProperty: 'albumArtistId',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
data={carousel.data}
|
||||
itemType={carousel.itemType}
|
||||
route={{
|
||||
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
|
||||
slugs: [
|
||||
{
|
||||
idProperty:
|
||||
server?.type === ServerType.JELLYFIN &&
|
||||
carousel.itemType === LibraryItem.SONG
|
||||
? 'albumId'
|
||||
: 'id',
|
||||
slugProperty: 'albumId',
|
||||
},
|
||||
],
|
||||
}}
|
||||
title={{
|
||||
label: (
|
||||
<Group>
|
||||
<TextTitle
|
||||
order={2}
|
||||
weight={700}
|
||||
>
|
||||
{carousel.title}
|
||||
</TextTitle>
|
||||
},
|
||||
]}
|
||||
data={carousel.data}
|
||||
itemType={carousel.itemType}
|
||||
route={{
|
||||
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
|
||||
slugs: [
|
||||
{
|
||||
idProperty:
|
||||
server?.type === ServerType.JELLYFIN &&
|
||||
carousel.itemType === LibraryItem.SONG
|
||||
? 'albumId'
|
||||
: 'id',
|
||||
slugProperty: 'albumId',
|
||||
},
|
||||
],
|
||||
}}
|
||||
title={{
|
||||
label: (
|
||||
<Group>
|
||||
<TextTitle
|
||||
order={2}
|
||||
weight={700}
|
||||
>
|
||||
{carousel.title}
|
||||
</TextTitle>
|
||||
|
||||
<ActionIcon
|
||||
onClick={() => invalidateCarouselQuery(carousel)}
|
||||
>
|
||||
<RiRefreshLine />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
),
|
||||
}}
|
||||
uniqueId={carousel.uniqueId}
|
||||
/>
|
||||
))}
|
||||
<ActionIcon
|
||||
onClick={() => invalidateCarouselQuery(carousel)}
|
||||
>
|
||||
<RiRefreshLine />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
),
|
||||
}}
|
||||
uniqueId={carousel.uniqueId}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</NativeScrollArea>
|
||||
</AnimatedPage>
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
import { Group } from '@mantine/core';
|
||||
import { useDragControls, Reorder } from 'framer-motion';
|
||||
import { MdDragIndicator } from 'react-icons/md';
|
||||
import { Checkbox } from '/@/renderer/components';
|
||||
|
||||
const DragHandle = ({ dragControls }: any) => {
|
||||
return (
|
||||
<MdDragIndicator
|
||||
color="white"
|
||||
style={{ cursor: 'grab' }}
|
||||
onPointerDown={(event) => dragControls.start(event)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface SidebarItem {
|
||||
disabled: boolean;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface DraggableItemProps {
|
||||
handleChangeDisabled: (id: string, e: boolean) => void;
|
||||
item: SidebarItem;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const DraggableItem = ({ item, value, handleChangeDisabled }: DraggableItemProps) => {
|
||||
const dragControls = useDragControls();
|
||||
|
||||
return (
|
||||
<Reorder.Item
|
||||
as="div"
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
value={item}
|
||||
>
|
||||
<Group
|
||||
noWrap
|
||||
h="3rem"
|
||||
style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
|
||||
>
|
||||
<Checkbox
|
||||
checked={!item.disabled}
|
||||
onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
|
||||
/>
|
||||
<DragHandle dragControls={dragControls} />
|
||||
{value}
|
||||
</Group>
|
||||
</Reorder.Item>
|
||||
);
|
||||
};
|
||||
@ -6,6 +6,7 @@ import { ThemeSettings } from '/@/renderer/features/settings/components/general/
|
||||
import { RemoteSettings } from '/@/renderer/features/settings/components/general/remote-settings';
|
||||
import { CacheSettings } from '/@/renderer/features/settings/components/window/cache-settngs';
|
||||
import isElectron from 'is-electron';
|
||||
import { HomeSettings } from '/@/renderer/features/settings/components/general/home-settings';
|
||||
|
||||
export const GeneralTab = () => {
|
||||
return (
|
||||
@ -16,6 +17,8 @@ export const GeneralTab = () => {
|
||||
<Divider />
|
||||
<ControlSettings />
|
||||
<Divider />
|
||||
<HomeSettings />
|
||||
<Divider />
|
||||
<SidebarSettings />
|
||||
{isElectron() && (
|
||||
<>
|
||||
|
||||
@ -0,0 +1,107 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { Reorder } from 'framer-motion';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '/@/renderer/components';
|
||||
import {
|
||||
useSettingsStoreActions,
|
||||
useGeneralSettings,
|
||||
HomeItem,
|
||||
} from '../../../../store/settings.store';
|
||||
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
|
||||
import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
|
||||
|
||||
export const HomeSettings = () => {
|
||||
const { t } = useTranslation();
|
||||
const { homeItems } = useGeneralSettings();
|
||||
const { setHomeItems } = useSettingsStoreActions();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const translatedSidebarItemMap = useMemo(
|
||||
() => ({
|
||||
[HomeItem.RANDOM]: t('page.home.explore', { postProcess: 'sentenceCase' }),
|
||||
[HomeItem.RECENTLY_PLAYED]: t('page.home.recentlyPlayed', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
[HomeItem.RECENTLY_ADDED]: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
|
||||
[HomeItem.MOST_PLAYED]: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
|
||||
}),
|
||||
[t],
|
||||
);
|
||||
|
||||
const [localHomeItems, setLocalHomeItems] = useState(homeItems);
|
||||
|
||||
const handleSave = () => {
|
||||
setHomeItems(localHomeItems);
|
||||
};
|
||||
|
||||
const handleChangeDisabled = useCallback((id: string, e: boolean) => {
|
||||
setLocalHomeItems((items) =>
|
||||
items.map((item) => {
|
||||
if (item.id === id) {
|
||||
return {
|
||||
...item,
|
||||
disabled: !e,
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
}),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const isSaveButtonDisabled = isEqual(homeItems, localHomeItems);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsOptions
|
||||
control={
|
||||
<>
|
||||
{open && (
|
||||
<Button
|
||||
compact
|
||||
disabled={isSaveButtonDisabled}
|
||||
variant="filled"
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t('common.save', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
compact
|
||||
variant="filled"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
description={t('setting.homeConfiguration', {
|
||||
context: 'description',
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
title={t('setting.homeConfiguration', { postProcess: 'sentenceCase' })}
|
||||
/>
|
||||
{open && (
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={localHomeItems}
|
||||
onReorder={setLocalHomeItems}
|
||||
>
|
||||
{localHomeItems.map((item) => (
|
||||
<DraggableItem
|
||||
key={item.id}
|
||||
handleChangeDisabled={handleChangeDisabled}
|
||||
item={item}
|
||||
value={
|
||||
translatedSidebarItemMap[
|
||||
item.id as keyof typeof translatedSidebarItemMap
|
||||
]
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,77 +1,33 @@
|
||||
import { ChangeEvent, useCallback, useState } from 'react';
|
||||
import { Group } from '@mantine/core';
|
||||
import { Reorder, useDragControls } from 'framer-motion';
|
||||
import { ChangeEvent, useCallback, useMemo, useState } from 'react';
|
||||
import { Reorder } from 'framer-motion';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { MdDragIndicator } from 'react-icons/md';
|
||||
import { Button, Checkbox, Switch } from '/@/renderer/components';
|
||||
import { Button, Switch } from '/@/renderer/components';
|
||||
import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
|
||||
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
|
||||
const translatedSidebarItemMap = {
|
||||
Albums: i18n.t('page.sidebar.albums', { postProcess: 'titleCase' }),
|
||||
Artists: i18n.t('page.sidebar.artists', { postProcess: 'titleCase' }),
|
||||
Folders: i18n.t('page.sidebar.folders', { postProcess: 'titleCase' }),
|
||||
Genres: i18n.t('page.sidebar.genres', { postProcess: 'titleCase' }),
|
||||
Home: i18n.t('page.sidebar.home', { postProcess: 'titleCase' }),
|
||||
'Now Playing': i18n.t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
|
||||
Playlists: i18n.t('page.sidebar.playlists', { postProcess: 'titleCase' }),
|
||||
Search: i18n.t('page.sidebar.search', { postProcess: 'titleCase' }),
|
||||
Settings: i18n.t('page.sidebar.settings', { postProcess: 'titleCase' }),
|
||||
Tracks: i18n.t('page.sidebar.tracks', { postProcess: 'titleCase' }),
|
||||
};
|
||||
|
||||
const DragHandle = ({ dragControls }: any) => {
|
||||
return (
|
||||
<MdDragIndicator
|
||||
color="white"
|
||||
style={{ cursor: 'grab' }}
|
||||
onPointerDown={(event) => dragControls.start(event)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface SidebarItem {
|
||||
disabled: boolean;
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface DraggableSidebarItemProps {
|
||||
handleChangeDisabled: (id: string, e: boolean) => void;
|
||||
item: SidebarItem;
|
||||
}
|
||||
|
||||
const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarItemProps) => {
|
||||
const dragControls = useDragControls();
|
||||
|
||||
return (
|
||||
<Reorder.Item
|
||||
as="div"
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
value={item}
|
||||
>
|
||||
<Group
|
||||
noWrap
|
||||
h="3rem"
|
||||
style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
|
||||
>
|
||||
<Checkbox
|
||||
checked={!item.disabled}
|
||||
onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
|
||||
/>
|
||||
<DragHandle dragControls={dragControls} />
|
||||
{translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap]}
|
||||
</Group>
|
||||
</Reorder.Item>
|
||||
);
|
||||
};
|
||||
import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
|
||||
|
||||
export const SidebarSettings = () => {
|
||||
const { t } = useTranslation();
|
||||
const settings = useGeneralSettings();
|
||||
const { setSidebarItems, setSettings } = useSettingsStoreActions();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const translatedSidebarItemMap = useMemo(
|
||||
() => ({
|
||||
Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
|
||||
Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
|
||||
Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
|
||||
Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
|
||||
Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
|
||||
'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
|
||||
Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
|
||||
Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
|
||||
Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
|
||||
Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
|
||||
}),
|
||||
[t],
|
||||
);
|
||||
|
||||
const [localSidebarItems, setLocalSidebarItems] = useState(settings.sidebarItems);
|
||||
|
||||
@ -144,14 +100,25 @@ export const SidebarSettings = () => {
|
||||
/>
|
||||
<SettingsOptions
|
||||
control={
|
||||
<Button
|
||||
compact
|
||||
disabled={isSaveButtonDisabled}
|
||||
variant="filled"
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t('common.save', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
<>
|
||||
{open && (
|
||||
<Button
|
||||
compact
|
||||
disabled={isSaveButtonDisabled}
|
||||
variant="filled"
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t('common.save', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
compact
|
||||
variant="filled"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
description={t('setting.sidebarCollapsedNavigation', {
|
||||
context: 'description',
|
||||
@ -159,19 +126,26 @@ export const SidebarSettings = () => {
|
||||
})}
|
||||
title={t('setting.sidebarConfiguration', { postProcess: 'sentenceCase' })}
|
||||
/>
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={localSidebarItems}
|
||||
onReorder={setLocalSidebarItems}
|
||||
>
|
||||
{localSidebarItems.map((item) => (
|
||||
<DraggableSidebarItem
|
||||
key={item.id}
|
||||
handleChangeDisabled={handleChangeDisabled}
|
||||
item={item}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
{open && (
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={localSidebarItems}
|
||||
onReorder={setLocalSidebarItems}
|
||||
>
|
||||
{localSidebarItems.map((item) => (
|
||||
<DraggableItem
|
||||
key={item.id}
|
||||
handleChangeDisabled={handleChangeDisabled}
|
||||
item={item}
|
||||
value={
|
||||
translatedSidebarItemMap[
|
||||
item.id as keyof typeof translatedSidebarItemMap
|
||||
]
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -92,6 +92,23 @@ export const sidebarItems = [
|
||||
},
|
||||
];
|
||||
|
||||
export type SortableItem<T> = {
|
||||
disabled: boolean;
|
||||
id: T;
|
||||
};
|
||||
|
||||
export enum HomeItem {
|
||||
MOST_PLAYED = 'mostPlayed',
|
||||
RANDOM = 'random',
|
||||
RECENTLY_ADDED = 'recentlyAdded',
|
||||
RECENTLY_PLAYED = 'recentlyPlayed',
|
||||
}
|
||||
|
||||
export const homeItems = Object.values(HomeItem).map((item) => ({
|
||||
disabled: false,
|
||||
id: item,
|
||||
}));
|
||||
|
||||
export type PersistedTableColumn = {
|
||||
column: TableColumn;
|
||||
extraProps?: Partial<ColDef>;
|
||||
@ -174,6 +191,7 @@ export interface SettingsState {
|
||||
defaultFullPlaylist: boolean;
|
||||
externalLinks: boolean;
|
||||
followSystemTheme: boolean;
|
||||
homeItems: SortableItem<HomeItem>[];
|
||||
language: string;
|
||||
passwordStore?: string;
|
||||
playButtonBehavior: Play;
|
||||
@ -256,6 +274,7 @@ export interface SettingsSlice extends SettingsState {
|
||||
actions: {
|
||||
reset: () => void;
|
||||
resetSampleRate: () => void;
|
||||
setHomeItems: (item: SortableItem<HomeItem>[]) => void;
|
||||
setSettings: (data: Partial<SettingsState>) => void;
|
||||
setSidebarItems: (items: SidebarItemType[]) => void;
|
||||
setTable: (type: TableType, data: DataTableProps) => void;
|
||||
@ -289,6 +308,7 @@ const initialState: SettingsState = {
|
||||
defaultFullPlaylist: true,
|
||||
externalLinks: true,
|
||||
followSystemTheme: false,
|
||||
homeItems,
|
||||
language: 'en',
|
||||
passwordStore: undefined,
|
||||
playButtonBehavior: Play.NOW,
|
||||
@ -580,6 +600,11 @@ export const useSettingsStore = create<SettingsSlice>()(
|
||||
state.playback.mpvProperties.audioSampleRateHz = 0;
|
||||
});
|
||||
},
|
||||
setHomeItems: (items: SortableItem<HomeItem>[]) => {
|
||||
set((state) => {
|
||||
state.general.homeItems = items;
|
||||
});
|
||||
},
|
||||
setSettings: (data) => {
|
||||
set({ ...get(), ...data });
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user