Browse Source

Normalize playlist view

master
jeffvli 3 years ago
parent
commit
bb515d09dd
  1. 41
      src/components/card/Card.tsx
  2. 44
      src/components/playlist/PlaylistView.tsx

41
src/components/card/Card.tsx

@ -1,6 +1,7 @@
import React from 'react';
import { Icon } from 'rsuite';
import { useHistory } from 'react-router-dom';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import cacheImage from '../shared/cacheImage';
import { useAppDispatch, useAppSelector } from '../../redux/hooks';
import {
@ -35,6 +36,7 @@ import { addModalPage } from '../../redux/miscSlice';
import { notifyToast } from '../shared/toast';
import CustomTooltip from '../shared/CustomTooltip';
import { apiController } from '../../api/controller';
import { CoverArtWrapper, CustomImageGrid, CustomImageGridWrapper } from '../layout/styled';
const Card = ({
onClick,
@ -203,7 +205,44 @@ const Card = ({
}
}}
>
{rest.coverArt.match('placeholder') ? (
{Array.isArray(rest.coverArt) ? (
<CoverArtWrapper size={size}>
<CustomImageGridWrapper>
<CustomImageGrid $gridArea="1 / 1 / 2 / 2">
<LazyLoadImage
src={rest.coverArt[0]}
alt="header-img"
height={size / 2}
width={size / 2}
/>
</CustomImageGrid>
<CustomImageGrid $gridArea="1 / 2 / 2 / 3">
<LazyLoadImage
src={rest.coverArt[1]}
alt="header-img"
height={size / 2}
width={size / 2}
/>
</CustomImageGrid>
<CustomImageGrid $gridArea="2 / 1 / 3 / 2">
<LazyLoadImage
src={rest.coverArt[2]}
alt="header-img"
height={size / 2}
width={size / 2}
/>
</CustomImageGrid>
<CustomImageGrid $gridArea="2 / 2 / 3 / 3">
<LazyLoadImage
src={rest.coverArt[3]}
alt="header-img"
height={size / 2}
width={size / 2}
/>
</CustomImageGrid>
</CustomImageGridWrapper>
</CoverArtWrapper>
) : rest.coverArt.match('placeholder') ? (
<CardImgWrapper
id="placeholder-wrapper"
size={size}

44
src/components/playlist/PlaylistView.tsx

@ -73,6 +73,7 @@ import { PageHeaderSubtitleDataLine } from '../layout/styled';
import CustomTooltip from '../shared/CustomTooltip';
import { apiController } from '../../api/controller';
import { Server } from '../../types';
import Card from '../card/Card';
interface PlaylistParams {
id: string;
@ -504,18 +505,31 @@ const PlaylistView = ({ ...rest }) => {
header={
<GenericPageHeader
image={
data?.image.match('placeholder')
? customPlaylistImage
: isCached(`${misc.imageCachePath}playlist_${playlistId}.jpg`)
? `${misc.imageCachePath}playlist_${playlistId}.jpg`
: data.image
<Card
title="None"
subtitle=""
coverArt={
data?.image.match('placeholder')
? customPlaylistImage
: isCached(`${misc.imageCachePath}playlist_${playlistId}.jpg`)
? `${misc.imageCachePath}playlist_${playlistId}.jpg`
: data.image
}
size={185}
hasHoverButtons
noInfoPanel
noModalButton
details={data}
playClick={{ type: 'playlist', id: data.id }}
url={`/playlist/${data.id}`}
/>
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
cacheType: 'playlist',
id: data.id,
}}
imageHeight={184}
imageHeight={185}
title={data.title}
subtitle={
<div>
@ -541,7 +555,7 @@ const PlaylistView = ({ ...rest }) => {
whiteSpace: 'pre-wrap',
}}
>
<span>{data.comment ? data.comment : 'No description'}</span>
<span>{data.comment ? data.comment : ''}</span>
</PageHeaderSubtitleDataLine>
</CustomTooltip>
@ -549,24 +563,26 @@ const PlaylistView = ({ ...rest }) => {
<ButtonToolbar>
<PlayButton
appearance="primary"
size="md"
size="lg"
$circle
onClick={handlePlay}
disabled={playlist.entry?.length < 1}
/>
<PlayAppendNextButton
appearance="primary"
appearance="subtle"
size="md"
onClick={() => handlePlayAppend('next')}
disabled={playlist.entry?.length < 1}
/>
<PlayAppendButton
appearance="primary"
appearance="subtle"
size="md"
onClick={() => handlePlayAppend('later')}
disabled={playlist.entry?.length < 1}
/>
<SaveButton
size="md"
appearance="subtle"
text={
needsRecovery
? 'Recover playlist'
@ -582,6 +598,7 @@ const PlaylistView = ({ ...rest }) => {
/>
<UndoButton
size="md"
appearance="subtle"
color={needsRecovery ? 'red' : undefined}
disabled={
needsRecovery || !isModified || misc.isProcessingPlaylist.includes(data?.id)
@ -631,7 +648,11 @@ const PlaylistView = ({ ...rest }) => {
</StyledPopover>
}
>
<EditButton size="md" disabled={misc.isProcessingPlaylist.includes(data?.id)} />
<EditButton
size="md"
appearance="subtle"
disabled={misc.isProcessingPlaylist.includes(data?.id)}
/>
</Whisper>
<Whisper
@ -649,6 +670,7 @@ const PlaylistView = ({ ...rest }) => {
>
<DeleteButton
size="md"
appearance="subtle"
disabled={misc.isProcessingPlaylist.includes(data?.id)}
/>
</Whisper>

Loading…
Cancel
Save