1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-24 18:10:26 +00:00

Moved sidebar to new queue toolbar

Moved output buttons to drop down menu in main toolbar
Add playinfo to html title
This commit is contained in:
jcorporation 2018-05-07 22:25:17 +01:00
parent 987fb4b2ec
commit 51e6f541e4
2 changed files with 62 additions and 51 deletions

View File

@ -60,6 +60,16 @@
<span class="glyphicon glyphicon-heart"></span>
</button>
</div>
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-volume-up"></span>
<span class="caret"></span>
</button>
<div id="btn-outputs-block" class="dropdown-menu" role="menu" style="padding-left:1em;"></div>
</div>
</div>
<div class="btn-group">
<div class="btn btn-toolbar btn-default">
@ -91,13 +101,58 @@
<div class="container starter-template">
<div class="row">
<div class="col-md-10 col-xs-12">
<div class="notifications top-right"></div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading"><b id="panel-heading">Queue</b>
<b id="panel-heading-info" class="text pull-right"></b></div>
<div class="panel" id="queue-buttons">
<div class="btn-group" data-toggle="buttons">
<button id="btnrandom" type="button" class="btn btn-default" title="Random">
<span class="glyphicon glyphicon-random"></span>
</button>
<button id="btnconsume" type="button" class="btn btn-default" title="Consume">
<span class="glyphicon glyphicon-fire"></span>
</button>
<button id="btnsingle" type="button" class="btn btn-default" title="Single">
<span class="glyphicon glyphicon-star"></span>
</button>
<button id="btncrossfade" type="button" class="btn btn-default" title="Crossfade">
<span class="glyphicon glyphicon-link"></span>
</button>
<button id="btnrepeat" type="button" class="btn btn-default" title="Repeat">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</div>
<!--
<div id="trashmode" class="btn-group" data-toggle="radio">
<button id="btntrashmodeup" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-trash"></span>
</button>
<button id="btntrashmodesingle" type="button" class="btn btn-default active">
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-trash"></span>
</button>
<button id="btntrashmodedown" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
-->
<div id="btn-responsive-block" class="btn-group">
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
<span class="glyphicon glyphicon-trash"></span>
</button>
<a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default" title="Save queue">
<span class="glyphicon glyphicon-save"></span>
</a>
</div>
</div>
<div class="panel-body">
<div id="album-cover"></div>
<h1>
@ -166,56 +221,6 @@
<li id="prev" class="page-btn hide"><a href="">Previous</a></li>
<li id="next" class="page-btn"><a href="">Next</a></li>
</ul>
</div><!-- /.col-md-10 -->
<div class="col-md-2 col-xs-12">
<div class="btn-toolbar">
<div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
<button id="btnrandom" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-random"></span> Random
</button>
<button id="btnconsume" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-fire"></span> Consume
</button>
<button id="btnsingle" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span> Single
</button>
<button id="btncrossfade" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-link"></span> Crossfade
</button>
<button id="btnrepeat" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span> Repeat
</button>
</div>
<div id="btn-outputs-block" class="btn-group-vertical btn-block btn-group-lg">
</div>
<div id="trashmode" class="btn-group-vertical btn-block btn-group-lg" data-toggle="radio">
<button id="btntrashmodeup" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-trash"></span> <span>Up</span>
</button>
<button id="btntrashmodesingle" type="button" class="btn btn-default active">
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-trash"></span> <span>Single</span>
</button>
<button id="btntrashmodedown" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-trash"></span> <span>Down</span>
</button>
</div>
<div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg">
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');">
<span class="glyphicon glyphicon-trash"></span> Clear Queue
</button>
<a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save Queue
</a>
</div>
</div>
</div><!-- /.col-md-2 -->
</div><!-- /.row -->
</div><!-- /.container -->

View File

@ -48,6 +48,7 @@ var app = $.sammy(function() {
$('#panel-heading').text("Queue");
$('#panel-heading-info').empty();
$('#queue-buttons').css('display','block');
$('#queue').addClass('active');
}
@ -88,6 +89,7 @@ var app = $.sammy(function() {
$('#panel-heading').text("Browse database: "+browsepath);
$('#panel-heading-info').empty();
$('#queue-buttons').css('display','none');
var path_array = browsepath.split('/');
var full_path = "";
$.each(path_array, function(index, chunk) {
@ -634,15 +636,19 @@ function webSocketConnect() {
$('#currenttrack').text(" " + obj.data.title);
var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
var htmlTitle='ympd: ';
if(obj.data.artist) {
$('#artist').text(obj.data.artist);
notification += obj.data.artist + "<br />";
htmlTitle += obj.data.artist + ' - ' + obj.data.title;
}
if(obj.data.album) {
$('#album').text(obj.data.album);
notification += obj.data.album + "<br />";
}
document.title=htmlTitle;
if ($.cookie("notification") === "true")
songNotify(obj.data.title, obj.data.artist, obj.data.album );