From cbeb4ab7d805e9257a08ffae717dd18bbebf1109 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 17 Oct 2023 05:46:42 -0700 Subject: [PATCH 1/3] Separate sidebar icons to new component - Fixes react render issue --- .../sidebar/components/collapsed-sidebar.tsx | 98 +++------------ .../sidebar/components/sidebar-icon.tsx | 68 ++++++++++ .../features/sidebar/components/sidebar.tsx | 116 ++++-------------- 3 files changed, 109 insertions(+), 173 deletions(-) create mode 100644 src/renderer/features/sidebar/components/sidebar-icon.tsx diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx index 45371547e..b39f195ea 100644 --- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx +++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx @@ -1,42 +1,16 @@ import { Group, UnstyledButton } from '@mantine/core'; import { motion } from 'framer-motion'; import { useMemo } from 'react'; -import { IconType } from 'react-icons'; -import { - RiUserVoiceLine, - RiMenuFill, - RiFolder3Line, - RiPlayListLine, - RiAlbumLine, - RiHome6Line, - RiMusic2Line, - RiHome6Fill, - RiAlbumFill, - RiMusic2Fill, - RiUserVoiceFill, - RiFlag2Fill, - RiFolder3Fill, - RiPlayListFill, - RiSearchLine, - RiSearchFill, - RiPlayFill, - RiPlayLine, - RiSettings2Fill, - RiSettings2Line, - RiFlag2Line, - RiArrowLeftSLine, - RiArrowRightSLine, -} from 'react-icons/ri'; -import { generatePath, NavLink, useNavigate } from 'react-router-dom'; +import { RiArrowLeftSLine, RiArrowRightSLine, RiMenuFill } from 'react-icons/ri'; +import { NavLink, useNavigate } from 'react-router-dom'; import styled from 'styled-components'; -import { LibraryItem } from '/@/renderer/api/types'; import { DropdownMenu, ScrollArea } from '/@/renderer/components'; +import { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button'; import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item'; +import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon'; import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu'; -import { AppRoute } from '/@/renderer/router/routes'; import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/renderer/store'; import { Platform } from '/@/renderer/types'; -import { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button'; const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>` display: flex; @@ -49,65 +23,18 @@ const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>` user-select: none; `; -const sidebarItemMap = { - [AppRoute.HOME]: { - activeIcon: RiHome6Fill, - icon: RiHome6Line, - }, - [AppRoute.LIBRARY_ALBUMS]: { - activeIcon: RiAlbumFill, - icon: RiAlbumLine, - }, - [AppRoute.LIBRARY_ALBUM_ARTISTS]: { - activeIcon: RiUserVoiceFill, - icon: RiUserVoiceLine, - }, - [AppRoute.PLAYLISTS]: { - activeIcon: RiPlayListFill, - icon: RiPlayListLine, - }, - [AppRoute.LIBRARY_SONGS]: { - activeIcon: RiMusic2Fill, - icon: RiMusic2Line, - }, - [AppRoute.LIBRARY_FOLDERS]: { - activeIcon: RiFolder3Fill, - icon: RiFolder3Line, - }, - [AppRoute.LIBRARY_GENRES]: { - activeIcon: RiFlag2Fill, - icon: RiFlag2Line, - }, - [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: { - activeIcon: RiSearchFill, - icon: RiSearchLine, - }, - [AppRoute.SETTINGS]: { - activeIcon: RiSettings2Fill, - icon: RiSettings2Line, - }, - [AppRoute.NOW_PLAYING]: { - activeIcon: RiPlayFill, - icon: RiPlayLine, - }, -}; - export const CollapsedSidebar = () => { const navigate = useNavigate(); const { windowBarStyle } = useWindowSettings(); const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings(); - const sidebarItemsWithRoute: (SidebarItemType & { - activeIcon: IconType; - icon: IconType; - })[] = useMemo(() => { + const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => { if (!sidebarItems) return []; const items = sidebarItems .filter((item) => !item.disabled) .map((item) => ({ ...item, - ...sidebarItemMap[item.route as keyof typeof sidebarItemMap], })); return items; @@ -157,9 +84,20 @@ export const CollapsedSidebar = () => { {sidebarItemsWithRoute.map((item) => ( } + activeIcon={ + + } component={NavLink} - icon={} + icon={ + + } label={item.label} route={item.route} to={item.route} diff --git a/src/renderer/features/sidebar/components/sidebar-icon.tsx b/src/renderer/features/sidebar/components/sidebar-icon.tsx new file mode 100644 index 000000000..7d48e7236 --- /dev/null +++ b/src/renderer/features/sidebar/components/sidebar-icon.tsx @@ -0,0 +1,68 @@ +import { + RiAlbumFill, + RiAlbumLine, + RiFlag2Fill, + RiFlag2Line, + RiFolder3Fill, + RiFolder3Line, + RiHome6Fill, + RiHome6Line, + RiMusic2Fill, + RiMusic2Line, + RiPlayFill, + RiPlayLine, + RiPlayListFill, + RiPlayListLine, + RiSearchFill, + RiSearchLine, + RiSettings2Fill, + RiSettings2Line, + RiUserVoiceFill, + RiUserVoiceLine, +} from 'react-icons/ri'; +import { AppRoute } from '/@/renderer/router/routes'; +import { generatePath } from 'react-router'; +import { LibraryItem } from '/@/renderer/api/types'; + +interface SidebarIconProps { + active?: boolean; + route: string; + size?: string; +} + +export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => { + switch (route) { + case AppRoute.HOME: + if (active) return ; + return ; + case AppRoute.LIBRARY_ALBUMS: + if (active) return ; + return ; + case AppRoute.LIBRARY_ARTISTS: + if (active) return ; + return ; + case AppRoute.PLAYLISTS: + if (active) return ; + return ; + case AppRoute.LIBRARY_SONGS: + if (active) return ; + return ; + case AppRoute.LIBRARY_FOLDERS: + if (active) return ; + return ; + case AppRoute.LIBRARY_GENRES: + if (active) return ; + return ; + case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }): + if (active) return ; + return ; + case AppRoute.SETTINGS: + if (active) return ; + return ; + case AppRoute.NOW_PLAYING: + if (active) return ; + return ; + default: + return ; + } +}; diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx index c3784db6d..810e4c07f 100644 --- a/src/renderer/features/sidebar/components/sidebar.tsx +++ b/src/renderer/features/sidebar/components/sidebar.tsx @@ -1,45 +1,20 @@ -import { MouseEvent, useMemo } from 'react'; import { Box, Center, Divider, Group, Stack } from '@mantine/core'; import { closeAllModals, openModal } from '@mantine/modals'; import { AnimatePresence, motion } from 'framer-motion'; -import { IconType } from 'react-icons'; -import { - RiAddFill, - RiAlbumFill, - RiAlbumLine, - RiArrowDownSLine, - RiDiscLine, - RiFlag2Fill, - RiFlagLine, - RiFolder3Fill, - RiFolder3Line, - RiHome6Fill, - RiHome6Line, - RiListUnordered, - RiMusic2Fill, - RiMusic2Line, - RiPlayLine, - RiSearchFill, - RiUserVoiceFill, - RiUserVoiceLine, - RiSearchLine, - RiPlayFill, - RiSettings2Line, - RiSettings2Fill, - RiPlayListLine, - RiPlayListFill, -} from 'react-icons/ri'; -import { generatePath, Link, useLocation } from 'react-router-dom'; +import { MouseEvent, useMemo } from 'react'; +import { RiAddFill, RiArrowDownSLine, RiDiscLine, RiListUnordered } from 'react-icons/ri'; +import { Link, useLocation } from 'react-router-dom'; import styled from 'styled-components'; import { SidebarItemType, useGeneralSettings, useWindowSettings, } from '../../../store/settings.store'; -import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types'; +import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types'; import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components'; import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists'; import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar'; +import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon'; import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item'; import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list'; import { useContainerQuery } from '/@/renderer/hooks'; @@ -92,49 +67,6 @@ const SidebarImage = styled.img` background: var(--placeholder-bg); `; -const sidebarItemMap = { - [AppRoute.HOME]: { - activeIcon: RiHome6Fill, - icon: RiHome6Line, - }, - [AppRoute.LIBRARY_ALBUMS]: { - activeIcon: RiAlbumFill, - icon: RiAlbumLine, - }, - [AppRoute.LIBRARY_ALBUM_ARTISTS]: { - activeIcon: RiUserVoiceFill, - icon: RiUserVoiceLine, - }, - [AppRoute.PLAYLISTS]: { - activeIcon: RiPlayListFill, - icon: RiPlayListLine, - }, - [AppRoute.LIBRARY_SONGS]: { - activeIcon: RiMusic2Fill, - icon: RiMusic2Line, - }, - [AppRoute.LIBRARY_FOLDERS]: { - activeIcon: RiFolder3Fill, - icon: RiFolder3Line, - }, - [AppRoute.LIBRARY_GENRES]: { - activeIcon: RiFlag2Fill, - icon: RiFlagLine, - }, - [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: { - activeIcon: RiSearchFill, - icon: RiSearchLine, - }, - [AppRoute.SETTINGS]: { - activeIcon: RiSettings2Fill, - icon: RiSettings2Line, - }, - [AppRoute.NOW_PLAYING]: { - activeIcon: RiPlayFill, - icon: RiPlayLine, - }, -}; - export const Sidebar = () => { const location = useLocation(); const sidebar = useSidebarStore(); @@ -180,17 +112,13 @@ export const Sidebar = () => { const { sidebarItems } = useGeneralSettings(); - const sidebarItemsWithRoute: (SidebarItemType & { - activeIcon: IconType; - icon: IconType; - })[] = useMemo(() => { + const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => { if (!sidebarItems) return []; const items = sidebarItems .filter((item) => !item.disabled) .map((item) => ({ ...item, - ...sidebarItemMap[item.route as keyof typeof sidebarItemMap], })); return items; @@ -214,21 +142,23 @@ export const Sidebar = () => { sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }} > - {sidebarItemsWithRoute.map((item) => ( - - - {location.pathname === item.route ? ( - - ) : ( - - )} - {item.label} - - - ))} + {sidebarItemsWithRoute.map((item) => { + return ( + + + + {item.label} + + + ); + })} Date: Tue, 17 Oct 2023 12:49:29 +0000 Subject: [PATCH 2/3] fix toggle replay (#292) --- src/renderer/features/player/hooks/use-center-controls.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/features/player/hooks/use-center-controls.ts b/src/renderer/features/player/hooks/use-center-controls.ts index 88311c145..24c60b0ee 100644 --- a/src/renderer/features/player/hooks/use-center-controls.ts +++ b/src/renderer/features/player/hooks/use-center-controls.ts @@ -191,8 +191,9 @@ export const useCenterControls = (args: { playersRef: any }) => { return mpvPlayer?.setQueueNext(playerData); } + const playerData = setRepeat(PlayerRepeat.NONE); remote?.updateRepeat(PlayerRepeat.NONE); - return setRepeat(PlayerRepeat.NONE); + return mpvPlayer?.setQueueNext(playerData); }, [repeatStatus, setRepeat]); const checkIsLastTrack = useCallback(() => { From 1a948ab86b5476e19fbfaed130aa6db60ee0eaca Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Tue, 17 Oct 2023 13:05:36 +0000 Subject: [PATCH 3/3] fix artist discography year filter (#299) --- .../features/albums/components/navidrome-album-filters.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/features/albums/components/navidrome-album-filters.tsx b/src/renderer/features/albums/components/navidrome-album-filters.tsx index c693d1256..981258ed1 100644 --- a/src/renderer/features/albums/components/navidrome-album-filters.tsx +++ b/src/renderer/features/albums/components/navidrome-album-filters.tsx @@ -152,11 +152,11 @@ export const NavidromeAlbumFilters = ({ customFilters, data: { _custom: { + ...filter._custom, navidrome: { ...filter._custom?.navidrome, year: e === '' ? undefined : (e as number), }, - ...filter._custom, }, }, itemType: LibraryItem.ALBUM,