FEAT: implement add playlist entries functions

src/components/FileManager.vue

@@ -423,7 +423,8 @@
               slot-scope="data"
             >
               <span v-if="data.item.file">
-                file://{{ data.item.file.show }}/{{ data.item.file.id }}
+                {{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }}
+                <small><i>( file://{{ data.item.file.show }}/{{ data.item.file.id }} )</i></small>
               </span>
               <span v-else>
                 {{ data.item.uri }}
@@ -471,22 +472,45 @@
         TODO: make the inputs configurable
         -->
         <div>
+          <b-modal
+            id="modal-edit-playlist-add-stream"
+            title="Add stream to the playlist"
+            @ok="addPlaylistItemStream('save')"
+          >
+            <b-input
+              v-model="playlistEditor.newStreamURL"
+              type="url"
+            >
+              ...
+            </b-input>
+          </b-modal>
           Add:
           <b-button-group>
             <b-dropdown text="File">
               <b-dropdown-item
                 v-for="(file, index) in files"
                 :key="index"
+                @click="addPlaylistItemFile(file.show, file.id)"
               >
                 {{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{ prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
               </b-dropdown-item>
             </b-dropdown>
             <b-dropdown text="Line-in">
-              <b-dropdown-item>Studio 1</b-dropdown-item>
-              <b-dropdown-item>Preprod</b-dropdown-item>
-              <b-dropdown-item>Line 3</b-dropdown-item>
+              <b-dropdown-item @click="addPlaylistItemLine('0')">
+                Studio 1
+              </b-dropdown-item>
+              <b-dropdown-item @click="addPlaylistItemLine('1')">
+                Preprod
+              </b-dropdown-item>
+              <b-dropdown-item @click="addPlaylistItemLine('2')">
+                Line 2
+              </b-dropdown-item>
             </b-dropdown>
-            <b-button>Stream</b-button>
+            <b-button
+              @click="addPlaylistItemStream('openModal')"
+            >
+              Stream
+            </b-button>
           </b-button-group>
         </div>
       </b-modal>
@@ -635,7 +659,8 @@ export default {
       playlistEditor: {
         id: null,
         mode: 'add',  // should be either 'add' or 'edit'
-        entries: []
+        entries: [],
+        newStreamURL: null
       },
 
       // we need this for the modal to edit a file's meta information
@@ -748,6 +773,18 @@ export default {
       return null
     },
 
+    // return a string representing a file entry for the playlist editor
+    getFileTitleForPlaylist: function (show, id) {
+      // TODO: change structure of files array, so we can access all shows
+      // the user has access to.
+      var file = this.getFileById(id)
+      if (file && file.metadata.title) {
+        return show + ": " + file.metadata.title
+      } else {
+        return ""
+      }
+    },
+
     playlistToolTip: function (entries) {
       var text = '<div style="white-space: nowrap;" align="left">'
       for (var i in entries) {
@@ -782,6 +819,37 @@ export default {
       }
     },
 
+    // add a file from the file manager to the playlist that is being edited
+    addPlaylistItemFile: function (show, id) {
+      var item = {}
+      item.file = {show: show, id: id}
+      this.playlistEditor.entries.push(item)
+    },
+
+    // add a line input to the playlist that is being edited
+    addPlaylistItemLine: function (line) {
+      this.playlistEditor.entries.push({uri: 'line://' + line})
+    },
+
+    // controls sub-modal to add a new URI to the playlist editor
+    addPlaylistItemStream: function (action) {
+      if (action === 'openModal') {
+        // the function gets called with the action 'openModal' when the users
+        // clicks on the add new stream button. then we clear all temp data and
+        // open the modal
+        this.playlistEditor.newStreamURL = ''
+        this.$bvModal.show('modal-edit-playlist-add-stream')
+      } else {
+        // when the user hits ok to add the new uri, this function gets called
+        // with the action 'save' and the modal closes automagically. so we
+        // just have to push a new entry to the playlist in the editor
+        if (this.playlistEditor.newStreamURL.trim().length > 0) {
+          this.playlistEditor.entries.push({uri: this.playlistEditor.newStreamURL})
+        }
+        // if an empty string was provided, we just do nothing
+      }
+    },
+
     deletePlaylist: function (id) {
       var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/playlists/' + id
       // TODO: add mechanism to indicate the running delete request in the files table