[htdocs] New layout and integration of Last.fm into the web interface
This commit is contained in:
chme
parent
f82b22042f
commit
ebcd4e48cf
|
|
@ -68,113 +68,158 @@
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
############# Content section #############
|
############# Status section #############
|
||||||
-->
|
-->
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<!-- Section-heading -->
|
||||||
|
<div class="columns is-centered fd-section-heading">
|
||||||
|
<div class="column is-10"><h1 class="is-uppercase is-size-7">Status</h1></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="column">
|
<!-- Library update -->
|
||||||
<div class="card">
|
<div class="columns is-centered fd-section-content">
|
||||||
<header class="card-header">
|
<div class="column is-3">
|
||||||
<p class="card-header-title">
|
<h2 class="title is-5">
|
||||||
<span class="icon" v-show="library.updating"><i class="fa fa-refresh fa-spin"></i></span>
|
<span class="icon" v-show="library.updating"><i class="fa fa-refresh fa-spin"></i>
|
||||||
<span class="icon" v-show="!library.updating"><i class="fa fa-refresh"></i></span>
|
</span><span class="icon" v-show="!library.updating"><i class="fa fa-music"></i></span>
|
||||||
Update library
|
Library
|
||||||
</p>
|
</h2>
|
||||||
</header>
|
</div>
|
||||||
<div class="card-content">
|
|
||||||
<div class="content">
|
|
||||||
Scan new and modified items into your library.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="card-footer">
|
|
||||||
<a class="card-footer-item is-primary" v-on:click="update" v-show="!library.updating">Update</a>
|
|
||||||
<span class="card-footer-item" v-show="library.updating">Update in progress ...</span>
|
|
||||||
</footer>
|
|
||||||
</div> <!-- card update library -->
|
|
||||||
</div> <!-- column -->
|
|
||||||
|
|
||||||
|
<div class="column is-7 content">
|
||||||
|
<a class="button" v-on:click="update" v-show="!library.updating">Update library</a>
|
||||||
|
<p v-show="library.updating">Update in progress ...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="column">
|
<!-- Pairing -->
|
||||||
<div class="card">
|
<div class="columns is-centered fd-section-content">
|
||||||
<header class="card-header">
|
<div class="column is-3">
|
||||||
<p class="card-header-title">
|
<h2 class="title is-5"><span class="icon"><i class="fa fa-mobile"></i></span> Remote Pairing</h2>
|
||||||
<span class="icon"><i class="fa fa-mobile"></i></span> Remote pairing
|
</div>
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="content" v-show="pairing.active">
|
|
||||||
<p>Remote pairing request from <b>{{pairing.remote}}</b></p>
|
|
||||||
<form v-on:submit.prevent="kickoffPairing">
|
|
||||||
<div class="field has-addons">
|
|
||||||
<div class="control">
|
|
||||||
<input class="input" type="text" placeholder="Enter pairing code" v-model="pairing_req.pin">
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button class="button is-primary" type="submit">Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="content" v-show="!pairing.active">
|
|
||||||
<p>No active pairing request.</p>
|
|
||||||
<a class="button" v-on:click="loadPairing" v-show="!config.websocket_port">Refresh</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> <!-- card remote pairing -->
|
|
||||||
</div> <!-- column -->
|
|
||||||
|
|
||||||
|
<div class="column is-7 content">
|
||||||
<div class="column">
|
<!-- Paring request active -->
|
||||||
<div class="card" v-show="spotify.enabled">
|
<div class="content" v-show="pairing.active">
|
||||||
<header class="card-header">
|
<p>Remote pairing request from <b>{{pairing.remote}}</b></p>
|
||||||
<p class="card-header-title">
|
<form v-on:submit.prevent="kickoffPairing">
|
||||||
<span class="icon"><i class="fa fa-spotify"></i></span> Spotify
|
<div class="field has-addons">
|
||||||
</p>
|
<div class="control">
|
||||||
</header>
|
<input class="input" type="text" placeholder="Enter pairing code" v-model="pairing_req.pin">
|
||||||
<div class="card-content">
|
|
||||||
<div class="content" v-show="!spotify.libspotify_installed">
|
|
||||||
<p><b>libspotify</b> is not installed (required for playing spotify tracks)</p>
|
|
||||||
</div>
|
|
||||||
<div class="content" v-show="spotify.libspotify_installed">
|
|
||||||
<div v-show="!spotify.libspotify_logged_in"><p><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs):</p>
|
|
||||||
<form v-on:submit.prevent="loginLibspotify">
|
|
||||||
<div class="field has-addons">
|
|
||||||
<div class="control">
|
|
||||||
<input class="input" type="text" placeholder="Username" v-model="libspotify.user">
|
|
||||||
<p class="help is-danger">{{ libspotify.errors.user }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<input class="input" type="password" placeholder="Password" v-model="libspotify.password">
|
|
||||||
<p class="help is-danger">{{ libspotify.errors.password }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button class="button" type="submit">Login</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="help is-danger">{{ libspotify.errors.error }}</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<p v-show="spotify.libspotify_logged_in"><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs): logged in as <b>{{ spotify.libspotify_user }}</b></p>
|
<div class="control">
|
||||||
<hr>
|
<button class="button is-primary" type="submit">Send</button>
|
||||||
<div v-show="!spotify.webapi_token_valid">
|
|
||||||
<p><b>Spotify Web API</b> access is required to add saved albums and playlists to your library.</p>
|
|
||||||
<a class="button" v-bind:href="spotify.oauth_uri">Authorize Web API access</a>
|
|
||||||
</div>
|
|
||||||
<div v-show="spotify.webapi_token_valid">
|
|
||||||
<p><b>Spotify Web API</b>: access authorized for <b>{{ spotify.webapi_user }}</b></p>
|
|
||||||
<a class="button" v-bind:href="spotify.oauth_uri">Reauthorize Web API access</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div> <!-- card spotify -->
|
</div>
|
||||||
</div> <!-- column -->
|
<!-- No pairing requests -->
|
||||||
|
<div class="content" v-show="!pairing.active">
|
||||||
|
<p>No active pairing request.</p>
|
||||||
|
<a class="button" v-on:click="loadPairing" v-show="!config.websocket_port">Refresh</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div> <!-- columns -->
|
</div>
|
||||||
</div> <!-- container -->
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
############# Online accounts & services section #############
|
||||||
|
-->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Section-heading -->
|
||||||
|
<div class="columns is-centered fd-section-heading">
|
||||||
|
<div class="column is-10"><h1 class="is-uppercase is-size-7">Online accounts & services</h1></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Spotify -->
|
||||||
|
<div class="columns is-centered fd-section-content" v-show="spotify.enabled">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h2 class="title is-5"><span class="icon"><i class="fa fa-spotify"></i></span> Spotify</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-7 content">
|
||||||
|
<div class="content" v-show="!spotify.libspotify_installed">
|
||||||
|
<p><b>libspotify</b> is not installed (required for playing spotify tracks)</p>
|
||||||
|
</div>
|
||||||
|
<div class="content" v-show="spotify.libspotify_installed">
|
||||||
|
<!-- libspotify -->
|
||||||
|
<div v-show="!spotify.libspotify_logged_in"><p><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs)</p>
|
||||||
|
<form v-on:submit.prevent="loginLibspotify">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" placeholder="Username" v-model="libspotify.user">
|
||||||
|
<p class="help is-danger">{{ libspotify.errors.user }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="password" placeholder="Password" v-model="libspotify.password">
|
||||||
|
<p class="help is-danger">{{ libspotify.errors.password }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button" type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="help is-danger">{{ libspotify.errors.error }}</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<p v-show="spotify.libspotify_logged_in"><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs): logged in as <b>{{ spotify.libspotify_user }}</b></p>
|
||||||
|
<!-- Spotify web api -->
|
||||||
|
<div v-show="!spotify.webapi_token_valid">
|
||||||
|
<p><b>Spotify Web API</b> access is required to add saved albums and playlists to your library.</p>
|
||||||
|
<a class="button" v-bind:href="spotify.oauth_uri">Authorize Web API access</a>
|
||||||
|
</div>
|
||||||
|
<div v-show="spotify.webapi_token_valid">
|
||||||
|
<p><b>Spotify Web API</b>: access authorized for <b>{{ spotify.webapi_user }}</b></p>
|
||||||
|
<a class="button" v-bind:href="spotify.oauth_uri">Reauthorize Web API access</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Last.fm -->
|
||||||
|
<div class="columns is-centered fd-section-content" v-show="lastfm.enabled">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h2 class="title is-5"><span class="icon"><i class="fa fa-lastfm"></i></span> Last.fm</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-7 content">
|
||||||
|
<!-- Scrobbling enabled -->
|
||||||
|
<div class="content" v-show="lastfm.scrobbling_enabled">
|
||||||
|
<a class="button" v-on:click="logoutLastfm">Stop scrobbling</a>
|
||||||
|
</div>
|
||||||
|
<!-- Scrobbling NOT enabled -->
|
||||||
|
<div class="content" v-show="!lastfm.scrobbling_enabled">
|
||||||
|
<p><b>Last.fm</b> (enable scrobbling)</p>
|
||||||
|
<form v-on:submit.prevent="loginLastfm">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" placeholder="Username" v-model="lastfm_login.user">
|
||||||
|
<p class="help is-danger">{{ lastfm_login.errors.user }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="password" placeholder="Password" v-model="lastfm_login.password">
|
||||||
|
<p class="help is-danger">{{ lastfm_login.errors.password }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button" type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="help is-danger">{{ lastfm_login.errors.error }}</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
############# Footer #############
|
||||||
|
-->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="content has-text-centered">
|
<div class="content has-text-centered">
|
||||||
|
|
@ -190,7 +235,7 @@
|
||||||
|
|
||||||
</div> <!-- #root -->
|
</div> <!-- #root -->
|
||||||
|
|
||||||
<script src="/js/vue.min.js"></script>
|
<script src="/js/vue.js"></script>
|
||||||
<script src="/js/axios.min.js"></script>
|
<script src="/js/axios.min.js"></script>
|
||||||
<script src="/js/forked-daapd.js"></script>
|
<script src="/js/forked-daapd.js"></script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,10 @@
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fd-section-heading {
|
||||||
|
margin-bottom: 24px !important;
|
||||||
|
}
|
||||||
|
.fd-section-content + .fd-section-content {
|
||||||
|
margin-top: 24px !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,9 @@ var app = new Vue({
|
||||||
spotify: {},
|
spotify: {},
|
||||||
pairing: {},
|
pairing: {},
|
||||||
pairing_req: { pin: '' },
|
pairing_req: { pin: '' },
|
||||||
libspotify: { user: '', password: '', errors: { user: '', password: '', error: '' } }
|
libspotify: { user: '', password: '', errors: { user: '', password: '', error: '' } },
|
||||||
|
lastfm: {},
|
||||||
|
lastfm_login: { user: '', password: '', errors: { user: '', password: '', error: '' } }
|
||||||
},
|
},
|
||||||
|
|
||||||
created: function () {
|
created: function () {
|
||||||
|
|
@ -16,6 +18,7 @@ var app = new Vue({
|
||||||
this.loadLibrary();
|
this.loadLibrary();
|
||||||
this.loadSpotify();
|
this.loadSpotify();
|
||||||
this.loadPairing();
|
this.loadPairing();
|
||||||
|
this.loadLastfm();
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -37,6 +40,10 @@ var app = new Vue({
|
||||||
axios.get('/api/pairing').then(response => this.pairing = response.data);
|
axios.get('/api/pairing').then(response => this.pairing = response.data);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
loadLastfm: function() {
|
||||||
|
axios.get('/api/lastfm').then(response => this.lastfm = response.data);
|
||||||
|
},
|
||||||
|
|
||||||
update: function() {
|
update: function() {
|
||||||
this.library.updating = true;
|
this.library.updating = true;
|
||||||
axios.get('/api/update').then(console.log('Library is updating'));
|
axios.get('/api/update').then(console.log('Library is updating'));
|
||||||
|
|
@ -66,6 +73,29 @@ var app = new Vue({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
loginLastfm: function() {
|
||||||
|
axios.post('/api/lastfm-login', this.lastfm_login).then(response => {
|
||||||
|
this.lastfm_login.user = '';
|
||||||
|
this.lastfm_login.password = '';
|
||||||
|
this.lastfm_login.errors.user = '';
|
||||||
|
this.lastfm_login.errors.password = '';
|
||||||
|
this.lastfm_login.errors.error = '';
|
||||||
|
if (!response.data.success) {
|
||||||
|
this.lastfm_login.errors.user = response.data.errors.user;
|
||||||
|
this.lastfm_login.errors.password = response.data.errors.password;
|
||||||
|
this.lastfm_login.errors.error = response.data.errors.error;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
logoutLastfm: function() {
|
||||||
|
axios.get('/api/lastfm-logout', this.lastfm_login).then(response => {
|
||||||
|
if (!this.config.websocket_port) {
|
||||||
|
this.loadLastfm();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
connect: function() {
|
connect: function() {
|
||||||
if (this.config.websocket_port <= 0) {
|
if (this.config.websocket_port <= 0) {
|
||||||
console.log('Websocket disabled');
|
console.log('Websocket disabled');
|
||||||
|
|
@ -74,7 +104,7 @@ var app = new Vue({
|
||||||
var socket = new WebSocket('ws://' + document.domain + ':' + this.config.websocket_port, 'notify');
|
var socket = new WebSocket('ws://' + document.domain + ':' + this.config.websocket_port, 'notify');
|
||||||
const vm = this;
|
const vm = this;
|
||||||
socket.onopen = function() {
|
socket.onopen = function() {
|
||||||
socket.send(JSON.stringify({ notify: ['update', 'pairing', 'spotify']}));
|
socket.send(JSON.stringify({ notify: ['update', 'pairing', 'spotify', 'lastfm']}));
|
||||||
socket.onmessage = function(response) {
|
socket.onmessage = function(response) {
|
||||||
console.log(response.data); // upon message
|
console.log(response.data); // upon message
|
||||||
var data = JSON.parse(response.data);
|
var data = JSON.parse(response.data);
|
||||||
|
|
@ -87,6 +117,9 @@ var app = new Vue({
|
||||||
if (data.notify.includes('spotify')) {
|
if (data.notify.includes('spotify')) {
|
||||||
vm.loadSpotify();
|
vm.loadSpotify();
|
||||||
}
|
}
|
||||||
|
if (data.notify.includes('lastfm')) {
|
||||||
|
vm.loadLastfm();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue