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. 27
      src/components/card/Card.tsx
  2. 75
      src/components/player/PlayerBar.tsx
  3. 4
      src/components/viewtypes/ListViewTable.tsx

27
src/components/card/Card.tsx

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

75
src/components/player/PlayerBar.tsx

@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { useQueryClient } from 'react-query'; import { useQueryClient } from 'react-query';
import settings from 'electron-settings'; 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 { useHistory } from 'react-router-dom';
import { LazyLoadImage } from 'react-lazy-load-image-component'; import { LazyLoadImage } from 'react-lazy-load-image-component';
import format from 'format-duration'; import format from 'format-duration';
@ -33,7 +33,7 @@ import { star, unstar } from '../../api/api';
import placeholderImg from '../../img/placeholder.jpg'; import placeholderImg from '../../img/placeholder.jpg';
import DebugWindow from '../debug/DebugWindow'; import DebugWindow from '../debug/DebugWindow';
import { CoverArtWrapper } from '../layout/styled'; import { CoverArtWrapper } from '../layout/styled';
import { getCurrentEntryList } from '../../shared/utils'; import { getCurrentEntryList, getImageCachePath, isCached } from '../../shared/utils';
const PlayerBar = () => { const PlayerBar = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -46,6 +46,7 @@ const PlayerBar = () => {
const [manualSeek, setManualSeek] = useState(0); const [manualSeek, setManualSeek] = useState(0);
const [currentEntryList, setCurrentEntryList] = useState('entry'); const [currentEntryList, setCurrentEntryList] = useState('entry');
const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume'))); const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
const [cachePath] = useState(getImageCachePath());
const playersRef = useRef<any>(); const playersRef = useRef<any>();
const history = useHistory(); const history = useHistory();
@ -314,24 +315,62 @@ const PlayerBar = () => {
> >
<Col xs={2} style={{ height: '100%', width: '80px' }}> <Col xs={2} style={{ height: '100%', width: '80px' }}>
<CoverArtWrapper> <CoverArtWrapper>
<LazyLoadImage <Whisper
tabIndex={0} trigger="hover"
src={ delay={500}
playQueue[currentEntryList][playQueue.currentIndex]?.image || placement="topStart"
placeholderImg 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>
} }
alt="trackImg" >
effect="opacity" <LazyLoadImage
width="65" tabIndex={0}
height="65" src={
style={{ cursor: 'pointer' }} isCached(
onClick={() => history.push(`/nowplaying`)} `${cachePath}/album_${
onKeyDown={(e: any) => { playQueue[currentEntryList][playQueue.currentIndex]?.albumId
if (e.key === ' ') { }.jpg`
history.push(`/nowplaying`); )
? `${cachePath}/album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
: playQueue[currentEntryList][playQueue.currentIndex]?.image ||
placeholderImg
} }
}} alt="trackImg"
/> effect="opacity"
width="65"
height="65"
style={{ cursor: 'pointer' }}
onClick={() => history.push(`/nowplaying`)}
onKeyDown={(e: any) => {
if (e.key === ' ') {
history.push(`/nowplaying`);
}
}}
/>
</Whisper>
</CoverArtWrapper> </CoverArtWrapper>
</Col> </Col>
<Col xs={2} style={{ minWidth: '140px', width: '40%' }}> <Col xs={2} style={{ minWidth: '140px', width: '40%' }}>

4
src/components/viewtypes/ListViewTable.tsx

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

Loading…
Cancel
Save