Skip to content

Commit

Permalink
Merge branch 'jeffvli:development' into fix-jellyfin-deviceid
Browse files Browse the repository at this point in the history
  • Loading branch information
@LilyRose2798
LilyRose2798 authored Oct 17, 2023
2 parents 940b428 + 1a948ab commit 633a17f
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 175 deletions.
2 changes: 1 addition & 1 deletion src/renderer/features/albums/components/navidrome-album-filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/features/player/hooks/use-center-controls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
98 changes: 18 additions & 80 deletions src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -157,9 +84,20 @@ export const CollapsedSidebar = () => {
{sidebarItemsWithRoute.map((item) => (
<CollapsedSidebarItem
key={item.id}
activeIcon={<item.activeIcon size="25" />}
activeIcon={
<SidebarIcon
active
route={item.route}
size="25"
/>
}
component={NavLink}
icon={<item.icon size="25" />}
icon={
<SidebarIcon
route={item.route}
size="25"
/>
}
label={item.label}
route={item.route}
to={item.route}
Expand Down
68 changes: 68 additions & 0 deletions src/renderer/features/sidebar/components/sidebar-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 <RiHome6Fill size={size} />;
return <RiHome6Line size={size} />;
case AppRoute.LIBRARY_ALBUMS:
if (active) return <RiAlbumFill size={size} />;
return <RiAlbumLine size={size} />;
case AppRoute.LIBRARY_ARTISTS:
if (active) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.PLAYLISTS:
if (active) return <RiPlayListFill size={size} />;
return <RiPlayListLine size={size} />;
case AppRoute.LIBRARY_SONGS:
if (active) return <RiMusic2Fill size={size} />;
return <RiMusic2Line size={size} />;
case AppRoute.LIBRARY_FOLDERS:
if (active) return <RiFolder3Fill size={size} />;
return <RiFolder3Line size={size} />;
case AppRoute.LIBRARY_GENRES:
if (active) return <RiFlag2Fill size={size} />;
return <RiFlag2Line size={size} />;
case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
if (active) return <RiSearchFill size={size} />;
return <RiSearchLine size={size} />;
case AppRoute.SETTINGS:
if (active) return <RiSettings2Fill size={size} />;
return <RiSettings2Line size={size} />;
case AppRoute.NOW_PLAYING:
if (active) return <RiPlayFill size={size} />;
return <RiPlayLine size={size} />;
default:
return <RiHome6Line size={size} />;
}
};
116 changes: 23 additions & 93 deletions src/renderer/features/sidebar/components/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -214,21 +142,23 @@ export const Sidebar = () => {
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
>
<Stack spacing={0}>
{sidebarItemsWithRoute.map((item) => (
<SidebarItem
key={`sidebar-${item.route}`}
to={item.route}
>
<Group spacing="sm">
{location.pathname === item.route ? (
<item.activeIcon size="1.1em" />
) : (
<item.icon size="1.1em" />
)}
{item.label}
</Group>
</SidebarItem>
))}
{sidebarItemsWithRoute.map((item) => {
return (
<SidebarItem
key={`sidebar-${item.route}`}
to={item.route}
>
<Group spacing="sm">
<SidebarIcon
active={location.pathname === item.route}
route={item.route}
size="1.1em"
/>
{item.label}
</Group>
</SidebarItem>
);
})}
</Stack>
<Divider
mx="1rem"
Expand Down

0 comments on commit 633a17f

Please sign in to comment.