mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
push webamp to new design
This commit is contained in:
Paul Sori
parent
31cf8ec7b9
commit
fb22193b28
@ -1,6 +1,57 @@
|
||||
$(document).ready(function () {
|
||||
mstreamPlaylists = []
|
||||
var entityMap = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
'/': '/',
|
||||
'`': '`',
|
||||
'=': '='
|
||||
};
|
||||
|
||||
function escapeHtml (string) {
|
||||
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
|
||||
return entityMap[s];
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
// Responsive active content
|
||||
$(document).on('click', '.activate-panel-1', function(event) {
|
||||
$('.activate-panel-1').addClass('active');
|
||||
$('.activate-panel-2').removeClass('active');
|
||||
|
||||
$('#panel1').addClass('active');
|
||||
$('#panel2').removeClass('active');
|
||||
});
|
||||
|
||||
$(document).on('click', '.activate-panel-2', function(event) {
|
||||
$('.activate-panel-2').addClass('active');
|
||||
$('.activate-panel-1').removeClass('active');
|
||||
|
||||
$('#panel2').addClass('active');
|
||||
$('#panel1').removeClass('active');
|
||||
});
|
||||
|
||||
$(document).on('click', '.hamburger-button', function(event) {
|
||||
$('.responsive-left-nav').toggleClass('hide-on-small');
|
||||
});
|
||||
|
||||
// Modals
|
||||
$('#aboutModal').iziModal({
|
||||
title: 'Info',
|
||||
headerColor: '#5a5a6a',
|
||||
width: 475,
|
||||
focusInput: false,
|
||||
padding: 15
|
||||
});
|
||||
$(document).on('click', '.nav-logo', function (event) {
|
||||
event.preventDefault();
|
||||
$('#aboutModal').iziModal('open');
|
||||
});
|
||||
$('#aboutModal').iziModal('setTop', '10%');
|
||||
|
||||
// Dropzone
|
||||
const myDropzone = new Dropzone(document.body, {
|
||||
previewsContainer: false,
|
||||
clickable: false,
|
||||
@ -126,7 +177,7 @@ $(document).ready(function () {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the token to local storage
|
||||
// Local Storage
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
localStorage.setItem("token", response.token);
|
||||
}
|
||||
@ -147,13 +198,10 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
function testIt(token) {
|
||||
function testIt() {
|
||||
var token;
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
// Retrieve
|
||||
token = localStorage.getItem("token");
|
||||
} else if(Cookies && Cookies.get('token')) {
|
||||
token = Cookies.get('token')
|
||||
}
|
||||
|
||||
if (token) {
|
||||
@ -171,22 +219,13 @@ $(document).ready(function () {
|
||||
//
|
||||
$('#webamp-iframe').attr('src', '/public/webamp/webamp.html?token=' + token);
|
||||
|
||||
mstreamPlaylists.length = 0;
|
||||
$.each(response.playlists, function () {
|
||||
mstreamPlaylists.push(this);
|
||||
});
|
||||
|
||||
// Setup the file browser
|
||||
loadFileExplorer();
|
||||
callOnStart();
|
||||
});
|
||||
}
|
||||
|
||||
// NOTE: There needs to be a split here
|
||||
// For the normal webap we just get the token
|
||||
testIt();
|
||||
// For electron we need to pull it from wherever electron stores things
|
||||
|
||||
var startInterval = false;
|
||||
|
||||
function callOnStart() {
|
||||
@ -231,7 +270,7 @@ $(document).ready(function () {
|
||||
var currentBrowsingList = [];
|
||||
|
||||
//////////////////////////////// Administrative stuff
|
||||
// when you click an mp3, add it to the now playling playlist
|
||||
// when you click an mp3, add it to now playing
|
||||
$("#filelist").on('click', 'div.filez', function () {
|
||||
addSongWiz($(this).data("file_location"), {}, true);
|
||||
});
|
||||
@ -259,9 +298,11 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/////////////////////////////////////// File Explorer
|
||||
function loadFileExplorer() {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.get_file_explorer').addClass('selected');
|
||||
|
||||
resetPanel('File Explorer', 'scrollBoxHeight1');
|
||||
programState = [{
|
||||
state: 'fileExplorer'
|
||||
@ -375,7 +416,7 @@ $(document).ready(function () {
|
||||
var filelist = [];
|
||||
$.each(currentBrowsingList, function () {
|
||||
if (this.type == 'directory') {
|
||||
filelist.push('<div data-directory="' + this.name + '" class="dirz"><img class="folder-image" src="/public/img/folder.svg"><span class="item-text">' + this.name + '</span></div>');
|
||||
filelist.push('<div class="clear relative"><div data-directory="' + this.name + '" class="dirz"><img class="folder-image" src="/public/img/folder.svg"><span class="item-text">' + this.name + '</span></div><div class="song-button-box"><span data-directory="' + this.name + '" title="Download Directory" class="downloadDir"><svg width="12" height="12" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1803 960q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z"/></svg></span></div></div>');
|
||||
} else {
|
||||
if (this.artist != null || this.title != null) {
|
||||
filelist.push('<div data-file_location="' + response.path + this.name + '" class="filez"><img class="music-image" src="/public/img/music-note.svg"> <span class="item-text">' + this.artist + ' - ' + this.title + '</span></div>');
|
||||
@ -418,9 +459,9 @@ $(document).ready(function () {
|
||||
|
||||
if (lowerCase.indexOf(searchVal.toLowerCase()) !== -1) {
|
||||
if (this.type === 'directory') {
|
||||
filelist.push('<div data-directory="' + this.name + '" class="dirz"><img class="folder-image" src="/public/img/folder.svg"><span class="item-text">' + this.name + '</span></div>');
|
||||
filelist.push('<div class="clear relative"><div data-directory="' + this.name + '" class="dirz"><img class="folder-image" src="/public/img/folder.svg"><span class="item-text">' + this.name + '</span></div><div data-directory="' + this.name + '" class="song-button-box"><span class="downloadDir"><svg width="12" height="12" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1803 960q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z"/></svg></span></div></div>');
|
||||
} else if (this.type === 'playlist') {
|
||||
filelist.push('<div data-playlistname="' + this.name + '" class="playlist_row_container"><span data-playlistname="' + this.name + '" class="playlistz force-width">' + this.name + '</span><div class="song-button-box"><span data-playlistname="' + this.name + '" class="deletePlaylist">Delete</span></div></div>');
|
||||
filelist.push('<div data-playlistname="' + encodeURIComponent(this.name) + '" class="playlist_row_container"><span data-playlistname="' + encodeURIComponent(this.name) + '" class="playlistz force-width">' + escapeHtml(this.name) + '</span><div class="song-button-box"><span data-playlistname="' + encodeURIComponent(this.name) + '" class="deletePlaylist">Delete</span></div></div>');
|
||||
} else if (this.type === 'album') {
|
||||
if (this.album_art_file) {
|
||||
filelist.push('<div data-album="' + this.name + '" class="albumz"><img class="album-art-box" data-original="/album-art/' + this.album_art_file + '?token=' + MSTREAMAPI.currentServer.token + '"><span class="explorer-label-1">' + this.name + '</span></div>');
|
||||
@ -470,16 +511,15 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
////////////////////////////////////// Save/Load playlists
|
||||
|
||||
|
||||
// Get all playlists
|
||||
$('.get_all_playlists').on('click', function () {
|
||||
getAllPlaylists();
|
||||
});
|
||||
|
||||
function getAllPlaylists() {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.get_all_playlists').addClass('selected');
|
||||
resetPanel('Playlists', 'scrollBoxHeight1');
|
||||
programState = [{
|
||||
state: 'allPlaylists'
|
||||
@ -491,15 +531,13 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
currentBrowsingList = [];
|
||||
mstreamPlaylists.length = 0;
|
||||
|
||||
// loop through the json array and make an array of corresponding divs
|
||||
var playlists = [];
|
||||
$.each(response, function () {
|
||||
playlists.push('<div data-playlistname="' + this.name + '" class="playlist_row_container"><span data-playlistname="' + this.name + '" class="playlistz force-width">' + this.name + '</span><div class="song-button-box"><span data-playlistname="' + this.name + '" class="deletePlaylist">Delete</span></div></div>');
|
||||
playlists.push('<div data-playlistname="' + encodeURIComponent(this.name) + '" class="playlist_row_container"><span data-playlistname="' + encodeURIComponent(this.name) + '" class="playlistz force-width">' + escapeHtml(this.name) + '</span><div class="song-button-box"><span data-playlistname="' + encodeURIComponent(this.name) + '" class="deletePlaylist">Delete</span></div></div>');
|
||||
this.type = 'playlist';
|
||||
currentBrowsingList.push(this);
|
||||
mstreamPlaylists.push(this);
|
||||
});
|
||||
// Add playlists to the left panel
|
||||
$('#filelist').html(playlists);
|
||||
@ -508,7 +546,7 @@ $(document).ready(function () {
|
||||
|
||||
// delete playlist
|
||||
$("#filelist").on('click', '.deletePlaylist', function () {
|
||||
var playlistname = $(this).data('playlistname');
|
||||
var playlistname = decodeURIComponent($(this).data('playlistname'));
|
||||
|
||||
iziToast.question({
|
||||
timeout: 10000,
|
||||
@ -526,7 +564,7 @@ $(document).ready(function () {
|
||||
if (error !== false) {
|
||||
return boilerplateFailure(response, error);
|
||||
}
|
||||
$('div[data-playlistname="'+playlistname+'"]').remove();
|
||||
$('div[data-playlistname="'+encodeURIComponent(playlistname)+'"]').remove();
|
||||
});
|
||||
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
|
||||
}, true],
|
||||
@ -549,13 +587,13 @@ $(document).ready(function () {
|
||||
|
||||
// load up a playlist
|
||||
$("#filelist").on('click', '.playlistz', function () {
|
||||
var playlistname = $(this).data('playlistname');
|
||||
var playlistname = decodeURIComponent($(this).data('playlistname'));
|
||||
var name = $(this).html();
|
||||
$('.directoryName').html('Playlist: ' + name);
|
||||
|
||||
programState.push({
|
||||
state: 'playlist',
|
||||
name: name
|
||||
name: playlistname
|
||||
})
|
||||
|
||||
MSTREAMAPI.loadPlaylist(playlistname, function (response, error) {
|
||||
@ -574,13 +612,13 @@ $(document).ready(function () {
|
||||
$.each(response, function (index, value) {
|
||||
if (!value.metadata || !value.metadata.title) {
|
||||
currentBrowsingList.push({ type: 'file', name: value.filepath, metadata: value.metadata });
|
||||
files.push('<div data-lokiid="'+value.lokiId+'" class="clear"><div data-lokiid="'+value.lokiId+'" data-file_location="' + value.filepath + '" class="filez left"><img class="album-art-box" src="/public/img/default.png"><span class="explorer-label-1">' + value.filepath + '</span></div><div class="song-button-box"><span data-lokiid="'+value.lokiId+'" class="removePlaylistSong">remove</span></div></div>');
|
||||
files.push('<div data-lokiid="'+value.lokiId+'" class="clear relative"><div data-lokiid="'+value.lokiId+'" data-file_location="' + value.filepath + '" class="filez left"><img class="album-art-box" src="/public/img/default.png"><span class="explorer-label-1">' + value.filepath + '</span></div><div class="song-button-box"><span data-lokiid="'+value.lokiId+'" class="removePlaylistSong">remove</span></div></div>');
|
||||
} else if (value.metadata['album-art']) {
|
||||
currentBrowsingList.push({ type: 'file', name: value.metadata.artist + ' - ' + value.metadata.title, metadata: value.metadata });
|
||||
files.push('<div data-lokiid="'+value.lokiId+'" class="clear"><div data-lokiid="'+value.lokiId+'" data-file_location="' + value.filepath + '" class="filez left"><img class="album-art-box" data-original="/album-art/' + value.metadata['album-art'] + '?token=' + MSTREAMAPI.currentServer.token + '"><span class="explorer-label-1">' + value.metadata.artist + ' - ' + value.metadata.title + '</span></div><div class="song-button-box"><span data-lokiid="'+value.lokiId+'" class="removePlaylistSong">remove</span></div></div>');
|
||||
files.push('<div data-lokiid="'+value.lokiId+'" class="clear relative"><div data-lokiid="'+value.lokiId+'" data-file_location="' + value.filepath + '" class="filez left"><img class="album-art-box" data-original="/album-art/' + value.metadata['album-art'] + '?token=' + MSTREAMAPI.currentServer.token + '"><span class="explorer-label-1">' + value.metadata.artist + ' - ' + value.metadata.title + '</span></div><div class="song-button-box"><span data-lokiid="'+value.lokiId+'" class="removePlaylistSong">remove</span></div></div>');
|
||||
} else {
|
||||
currentBrowsingList.push({ type: 'file', name: value.metadata.artist + ' - ' + value.metadata.title, metadata: value.metadata });
|
||||
files.push('<div data-lokiid="'+value.lokiId+'" class="clear"><div data-lokiid="'+value.lokiId+'" data-file_location="' + value.filepath + '" class="filez left"><img class="album-art-box" src="/public/img/default.png"><span class="explorer-label-1">' + value.metadata.artist + ' - ' + value.metadata.title + '</span></div><div class="song-button-box"><span data-lokiid="'+value.lokiId+'" class="removePlaylistSong">remove</span></div></div>');
|
||||
files.push('<div data-lokiid="'+value.lokiId+'" class="clear relative"><div data-lokiid="'+value.lokiId+'" data-file_location="' + value.filepath + '" class="filez left"><img class="album-art-box" src="/public/img/default.png"><span class="explorer-label-1">' + value.metadata.artist + ' - ' + value.metadata.title + '</span></div><div class="song-button-box"><span data-lokiid="'+value.lokiId+'" class="removePlaylistSong">remove</span></div></div>');
|
||||
}
|
||||
});
|
||||
|
||||
@ -590,10 +628,35 @@ $(document).ready(function () {
|
||||
});
|
||||
});
|
||||
|
||||
///////////////////////////// Mobile Stuff
|
||||
$('.mobile-panel').on('click', function () {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.mobile-panel').addClass('selected');
|
||||
resetPanel('Mobile Apps', 'scrollBoxHeight2');
|
||||
$('#directory_bar').hide();
|
||||
|
||||
$('#filelist').html("\
|
||||
<div class='mobile-links'>\
|
||||
<a target='_blank' href='https://play.google.com/store/apps/details?id=mstream.music&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>\
|
||||
<div class='mobile-placeholder'> </div>\
|
||||
<!-- <a href='https://play.google.com/store/apps/details?id=mstream.music&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a> -->\
|
||||
</div>\
|
||||
<div class='app-text'>\
|
||||
The official mStream App is now available for Android. Use it to sync and stream music from any mStream server.\
|
||||
<br><br>\
|
||||
An iOS version will be released soon.\
|
||||
<br><br>\
|
||||
<a target='_blank' href='/public/qr-tool.html'>Checkout the QR Code tool to help add your server to the app</a>\
|
||||
</div>\
|
||||
");
|
||||
});
|
||||
|
||||
///////////////////////////// Database Management
|
||||
// The Manage DB panel
|
||||
$('#manage_database').on('click', function () {
|
||||
resetPanel('Database Management', 'scrollBoxHeight2');
|
||||
$('.db-panel').on('click', function () {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.db-panel').addClass('selected');
|
||||
resetPanel('Database', 'scrollBoxHeight2');
|
||||
|
||||
$('#directory_bar').hide();
|
||||
|
||||
@ -620,7 +683,7 @@ $(document).ready(function () {
|
||||
return;
|
||||
}
|
||||
// If you got this far the db is made and working
|
||||
$('#filelist').append('<p>Your DB has ' + response.totalFileCount + ' files</p><input type="button" class="button secondary rounded small" value="Build Database" id="build_database">');
|
||||
$('#filelist').append('<p>Your DB has ' + response.totalFileCount + ' files</p><input type="button" value="Build Database" id="build_database">');
|
||||
});
|
||||
});
|
||||
|
||||
@ -667,6 +730,8 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
function getAllAlbums() {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.get_all_albums').addClass('selected');
|
||||
resetPanel('Albums', 'scrollBoxHeight1');
|
||||
|
||||
programState = [{
|
||||
@ -745,6 +810,8 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
function getAllArtists() {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.get_all_artists').addClass('selected');
|
||||
resetPanel('Artists', 'scrollBoxHeight1');
|
||||
programState = [{
|
||||
state: 'allArtists'
|
||||
@ -810,6 +877,8 @@ $(document).ready(function () {
|
||||
getRatedSongs();
|
||||
});
|
||||
function getRatedSongs() {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.get_rated_songs').addClass('selected');
|
||||
resetPanel('Starred', 'scrollBoxHeight1');
|
||||
programState = [{
|
||||
state: 'allRated'
|
||||
@ -852,6 +921,8 @@ $(document).ready(function () {
|
||||
|
||||
//////////////////////// Jukebox Mode
|
||||
function setupJukeboxPanel() {
|
||||
$('ul.left-nav-menu li').removeClass('selected');
|
||||
$('.jukebox_mode').addClass('selected');
|
||||
// Hide the directory bar
|
||||
resetPanel('Jukebox Mode', 'scrollBoxHeight2');
|
||||
currentBrowsingList = [];
|
||||
@ -865,7 +936,7 @@ $(document).ready(function () {
|
||||
<p class="jukebox-panel">\
|
||||
<br><br>\
|
||||
<h3>Jukebox Mode allows you to control this page remotely<h3> <br><br>\
|
||||
<div class="jukebox_connect button"> CONNECT IT!</div>\
|
||||
<input value="Connect" type="button" class="jukebox_connect">\
|
||||
</p>\
|
||||
<img src="/public/img/loading.gif" class="hide jukebox-loading">';
|
||||
}
|
||||
@ -889,7 +960,7 @@ $(document).ready(function () {
|
||||
$(this).hide();
|
||||
$('.jukebox-loading').toggleClass('hide');
|
||||
|
||||
JUKEBOX.createWebsocket(MSTREAMAPI.currentServer.token, function () {
|
||||
JUKEBOX.createWebsocket(MSTREAMAPI.currentServer.token, false, function () {
|
||||
// Wait a while and display the status
|
||||
setTimeout(function () {
|
||||
setupJukeboxPanel();
|
||||
@ -933,40 +1004,23 @@ $(document).ready(function () {
|
||||
|
||||
var check = document.getElementById("webamp-iframe").contentWindow;
|
||||
check.webampCtrl.appendTracks([{ url: window.location.origin + url }]);
|
||||
|
||||
// MSTREAMPLAYER.addSong(newSong);
|
||||
|
||||
// // perform lookup
|
||||
// if (lookupMetadata === true) {
|
||||
// mstreamModule.lookupMetadata(rawFilepath, function (response, error) {
|
||||
// if (error !== false || response.error || !response) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (response.metadata) {
|
||||
// newSong.metadata = response.metadata;
|
||||
// MSTREAMPLAYER.resetCurrentMetadata();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
// Setup jukebox if URL
|
||||
var uuid = false;
|
||||
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var queryParm = urlParams.get('code');
|
||||
|
||||
myParam = uuid || queryParm || false;
|
||||
if(myParam) {
|
||||
JUKEBOX.createWebsocket(MSTREAMAPI.currentServer.token, myParam, function () {
|
||||
iziToast.success({
|
||||
title: 'Jukebox Connected',
|
||||
position: 'topCenter',
|
||||
message: 'Code: ' + myParam,
|
||||
timeout: 3500
|
||||
});
|
||||
// Setup jukebox if URL
|
||||
var uuid = null;
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var queryParm = urlParams.get('code');
|
||||
|
||||
myParam = uuid || queryParm || false;
|
||||
if(myParam) {
|
||||
JUKEBOX.createWebsocket(MSTREAMAPI.currentServer.token, myParam, function () {
|
||||
iziToast.success({
|
||||
title: 'Jukebox Connected',
|
||||
position: 'topCenter',
|
||||
message: 'Code: ' + myParam,
|
||||
timeout: 3500
|
||||
});
|
||||
JUKEBOX.setAutoConnect(myParam);
|
||||
}
|
||||
});
|
||||
JUKEBOX.setAutoConnect(myParam);
|
||||
}
|
||||
});
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<meta name="msapplication-TileImage" content="/public/favicon/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<title>mStream Media Player - All your media. Everywhere you go.</title>
|
||||
<title>Webamp</title>
|
||||
|
||||
<script src="https://unpkg.com/webamp@1.2.0/built/webamp.bundle.js"></script>
|
||||
</head>
|
||||
@ -35,15 +35,12 @@
|
||||
<body>
|
||||
<div id='winamp-container'></div>
|
||||
<script>
|
||||
lol = 'loel';
|
||||
Webamp = window.Webamp;
|
||||
const Webamp = window.Webamp;
|
||||
if(!Webamp.browserIsSupported()) {
|
||||
alert("Oh no! Webamp does not work!")
|
||||
throw new Error("What's the point of anything?")
|
||||
}
|
||||
webampCtrl = new Webamp({
|
||||
|
||||
});
|
||||
webampCtrl = new Webamp({ });
|
||||
webampCtrl.renderWhenReady(document.getElementById('winamp-container'));
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -27,14 +27,13 @@
|
||||
<meta name="msapplication-TileImage" content="/public/favicon/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<title>mStream Music</title>
|
||||
<title>WebAmp Mode</title>
|
||||
|
||||
<link rel="stylesheet" href="/public/css/foundation.css" />
|
||||
<link rel="stylesheet" href="/public/css/master.css">
|
||||
<link rel="stylesheet" href="/public/css/webamp.css">
|
||||
<link rel="stylesheet" href="/public/css/mstream-player.css">
|
||||
|
||||
<script src="/public/js/modernizr.js"></script>
|
||||
<script src="/public/js/lib/jquery-2.2.4.min.js"></script>
|
||||
|
||||
<!-- iziToast -->
|
||||
@ -49,7 +48,7 @@
|
||||
<script src="/public/js/lib/vue-sortable.js"></script>
|
||||
|
||||
<!-- Font -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
|
||||
<link href="/public/fonts/jura.css" rel="stylesheet">
|
||||
|
||||
<!-- These must be loaded after the player -->
|
||||
<!-- They add functions onto the MSTREAM object -->
|
||||
@ -58,6 +57,7 @@
|
||||
<script src="/public/js/mstream.jukebox.js"></script>
|
||||
|
||||
<!-- Star Rating System -->
|
||||
<script src="/public/js/lib/star.js"></script>
|
||||
<script src="/public/js/lib/popper.js"></script>
|
||||
|
||||
<script src="/public/js/lib/butterchurn.min.js"></script>
|
||||
@ -66,11 +66,11 @@
|
||||
|
||||
<script src="/public/js/lib/dropzone.js"></script>
|
||||
|
||||
<script src="/public/js/lib/webamp.js"></script>
|
||||
<script src="/public/js/lib/modal.js"></script>
|
||||
<link rel="stylesheet" href="/public/css/izi-modal.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Login Overlay -->
|
||||
<div id="login-overlay" class="login-overlay hide">
|
||||
<div class="row">
|
||||
@ -78,17 +78,17 @@
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="large-6 medium-6 small-10 columns">
|
||||
<img class="login-icon" src="/public/img/mstream-icon.svg">
|
||||
<svg class="login-icon" alt="mStream" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="10 20 600 110" style="enable-background:new 0 0 612 153"><style>.st0,.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#264679}.st1{fill:#6684b2}</style><g><path class="st0" d="M179.9 45.5c-6.2 0-11.5 1.7-15.9 5s-6.5 8.1-6.5 14.4c0 4.9 1.3 9.1 3.8 12.4 2.5 3.4 5.7 5.8 9.3 7.3 3.7 1.5 7.3 2.8 11 3.8s6.8 2.3 9.3 3.9c2.5 1.5 3.8 3.5 3.8 5.8 0 4.8-4.4 7.2-13.1 7.2h-24.1V118h24.1c17.1 0 25.6-6.7 25.6-20.2 0-1.9-.2-3.8-.6-5.8-.4-2-1.2-4-2.6-6-1.3-2.1-3.3-3.7-5.8-4.9-2.5-1.2-6.4-2.7-11.5-4.5l-8.8-3.1c-.7-.2-1.7-.7-2.9-1.3-1.3-.7-2.2-1.3-2.8-1.9-.6-.6-1.1-1.4-1.6-2.3-.5-.9-.7-2-.7-3.2 0-2 1-3.5 2.9-4.6 1.9-1.1 4.3-1.6 7-1.6h24.6V45.5h-24.5zM226.4 58.3v31c0 10.2 2.5 17.6 7.6 22 5.1 4.4 13 6.6 23.7 6.6v-12.8c-2.7 0-4.9-.2-6.8-.4-1.8-.3-3.7-.9-5.8-1.9-2-.9-3.6-2.6-4.7-4.9-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214 58.3h12.4zM281.1 118V76.8c0-7.2.9-12 2.6-14.5 1-1.3 2.2-2.2 3.6-2.8 1.4-.6 2.6-1 3.6-1.1 1-.1 2.5-.1 4.3-.1H310V45.5h-12.2c-3.6 0-6.5.1-8.6.3-2.1.2-4.5.9-7.3 2s-5.1 2.8-7.1 5c-4 4.4-6 12.4-6 24V118h12.3zM326.2 53.8c-6.2 7.4-9.3 17-9.3 28.9 0 10.7 3.2 19.4 9.5 26.2s14.7 10.1 25.3 10.1c8.7 0 16.3-2.7 22.7-8.1L366 102c-3.7 2.1-8.5 3.2-14.3 3.2-6.5 0-11.8-2.3-15.8-6.9-4-4.6-6-10.5-6-17.9 0-7 1.9-12.9 5.6-17.9 3.8-5 8.9-7.5 15.5-7.5 3.3 0 6.1.8 8.2 2.4 2.1 1.6 3.2 4 3.2 7.2 0 5-1.2 8.5-3.6 10.6-2.4 2.1-6.7 3.2-12.9 3.2h-6.7v11.7h5.7c20.3 0 30.5-8.5 30.5-25.4 0-13.6-7.9-20.7-23.7-21.5-10.8-.2-19.3 3.3-25.5 10.6zM412.3 73.2c-7.4 0-13.6 1.9-18.5 5.7-4.9 3.8-7.4 9.4-7.4 16.7 0 7.3 2.3 12.9 7 16.7 4.6 3.8 10.9 5.7 18.8 5.7h31V73.6c0-9.1-2.4-16-7.2-20.8-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9 0 16.4 6.1 16.4 18.2v28.7h-18.4c-9.1 0-13.6-3.2-13.6-9.8 0-3.3 1.2-5.9 3.6-7.8 2.4-1.8 5.8-2.7 10.2-2.7 5.1 0 9.4 1.4 12.9 4.3v-14c-4.9-1.4-9.3-2.1-13.5-2.1zM458.8 118H471V58.3h24.4V118h12.2V58.3h5.7c6.8 0 11.3.7 13.5 2 4.3 2.5 6.5 7.7 6.5 15.5V118h12.2V75.7c0-6-.6-11.2-1.9-15.5-1.2-4.3-3.9-7.8-7.9-10.6-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/><path class="st1" d="M75 118.5v-83l21 13v70z"/><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#26477b" d="M99 118.5v-69l11.5 7 10.5-7v69z"/><path class="st1" d="M124 118.5v-70l21-13v83z"/></g></svg>
|
||||
<form id="login-form" v-on:submit.prevent="submitCode($event)">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input v-focus type="text" class="form-control" id="login-username">
|
||||
<label for="login-username">Username</label>
|
||||
<input autocomplete="username" v-focus type="text" class="form-control" id="login-username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input required type="password" class="form-control" id="login-password">
|
||||
<label for="login-password">Password</label>
|
||||
<input autocomplete="current-password" required type="password" class="form-control" id="login-password">
|
||||
</div>
|
||||
<button id="login-submit" type="submit" class="btn btn-warning btn-lg" :disabled="pending === true ? true : false">Login</button>
|
||||
<input value="Login" id="login-submit" type="submit" :disabled="pending === true ? true : false">
|
||||
</form>
|
||||
</div>
|
||||
<div class="large-3 medium-3 small-1 columns">
|
||||
@ -97,96 +97,107 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download iFrame -->
|
||||
<form id="downform" action="download" target="frameframe" method="POST"></form>
|
||||
<iframe id="downframe" src="" width="0" height="0" tabindex="-1" title="empty" class="hidden" hidden name="frameframe"></iframe>
|
||||
<!-- About Modal -->
|
||||
<div id="aboutModal" class="hide">
|
||||
<svg style='stroke-width: 0px; background-color: #FFF;' fill="#FFF" alt="mStream" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="10 20 600 110" style="enable-background:new 0 0 612 153"><style>.st0,.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#264679}.st1{fill:#6684b2}</style><g><path class="st0" d="M179.9 45.5c-6.2 0-11.5 1.7-15.9 5s-6.5 8.1-6.5 14.4c0 4.9 1.3 9.1 3.8 12.4 2.5 3.4 5.7 5.8 9.3 7.3 3.7 1.5 7.3 2.8 11 3.8s6.8 2.3 9.3 3.9c2.5 1.5 3.8 3.5 3.8 5.8 0 4.8-4.4 7.2-13.1 7.2h-24.1V118h24.1c17.1 0 25.6-6.7 25.6-20.2 0-1.9-.2-3.8-.6-5.8-.4-2-1.2-4-2.6-6-1.3-2.1-3.3-3.7-5.8-4.9-2.5-1.2-6.4-2.7-11.5-4.5l-8.8-3.1c-.7-.2-1.7-.7-2.9-1.3-1.3-.7-2.2-1.3-2.8-1.9-.6-.6-1.1-1.4-1.6-2.3-.5-.9-.7-2-.7-3.2 0-2 1-3.5 2.9-4.6 1.9-1.1 4.3-1.6 7-1.6h24.6V45.5h-24.5zM226.4 58.3v31c0 10.2 2.5 17.6 7.6 22 5.1 4.4 13 6.6 23.7 6.6v-12.8c-2.7 0-4.9-.2-6.8-.4-1.8-.3-3.7-.9-5.8-1.9-2-.9-3.6-2.6-4.7-4.9-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214 58.3h12.4zM281.1 118V76.8c0-7.2.9-12 2.6-14.5 1-1.3 2.2-2.2 3.6-2.8 1.4-.6 2.6-1 3.6-1.1 1-.1 2.5-.1 4.3-.1H310V45.5h-12.2c-3.6 0-6.5.1-8.6.3-2.1.2-4.5.9-7.3 2s-5.1 2.8-7.1 5c-4 4.4-6 12.4-6 24V118h12.3zM326.2 53.8c-6.2 7.4-9.3 17-9.3 28.9 0 10.7 3.2 19.4 9.5 26.2s14.7 10.1 25.3 10.1c8.7 0 16.3-2.7 22.7-8.1L366 102c-3.7 2.1-8.5 3.2-14.3 3.2-6.5 0-11.8-2.3-15.8-6.9-4-4.6-6-10.5-6-17.9 0-7 1.9-12.9 5.6-17.9 3.8-5 8.9-7.5 15.5-7.5 3.3 0 6.1.8 8.2 2.4 2.1 1.6 3.2 4 3.2 7.2 0 5-1.2 8.5-3.6 10.6-2.4 2.1-6.7 3.2-12.9 3.2h-6.7v11.7h5.7c20.3 0 30.5-8.5 30.5-25.4 0-13.6-7.9-20.7-23.7-21.5-10.8-.2-19.3 3.3-25.5 10.6zM412.3 73.2c-7.4 0-13.6 1.9-18.5 5.7-4.9 3.8-7.4 9.4-7.4 16.7 0 7.3 2.3 12.9 7 16.7 4.6 3.8 10.9 5.7 18.8 5.7h31V73.6c0-9.1-2.4-16-7.2-20.8-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9 0 16.4 6.1 16.4 18.2v28.7h-18.4c-9.1 0-13.6-3.2-13.6-9.8 0-3.3 1.2-5.9 3.6-7.8 2.4-1.8 5.8-2.7 10.2-2.7 5.1 0 9.4 1.4 12.9 4.3v-14c-4.9-1.4-9.3-2.1-13.5-2.1zM458.8 118H471V58.3h24.4V118h12.2V58.3h5.7c6.8 0 11.3.7 13.5 2 4.3 2.5 6.5 7.7 6.5 15.5V118h12.2V75.7c0-6-.6-11.2-1.9-15.5-1.2-4.3-3.9-7.8-7.9-10.6-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/><path class="st1" d="M75 118.5v-83l21 13v70z"/><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#26477b" d="M99 118.5v-69l11.5 7 10.5-7v69z"/><path class="st1" d="M124 118.5v-70l21-13v83z"/></g></svg>
|
||||
<div>
|
||||
<span>mStream WebApp v4.0</span><br>
|
||||
<span><a target="_blank" href="https://github.com/IrosTheBeggar/mStream">See More on Github</a></span>
|
||||
<br><br>
|
||||
<span>Developed By Paul Sori</span>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download iFrame -->
|
||||
<form id="downform" action="" target="frameframe" method="POST"></form>
|
||||
<iframe id="downframe" src="" width="0" height="0" tabindex="-1" title="empty" hidden name="frameframe"></iframe>
|
||||
<!-- Download iFrame for GET requests -->
|
||||
<a href="#" class="hide" download id="download-file" hidden></a>
|
||||
|
||||
<div class="off-canvas-wrap">
|
||||
<div class="inner-wrap">
|
||||
|
||||
<!-- Top Nav Bar -->
|
||||
<nav class="noselect tab-bar">
|
||||
<section class="left-small">
|
||||
<a class="left-off-canvas-toggle menu-icon" title="Toggle Sidebar">
|
||||
<nav id="top-nav-bar" class="noselect tab-bar">
|
||||
<section class="left-small hamburger-button">
|
||||
<a class="menu-icon" title="Toggle Sidebar">
|
||||
<span></span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="right tab-bar-section">
|
||||
<h1 class="title">
|
||||
<img src="/public/img/mstream-logo.png" class="logo" alt="MStream" width="181" height="auto">
|
||||
</h1>
|
||||
|
||||
<section class="tab-bar-section">
|
||||
<svg style='stroke-width: 0px; background-color: #FFF;' fill="#FFF" class="logo nav-logo" alt="mStream" width="181" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 620 180" style="enable-background:new 0 0 612 153"><style>.st0,.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#264679}.st1{fill:#6684b2}</style><g><path class="st0" d="M179.9 45.5c-6.2 0-11.5 1.7-15.9 5s-6.5 8.1-6.5 14.4c0 4.9 1.3 9.1 3.8 12.4 2.5 3.4 5.7 5.8 9.3 7.3 3.7 1.5 7.3 2.8 11 3.8s6.8 2.3 9.3 3.9c2.5 1.5 3.8 3.5 3.8 5.8 0 4.8-4.4 7.2-13.1 7.2h-24.1V118h24.1c17.1 0 25.6-6.7 25.6-20.2 0-1.9-.2-3.8-.6-5.8-.4-2-1.2-4-2.6-6-1.3-2.1-3.3-3.7-5.8-4.9-2.5-1.2-6.4-2.7-11.5-4.5l-8.8-3.1c-.7-.2-1.7-.7-2.9-1.3-1.3-.7-2.2-1.3-2.8-1.9-.6-.6-1.1-1.4-1.6-2.3-.5-.9-.7-2-.7-3.2 0-2 1-3.5 2.9-4.6 1.9-1.1 4.3-1.6 7-1.6h24.6V45.5h-24.5zM226.4 58.3v31c0 10.2 2.5 17.6 7.6 22 5.1 4.4 13 6.6 23.7 6.6v-12.8c-2.7 0-4.9-.2-6.8-.4-1.8-.3-3.7-.9-5.8-1.9-2-.9-3.6-2.6-4.7-4.9-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214 58.3h12.4zM281.1 118V76.8c0-7.2.9-12 2.6-14.5 1-1.3 2.2-2.2 3.6-2.8 1.4-.6 2.6-1 3.6-1.1 1-.1 2.5-.1 4.3-.1H310V45.5h-12.2c-3.6 0-6.5.1-8.6.3-2.1.2-4.5.9-7.3 2s-5.1 2.8-7.1 5c-4 4.4-6 12.4-6 24V118h12.3zM326.2 53.8c-6.2 7.4-9.3 17-9.3 28.9 0 10.7 3.2 19.4 9.5 26.2s14.7 10.1 25.3 10.1c8.7 0 16.3-2.7 22.7-8.1L366 102c-3.7 2.1-8.5 3.2-14.3 3.2-6.5 0-11.8-2.3-15.8-6.9-4-4.6-6-10.5-6-17.9 0-7 1.9-12.9 5.6-17.9 3.8-5 8.9-7.5 15.5-7.5 3.3 0 6.1.8 8.2 2.4 2.1 1.6 3.2 4 3.2 7.2 0 5-1.2 8.5-3.6 10.6-2.4 2.1-6.7 3.2-12.9 3.2h-6.7v11.7h5.7c20.3 0 30.5-8.5 30.5-25.4 0-13.6-7.9-20.7-23.7-21.5-10.8-.2-19.3 3.3-25.5 10.6zM412.3 73.2c-7.4 0-13.6 1.9-18.5 5.7-4.9 3.8-7.4 9.4-7.4 16.7 0 7.3 2.3 12.9 7 16.7 4.6 3.8 10.9 5.7 18.8 5.7h31V73.6c0-9.1-2.4-16-7.2-20.8-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9 0 16.4 6.1 16.4 18.2v28.7h-18.4c-9.1 0-13.6-3.2-13.6-9.8 0-3.3 1.2-5.9 3.6-7.8 2.4-1.8 5.8-2.7 10.2-2.7 5.1 0 9.4 1.4 12.9 4.3v-14c-4.9-1.4-9.3-2.1-13.5-2.1zM458.8 118H471V58.3h24.4V118h12.2V58.3h5.7c6.8 0 11.3.7 13.5 2 4.3 2.5 6.5 7.7 6.5 15.5V118h12.2V75.7c0-6-.6-11.2-1.9-15.5-1.2-4.3-3.9-7.8-7.9-10.6-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/><path class="st1" d="M75 118.5v-83l21 13v70z"/><path style="fill-rule:evenodd;clip-rule:evenodd;fill:#26477b" d="M99 118.5v-69l11.5 7 10.5-7v69z"/><path class="st1" d="M124 118.5v-70l21-13v83z"/></g></svg>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<!-- Off Canvas Menu -->
|
||||
<aside class="left-off-canvas-menu">
|
||||
<ul class="off-canvas-list">
|
||||
<li class="left-off-canvas-toggle get_file_explorer show-for-small-only" class="get_file_explorer" id="file_explorer">
|
||||
<label>File Explorer</label>
|
||||
</li>
|
||||
<li class="left-off-canvas-toggle get_all_playlists show-for-small-only" id="all_playlists">
|
||||
<label>Playlists</label>
|
||||
</li>
|
||||
<li class="left-off-canvas-toggle get_all_albums show-for-small-only" id="all_albums">
|
||||
<label>Albums</label>
|
||||
</li>
|
||||
<li class="left-off-canvas-toggle get_all_artists show-for-small-only" id="all_artists">
|
||||
<label>Artists</label>
|
||||
</li>
|
||||
<li class="left-off-canvas-toggle get_rated_songs show-for-small-only">
|
||||
<label>Rated</label>
|
||||
</li>
|
||||
<li class="left-off-canvas-toggle" id="manage_database">
|
||||
<label>Database</label>
|
||||
</li>
|
||||
<!-- <li class="left-off-canvas-toggle" id="search_database"><label>Search</label></li> -->
|
||||
<li class="left-off-canvas-toggle" id="jukebox_mode">
|
||||
<label>Jukebox</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="db-status-bar">
|
||||
<p class="scan-status metadata-panel-text"></p>
|
||||
<!-- DB Status -->
|
||||
<p class="scan-status-files metadata-panel-text"></p>
|
||||
<!-- Number of Files -->
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="main-section">
|
||||
<!-- content goes in here -->
|
||||
<div class="row ohidden">
|
||||
<!-- Left Nav Menu -->
|
||||
<div id="responsive-left-nav" class="responsive-left-nav hide-on-small">
|
||||
<div class="left-nav-menu-header">Music</div>
|
||||
<ul class="left-nav-menu">
|
||||
<li class="get_file_explorer">
|
||||
<?xml version="1.0" encoding="utf-8"?><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 40 40" style="enable-background:new 0 0 48 48"><path d="M16.516 20.688C16.266 21.25 12 31.906 12 31.906V17c0-.55.45-1 1-1h1.334l.35-1.052C14.857 14.427 15.45 14 16 14h5c.55 0 1.143.427 1.316.948l.35 1.052H32c.55 0 1 .45 1 1v3H17.5c-.275 0-.734.125-.984.688zM41 21H19c-.55 0-1.167.418-1.371.929l-5.258 13.143c-.204.51.079.928.629.928h22c.55 0 1.167-.418 1.371-.929l5.258-13.143c.204-.51-.079-.928-.629-.928z"/></svg>
|
||||
File Explorer
|
||||
</li>
|
||||
<li class="get_all_playlists">
|
||||
<span class="list-icon"><?xml version="1.0" encoding="utf-8"?><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="8 5 38 38" style="enable-background:new 0 0 48 48"><path d="M37.192 23.032c-.847.339-.179-.339-.179-.339s1.422-2.092.406-3.786c-.793-1.321-3.338-1.075-4.42-1.669v14.154c0 .037-.016.07-.022.106-.154 1.504-1.607 3.034-3.696 3.712-2.559.829-5.102.063-5.678-1.711-.574-1.774 1.034-3.887 3.595-4.717.66-.189 2.207-.439 2.801-.193V12.607a.609.609 0 0 1 .608-.607h1.785c.336 0 .608.273.608.607v.549c1.542 1.004 6.18 1.455 6.851 4.139.805 3.225-1.813 5.398-2.659 5.737zM12.5 20H28v-3H12.5c-.275 0-.5.225-.5.5v2c0 .275.225.5.5.5zm0 6H28v-3H12.5c-.275 0-.5.225-.5.5v2c0 .275.225.5.5.5zm10.125 3H12.5c-.275 0-.5.225-.5.5v2c0 .275.225.5.5.5h8.551c.176-1.075.728-2.113 1.574-3z"/></svg></span>
|
||||
Playlists
|
||||
</li>
|
||||
<li class="get_all_albums">
|
||||
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="10 12 28 28" style="enable-background:new 0 0 48 48"><path d="M11 17v14a1 1 0 0 1-1-1V18a1 1 0 0 1 1-1zM37 17v14a1 1 0 0 0 1-1V18a1 1 0 0 0-1-1zM13 16h1v16h-1a1 1 0 0 1-1-1V17a1 1 0 0 1 1-1zM35 16h-1v16h1a1 1 0 0 0 1-1V17a1 1 0 0 0-1-1zM32 15H16c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V16c0-.55-.45-1-1-1zm-3 12c0 1.469-2.022 1.71-2.301 1.71-.846 0-1.55-.395-1.752-1.02-.276-.852.461-1.796 1.607-2.218.649-.238 1.446-.155 1.446-.146v-4.407l-6 1.369V28c0 1.813-2.102 2.057-2.417 2.057-.816 0-1.44-.374-1.629-.955-.271-.835.441-1.77 1.603-2.174.646-.225 1.443-.137 1.443-.131v-6.604c0-.245.072-.469.291-.529l7.491-1.854-.039-.01c.218 0 .257.169.257.393V27z"/></svg>
|
||||
Albums
|
||||
</li>
|
||||
<li class="get_all_artists">
|
||||
<?xml version="1.0" encoding="utf-8"?><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M611.4 34.4c92-46.8 206.7-25.7 276.3 58.1 66.9 80.5 71.4 193.8 18.5 278.4-13.2.1-27-2.3-41.2-6.6-56-17.1-114.7-64.1-161.8-122.1-47.3-58.2-82-126-90.1-184.6-1-8-1.6-15.7-1.7-23.2zM146.8 678c-.7 41.6 19.8 64.6 59 71l431.9-297.1C578.1 413.3 527.3 349.7 501 282.7L146.8 678zm14.1 94.3c-35.9 38.4-46.8 78.1-38.3 107.7 3.5 12.1 10.4 22.5 20.2 30.3 10.4 8.3 24.5 13.8 41.6 15.3 58.5 5.1 146-33.6 248.3-150.9 102.8-118 195.4-173.9 271.3-187.5 45.9-8.2 86.3-1.4 119.7 16.6 33.4 18 59.4 47 76.7 83.1 27 56.4 32.6 130.2 12 205.2l-60-17.2c16.3-59.8 12.6-117.4-7.9-160-11.5-24-28.4-43.1-49.8-54.6-21.5-11.5-48.3-15.8-79.9-10.1-63.2 11.4-143 61-235.4 167-117.5 134.9-224.8 178.7-300 172.2-29.6-2.6-54.8-12.8-74.6-28.4-20.4-16.1-34.7-37.9-41.9-63.2-14.3-50.1.3-113.2 53.1-169.7l44.9 44.2zM871.5 412c-69.8-23.6-139.6-79.4-194.4-146.8-49.9-61.3-88.3-133.3-103.8-200.3-41 51.7-57.7 118-48.6 181.6 25.1 77.2 90.1 157.1 162.7 191.2 60.8 18 127.9 10 184.1-25.7z"/></svg>
|
||||
Artists
|
||||
</li>
|
||||
<li class="get_rated_songs">
|
||||
<?xml version="1.0" encoding="iso-8859-1"?><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="-3 0 62 62" style="enable-background:new 0 0 53.867 53.867"><path style="fill:#efce4a" d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/></svg>
|
||||
Rated
|
||||
</li>
|
||||
<li v-bind:class="{ 'aux-button-active-2': jukebox.live }" class="jukebox_mode">
|
||||
<svg v-bind:class="{ 'aux-button-active-2': jukebox.live }" height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 65 65" enable-background="new 0 0 65 65" xml:space="preserve"><g><path d="M36.1,14.4c-1.4-1.4-3.9-1.4-5.3,0L1.1,44.1c-1.4,1.4-1.4,3.8,0,5.3l14.5,14.5c0.7,0.7,1.6,1.1,2.6,1.1 c1,0,1.9-0.4,2.6-1.1l29.7-29.7c1.5-1.4,1.5-3.8,0-5.3L36.1,14.4z M49.5,33.2L19.8,62.9c-0.8,0.8-2.3,0.8-3.2,0L2.1,48.3 c-0.9-0.9-0.9-2.3,0-3.2l29.7-29.7c0.4-0.4,1-0.7,1.6-0.7c0.6,0,1.2,0.2,1.6,0.7L49.5,30C50.4,30.9,50.4,32.3,49.5,33.2z"></path><rect x="32.4" y="19.5" transform="matrix(0.707 0.7072 -0.7072 0.707 24.3992 -18.4628)" width="4.2" height="1.5"></rect><rect x="42.7" y="29.8" transform="matrix(-0.7072 -0.707 0.707 -0.7072 54.8735 83.7577)" width="4.2" height="1.5"></rect><rect x="14.7" y="37.1" transform="matrix(0.7071 0.7071 -0.7071 0.7071 31.7025 -0.8228)" width="4.2" height="1.5"></rect><rect x="25" y="47.4" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 12.2855 101.3977)" width="4.2" height="1.5"></rect><rect x="19.9" y="42.3" transform="matrix(0.7071 0.7071 -0.7071 0.7071 36.8513 -2.9555)" width="4.2" height="1.5"></rect><rect x="11.7" y="40.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 32.9629 2.2207)" width="4.2" height="1.5"></rect><rect x="22" y="50.5" transform="matrix(-0.707 -0.7072 0.7072 -0.707 4.9277 104.4377)" width="4.2" height="1.5"></rect><rect x="16.8" y="45.3" transform="matrix(0.7071 0.7071 -0.7071 0.7071 38.1117 8.766792e-002)" width="4.2" height="1.5"></rect><rect x="8.6" y="43.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 34.2235 5.2638)" width="4.2" height="1.5"></rect><rect x="18.9" y="53.5" transform="matrix(-0.7072 -0.707 0.707 -0.7072 -2.4064 107.4868)" width="4.2" height="1.5"></rect><rect x="13.8" y="48.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 -7.5673 95.0498)" width="4.2" height="1.5"></rect><rect x="10.8" y="51.4" transform="matrix(-0.7072 -0.707 0.707 -0.7072 -14.9034 98.0997)" width="4.2" height="1.5"></rect><path d="M35.4,38.8c-1.1,1.1-2.4,1.7-3.9,1.9l0.2,1.5c1.8-0.2,3.5-1,4.8-2.3c1.3-1.3,2.1-3,2.3-4.8l-1.5-0.2 C37.1,36.4,36.5,37.8,35.4,38.8z"></path><path d="M31.7,26.2l-0.2,1.5c1.5,0.2,2.8,0.8,3.9,1.9c1.1,1.1,1.7,2.4,1.9,3.9l1.5-0.2c-0.2-1.8-1-3.5-2.3-4.8 C35.2,27.2,33.5,26.4,31.7,26.2z"></path><path d="M26.2,29.6c1.1-1.1,2.4-1.7,3.9-1.9l-0.2-1.5c-1.8,0.2-3.5,1-4.8,2.3c-1.3,1.3-2.1,3-2.3,4.8l1.5,0.2 C24.5,32,25.1,30.6,26.2,29.6z"></path><path d="M24.3,34.9l-1.5,0.2c0.2,1.8,1,3.5,2.3,4.8c1.3,1.3,3,2.1,4.8,2.3l0.2-1.5c-1.5-0.2-2.9-0.8-3.9-1.9 C25.1,37.8,24.5,36.4,24.3,34.9z"></path><path d="M43.4,0v1.5c11.1,0,20.1,9,20.1,20.1H65C65,9.7,55.3,0,43.4,0z"></path><path d="M43.4,7.4v1.5c7,0,12.7,5.7,12.7,12.7h1.5C57.6,13.8,51.2,7.4,43.4,7.4z"></path><path d="M48.6,21.6h1.5c0-3.7-3-6.7-6.7-6.7v1.5C46.3,16.4,48.6,18.7,48.6,21.6z"></path></g></svg>
|
||||
Jukebox
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Overlay with metadata -->
|
||||
<div id="main-overlay" class="hide main-overlay">
|
||||
<div class="hide" id="presetControls">
|
||||
<div>Preset: <select id="presetSelect"></select></div>
|
||||
</div>
|
||||
<canvas id="viz-canvas">
|
||||
</canvas>
|
||||
<div class="left-nav-menu-header">System</div>
|
||||
<ul class="left-nav-menu">
|
||||
<li class="mobile-panel">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
Mobile
|
||||
</li>
|
||||
<li class="db-panel">
|
||||
<svg viewBox="-140 140 1024 768" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M384 960C171.969 960 0 902.625 0 832V704c0-11.125 5.562-21.688 13.562-32C56.375 727.125 205.25 768 384 768s327.625-40.875 370.438-96c8 10.312 13.562 20.875 13.562 32v128c0 70.625-172 128-384 128zm0-256C171.969 704 0 646.625 0 576V448c0-6.781 2.562-13.375 6-19.906C7.938 424 10.5 419.969 13.562 416 56.375 471.094 205.25 512 384 512s327.625-40.906 370.438-96c3.062 3.969 5.625 8 7.562 12.094 3.438 6.531 6 13.125 6 19.906v128c0 70.625-172 128-384 128zm0-256C171.969 448 0 390.656 0 320v-64-64C0 121.344 171.969 64 384 64c212 0 384 57.344 384 128v128c0 70.656-172 128-384 128zm0-320c-141.375 0-256 28.594-256 64s114.625 64 256 64 256-28.594 256-64-114.625-64-256-64z"/></svg>
|
||||
Database
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="db-status-bar">
|
||||
<p class="scan-status metadata-panel-text"></p>
|
||||
<p class="scan-status-files metadata-panel-text"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- content goes in here -->
|
||||
<div class="row ohidden player-body">
|
||||
|
||||
<!-- Tabs for Mobile -->
|
||||
<dl class="tabs show-for-small-only" data-tab>
|
||||
<dd class="active">
|
||||
<a class="panel_one_name" href="#panel1">Library</a>
|
||||
<dl class="tabs show-for-small-only">
|
||||
<dd class="active activate-panel-1">
|
||||
<a class="panel_one_name" href="javascript:void(0);">Library</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="#panel2">Now Playing</a>
|
||||
<dd class="activate-panel-2">
|
||||
<a href="javascript:void(0);">Now Playing</a>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<div class="tabs-content">
|
||||
|
||||
<div class="content active" id="panel1">
|
||||
<div id="libraryColumn" class="large-12 columns libraryColumn">
|
||||
<div class="columnHeader">
|
||||
|
||||
<div class="libraryHeaderContainer">
|
||||
<div class="large-12 medium-12 small-12 columns noPaddingLeft">
|
||||
<h3 class="panel_one_name noselect hide-for-small"> </h3>
|
||||
@ -198,21 +209,18 @@
|
||||
|
||||
<div id="directory_bar" class="clear directoryTitle">
|
||||
<button class="backButton noselect tiny">
|
||||
<img src="/public/img/glyphicons/png/glyphicons_435_undo.png" alt="Back" width="15" height="15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="12 14 24 24" alt="Back" width="15" height="15"><g><path d="M36 29.131c-2.813-4.089-9-3.979-14.465-2.018l1.232 3.926c.067.217-.058.328-.27.251l-10.17-3.766c-.212-.076-.281-.294-.151-.479l6.196-8.903c.13-.185.296-.162.365.053 0 0 .904 2.852 1.127 3.592C29 19.529 35.471 24.294 36 29.131z"/></g></svg>
|
||||
</button>
|
||||
<h4 class="directoryName"></h4>
|
||||
<!-- Current Directory -->
|
||||
<input id="search_folders" class="hide">
|
||||
<a title="Search" id="search-explorer" class="noselect hover-fill">
|
||||
<img src="/public/img/glyphicons/search.png" alt="" width="27" height="27">
|
||||
<svg viewBox="-150 -150 1224 1174" height="27" width="27" xmlns="http://www.w3.org/2000/svg"><path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.969 596 0 384 0 171.969 0 0 171.969 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64c17.5-17.5 17.5-46.5 0-64zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256-114.625 256-256 256z"/></svg>
|
||||
</a>
|
||||
<a title="Add All Songs to Playlist" class="noselect add hover-fill" id='addall'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="8 6 34 34"><g><path d="M36 35.5c0 .275-.225.5-.5.5h-23a.501.501 0 0 1-.5-.5s.019-10.651.033-10.693l3.723-11.316c.088-.269.387-.49.665-.49H27v3h-9.063l-3.032 9H19l2 5h6l2-5h4.095l-1.347-4h2.973l1.246 3.807C35.98 24.849 36 35.5 36 35.5zM34 9c-2.761 0-5 2.016-5 5 0 3.206 2.239 5 5 5 2.762 0 5-2.238 5-5s-2.238-5-5-5zm3 5.5c0 .275-.225.5-.5.5H35v1.5c0 .275-.225.5-.5.5h-1a.501.501 0 0 1-.5-.5V15h-1.5a.501.501 0 0 1-.5-.5v-1c0-.275.225-.5.5-.5H33v-1.5c0-.275.225-.5.5-.5h1c.275 0 .5.225.5.5V13h1.5c.275 0 .5.225.5.5v1z"/></g></svg>
|
||||
</a>
|
||||
<div class="controls leftControls">
|
||||
<a title="Add Directory to Playlist" class="noselect add" id='addall'>
|
||||
<img src="/public/img/glyphicons/png/glyphicons_131_inbox_plus.png" alt="" width="27" height="27">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Upload progress bar-->
|
||||
@ -238,10 +246,6 @@
|
||||
</div>
|
||||
<!-- /6 columns -->
|
||||
|
||||
|
||||
<!-- close the off-canvas menu -->
|
||||
<a class="exit-off-canvas"></a>
|
||||
|
||||
<script type="text/javascript" src="/public/js/lib/lazy-load.js"></script>
|
||||
<script>
|
||||
// Lazy load all images in scroallable areas
|
||||
|
||||
Loading…
Reference in New Issue
Block a user