mirror of
https://github.com/SuperBFG7/ympd
synced 2024-09-28 14:18:40 +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:
parent
987fb4b2ec
commit
51e6f541e4
@ -60,6 +60,16 @@
|
|||||||
<span class="glyphicon glyphicon-heart"></span>
|
<span class="glyphicon glyphicon-heart"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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-group">
|
||||||
<div class="btn btn-toolbar btn-default">
|
<div class="btn btn-toolbar btn-default">
|
||||||
@ -91,13 +101,58 @@
|
|||||||
<div class="container starter-template">
|
<div class="container starter-template">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-md-10 col-xs-12">
|
|
||||||
<div class="notifications top-right"></div>
|
<div class="notifications top-right"></div>
|
||||||
|
|
||||||
<div class="panel panel-primary">
|
<div class="panel panel-primary">
|
||||||
<!-- Default panel contents -->
|
<!-- Default panel contents -->
|
||||||
<div class="panel-heading"><b id="panel-heading">Queue</b>
|
<div class="panel-heading"><b id="panel-heading">Queue</b>
|
||||||
<b id="panel-heading-info" class="text pull-right"></b></div>
|
<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 class="panel-body">
|
||||||
<div id="album-cover"></div>
|
<div id="album-cover"></div>
|
||||||
<h1>
|
<h1>
|
||||||
@ -166,56 +221,6 @@
|
|||||||
<li id="prev" class="page-btn hide"><a href="">Previous</a></li>
|
<li id="prev" class="page-btn hide"><a href="">Previous</a></li>
|
||||||
<li id="next" class="page-btn"><a href="">Next</a></li>
|
<li id="next" class="page-btn"><a href="">Next</a></li>
|
||||||
</ul>
|
</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><!-- /.row -->
|
||||||
</div><!-- /.container -->
|
</div><!-- /.container -->
|
||||||
|
|
||||||
|
@ -48,6 +48,7 @@ var app = $.sammy(function() {
|
|||||||
|
|
||||||
$('#panel-heading').text("Queue");
|
$('#panel-heading').text("Queue");
|
||||||
$('#panel-heading-info').empty();
|
$('#panel-heading-info').empty();
|
||||||
|
$('#queue-buttons').css('display','block');
|
||||||
|
|
||||||
$('#queue').addClass('active');
|
$('#queue').addClass('active');
|
||||||
}
|
}
|
||||||
@ -88,6 +89,7 @@ var app = $.sammy(function() {
|
|||||||
|
|
||||||
$('#panel-heading').text("Browse database: "+browsepath);
|
$('#panel-heading').text("Browse database: "+browsepath);
|
||||||
$('#panel-heading-info').empty();
|
$('#panel-heading-info').empty();
|
||||||
|
$('#queue-buttons').css('display','none');
|
||||||
var path_array = browsepath.split('/');
|
var path_array = browsepath.split('/');
|
||||||
var full_path = "";
|
var full_path = "";
|
||||||
$.each(path_array, function(index, chunk) {
|
$.each(path_array, function(index, chunk) {
|
||||||
@ -634,15 +636,19 @@ function webSocketConnect() {
|
|||||||
|
|
||||||
$('#currenttrack').text(" " + obj.data.title);
|
$('#currenttrack').text(" " + obj.data.title);
|
||||||
var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
|
var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
|
||||||
|
var htmlTitle='ympd: ';
|
||||||
|
|
||||||
if(obj.data.artist) {
|
if(obj.data.artist) {
|
||||||
$('#artist').text(obj.data.artist);
|
$('#artist').text(obj.data.artist);
|
||||||
notification += obj.data.artist + "<br />";
|
notification += obj.data.artist + "<br />";
|
||||||
|
htmlTitle += obj.data.artist + ' - ' + obj.data.title;
|
||||||
}
|
}
|
||||||
if(obj.data.album) {
|
if(obj.data.album) {
|
||||||
$('#album').text(obj.data.album);
|
$('#album').text(obj.data.album);
|
||||||
notification += obj.data.album + "<br />";
|
notification += obj.data.album + "<br />";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.title=htmlTitle;
|
||||||
|
|
||||||
if ($.cookie("notification") === "true")
|
if ($.cookie("notification") === "true")
|
||||||
songNotify(obj.data.title, obj.data.artist, obj.data.album );
|
songNotify(obj.data.title, obj.data.artist, obj.data.album );
|
||||||
|
Loading…
Reference in New Issue
Block a user