improvements to podcast ui

src/renderer/style.less

@@ -2495,18 +2495,50 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   .podcasts-list {
     height: 100%;
-    width: 400px;
+    width: 280px;
-    background: gray;
+    background: rgb(200 200 200 / 10%);
     overflow-y: overlay;
+    border-right: 1px solid var(--color2);
+    flex: none;
   }
 
   .episodes-list {
     height: 100%;
     width: 100%;
-    background: black;
+    background: rgb(200 200 200 / 6%);
     overflow-y: overlay;
   }
 
+  .podcasts-details {
+    height: 100%;
+    width: 400px;
+    flex: none;
+    background: rgba(200, 200, 200, 0.1);
+    overflow-y: overlay;
+    border-left: 1px solid var(--color2);
+
+    .podcast-header {
+      text-align:center;
+    }
+
+    .podcast-play-btn {
+      width: 50%;
+      display: block;
+      margin: 0 auto;
+    }
+
+    .podcast-description {
+      margin: 12px;
+      font-size: 0.75em;
+    }
+
+    .podcast-artwork {
+      width: 200px;
+      margin: 16px auto;
+      height: 200px;
+    }
+  }
+
 }
 
 

src/renderer/views/pages/podcasts.ejs

@@ -1,18 +1,24 @@
 <script type="text/x-template" id="apple-podcasts">
     <div class="content-inner podcasts-page">
         <div class="podcasts-list">
-            <podcast-item @click.native="getEpisodes(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-item>
+            <podcast-tab :isselected="podcastSelected.id == podcast.id" @click.native="selectPodcast(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-tab>
         </div>
         <div class="episodes-list">
-            <div class="well">
+            <podcast-episode :isselected="selected.id == episode.id" @dblclick.native="playEpisode(episode)" @click.native="selectEpisode(episode)" :item="episode"
-                <mediaitem-square kind="small" :item="episode" v-for="episode in episodes"></mediaitem-square>
+                             v-for="episode in episodes"></podcast-episode>
+        </div>
+        <div class="podcasts-details" v-if="selected.id != -1">
+            <div class="podcast-artwork">
+                <mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
             </div>
+            <h3 class="podcast-header">{{ selected.attributes.name }}</h3>
+            <button @click="playEpisode(selected)" class="md-btn podcast-play-btn">Play Episode</button>
+            <p class="well podcast-description" v-if="selected.attributes.description.standard" v-html="selected.attributes.description.standard"></p>
         </div>
     </div>
 </script>
-
+<script type="text/x-template" id="podcast-tab">
-<script type="text/x-template" id="podcast-item">
+    <div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}">
-    <div class="cd-mediaitem-list-item">
         <div class="artwork">
             <mediaitem-artwork
                     :url="item.attributes.artwork.url"
@@ -26,10 +32,27 @@
         </div>
     </div>
 </script>
+<script type="text/x-template" id="podcast-episode">
+    <div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}">
+        <div class="info-rect" :style="{'padding-left':'16px'}">
+            <div class="title text-overflow-elipsis">
+                {{ item.attributes.name }}
+            </div>
+            <div class="subtitle text-overflow-elipsis">
+                {{ item.attributes.description.standard }}
+            </div>
+        </div>
+    </div>
+</script>
 <script>
-    Vue.component('podcast-item', {
+    Vue.component('podcast-episode', {
-        template: '#podcast-item',
+        template: '#podcast-episode',
-        props: ['item'],
+        props: ['item', 'isselected'],
+        methods: {}
+    });
+    Vue.component('podcast-tab', {
+        template: '#podcast-tab',
+        props: ['item', 'isselected'],
         methods: {}
     });
     Vue.component('apple-podcasts', {
@@ -37,18 +60,34 @@
         data: function () {
             return {
                 podcasts: [],
-                episodes: []
+                episodes: [],
+                podcastSelected: {
+                    id: -1
+                },
+                selected: {
+                    id: -1
+                }
             }
         },
         async mounted() {
             let podcastShow = await app.mk.api.v3.podcasts(`/v1/me/library/podcasts?include=episodes`)
             this.podcasts = podcastShow.data.data
-            if(podcastShow.data.next) {
+            if (podcastShow.data.next) {
                 await this.getNext(podcastShow.data.next)
             }
             // this.episodes = podcastShow.data.data[0].relationships.episodes.data
         },
         methods: {
+            playEpisode(episode) {
+                app.mk.setQueue({'episode': episode.id}).then(() => {app.mk.play()})
+            },
+            selectPodcast(podcast) {
+                this.podcastSelected = podcast
+                this.getEpisodes(podcast)
+            },
+            selectEpisode(episode) {
+                this.selected = episode
+            },
             async getEpisodes(podcast) {
                 this.episodes = []
                 let eps = await app.mk.api.v3.podcasts(`/v1/catalog/${app.mk.storefrontId}/podcasts/${podcast.id}?include=episodes`)
@@ -56,23 +95,27 @@
                 eps.data.data[0].relationships.episodes.data.forEach(ep => {
                     this.episodes.push(ep)
                 })
-                if(eps.data.data[0].relationships.episodes.next) {
+                if (eps.data.data[0].relationships.episodes.next) {
-                    await this.getNextEpisodes(eps.data.data[0].relationships.episodes.next)
+                    await this.getNextEpisodes(eps.data.data[0].relationships.episodes.next, podcast.id)
                 }
             },
-            async getNextEpisodes(next) {
+            async getNextEpisodes(next, podcastId) {
+
                 let podcastShow = await app.mk.api.v3.podcasts(next)
+                if(podcastId != this.podcastSelected.id) {
+                    return
+                }
                 podcastShow.data.data.forEach(ep => {
                     this.episodes.push(ep)
                 })
-                if(podcastShow.data.next) {
+                if (podcastShow.data.next) {
-                    await this.getNextEpisodes(podcastShow.data.next)
+                    await this.getNextEpisodes(podcastShow.data.next, podcastId)
                 }
             },
             async getNext(next) {
                 let podcastShow = await app.mk.api.v3.podcasts(next)
                 this.podcasts = this.podcasts.concat(podcastShow.data.data)
-                if(podcastShow.data.next) {
+                if (podcastShow.data.next) {
                     await this.getNext(podcastShow.data.next)
                 }
             }