[enhancement]: support reordering homepage (#494)

* [enhancement]: support reordering homepage --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
2024-11-20 14:37:06 +01:00 · 2024-02-14 01:56:08 +00:00 · 2024-02-14 01:56:08 +00:00 · f796a35f5c
commit f796a35f5c
parent 83d5fee442
7 changed files with 345 additions and 175 deletions
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -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)",
--- a/src/renderer/features/home/routes/home-route.tsx
+++ b/src/renderer/features/home/routes/home-route.tsx
@ -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,18 +250,7 @@ const HomeRoute = () => {
                    spacing="lg"
                >
                    <FeatureCarousel data={featureItemsWithImage} />
-                    {carousels
-                        .filter((carousel) => {
-                            if (
-                                server?.type === ServerType.JELLYFIN &&
-                                carousel.uniqueId === 'recentlyPlayed'
-                            ) {
-                                return null;
-                            }
-
-                            return carousel;
-                        })
-                        .map((carousel) => (
+                    {sortedCarousel.map((carousel) => (
                        <MemoizedSwiperGridCarousel
                            key={`carousel-${carousel.uniqueId}`}
                            cardRows={[
--- a/src/renderer/features/settings/components/general/draggable-item.tsx
+++ b/src/renderer/features/settings/components/general/draggable-item.tsx
@ -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>
+    );
+};
--- a/src/renderer/features/settings/components/general/general-tab.tsx
+++ b/src/renderer/features/settings/components/general/general-tab.tsx
@ -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() && (
                <>
--- a/src/renderer/features/settings/components/general/home-settings.tsx
+++ b/src/renderer/features/settings/components/general/home-settings.tsx
@ -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>
+            )}
+        </>
+    );
+};
--- a/src/renderer/features/settings/components/general/sidebar-settings.tsx
+++ b/src/renderer/features/settings/components/general/sidebar-settings.tsx
@ -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,6 +100,8 @@ export const SidebarSettings = () => {
            />
            <SettingsOptions
                control={
+                    <>
+                        {open && (
                            <Button
                                compact
                                disabled={isSaveButtonDisabled}
@ -152,6 +110,15 @@ export const SidebarSettings = () => {
                            >
                                {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' })}
            />
+            {open && (
                <Reorder.Group
                    axis="y"
                    values={localSidebarItems}
                    onReorder={setLocalSidebarItems}
                >
                    {localSidebarItems.map((item) => (
-                    <DraggableSidebarItem
+                        <DraggableItem
                            key={item.id}
                            handleChangeDisabled={handleChangeDisabled}
                            item={item}
+                            value={
+                                translatedSidebarItemMap[
+                                    item.id as keyof typeof translatedSidebarItemMap
+                                ]
+                            }
                        />
                    ))}
                </Reorder.Group>
+            )}
        </>
    );
 };
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@ -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 });
                    },