diff --git a/common/lkt.js b/common/lkt.js index 8353bacde2b54c18565bd61ce45e6dde35b96f68..54fdcfd2f29af3648eb65fef827abbdcb2899885 100644 --- a/common/lkt.js +++ b/common/lkt.js @@ -258,6 +258,7 @@ class LktClient { song: song, }; } + static getSongTimeData() { return this.timeData; } diff --git a/instance/main.js b/instance/main.js index e80430817edcd023351ce09c8606e0bb539c632c..8001561f17a1235705fbe597d2753243348b8d17 100644 --- a/instance/main.js +++ b/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,10 +191,8 @@ 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]) { - document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#4e5d6c'; - } + } else if (document.getElementsByClassName('karaQueue')[timeData.song]) { + document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#4e5d6c'; } }); diff --git a/instance/views/progressBar.ejs b/instance/views/progressBar.ejs index fefec9b813b67f153d00ebbcea4231cc21a6f295..74523e43313f9d1abd84ea1054ecd662549f66c2 100644 --- a/instance/views/progressBar.ejs +++ b/instance/views/progressBar.ejs @@ -1,7 +1,7 @@ <%# 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> diff --git a/main.js b/main.js index 332e62283b00c17a98fda73749c1750f44404290..9eb3b2d1b87e4542049937ad11a17b38c3b037e2 100644 --- a/main.js +++ b/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) {