mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-01-14 11:15:49 +00:00
Code Issues Releases Wiki Activity

Display kbitrate for current playing song, save scrollPos on card/tab/view change

Browse Source
This commit is contained in:
jcorporation 2018-07-09 16:36:45 +01:00
parent 2185783dbe
commit cfd20a36fd
2 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
htdocs/index.html
View File

@ -87,7 +87,8 @@
<div class="col-4"> <div class="col-4">
<p id="counter" class="text">&nbsp;&nbsp;</p> <p id="counter" class="text">&nbsp;&nbsp;</p>
</div> </div>
</div> </div>
<p id="kbitrate"></p>
</div> </div>
</div> </div>
@ -162,7 +163,7 @@
</div> </div>
<div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollToTop','options':[]}" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollTo','options':[0]}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
@ -232,7 +233,7 @@
</div> </div>
<div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
@ -291,7 +292,7 @@
<div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
@ -356,7 +357,7 @@
</div> </div>
<div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
@ -434,7 +435,7 @@
</div> </div>
<div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>

51
htdocs/js/mpd.js
View File

@ -31,25 +31,25 @@ var settings = {};
var alertTimeout; var alertTimeout;
var app = {}; var app = {};
app.apps = { "Playback": { "state": "0/-/" }, app.apps = { "Playback": { "state": "0/-/", "scrollPos": 0 },
"Queue": { "state": "0/Any Tag/" }, "Queue": { "state": "0/Any Tag/", "scrollPos": 0 },
"Browse": { "Browse": {
"active": "Database", "active": "Database",
"tabs": { "Filesystem": { "state": "0/-/" }, "tabs": { "Filesystem": { "state": "0/-/", "scrollPos": 0 },
"Playlists": { "state": "0/-/" }, "Playlists": { "state": "0/-/", "scrollPos": 0 },
"Database": { "Database": {
"active": "Artist", "active": "Artist",
"views": { "Artist": { "state": "0/-/" }, "views": { "Artist": { "state": "0/-/", "scrollPos": 0 },
"Album": { "state": "0/-/" } "Album": { "state": "0/-/", "scrollPos": 0 }
} }
} }
} }
}, },
"Search": { "state": "0/Any Tag/" } "Search": { "state": "0/Any Tag/", "scrollPos": 0 }
}; };
app.current = { "app": "Playback", "tab": undefined, "view": undefined, "page": 0, "filter": "", "search": "" }; app.current = { "app": "Playback", "tab": undefined, "view": undefined, "page": 0, "filter": "", "search": "", "scrollPos": 0 };
app.last = { "app": undefined, "tab": undefined, "view": undefined }; app.last = { "app": undefined, "tab": undefined, "view": undefined, "filter": "", "search": "", "scrollPos": 0 };
var domCache = {}; var domCache = {};
domCache.navbarBottomBtns = document.getElementById('navbar-bottom').getElementsByTagName('div'); domCache.navbarBottomBtns = document.getElementById('navbar-bottom').getElementsByTagName('div');
@ -66,6 +66,7 @@ domCache.btnNext = document.getElementById('btnNext');
domCache.progressBar = document.getElementById('progressBar'); domCache.progressBar = document.getElementById('progressBar');
domCache.volumeBar = document.getElementById('volumeBar'); domCache.volumeBar = document.getElementById('volumeBar');
domCache.outputs = document.getElementById('outputs'); domCache.outputs = document.getElementById('outputs');
domCache.kbitrate = document.getElementById('kbitrate');
var modalConnectionError = new Modal(document.getElementById('modalConnectionError')); var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
var modalSettings = new Modal(document.getElementById('modalSettings')); var modalSettings = new Modal(document.getElementById('modalSettings'));
@ -73,7 +74,7 @@ var modalAddstream = new Modal(document.getElementById('modalAddstream'));
var modalSavequeue = new Modal(document.getElementById('modalSavequeue')); var modalSavequeue = new Modal(document.getElementById('modalSavequeue'));
var mainMenu = new Dropdown(document.getElementById('mainMenu')); var mainMenu = new Dropdown(document.getElementById('mainMenu'));
function appPrepare() { function appPrepare(scrollPos) {
if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) { if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
//Hide all cards + nav //Hide all cards + nav
for (var i = 0; i < domCache.navbarBottomBtnsLen; i ++) { for (var i = 0; i < domCache.navbarBottomBtnsLen; i ++) {
@ -96,12 +97,25 @@ function appPrepare() {
document.getElementById('card' + app.current.app + app.current.tab).classList.remove('hide'); document.getElementById('card' + app.current.app + app.current.tab).classList.remove('hide');
document.getElementById('card' + app.current.app + 'Nav' + app.current.tab).classList.add('active'); document.getElementById('card' + app.current.app + 'Nav' + app.current.tab).classList.add('active');
} }
scrollToTop(); scrollTo(scrollPos);
} }
} }
function appGoto(a,t,v,s) { function appGoto(a,t,v,s) {
var hash=''; var scrollPos = 0;
if (document.body.scrollTop)
scrollPos = document.body.scrollTop
else
scrollPos = document.documentElement.scrollTop;
if (app.apps[app.current.app].scrollPos != undefined)
app.apps[app.current.app].scrollPos = scrollPos
else if (app.apps[app.current.app].tabs[app.current.tab].scrollPos != undefined)
app.apps[app.current.app].tabs[app.current.tab].scrollPos = scrollPos
else if (app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos != undefined)
app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos = scrollPos;
var hash = '';
if (app.apps[a].tabs) { if (app.apps[a].tabs) {
if (t == undefined) if (t == undefined)
t = app.apps[a].active; t = app.apps[a].active;
@ -126,15 +140,18 @@ function appRoute() {
app.current.view = params[3]; app.current.view = params[3];
if (app.apps[app.current.app].state) { if (app.apps[app.current.app].state) {
app.apps[app.current.app].state = params[4]; app.apps[app.current.app].state = params[4];
app.current.scrollPos = app.apps[app.current.app].scrollPos;
} }
else if (app.apps[app.current.app].tabs[app.current.tab].state) { else if (app.apps[app.current.app].tabs[app.current.tab].state) {
app.apps[app.current.app].tabs[app.current.tab].state = params[4]; app.apps[app.current.app].tabs[app.current.tab].state = params[4];
app.apps[app.current.app].active = app.current.tab; app.apps[app.current.app].active = app.current.tab;
app.current.scrollPos = app.apps[app.current.app].tabs[app.current.tab].scrollPos;
} }
else if (app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state) { else if (app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state) {
app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state = params[4]; app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state = params[4];
app.apps[app.current.app].active = app.current.tab; app.apps[app.current.app].active = app.current.tab;
app.apps[app.current.app].tabs[app.current.tab].active = app.current.view; app.apps[app.current.app].tabs[app.current.tab].active = app.current.view;
app.current.scrollPos = app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos;
} }
app.current.page = parseInt(params[5]); app.current.page = parseInt(params[5]);
app.current.filter = params[6]; app.current.filter = params[6];
@ -144,7 +161,7 @@ function appRoute() {
return; return;
} }
appPrepare(); appPrepare(app.current.scrollPos);
if (app.current.app == 'Playback') { if (app.current.app == 'Playback') {
sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange); sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange);
@ -702,6 +719,8 @@ function parseState(obj) {
(elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " + (elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " +
total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds; total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds;
domCache.counter.innerText = counterText; domCache.counter.innerText = counterText;
domCache.kbitrate.innerText = 'Bitrate: ' + obj.data.kbitrate + ' kbit';
//Set playing track in queue view //Set playing track in queue view
if (last_state) { if (last_state) {
@ -1296,9 +1315,9 @@ function addAllFromSearch() {
} }
} }
function scrollToTop() { function scrollTo(pos) {
document.body.scrollTop = 0; // For Safari document.body.scrollTop = pos; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera document.documentElement.scrollTop = pos; // For Chrome, Firefox, IE and Opera
} }
function gotoPage(x) { function gotoPage(x) {