Merge master

client/components/tables/podcast/DownloadQueueTable.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="w-full my-2">
+    <div class="w-full bg-primary px-4 md:px-6 py-2 flex items-center">
+      <p class="pr-2 md:pr-4">{{ $strings.HeaderDownloadQueue }}</p>
+      <div class="h-5 md:h-7 w-5 md:w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-sm font-mono">{{ queue.length }}</span>
+      </div>
+    </div>
+    <transition name="slide">
+      <div class="w-full">
+        <table class="text-sm tracksTable">
+          <tr>
+            <th class="text-left px-4 min-w-48">{{ $strings.LabelPodcast }}</th>
+            <th class="text-left w-32 min-w-32">{{ $strings.LabelEpisode }}</th>
+            <th class="text-left px-4">{{ $strings.LabelEpisodeTitle }}</th>
+            <th class="text-left px-4 w-48">{{ $strings.LabelPubDate }}</th>
+          </tr>
+          <template v-for="downloadQueued in queue">
+            <tr :key="downloadQueued.id">
+              <td class="px-4">
+                <div class="flex items-center">
+                  <nuxt-link :to="`/item/${downloadQueued.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ downloadQueued.podcastTitle }}</nuxt-link>
+                  <widgets-explicit-indicator :explicit="downloadQueued.podcastExplicit" />
+                </div>
+              </td>
+              <td>
+                <div class="flex items-center">
+                  <div v-if="downloadQueued.season">{{ downloadQueued.season }}x</div>
+                  <div v-if="downloadQueued.episode">{{ downloadQueued.episode }}</div>
+                  <widgets-podcast-type-indicator :type="downloadQueued.episodeType" />
+                </div>
+              </td>
+              <td class="px-4">
+                {{ downloadQueued.episodeDisplayTitle }}
+              </td>
+              <td class="text-xs">
+                <div class="flex items-center">
+                  <p>{{ $dateDistanceFromNow(downloadQueued.publishedAt) }}</p>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </table>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    queue: {
+      type: Array,
+      default: () => []
+    },
+    libraryItemId: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/tables/podcast/EpisodeTableRow.vue

@@ -2,16 +2,17 @@
   <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
     <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
       <div class="flex-grow px-2">
-        <p class="text-sm font-semibold">
-          {{ title }}
-        </p>
+        <div class="flex items-center">
+          <span class="text-sm font-semibold">{{ title }}</span>
+          <widgets-podcast-type-indicator :type="episode.episodeType" />
+        </div>
 
         <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ subtitle }}</p>
 
         <div class="flex justify-between pt-2 max-w-xl">
           <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
           <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
         </div>
 
         <div class="flex items-center pt-2">
@@ -128,6 +129,9 @@ export default {
     },
     publishedAt() {
       return this.episode.publishedAt
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
     }
   },
   methods: {
@@ -205,4 +209,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/tables/podcast/EpisodesTable.vue

@@ -160,6 +160,12 @@ export default {
         var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
         return !itemProgress || !itemProgress.isFinished
       })
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
@@ -222,7 +228,7 @@ export default {
         episodeId: episode.id,
         title: episode.title,
         subtitle: this.mediaMetadata.title,
-        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
         duration: episode.audioFile.duration || null,
         coverPath: this.media.coverPath || null
       }
@@ -290,7 +296,7 @@ export default {
             episodeId: episode.id,
             title: episode.title,
             subtitle: this.mediaMetadata.title,
-            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
             duration: episode.audioFile.duration || null,
             coverPath: this.media.coverPath || null
           })
@@ -308,6 +314,8 @@ export default {
       this.showPodcastRemoveModal = true
     },
     editEpisode(episode) {
+      const episodeIds = this.episodesSorted.map((e) => e.id)
+      this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
       this.$store.commit('setSelectedLibraryItem', this.libraryItem)
       this.$store.commit('globals/setSelectedEpisode', episode)
       this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)