[web-src] PageQueue: new button to add URL streams outside of library to queue

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <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>
+        <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'ModalDialogAddUrlStream',
+  props: [ 'show' ],
+
+  data () {
+    return {
+      url: ''
+    }
+  },
+
+  methods: {
+    add_stream: function () {
+      this.$emit('close')
+      webapi.queue_add(this.url)
+      this.url = ''
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageQueue.vue

@@ -12,6 +12,12 @@
           </span>
           <span>Hide previous</span>
         </a>
+        <a class="button is-small" @click="add_stream_dialog">
+          <span class="icon">
+            <i class="mdi mdi-web"></i>
+          </span>
+          <span>Add URL Stream</span>
+        </a>
         <!--
         <a class="button" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
           <span class="icon">
@@ -60,19 +66,21 @@
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemQueueItem from '@/components/ListItemQueueItem'
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem'
+import ModalDialogAddUrlStream from '@/components/ModalDialogAddUrlStream'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import draggable from 'vuedraggable'
 
 export default {
   name: 'PageQueue',
-  components: { ContentWithHeading, ListItemQueueItem, draggable, ModalDialogQueueItem },
+  components: { ContentWithHeading, ListItemQueueItem, draggable, ModalDialogQueueItem, ModalDialogAddUrlStream },
 
   data () {
     return {
       edit_mode: false,
 
       show_details_modal: false,
+      show_url_modal: false,
       selected_item: {}
     }
   },
@@ -122,6 +130,10 @@ export default {
     open_dialog: function (item) {
       this.selected_item = item
       this.show_details_modal = true
+    },
+
+    add_stream_dialog: function (item) {
+      this.show_url_modal = true
     }
   }
 }