mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-24 10:00:27 +00:00
Code Issues Releases Wiki Activity

Layout fixes

Browse Source 
Replaced bootstrap-notify.js with version from http://bootstrap-notify.remabledesigns.com
This commit is contained in:
jcorporation 2018-05-17 23:10:57 +01:00
parent 73c2fe245a
commit 51dcb88a7b
9 changed files with 434 additions and 6697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
htdocs/css/mpd.css
View File

@ -1,3 +1,16 @@
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
}
body { body {
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px; padding-bottom: 50px;
@ -5,8 +18,7 @@ body {
} }
#volumeslider { #volumeslider {
width: 150px; width: 104px;
margin-top:5px;
} }
#volumeslider .progress { #volumeslider .progress {
@ -42,30 +54,7 @@ button {
} }
#search { #search {
margin-right: -10px; width: 200px;
}
.btn-group-hover {
opacity: 20%;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #428bca;
background-color: #fdfdfd;
border-color: #adadad;
}
@media (max-width: 1199px) {
#btn-responsive-block > .btn {
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
}
} }
h1 { h1 {
@ -90,7 +79,6 @@ td:nth-last-child(2), th:nth-last-child(2) {
#salamisandwich td:nth-child(4) span { #salamisandwich td:nth-child(4) span {
font-style: italic; font-style: italic;
font-size: 90%; font-size: 90%;
display: block; display: block;
} }
*/ */
@ -98,7 +86,6 @@ td:nth-last-child(2), th:nth-last-child(2) {
td:nth-child(2), td:nth-child(3) { td:nth-child(2), td:nth-child(3) {
min-width: 25%; min-width: 25%;
max-width: 10em; max-width: 10em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -113,6 +100,9 @@ td:nth-child(2), td:nth-child(3) {
min-width: 10%; min-width: 10%;
white-space: normal; white-space: normal;
} }
.tbllength, .tblnum {
visibility:collapse;
}
} }
tbody { tbody {
@ -141,10 +131,6 @@ td:last-child, td:first-child {
margin: 5px 0px; margin: 5px 0px;
} }
button {
overflow: hidden;
}
#album-cover { #album-cover {
background-size:cover; background-size:cover;
border:1px solid black; border:1px solid black;
@ -164,13 +150,6 @@ button {
color: black; color: black;
} }
#track-icon {
cursor: pointer;
font-size:34px;
float:left;
display:block;
}
.hide { .hide {
display: none !important; display: none !important;
} }
@ -232,3 +211,13 @@ main {
margin-bottom:10px; margin-bottom:10px;
} }
#btn-outputs-block > button {
margin-bottom:10px;
}
#btn-outputs-block > button:last-child {
margin-bottom:0px;
}
.card-body {
overflow-x:hidden;
}

39
htdocs/index.html
View File

