mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-30 21:33:00 +00:00
Code Issues Releases Wiki Activity

Feat: startup screen, connect to websocket after getting the settings

Browse Source
This commit is contained in:
jcorporation
2019-01-14 23:06:07 +00:00
parent 230395e445
commit 2f3a579d07
4 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/css/mympd.css
View File

@@ -91,6 +91,10 @@ small {
display: none !important;
}
.unvisible {
visibility: hidden;
}
.pull-right {
float: right !important;
}

23
htdocs/index.html
View File

@@ -16,7 +16,7 @@
<link rel="apple-touch-icon" href="/assets/appicon-167.png">
</head>
<body>
<header>
<header class="hide">
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="dropdown col-auto mr-auto pl-0">
<a class="dropdown-toggle navbar-brand" href="#" id="mainMenu">
@@ -74,7 +74,7 @@
</div>
</nav>
</header>
<main class="container">
<main class="container hide">
<noscript>
<div class="alert alert-danger">JavaScript is disabled!</div>
</noscript>
@@ -607,7 +607,7 @@
</div>
</main>
<footer class="footer">
<footer class="footer hide">
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
<div id="navPlayback" class="nav-item flex-fill text-center"><a data-href='{"cmd": "appGoto", "options": ["Playback"]}' class="nav-link" href="#">Playback</a></div>
@@ -619,6 +619,23 @@
</footer>
<!-- Modals -->
<div class="modal fade" id="modalAppInit" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-success text-light">
<h5 class="modal-title"><span class="material-icons title-icon">play_circle_outline</span> Initializing myMPD</h5>
</div>
<div class="modal-body">
<p>Please wait, myMPD is initializing...</p>
<p><span id="appInitSettings" class="material-icons unvisible">check</span> Fetch settings</p>
<p><span id="appInitWebsocket" class="material-icons unvisible">check</span> Connect to websocket</p>
<p><span id="appInitApply" class="material-icons unvisible">check</span> Applying settings</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalConnectionError" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">

85
htdocs/js/mympd.js
View File

