feat: adding setting to show/hide user ratings (#1426)

* adding show/hide user ratings setting

src/i18n/locales/en.json

@@ -899,6 +899,8 @@
         "preferLocalLyrics": "prefer local lyrics",
         "showLyricsInSidebar_description": "a panel will be added to the attached play queue that displays the lyrics",
         "showLyricsInSidebar": "show lyrics in player sidebar",
+        "showRatings_description": "controls if the star ratings feature shows up in the interface",
+        "showRatings": "show star ratings",
         "showVisualizerInSidebar_description": "a panel will be added to the player sidebar that displays the visualizer",
         "showVisualizerInSidebar": "show visualizer in player sidebar",
         "combinedLyricsAndVisualizer_description": "combine lyrics and visualizer into the same panel",

src/i18n/locales/pt-BR.json

@@ -383,6 +383,8 @@
         "savePlayQueue_description": "Salvar a fila de reprodução ao fechar a aplicação e restaurá-la ao abrir a aplicação",
         "scrobble": "Scrobblar",
         "scrobble_description": "Scrobblar reproduções para o seu servidor de mídia",
+        "showRatings": "exibir avaliações por estrelas",
+        "showRatings_description": "exibir ou ocultar as avaliações por estrelas",
         "showSkipButton": "Exibir botões de pular",
         "showSkipButton_description": "Exibir ou ocultar os botões de pular na barra do reprodutor",
         "showSkipButtons": "Exibir botões de pular",

src/renderer/components/item-card/item-card-controls.tsx

@@ -32,6 +32,7 @@ interface ItemCardControlsProps {
     internalState?: ItemListStateActions;
     item: Album | AlbumArtist | Artist | Playlist | Song | undefined;
     itemType: LibraryItem;
+    showRating: boolean;
     type?: 'compact' | 'default' | 'poster';
 }
 
@@ -180,6 +181,7 @@ export const ItemCardControls = ({
     internalState,
     item,
     itemType,
+    showRating,
     type = 'default',
 }: ItemCardControlsProps) => {
     const playNowHandler = useMemo(
@@ -267,6 +269,7 @@ export const ItemCardControls = ({
                 <FavoriteButton isFavorite={isFavorite} onClick={favoriteHandler} />
             )}
             {controls?.onRating &&
+                showRating &&
                 (item?._serverType === ServerType.NAVIDROME ||
                     item?._serverType === ServerType.SUBSONIC) && (
                     <RatingButton

src/renderer/components/item-card/item-card.tsx

@@ -18,6 +18,7 @@ import {
 import { ItemControls } from '/@/renderer/components/item-list/types';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { AppRoute } from '/@/renderer/router/routes';
+import { useGeneralSettings } from '/@/renderer/store';
 import { formatDateAbsolute, formatDateRelative, formatRating } from '/@/renderer/utils/format';
 import { Separator } from '/@/shared/components/separator/separator';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
@@ -67,6 +68,7 @@ export const ItemCard = ({
     type = 'poster',
     withControls,
 }: ItemCardProps) => {
+    const { showRatings } = useGeneralSettings();
     const imageUrl = getImageUrl(data);
     const rows = providedRows || [];
 
@@ -84,6 +86,7 @@ export const ItemCard = ({
                     isRound={isRound}
                     itemType={itemType}
                     rows={rows}
+                    showRating={showRatings}
                     withControls={withControls}
                 />
             );
@@ -100,6 +103,7 @@ export const ItemCard = ({
                     isRound={isRound}
                     itemType={itemType}
                     rows={rows}
+                    showRating={showRatings}
                     withControls={withControls}
                 />
             );
@@ -117,6 +121,7 @@ export const ItemCard = ({
                     isRound={isRound}
                     itemType={itemType}
                     rows={rows}
+                    showRating={showRatings}
                     withControls={withControls}
                 />
             );
@@ -130,6 +135,7 @@ export interface ItemCardDerivativeProps extends Omit<ItemCardProps, 'type'> {
     imageUrl: string | undefined;
     internalState?: ItemListStateActions;
     rows: DataRow[];
+    showRating: boolean;
 }
 
 const CompactItemCard = ({
@@ -142,6 +148,7 @@ const CompactItemCard = ({
     isRound,
     itemType,
     rows,
+    showRating,
     withControls,
 }: ItemCardDerivativeProps) => {
     const [showControls, setShowControls] = useState(false);
@@ -286,7 +293,7 @@ const CompactItemCard = ({
             typeof (data as { userRating: null | number }).userRating === 'number'
                 ? (data as { userRating: null | number }).userRating
                 : null;
-        const hasRating = userRating !== null && userRating > 0;
+        const hasRating = showRating && userRating !== null && userRating > 0;
 
         const imageContainerClassName = clsx(styles.imageContainer, {
             [styles.isRound]: isRound,
@@ -312,6 +319,7 @@ const CompactItemCard = ({
                             internalState={internalState}
                             item={data}
                             itemType={itemType}
+                            showRating={hasRating}
                             type="compact"
                         />
                     )}
@@ -407,6 +415,7 @@ const DefaultItemCard = ({
     isRound,
     itemType,
     rows,
+    showRating,
     withControls,
 }: ItemCardDerivativeProps) => {
     const [showControls, setShowControls] = useState(false);
@@ -508,7 +517,7 @@ const DefaultItemCard = ({
             typeof (data as { userRating: null | number }).userRating === 'number'
                 ? (data as { userRating: null | number }).userRating
                 : null;
-        const hasRating = userRating !== null && userRating > 0;
+        const hasRating = showRating && userRating !== null && userRating > 0;
 
         const imageContainerContent = (
             <>
@@ -527,6 +536,7 @@ const DefaultItemCard = ({
                             enableExpansion={enableExpansion}
                             item={data}
                             itemType={itemType}
+                            showRating={showRating}
                             type="default"
                         />
                     )}
@@ -620,6 +630,7 @@ const PosterItemCard = ({
     isRound,
     itemType,
     rows,
+    showRating,
     withControls,
 }: ItemCardDerivativeProps) => {
     const [showControls, setShowControls] = useState(false);
@@ -768,7 +779,7 @@ const PosterItemCard = ({
             typeof (data as { userRating: null | number }).userRating === 'number'
                 ? (data as { userRating: null | number }).userRating
                 : null;
-        const hasRating = userRating !== null && userRating > 0;
+        const hasRating = showRating && userRating !== null && userRating > 0;
 
         const imageContainerContent = (
             <>
@@ -788,6 +799,7 @@ const PosterItemCard = ({
                             internalState={internalState}
                             item={data}
                             itemType={itemType}
+                            showRating={showRating}
                             type="poster"
                         />
                     )}

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

@@ -13,7 +13,7 @@ import {
     LibraryHeaderMenu,
 } from '/@/renderer/features/shared/components/library-header';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
@@ -24,13 +24,15 @@ import { Play } from '/@/shared/types/types';
 export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     const { albumId } = useParams() as { albumId: string };
     const server = useCurrentServer();
+    const { showRatings } = useGeneralSettings();
     const detailQuery = useQuery(
         albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
     );
 
     const showRating =
-        detailQuery?.data?._serverType === ServerType.NAVIDROME ||
+        showRatings &&
-        detailQuery?.data?._serverType === ServerType.SUBSONIC;
+        (detailQuery?.data?._serverType === ServerType.NAVIDROME ||
+            detailQuery?.data?._serverType === ServerType.SUBSONIC);
 
     const { addToQueueByFetch, setFavorite, setRating } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();

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

@@ -14,7 +14,7 @@ import {
     LibraryHeaderMenu,
 } from '/@/renderer/features/shared/components/library-header';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDurationString } from '/@/renderer/utils';
 import { Group } from '/@/shared/components/group/group';
@@ -30,6 +30,7 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
     };
     const routeId = (artistId || albumArtistId) as string;
     const server = useCurrentServer();
+    const { showRatings } = useGeneralSettings();
     const { t } = useTranslation();
     const detailQuery = useSuspenseQuery(
         artistsQueries.albumArtistDetail({
@@ -124,8 +125,6 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
         [detailQuery.data],
     );
 
-    const showRating = detailQuery.data?._serverType === ServerType.NAVIDROME;
-
     const imageUrl = useItemImageUrl({
         id: detailQuery.data?.imageId || undefined,
         imageUrl: detailQuery.data?.imageUrl,
@@ -133,6 +132,8 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
         type: 'itemCard',
     });
 
+    const showRating = showRatings && detailQuery?.data?._serverType === ServerType.NAVIDROME;
+
     const selectedImageUrl = useMemo(() => {
         return detailQuery.data?.imageUrl || imageUrl;
     }, [detailQuery.data?.imageUrl, imageUrl]);

src/renderer/features/context-menu/actions/set-rating-action.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
-import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
+import { useCurrentServer, useCurrentServerId, useGeneralSettings } 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';
@@ -17,6 +17,7 @@ export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const serverId = useCurrentServerId();
+    const { showRatings } = useGeneralSettings();
 
     const setRatingMutation = useSetRating({});
 
@@ -35,7 +36,7 @@ export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => {
         });
     };
 
-    if (!isRatingSupported) {
+    if (!showRatings || !isRatingSupported) {
         return null;
     }
 

src/renderer/features/settings/components/general/application-settings.tsx

@@ -554,6 +554,27 @@ export const ApplicationSettings = () => {
             isHidden: !settings.externalLinks,
             title: t('setting.musicbrainz', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    defaultChecked={settings.showRatings}
+                    onChange={(e) => {
+                        setSettings({
+                            general: {
+                                ...settings,
+                                showRatings: e.currentTarget.checked,
+                            },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.showRatings', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.showRatings', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/store/settings.store.ts

@@ -377,6 +377,7 @@ export const GeneralSettingsSchema = z.object({
     playerbarSlider: PlayerbarSliderSchema,
     resume: z.boolean(),
     showLyricsInSidebar: z.boolean(),
+    showRatings: z.boolean(),
     showVisualizerInSidebar: z.boolean(),
     sidebarCollapsedNavigation: z.boolean(),
     sidebarCollapseShared: z.boolean(),
@@ -885,8 +886,9 @@ const initialState: SettingsState = {
             type: PlayerbarSliderType.WAVEFORM,
         },
         resume: true,
-        showLyricsInSidebar: true,
+        showLyricsInSidebar: false,
-        showVisualizerInSidebar: true,
+        showRatings: true,
+        showVisualizerInSidebar: false,
         sidebarCollapsedNavigation: true,
         sidebarCollapseShared: false,
         sidebarItems,