Auto-fill album for artist and track (#250)

Closes #88

---------

Co-authored-by: Enrico Lamperti <[email protected]>

Author: mishmish-dev

public/locales/en.json

@@ -162,5 +162,7 @@
   "connect": "Connect",
   "General settings title": {
     "general": "General"
-  }
+  },
+  "autoFillAlbum": "Fill album name from last.fm",
+  "autoFillAlbumInvalidForm": "Enter artist and track for album auto-fill"
 }

public/locales/ru.json

@@ -160,5 +160,7 @@
   "connect": "Connect",
   "General settings title": {
     "general": "General"
-  }
+  },
+  "autoFillAlbum": "Заполнить альбом с last.fm",
+  "autoFillAlbumInvalidForm": "Введите имя исполнителя и трек, чтобы автозаполнить альбом"
 }

src/domains/scrobbleSong/SongForm.css

@@ -15,10 +15,24 @@ Label.required::after {
   width: calc(100% + 15px);
 }
 
-input.hasLock {
+input.has-button {
   padding-right: 2em;
 }
 
+input.has-two-buttons {
+  padding-right: 4em;
+}
+
+input.autofill-success {
+  box-shadow: inset 0 0 0.4em #5bc0de;
+  border-color: #5bc0de;
+}
+
+input.autofill-fail {
+  box-shadow: inset 0 0 0.4em var(--bs-red);
+  border-color: var(--bs-danger-border-subtle);
+}
+
 .lock-button {
   position: relative;
   height: 1.6rem;
@@ -29,15 +43,35 @@ input.hasLock {
   cursor: pointer;
 }
 
+.autofill-button {
+  position: relative;
+  height: 1.6rem;
+  top: -3.4rem;
+  right: 1.75rem;
+  margin-left: calc(100% - 1.5rem);
+  padding: 0.1rem 0.4rem 0.1rem;
+  cursor: pointer;
+}
+
 .input-with-lock {
   max-height: 1rem;
 }
 
-.fa-thumbtack {
+.fa-thumbtack,
+.fa-wand-magic-sparkles {
   color: #aaaaaa;
   transition: 0.2s;
 }
 
+.fa-thumbtack:hover,
+.fa-wand-magic-sparkles:hover {
+  color: #777777;
+}
+
+.fa-wand-magic-sparkles.disabled {
+  color: #cccccc;
+}
+
 .fa-thumbtack.active {
   color: #333333;
   position: relative;
@@ -68,3 +102,25 @@ input.hasLock {
 .SongForm-PasteAlert {
   cursor: pointer;
 }
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(4px);
+  }
+  50% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.autofill-fail {
+  animation: shake 0.18s 2;
+}

src/domains/scrobbleSong/SongForm.tsx

@@ -10,7 +10,7 @@ import addDays from 'date-fns/addDays';
 import { Button, ButtonGroup, Form, FormGroup, Input, Label } from 'reactstrap';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faThumbtack, faExchangeAlt, faHeart } from '@fortawesome/free-solid-svg-icons';
+import { faThumbtack, faExchangeAlt, faHeart, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons';
 import { faLightbulb } from '@fortawesome/free-regular-svg-icons';
 
 import { useSettings } from 'hooks/useSettings';
@@ -24,12 +24,21 @@ import './SongForm.css';
 
 import type { Scrobble } from 'utils/types/scrobble';
 
+import { trackGetInfo } from 'utils/clients/lastfm/methods/trackGetInfo';
+import { get } from 'lodash-es';
+
 const DateTimePicker = lazyWithPreload(() => import('components/DateTimePicker'));
 const Tooltip = lazyWithPreload(() => import('components/Tooltip'));
 
 const reAutoPasteSplitting = / - | ?[–—] ?/;
 const controlOrder = ['artist', 'title', 'album']; // Used for arrow navigation
 
+enum AutoFillStatus {
+  Idle = '',
+  Success = 'autofill-success',
+  Fail = 'autofill-fail',
+}
+
 type SongMatch = {
   artist: string;
   title: string;
@@ -81,6 +90,7 @@ export function SongForm() {
   const [timestamp, setTimestamp] = useState(new Date());
   const [title, setTitle] = useState('');
   const [isCustomDate, setIsCustomDate] = useState(false);
+  const [albumAutoFillStatus, setalbumAutoFillStatus] = useState(AutoFillStatus.Idle);
 
   const dispatch = useDispatch();
   const { isLoading: settingsLoading, settings } = useSettings();
@@ -290,6 +300,22 @@ export function SongForm() {
     setFormValid(artist.trim().length > 0 && title.trim().length > 0);
   };
 
+  const autoFillAlbum = async () => {
+    if (!formIsValid) {
+      return;
+    }
+    const info = await trackGetInfo({ artist, title });
+    const suggestedAlbum = get(info, 'album.title');
+
+    if (suggestedAlbum === undefined) {
+      setalbumAutoFillStatus(AutoFillStatus.Fail);
+    } else {
+      setalbumAutoFillStatus(AutoFillStatus.Success);
+      setAlbum(suggestedAlbum);
+    }
+    setTimeout(() => setalbumAutoFillStatus(AutoFillStatus.Idle), 1200);
+  };
+
   return (
     <Form className="SongForm" data-cy="SongForm">
       <FormGroup className="row">
@@ -303,7 +329,7 @@ export function SongForm() {
             name="artist"
             id="artist"
             tabIndex={1}
-            className="hasLock"
+            className="has-button"
             data-cy="SongForm-artist"
             value={artist}
             onChange={(e) => setArtist((e.target as HTMLInputElement).value)}
@@ -365,14 +391,15 @@ export function SongForm() {
             name="album"
             id="album"
             tabIndex={3}
-            className="hasLock"
+            className={'has-two-buttons ' + albumAutoFillStatus}
             data-cy="SongForm-album"
             value={album}
             onChange={(e) => setAlbum((e.target as HTMLInputElement).value)}
             onKeyUp={catchKeys}
           />
+
           <div
-            className="lock-button rounded"
+            className={'lock-button rounded ' + albumAutoFillStatus}
             id="lock-album"
             data-cy="SongForm-album-lock"
             onClick={toggleLock('album')}
@@ -382,6 +409,25 @@ export function SongForm() {
           <Tooltip target="lock-album">
             <Trans i18nKey="lockAlbum">Lock album</Trans>
           </Tooltip>
+
+          <div
+            className={'autofill-button rounded ' + albumAutoFillStatus}
+            id="autofill-album"
+            data-cy="SongForm-autofill-button"
+            onClick={autoFillAlbum}
+          >
+            <FontAwesomeIcon
+              icon={faWandMagicSparkles}
+              className={formIsValid || albumAutoFillStatus === AutoFillStatus.Fail ? '' : 'disabled'}
+            />
+          </div>
+          <Tooltip target="autofill-album">
+            {formIsValid ? (
+              <Trans i18nKey="autoFillAlbum">Fill album name from last.fm</Trans>
+            ) : (
+              <Trans i18nKey="autoFillAlbumInvalidForm">Enter artist and track for album auto-fill</Trans>
+            )}
+          </Tooltip>
         </div>
       </FormGroup>
       <FormGroup className="row">
@@ -395,7 +441,7 @@ export function SongForm() {
             name="albumArtist"
             id="albumArtist"
             tabIndex={3}
-            className="hasLock"
+            className="has-button"
             data-cy="SongForm-albumArtist"
             value={albumArtist}
             onChange={(e) => setAlbumArtist((e.target as HTMLInputElement).value)}

src/utils/clients/lastfm/methods/trackGetInfo.test.ts

@@ -0,0 +1,37 @@
+import { lastfmAPI } from '../apiClient';
+import { trackGetInfo } from './trackGetInfo';
+
+vi.mock('../apiClient');
+
+describe('Last.fm client: `trackGetInfo` method', () => {
+  it('calls the API to get the track info', async () => {
+    await trackGetInfo({ mbid: '1', artist: 'test-artist', title: 'test' });
+
+    expect(lastfmAPI.get).toHaveBeenCalledWith('', {
+      params: expect.objectContaining({
+        method: 'track.getInfo',
+      }),
+    });
+  });
+
+  it('uses the mbid of the track', async () => {
+    await trackGetInfo({ mbid: '1', artist: 'test-artist', title: 'test' });
+
+    expect(lastfmAPI.get).toHaveBeenCalledWith('', {
+      params: expect.objectContaining({
+        mbid: '1',
+      }),
+    });
+  });
+
+  it('uses the track and artist name in absence of an mbid', async () => {
+    await trackGetInfo({ artist: 'test-artist', title: 'test' });
+
+    expect(lastfmAPI.get).toHaveBeenCalledWith('', {
+      params: expect.objectContaining({
+        artist: 'test-artist',
+        track: 'test',
+      }),
+    });
+  });
+});

src/utils/clients/lastfm/methods/trackGetInfo.ts

@@ -0,0 +1,22 @@
+import { get } from 'lodash-es';
+import { lastfmAPI } from '../apiClient';
+
+export async function trackGetInfo(track: { mbid?: string; artist: string; title: string }) {
+  const searchParams = track.mbid
+    ? {
+        mbid: track.mbid,
+      }
+    : {
+        artist: track.artist,
+        track: track.title,
+      };
+
+  const response = await lastfmAPI.get('', {
+    params: {
+      method: 'track.getInfo',
+      ...searchParams,
+    },
+  });
+
+  return get(response, 'data.track');
+}