blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add CoverArtWrapper to all images

master
jeffvli 3 years ago
parent
e9e5459015
commit
796946feea
4 changed files with 90 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/components/layout/styled.tsx
  2. 48
      src/components/player/PlayerBar.tsx
  3. 6
      src/components/shared/setDefaultSettings.ts
  4. 105
      src/components/viewtypes/ListViewTable.tsx

7
src/components/layout/styled.tsx
View File

@ -205,12 +205,17 @@ export const CoverArtWrapper = styled.div<{ $link?: boolean; size: number }>`
height: ${(props) => props.size}px; height: ${(props) => props.size}px;
width: ${(props) => props.size}px; width: ${(props) => props.size}px;
overflow: hidden; overflow: hidden;
border-radius: ${(props) => props.theme.other.coverArtBorderRadius};
background: ${(props) => props.theme.colors.layout.page.background}; background: ${(props) => props.theme.colors.layout.page.background};
vertical-align: middle;
&:focus-visible { &:focus-visible {
outline: 2px ${(props) => props.theme.colors.primary} solid; outline: 2px ${(props) => props.theme.colors.primary} solid;
} }
img {
vertical-align: unset !important;
}
`; `;
export const PageHeaderTitle = styled.h1` export const PageHeaderTitle = styled.h1`

48
src/components/player/PlayerBar.tsx
View File

@ -344,32 +344,34 @@ const PlayerBar = () => {
</StyledPopover> </StyledPopover>
} }
> >
<LazyLoadImage <CoverArtWrapper size={65}>
src={ <LazyLoadImage
isCached( src={
`${misc.imageCachePath}album_${ isCached(
playQueue[currentEntryList][playQueue.currentIndex]?.albumId `${misc.imageCachePath}album_${
}.jpg`
)
? `${misc.imageCachePath}album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg` }.jpg`
: playQueue[currentEntryList][playQueue.currentIndex]?.image || )
placeholderImg ? `${misc.imageCachePath}album_${
} playQueue[currentEntryList][playQueue.currentIndex]?.albumId
tabIndex={0} }.jpg`
onClick={() => history.push(`/nowplaying`)} : playQueue[currentEntryList][playQueue.currentIndex]?.image ||
onKeyDown={(e: any) => { placeholderImg
if (e.key === ' ' || e.key === 'Enter') {
history.push(`/nowplaying`);
} }
}} tabIndex={0}
alt="trackImg" onClick={() => history.push(`/nowplaying`)}
effect="opacity" onKeyDown={(e: any) => {
width="65" if (e.key === ' ' || e.key === 'Enter') {
height="65" history.push(`/nowplaying`);
style={{ cursor: 'pointer' }} }
/> }}
alt="trackImg"
effect="opacity"
width="65"
height="65"
style={{ cursor: 'pointer' }}
/>
</CoverArtWrapper>
</Whisper> </Whisper>
</Col> </Col>
<Col xs={2} style={{ minWidth: '140px', width: '40%' }}> <Col xs={2} style={{ minWidth: '140px', width: '40%' }}>

6
src/components/shared/setDefaultSettings.ts
View File

@ -595,7 +595,8 @@ const setDefaultSettings = (force: boolean) => {
button: { button: {
borderRadius: '0px', borderRadius: '0px',
}, },
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)', coverArtBorderRadius: '5px',
coverArtFilter: 'none',
card: { card: {
border: '1px #3c3f43 solid', border: '1px #3c3f43 solid',
hover: { hover: {
@ -760,7 +761,8 @@ const setDefaultSettings = (force: boolean) => {
button: { button: {
borderRadius: '0px', borderRadius: '0px',
}, },
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)', coverArtBorderRadius: '5px',
coverArtFilter: 'none',
card: { card: {
border: '1px #3c3f43 solid', border: '1px #3c3f43 solid',
hover: { hover: {

105
src/components/viewtypes/ListViewTable.tsx
View File

@ -60,6 +60,7 @@ import {
import { setActive } from '../../redux/albumSlice'; import { setActive } from '../../redux/albumSlice';
import { resetPlayer, setStatus } from '../../redux/playerSlice'; import { resetPlayer, setStatus } from '../../redux/playerSlice';
import { GenericItem } from '../../types'; import { GenericItem } from '../../types';
import { CoverArtWrapper } from '../layout/styled';
const StyledTable = styled(Table)<{ rowHeight: number; $isDragging: boolean }>` const StyledTable = styled(Table)<{ rowHeight: number; $isDragging: boolean }>`
.rs-table-row.selected { .rs-table-row.selected {
@ -647,34 +648,36 @@ const ListViewTable = ({
width: `${rowHeight}px`, width: `${rowHeight}px`,
}} }}
> >
<LazyLoadImage <CoverArtWrapper size={rowHeight - 10}>
src={ <LazyLoadImage
isCached( src={
`${misc.imageCachePath}${cacheImages.cacheType}_${ isCached(
rowData[cacheImages.cacheIdProperty] `${misc.imageCachePath}${cacheImages.cacheType}_${
}.jpg`
)
? `${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty] rowData[cacheImages.cacheIdProperty]
}.jpg` }.jpg`
: rowData.image )
} ? `${misc.imageCachePath}${cacheImages.cacheType}_${
alt="track-img" rowData[cacheImages.cacheIdProperty]
effect="opacity" }.jpg`
width={rowHeight - 10} : rowData.image
height={rowHeight - 10}
visibleByDefault={cacheImages.enabled}
afterLoad={() => {
if (cacheImages.enabled) {
cacheImage(
`${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`,
rowData.image.replaceAll(/=150/gi, '=350')
);
} }
}} alt="track-img"
/> effect="opacity"
width={rowHeight - 10}
height={rowHeight - 10}
visibleByDefault={cacheImages.enabled}
afterLoad={() => {
if (cacheImages.enabled) {
cacheImage(
`${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`,
rowData.image.replaceAll(/=150/gi, '=350')
);
}
}}
/>
</CoverArtWrapper>
</Col> </Col>
<Col <Col
style={{ style={{
@ -826,34 +829,36 @@ const ListViewTable = ({
: 'false' : 'false'
} }
> >
<LazyLoadImage <CoverArtWrapper size={rowHeight - 10}>
src={ <LazyLoadImage
isCached( src={
`${misc.imageCachePath}${cacheImages.cacheType}_${ isCached(
rowData[cacheImages.cacheIdProperty] `${misc.imageCachePath}${cacheImages.cacheType}_${
}.jpg`
)
? `${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty] rowData[cacheImages.cacheIdProperty]
}.jpg` }.jpg`
: rowData.image )
} ? `${misc.imageCachePath}${cacheImages.cacheType}_${
alt="track-img" rowData[cacheImages.cacheIdProperty]
effect="opacity" }.jpg`
width={rowHeight - 10} : rowData.image
height={rowHeight - 10}
visibleByDefault={cacheImages.enabled}
afterLoad={() => {
if (cacheImages.enabled) {
cacheImage(
`${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`,
rowData.image.replaceAll(/=150/gi, '=350')
);
} }
}} alt="track-img"
/> effect="opacity"
width={rowHeight - 10}
height={rowHeight - 10}
visibleByDefault={cacheImages.enabled}
afterLoad={() => {
if (cacheImages.enabled) {
cacheImage(
`${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`,
rowData.image.replaceAll(/=150/gi, '=350')
);
}
}}
/>
</CoverArtWrapper>
</TableCellWrapper> </TableCellWrapper>
); );
}} }}

Write Preview
Loading…
Cancel
Save