@@ -29,12 +29,16 @@ var lastSongObj = {};
var lastState;
var currentSong = new Object();
var playstate = '';
var settingsLock = false;
var settingsParsed = false;
var settingsNew = {};
var settings = {};
var alertTimeout;
var progressTimer;
var deferredPrompt;
var dragEl;
var playlistEl;
var websocketConnected = false;
var app = {};
app.apps = { "Playback": { "state": "0/-/", "scrollPos": 0 },
@@ -104,6 +108,7 @@ var modalUpdateDB = new Modal(document.getElementById('modalUpdateDB'));
var modalSaveSmartPlaylist = new Modal(document.getElementById('modalSaveSmartPlaylist'));
var modalDeletePlaylist = new Modal(document.getElementById('modalDeletePlaylist'));
var modalHelp = new Modal(document.getElementById('modalHelp'));
var modalAppInit = new Modal(document.getElementById('modalAppInit'));
var dropdownMainMenu;
var dropdownVolumeMenu = new Dropdown(document.getElementById('volumeMenu'));
@@ -353,10 +358,37 @@ function appRoute() {
app.last.view = app.current.view;
};
function appInit() {
webSocketConnect();
function appInitStart() {
modalAppInit.show();
getSettings();
sendAPI({"cmd": "MPD_API_PLAYER_STATE"}, parseState);
appInitWait();
}
function appInitWait() {
setTimeout(function() {
if (settingsParsed == true && websocketConnected == true) {
//app initialized
document.getElementById('appInitWebsocket').classList.remove('unvisible');
appInit();
document.getElementById('appInitApply').classList.remove('unvisible');
document.getElementsByTagName('header')[0].classList.remove('hide');
document.getElementsByTagName('main')[0].classList.remove('hide');
document.getElementsByTagName('footer')[0].classList.remove('hide');
modalAppInit.hide();
return;
}
if (settingsParsed == true) {
//parsed settings, now its save to connect to websocket
document.getElementById('appInitSettings').classList.remove('unvisible');
webSocketConnect();
}
appInitWait();
}, 500);
}
function appInit() {
//sendAPI({"cmd": "MPD_API_PLAYER_STATE"}, parseState);
domCache.volumeBar.value = 0;
@@ -811,6 +843,12 @@ function appInit() {
window.addEventListener('appinstalled', function(event) {
console.log('myMPD installed as app');
});
window.addEventListener('beforeunload', function() {
socket.onclose = function () {}; // disable onclose handler first
socket.close();
websocketConnected = false;
});
}
function parseCmd(event, href) {
@@ -1028,6 +1066,9 @@ function webSocketConnect() {
}
switch (obj.type) {
case 'welcome':
websocketConnected = true;
break;
case 'update_state':
parseState(obj);
break;
@@ -1070,6 +1111,7 @@ function webSocketConnect() {
}
socket.onclose = function(){
websocketConnected = false;
console.log('disconnected');
modalConnectionError.show();
setTimeout(function() {
@@ -1145,8 +1187,8 @@ function filterCols(x) {
settings[x] = cols;
}
function parseSettings(obj) {
settings = obj.data;
function parseSettings() {
settingsParsed = false;
toggleBtn('btnRandom', settings.random);
toggleBtn('btnConsume', settings.consume);
@@ -1300,12 +1342,12 @@ function parseSettings(obj) {
if (settings.featSyscmds) {
var mainMenuDropdown = document.getElementById('mainMenuDropdown');
var syscmdsList = '';
var syscmdsListLen = settings.syscmds.length;
var syscmdsListLen = settings.syscmdList.length;
if (syscmdsListLen > 0) {
syscmdsList = '<div class="dropdown-divider"></div>';
for (var i = 0; i < syscmdsListLen; i++) {
syscmdsList += '<a class="dropdown-item text-light bg-dark" href="#" data-href=\'{"cmd": "execSyscmd", "options": ["' +
settings.syscmds[i] + '"]}\'>' + settings.syscmds[i] + '</a>';
settings.syscmdList[i] + '"]}\'>' + settings.syscmdList[i] + '</a>';
}
}
document.getElementById('syscmds').innerHTML = syscmdsList;
@@ -1333,6 +1375,8 @@ function parseSettings(obj) {
appRoute();
else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.search != '')
appRoute();
settingsParsed = true;
}
function setCols(table, className) {
@@ -1404,7 +1448,24 @@ function setCols(table, className) {
}
function getSettings() {
sendAPI({"cmd": "MPD_API_SETTINGS_GET"}, parseSettings);
if (settingsLock == false) {
settingsLock = true;
sendAPI({"cmd": "MYMPD_API_SETTINGS_GET"}, getMpdSettings);
}
}
function getMpdSettings(obj) {
settingsNew = obj.data;
sendAPI({"cmd": "MPD_API_SETTINGS_GET"}, joinSettings);
}
function joinSettings(obj) {
for (var key in obj.data) {
settingsNew[key] = obj.data[key];
}
settings = Object.assign({}, settingsNew);
settingsLock = false;
parseSettings();
}
function saveCols(table, tableEl) {
@@ -1431,7 +1492,7 @@ function saveCols(table, tableEl) {
}
}
var cols = {"cmd": "MPD_API_COLS_SAVE", "data": {"table": "cols" + table, "cols": []}};
var cols = {"cmd": "MYMPD_API_COLS_SAVE", "data": {"table": "cols" + table, "cols": []}};
var ths = header.getElementsByTagName('th');
for (var i = 0; i < ths.length; i++) {
var name = ths[i].getAttribute('data-col');
@@ -1460,7 +1521,7 @@ function saveColsPlayback(table) {
}
}
var cols = {"cmd": "MPD_API_COLS_SAVE", "data": {"table": "cols" + table, "cols": []}};
var cols = {"cmd": "MYMPD_API_COLS_SAVE", "data": {"table": "cols" + table, "cols": []}};
var ths = header.getElementsByTagName('div');
for (var i = 0; i < ths.length; i++) {
var name = ths[i].getAttribute('data-tag');
@@ -2865,7 +2926,7 @@ function confirmSettings() {
var selectReplaygain = document.getElementById('selectReplaygain');
var selectJukeboxPlaylist = document.getElementById('selectJukeboxPlaylist');
var selectJukeboxMode = document.getElementById('selectJukeboxMode');
sendAPI({"cmd": "MPD_API_SETTINGS_SET", "data": {
sendAPI({"cmd": "MYMPD_API_SETTINGS_SET", "data": {
"consume": (document.getElementById('btnConsume').classList.contains('active') ? 1 : 0),
"random": (document.getElementById('btnRandom').classList.contains('active') ? 1 : 0),
"single": (document.getElementById('btnSingle').classList.contains('active') ? 1 : 0),
@@ -3162,4 +3223,4 @@ function genId(x) {
}
//Init app
appInit();
appInitStart();

7
src/mympd_api.c
View File

@@ -211,6 +211,7 @@ static void mympd_api(t_config *config, t_mympd_state *mympd_state, t_work_reque
//push settings to mpd_client queue
t_work_request *mpd_client_request = (t_work_request *)malloc(sizeof(t_work_request));
mpd_client_request->conn_id = request->conn_id;
mpd_client_request->cmd_id = request->cmd_id;
mpd_client_request->length = copy_string(mpd_client_request->data, request->data, MAX_SIZE, request->length);
tiny_queue_push(mpd_client_queue, mpd_client_request);
}
@@ -411,15 +412,13 @@ static int mympd_api_put_settings(t_config *config, t_mympd_state *mympd_state,
int nr = 0;
struct json_out out = JSON_OUT_BUF(buffer, MAX_SIZE);
len = json_printf(&out, "{type: settings, data: {mpdhost: %Q, mpdport: %d, passwort_set: %B, featSyscmds: %B, featStickers: %B, featSmartpls: %B, "
len = json_printf(&out, "{type: mympdSettings, data: {mpdhost: %Q, mpdport: %d, passwort_set: %B, featSyscmds: %B, "
"featLocalplayer: %B, streamport: %d, streamurl: %Q, featCoverimage: %B, coverimagename: %Q, coverimagesize: %d, featMixramp: %B, "
"maxElementsPerPage: %d, notificationWeb: %B, notificationPage: %B, jukeboxMode: %d, jukeboxPlaylist: %Q, jukeboxQueueLength: %d",
config->mpdhost,
config->mpdport,
config->mpdpass ? "true" : "false",
config->syscmds,
config->stickers,
config->smartpls,
config->localplayer,
config->streamport,
config->streamurl,
@@ -436,7 +435,7 @@ static int mympd_api_put_settings(t_config *config, t_mympd_state *mympd_state,
);
if (config->syscmds == true) {
len += json_printf(&out, ", syscmds: [");
len += json_printf(&out, ", syscmdList: [");
nr = 0;
struct node *current = mympd_state->syscmd_list.list;
while (current != NULL) {