<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>forked-daapd</title> <!-- Hosted libraries --> <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> --> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> --> <!-- Local libraries --> <link rel="stylesheet" href="admin/vendor/fontawesome/css/all.min.css"> <link rel="stylesheet" href="admin/vendor/bulma/bulma.min.css"> <link rel="stylesheet" href="admin/css/forked-daapd.css"> </head> <body> <div id="root" v-cloak> <!-- ############# Navbar ############# --> <nav class="navbar"> <div class="navbar-brand"> <a class="navbar-item has-text-black" href="./">forked-daapd</a> <a class="navbar-item" href="https://github.com/ejurgensen/forked-daapd" title="GitHub"><i class="fab fa-github"></i></a> </div> </nav> <!-- ############# Hero section ############# --> <section class="hero is-dark is-bold"> <div class="hero-body"> <div class="container"> <div class="columns"> <div class="column"> <nav class="level is-mobile"> <div class="level-item has-text-centered"> <div> <p class="heading">Artists</p> <p class="title is-size-6-mobile">{{ library.artists }}</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Albums</p> <p class="title is-size-6-mobile">{{ library.albums }}</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Songs</p> <p class="title is-size-6-mobile">{{ library.songs }}</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Total playtime</p> <p class="title is-size-6-mobile">{{ library.db_playtime | duration }}</p> </div> </div> </nav> </div> </div> <!-- columns --> </div><!-- container --> </div><!-- hero --> </section> <!-- ############# Status 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">Status</h1></div> </div> <!-- Library update --> <div class="columns is-centered fd-section-content"> <div class="column is-3"> <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-music"></i></span> Library </h2> </div> <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> <a class="button" v-on:click="update_meta" v-show="!library.updating">Rescan library</a> </div> </div> <!-- Pairing --> <div class="columns is-centered fd-section-content"> <div class="column is-3"> <h2 class="title is-5"><span class="icon"><i class="fa fa-mobile"></i></span> Remote Pairing</h2> </div> <div class="column is-7 content"> <!-- Paring request active --> <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> <!-- 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> <!-- Outputs --> <div class="columns is-centered fd-section-content"> <div class="column is-3"> <h2 class="title is-5"> <span class="icon"><i class="fa fa-volume-up"></i></span> Outputs </h2> </div> <div class="column is-7 content"> <div v-for="output in outputs"> <div class="field"> <div class="control"> <label class="checkbox"> <input type="checkbox" v-model="output.selected" v-on:change="selectOutputs"> {{ output.name }} </label> </div> </div> <form v-on:submit.prevent="kickoffVerification" style="margin-bottom:24px;" v-show="output.needs_auth_key"> <div class="field has-addons"> <div class="control"> <input class="input" type="text" placeholder="Enter verification code" v-model="verification_req.pin"> </div> <div class="control"> <button class="button is-primary" type="submit">Send</button> </div> </div> </form> </div> </div> </div> </div> </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="fab 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> <p v-if="spotify_missing_scope.length > 0" class="help is-danger">Please reauthorize Web API access to grant forked-daapd the following additional access rights: <b>{{ spotify_missing_scope | join }}</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="fab 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"> <div class="container"> <div class="content has-text-centered"> <p> <strong>forked-daapd</strong> - version {{ config.version }} </p> <p class="is-size-7">Compiled with support for {{ config.buildoptions | join }}.</p> <p class="is-size-7">Web interface built with <a href="http://bulma.io">Bulma</a>, <a href="http://fontawesome.io/">Font Awesome</a>, <a href="https://vuejs.org/">Vue.js</a>, <a href="https://github.com/mzabriskie/axios">axios</a>.</p> </div> </div> </footer> </div> <!-- #root --> <!-- Hosted libraries --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> --> <!-- <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script> --> <!-- Local libraries --> <script src="admin/vendor/vue/vue.min.js"></script> <script src="admin/vendor/axios/axios.min.js"></script> <script src="admin/js/forked-daapd.js"></script> </body> </html>