Merge pull request #746 from chme/webupdate

Update player web interface

web-src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forked-daapd-web",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "forked-daapd web interface",
   "author": "chme <christian.meffert@googlemail.com>",
   "license": "GPL-2.0",
@@ -13,26 +13,26 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "bulma": "^0.7.4",
+    "bulma": "^0.7.5",
     "mdi": "^2.1.99",
     "moment": "^2.24.0",
     "moment-duration-format": "^2.2.2",
-    "npm": "^6.8.0",
+    "npm": "^6.9.0",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.2.0",
-    "vue": "^2.6.7",
-    "vue-infinite-loading": "^2.4.3",
+    "vue": "^2.6.10",
+    "vue-infinite-loading": "^2.4.4",
     "vue-progressbar": "^0.7.4",
     "vue-range-slider": "^0.6.0",
-    "vue-router": "^3.0.2",
-    "vuedraggable": "^2.17.0",
-    "vuex": "^3.1.0"
+    "vue-router": "^3.0.6",
+    "vuedraggable": "^2.21.0",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.4.1",
-    "@vue/cli-plugin-eslint": "^3.4.1",
-    "@vue/cli-service": "^3.4.1",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
     "@vue/eslint-config-standard": "^3.0.5",
-    "vue-template-compiler": "^2.6.7"
+    "vue-template-compiler": "^2.6.10"
   }
 }

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -3,23 +3,40 @@
     <transition name="fade">
       <div class="modal is-active" v-if="show">
         <div class="modal-background" @click="$emit('close')"></div>
-        <div class="modal-card">
-          <section class="modal-card-body">
-            <form v-on:submit.prevent="add_stream">
-              <div class="field">
-                <p class="control is-expanded has-icons-left">
-                  <input class="input is-rounded is-shadowless" type="text" placeholder="URL stream" v-model="url" ref="url_field">
-                  <span class="icon is-left">
-                    <i class="mdi mdi-file-music"></i>
-                  </span>
-                </p>
-              </div>
-            </form>
-          </section>
-          <footer class="modal-card-foot">
-            <button class="button is-success" @click="add_stream" :disabled="url.length < 9">Add</button>
-            <button class="button" @click="$emit('close')">Cancel</button>
-          </footer>
+        <div class="modal-content fd-modal-card">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                Add stream URL
+              </p>
+              <form v-on:submit.prevent="play" class="fd-has-margin-bottom">
+                <div class="field">
+                  <p class="control is-expanded has-icons-left">
+                    <input class="input is-shadowless" type="text" placeholder="http://url-to-stream" v-model="url" :disabled="loading" ref="url_field">
+                    <span class="icon is-left">
+                      <i class="mdi mdi-web"></i>
+                    </span>
+                  </p>
+                </div>
+              </form>
+            </div>
+            <footer class="card-footer" v-if="loading">
+              <a class="card-footer-item has-text-dark">
+                <span class="icon"><i class="mdi mdi-web"></i></span> <span class="is-size-7">Loading ...</span>
+              </a>
+            </footer>
+            <footer class="card-footer" v-else>
+              <a class="card-footer-item has-text-danger" @click="$emit('close')">
+                <span class="icon"><i class="mdi mdi-cancel"></i></span> <span class="is-size-7">Cancel</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="add_stream">
+                <span class="icon"><i class="mdi mdi-playlist-plus"></i></span> <span class="is-size-7">Add</span>
+              </a>
+              <a class="card-footer-item has-background-info has-text-white has-text-weight-bold" @click="play">
+                <span class="icon"><i class="mdi mdi-play"></i></span> <span class="is-size-7">Play</span>
+              </a>
+            </footer>
+          </div>
         </div>
         <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
       </div>
@@ -36,15 +53,43 @@ export default {
 
   data () {
     return {
-      url: ''
+      url: '',
+      loading: false
     }
   },
 
   methods: {
     add_stream: function () {
-      this.$emit('close')
-      webapi.queue_add(this.url)
-      this.url = ''
+      this.loading = true
+      webapi.queue_add(this.url).then(() => {
+        this.$emit('close')
+        this.url = ''
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+
+    play: function () {
+      this.loading = true
+      webapi.player_play_uri(this.url, false).then(() => {
+        this.$emit('close')
+        this.url = ''
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  },
+
+  watch: {
+    'show' () {
+      if (this.show) {
+        this.loading = false
+
+        // We need to delay setting the focus to the input field until the field is part of the dom and visible
+        setTimeout(() => {
+          this.$refs.url_field.focus()
+        }, 10)
+      }
     }
   }
 }

web-src/src/pages/PageQueue.vue

@@ -12,11 +12,11 @@
           </span>
           <span>Hide previous</span>
         </a>
-        <a class="button is-small" @click="add_stream_dialog">
+        <a class="button is-small" @click="open_add_stream_dialog">
           <span class="icon">
             <i class="mdi mdi-web"></i>
           </span>
-          <span>Add URL Stream</span>
+          <span>Add Stream</span>
         </a>
         <!--
         <a class="button" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
@@ -133,7 +133,7 @@ export default {
       this.show_details_modal = true
     },
 
-    add_stream_dialog: function (item) {
+    open_add_stream_dialog: function (item) {
       this.show_url_modal = true
     }
   }