Add ratings support (#21)

* Update rating types for multiserver support * Add rating mutation * Add rating support to table views * Add rating support on playerbar * Add hovercard component * Handle rating from context menu - Improve context menu components - Allow left / right icons - Allow nested menus * Add selected item count * Fix context menu auto direction * Add transition and move portal for context menu * Re-use context menu for all item dropdowns * Add ratings to detail pages / double click to clear * Bump react-query package
2026-03-02 12:17:25 +00:00 · 2023-02-05 05:19:01 -08:00 · 2023-02-05 05:19:01 -08:00 · 22fec8f9d3
commit 22fec8f9d3
parent f50ec5cf31
27 changed files with 1189 additions and 503 deletions
--- a/src/renderer/components/card/card-controls.tsx
+++ b/src/renderer/components/card/card-controls.tsx
@ -2,15 +2,18 @@ import type { MouseEvent } from 'react';
 import React from 'react';
 import type { UnstyledButtonProps } from '@mantine/core';
 import { Group } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
 import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/ri';
 import styled from 'styled-components';
 import { _Button } from '/@/renderer/components/button';
-import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
 import type { PlayQueueAddOptions } from '/@/renderer/types';
 import { Play } from '/@/renderer/types';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/renderer/api/types';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
+import {
+  ALBUM_CONTEXT_MENU_ITEMS,
+  ARTIST_CONTEXT_MENU_ITEMS,
+} from '/@/renderer/features/context-menu/context-menu-items';

 type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;

@ -100,21 +103,6 @@ const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
  }
 `;

-const PLAY_TYPES = [
-  {
-    label: 'Play',
-    play: Play.NOW,
-  },
-  {
-    label: 'Add to queue',
-    play: Play.LAST,
-  },
-  {
-    label: 'Add to queue next',
-    play: Play.NEXT,
-  },
-];
-
 export const CardControls = ({
  itemData,
  itemType,
@ -138,18 +126,10 @@ export const CardControls = ({
    });
  };

-  const openAddToPlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    openContextModal({
-      innerProps: {
-        albumId: itemType === LibraryItem.ALBUM ? [itemData.id] : undefined,
-        artistId: itemType === LibraryItem.ALBUM_ARTIST ? [itemData.id] : undefined,
-      },
-      modal: 'addToPlaylist',
-      size: 'md',
-      title: 'Add to playlist',
-    });
-  };
+  const handleContextMenu = useHandleGeneralContextMenu(
+    itemType,
+    itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
+  );

  return (
    <GridCardControlsContainer>
@ -175,40 +155,21 @@ export const CardControls = ({
              )}
            </FavoriteWrapper>
          </SecondaryButton>
-          <DropdownMenu
-            withinPortal
-            position="bottom-start"
+          <SecondaryButton
+            p={5}
+            sx={{ svg: { fill: 'white !important' } }}
+            variant="subtle"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleContextMenu(e, [itemData]);
+            }}
          >
-            <DropdownMenu.Target>
-              <SecondaryButton
-                p={5}
-                sx={{ svg: { fill: 'white !important' } }}
-                variant="subtle"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-              >
-                <RiMore2Fill
-                  color="white"
-                  size={20}
-                />
-              </SecondaryButton>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
-                <DropdownMenu.Item
-                  key={`playtype-${type.play}`}
-                  onClick={(e: MouseEvent<HTMLButtonElement>) => handlePlay(e, type.play)}
-                >
-                  {type.label}
-                </DropdownMenu.Item>
-              ))}
-              <DropdownMenu.Item onClick={openAddToPlaylistModal}>
-                Add to playlist
-              </DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
+            <RiMore2Fill
+              color="white"
+              size={20}
+            />
+          </SecondaryButton>
        </Group>
      </BottomControls>
    </GridCardControlsContainer>
--- a/src/renderer/components/context-menu/index.tsx
+++ b/src/renderer/components/context-menu/index.tsx
@ -1,6 +1,6 @@
 import { forwardRef, ReactNode, Ref } from 'react';
-import { Portal, UnstyledButton } from '@mantine/core';
-import { motion } from 'framer-motion';
+import { Grid, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
+import { motion, Variants } from 'framer-motion';
 import styled from 'styled-components';

 interface ContextMenuProps {
@ -22,8 +22,8 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
 `;

-export const ContextMenuButton = styled(UnstyledButton)`
-  padding: 1rem 1.5rem;
+export const StyledContextMenuButton = styled(UnstyledButton)`
+  padding: var(--dropdown-menu-item-padding);
  color: var(--dropdown-menu-fg);
  font-weight: 500;
  font-family: var(--content-font-family);
