From 0936951f4628a7693d6059bd4dd4a657a90dcc5f Mon Sep 17 00:00:00 2001 From: Egor Aristov Date: Tue, 1 Oct 2024 15:57:15 +0300 Subject: [PATCH 1/2] Add play button to song table album cover, like it is in grid --- .../cells/combined-title-cell-controls.tsx | 84 +++++++++++++++++++ .../cells/combined-title-cell.tsx | 17 +++- .../components/virtual-table/index.tsx | 1 + 3 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/renderer/components/virtual-table/cells/combined-title-cell-controls.tsx diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell-controls.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell-controls.tsx new file mode 100644 index 000000000..5bf3537cf --- /dev/null +++ b/src/renderer/components/virtual-table/cells/combined-title-cell-controls.tsx @@ -0,0 +1,84 @@ +import React, { MouseEvent } from 'react'; +import type { UnstyledButtonProps } from '@mantine/core'; +import { RiPlayFill } from 'react-icons/ri'; +import styled from 'styled-components'; +import { Play } from '/@/renderer/types'; +import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { LibraryItem } from '/@/renderer/api/types'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; + +type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>; + +const PlayButton = styled.button` + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + background-color: rgb(255 255 255); + border: none; + border-radius: 50%; + opacity: 0.8; + transition: scale 0.1s ease-in-out; + + &:hover { + opacity: 1; + scale: 1.1; + } + + &:active { + opacity: 1; + scale: 1; + } + + svg { + fill: rgb(0 0 0); + stroke: rgb(0 0 0); + } +`; + +const ListConverControlsContainer = styled.div` + position: absolute; + z-index: 100; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +`; + +export const ListCoverControls = ({ + itemData, + itemType, +}: { + itemData: any; + itemType: LibraryItem; +}) => { + const playButtonBehavior = usePlayButtonBehavior(); + const handlePlayQueueAdd = usePlayQueueAdd(); + + const handlePlay = async (e: MouseEvent, playType?: Play) => { + e.preventDefault(); + e.stopPropagation(); + + handlePlayQueueAdd?.({ + byItemType: { + id: [itemData.id], + type: itemType, + }, + playType: playType || playButtonBehavior, + }); + }; + + return ( + <> + + + + + + + ); +}; diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx index 6d94afa32..e1454707e 100644 --- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx +++ b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx @@ -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, LibraryItem } 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` @@ -102,6 +113,10 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams /> )} + Date: Wed, 2 Oct 2024 12:29:34 +0300 Subject: [PATCH 2/2] Fix: play button caused error for albums and artists tables --- .../components/virtual-table/cells/combined-title-cell.tsx | 6 +++--- .../components/virtual-table/hooks/use-virtual-table.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx index e1454707e..b2b344da4 100644 --- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx +++ b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx @@ -7,7 +7,7 @@ import { generatePath } from 'react-router'; import { Link } from 'react-router-dom'; import { SimpleImg } from 'react-simple-img'; import styled from 'styled-components'; -import { AlbumArtist, Artist, LibraryItem } 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'; @@ -59,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; @@ -115,7 +115,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams )} diff --git a/src/renderer/components/virtual-table/hooks/use-virtual-table.ts b/src/renderer/components/virtual-table/hooks/use-virtual-table.ts index d16c24b37..f0e05bfa8 100644 --- a/src/renderer/components/virtual-table/hooks/use-virtual-table.ts +++ b/src/renderer/components/virtual-table/hooks/use-virtual-table.ts @@ -334,6 +334,7 @@ export const useVirtualTable = >({ const onCellContextMenu = useHandleTableContextMenu(itemType, contextMenu); const context = { + itemType, onCellContextMenu, };