diff --git a/common/lkt.js b/common/lkt.js
index d791194d6f02dc8b13e0d926c239b3d3e35724b2..41806c07ccb0ce86418677ae01437766f21e3c58 100644
--- a/common/lkt.js
+++ b/common/lkt.js
@@ -313,6 +313,22 @@ class LktClient {
static commandQueueDelId(id) {
return LktClient.__execSimple(`deleteid ${id}`);
}
+
+ static commandPlaylistAddId(playlist, id) {
+ logger.info("playlist", `playlistadd ${playlist} id://${id}`);
+ return LktClient.__execSimple(`playlistadd ${playlist} id://${id}`);
+ }
+
+ static commandPlaylistRemoveId(playlist, id) {
+ return LktClient.__execSimple(`playlistdelete ${playlist} ${id}`);
+ }
+
+ static commandPlaylistClear(playlist) {
+ return LktClient.__execSimple(`playlistclear ${playlist}`);
+ }
+ static commandAddPlaylistToQueue(playlist) {
+ return LktClient.__execSimple(`add playlist://${playlist}`);
+ }
static errorStatus(error) {
logger.error('Unable to access lektor status:' + error);
diff --git a/instance/main.js b/instance/main.js
index aa3788e56064ba447c29253eb91559cf6b0552d9..de97a99f10a5b390be5c2c3cb1695f10631668dd 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -4,7 +4,7 @@ const { ipcRenderer, ipcMain } = require('electron'),
logger = require('../common/logger.js'),
ejs = require('ejs'),
e = require('express');
-const { changePlayStatus } = require('../common/lkt.js');
+const { doc } = require('prettier');
/* Global variables */
var countKaraInQueue = 0;
@@ -148,6 +148,7 @@ window.onload = () => {
configureLeftPanel();
};
var currentPlaylist = "";
+var isInPlaylistTab = false ;
/* Create the button list */
function configureLeftPanel() {
@@ -160,12 +161,30 @@ function configureLeftPanel() {
tabQueue.style.boxShadow = "none";
tabPlaylist.style.outline = "none";
tabPlaylist.style.boxShadow = "none";
+ document.getElementById('clearQueue').addEventListener('click', () => {
+ ipcRenderer.send('clear-queue');
+ });
+
+ document.getElementById('clearPlaylist').addEventListener('click', () => {
+ if(currentPlaylist != "") {
+ ipcRenderer.send('clear-current-playlist')
+ }
+ });
+ document.getElementById('addPlaylistToQueue').addEventListener('click', () => {
+ if(currentPlaylist != "") {
+ ipcRenderer.send('add-current-playlist-queue');
+ }
+ });
tabQueue.onclick = () => {
tabQueue.style.background = "#4e5d6c";
tabPlaylist.style.background = "#2b3e50";
queuePanel.classList.add("show","active");
playlistPanel.classList.remove("show","active");
+ isInPlaylistTab = false;
+ [].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), setQueueDBView);
+ document.getElementById("clearQueue").hidden = false;
+ document.getElementById('clearPlaylist').hidden = true;
};
tabPlaylist.onclick = () => {
@@ -173,23 +192,38 @@ function configureLeftPanel() {
tabQueue.style.background = "#2b3e50";
playlistPanel.classList.add("show","active");
queuePanel.classList.remove("show","active");
- /*if(currentPlaylist != "") {
- [].forEach.call(document.querySelectorAll('#panelLeft .KaraCard'), (element) => {
- element.getElementsByClassName('karaAddBtn').hidden = true;
- element.getElementsByClassName('karaInsertBtn').hidden = true;
- element.getElementsByClassName('karaAddPlaylistBtn').hidden = false;
- });
- }*/
+ isInPlaylistTab = true;
+ if(currentPlaylist != "") {
+ [].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), setPlaylistDBView);
+ }
+ document.getElementById("clearQueue").hidden = true;
+ document.getElementById('clearPlaylist').hidden = false;
}
var playlistSelect = document.getElementById("playlist-selector");
playlistSelect.onchange = () => {
currentPlaylist = playlistSelect.value;
- // ipcRenderer.send('get-playlist-data',playlistSelect.value);
+ ipcRenderer.send('get-playlist-data',playlistSelect.value);
+ if(isInPlaylistTab) {
+ [].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), setPlaylistDBView);
+ }
+
}
}
+function setPlaylistDBView(element) {
+ element.getElementsByClassName('karaAddBtn')[0].hidden = true;
+ element.getElementsByClassName('karaInsertBtn')[0].hidden = true;
+ element.getElementsByClassName('karaAddPlaylistBtn')[0].hidden = false;
+}
+
+function setQueueDBView(element) {
+ element.getElementsByClassName('karaAddBtn')[0].hidden = false;
+ element.getElementsByClassName('karaInsertBtn')[0].hidden = false;
+ element.getElementsByClassName('karaAddPlaylistBtn')[0].hidden = true;
+}
+
/* Create the left panel */
ipcRenderer.on('reload-db-responce', (event, arg) => {
logger.debug('instance', `Web page got reload-db`);
@@ -201,6 +235,9 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
});
});
[].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), addDBKaraEventHandlers);
+ if(isInPlaylistTab && currentPlaylist != "") {
+ [].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), setPlaylistDBView);
+ }
});
/* Create the right panel: the queue */
@@ -208,7 +245,6 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
logger.debug('instance', `Web page got reload-queue`);
countKaraInQueue = 0;
document.getElementById('queueList').innerHTML = '';
- logger.info("queue",JSON.stringify(arg[0]));
arg.forEach(kara => {
countKaraInQueue++;
ejs.renderFile(__dirname + '/views/karaQueueListItem.ejs', { kara: kara }, (err, data) => {
@@ -248,12 +284,20 @@ ipcRenderer.on('playlists-updated', (event, playlists) => {
return;
}
var selector = document.getElementById("playlist-selector")
- selector.innerHTML = '';
- if(!selector.value) {
+ var currentChoice = selector.value;
+ if(!currentChoice || !playlists.includes(currentChoice)) {
selector.innerHTML = '<option selected disabled> Select a playlist</option>'
}
+ else {
+ selector.innerHTML = '<option disabled> Select a playlist</option>';
+ }
playlists.forEach(playlist => {
- optionHtml = `<option value="${playlist}">${playlist}</option>`
+ if(playlist == currentChoice) {
+ optionHtml = `<option selected value="${playlist}">${playlist}</option>`;
+ }
+ else {
+ optionHtml = `<option value="${playlist}">${playlist}</option>`;
+ }
selector.innerHTML = `
${selector.innerHTML}
${optionHtml}
@@ -296,6 +340,12 @@ function addDBKaraEventHandlers(element) {
id: element.getElementsByClassName('karaID')[0].innerText,
})
);
+ element.getElementsByClassName('karaAddPlaylistBtn')[0].addEventListener('click', () => {
+ ipcRenderer.send('add-kara-playlist-id', {
+ id: element.getElementsByClassName('karaID')[0].innerText,
+ })
+}
+);
}
function addQueueKaraEventHandlers(element) {
@@ -317,13 +367,13 @@ function addQueueKaraEventHandlers(element) {
);
}
-/*function addPlayListKaraEventHandlers(element) {
+function addPlayListKaraEventHandlers(element) {
element.getElementsByClassName('karaDeleteBtn')[0].addEventListener('click', () => {
ipcRenderer.send('del-kara-playlist-id', {
id:element.getElementsByClassName('karaID')[0].innerText
});
});
-}*/
+}
function onDragStartDB(event) {
isDnDFromDB = true;
diff --git a/instance/views/karaDBListItem.ejs b/instance/views/karaDBListItem.ejs
index 26b27e84f3824a6e4b8c8dcff467409a13a03d3d..62e8fea1fa7e130bf88a9641a7fa210a14916265 100644
--- a/instance/views/karaDBListItem.ejs
+++ b/instance/views/karaDBListItem.ejs
@@ -6,6 +6,7 @@
<div class="d-flex flex-row bd-highlight mb-3 btn-group karaActionBtnGroup" role="group">
<button class="btn btn-outline-light karaActionBtn karaAddBtn" title="Add"><i class="fas fa-plus"></i></button>
<button class="btn btn-outline-light karaActionBtn karaInsertBtn" title="Insert"><i class="fas fa-level-up-alt"></i></button>
+ <button hidden class="btn btn-outline-light karaActionBtn karaAddPlaylistBtn" title="Add"><i class="fas fa-plus"></i></button>
</div>
</div>
</li>
diff --git a/instance/views/panels.ejs b/instance/views/panels.ejs
index 75d0b4f8f2a76c1833378fd8fd668285068210d1..fdfd0f0d16005001aa91447d811169b63cb661ca 100644
--- a/instance/views/panels.ejs
+++ b/instance/views/panels.ejs
@@ -18,6 +18,9 @@
<li class="nav-item" role="presentation">
<button class="nav-link active" id="playlist-tab" data-toggle="tab" data-bs-target="#playlist" type="button" role="tab" aria-controls="playlist" aria-selected="false">Playlist</button>
</li>
+ <button class="btn playlistActionBtn clearQueueBtn" id="clearQueue" title="Clear Queue"><i class="fas fa-eraser"></i></button>
+ <button hidden class="btn playlistActionBtn clearPlaylistBtn" id="clearPlaylist" title="Clear Playlist"><i class="fas fa-eraser"></i></button>
+ <button class="btn playlistActionBtn addPlaylistToQueue" id="addPlaylistToQueue" title="Add playlist to queue"><i class="fas fa-arrow-circle-right"></i></button>
<li class="playlistChoice ml-4 mt-1">
<select class="form-control bd-highlight" id="playlist-selector" aria-label="Default select example">
<option selected disabled>Select a playlist</option>
@@ -26,6 +29,7 @@
<option value="3">Three</option>
</select>
</li>
+
</ul>
<div class="tab-content">
<div id="queue-panel" class="tab-pane fade show active pl-0" role="tabpanel" aria-labelledby="queue-tab"">
diff --git a/main.js b/main.js
index cdc17c26383714ab7b25f6e517dbb7b512f70d94..02088852800f7fab42622b237152b44e40170666 100644
--- a/main.js
+++ b/main.js
@@ -350,6 +350,11 @@ ipcMain.on('verify-lektord', (event, arg) => {
lkt.commandPlaylistsList().then((playlists) => {
win.webContents.send('playlists-updated', playlists);
});
+ if(currentPlaylist != "") {
+ lkt.commandPlaylistListKaras(currentPlaylist).then((karas) => {
+ win.webContents.send('playlist-data-responce',karas);
+ });
+ }
}
}, 50);
@@ -389,14 +394,6 @@ ipcMain.on('set-settings', (event, arg) => {
config.flush();
});
-ipcMain.on('verify-playlists-reloaded-request',(event,arg) => {
- if(lkt.isPlaylistsUpdated()) {
- lkt.setPlaylistsUpdated(false);
- lkt.commandPlaylistsList().then((playlists) => {
- event.reply('playlists-updated', playlists);
- });
- }
-});
ipcMain.on('get-playlist-data', (event, playlist) => {
if(playlist) {
@@ -405,4 +402,28 @@ ipcMain.on('get-playlist-data', (event, playlist) => {
win.webContents.send('playlist-data-responce',karas);
});
}
+});
+
+ipcMain.on('add-kara-playlist-id', (event,arg) => {
+ lkt.commandPlaylistAddId(currentPlaylist,arg.id);
+});
+
+ipcMain.on('del-kara-playlist-id', (event,arg) => {
+ lkt.commandPlaylistRemoveId(currentPlaylist,arg.id);
+})
+
+ipcMain.on('clear-queue', (event,arg) => {
+ lkt.commandClear();
+});
+
+ipcMain.on('clear-playlist', (event,arg) => {
+ if(currentPlaylist != "") {
+ lkt.commandPlaylistClear(currentPlaylist);
+ }
+});
+
+ipcMain.on('add-current-playlist-queue', (event,arg) => {
+ if(currentPlaylist != "") {
+ lkt.commandAddPlaylistToQueue(currentPlaylist);
+ }
});
\ No newline at end of file
diff --git a/style/css/instance.css b/style/css/instance.css
index 3cfff5470285e84a764adecbe5cee5f61b409831..f05ff7ad6c540540649e9175c8cf7c551f5bad46 100644
--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -205,4 +205,17 @@ input[type="color"]:focus,
min-height: 1em;
display: table-cell;
vertical-align: middle
-}
\ No newline at end of file
+}
+
+.playlistActionBtn:hover,
+.playlistActionBtn:active,
+.playlistActionBtn:focus {
+ background: none;
+ border-color: transparent !important;
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.playlistActionBtn:hover {
+ color:grey;
+}