@ -46,20 +46,84 @@ export const ContextMenuButton = styled(UnstyledButton)`
  }
 `;

-export const ContextMenu = forwardRef(
-  ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+export const ContextMenuButton = forwardRef(
+  (
+    {
+      children,
+      rightIcon,
+      leftIcon,
+      ...props
+    }: UnstyledButtonProps &
+      React.ComponentPropsWithoutRef<'button'> & {
+        leftIcon?: ReactNode;
+        rightIcon?: ReactNode;
+      },
+    ref: any,
+  ) => {
    return (
-      <Portal>
-        <ContextMenuContainer
-          ref={ref}
-          maxWidth={maxWidth}
-          minWidth={minWidth}
-          xPos={xPos}
-          yPos={yPos}
-        >
-          {children}
-        </ContextMenuContainer>
-      </Portal>
+      <StyledContextMenuButton
+        {...props}
+        key={props.key}
+        ref={ref}
+        as="button"
+        disabled={props.disabled}
+        onClick={props.onClick}
+      >
+        <Grid>
+          <Grid.Col
+            span={2}
+            sx={{ alignSelf: 'center' }}
+          >
+            {leftIcon}
+          </Grid.Col>
+          <Grid.Col span={8}>{children} </Grid.Col>
+          <Grid.Col
+            span={2}
+            sx={{ alignSelf: 'center' }}
+          >
+            <Group
+              align="flex-end"
+              position="right"
+            >
+              {rightIcon}
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </StyledContextMenuButton>
+    );
+  },
+);
+
+const variants: Variants = {
+  closed: {
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+    },
+  },
+  open: {
+    opacity: 1,
+    transition: {
+      duration: 0.1,
+    },
+  },
+};
+
+export const ContextMenu = forwardRef(
+  ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+    return (
+      <ContextMenuContainer
+        ref={ref}
+        animate="open"
+        initial="closed"
+        maxWidth={maxWidth}
+        minWidth={minWidth}
+        variants={variants}
+        xPos={xPos}
+        yPos={yPos}
+      >
+        {children}
+      </ContextMenuContainer>
    );
  },
 );
--- a/src/renderer/components/hover-card/index.tsx
+++ b/src/renderer/components/hover-card/index.tsx
@ -0,0 +1,23 @@
+import { HoverCard as MantineHoverCard, HoverCardProps } from '@mantine/core';
+
+export const HoverCard = ({ children, ...props }: HoverCardProps) => {
+  return (
+    <MantineHoverCard
+      styles={{
+        dropdown: {
+          background: 'var(--dropdown-menu-bg)',
+          border: 'none',
+          boxShadow: '2px 2px 10px 2px rgba(0, 0, 0, 40%)',
+          margin: 0,
+          padding: 0,
+        },
+      }}
+      {...props}
+    >
+      {children}
+    </MantineHoverCard>
+  );
+};
+
+HoverCard.Target = MantineHoverCard.Target;
+HoverCard.Dropdown = MantineHoverCard.Dropdown;
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@ -33,3 +33,4 @@ export * from './motion';
 export * from './context-menu';
 export * from './query-builder';
 export * from './rating';
+export * from './hover-card';
--- a/src/renderer/components/rating/index.tsx
+++ b/src/renderer/components/rating/index.tsx
@ -1,7 +1,12 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { MouseEvent } from 'react';
 import { Rating as MantineRating, RatingProps as MantineRatingProps } from '@mantine/core';
 import styled from 'styled-components';
+import { Tooltip } from '/@/renderer/components/tooltip';

-type RatingProps = MantineRatingProps;
+interface RatingProps extends Omit<MantineRatingProps, 'onClick'> {
+  onClick: (e: MouseEvent<HTMLDivElement>, value: number | undefined) => void;
+}

 const StyledRating = styled(MantineRating)`
  & .mantine-Rating-symbolBody {
@ -11,6 +16,18 @@ const StyledRating = styled(MantineRating)`
  }
 `;

-export const Rating = ({ ...props }: RatingProps) => {
-  return <StyledRating {...props} />;
+export const Rating = ({ onClick, ...props }: RatingProps) => {
+  // const debouncedOnClick = debounce(onClick, 100);
+
+  return (
+    <Tooltip
+      label="Double click to clear"
+      openDelay={1000}
+    >
+      <StyledRating
+        {...props}
+        onDoubleClick={(e) => onClick(e, props.value)}
+      />
+    </Tooltip>
+  );
 };
--- a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
+++ b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
@ -2,15 +2,18 @@ import type { MouseEvent } from 'react';
 import React from 'react';
 import type { UnstyledButtonProps } from '@mantine/core';
 import { Group } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
 import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/ri';
 import styled from 'styled-components';
 import { _Button } from '/@/renderer/components/button';
-import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
 import type { PlayQueueAddOptions } from '/@/renderer/types';
 import { Play } from '/@/renderer/types';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/renderer/api/types';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
+import {
+  ALBUM_CONTEXT_MENU_ITEMS,
+  ARTIST_CONTEXT_MENU_ITEMS,
+} from '/@/renderer/features/context-menu/context-menu-items';

 type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;

@ -100,21 +103,6 @@ const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
  }
 `;

