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 { 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',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in a new issue