Merge pull request #769 from chme/webupdate

Small fixes for the player web interface

web-src/src/App.vue

@@ -3,7 +3,8 @@
     <navbar-top />
     <vue-progress-bar class="fd-progress-bar" />
     <transition name="fade">
-      <router-view v-show="!show_burger_menu" />
+      <!-- Setting v-show to true on the router-view tag avoids jumpiness during transitions -->
+      <router-view v-show="true" />
     </transition>
     <notifications v-show="!show_burger_menu" />
     <navbar-bottom v-show="!show_burger_menu" />
@@ -181,9 +182,6 @@ export default {
   },
 
   watch: {
-    '$route' (to, from) {
-      this.$store.commit(types.SHOW_BURGER_MENU, false)
-    },
     'show_burger_menu' () {
       if (this.show_burger_menu) {
         document.querySelector('html').classList.add('is-clipped')

web-src/src/components/ModalDialogAlbum.vue

@@ -61,10 +61,7 @@ export default {
 
   computed: {
     artwork_url: function () {
-      if (this.album.artwork_url && this.album.artwork_url.startsWith('/')) {
+      return webapi.artwork_url_append_size_params(this.album.artwork_url)
-        return this.album.artwork_url + '?maxwidth=600&maxheight=600'
-      }
-      return this.album.artwork_url
     }
   },
 

web-src/src/components/NavbarItemLink.vue

@@ -0,0 +1,32 @@
+<template>
+  <a class="navbar-item" :class="{ 'is-active': is_active }" @click="open_link()" :href="full_path()">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+import * as types from '@/store/mutation_types'
+
+export default {
+  name: 'NavbarItemLink',
+  props: [ 'to' ],
+
+  computed: {
+    is_active () {
+      return this.$route.path.startsWith(this.to)
+    }
+  },
+
+  methods: {
+    open_link: function () {
+      this.$store.commit(types.SHOW_BURGER_MENU, false)
+      this.$router.push({ path: this.to })
+    },
+
+    full_path: function () {
+      const resolved = this.$router.resolve(this.to)
+      return resolved.href
+    }
+  }
+}
+</script>

web-src/src/components/NavbarItemOutput.vue

@@ -29,7 +29,7 @@ import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
 export default {
-  name: 'NavBarItemOutput',
+  name: 'NavbarItemOutput',
   components: { RangeSlider },
 
   props: [ 'output' ],

web-src/src/components/NavbarTop.vue

@@ -1,24 +1,24 @@
 <template>
   <nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <router-link to="/playlists" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/playlists">
         <span class="icon"><i class="mdi mdi-library-music"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/music" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/music">
         <span class="icon"><i class="mdi mdi-music"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/podcasts" class="navbar-item" active-class="is-active" v-if="podcasts.tracks > 0">
+      <navbar-item-link to="/podcasts" v-if="podcasts.tracks > 0">
         <span class="icon"><i class="mdi mdi-microphone"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
+      <navbar-item-link to="/audiobooks" v-if="audiobooks.tracks > 0">
         <span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/files" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/files">
         <span class="icon"><i class="mdi mdi-folder-open"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/search" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/search">
         <span class="icon"><i class="mdi mdi-magnify"></i></span>
-      </router-link>
+      </navbar-item-link>
 
       <div class="navbar-burger" @click="update_show_burger_menu" :class="{ 'is-active': show_burger_menu }">
         <span></span>
@@ -26,16 +26,20 @@
         <span></span>
       </div>
     </div>
+
     <div class="navbar-menu" :class="{ 'is-active': show_burger_menu }">
       <div class="navbar-start">
       </div>
 
       <div class="navbar-end">
+
+        <!-- Outputs dropdown -->
         <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop">Volume</span></a>
+          <a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Volume</span></a>
 
           <div class="navbar-dropdown is-right">
             <div class="navbar-item">
+              <!-- Outputs: master volume -->
               <div class="level is-mobile">
                 <div class="level-left fd-expanded">
                   <div class="level-item" style="flex-grow: 0;">
@@ -59,9 +63,12 @@
                 </div>
               </div>
             </div>
-            <hr class="navbar-divider">
-            <nav-bar-item-output v-for="output in outputs" :key="output.id" :output="output"></nav-bar-item-output>
 
+            <!-- Outputs: master volume -->
+            <hr class="navbar-divider">
+            <navbar-item-output v-for="output in outputs" :key="output.id" :output="output"></navbar-item-output>
+
+            <!-- Outputs: stream volume -->
             <hr class="navbar-divider">
             <div class="navbar-item">
               <div class="level is-mobile">
@@ -87,6 +94,7 @@
               </div>
             </div>
 
+            <!-- Playback controls -->
             <hr class="navbar-divider">
             <div class="navbar-item">
               <div class="level is-mobile">
@@ -110,18 +118,20 @@
             </div>
           </div>
         </div>
+
+        <!-- Settings drop down -->
         <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop">Settings</span></a>
+          <a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Settings</span></a>
 
           <div class="navbar-dropdown is-right">
             <a class="navbar-item" href="/admin.html">Admin</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" v-on:click="open_about">
+            <navbar-item-link to="/about">
               <div>
                 <p class="title is-7">forked-daapd</p>
                 <p class="subtitle is-7">{{ config.version }}</p>
               </div>
-            </a>
+            </navbar-item-link>
           </div>
         </div>
       </div>
@@ -132,7 +142,8 @@
 <script>
 import webapi from '@/webapi'
 import _audio from '@/audio'
-import NavBarItemOutput from './NavBarItemOutput'
+import NavbarItemLink from './NavbarItemLink'
+import NavbarItemOutput from './NavbarItemOutput'
 import PlayerButtonPlayPause from './PlayerButtonPlayPause'
 import PlayerButtonNext from './PlayerButtonNext'
 import PlayerButtonPrevious from './PlayerButtonPrevious'
@@ -144,11 +155,10 @@ import * as types from '@/store/mutation_types'
 
 export default {
   name: 'NavbarTop',
-  components: { NavBarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
+  components: { NavbarItemLink, NavbarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
 
   data () {
     return {
-      search_query: '',
       old_volume: 0,
 
       playing: false,
@@ -204,11 +214,6 @@ export default {
       }
     },
 
-    open_about: function () {
-      this.$store.commit(types.SHOW_BURGER_MENU, false)
-      this.$router.push({ path: '/about' })
-    },
-
     setupAudio: function () {
       const a = _audio.setupAudio()
 

web-src/src/pages/PageNowPlaying.vue

@@ -107,10 +107,7 @@ export default {
     },
 
     artwork_url: function () {
-      if (this.now_playing.artwork_url && this.now_playing.artwork_url.startsWith('/')) {
+      return webapi.artwork_url_append_size_params(this.now_playing.artwork_url)
-        return this.now_playing.artwork_url + '?maxwidth=600&maxheight=600'
-      }
-      return this.now_playing.artwork_url
     }
   },
 

web-src/src/router/index.js

@@ -247,10 +247,9 @@ export const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (store.state.show_burger_menu) {
+  const burgerMenuVisible = store.state.show_burger_menu
+  if (burgerMenuVisible) {
     store.commit(types.SHOW_BURGER_MENU, false)
-    next(false)
-  } else {
-    next()
   }
+  next(!burgerMenuVisible)
 })

web-src/src/webapi/index.js

@@ -302,5 +302,15 @@ export default {
 
   spotify () {
     return axios.get('/api/spotify')
+  },
+
+  artwork_url_append_size_params (artworkUrl, maxwidth = 600, maxheight = 600) {
+    if (artworkUrl && artworkUrl.startsWith('/')) {
+      if (artworkUrl.includes('?')) {
+        return artworkUrl + '&maxwidth=' + maxwidth + '&maxheight=' + maxheight
+      }
+      return artworkUrl + '?maxwidth=' + maxwidth + '&maxheight=' + maxheight
+    }
+    return artworkUrl
   }
 }