fix: song tracker and shared snip playback issues (#170)

src/background.js

@@ -45,22 +45,29 @@ function setState({ key, value = {} }) {
     ))
 }
 
+function updateBadgeState({ changes, changedKey }) {
+    if (changedKey != 'enabled') return
+
+    const { newValue, oldValue } = changes.enabled
+    ENABLED = newValue ?? !oldValue
+    setBadgeInfo(ENABLED)
+}
+
 chrome.storage.onChanged.addListener(async changes => {
     const keys = Object.keys(changes)
     const changedKey = keys.find(key => (
-        key == 'now-playing' || key == 'enabled' || key == 'auth_token' || key == 'device_id'
+        ['now-playing', 'enabled', 'auth_token', 'device_id'].includes(key)
     ))
 
     if (!changedKey) return
 
-    if (changedKey == 'now-playing' && ENABLED) {
-        return popupPort?.postMessage({ type: changedKey, data: changes[changedKey].newValue }) 
-    }
+    updateBadgeState({ changes, changedKey })
+
+    if (['now-playing', 'enabled'].includes(changedKey)) {
+        if (changedKey == 'now-playing' && !ENABLED) return
 
-    if (changedKey == 'enabled') {
-        const { newValue } = changes.enabled
-        ENABLED = newValue
-        setBadgeInfo(newValue)
+        popupPort?.postMessage({ type: changedKey, data: changes[changedKey].newValue }) 
+        if (changedKey == 'now-playing') return
     }
 
     await sendMessage({ message: { [changedKey]: changes[changedKey].newValue }})

src/data/current.js

@@ -4,32 +4,28 @@ import { playback } from '../utils/playback.js'
 import { currentSongInfo } from '../utils/song.js'
 
 class CurrentData {
-    #store
-
     constructor(store) {
-        this.#store = store
+        this._store = store
     }
 
     get #isShowingModal() {
         const mainElement = document.getElementById('chorus-main')
-
         if (!mainElement) return false
 
         return mainElement.style.display == 'block'
     }
 
     get songId() {
-        if (this.#isShowingModal) {
-            const title = document.getElementById('track-title')?.textContent
-            const artists = document.getElementById('track-artists')?.textContent
-            return `${title} by ${artists}`
-        }
+        if (!this.#isShowingModal) return currentSongInfo().id
 
-        return currentSongInfo().id
+        const title = document.getElementById('track-title')?.textContent
+        const artists = document.getElementById('track-artists')?.textContent
+        return `${title} by ${artists}`
     }
 
     get #trackDefaults() {
         return {
+            ...currentSongInfo(),
             startTime: 0,
             isSnip: false,
             isSkipped: false,
@@ -61,41 +57,24 @@ class CurrentData {
     }
 
     async getSeekValues() {
-        const seekValues = await this.#store.getTrack({
+        return await this._store.getTrack({
             id: 'chorus-seek',
             value: {
-                shows: { ff: 15, rw: 15 }, // audiobooks, podcasts, (longform audio)
+                shows: { ff: 15, rw: 15 },  // audiobooks, podcasts, (longform audio)
                 global: { ff: 10, rw: 10 }, // albums, playlists, tracks (shortform audio)
             }
         })
-
-        return seekValues
     }
 
     async readTrack() {
-        const { cover, id } = currentSongInfo()
-        const track = await this.#store.getTrack({
-            id,
-            value: {
-                id,
-                cover,
-                ...this.#trackDefaults,
-            }
-        })
-
-        return track
+        return await this._store.getTrack({ id: currentSongInfo().id, value: this.#trackDefaults })
     }
 
     async readGlobals() {
-        const globals = await this.#store.getTrack({
+        return await this._store.getTrack({
             id: 'globals',
-            value: {
-                playbackRate: 1,
-                preservesPitch: true
-            }
+            value: { playbackRate: 1, preservesPitch: true }
         })
-
-        return globals
     }
 }
 

src/data/song-state.js

@@ -29,9 +29,9 @@ export const songState = async () => {
 
     return {
         id,
-        trackId: trackId ?? trackIdFromURL,
-        isShared: !!trackIdFromURL,
+        isShared: true,
         ...state,
-        ...sharedSnipState
+        ...sharedSnipState,
+        trackId: trackIdFromURL
     }
 }

src/manifest.chrome.json

@@ -6,7 +6,9 @@
   "manifest_version": 3,
   "author": "cdrani",
   "action": {
-    "default_icon": "icons/logo.png",
+    "default_icon": {
+      "32": "icons/logo.png"
+    },
     "default_popup": "popup/index.html"
   },
   "icons": {

src/models/snip/current-snip.js

@@ -1,8 +1,8 @@
 import Snip from './snip.js'
 
-import { playback } from '../../utils/playback.js'
 import { currentSongInfo } from '../../utils/song.js'
 import { spotifyVideo } from '../../actions/overload.js'
+import { currentData } from '../../data/current.js'
 
 export default class CurrentSnip extends Snip {
     constructor(songTracker) {
@@ -12,12 +12,13 @@ export default class CurrentSnip extends Snip {
         this._video = spotifyVideo.element
     }
 
-    init() {
+    async init() {
         super.init()
 
         this._controls.init()
         this.#displayTrackInfo()
-        this._controls.setInitialValues(this.read())
+        const track = await this.read()
+        this._controls.setInitialValues(track)
     }
 
     #displayTrackInfo() {
@@ -27,15 +28,7 @@ export default class CurrentSnip extends Snip {
     }
 
     get _defaultTrack() {
-        return {
-            id: currentSongInfo().id,
-            value: {
-                startTime: 0,
-                isSnip: false,
-                isSkipped: false,
-                endTime: playback.duration(),
-            },
-        }
+        return currentData.readTrack()
     }
 
     updateView() {
@@ -72,11 +65,13 @@ export default class CurrentSnip extends Snip {
 
     async save() {
         const { inputLeft, inputRight } = this._elements
-        const { isSkipped, endTime: prevEndTime } = await this.read()
+        const track = await this.read()
+        const { id, isSkipped, endTime: prevEndTime } = track
 
-        await this._store.saveTrack({
-            id: currentSongInfo().id,
+        const result = await this._store.saveTrack({
+            id,
             value: {
+                ...track,
                 isSnip: true,
                 startTime: inputLeft.value,
                 endTime: inputRight.value,
@@ -85,10 +80,9 @@ export default class CurrentSnip extends Snip {
         })
 
         this.updateView()
+        this.skipTrackOnSave(result)
+        this.setCurrentTime({ prevEndTime, endTime: result.endTime })
 
-        const updatedValues = await this.read()
-        this.skipTrackOnSave(updatedValues)
-        this.setCurrentTime({ prevEndTime, endTime: updatedValues.endTime })
-        await this._songTracker.updateCurrentSongData(updatedValues)
+        await this._songTracker.updateCurrentSongData(result)
     }
 }

src/models/snip/snip.js

@@ -3,8 +3,9 @@ import { store } from '../../stores/data.js'
 import Alert from '../alert.js'
 import SliderControls from '../slider/slider-controls.js'
 
-import { copyToClipBoard } from '../../utils/clipboard.js'
 import { timeToSeconds } from '../../utils/time.js'
+import { currentData } from '../../data/current.js'
+import { copyToClipBoard } from '../../utils/clipboard.js'
 
 export default class Snip {
     constructor() {
@@ -17,8 +18,8 @@ export default class Snip {
         this._controls.init()
     }
 
-    read() {
-        return this._store.getTrack(this._defaultTrack)
+    async read() {
+        return (await currentData.readTrack())
     }
 
     reset() {
@@ -30,8 +31,8 @@ export default class Snip {
         this._updateView()
     }
 
-    _updateView() {
-        const response = this.read()
+    async _updateView(initData = null) {
+        const response = initData ?? await this.read()
         const { isSnip, isSkip } = response
 
         this.#setUpdateControls(response)
@@ -48,8 +49,8 @@ export default class Snip {
         }
     }
 
-    _share() {
-        const { startTime, endTime, playbackRate = '1.00', preservesPitch = true } = this.read()
+    async _share() {
+        const { startTime, endTime, playbackRate = '1.00', preservesPitch = true } = await this.read()
         const pitch = preservesPitch ? 1 : 0
         const rate = parseFloat(playbackRate) * 100
 

src/models/snip/track-snip.js

@@ -10,14 +10,15 @@ export default class TrackSnip extends Snip {
         this._row = null
     }
 
-    init(row) {
+    async init(row) {
         super.init()
 
         this._row = row
         this._controls.init()
         this.#displayTrackInfo()
         const { id, endTime: duration } = trackSongInfo(row)
-        this._controls.setInitialValues({ ...this.read(), id, duration })
+        const track = await this.read()
+        this._controls.setInitialValues({ ...track, id, duration })
     }
 
     #displayTrackInfo() {
@@ -27,11 +28,12 @@ export default class TrackSnip extends Snip {
     }
 
     get _defaultTrack() {
-        const { id, endTime } = trackSongInfo(this._row)
+        const track = trackSongInfo(this._row)
 
         return {
-            id,
+            id: track.id,
             value: {
+                ...track,
                 endTime,
                 startTime: 0,
                 isSnip: false,
@@ -40,18 +42,17 @@ export default class TrackSnip extends Snip {
         }
     }
 
-    updateView() {
+    updateView(songStateData) {
         super._updateView()
-        this.highlightSnip()
+        this.highlightSnip(songStateData)
     }
 
     toggleIconVisibility({ isSnip }) {
         const icon = this._row.queryselector('button[role="snip"]')
         icon.style.visibility = isSnip ? 'visible' : 'hidden'
     }
 
-    highlightSnip() {
-        const songStateData = this.read()
+    highlightSnip(songStateData) {
         highlightElement({ 
             songStateData,
             property: 'color',
@@ -77,9 +78,9 @@ export default class TrackSnip extends Snip {
 
     async save() {
         const { inputLeft, inputRight } = this._elements
-        const { isSkipped } = this.read()
+        const { isSkipped } = await this.read()
 
-        await this._store.saveTrack({
+        const songStateData = await this._store.saveTrack({
             id: trackSongInfo(this._row).id,
             value: {
                 isSnip: true,
@@ -89,6 +90,6 @@ export default class TrackSnip extends Snip {
             },
         })
 
-        this.updateView()
+        this.updateView(songStateData)
     }
 }

src/models/tracklist/track-list.js

@@ -92,7 +92,7 @@ export default class TrackList {
             if (role == 'snip') {
                 if (!this._previousRowNum || (currentIndex != this._previousRowNum)) {
                     this._chorus.show()
-                    this._trackSnip.init(row)
+                    await this._trackSnip.init(row)
                 } else if (currentIndex == this._previousRowNum) {
                     this._chorus.toggle()
                 }

src/models/tracklist/tracklist-icon.js

@@ -6,6 +6,7 @@ export default class TrackListIcon {
         this._key = key
         this._store = store
         this._selector = selector
+        this._seen = new Set()
     }
 
     #getIcon(row) {
@@ -37,11 +38,14 @@ export default class TrackListIcon {
 
     async #initializeTrack(row) {
         const song = trackSongInfo(row)
+
         if (!song) return
+        if (this._seen.has(song.id)) return
 
-        return await this._store.getTrack({
+        this._seen.add(song.id)
+        await this._store.getTrack({
             id: song.id,
-            value: { isSkipped: false, isSnip: false, startTime: 0, endTime: song.endTime },
+            value: { ...song, isSkipped: false, isSnip: false, startTime: 0, endTime: song.endTime }
         })
     }