@ -21,24 +21,23 @@
<body> <body>
<header> <header>
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container justify-content-start"> <div class="dropdown justify-content-start">
<div class="dropdown"> <a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span></a>
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span>myMPD</a> <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <h1 class="dropdown-header text-light">myMPD</h1>
<form id="search" class="form-inline mt-2 mt-md-0" role="search"> <div class="dropdown-divider"></div>
<input type="text" class="form-control mr-sm-2" placeholder="Search"> <form id="search" class="px-4 py-3" role="search">
<input type="text" class="form-control" placeholder="Search">
</form> </form>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a id="nav-dirble" class="dropdown-item" href="#/dirble/">Dirble</a> <a id="nav-dirble" class="dropdown-item" href="#/dirble/">Dirble</a>
<a id="nav-addstream" class="dropdown-item" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a> <a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
<a id="nav-settings" class="dropdown-item" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a> <a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<div id="btn-outputs-block"></div> <form id="btn-outputs-block" class="px-4 py-3"></form>
</div> </div>
</div> </div>
</div> <div class="btn-toolbar navbar-nav flex-row ml-md-auto d-md-flex" role="toolbar">
<div class="container justify-content-between">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group"> <div class="btn-group mr-2" role="group">
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');"> <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
<span class="material-icons">skip_previous</span> <span class="material-icons">skip_previous</span>
@ -73,14 +72,10 @@
</button> </button>
</div> </div>
</div>
</div> </div>
<div class="container justify-content-end"></div>
</nav> </nav>
</header> </header>
<main role="main" class="container"> <main role="main" class="container">
<div class="notifications top-right"></div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<span id="panel-heading">Now playing</span> <span id="panel-heading">Now playing</span>
@ -126,13 +121,19 @@
</ol> </ol>
<div class="btn-toolbar hide" id="filter-toolbar"> <div class="btn-toolbar hide" id="filter-toolbar">
<div class="btn-group mr-2" data-toggle="radio" id="filter"></div> <div class="btn-group mr-2 flex-wrap" data-toggle="radio" id="filter"></div>
<div class="btn-group mr-2 pull-right"> <div class="btn-group mr-2 pull-right">
<button id="add-all-songs" class="btn btn-secondary">Add all</button> <button id="add-all-songs" class="btn btn-secondary">Add all</button>
</div> </div>
</div> </div>
<table id="salamisandwich" class="table table-hover hide"> <table id="salamisandwich" class="table table-hover hide">
<col class="tblnum"/>
<col class="tblartist"/>
<col class="tblalbum"/>
<col class="tbltitle"/>
<col class="tbllength"/>
<col class="tblaction"/>
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -369,9 +370,9 @@
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.cookie.js"></script> <script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-slider.js"></script> <script src="js/bootstrap-slider.js"></script>
<script src="js/bootstrap-notify.js"></script> <script src="js/bootstrap-notify.min.js"></script>
<script src="js/sammy.js"></script> <script src="js/sammy.js"></script>
<script src="js/jquery-ui-sortable.min.js"></script> <script src="js/jquery-ui-sortable.min.js"></script>
<script src="js/mpd.js"></script> <script src="js/mpd.js"></script>

442
htdocs/js/bootstrap-notify.js vendored
View File

