Add download queue

client/components/app/SideRail.vue

@@ -86,6 +86,14 @@
       <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">file_download</span>
+
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
+
+      <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
       <span class="material-icons text-2xl">warning</span>
 
@@ -149,6 +157,9 @@ export default {
     isMusicLibrary() {
       return this.currentLibraryMediaType === 'music'
     },
+    isPodcastDownloadQueuePage() {
+      return this.$route.name === 'library-library-podcast-download-queue'
+    },
     isPodcastSearchPage() {
       return this.$route.name === 'library-library-podcast-search'
     },
@@ -212,4 +223,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/app/StreamContainer.vue

@@ -11,12 +11,15 @@
         </nuxt-link>
         <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
           <span class="material-icons text-sm">person</span>
-          <p v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</p>
-          <p v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</p>
-          <p v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
-            <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-          </p>
-          <p v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</p>
+          <div class="flex items-center">
+            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
+            <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
+              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
+            </div>
+            <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
+            <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator>
+          </div>
         </div>
 
         <div class="text-gray-400 flex items-center">
@@ -129,6 +132,9 @@ export default {
     isMusic() {
       return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'music' : false
     },
+    isExplicit() {
+      return this.mediaMetadata.explicit || false
+    },
     mediaMetadata() {
       return this.media.metadata || {}
     },
@@ -474,4 +480,4 @@ export default {
 #streamContainer {
   box-shadow: 0px -6px 8px #1111113f;
 }
-</style>
+</style>

client/components/modals/podcast/EpisodeFeed.vue

@@ -19,8 +19,15 @@
             <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
-            <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
-            <p class="break-words mb-1">{{ episode.title }}</p>
+            <div class="flex items-center font-semibold text-gray-200">
+              <div v-if="episode.season || episode.episode">#</div>
+              <div v-if="episode.season">{{ episode.season }}x</div>
+              <div v-if="episode.episode">{{ episode.episode }}</div>
+            </div>
+            <div class="flex items-center mb-1">
+              <div class="break-words">{{ episode.title }}</div>
+              <widgets-podcast-type-indicator :type="episode.episodeType" />
+            </div>
             <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
           </div>

client/components/tables/podcast/DownloadQueueTable.vue

@@ -0,0 +1,68 @@
+<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">{{ $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,9 +2,10 @@
   <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>
 
@@ -205,4 +206,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/widgets/PodcastTypeIndicator.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <template v-if="type == 'bonus'">
+      <ui-tooltip text="Bonus" direction="top">
+        <span class="material-icons ml-1" style="font-size: 0.8rem">local_play</span>
+      </ui-tooltip>
+    </template>
+    <template v-if="type == 'trailer'">
+      <ui-tooltip text="Trailer" direction="top">
+        <span class="material-icons ml-1" style="font-size: 0.8rem">local_movies</span>
+      </ui-tooltip>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'full'
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>