Add play button to song table album cover, like it is in grid (#772)

* Add play button to song table album cover, like it is in grid

* Fix: play button caused error for albums and artists tables
This commit is contained in:
Egor 2024-10-04 05:22:51 +03:00 committed by GitHub
parent a89b6640a9
commit ad34d8553e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 103 additions and 2 deletions

View file

@ -7,11 +7,12 @@ import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
import styled from 'styled-components';
import type { AlbumArtist, Artist } from '/@/renderer/api/types';
import { AlbumArtist, Artist } from '/@/renderer/api/types';
import { Text } from '/@/renderer/components/text';
import { AppRoute } from '/@/renderer/router/routes';
import { Skeleton } from '/@/renderer/components/skeleton';
import { SEPARATOR_STRING } from '/@/renderer/api/utils';
import { ListCoverControls } from '/@/renderer/components/virtual-table/cells/combined-title-cell-controls';
const CellContainer = styled(motion.div)<{ height: number }>`
display: grid;
@ -24,6 +25,16 @@ const CellContainer = styled(motion.div)<{ height: number }>`
max-width: 100%;
height: 100%;
letter-spacing: 0.5px;
.card-controls {
opacity: 0;
}
&:hover {
.card-controls {
opacity: 1;
}
}
`;
const ImageWrapper = styled.div`
@ -48,7 +59,7 @@ const StyledImage = styled(SimpleImg)`
}
`;
export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
export const CombinedTitleCell = ({ value, rowIndex, node, context }: ICellRendererParams) => {
const artists = useMemo(() => {
if (!value) return null;
return value.artists?.length ? value.artists : value.albumArtists;
@ -102,6 +113,10 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
/>
</Center>
)}
<ListCoverControls
itemData={value}
itemType={context.itemType}
/>
</ImageWrapper>
<MetadataWrapper>
<Text