Update:Playlists for podcasts

client/components/tables/playlist/ItemTableRow.vue

@@ -107,7 +107,7 @@ export default {
       return this.mediaMetadata.authors || []
     },
     itemDuration() {
-      if (this.episode) return this.episode.duration
+      if (this.episode) return this.$elapsedPretty(this.episode.duration)
       return this.$elapsedPretty(this.media.duration)
     },
     isMissing() {

client/components/tables/podcast/EpisodeTableRow.vue

@@ -21,13 +21,21 @@
           </button>
 
           <button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="isQueued ? 'text-success' : ''" @click.stop="queueBtnClick">
-            <span class="material-icons-outlined">{{ isQueued ? 'playlist_add_check' : 'playlist_add' }}</span>
+            <span class="material-icons-outlined">{{ isQueued ? 'playlist_add_check' : 'queue' }}</span>
           </button>
 
+          <ui-tooltip v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" :text="isQueued ? $strings.MessageRemoveFromPlayerQueue : $strings.MessageAddToPlayerQueue" direction="top">
+            <ui-icon-btn :icon="isQueued ? 'playlist_add_check' : 'queue'" borderless @click="queueBtnClick" />
+          </ui-tooltip>
+
           <ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
             <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
           </ui-tooltip>
 
+          <ui-tooltip :text="$strings.LabelYourPlaylists" direction="top">
+            <ui-icon-btn icon="playlist_add" borderless @click="clickAddToPlaylist" />
+          </ui-tooltip>
+
           <ui-icon-btn v-if="userCanUpdate" icon="edit" borderless @click="clickEdit" />
           <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
         </div>
@@ -123,6 +131,9 @@ export default {
     }
   },
   methods: {
+    clickAddToPlaylist() {
+      this.$emit('addToPlaylist', this.episode)
+    },
     clickedEpisode() {
       this.$emit('view', this.episode)
     },

client/components/tables/podcast/EpisodesTable.vue

@@ -17,7 +17,7 @@
     </div>
     <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p>
     <template v-for="episode in episodesSorted">
-      <tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" @addToQueue="addEpisodeToQueue" />
+      <tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" @addToQueue="addEpisodeToQueue" @addToPlaylist="addToPlaylist" />
     </template>
 
     <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
@@ -131,6 +131,10 @@ export default {
     }
   },
   methods: {
+    addToPlaylist(episode) {
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsModal', true)
+    },
     addEpisodeToQueue(episode) {
       const queueItem = {
         libraryItemId: this.libraryItem.id,

client/strings/en-us.json

@@ -411,7 +411,9 @@
   "LabelWeekdaysToRun": "Weekdays to run",
   "LabelYourAudiobookDuration": "Your audiobook duration",
   "LabelYourBookmarks": "Your Bookmarks",
+  "LabelYourPlaylists": "Your Playlists",
   "LabelYourProgress": "Your Progress",
+  "MessageAddToPlayerQueue": "Add to player queue",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
   "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
@@ -484,6 +486,7 @@
   "MessageRemoveAllItemsWarning": "WARNING! This action will remove all library items from the database including any updates or matches you have made. This does not do anything to your actual files. Are you sure?",
   "MessageRemoveChapter": "Remove chapter",
   "MessageRemoveEpisodes": "Remove {0} episode(s)",
+  "MessageRemoveFromPlayerQueue": "Remove from player queue",
   "MessageRemoveUserWarning": "Are you sure you want to permanently delete user \"{0}\"?",
   "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
   "MessageRestoreBackupConfirm": "Are you sure you want to restore the backup created on",