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 { Link } from 'react-router-dom';
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 { AppRoute } from '/@/renderer/router/routes';
import { CardRow } from '/@/renderer/types';
@ -213,3 +213,28 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
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 { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import {
PLAYLIST_CONTEXT_MENU_ITEMS,
ALBUM_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'>;
@ -154,7 +155,11 @@ export const GridCardControls = ({
const handleContextMenu = useHandleGeneralContextMenu(
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 (
@ -168,22 +173,25 @@ export const GridCardControls = ({
<RiPlayFill size={25} />
</PlayButton>
<BottomControls>
<SecondaryButton
p={5}
variant="subtle"
onClick={(e) => handleFavorites(e, itemData?.serverId)}
>
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
{isFavorite ? (
<RiHeartFill size={20} />
) : (
<RiHeartLine
color="white"
size={20}
/>
)}
</FavoriteWrapper>
</SecondaryButton>
{itemType !== LibraryItem.PLAYLIST && (
<SecondaryButton
p={5}
variant="subtle"
onClick={(e) => handleFavorites(e, itemData?.serverId)}
>
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
{isFavorite ? (
<RiHeartFill size={20} />
) : (
<RiHeartLine
color="white"
size={20}
/>
)}
</FavoriteWrapper>
</SecondaryButton>
)}
<SecondaryButton
p={5}
variant="subtle"

View file

@ -4,7 +4,7 @@ import { generatePath, useNavigate } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
import { ListChildComponentProps } from 'react-window';
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 { Skeleton } from '/@/renderer/components/skeleton';
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 {
columnIndex: number;
controls: {
cardRows: CardRow<Album | AlbumArtist | Artist>[];
cardRows: CardRow<Album | AlbumArtist | Artist | Playlist>[];
handleFavorite: (options: {
id: string[];
isFavorite: boolean;