Browse Source

Add CoverArtWrapper to all images

master
jeffvli 3 years ago
parent
commit
796946feea
  1. 7
      src/components/layout/styled.tsx
  2. 2
      src/components/player/PlayerBar.tsx
  3. 6
      src/components/shared/setDefaultSettings.ts
  4. 5
      src/components/viewtypes/ListViewTable.tsx

7
src/components/layout/styled.tsx

@ -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`

2
src/components/player/PlayerBar.tsx

@ -344,6 +344,7 @@ const PlayerBar = () => {
</StyledPopover>
}
>
<CoverArtWrapper size={65}>
<LazyLoadImage
src={
isCached(
@ -370,6 +371,7 @@ const PlayerBar = () => {
height="65"
style={{ cursor: 'pointer' }}
/>
</CoverArtWrapper>
</Whisper>
</Col>
<Col xs={2} style={{ minWidth: '140px', width: '40%' }}>

6
src/components/shared/setDefaultSettings.ts

@ -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: {

5
src/components/viewtypes/ListViewTable.tsx

@ -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,6 +648,7 @@ const ListViewTable = ({
width: `${rowHeight}px`,
}}
>
<CoverArtWrapper size={rowHeight - 10}>
<LazyLoadImage
src={
isCached(
@ -675,6 +677,7 @@ const ListViewTable = ({
}
}}
/>
</CoverArtWrapper>
</Col>
<Col
style={{
@ -826,6 +829,7 @@ const ListViewTable = ({
: 'false'
}
>
<CoverArtWrapper size={rowHeight - 10}>
<LazyLoadImage
src={
isCached(
@ -854,6 +858,7 @@ const ListViewTable = ({
}
}}
/>
</CoverArtWrapper>
</TableCellWrapper>
);
}}

Loading…
Cancel
Save