podcast page will now load from library

src/renderer/style.less

@@ -2487,6 +2487,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+// Podcast Page
+.content-inner.podcasts-page {
+  display: flex;
+  height: calc(100% - var(--navigationBarHeight));
+  padding: 0px;
+
+  .podcasts-list {
+    height: 100%;
+    width: 400px;
+    background: gray;
+    overflow-y: overlay;
+  }
+
+  .episodes-list {
+    height: 100%;
+    width: 100%;
+    background: black;
+    overflow-y: overlay;
+  }
+
+}
+
+
+
+
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;

src/renderer/views/pages/podcasts.ejs

@@ -1,12 +1,37 @@
 <script type="text/x-template" id="apple-podcasts">
-    <div class="content-inner">
+    <div class="content-inner podcasts-page">
-        <h1>Podcasts</h1>
+        <div class="podcasts-list">
-        <mediaitem-square v-for="podcast in podcasts" :item="podcast"></mediaitem-square>
+            <podcast-item @click.native="getEpisodes(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-item>
-        <h3>Episodes</h3>
+        </div>
-        <mediaitem-square v-for="episode in episodes" :item="episode"></mediaitem-square>
+        <div class="episodes-list">
+            <div class="well">
+                <mediaitem-square kind="small" :item="episode" v-for="episode in episodes"></mediaitem-square>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script type="text/x-template" id="podcast-item">
+    <div class="cd-mediaitem-list-item">
+        <div class="artwork">
+            <mediaitem-artwork
+                    :url="item.attributes.artwork.url"
+                    size="50"
+                    :type="podcast"></mediaitem-artwork>
+        </div>
+        <div class="info-rect">
+            <div class="title text-overflow-elipsis">
+                {{ item.attributes.name }}
+            </div>
+        </div>
     </div>
 </script>
 <script>
+    Vue.component('podcast-item', {
+        template: '#podcast-item',
+        props: ['item'],
+        methods: {}
+    });
     Vue.component('apple-podcasts', {
         template: '#apple-podcasts',
         data: function () {
@@ -16,12 +41,41 @@
             }
         },
         async mounted() {
-            let podcastShow = await app.mk.api.v3.podcasts(`/v1/catalog/us/podcasts/1233359606?include=episodes`)
+            let podcastShow = await app.mk.api.v3.podcasts(`/v1/me/library/podcasts?include=episodes`)
             this.podcasts = podcastShow.data.data
-            this.episodes = podcastShow.data.data[0].relationships.episodes.data
+            if(podcastShow.data.next) {
+                await this.getNext(podcastShow.data.next)
+            }
+            // this.episodes = podcastShow.data.data[0].relationships.episodes.data
         },
         methods: {
+            async getEpisodes(podcast) {
+                this.episodes = []
+                let eps = await app.mk.api.v3.podcasts(`/v1/catalog/${app.mk.storefrontId}/podcasts/${podcast.id}?include=episodes`)
 
+                eps.data.data[0].relationships.episodes.data.forEach(ep => {
+                    this.episodes.push(ep)
+                })
+                if(eps.data.data[0].relationships.episodes.next) {
+                    await this.getNextEpisodes(eps.data.data[0].relationships.episodes.next)
+                }
+            },
+            async getNextEpisodes(next) {
+                let podcastShow = await app.mk.api.v3.podcasts(next)
+                podcastShow.data.data.forEach(ep => {
+                    this.episodes.push(ep)
+                })
+                if(podcastShow.data.next) {
+                    await this.getNextEpisodes(podcastShow.data.next)
+                }
+            },
+            async getNext(next) {
+                let podcastShow = await app.mk.api.v3.podcasts(next)
+                this.podcasts = this.podcasts.concat(podcastShow.data.data)
+                if(podcastShow.data.next) {
+                    await this.getNext(podcastShow.data.next)
+                }
+            }
         }
     });
 </script>