Podcast episode player fixes, episode table ui updates

client/components/modals/podcast/NewModal.vue

@@ -34,9 +34,6 @@
             <div class="p-1 w-full">
               <ui-text-input-with-label v-model="fullPath" label="Podcast Path" readonly />
             </div>
-            <div class="p-2 w-full">
-              <ui-checkbox v-model="podcast.autoDownloadEpisodes" label="Auto Download Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-            </div>
           </div>
         </div>
         <div class="w-full md:w-1/2 p-4">
@@ -59,6 +56,9 @@
       </div>
       <div class="flex items-center py-4">
         <div class="flex-grow" />
+        <div class="px-4">
+          <ui-checkbox v-model="podcast.autoDownloadEpisodes" label="Auto Download Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+        </div>
         <ui-btn color="success" :disabled="disableSubmit" @click="submit">{{ buttonText }}</ui-btn>
       </div>
     </div>
@@ -262,14 +262,4 @@ export default {
 #episodes-scroll {
   max-height: calc(80vh - 200px);
 }
-.episode-subtitle {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-height: 16px; /* fallback */
-  max-height: 32px; /* fallback */
-  -webkit-line-clamp: 2; /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
 </style>

client/components/tables/podcast/EpisodeTableRow.vue

@@ -10,13 +10,13 @@
         <p class="text-sm font-semibold">
           {{ title }}
         </p>
-        <p class="text-sm">
+        <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">
           {{ description }}
         </p>
         <div class="flex items-center pt-2">
           <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click="playClick">
-            <span class="material-icons">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-            <p class="pl-2 pr-1 text-sm">{{ timeRemaining }}</p>
+            <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
           </div>
 
           <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
@@ -37,7 +37,7 @@
       </div>
     </div>
 
-    <div v-if="!userIsFinished" class="absolute bottom-0 left-0 h-1 bg-warning" :style="{ width: itemProgressPercent * 100 + '%' }" />
+    <div v-if="!userIsFinished" class="absolute bottom-0 left-0 h-0.5 bg-warning" :style="{ width: itemProgressPercent * 100 + '%' }" />
   </div>
 </template>
 
@@ -75,7 +75,9 @@ export default {
       return this.episode.title || ''
     },
     description() {
-      return this.episode.description || ''
+      if (this.episode.subtitle) return this.episode.subtitle
+      var desc = this.episode.description || ''
+      return desc
     },
     duration() {
       return this.$secondsToTimestamp(this.episode.duration)

client/components/tables/podcast/EpisodesTable.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="w-full py-6">
     <p class="text-lg mb-0 font-semibold">Episodes</p>
+    <p v-if="!episodes.length" class="py-4 text-center text-lg">
+      No Episodes
+    </p>
     <draggable v-model="episodesCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
       <transition-group type="transition" :name="!drag ? 'episode' : null">
         <template v-for="episode in episodesCopy">

client/components/widgets/PodcastDetailsEdit.vue

@@ -40,6 +40,10 @@
             </div>
           </div>
         </div>
+
+        <div class="flex-grow px-1 pt-6">
+          <ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+        </div>
       </div>
     </form>
   </div>
@@ -193,6 +197,11 @@ export default {
       if (!this.stringArrayEqual(this.newTags, this.media.tags || [])) {
         updatePayload.tags = [...this.newTags]
       }
+
+      if (this.media.autoDownloadEpisodes !== this.autoDownloadEpisodes) {
+        updatePayload.autoDownloadEpisodes = !!this.autoDownloadEpisodes
+      }
+
       return {
         updatePayload,
         hasChanges: !!Object.keys(updatePayload).length