@ -1,93 +1,349 @@
/** /*
* bootstrap-notify.js v1.0 * Project: Bootstrap Notify = v3.1.3
* -- * Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
* Copyright 2012 Goodybag, Inc. * Author: Mouse0270 aka Robert McIntosh
* -- * License: MIT License
* Licensed under the Apache License, Version 2.0 (the "License"); * Website: https://github.com/mouse0270/bootstrap-growl
* you may not use this file except in compliance with the License. */
* You may obtain a copy of the License at (function (factory) {
* if (typeof define === 'function' && define.amd) {
* http://www.apache.org/licenses/LICENSE-2.0 // AMD. Register as an anonymous module.
* define(['jquery'], factory);
* Unless required by applicable law or agreed to in writing, software } else if (typeof exports === 'object') {
* distributed under the License is distributed on an "AS IS" BASIS, // Node/CommonJS
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. factory(require('jquery'));
* See the License for the specific language governing permissions and } else {
* limitations under the License. // Browser globals
*/ factory(jQuery);
}
(function ($) { }(function ($) {
var Notification = function (element, options) { // Create the defaults once
// Element collection var defaults = {
this.$element = $(element); element: 'body',
this.$note = $('<div class="alert"></div>'); position: null,
this.options = $.extend(true, {}, $.fn.notify.defaults, options); type: "info",
allow_dismiss: true,
// Setup from options newest_on_top: false,
if(this.options.transition) showProgressbar: false,
if(this.options.transition == 'fade') placement: {
this.$note.addClass('in').addClass(this.options.transition); from: "top",
else this.$note.addClass(this.options.transition); align: "right"
else this.$note.addClass('fade').addClass('in'); },
offset: 20,
if(this.options.type) spacing: 10,
this.$note.addClass('alert-' + this.options.type); z_index: 1031,
else this.$note.addClass('alert-success'); delay: 5000,
timer: 1000,
if(!this.options.message && this.$element.data("message") !== '') // dom text url_target: '_blank',
this.$note.html(this.$element.data("message")); mouse_over: null,
else animate: {
if(typeof this.options.message === 'object') enter: 'animated fadeInDown',
if(this.options.message.html) exit: 'animated fadeOutUp'
this.$note.html(this.options.message.html); },
else if(this.options.message.text) onShow: null,
this.$note.text(this.options.message.text); onShown: null,
else onClose: null,
this.$note.html(this.options.message); onClosed: null,
icon_type: 'class',
if(this.options.closable) template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
var link = $('<a class="close pull-right" href="#">&nbsp;&times;</a>'); };
$(link).on('click', $.proxy(onClose, this));
this.$note.prepend(link); String.format = function() {
var str = arguments[0];
return this; for (var i = 1; i < arguments.length; i++) {
}; str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]);
}
var onClose = function() { return str;
this.options.onClose(); };
$(this.$note).remove();
this.options.onClosed(); function Notify ( element, content, options ) {
return false; // Setup Content of Notify
}; var content = {
content: {
Notification.prototype.show = function () { message: typeof content == 'object' ? content.message : content,
if(this.options.fadeOut.enabled) title: content.title ? content.title : '',
this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); icon: content.icon ? content.icon : '',
url: content.url ? content.url : '#',
this.$element.append(this.$note); target: content.target ? content.target : '-'
this.$note.alert(); }
}; };
Notification.prototype.hide = function () { options = $.extend(true, {}, content, options);
if(this.options.fadeOut.enabled) this.settings = $.extend(true, {}, defaults, options);
this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); this._defaults = defaults;
else onClose.call(this); if (this.settings.content.target == "-") {
}; this.settings.content.target = this.settings.url_target;
}
$.fn.notify = function (options) { this.animations = {
return new Notification(this, options); start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
}; end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
}
$.fn.notify.defaults = {
type: 'success', if (typeof this.settings.offset == 'number') {
closable: true, this.settings.offset = {
transition: 'fade', x: this.settings.offset,
fadeOut: { y: this.settings.offset
enabled: true, };
delay: 3000 }
}, this.init();
message: null, };
onClose: function () {},
onClosed: function () {} $.extend(Notify.prototype, {
} init: function () {
})(window.jQuery); var self = this;
this.buildNotify();
if (this.settings.content.icon) {
this.setIcon();
}
if (this.settings.content.url != "#") {
this.styleURL();
}
this.placement();
this.bind();
this.notify = {
$ele: this.$ele,
update: function(command, update) {
var commands = {};
if (typeof command == "string") {
commands[command] = update;
}else{
commands = command;
}
for (var command in commands) {
switch (command) {
case "type":
this.$ele.removeClass('alert-' + self.settings.type);
this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
self.settings.type = commands[command];
this.$ele.addClass('alert-' + commands[command]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[command]);
break;
case "icon":
var $icon = this.$ele.find('[data-notify="icon"]');
if (self.settings.icon_type.toLowerCase() == 'class') {
$icon.removeClass(self.settings.content.icon).addClass(commands[command]);
}else{
if (!$icon.is('img')) {
$icon.find('img');
}
$icon.attr('src', commands[command]);
}
break;
case "progress":
var newDelay = self.settings.delay - (self.settings.delay * (commands[command] / 100));
this.$ele.data('notify-delay', newDelay);
this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[command]).css('width', commands[command] + '%');
break;
case "url":
this.$ele.find('[data-notify="url"]').attr('href', commands[command]);
break;
case "target":
this.$ele.find('[data-notify="url"]').attr('target', commands[command]);
break;
default:
this.$ele.find('[data-notify="' + command +'"]').html(commands[command]);
};
}
var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
self.reposition(posX);
},
close: function() {
self.close();
}
};
},
buildNotify: function () {
var content = this.settings.content;
this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
if (!this.settings.allow_dismiss) {
this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
}
if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
this.$ele.find('[data-notify="progressbar"]').remove();
}
},
setIcon: function() {
if (this.settings.icon_type.toLowerCase() == 'class') {
this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon);
}else{
if (this.$ele.find('[data-notify="icon"]').is('img')) {
this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
}else{
this.$ele.find('[data-notify="icon"]').append('<img src="'+this.settings.content.icon+'" alt="Notify Icon" />');
}
}
},
styleURL: function() {
this.$ele.find('[data-notify="url"]').css({
backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
height: '100%',
left: '0px',
position: 'absolute',
top: '0px',
width: '100%',
zIndex: this.settings.z_index + 1
});
this.$ele.find('[data-notify="dismiss"]').css({
position: 'absolute',
right: '10px',
top: '5px',
zIndex: this.settings.z_index + 2
});
},
placement: function() {
var self = this,
offsetAmt = this.settings.offset.y,
css = {
display: 'inline-block',
margin: '0px auto',
position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
transition: 'all .5s ease-in-out',
zIndex: this.settings.z_index
},
hasAnimation = false,
settings = this.settings;
$('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function() {
return offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
});
if (this.settings.newest_on_top == true) {
offsetAmt = this.settings.offset.y;
}
css[this.settings.placement.from] = offsetAmt+'px';
switch (this.settings.placement.align) {
case "left":
case "right":
css[this.settings.placement.align] = this.settings.offset.x+'px';
break;
case "center":
css.left = 0;
css.right = 0;
break;
}
this.$ele.css(css).addClass(this.settings.animate.enter);
$.each(Array('webkit', 'moz', 'o', 'ms', ''), function(index, prefix) {
self.$ele[0].style[prefix+'AnimationIterationCount'] = 1;
});
$(this.settings.element).append(this.$ele);
if (this.settings.newest_on_top == true) {
offsetAmt = (parseInt(offsetAmt)+parseInt(this.settings.spacing)) + this.$ele.outerHeight();
this.reposition(offsetAmt);
}
if ($.isFunction(self.settings.onShow)) {
self.settings.onShow.call(this.$ele);
}
this.$ele.one(this.animations.start, function(event) {
hasAnimation = true;
}).one(this.animations.end, function(event) {
if ($.isFunction(self.settings.onShown)) {
self.settings.onShown.call(this);
}
});
setTimeout(function() {
if (!hasAnimation) {
if ($.isFunction(self.settings.onShown)) {
self.settings.onShown.call(this);
}
}
}, 600);
},
bind: function() {
var self = this;
this.$ele.find('[data-notify="dismiss"]').on('click', function() {
self.close();
})
this.$ele.mouseover(function(e) {
$(this).data('data-hover', "true");
}).mouseout(function(e) {
$(this).data('data-hover', "false");
});
this.$ele.data('data-hover', "false");
if (this.settings.delay > 0) {
self.$ele.data('notify-delay', self.settings.delay);
var timer = setInterval(function() {
var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over == "pause") || self.settings.mouse_over != "pause") {
var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
self.$ele.data('notify-delay', delay);
self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
}
if (delay <= -(self.settings.timer)) {
clearInterval(timer);
self.close();
}
}, self.settings.timer);
}
},
close: function() {
var self = this,
$successors = null,
posX = parseInt(this.$ele.css(this.settings.placement.from)),
hasAnimation = false;
this.$ele.data('closing', 'true').addClass(this.settings.animate.exit);
self.reposition(posX);
if ($.isFunction(self.settings.onClose)) {
self.settings.onClose.call(this.$ele);
}
this.$ele.one(this.animations.start, function(event) {
hasAnimation = true;
}).one(this.animations.end, function(event) {
$(this).remove();
if ($.isFunction(self.settings.onClosed)) {
self.settings.onClosed.call(this);
}
});
setTimeout(function() {
if (!hasAnimation) {
self.$ele.remove();
if (self.settings.onClosed) {
self.settings.onClosed(self.$ele);
}
}
}, 600);
},
reposition: function(posX) {
var self = this,
notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
$elements = this.$ele.nextAll(notifies);
if (this.settings.newest_on_top == true) {
$elements = this.$ele.prevAll(notifies);
}
$elements.each(function() {
$(this).css(self.settings.placement.from, posX);
posX = (parseInt(posX)+parseInt(self.settings.spacing)) + $(this).outerHeight();
});
}
});
$.notify = function ( content, options ) {
var plugin = new Notify( this, content, options );
return plugin.notify;
};
$.notifyDefaults = function( options ) {
defaults = $.extend(true, {}, defaults, options);
return defaults;
};
$.notifyClose = function( command ) {
if (typeof command === "undefined" || command == "all") {
$('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
}else{
$('[data-notify-position="'+command+'"]').find('[data-notify="dismiss"]').trigger('click');
}
};
}));

