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
Split 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;
width: ${(props) => props.size}px;
overflow: hidden;
border-radius: ${(props) => props.theme.other.coverArtBorderRadius};
background: ${(props) => props.theme.colors.layout.page.background};
vertical-align: middle;
&:focus-visible {
outline: 2px ${(props) => props.theme.colors.primary} solid;
}
img {
vertical-align: unset !important;
}
`;
export const PageHeaderTitle = styled.h1`

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

@ -344,32 +344,34 @@ const PlayerBar = () => {
</StyledPopover>
}
>
<LazyLoadImage
src={
isCached(
`${misc.imageCachePath}album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
)
? `${misc.imageCachePath}album_${
<CoverArtWrapper size={65}>
<LazyLoadImage
src={
isCached(
`${misc.imageCachePath}album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
: playQueue[currentEntryList][playQueue.currentIndex]?.image ||
placeholderImg
}
tabIndex={0}
onClick={() => history.push(`/nowplaying`)}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
history.push(`/nowplaying`);
)
? `${misc.imageCachePath}album_${
playQueue[currentEntryList][playQueue.currentIndex]?.albumId
}.jpg`
: playQueue[currentEntryList][playQueue.currentIndex]?.image ||
placeholderImg
}
}}
alt="trackImg"
effect="opacity"
width="65"
height="65"
style={{ cursor: 'pointer' }}
/>
tabIndex={0}
onClick={() => history.push(`/nowplaying`)}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
history.push(`/nowplaying`);
}
}}
alt="trackImg"
effect="opacity"
width="65"
height="65"
style={{ cursor: 'pointer' }}
/>
</CoverArtWrapper>
</Whisper>
</Col>
<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: {
borderRadius: '0px',
},
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
coverArtBorderRadius: '5px',
coverArtFilter: 'none',
card: {
border: '1px #3c3f43 solid',
hover: {
@ -760,7 +761,8 @@ const setDefaultSettings = (force: boolean) => {
button: {
borderRadius: '0px',
},
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
coverArtBorderRadius: '5px',
coverArtFilter: 'none',
card: {
border: '1px #3c3f43 solid',
hover: {

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

@ -60,6 +60,7 @@ import {
import { setActive } from '../../redux/albumSlice';
import { resetPlayer, setStatus } from '../../redux/playerSlice';
import { GenericItem } from '../../types';
import { CoverArtWrapper } from '../layout/styled';
const StyledTable = styled(Table)<{ rowHeight: number; $isDragging: boolean }>`
.rs-table-row.selected {
@ -647,34 +648,36 @@ const ListViewTable = ({
width: `${rowHeight}px`,
}}
>
<LazyLoadImage
src={
isCached(
`${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`
)
? `${misc.imageCachePath}${cacheImages.cacheType}_${
<CoverArtWrapper size={rowHeight - 10}>
<LazyLoadImage
src={
isCached(
`${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`
: rowData.image
}
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')
);
)
? `${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`
: rowData.image
}
}}
/>
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
style={{
@ -826,34 +829,36 @@ const ListViewTable = ({
: 'false'
}
>
<LazyLoadImage
src={
isCached(
`${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`
)
? `${misc.imageCachePath}${cacheImages.cacheType}_${
<CoverArtWrapper size={rowHeight - 10}>
<LazyLoadImage
src={
isCached(
`${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`
: rowData.image
}
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')
);
)
? `${misc.imageCachePath}${cacheImages.cacheType}_${
rowData[cacheImages.cacheIdProperty]
}.jpg`
: rowData.image
}
}}
/>
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>
);
}}

Write Preview
Loading…
Cancel
Save