instance/index.js

@@ -8,6 +8,7 @@ const { ipcRenderer } = require('electron'),
 /* Global variables */
 var countKaraInQueue = 0;
 var currentSong = 0;
+var currentSongElement;
 var dragCounter = 0;
 var leavedElement;
 var isDnDFromDB = false;
@@ -353,13 +354,23 @@ ipcRenderer.on('send-song-time-data', (event, timeData) => {
     }px`;
     if (timeData.state == 'play' || timeData.state == 'pause') {
         if (currentSong != timeData.song) {
-            document.getElementsByClassName('karaQueue')[currentSong].style.background = '#4e5d6c';
-            currentSong = timeData.song;
-            document.getElementsByClassName('karaQueue')[timeData.song].scrollIntoView(true);
+            document.getElementsByClassName('karaQueue').some((element) => { 
+                if(element.getElementsByClassName('position')[0].innerHTML == timeData.song+1){
+                    element.style.background = '#6b7d8e';
+                    if(prevElement) {
+                        prevElement.style.background = '#4e5d6c';
+                    }
+                    element.scrollIntoView(true);
+                    currentSongElement = element;
+                    return true;
+                }
+                prevElement = element;
+            });
+            
         }
-        document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#6b7d8e';
-    } else if (document.getElementsByClassName('karaQueue')[timeData.song]) {
-        document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#4e5d6c';
+        currentSongElement.style.background = '#6b7d8e';
+    } else if (currentSongElement) {
+        currentSongElement.style.background = '#4e5d6c';
     }
 });