-const PLAY_TYPES = [
-  {
-    label: 'Play',
-    play: Play.NOW,
-  },
-  {
-    label: 'Add to queue',
-    play: Play.LAST,
-  },
-  {
-    label: 'Add to queue next',
-    play: Play.NEXT,
-  },
-];
-
 export const GridCardControls = ({
  itemData,
  itemType,
@ -152,23 +140,13 @@ export const GridCardControls = ({
    });
  };

-  const openAddToPlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    openContextModal({
-      innerProps: {
-        albumId: itemType === LibraryItem.ALBUM ? [itemData.id] : undefined,
-        artistId: itemType === LibraryItem.ALBUM_ARTIST ? [itemData.id] : undefined,
-      },
-      modal: 'addToPlaylist',
-      size: 'md',
-      title: 'Add to playlist',
-    });
-  };
+  const handleContextMenu = useHandleGeneralContextMenu(
+    itemType,
+    itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
+  );

  return (
    <GridCardControlsContainer>
-      {/* <TopControls /> */}
-      {/* <CenterControls /> */}
      <BottomControls>
        <PlayButton onClick={handlePlay}>
          <RiPlayFill size={25} />
@ -191,40 +169,21 @@ export const GridCardControls = ({
              )}
            </FavoriteWrapper>
          </SecondaryButton>
-          <DropdownMenu
-            withinPortal
-            position="bottom-start"
+          <SecondaryButton
+            p={5}
+            sx={{ svg: { fill: 'white !important' } }}
+            variant="subtle"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleContextMenu(e, [itemData]);
+            }}
          >
-            <DropdownMenu.Target>
-              <SecondaryButton
-                p={5}
-                sx={{ svg: { fill: 'white !important' } }}
-                variant="subtle"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-              >
-                <RiMore2Fill
-                  color="white"
-                  size={20}
-                />
-              </SecondaryButton>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
-                <DropdownMenu.Item
-                  key={`playtype-${type.play}`}
-                  onClick={(e: MouseEvent<HTMLButtonElement>) => handlePlay(e, type.play)}
-                >
-                  {type.label}
-                </DropdownMenu.Item>
-              ))}
-              <DropdownMenu.Item onClick={openAddToPlaylistModal}>
-                Add to playlist
-              </DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
+            <RiMore2Fill
+              color="white"
+              size={20}
+            />
+          </SecondaryButton>
        </Group>
      </BottomControls>
    </GridCardControlsContainer>
--- a/src/renderer/components/virtual-table/cells/rating-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/rating-cell.tsx
@ -1,13 +1,49 @@
+import { MouseEvent, useState } 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';
+import { useUpdateRating } from '/@/renderer/components/virtual-table/hooks/use-rating';

 export const RatingCell = ({ value }: ICellRendererParams) => {
+  const updateRatingMutation = useUpdateRating();
+  const [ratingValue, setRatingValue] = useState(value?.userRating);
+
+  const handleUpdateRating = (rating: number) => {
+    if (!value) return;
+
+    updateRatingMutation.mutate({
+      _serverId: value?.serverId,
+      query: {
+        item: [value],
+        rating,
+      },
+    });
+
+    setRatingValue(rating);
+  };
+
+  const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    updateRatingMutation.mutate({
+      _serverId: value?.serverId,
+      query: {
+        item: [value],
+        rating: 0,
+      },
+    });
+
+    setRatingValue(0);
+  };
+
  return (
    <CellContainer position="center">
      <Rating
+        defaultValue={value?.userRating || 0}
        size="xs"
-        value={value}
+        value={ratingValue}
+        onChange={handleUpdateRating}
+        onClick={handleClearRating}
      />
    </CellContainer>
  );
