From 53dbdd115ff3141b7eeb1d36f546ea7942c2966c Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 27 Nov 2022 12:33:38 -0600
Subject: [PATCH] Update:Playlists for podcasts

---
 client/components/tables/playlist/ItemTableRow.vue  |  2 +-
 .../components/tables/podcast/EpisodeTableRow.vue   | 13 ++++++++++++-
 client/components/tables/podcast/EpisodesTable.vue  |  6 +++++-
 client/strings/en-us.json                           |  3 +++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/client/components/tables/playlist/ItemTableRow.vue b/client/components/tables/playlist/ItemTableRow.vue
index 29ec8e5b..366cbc5e 100644
--- a/client/components/tables/playlist/ItemTableRow.vue
+++ b/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() {
diff --git a/client/components/tables/podcast/EpisodeTableRow.vue b/client/components/tables/podcast/EpisodeTableRow.vue
index abb2af47..188a39e3 100644
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/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)
     },
diff --git a/client/components/tables/podcast/EpisodesTable.vue b/client/components/tables/podcast/EpisodesTable.vue
index e99fa815..5f5d8cf0 100644
--- a/client/components/tables/podcast/EpisodesTable.vue
+++ b/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,
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index b601c0ad..73907bde 100644
--- a/client/strings/en-us.json
+++ b/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",