Merge pull request #832 from chme/webupdate

Update player web interface to v0.5.6

htdocs/player/css/app.css

@@ -1,2 +1,2 @@
-.fd-notifications{position:fixed;bottom:60px;z-index:20000;width:100%}.fd-notifications .notification{margin-bottom:10px;margin-left:24px;margin-right:24px;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.slider{min-width:250px;width:100%}.range-slider-fill{background-color:#363636}.track-progress{margin:0;padding:0;min-width:250px;width:100%}.track-progress .range-slider-knob{visibility:hidden}.track-progress .range-slider-fill{background-color:#3273dc;height:2px}.track-progress .range-slider-rail{background-color:#fff}.media.with-progress h2:last-of-type{margin-bottom:6px}.media.with-progress{margin-top:0}a.navbar-item{outline:0;line-height:1.5;padding:.5rem 1rem}.fd-expanded{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.fd-margin-left-auto{margin-left:auto}.fd-has-action{cursor:pointer}.fd-is-movable{cursor:move}.fd-has-margin-top{margin-top:24px}.fd-has-margin-bottom{margin-bottom:24px}.fd-remove-padding-bottom{padding-bottom:0}.fd-has-padding-left-right{padding-left:24px;padding-right:24px}.fd-is-square .button{height:27px;width:27px}.fd-is-text-clipped{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-is-fullheight{height:calc(100vh - 6.5rem)}.fd-is-fullheight-body{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;height:100%}.fd-image-fullheight{height:100%;width:auto}.fd-tabs-section{padding-bottom:3px;padding-top:3px;background:#fff;top:3.25rem;z-index:20;position:fixed;width:100%}section.fd-tabs-section+section.fd-content{margin-top:24px}.fd-progress-bar{top:52px!important}.fd-has-shadow{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.sortable-chosen .media-right{visibility:hidden}.sortable-ghost h1,.sortable-ghost h2{color:#ff3860!important}.media:first-of-type{padding-top:17px;margin-top:16px}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .4s;transition:opacity .4s}.fade-enter,.fade-leave-to{opacity:0}.seek-slider{min-width:250px;max-width:500px;width:100%!important}.seek-slider .range-slider-fill{background-color:#00d1b2;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.seek-slider .range-slider-knob{width:10px;height:10px;background-color:#00d1b2;border-color:#00d1b2}.title:not(.is-spaced)+.subtitle,.title:not(.is-spaced)+.subtitle+.subtitle{margin-top:-1.3rem!important}.fd-modal-card{overflow:visible}.fd-modal-card .card-content{max-height:calc(100vh - 200px);overflow:auto}.fd-modal-card .card{margin-left:16px;margin-right:16px}
+.fd-notifications{position:fixed;bottom:60px;z-index:20000;width:100%}.fd-notifications .notification{margin-bottom:10px;margin-left:24px;margin-right:24px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.slider{min-width:250px;width:100%}.range-slider-fill{background-color:#363636}.track-progress{margin:0;padding:0;min-width:250px;width:100%}.track-progress .range-slider-knob{visibility:hidden}.track-progress .range-slider-fill{background-color:#3273dc;height:2px}.track-progress .range-slider-rail{background-color:#fff}.media.with-progress h2:last-of-type{margin-bottom:6px}.media.with-progress{margin-top:0}a.navbar-item{outline:0;line-height:1.5;padding:.5rem 1rem}.fd-expanded{-webkit-box-flex:1;flex-grow:1;flex-shrink:1}.fd-margin-left-auto{margin-left:auto}.fd-has-action{cursor:pointer}.fd-is-movable{cursor:move}.fd-has-margin-top{margin-top:24px}.fd-has-margin-bottom{margin-bottom:24px}.fd-remove-padding-bottom{padding-bottom:0}.fd-has-padding-left-right{padding-left:24px;padding-right:24px}.fd-is-square .button{height:27px;width:27px}.fd-is-text-clipped{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-is-fullheight{height:calc(100vh - 6.5rem)}.fd-is-fullheight-body{flex-shrink:1;overflow:hidden;height:100%}.fd-image-fullheight{height:100%;width:auto}.fd-tabs-section{padding-bottom:3px;padding-top:3px;background:#fff;top:3.25rem;z-index:20;position:fixed;width:100%}section.fd-tabs-section+section.fd-content{margin-top:24px}.fd-progress-bar{top:52px!important}.fd-has-shadow{box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.sortable-chosen .media-right{visibility:hidden}.sortable-ghost h1,.sortable-ghost h2{color:#ff3860!important}.media:first-of-type{padding-top:17px;margin-top:16px}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .4s;transition:opacity .4s}.fade-enter,.fade-leave-to{opacity:0}.seek-slider{min-width:250px;max-width:500px;width:100%!important}.seek-slider .range-slider-fill{background-color:#00d1b2;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.seek-slider .range-slider-knob{width:10px;height:10px;background-color:#00d1b2;border-color:#00d1b2}.title:not(.is-spaced)+.subtitle,.title:not(.is-spaced)+.subtitle+.subtitle{margin-top:-1.3rem!important}.fd-modal-card{overflow:visible}.fd-modal-card .card-content{max-height:calc(100vh - 200px);overflow:auto}.fd-modal-card .card{margin-left:16px;margin-right:16px}
 /*# sourceMappingURL=app.css.map */

web-src/.gitignore

@@ -62,3 +62,6 @@ typings/
 
 # dist directory
 dist/
+
+# Visual Studio Code files
+.vscode/

web-src/package-lock.json

@@ -13935,6 +13935,11 @@
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
       "dev": true
     },
+    "v-click-outside": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.4.tgz",
+      "integrity": "sha512-NbQiwRjJjeKptI1qr1co2Ox44fUWEnj08chR1nw3DVrNCQHjb+sqlevzb1zCXMgb7orTFE0wpiecqMlbOZ15EQ=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

web-src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forked-daapd-web",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "forked-daapd web interface",
   "author": "chme <christian.meffert@googlemail.com>",
   "license": "GPL-2.0",
@@ -20,6 +20,7 @@
     "npm": "^6.11.2",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.2.0",
+    "v-click-outside": "^2.1.4",
     "vue": "^2.6.10",
     "vue-infinite-loading": "^2.4.4",
     "vue-progressbar": "^0.7.5",

web-src/src/components/NavbarBottom.vue

@@ -12,7 +12,7 @@
           </p>
         </div>
       </router-link>
-      <player-button-play-pause class="navbar-item fd-margin-left-auto" icon_style="mdi-36px"></player-button-play-pause>
+      <player-button-play-pause class="navbar-item fd-margin-left-auto" icon_style="mdi-36px" show_disabled_message></player-button-play-pause>
     </div>
   </nav>
 </template>

web-src/src/components/NavbarItemLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a class="navbar-item" :class="{ 'is-active': is_active }" @click="open_link()" :href="full_path()">
+  <a class="navbar-item" :class="{ 'is-active': is_active }" @click.prevent="open_link()" :href="full_path()">
     <slot></slot>
   </a>
 </template>

web-src/src/components/NavbarTop.vue

@@ -34,7 +34,10 @@
       <div class="navbar-end">
 
         <!-- Outputs dropdown -->
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div class="navbar-item has-dropdown"
+            :class="{ 'is-active': show_outputs_menu, 'is-hoverable': !show_outputs_menu && !show_settings_menu }"
+            @click="show_outputs_menu = !show_outputs_menu"
+            v-click-outside="on_click_outside_outputs">
           <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">
@@ -120,7 +123,10 @@
         </div>
 
         <!-- Settings drop down -->
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div class="navbar-item has-dropdown"
+            :class="{ 'is-active': show_settings_menu, 'is-hoverable': !show_outputs_menu && !show_settings_menu }"
+            @click="show_settings_menu = !show_settings_menu"
+            v-click-outside="on_click_outside_settings">
           <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">forked-daapd</span></a>
 
           <div class="navbar-dropdown is-right">
@@ -159,7 +165,10 @@ export default {
 
       playing: false,
       loading: false,
-      stream_volume: 10
+      stream_volume: 10,
+
+      show_outputs_menu: false,
+      show_settings_menu: false
     }
   },
 
@@ -198,6 +207,14 @@ export default {
       this.$store.commit(types.SHOW_BURGER_MENU, !this.show_burger_menu)
     },
 
+    on_click_outside_outputs () {
+      this.show_outputs_menu = false
+    },
+
+    on_click_outside_settings () {
+      this.show_settings_menu = false
+    },
+
     set_volume: function (newVolume) {
       webapi.player_volume(newVolume)
     },

web-src/src/components/PlayerButtonNext.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-on:click="play_next">
+  <a v-on:click="play_next" :disabled="disabled">
     <span class="icon"><i class="mdi mdi-skip-forward"></i></span>
   </a>
 </template>
@@ -10,8 +10,18 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonNext',
 
+  computed: {
+    disabled () {
+      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+    }
+  },
+
   methods: {
     play_next: function () {
+      if (this.disabled) {
+        return
+      }
+
       webapi.player_next()
     }
   }

web-src/src/components/PlayerButtonPlayPause.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-on:click="toggle_play_pause">
+  <a @click="toggle_play_pause" :disabled="disabled">
     <span class="icon"><i class="mdi" v-bind:class="[icon_style, { 'mdi-play': !is_playing, 'mdi-pause': is_playing && is_pause_allowed, 'mdi-stop': is_playing && !is_pause_allowed }]"></i></span>
   </a>
 </template>
@@ -10,7 +10,10 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonPlayPause',
 
-  props: ['icon_style'],
+  props: {
+    'icon_style': String,
+    'show_disabled_message': Boolean
+  },
 
   computed: {
     is_playing () {
@@ -20,11 +23,22 @@ export default {
     is_pause_allowed () {
       return (this.$store.getters.now_playing &&
         this.$store.getters.now_playing.data_kind !== 'pipe')
+    },
+
+    disabled () {
+      return !this.$store.state.queue || this.$store.state.queue.count <= 0
     }
   },
 
   methods: {
     toggle_play_pause: function () {
+      if (this.disabled) {
+        if (this.show_disabled_message) {
+          this.$store.dispatch('add_notification', { text: 'Queue is empty', type: 'info', topic: 'connection', timeout: 2000 })
+        }
+        return
+      }
+
       if (this.is_playing && this.is_pause_allowed) {
         webapi.player_pause()
       } else if (this.is_playing && !this.is_pause_allowed) {

web-src/src/components/PlayerButtonPrevious.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-on:click="play_previous">
+  <a v-on:click="play_previous" :disabled="disabled">
     <span class="icon"><i class="mdi mdi-skip-backward"></i></span>
   </a>
 </template>
@@ -10,8 +10,18 @@ import webapi from '@/webapi'
 export default {
   name: 'PlayerButtonPrevious',
 
+  computed: {
+    disabled () {
+      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+    }
+  },
+
   methods: {
     play_previous: function () {
+      if (this.disabled) {
+        return
+      }
+
       webapi.player_previous()
     }
   }

web-src/src/main.js

@@ -6,6 +6,7 @@ import { router } from './router'
 import store from './store'
 import './filter'
 import './progress'
+import vClickOutside from 'v-click-outside'
 import 'bulma/css/bulma.css'
 import 'mdi/css/materialdesignicons.css'
 import 'vue-range-slider/dist/vue-range-slider.css'
@@ -13,6 +14,8 @@ import './mystyles.css'
 
 Vue.config.productionTip = false
 
+Vue.use(vClickOutside)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

web-src/src/pages/PageSearch.vue

@@ -8,7 +8,7 @@
             <form v-on:submit.prevent="new_search">
               <div class="field">
                 <p class="control is-expanded has-icons-left">
-                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field" autocomplete="off">
                   <span class="icon is-left">
                     <i class="mdi mdi-magnify"></i>
                   </span>

web-src/src/pages/SpotifyPageSearch.vue

@@ -8,7 +8,7 @@
             <form v-on:submit.prevent="new_search">
               <div class="field">
                 <p class="control is-expanded has-icons-left">
-                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field" autocomplete="off">
                   <span class="icon is-left">
                     <i class="mdi mdi-magnify"></i>
                   </span>