fix: ensure heart btn click checks on track id

cdrani · May 30, 2024 · 6dd7708 · 6dd7708
1 parent 7f912cd
commit 6dd7708
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 23 deletions.
diff --git a/src/models/heart-icon.js b/src/models/heart-icon.js
@@ -91,12 +91,12 @@ export default class HeartIcon {
             detail: { key: 'tracks.update', values: { id: likedTrackId, method } }
         })
 
-        return method == 'PUT'
+        return { highlight: method == 'PUT', id: likedTrackId }
     }
 
     async #handleClick() {
-        const highlight = await this.#dispatchLikedTracks()
-        this.highlightIcon(highlight)
+        const { highlight = false, id = null } = await this.#dispatchLikedTracks()
+        this.highlightIcon(highlight, id)
     }
 
     get #nowPlayingButton() {
@@ -125,24 +125,20 @@ export default class HeartIcon {
         return this.#heartIcon.firstElementChild.getAttribute('fill') != 'unset'
     }
 
-    async #getIsTrackLiked({ type, trackId }) {
-        if (!trackId) return false
+    async #getIsTrackLiked(id) {
+        if (!id) return false
 
-        const trackState = store.checkInCollection(trackId)
+        const trackState = store.checkInCollection(id)
         if (trackState !== null) return trackState
 
-        let id = trackId
-        if (type == 'album') {
-            id = await this.#dispatchGetTrackIdFromAlbum(trackId)
-        }
         const response = await this.#dispatchIsInCollection(id)
 
         const saved = response?.data?.at(0)
         store.saveInCollection({ id, saved })
         return saved
     }
 
-    async highlightIcon(highlight) {
+    async highlightIcon(highlight, id) {
         let { trackId, type = 'track', id: songId } = await currentData.readTrack()
 
         let shouldUpdate = false
@@ -155,7 +151,7 @@ export default class HeartIcon {
             }
             if (!trackId) return
 
-            shouldUpdate = await this.#getIsTrackLiked({ type, trackId })
+            shouldUpdate = await this.#getIsTrackLiked(trackId)
         }
 
         highlightIconTimer({
@@ -165,11 +161,11 @@ export default class HeartIcon {
         })
 
         this.#updateIconLabel(shouldUpdate)
-        store.saveInCollection({ id: trackId, saved: shouldUpdate })
-        this.#highlightInTracklist(shouldUpdate, trackId)
+        store.saveInCollection({ id: id ?? trackId, saved: shouldUpdate })
+        this.#highlightInTracklist({ highlight: shouldUpdate, trackId: id ?? trackId })
     }
 
-    #highlightInTracklist(highlight, trackId) {
+    #highlightInTracklist({ highlight, trackId }) {
         const anchors = document.querySelectorAll(
             `a[data-testid="internal-track-link"][href="/track/${trackId}"]`
         )

diff --git a/src/models/tracklist/heart-icon.js b/src/models/tracklist/heart-icon.js
@@ -1,7 +1,7 @@
 import TrackListIcon from './tracklist-icon.js'
 import { TRACK_HEART, createIcon } from '../../components/icons/icon.js'
 
-import { getTrackId } from '../../utils/song.js'
+import { getTrackId, trackSongInfo } from '../../utils/song.js'
 import Dispatcher from '../../events/dispatcher.js'
 import { currentData } from '../../data/current.js'
 import { highlightIconTimer } from '../../utils/highlight.js'
@@ -51,15 +51,13 @@ export default class HeartIcon extends TrackListIcon {
         const icon = row.querySelector(this._selector)
         this.animate(icon, saved)
 
-        this.#updateCurrentTrack(trackId, saved)
+        const { id: songId } = trackSongInfo(row)
+        await this.#updateCurrentTrack({ songId, highlight: saved })
     }
 
-    async #updateCurrentTrack(trackId, highlight) {
-        const currentTrack = await currentData.readTrack()
-
-        if (!currentTrack?.trackId) return
-
-        if (currentTrack?.trackId !== trackId) return
+    async #updateCurrentTrack({ songId, highlight }) {
+        const { id } = await currentData.readTrack()
+        if (id !== songId) return
 
         highlightIconTimer({
             highlight,