FEAT: improve playlists edit modal

src/components/FileManager.vue

@@ -361,8 +361,12 @@
           <b-row
             v-for="(entry, index) in playlistEditor.entries"
             :key="index"
+            class="modalPlaylistRows"
+          >
+            <b-col
+              cols="1"
+              align="right"
             >
-            <b-col cols="1" align="right">
               {{ index + 1 }}.
             </b-col>
             <b-col cols="1">
@@ -392,7 +396,12 @@
               </b-badge>
             </b-col>
             <b-col>
-              uri: {{ entry.uri }}
+              <span v-if="entry.file">
+                file://{{ entry.file.show }}/{{ entry.file.id }}
+              </span>
+              <span v-else>
+                {{ entry.uri }}
+              </span>
             </b-col>
             <b-col cols="3">
               <b-button-group size="sm">
@@ -400,13 +409,13 @@
                   :disabled="index === 0"
                   @click="movePlaylistItemUp(index)"
                 >
-                  Up
+                  <b class="upDownArrows">&uarr;</b>
                 </b-button>
                 <b-button
                   :disabled="index === playlistEditor.entries.length - 1"
                   @click="movePlaylistItemDown(index)"
                 >
-                  Down
+                  <b class="upDownArrows">&darr;</b>
                 </b-button>
                 <b-button
                   variant="danger"
@@ -422,8 +431,12 @@
         Add:
         <b-button-group>
           <b-dropdown text="File">
-            <b-dropdown-item>File A</b-dropdown-item>
-            <b-dropdown-item>File B</b-dropdown-item>
+            <b-dropdown-item
+              v-for="(file, index) in files"
+              :key="index"
+            >
+              {{ 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>
@@ -737,9 +750,12 @@ export default {
       var playlist = this.getPlaylistById(id)
       for (var i in playlist.entries) {
         var entry = {}
-        entry.uri = playlist.entries[i].uri
         if (playlist.entries[i].file) {
-          entry.file = playlist.entries[i].file
+          entry.file = {}
+          entry.file.show = playlist.entries[i].file.show
+          entry.file.id = playlist.entries[i].file.id
+        } else {
+          entry.uri = playlist.entries[i].uri
         }
         this.playlistEditor.entries.push(entry)
       }
@@ -1034,4 +1050,10 @@ div.filelistbox {
   color: orange;
   font-weight: bold;
 }
+.upDownArrows {
+  font-size: 1.15rem;
+}
+.modalPlaylistRows {
+  padding: 0.2rem 0;
+}
 </style>