feat(ratings): Subsonic entity ratings and StarRating UX

Probe OpenSubsonic after connect; persist album/artist ratings via setRating when supported. Add shared StarRating (repeat same star to clear, pulse and shrink animations, hover freeze after clear). Widen tracklist duration column and bump narrow saved widths in localStorage. Use StarRating in AlbumHeader, track lists, and playlist rows.
2026-07-22 15:25:46 +00:00 · 2026-04-08 01:08:41 +03:00
parent c1624342d3
commit 705c80ef07
20 changed files with 462 additions and 61 deletions
@@ -6,6 +6,8 @@ import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../hooks/useIsMobile';
+import StarRating from './StarRating';
+import type { EntityRatingSupportLevel } from '../api/subsonic';

 function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600);
@@ -85,6 +87,10 @@ interface AlbumHeaderProps {
  onEnqueueAll: () => void;
  onBio: () => void;
  onCloseBio: () => void;
+  entityRatingValue: number;
+  onEntityRatingChange: (rating: number) => void;
+  /** `unknown` = probe pending or not run; from `entityRatingSupportByServer`. */
+  entityRatingSupport: EntityRatingSupportLevel | 'unknown';
 }

 export default function AlbumHeader({
@@ -107,6 +113,9 @@ export default function AlbumHeader({
  onEnqueueAll,
  onBio,
  onCloseBio,
+  entityRatingValue,
+  onEntityRatingChange,
+  entityRatingSupport,
 }: AlbumHeaderProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -186,6 +195,15 @@ export default function AlbumHeader({
                  </>
                )}
              </div>
+              <div className="album-detail-entity-rating">
+                <span className="album-detail-entity-rating-label">{t('entityRating.albumShort')}</span>
+                <StarRating
+                  value={entityRatingValue}
+                  onChange={onEntityRatingChange}
+                  disabled={entityRatingSupport === 'track_only'}
+                  labelKey="entityRating.albumAriaLabel"
+                />
+              </div>
              {isMobile ? (
                <div className="album-detail-actions-mobile">
                  {/* Row 1 — Primary actions */}
@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { useDragDrop } from '../contexts/DragDropContext';
 import { AddToPlaylistSubmenu } from './ContextMenu';
 import { useIsMobile } from '../hooks/useIsMobile';
+import StarRating from './StarRating';

 function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600);
@@ -24,29 +25,6 @@ function codecLabel(song: { suffix?: string; bitRate?: number }): string {
  return parts.join(' ');
 }

-function StarRating({ value, onChange }: { value: number; onChange: (r: number) => void }) {
-  const { t } = useTranslation();
-  const [hover, setHover] = React.useState(0);
-  return (
-    <div className="star-rating" role="radiogroup" aria-label={t('albumDetail.ratingLabel')}>
-      {[1, 2, 3, 4, 5].map(n => (
-        <button
-          key={n}
-          className={`star ${(hover || value) >= n ? 'filled' : ''}`}
-          onMouseEnter={() => setHover(n)}
-          onMouseLeave={() => setHover(0)}
-          onClick={() => onChange(n)}
-          aria-label={`${n}`}
-          role="radio"
-          aria-checked={(hover || value) >= n}
-        >
-          ★
-        </button>
-      ))}
-    </div>
-  );
-}
-
 // ── Column configuration ──────────────────────────────────────────────────────
 // 'num'   → always 60 px fixed, no resize handle
 // 'title' → minmax(150px, 1fr) via flex:true, absorbs window-resize changes
@@ -58,14 +36,14 @@ const COLUMNS: readonly ColDef[] = [
  { key: 'artist',   i18nKey: 'trackArtist',   minWidth: 80,  defaultWidth: 180, required: false },
  { key: 'favorite', i18nKey: 'trackFavorite', minWidth: 50,  defaultWidth: 70,  required: false },
  { key: 'rating',   i18nKey: 'trackRating',   minWidth: 80,  defaultWidth: 120, required: false },
-  { key: 'duration', i18nKey: 'trackDuration', minWidth: 50,  defaultWidth: 65,  required: false },
+  { key: 'duration', i18nKey: 'trackDuration', minWidth: 72,  defaultWidth: 92,  required: false },
  { key: 'format',   i18nKey: 'trackFormat',   minWidth: 60,  defaultWidth: 90,  required: false },
  { key: 'genre',    i18nKey: 'trackGenre',    minWidth: 60,  defaultWidth: 90,  required: false },
 ];

 type ColKey = 'num' | 'title' | 'artist' | 'favorite' | 'rating' | 'duration' | 'format' | 'genre';

-// Columns where cell content should be centred (both header and rows)
+// Columns where header label is centred in the cell (matches row controls below)
 const CENTERED_COLS = new Set<ColKey>(['favorite', 'rating', 'duration']);

 // ── Props ─────────────────────────────────────────────────────────────────────
@@ -193,13 +171,21 @@ export default function AlbumTrackList({
      );
    }

-    // px-width columns: centred or left-aligned label + right-edge divider (except last col)
-    // direction=1: drag right → this column grows, title (1fr) shrinks
+    // px-width columns: centred (compact controls) or left-aligned label + right-edge divider
    const isResizable = !isLastCol;
    return (
-      <div key={key} data-align={isCentered ? 'center' : 'start'} style={{ position: 'relative', padding: 0, margin: 0, minWidth: 0, overflow: 'hidden' }}>
-        <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: isCentered ? 'center' : 'flex-start', paddingLeft: isCentered ? 0 : 12 }}>
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+      <div key={key} style={{ position: 'relative', padding: 0, margin: 0, minWidth: 0, overflow: 'hidden' }}>
+        <div
+          style={{
+            display: 'flex',
+            width: '100%',
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: isCentered ? 'center' : 'flex-start',
+            paddingLeft: isCentered ? 0 : 12,
+          }}
+        >
+          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
        </div>
        {isResizable && (
          <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex, 1)} />
@@ -0,0 +1,94 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function StarRating({
+  value,
+  onChange,
+  disabled = false,
+  labelKey = 'albumDetail.ratingLabel',
+  className = '',
+}: {
+  value: number;
+  onChange: (rating: number) => void;
+  disabled?: boolean;
+  labelKey?: string;
+  className?: string;
+}) {
+  const { t } = useTranslation();
+  const [hover, setHover] = React.useState(0);
+  const [pulseStar, setPulseStar] = React.useState<number | null>(null);
+  const [clearShrinkStar, setClearShrinkStar] = React.useState<number | null>(null);
+  /** After clear: ignore hover so stars stay grey until pointer leaves widget or next click */
+  const [suppressHoverPreview, setSuppressHoverPreview] = React.useState(false);
+
+  React.useEffect(() => {
+    if (value > 0) setSuppressHoverPreview(false);
+  }, [value]);
+
+  const effectiveHover = suppressHoverPreview ? 0 : hover;
+  const filled = (n: number) => (effectiveHover || value) >= n;
+
+  const handleStarClick = (n: number) => {
+    if (disabled) return;
+    setSuppressHoverPreview(false);
+
+    const next = value === n ? 0 : n;
+    onChange(next);
+    setHover(0);
+
+    setPulseStar(null);
+    setClearShrinkStar(null);
+
+    if (next === 0) {
+      setSuppressHoverPreview(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setClearShrinkStar(n));
+      });
+    } else {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setPulseStar(n));
+      });
+    }
+  };
+
+  const handleContainerLeave = () => {
+    setHover(0);
+    setSuppressHoverPreview(false);
+  };
+
+  return (
+    <div
+      className={`star-rating${disabled ? ' star-rating--disabled' : ''}${suppressHoverPreview ? ' star-rating--suppress-hover' : ''} ${className}`.trim()}
+      role="radiogroup"
+      aria-label={t(labelKey)}
+      aria-disabled={disabled}
+      onMouseLeave={disabled ? undefined : handleContainerLeave}
+    >
+      {[1, 2, 3, 4, 5].map(n => (
+        <button
+          key={n}
+          type="button"
+          className={`star ${filled(n) ? 'filled' : ''}${pulseStar === n ? ' star--pulse' : ''}${clearShrinkStar === n ? ' star--clear-shrink' : ''}`}
+          onMouseEnter={() => !disabled && !suppressHoverPreview && setHover(n)}
+          onClick={() => handleStarClick(n)}
+          onAnimationEnd={e => {
+            if (e.currentTarget !== e.target) return;
+            const name = e.animationName;
+            if (name === 'star-rating-star-pulse') {
+              setPulseStar(s => (s === n ? null : s));
+            }
+            if (name === 'star-rating-star-clear-shrink') {
+              setClearShrinkStar(s => (s === n ? null : s));
+            }
+          }}
+          disabled={disabled}
+          aria-label={`${n}`}
+          role="radio"
+          aria-checked={filled(n)}
+        >
+          ★
+        </button>
+      ))}
+    </div>
+  );
+}