--- a/src/renderer/components/virtual-table/hooks/use-rating.ts
+++ b/src/renderer/components/virtual-table/hooks/use-rating.ts
@ -0,0 +1,131 @@
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { NDAlbumDetail, NDAlbumArtistDetail } from '/@/renderer/api/navidrome.types';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { SSAlbumDetail, SSAlbumArtistDetail } from '/@/renderer/api/subsonic.types';
+import {
+  RawRatingResponse,
+  RatingArgs,
+  Album,
+  Song,
+  AlbumArtist,
+  Artist,
+  LibraryItem,
+} from '/@/renderer/api/types';
+import {
+  useCurrentServer,
+  useSetAlbumListItemDataById,
+  useSetQueueRating,
+  useAuthStore,
+} from '/@/renderer/store';
+import { ServerType } from '/@/renderer/types';
+
+export const useUpdateRating = () => {
+  const queryClient = useQueryClient();
+  const currentServer = useCurrentServer();
+  const setAlbumListData = useSetAlbumListItemDataById();
+  const setQueueRating = useSetQueueRating();
+
+  return useMutation<
+    RawRatingResponse,
+    HTTPError,
+    Omit<RatingArgs, 'server'>,
+    { previous: { items: Album[] | Song[] | AlbumArtist[] | Artist[] } | undefined }
+  >({
+    mutationFn: (args) => {
+      const server = useAuthStore.getState().actions.getServer(args._serverId) || currentServer;
+      return api.controller.updateRating({ ...args, server });
+    },
+    onError: (_error, _variables, context) => {
+      for (const item of context?.previous?.items || []) {
+        switch (item.itemType) {
+          case LibraryItem.ALBUM:
+            setAlbumListData(item.id, { userRating: item.userRating });
+            break;
+          case LibraryItem.SONG:
+            setQueueRating([item.id], item.userRating);
+            break;
+        }
+      }
+    },
+    onMutate: (variables) => {
+      for (const item of variables.query.item) {
+        switch (item.itemType) {
+          case LibraryItem.ALBUM:
+            setAlbumListData(item.id, { userRating: variables.query.rating });
+            break;
+          case LibraryItem.SONG:
+            setQueueRating([item.id], variables.query.rating);
+            break;
+        }
+      }
+
+      return { previous: { items: variables.query.item } };
+    },
+    onSuccess: (_data, variables) => {
+      // We only need to set if we're already on the album detail page
+      const isAlbumDetailPage =
+        variables.query.item.length === 1 && variables.query.item[0].itemType === LibraryItem.ALBUM;
+
+      if (isAlbumDetailPage) {
+        const { serverType, id: albumId, serverId } = variables.query.item[0] as Album;
+
+        const queryKey = queryKeys.albums.detail(serverId || '', { id: albumId });
+        const previous = queryClient.getQueryData<any>(queryKey);
+        if (previous) {
+          switch (serverType) {
+            case ServerType.NAVIDROME:
+              queryClient.setQueryData<NDAlbumDetail>(queryKey, {
+                ...previous,
+                userRating: variables.query.rating,
+              });
+              break;
+            case ServerType.SUBSONIC:
+              queryClient.setQueryData<SSAlbumDetail>(queryKey, {
+                ...previous,
+                userRating: variables.query.rating,
+              });
+              break;
+            case ServerType.JELLYFIN:
+              // Jellyfin does not support ratings
+              break;
+          }
+        }
+      }
+
+      // We only need to set if we're already on the album detail page
+      const isAlbumArtistDetailPage =
+        variables.query.item.length === 1 &&
+        variables.query.item[0].itemType === LibraryItem.ALBUM_ARTIST;
+
+      if (isAlbumArtistDetailPage) {
+        const { serverType, id: albumArtistId, serverId } = variables.query.item[0] as AlbumArtist;
+
+        const queryKey = queryKeys.albumArtists.detail(serverId || '', {
+          id: albumArtistId,
+        });
+        const previous = queryClient.getQueryData<any>(queryKey);
+        if (previous) {
+          switch (serverType) {
+            case ServerType.NAVIDROME:
+              queryClient.setQueryData<NDAlbumArtistDetail>(queryKey, {
+                ...previous,
+                userRating: variables.query.rating,
+              });
+              break;
+            case ServerType.SUBSONIC:
+              queryClient.setQueryData<SSAlbumArtistDetail>(queryKey, {
+                ...previous,
+                userRating: variables.query.rating,
+              });
+              break;
+            case ServerType.JELLYFIN:
+              // Jellyfin does not support ratings
+              break;
+          }
+        }
+      }
+    },
+  });
+};
--- a/src/renderer/components/virtual-table/index.tsx
+++ b/src/renderer/components/virtual-table/index.tsx
@ -300,7 +300,7 @@ const tableColumns: { [key: string]: ColDef } = {
      GenericTableHeader(params, { position: 'center', preset: 'userRating' }),
    headerName: 'Rating',
    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.userRating : undefined),
+    valueGetter: (params: ValueGetterParams) => (params.data ? params.data : undefined),
    width: 95,
  },
 };