Handle playlist card types
This commit is contained in:
parent
3b5dff795f
commit
e980e31bd2
3 changed files with 54 additions and 21 deletions
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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,6 +173,7 @@ export const GridCardControls = ({
|
|||
<RiPlayFill size={25} />
|
||||
</PlayButton>
|
||||
<BottomControls>
|
||||
{itemType !== LibraryItem.PLAYLIST && (
|
||||
<SecondaryButton
|
||||
p={5}
|
||||
variant="subtle"
|
||||
|
@ -184,6 +190,8 @@ export const GridCardControls = ({
|
|||
)}
|
||||
</FavoriteWrapper>
|
||||
</SecondaryButton>
|
||||
)}
|
||||
|
||||
<SecondaryButton
|
||||
p={5}
|
||||
variant="subtle"
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue