Set row play button to switch to song on queue lists
This commit is contained in:
parent
a00385e78f
commit
a8b3944c66
3 changed files with 25 additions and 2 deletions
|
@ -52,12 +52,17 @@ const ListConverControlsContainer = styled.div`
|
||||||
export const ListCoverControls = ({
|
export const ListCoverControls = ({
|
||||||
itemData,
|
itemData,
|
||||||
itemType,
|
itemType,
|
||||||
|
context,
|
||||||
|
uniqueId,
|
||||||
}: {
|
}: {
|
||||||
|
context: Record<string, any>;
|
||||||
itemData: any;
|
itemData: any;
|
||||||
itemType: LibraryItem;
|
itemType: LibraryItem;
|
||||||
|
uniqueId?: string;
|
||||||
}) => {
|
}) => {
|
||||||
const playButtonBehavior = usePlayButtonBehavior();
|
const playButtonBehavior = usePlayButtonBehavior();
|
||||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||||
|
const isQueue = Boolean(context?.isQueue);
|
||||||
|
|
||||||
const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
|
const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -72,10 +77,18 @@ export const ListCoverControls = ({
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handlePlayFromQueue = () => {
|
||||||
|
context.handleDoubleClick({
|
||||||
|
data: {
|
||||||
|
uniqueId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ListConverControlsContainer className="card-controls">
|
<ListConverControlsContainer className="card-controls">
|
||||||
<PlayButton onClick={handlePlay}>
|
<PlayButton onClick={isQueue ? handlePlayFromQueue : handlePlay}>
|
||||||
<RiPlayFill size={20} />
|
<RiPlayFill size={20} />
|
||||||
</PlayButton>
|
</PlayButton>
|
||||||
</ListConverControlsContainer>
|
</ListConverControlsContainer>
|
||||||
|
|
|
@ -59,7 +59,13 @@ const StyledImage = styled(SimpleImg)`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const CombinedTitleCell = ({ value, rowIndex, node, context }: ICellRendererParams) => {
|
export const CombinedTitleCell = ({
|
||||||
|
value,
|
||||||
|
rowIndex,
|
||||||
|
node,
|
||||||
|
context,
|
||||||
|
data,
|
||||||
|
}: ICellRendererParams) => {
|
||||||
const artists = useMemo(() => {
|
const artists = useMemo(() => {
|
||||||
if (!value) return null;
|
if (!value) return null;
|
||||||
return value.artists?.length ? value.artists : value.albumArtists;
|
return value.artists?.length ? value.artists : value.albumArtists;
|
||||||
|
@ -114,8 +120,10 @@ export const CombinedTitleCell = ({ value, rowIndex, node, context }: ICellRende
|
||||||
</Center>
|
</Center>
|
||||||
)}
|
)}
|
||||||
<ListCoverControls
|
<ListCoverControls
|
||||||
|
context={context}
|
||||||
itemData={value}
|
itemData={value}
|
||||||
itemType={context.itemType}
|
itemType={context.itemType}
|
||||||
|
uniqueId={data?.uniqueId}
|
||||||
/>
|
/>
|
||||||
</ImageWrapper>
|
</ImageWrapper>
|
||||||
<MetadataWrapper>
|
<MetadataWrapper>
|
||||||
|
|
|
@ -256,7 +256,9 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
|
||||||
columnDefs={columnDefs}
|
columnDefs={columnDefs}
|
||||||
context={{
|
context={{
|
||||||
currentSong,
|
currentSong,
|
||||||
|
handleDoubleClick,
|
||||||
isFocused,
|
isFocused,
|
||||||
|
isQueue: true,
|
||||||
itemType: LibraryItem.SONG,
|
itemType: LibraryItem.SONG,
|
||||||
onCellContextMenu,
|
onCellContextMenu,
|
||||||
status,
|
status,
|
||||||
|
|
Reference in a new issue