handle rating in context menu

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 (
         <ContextMenu.Submenu>
             <ContextMenu.SubmenuTarget>
@@ -42,22 +52,22 @@ export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => {
             </ContextMenu.SubmenuTarget>
             <ContextMenu.SubmenuContent>
                 <ContextMenu.Item onSelect={() => onRating(0)}>
-                    <Rating readOnly value={0} />
+                    <Rating preventDefault={false} readOnly stopPropagation={false} value={0} />
                 </ContextMenu.Item>
                 <ContextMenu.Item onSelect={() => onRating(1)}>
-                    <Rating readOnly value={1} />
+                    <Rating preventDefault={false} readOnly stopPropagation={false} value={1} />
                 </ContextMenu.Item>
                 <ContextMenu.Item onSelect={() => onRating(2)}>
-                    <Rating readOnly value={2} />
+                    <Rating preventDefault={false} readOnly stopPropagation={false} value={2} />
                 </ContextMenu.Item>
                 <ContextMenu.Item onSelect={() => onRating(3)}>
-                    <Rating readOnly value={3} />
+                    <Rating preventDefault={false} readOnly stopPropagation={false} value={3} />
                 </ContextMenu.Item>
                 <ContextMenu.Item onSelect={() => onRating(4)}>
-                    <Rating readOnly value={4} />
+                    <Rating preventDefault={false} readOnly stopPropagation={false} value={4} />
                 </ContextMenu.Item>
                 <ContextMenu.Item onSelect={() => onRating(5)}>
-                    <Rating readOnly value={5} />
+                    <Rating preventDefault={false} readOnly stopPropagation={false} value={5} />
                 </ContextMenu.Item>
             </ContextMenu.SubmenuContent>
         </ContextMenu.Submenu>

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;

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();
+                if (preventDefault) {
-                e.stopPropagation();
+                    e.preventDefault();
+                }
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
             }}
         />
     );