First try to update the play/pause button depending on lektord state

common/lkt.js

@@ -258,6 +258,7 @@ class LktClient {
             song: song,
         };
     }
+
     static getSongTimeData() {
         return this.timeData;
     }

instance/main.js

@@ -12,6 +12,19 @@ var dragCounter = 0;
 var leavedElement;
 var isDnDFromDB = false;
 
+function updatePlayPauseButton(state) {
+    logger.debug('instance', `State was ${state}`);
+    if (state === 'play') {
+        /* Play */
+        $('#commandPlay').children().addClass('fa-pause');
+        $('#commandPlay').children().removeClass('fa-play');
+    } else {
+        /* Pause or Stop */
+        $('#commandPlay').children().addClass('fa-play');
+        $('#commandPlay').children().removeClass('fa-pause');
+    }
+}
+
 function addIpcToButton(btnId, ipc) {
     document.getElementById(btnId).addEventListener('click', () => {
         ipc.forEach(ipc => {
@@ -91,6 +104,7 @@ window.onload = () => {
     setInterval(() => ipcRenderer.send('verify-queue-reloaded-request'), 50);
     setInterval(() => ipcRenderer.send('get-song-time-data'), 50);
     setInterval(() => ipcRenderer.send('get-runnings'), 10000);
+    setInterval(() => ipcRenderer.send('verify-state'), 500);
     logger.debug('instance', 'Window loaded');
 
     $('#filterInput').on('keypress', e => {
@@ -165,6 +179,8 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
     [].forEach.call(document.querySelectorAll('#panelRight .karaCard'), addQueueKaraEventHandlers);
 });
 
+ipcRenderer.on('send-state', (event, state) => updatePlayPauseButton(state));
+
 ipcRenderer.on('send-song-time-data', (event, timeData) => {
     document.getElementById('progressBar').style.width = `${
         (timeData.elapsed / timeData.total) * document.documentElement.clientWidth
@@ -175,11 +191,9 @@ ipcRenderer.on('send-song-time-data', (event, timeData) => {
             currentSong = timeData.song;
         }
         document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#6b7d8e';
-    } else {
-        if (document.getElementsByClassName('karaQueue')[timeData.song]) {
+    } else if (document.getElementsByClassName('karaQueue')[timeData.song]) {
         document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#4e5d6c';
     }
-    }
 });
 
 ipcRenderer.on('send-runnings', (event, arg) => {

instance/views/progressBar.ejs

 <%# vim: ts=4 syntax=html
     The template for the progress bar at the bottom of the screen %>
-<div id="progress" class="progress" style="z-index: 666; position: fixed !important; right: 0; left: 0; bottom: 0; height: 14px">
+<span id="progress" class="progress" style="z-index: 666; position: fixed !important; right: 0; left: 0; bottom: 0; height: 14px; border-top: 2px solid rgba(0, 0, 0, 0.125);">
     <div class="progress-bar" id="progressBar" role="progressbar"
          style="-webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;">
     </div>
-</div>
+</span>

main.js

@@ -280,6 +280,8 @@ ipcMain.on('add-kara-queue-pos', (event, addparams) => {
     lkt.commandQueueAddId(addparams.id).then(() => lkt.commandMove(addparams.queueSize + 1, addparams.position));
 });
 
+ipcMain.on('verify-state', (event, arg) => lkt.commandStatus().then(data => event.reply('send-state', data.state)));
+
 ipcMain.on('get-song-time-data', (event, arg) => {
     var newSongTimeData = lkt.getSongTimeData();
     if (newSongTimeData.elapsed != songTimeData.elapsed || newSongTimeData.song != songTimeData.song) {