2
htdocs/js/bootstrap-slider.js vendored
View File

@ -38,7 +38,7 @@
} }
self.addClass("slider-wrapper-jq") self.addClass("slider-wrapper-jq")
.append($("<div class='progress' style='position:relative;left:0'/>") .append($("<div class='progress' style='position:relative;left:0;height:20px;'/>")
.append("<div class='progress-bar' style='position:width: 30%;background-color: "+ .append("<div class='progress-bar' style='position:width: 30%;background-color: "+
options.barColor+"; -webkit-transition:none; transition:none;' />") options.barColor+"; -webkit-transition:none; transition:none;' />")
.append("<div class='btn btn-default ' style='position:absolute;height:100%;padding:6px 10px;margin-left:-10px;vertical-align: top'>")); .append("<div class='btn btn-default ' style='position:absolute;height:100%;padding:6px 10px;margin-left:-10px;vertical-align: top'>"));

6444
htdocs/js/bootstrap.bundle.js vendored
View File

File diff suppressed because it is too large Load Diff

1
htdocs/js/bootstrap.bundle.js.map
View File

File diff suppressed because one or more lines are too long

7
htdocs/js/bootstrap.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
htdocs/js/bootstrap.bundle.min.js.map
View File

File diff suppressed because one or more lines are too long

