Handle playlist card types

This commit is contained in:
jeffvli 2023-07-15 11:19:51 -07:00
parent 3b5dff795f
commit e980e31bd2
3 changed files with 54 additions and 21 deletions

View file

@ -2,7 +2,7 @@ import React from 'react';
import { generatePath } from 'react-router'; import { generatePath } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { Album, AlbumArtist, Artist } from '/@/renderer/api/types'; import { Album, AlbumArtist, Artist, Playlist } from '/@/renderer/api/types';
import { Text } from '/@/renderer/components/text'; import { Text } from '/@/renderer/components/text';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { CardRow } from '/@/renderer/types'; import { CardRow } from '/@/renderer/types';
@ -213,3 +213,28 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
property: 'songCount', property: 'songCount',
}, },
}; };
export const PLAYLIST_CARD_ROWS: { [key: string]: CardRow<Playlist> } = {
duration: {
property: 'duration',
},
name: {
property: 'name',
route: {
route: AppRoute.PLAYLISTS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'playlistId' }],
},
},
owner: {
property: 'owner',
},
public: {
property: 'public',
},
songCount: {
property: 'songCount',
},
updatedAt: {
property: 'songCount',
},
};

View file

@ -9,9 +9,10 @@ import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/api/types'; import { LibraryItem } from '/@/renderer/api/types';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu'; import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import { import {
PLAYLIST_CONTEXT_MENU_ITEMS,
ALBUM_CONTEXT_MENU_ITEMS, ALBUM_CONTEXT_MENU_ITEMS,
ARTIST_CONTEXT_MENU_ITEMS, ARTIST_CONTEXT_MENU_ITEMS,
} from '/@/renderer/features/context-menu/context-menu-items'; } from '../../../features/context-menu/context-menu-items';
type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>; type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;
@ -154,7 +155,11 @@ export const GridCardControls = ({
const handleContextMenu = useHandleGeneralContextMenu( const handleContextMenu = useHandleGeneralContextMenu(
itemType, itemType,
itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS, itemType === LibraryItem.ALBUM
? ALBUM_CONTEXT_MENU_ITEMS
: itemType === LibraryItem.PLAYLIST
? PLAYLIST_CONTEXT_MENU_ITEMS
: ARTIST_CONTEXT_MENU_ITEMS,
); );
return ( return (
@ -168,22 +173,25 @@ export const GridCardControls = ({
<RiPlayFill size={25} /> <RiPlayFill size={25} />
</PlayButton> </PlayButton>
<BottomControls> <BottomControls>
<SecondaryButton {itemType !== LibraryItem.PLAYLIST && (
p={5} <SecondaryButton
variant="subtle" p={5}
onClick={(e) => handleFavorites(e, itemData?.serverId)} variant="subtle"
> onClick={(e) => handleFavorites(e, itemData?.serverId)}
<FavoriteWrapper isFavorite={itemData?.isFavorite}> >
{isFavorite ? ( <FavoriteWrapper isFavorite={itemData?.isFavorite}>
<RiHeartFill size={20} /> {isFavorite ? (
) : ( <RiHeartFill size={20} />
<RiHeartLine ) : (
color="white" <RiHeartLine
size={20} color="white"
/> size={20}
)} />
</FavoriteWrapper> )}
</SecondaryButton> </FavoriteWrapper>
</SecondaryButton>
)}
<SecondaryButton <SecondaryButton
p={5} p={5}
variant="subtle" variant="subtle"

View file

@ -4,7 +4,7 @@ import { generatePath, useNavigate } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img'; import { SimpleImg } from 'react-simple-img';
import { ListChildComponentProps } from 'react-window'; import { ListChildComponentProps } from 'react-window';
import styled from 'styled-components'; import styled from 'styled-components';
import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types'; import { Album, AlbumArtist, Artist, LibraryItem, Playlist } from '/@/renderer/api/types';
import { CardRows } from '/@/renderer/components/card'; import { CardRows } from '/@/renderer/components/card';
import { Skeleton } from '/@/renderer/components/skeleton'; import { Skeleton } from '/@/renderer/components/skeleton';
import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls'; import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
@ -13,7 +13,7 @@ import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types
interface BaseGridCardProps { interface BaseGridCardProps {
columnIndex: number; columnIndex: number;
controls: { controls: {
cardRows: CardRow<Album | AlbumArtist | Artist>[]; cardRows: CardRow<Album | AlbumArtist | Artist | Playlist>[];
handleFavorite: (options: { handleFavorite: (options: {
id: string[]; id: string[];
isFavorite: boolean; isFavorite: boolean;