Current kara background

common/lkt.js

@@ -170,9 +170,8 @@ class LktClient {
                 setInterval(()=>client.m_socket.write(`status\n`),100);
                 client.m_socket.on('data', data => {
                     dataObj = __mpdToObject(data);
-                    //logger.info('lkt', `elapsed:${dataObj.elapsed}, total:${dataObj.duration}`);
-                    if(dataObj.elapsed && dataObj.duration && dataObj.state) {
-                        LktClient.setSongTimeData(parseInt(dataObj.elapsed,10), parseInt(dataObj.duration,10), dataObj.state);
+                    if(dataObj.elapsed && dataObj.duration && dataObj.state && dataObj.song) {
+                        LktClient.setSongTimeData(parseInt(dataObj.elapsed,10), parseInt(dataObj.duration,10), dataObj.state, parseInt(dataObj.song,10));
                     }
                    
                 });
@@ -202,11 +201,10 @@ class LktClient {
         LktClient.setPlayState(status.state);
     }
     static commandPlayPos(position) {
-        this.setSongTimeData(0,this.timeData.total,this.timeData.state);
+        this.setSongTimeData(0,this.timeData.total,this.timeData.state, this.timeData.state);
         return LktClient.__execSimple(`play ${position}`);
     }
     static commandStop() {
-        //return LktClient.idleActualisation();
         return LktClient.__execSimple('stop');
     }
     static commandPrev() {
@@ -252,14 +250,14 @@ class LktClient {
         return this.queue_updated;
     }
 
-    static timeData = {elapsed:0, total:100, state:'stop'};
+    static timeData = {elapsed:0, total:100, state:'stop', song:0};
 
     static setPlayState(state) {
         this.timeData.state = state;
     }
 
-    static setSongTimeData(elapsed, total, state) {
-        this.timeData = {elapsed:elapsed, total:total, state:state};
+    static setSongTimeData(elapsed, total, state, song) {
+        this.timeData = {elapsed:elapsed, total:total, state:state, song:song};
     }
     static getSongTimeData() {
         return this.timeData;

instance/main.js

@@ -175,9 +175,22 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
     );
 });
 
+var currentSong=0;
 ipcRenderer.on('send-song-time-data', (event,timeData) => {
     document.getElementById('progressBar').style.width=
     `${timeData.elapsed/timeData.total*document.documentElement.clientWidth}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].style.background = '#6b7d8e';
+    }
+    else {
+        document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#4e5d6c';
+    }
+    
 });
 
 
@@ -235,11 +248,13 @@ function onDragStartQueue(event) {
 }
 
 function onDragEnter(event) {
-    if (leavedElement != event.currentTarget) {
-        leavedElement.style.borderTop = '';
+    if(event.currentTarget) {
+        if (leavedElement != event.currentTarget) {
+            leavedElement.style.borderTop = '';
+        }
+        event.currentTarget.style.borderTop = '3px solid grey';
+        dragCounter++;
     }
-    event.currentTarget.style.borderTop = '3px solid grey';
-    dragCounter++;
 }
 
 function onDragOver(event) {

instance/views/karaQueueListItem.ejs

 <%# vim: ts=4 syntax=html
     The template for the kara card in lists %>
-<li class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 karaCard" draggable="true">
+<li class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 karaCard karaQueue" draggable="true">
     <span hidden class = "karaID"><%= kara.id %></span>
     <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b><%= kara.language %></b></span>
     <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b><%= kara.cat      %></b></span>

main.js

@@ -244,20 +244,20 @@ ipcMain.on('add-kara-queue-pos', (event,addparams) => {
     lkt.commandQueueAddId(addparams.id).then(() => lkt.commandMove(addparams.queueSize+1,addparams.position));
 });
 
-var songTimeData = {elapsed:0,total:100,state:'stop'};
+var songTimeData = {elapsed:0,total:100,state:'stop', song:'0'};
 var counterTime = 0;
 ipcMain.on('get-song-time-data', (event,arg) => {
     var newSongTimeData = lkt.getSongTimeData();
-    if(newSongTimeData.elapsed != songTimeData.elapsed) {
+    if(newSongTimeData.elapsed != songTimeData.elapsed || newSongTimeData.song != songTimeData.song) {
         songTimeData = newSongTimeData;
-        event.reply('send-song-time-data',{elapsed:songTimeData.elapsed, total:songTimeData.total});
+        event.reply('send-song-time-data',{elapsed:songTimeData.elapsed, total:songTimeData.total, song:songTimeData.song,state:songTimeData.state});
         counterTime = 0;
     }
     else if(newSongTimeData.state == 'play') {
         counterTime++;
-        event.reply('send-song-time-data',{elapsed:songTimeData.elapsed+(counterTime/20.0), total:songTimeData.total});
+        event.reply('send-song-time-data',{elapsed:songTimeData.elapsed+(counterTime/20.0), total:songTimeData.total, song:songTimeData.song, state:songTimeData.state});
     }
     else {
-        event.reply('send-song-time-data',{elapsed:songTimeData.elapsed+(counterTime/20.0), total:songTimeData.total})   
+        event.reply('send-song-time-data',{elapsed:songTimeData.elapsed+(counterTime/20.0), total:songTimeData.total, song:songTimeData.song, state:songTimeData.state})   
     }
 });
\ No newline at end of file