128
htdocs/js/mpd.js
View File

@ -61,8 +61,7 @@ var app = $.sammy(function() {
} }
function prepare() { function prepare() {
$('#navbar-top > li').removeClass('active'); $('#navbar-bottom > div').removeClass('active');
$('#navbar-bottom > li').removeClass('active');
$('.page-item').addClass('hide'); $('.page-item').addClass('hide');
$('#add-all-songs').addClass('hide'); $('#add-all-songs').addClass('hide');
pagination = 0; pagination = 0;
@ -303,11 +302,9 @@ function webSocketConnect() {
try { try {
socket.onopen = function() { socket.onopen = function() {
console.log("connected"); console.log("connected");
$('.top-right').notify({
message:{text:"Connected to myMPD"}, $.notify({message:"Connected to myMPD" },{ type: "success", offset: { y: 60, x:20 }});
fadeOut: { enabled: true, delay: 500 }
}).show();
app.run(); app.run();
/* emit initial request for output names */ /* emit initial request for output names */
socket.send('MPD_API_GET_OUTPUTS'); socket.send('MPD_API_GET_OUTPUTS');
@ -318,8 +315,11 @@ function webSocketConnect() {
socket.onmessage = function got_packet(msg) { socket.onmessage = function got_packet(msg) {
if(msg.data === last_state || msg.data.length == 0) if(msg.data === last_state || msg.data.length == 0)
return; return;
var obj = JSON.parse(msg.data); try {
var obj = JSON.parse(msg.data);
} catch(e) {
$.notify({ title: "Invalid JSON Data received", message: msg.data},{ type: "success", offset: { y: 60, x:20 }});
}
switch (obj.type) { switch (obj.type) {
case 'queue': case 'queue':
@ -367,9 +367,9 @@ function webSocketConnect() {
$('#salamisandwich > tbody > tr').on({ $('#salamisandwich > tbody > tr').on({
mouseover: function(){ mouseover: function(){
var doomed = $(this); var doomed = $(this);
if ( $('#btntrashmodeup').hasClass('active') ) if ( $('#btntrashmodeup').hasClass('btn-success') )
doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")"); doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")");
if ( $('#btntrashmodedown').hasClass('active') ) if ( $('#btntrashmodedown').hasClass('btn-success') )
doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")"); doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")");
$.each(doomed, function(){ $.each(doomed, function(){
if($(this).children().last().has("a").length == 0) if($(this).children().last().has("a").length == 0)
@ -382,9 +382,9 @@ function webSocketConnect() {
}, },
mouseleave: function(){ mouseleave: function(){
var doomed = $(this); var doomed = $(this);
if ( $('#btntrashmodeup').hasClass('active') ) if ( $('#btntrashmodeup').hasClass('btn-success') )
doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")"); doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")");
if ( $('#btntrashmodedown').hasClass('active') ) if ( $('#btntrashmodedown').hasClass('btn-success') )
doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")"); doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")");
$.each(doomed, function(){$(this).children().last().find("a").stop().remove();}); $.each(doomed, function(){$(this).children().last().find("a").stop().remove();});
} }
@ -507,11 +507,8 @@ function webSocketConnect() {
.find('a').click(function(e) { .find('a').click(function(e) {
e.stopPropagation(); e.stopPropagation();
socket.send(onClickAction + "," + decodeURI($(this).parents("tr").attr("uri"))); socket.send(onClickAction + "," + decodeURI($(this).parents("tr").attr("uri")));
$('.top-right').notify({ $.notify({message: "\"" + $('td:nth-last-child(3)', $(this).parents("tr")).text() + "\" added"},{ type: "success", offset: { y: 60, x:20 }});
message:{ });
text: "\"" + $('td:nth-last-child(3)', $(this).parents("tr")).text() + "\" added"
} }).show();
}).fadeTo('fast',1);
} }
if ( isTouch ) { if ( isTouch ) {
@ -523,7 +520,7 @@ function webSocketConnect() {
if($(this).is(".dir")) if($(this).is(".dir"))
appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add'); appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add');
else if($(this).is(".song")) else if($(this).is(".song"))
appendClickableIcon($(this).children().last(), 'MPD_API_ADD_PLAY_TRACK', 'playlist_add'); appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add');
}, },
mouseleave: function(){ mouseleave: function(){
$(this).children().last().find("a").stop().remove(); $(this).children().last().find("a").stop().remove();
@ -543,19 +540,12 @@ function webSocketConnect() {
break; break;
case 'song': case 'song':
socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri"))); socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
$('.top-right').notify({
message:{ $.notify({message: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"},{ type: "success", offset: { y: 60, x:20 }});
text: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"
}
}).show();
break; break;
case 'plist': case 'plist':
socket.send("MPD_API_ADD_PLAYLIST," + decodeURI($(this).attr("uri"))); socket.send("MPD_API_ADD_PLAYLIST," + decodeURI($(this).attr("uri")));
$('.top-right').notify({ $.notify({message: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"},{ type: "success", offset: { y: 60, x:20 }});
message:{
text: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"
}
}).show();
break; break;
} }
} }
@ -631,7 +621,8 @@ function webSocketConnect() {
$('#btn-outputs-block button').remove(); $('#btn-outputs-block button').remove();
if ( Object.keys(obj.data).length ) { if ( Object.keys(obj.data).length ) {
$.each(obj.data, function(id, name){ $.each(obj.data, function(id, name){
var btn = $('<button id="btnoutput'+id+'" class="btn btn-secondary" onclick="toggleoutput(this, '+id+')"><span class="material-icons">volume_up</span> '+name+'</button>'); var btn = $('<button id="btnoutput'+id+'" class="btn btn-secondary btn-block" onclick="toggleoutput(this, '+id+')">'+
'<span class="material-icons" style="float:left;">volume_up</span> '+name+'</button>');
btn.appendTo($('#btn-outputs-block')); btn.appendTo($('#btn-outputs-block'));
}); });
} else { } else {
@ -652,12 +643,7 @@ function webSocketConnect() {
last_outputs = obj; last_outputs = obj;
break; break;
case 'disconnected': case 'disconnected':
if($('.top-right').has('div').length == 0) $.notify({message: "myMPD lost connection to MPD "},{ type: "danger", offset: { y: 60, x:20 }});
$('.top-right').notify({
message:{text:"myMPD lost connection to MPD "},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break; break;
case 'update_queue': case 'update_queue':
if(current_app === 'queue') if(current_app === 'queue')
@ -686,10 +672,7 @@ function webSocketConnect() {
songNotify(obj.data.title, obj.data.artist, obj.data.album ); songNotify(obj.data.title, obj.data.artist, obj.data.album );
else else
if (current_app != 'nowplaying') { if (current_app != 'nowplaying') {
$('.top-right').notify({ $.notify({message: notification },{ type: "success", offset: { y: 60, x:20 }});
message:{html: notification},
type: "info",
}).show();
} }
break; break;
case 'mpdhost': case 'mpdhost':
@ -713,10 +696,7 @@ function webSocketConnect() {
} }
break; break;
case 'error': case 'error':
$('.top-right').notify({ $.notify({message: obj.data },{ type: "danger", offset: { y: 60, x:20 }});
message:{text: obj.data},
type: "danger",
}).show();
default: default:
break; break;
} }
@ -724,13 +704,7 @@ function webSocketConnect() {
socket.onclose = function(){ socket.onclose = function(){
console.log("disconnected"); console.log("disconnected");
$('.top-right').notify({ $.notify({message:"Connection to myMPD lost, retrying in 3 seconds " },{ type: "danger", offset: { y: 60, x:20 }});
message:{text:"Connection to myMPD lost, retrying in 3 seconds "},
type: "danger",
onClose: function () {
webSocketConnect();
}
}).show();
} }
} catch(exception) { } catch(exception) {
@ -819,9 +793,7 @@ var updatePageTitle = function(songInfo) {
function updateDB() { function updateDB() {
socket.send('MPD_API_UPDATE_DB'); socket.send('MPD_API_UPDATE_DB');
$('.top-right').notify({ $.notify({message:"Updating MPD Database..." },{ type: "success", offset: { y: 60, x:20 }});
message:{text:"Updating MPD Database... "}
}).show();
} }
function clickPlay() { function clickPlay() {
@ -878,13 +850,13 @@ function setLocalStream(mpdhost) {
} }
function trash(tr) { function trash(tr) {
if ( $('#btntrashmodeup').hasClass('active') ) { if ( $('#btntrashmodeup').hasClass('btn-success') ) {
socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1)); socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1));
tr.remove(); tr.remove();
} else if ( $('#btntrashmodesingle').hasClass('active') ) { } else if ( $('#btntrashmodesingle').hasClass('btn-success') ) {
socket.send('MPD_API_RM_TRACK,' + tr.attr('trackid')); socket.send('MPD_API_RM_TRACK,' + tr.attr('trackid'));
tr.remove(); tr.remove();
} else if ( $('#btntrashmodedown').hasClass('active') ) { } else if ( $('#btntrashmodedown').hasClass('btn-success') ) {
socket.send('MPD_API_RM_RANGE,' + tr.index() + ',-1'); socket.send('MPD_API_RM_RANGE,' + tr.index() + ',-1');
tr.remove(); tr.remove();
}; };
@ -934,6 +906,7 @@ $('#trashmode').children("button").on('click', function(e) {
$('#btnnotify').on('click', function (e) { $('#btnnotify').on('click', function (e) {
if($.cookie("notification") === "true") { if($.cookie("notification") === "true") {
$.cookie("notification", false); $.cookie("notification", false);
$('#btnnotify').removeClass("btn-success").addClass("btn-secondary");
} else { } else {
Notification.requestPermission(function (permission) { Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) { if(!('permission' in Notification)) {
@ -942,7 +915,7 @@ $('#btnnotify').on('click', function (e) {
if (permission === "granted") { if (permission === "granted") {
$.cookie("notification", true, { expires: 424242 }); $.cookie("notification", true, { expires: 424242 });
$('btnnotify').removeClass("btn-secondary").addClass("btn-success"); $('#btnnotify').removeClass("btn-secondary").addClass("btn-success");
} }
}); });
} }
@ -973,7 +946,7 @@ $('#search').submit(function () {
return false; return false;
}); });
$('.page-btn').on('click', function (e) { $('.page-link').on('click', function (e) {
switch ($(this).text()) { switch ($(this).text()) {
case "Next": case "Next":
@ -1048,19 +1021,6 @@ function notificationsSupported() {
} }
function songNotify(title, artist, album) { function songNotify(title, artist, album) {
/*var opt = {
type: "list",
title: title,
message: title,
items: []
}
if(artist.length > 0)
opt.items.push({title: "Artist", message: artist});
if(album.length > 0)
opt.items.push({title: "Album", message: album});
*/
//chrome.notifications.create(id, options, creationCallback);
var textNotification = ""; var textNotification = "";
if(typeof artist != 'undefined' && artist.length > 0) if(typeof artist != 'undefined' && artist.length > 0)
textNotification += " " + artist; textNotification += " " + artist;
@ -1175,11 +1135,7 @@ function dirble_load_stations() {
$.getJSON( "https://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=" + dirble_api_token, function( data ) { $.getJSON( "https://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=" + dirble_api_token, function( data ) {
socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream); socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream);
$('.top-right').notify({ $.notify({message: _this.text() + " added"},{ type: "success", offset: { y: 60, x:20 }});
message:{
text: _this.text() + " added"
}
}).show();
}); });
}, },
mouseenter: function() { mouseenter: function() {
@ -1193,11 +1149,7 @@ function dirble_load_stations() {
$.getJSON( "https://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=" + dirble_api_token, function( data ) { $.getJSON( "https://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=" + dirble_api_token, function( data ) {
socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream); socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream);
$('.top-right').notify({ $.notify({message: _this.text() + " added" },{ type: "success", offset: { y: 60, x:20 }});
message:{
text: _this.text() + " added"
}
}).show();
}); });
}).fadeTo('fast',1); }).fadeTo('fast',1);
}, },
@ -1214,11 +1166,7 @@ function dirble_load_stations() {
$.getJSON( "https://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=" + dirble_api_token, function( data ) { $.getJSON( "https://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=" + dirble_api_token, function( data ) {
socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream); socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream);
$('.top-right').notify({ $.notify({message: _this.text() + " added"},{ type: "success", offset: { y: 60, x:20 }});
message:{
text: _this.text() + " added"
}
}).show();
}); });
}, },
mouseenter: function() { mouseenter: function() {
@ -1232,11 +1180,7 @@ function dirble_load_stations() {
$.getJSON( "https://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=" + dirble_api_token, function( data ) { $.getJSON( "https://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=" + dirble_api_token, function( data ) {
socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream); socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream);
$('.top-right').notify({ $.notify({message: _this.text() + " added"},{ type: "success", offset: { y: 60, x:20 }});
message:{
text: _this.text() + " added"
}
}).show();
}); });
}).fadeTo('fast',1); }).fadeTo('fast',1);
}, },