Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 14:37:06 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[bugfix/feature]: Improve ratings (#332)

Browse Source 
* [bugfix/feature]: Improve ratings

Fix: add preventDefault/stopPropagation to prevent scrolling to top in queue
Feat: instead of double click for clear, click on same value
This commit is contained in:
Kendall Garner 2023-10-29 03:00:01 +00:00 committed by GitHub
parent e5564c2ac2
commit 4ec981df83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/remote/components/remote-container.tsx
View File

@ -1,5 +1,5 @@
import { useCallback } from 'react';
import { Group, Image, Rating, Text, Title } from '@mantine/core';
import { Group, Image, Text, Title } from '@mantine/core';
import { useInfo, useSend, useShowImage } from '/@/remote/store';
import { RemoteButton } from '/@/remote/components/buttons/remote-button';
import formatDuration from 'format-duration';
@ -18,6 +18,7 @@ import {
import { PlayerRepeat, PlayerStatus } from '/@/renderer/types';
import { WrapperSlider } from '/@/remote/components/wrapped-slider';
import { Tooltip } from '/@/renderer/components/tooltip';
import { Rating } from '/@/renderer/components';
export const RemoteContainer = () => {
const { repeat, shuffle, song, status, volume } = useInfo();

42
src/renderer/components/rating/index.tsx
View File

@ -1,12 +1,8 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { MouseEvent } from 'react';
import { Rating as MantineRating, RatingProps as MantineRatingProps } from '@mantine/core';
import { useCallback } from 'react';
import { Rating as MantineRating, RatingProps } from '@mantine/core';
import debounce from 'lodash/debounce';
import styled from 'styled-components';
import { Tooltip } from '/@/renderer/components/tooltip';
interface RatingProps extends Omit<MantineRatingProps, 'onClick'> {
onClick: (e: MouseEvent<HTMLDivElement>, value: number | undefined) => void;
}
const StyledRating = styled(MantineRating)`
& .mantine-Rating-symbolBody {
@ -16,18 +12,28 @@ const StyledRating = styled(MantineRating)`
}
`;
export const Rating = ({ onClick, ...props }: RatingProps) => {
// const debouncedOnClick = debounce(onClick, 100);
export const Rating = ({ onChange, ...props }: RatingProps) => {
const valueChange = useCallback(
(rating: number) => {
if (onChange) {
if (rating === props.value) {
onChange(0);
} else {
onChange(rating);
}
}
},
[onChange, props.value],
);
const debouncedOnChange = debounce(valueChange, 100);
return (
<Tooltip
label="Double click to clear"
openDelay={1000}
>
<StyledRating
{...props}
onDoubleClick={(e) => onClick(e, props.value)}
/>
</Tooltip>
<StyledRating
{...props}
onChange={(e) => {
debouncedOnChange(e);
}}
/>
);
};

23
src/renderer/components/virtual-table/cells/rating-cell.tsx
View File

@ -1,5 +1,4 @@
/* eslint-disable import/no-cycle */
import { MouseEvent } from 'react';
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Rating } from '/@/renderer/components/rating';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
@ -9,8 +8,6 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
const updateRatingMutation = useSetRating({});
const handleUpdateRating = (rating: number) => {
if (!value) return;
updateRatingMutation.mutate(
{
query: {
@ -27,32 +24,12 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
);
};
const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
updateRatingMutation.mutate(
{
query: {
item: [value],
rating: 0,
},
serverId: value?.serverId,
},
{
onSuccess: () => {
node.setData({ ...node.data, userRating: 0 });
},
},
);
};
return (
<CellContainer $position="center">
<Rating
size="xs"
value={value?.userRating}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</CellContainer>
);

13
src/renderer/features/albums/components/album-detail-header.tsx
View File

@ -55,18 +55,6 @@ export const AlbumDetailHeader = forwardRef(
});
};
const handleClearRating = () => {
if (!detailQuery?.data || !detailQuery?.data.userRating) return;
updateRatingMutation.mutate({
query: {
item: [detailQuery.data],
rating: 0,
},
serverId: detailQuery.data.serverId,
});
};
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
return (
@ -96,7 +84,6 @@ export const AlbumDetailHeader = forwardRef(
}
value={detailQuery?.data?.userRating || 0}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</>
)}

18
src/renderer/features/artists/components/album-artist-detail-header.tsx
View File

@ -1,4 +1,4 @@
import { forwardRef, Fragment, Ref, MouseEvent } from 'react';
import { forwardRef, Fragment, Ref } from 'react';
import { Group, Rating, Stack } from '@mantine/core';
import { useParams } from 'react-router';
import { LibraryItem, ServerType } from '/@/renderer/api/types';
@ -55,21 +55,6 @@ export const AlbumArtistDetailHeader = forwardRef(
});
};
const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
if (!detailQuery?.data || !detailQuery?.data.userRating) return;
const isSameRatingAsPrevious = rating === detailQuery.data.userRating;
if (!isSameRatingAsPrevious) return;
updateRatingMutation.mutate({
query: {
item: [detailQuery.data],
rating: 0,
},
serverId: detailQuery.data.serverId,
});
};
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
return (
@ -99,7 +84,6 @@ export const AlbumArtistDetailHeader = forwardRef(
}
value={detailQuery?.data?.userRating || 0}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</>
)}

6
src/renderer/features/context-menu/context-menu-provider.tsx
View File

@ -710,7 +710,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<Rating
readOnly
value={0}
onClick={() => {}}
/>
),
onClick: () => handleUpdateRating(0),
@ -721,7 +720,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<Rating
readOnly
value={1}
onClick={() => {}}
/>
),
onClick: () => handleUpdateRating(1),
@ -732,7 +730,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<Rating
readOnly
value={2}
onClick={() => {}}
/>
),
onClick: () => handleUpdateRating(2),
@ -743,7 +740,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<Rating
readOnly
value={3}
onClick={() => {}}
/>
),
onClick: () => handleUpdateRating(3),
@ -754,7 +750,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<Rating
readOnly
value={4}
onClick={() => {}}
/>
),
onClick: () => handleUpdateRating(4),
@ -765,7 +760,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<Rating
readOnly
value={5}
onClick={() => {}}
/>
),
onClick: () => handleUpdateRating(5),

1
src/renderer/features/player/components/right-controls.tsx
View File

@ -212,7 +212,6 @@ export const RightControls = () => {
size="sm"
value={currentSong?.userRating || 0}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
)}
</Group>