Use a class for nowPlaying + fix "Uncaught ReferenceError: currentSongs is not defined"

instance/index.js

@@ -122,7 +122,7 @@ window.onload = () => {
         ipcRenderer.send('reload-db-request', {
             search: `${$('#filterInput').val()}`,
         });
-    })
+    });
 
     document.addEventListener(
         'keydown',
@@ -346,21 +346,21 @@ ipcRenderer.on('send-song-time-data', (event, timeData) => {
     if (timeData.state == 'play' || timeData.state == 'pause') {
         if (currentSong != timeData.song) {
             if (currentSongElement) {
-                currentSongElement.style.background = '#4e5d6c';
+                currentSongElement.classList.remove('nowPlaying');
             }
-            tmp = document.getElementById(`pos-${currentSongPos.toString()}`);
-            if (tmp) tmp.parentElement.style.background = '#4e5d6c';
+            tmp = document.getElementById(`pos-${currentSongPos}`);
+            if (tmp) tmp.parentElement.classList.remove('nowPlaying');
             currentSongPos = parseInt(timeData.song) + 1;
-            currentSongElement = document.getElementById(`pos-${currentSongPos.toString()}`).parentElement;
+            currentSongElement = document.getElementById(`pos-${currentSongPos}`).parentElement;
             currentSong = timeData.song;
-            currentSongElement.style.background = '#6b7d8e';
+            currentSongElement.classList.add('nowPlaying');
             currentSongElement.scrollIntoView(true);
         }
-        document.getElementById(`pos-${currentSongPos.toString()}`).parentElement.style.background = '#6b7d8e';
+        document.getElementById(`pos-${currentSongPos}`).parentElement.classList.add('nowPlaying');
     } else {
-        if (currentSongElement) currentSongElement.style.background = '#4e5d6c';
-        currentSong = document.getElementById(`pos-${currentSongPos.toString()}`);
-        if (currentSong) currentSongs.parentElement.style.background = '#4e5d6c';
+        if (currentSongElement) currentSongElement.classList.remove('nowPlaying');
+        currentSong = document.getElementById(`pos-${currentSongPos}`);
+        if (currentSong) currentSong.parentElement.classList.remove('nowPlaying');
     }
 });
 

style/css/instance.css

@@ -125,6 +125,10 @@ input[type="color"]:focus,
     margin: 0px !important;
 }
 
+.karaCard.nowPlaying {
+    background-color: #6b7d8e;
+}
+
 .karaElement {
     height: fit-content;
     margin: auto;