mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 19:01:40 +00:00
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:
parent
a89b6640a9
commit
ad34d8553e
4 changed files with 103 additions and 2 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue