testing podcasts

src/renderer/views/main.ejs

@@ -85,7 +85,9 @@
                                     <div class="song-name" style="-webkit-box-orient: horizontal;"
                                          :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
                                         {{ mk.nowPlayingItem["attributes"]["name"] }}
-                                        <div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" style="display: inline-block"></div>
+                                        <div class="explicit-icon"
+                                             v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
+                                             style="display: inline-block"></div>
                                     </div>
                                     <div class="song-artist"
                                          style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
@@ -94,7 +96,8 @@
                                             {{ mk.nowPlayingItem["attributes"]["artistName"] }}
                                         </div>
                                         <div class="song-artist item-navigate" style="display: inline-block;"
-                                             @click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
+                                             @click="getNowPlayingItemDetailed('album')"
+                                             v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
                                             <div class="separator" style="display: inline-block;">{{"—"}}</div>
                                             {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
                                             (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
@@ -196,6 +199,8 @@
                                               page="browse"></sidebar-library-item>
                         <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg"
                                               page="radio"></sidebar-library-item>
+                        <sidebar-library-item name="Podcasts" svg-icon="./assets/feather/radio.svg" v-if="isDev"
+                                              page="podcasts"></sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             Library
                         </div>
@@ -337,6 +342,14 @@
                         <button class="nav-item"
                                 @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
                     </div>
+
+                    <!--                    Podcasts -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'podcasts'">
+                            <apple-podcasts></apple-podcasts>
+                        </template>
+                    </transition>
+
                     <!-- Apple Setings Page -->
                     <transition name="wpfade">
                         <template v-if="page == 'apple-account-settings'">
@@ -522,7 +535,8 @@
 
                 </div>
                 <transition name="drawertransition">
-                    <div class="app-drawer" v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
+                    <div class="app-drawer"
+                         v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
                         <div class="bgArtworkMaterial">
                             <div class="bg-artwork-container">
                                 <img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
@@ -605,6 +619,9 @@
     </div>
 </div>
 
+
+<!-- Apple Settings Page -->
+<%- include('pages/podcasts') %>
 <!-- Apple Settings Page -->
 <%- include('pages/apple-account-settings') %>
 <!-- Library - Songs -->

src/renderer/views/pages/podcasts.ejs

@@ -0,0 +1,27 @@
+<script type="text/x-template" id="apple-podcasts">
+    <div class="content-inner">
+        <h1>Podcasts</h1>
+        <mediaitem-square v-for="podcast in podcasts" :item="podcast"></mediaitem-square>
+        <h3>Episodes</h3>
+        <mediaitem-square v-for="episode in episodes" :item="episode"></mediaitem-square>
+    </div>
+</script>
+<script>
+    Vue.component('apple-podcasts', {
+        template: '#apple-podcasts',
+        data: function () {
+            return {
+                podcasts: [],
+                episodes: []
+            }
+        },
+        async mounted() {
+            let podcastShow = await app.mk.api.v3.podcasts(`/v1/catalog/us/podcasts/1233359606?include=episodes`)
+            this.podcasts = podcastShow.data.data
+            this.episodes = podcastShow.data.data[0].relationships.episodes.data
+        },
+        methods: {
+
+        }
+    });
+</script>