diff --git a/src/renderer/features/context-menu/actions/set-rating-action.tsx b/src/renderer/features/context-menu/actions/set-rating-action.tsx index 477997464..69cdb01e9 100644 --- a/src/renderer/features/context-menu/actions/set-rating-action.tsx +++ b/src/renderer/features/context-menu/actions/set-rating-action.tsx @@ -1,10 +1,12 @@ +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation'; -import { useCurrentServerId } from '/@/renderer/store'; +import { useCurrentServer, useCurrentServerId } from '/@/renderer/store'; import { ContextMenu } from '/@/shared/components/context-menu/context-menu'; import { Rating } from '/@/shared/components/rating/rating'; import { LibraryItem } from '/@/shared/types/domain-types'; +import { ServerType } from '/@/shared/types/types'; interface SetRatingActionProps { ids: string[]; @@ -13,11 +15,15 @@ interface SetRatingActionProps { export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => { const { t } = useTranslation(); - + const server = useCurrentServer(); const serverId = useCurrentServerId(); const setRatingMutation = useSetRating({}); + const isRatingSupported = useMemo(() => { + return server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC; + }, [server?.type]); + const onRating = (rating: number) => { setRatingMutation.mutate({ apiClientProps: { serverId }, @@ -29,6 +35,10 @@ export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => { }); }; + if (!isRatingSupported) { + return null; + } + return ( @@ -42,22 +52,22 @@ export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => { onRating(0)}> - + onRating(1)}> - + onRating(2)}> - + onRating(3)}> - + onRating(4)}> - + onRating(5)}> - + diff --git a/src/shared/components/rating/rating.module.css b/src/shared/components/rating/rating.module.css index 26b91a6e9..a08f6155c 100644 --- a/src/shared/components/rating/rating.module.css +++ b/src/shared/components/rating/rating.module.css @@ -36,7 +36,7 @@ .symbol-body { svg { stroke: var(--theme-colors-foreground); - stroke-width: 2px; + stroke-width: 1px; &:not([data-filled='true']) { fill: transparent; diff --git a/src/shared/components/rating/rating.tsx b/src/shared/components/rating/rating.tsx index a0e7485b0..55b001403 100644 --- a/src/shared/components/rating/rating.tsx +++ b/src/shared/components/rating/rating.tsx @@ -5,9 +5,20 @@ import { useCallback } from 'react'; import styles from './rating.module.css'; -interface RatingProps extends MantineRatingProps {} +interface RatingProps extends MantineRatingProps { + preventDefault?: boolean; + stopPropagation?: boolean; +} -export const Rating = ({ classNames, onChange, size, style, ...props }: RatingProps) => { +export const Rating = ({ + classNames, + onChange, + preventDefault = true, + size, + stopPropagation = true, + style, + ...props +}: RatingProps) => { const valueChange = useCallback( (rating: number) => { if (onChange) { @@ -44,8 +55,12 @@ export const Rating = ({ classNames, onChange, size, style, ...props }: RatingPr debouncedOnChange(e); }} onClick={(e) => { - e.preventDefault(); - e.stopPropagation(); + if (preventDefault) { + e.preventDefault(); + } + if (stopPropagation) { + e.stopPropagation(); + } }} /> );