Add:Playlists management

components/tables/podcast/EpisodeRow.vue

@@ -26,6 +26,10 @@
 
         <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
 
+        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click="addToPlaylist">
+          <span class="material-icons text-2xl">playlist_add</span>
+        </button>
+
         <div v-if="userCanDownload">
           <span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
           <span v-else-if="!localEpisode" class="material-icons mx-1 mt-2" :class="downloadItem ? 'animate-bounce text-warning text-opacity-75 text-xl' : 'text-gray-300 text-xl'" @click="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
@@ -134,6 +138,9 @@ export default {
     }
   },
   methods: {
+    addToPlaylist() {
+      this.$emit('addToPlaylist', this.episode)
+    },
     async selectFolder() {
       var folderObj = await AbsFileSystem.selectFolder({ mediaType: this.mediaType })
       if (folderObj.error) {

components/tables/podcast/EpisodesTable.vue

@@ -15,7 +15,7 @@
     </div>
 
     <template v-for="episode in episodesSorted">
-      <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="libraryItemId" :local-library-item-id="localLibraryItemId" :is-local="isLocal" :key="episode.id" />
+      <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="libraryItemId" :local-library-item-id="localLibraryItemId" :is-local="isLocal" :key="episode.id" @addToPlaylist="addEpisodeToPlaylist" />
     </template>
 
     <!-- What in tarnation is going on here?
@@ -29,7 +29,10 @@
 <script>
 export default {
   props: {
-    libraryItemId: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
     episodes: {
       type: Array,
       default: () => []
@@ -95,6 +98,9 @@ export default {
     }
   },
   computed: {
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
     episodesAreFiltered() {
       return this.episodesFiltered.length !== this.episodesCopy.length
     },
@@ -140,6 +146,10 @@ export default {
     }
   },
   methods: {
+    addEpisodeToPlaylist(episode) {
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsAddCreateModal', true)
+    },
     setFilter(filter) {
       this.filterKey = filter
       console.log('Set filter', this.filterKey)