improvements to podcasts page

.gitignore

@@ -309,3 +309,4 @@ GitHub.sublime-settings
 #Service Worker mappings
 src/renderer/sw.js.map
 src/renderer/workbox-962786f2.js.map
+/src/renderer/musickit-dev.js

src/renderer/style.less

@@ -2493,6 +2493,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: calc(100% - var(--navigationBarHeight));
   padding: 0px;
 
+  .podcast-artwork {
+    width: 200px;
+    margin: 16px auto;
+    height: 200px;
+  }
+
   .podcasts-list {
     height: 100%;
     width: 280px;
@@ -2500,6 +2506,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     overflow-y: overlay;
     border-right: 1px solid var(--color2);
     flex: none;
+    overflow-x: hidden;
   }
 
   .episodes-list {
@@ -2507,6 +2514,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     width: 100%;
     background: rgb(200 200 200 / 6%);
     overflow-y: overlay;
+    overflow-x: hidden;
+
+    .episodes-inline-info {
+      padding: 14px 14px 0px 14px;
+
+      .podcast-show-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      .podcast-show-description {
+        margin: 32px 6px;
+        font-size: 0.8rem;
+        white-space: pre-wrap;
+        display:block;
+      }
+
+      .podcast-artwork {
+        width: 120px;
+        margin: 0px auto;
+        height: 120px;
+      }
+    }
   }
 
   .podcasts-details {
@@ -2516,6 +2547,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     background: rgba(200, 200, 200, 0.1);
     overflow-y: overlay;
     border-left: 1px solid var(--color2);
+    overflow-x: hidden;
 
     .podcast-genre {
       text-align: center;
@@ -2544,13 +2576,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     .podcast-description {
       margin: 12px;
       font-size: 0.75em;
+      white-space: pre-wrap;
+      display:block;
     }
 
-    .podcast-artwork {
-      width: 200px;
-      margin: 16px auto;
-      height: 200px;
-    }
+    
   }
 
 }

src/renderer/views/pages/podcasts.ejs

@@ -4,6 +4,24 @@
             <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 v-if="podcastSelected.id != -1" class="episodes-inline-info">
+                <div class="row">
+                    <div class="col-auto flex-center">
+                        <div class="podcast-artwork">
+                            <mediaitem-artwork shadow="large" :url="podcastSelected.attributes.artwork.url" size="300"></mediaitem-artwork>
+                        </div>
+                    </div>
+                    <div class="col podcast-show-info">
+                        <h1>{{ podcastSelected.attributes.name }}</h1>
+                        <small>{{ podcastSelected.attributes.releaseFrequency }}</small>
+                        <small>Created: {{ new Date(podcastSelected.attributes.createdDate).toLocaleDateString() }}</small>
+                    </div>
+                </div>
+
+                <div class="well podcast-show-description">{{ podcastSelected.attributes.description.standard }}</div>
+
+                <h3>Episodes</h3>
+            </div>
             <podcast-episode :isselected="selected.id == episode.id" @dblclick.native="playEpisode(episode)" @click.native="selectEpisode(episode)" :item="episode"
                              v-for="episode in episodes"></podcast-episode>
         </div>
@@ -19,7 +37,7 @@
             <div class="podcast-metainfo">
                 {{ msToMinSec(selected.attributes.durationInMilliseconds) }} • {{ new Date(selected.attributes.releaseDateTime).toLocaleString() }}
             </div>
-            <p class="well podcast-description" v-if="selected.attributes.description.standard" v-html="selected.attributes.description.standard"></p>
+            <div class="well podcast-description" v-if="selected.attributes.description.standard">{{ selected.attributes.description.standard }}</div>
             <div class="row">
                 <div class="col">
                     <button class="md-btn md-btn-block" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button>