Browse Source

Normalize and add tooltips

- Card title and subtitle
- Artist and album on list
- Art on playerbar
master
jeffvli 3 years ago
committed by Jeff
parent
commit
3107bdfb8f
  1. 5
      src/components/card/Card.tsx
  2. 45
      src/components/player/PlayerBar.tsx
  3. 4
      src/components/viewtypes/ListViewTable.tsx

5
src/components/card/Card.tsx

@ -27,6 +27,7 @@ import {
import { setStatus } from '../../redux/playerSlice';
import { addModalPage } from '../../redux/miscSlice';
import { notifyToast } from '../shared/toast';
import CustomTooltip from '../shared/CustomTooltip';
const Card = ({
onClick,
@ -201,12 +202,15 @@ const Card = ({
</Overlay>
<InfoPanel cardsize={size}>
<InfoSpan>
<CustomTooltip text={rest.title}>
<CardTitleButton appearance="link" size="sm" onClick={handleClick} cardsize={size}>
{rest.title}
</CardTitleButton>
</CustomTooltip>
</InfoSpan>
<InfoSpan>
{subUrl ? (
<CustomTooltip text={rest.subtitle}>
<CardSubtitleButton
appearance="link"
size="xs"
@ -215,6 +219,7 @@ const Card = ({
>
{rest.subtitle}
</CardSubtitleButton>
</CustomTooltip>
) : (
<CardSubtitle cardsize={size}>
{rest.subtitle !== 'undefined' ? rest.subtitle : <span>&#8203;</span>}

45
src/components/player/PlayerBar.tsx

@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from 'react';
import { useQueryClient } from 'react-query';
import settings from 'electron-settings';
import { FlexboxGrid, Grid, Row, Col } from 'rsuite';
import { FlexboxGrid, Grid, Row, Col, Whisper, Popover } from 'rsuite';
import { useHistory } from 'react-router-dom';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import format from 'format-duration';
@ -33,7 +33,7 @@ import { star, unstar } from '../../api/api';
import placeholderImg from '../../img/placeholder.jpg';
import DebugWindow from '../debug/DebugWindow';
import { CoverArtWrapper } from '../layout/styled';
import { getCurrentEntryList } from '../../shared/utils';
import { getCurrentEntryList, getImageCachePath, isCached } from '../../shared/utils';
const PlayerBar = () => {
const queryClient = useQueryClient();
@ -46,6 +46,7 @@ const PlayerBar = () => {
const [manualSeek, setManualSeek] = useState(0);
const [currentEntryList, setCurrentEntryList] = useState('entry');
const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
const [cachePath] = useState(getImageCachePath());
const playersRef = useRef<any>();
const history = useHistory();
@ -314,10 +315,47 @@ const PlayerBar = () => {
>
<Col xs={2} style={{ height: '100%', width: '80px' }}>
<CoverArtWrapper>
<Whisper
trigger="hover"
delay={500}
placement="topStart"
preventOverflow
speaker={
<Popover>
<div style={{ height: '500px' }}>
<LazyLoadImage
src={
isCached(
`${cachePath}/album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
)
? `${cachePath}/album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
: playQueue[currentEntryList][
playQueue.currentIndex
]?.image.replace(/size=\d+/, 'size=500') || placeholderImg
}
width={500}
height={500}
/>
</div>
</Popover>
}
>
<LazyLoadImage
tabIndex={0}
src={
playQueue[currentEntryList][playQueue.currentIndex]?.image ||
isCached(
`${cachePath}/album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
)
? `${cachePath}/album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
: playQueue[currentEntryList][playQueue.currentIndex]?.image ||
placeholderImg
}
alt="trackImg"
@ -332,6 +370,7 @@ const PlayerBar = () => {
}
}}
/>
</Whisper>
</CoverArtWrapper>
</Col>
<Col xs={2} style={{ minWidth: '140px', width: '40%' }}>

4
src/components/viewtypes/ListViewTable.tsx

@ -590,7 +590,7 @@ const ListViewTable = ({
width: '100%',
}}
>
<CustomTooltip text={rowData.artist} delay={1000}>
<CustomTooltip text={rowData.artist}>
<RsuiteLinkButton
subtitle="true"
appearance="link"
@ -728,7 +728,7 @@ const ListViewTable = ({
}}
>
{column.dataKey.match(/album|artist/) ? (
<CustomTooltip text={rowData[column.dataKey]} delay={1000}>
<CustomTooltip text={rowData[column.dataKey]}>
<RsuiteLinkButton
appearance="link"
onClick={() => {

Loading…
Cancel
Save