changes to podcasts

src/renderer/index.js

@@ -3457,6 +3457,10 @@ const getBase64FromUrl = async(url) => {
     });
 }
 
+function Clone (obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
 function uuidv4() {
     return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
         (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

src/renderer/less/compact.less

@@ -45,7 +45,7 @@
   }
 
   @media (max-width: 951px) {
-    .content-inner {
+    #app-content {
       zoom: 0.8;
     }
   }
@@ -53,7 +53,7 @@
 
 // if page width is less than 951px
 @media (max-width: 951px) {
-  .content-inner {
+  #app-content {
     zoom: 0.8;
   }
 }

src/renderer/style.less

@@ -2574,6 +2574,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     border-right: 1px solid var(--color2);
     flex: none;
     overflow-x: hidden;
+
+    .podcast-list-header {
+      border-bottom: 1px solid var(--color2);
+      font-size: 0.7em;
+      padding: 6px;
+      background: #ffffff17;
+      text-transform: uppercase;
+      font-weight: 600;
+      opacity: 0.5;
+    }
+
+    .podcasts-search {
+      padding: 10px;
+      position: sticky;
+      top:0;
+      left:0;
+      width:100%;
+      border-bottom: 1px solid var(--color2);
+    }
   }
 
   .episodes-list {
@@ -2608,13 +2627,37 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .podcasts-details {
-    height: 100%;
+    height: 96%;
     width: 400px;
     flex: none;
-    background: rgba(200, 200, 200, 0.1);
+    background: rgb(20 20 20 / 97%);
     overflow-y: overlay;
-    border-left: 1px solid var(--color2);
     overflow-x: hidden;
+    position: absolute;
+    right: 2%;
+    top: 2%;
+    border-radius: 10px;
+    box-shadow: var(--ciderShadow-Generic);
+    z-index: 2;
+
+    .close-btn {
+      width: 50px;
+      height: 42px;
+      background-image: var(--gfx-closeBtn);
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      appearance: none;
+      border: 0;
+      background-color: transparent;
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      &:hover {
+        background-color: rgb(196, 43, 28)
+      }
+    }
 
     .podcast-genre {
       text-align: center;

src/renderer/views/pages/podcasts.ejs

@@ -1,7 +1,26 @@
 <script type="text/x-template" id="apple-podcasts">
     <div class="content-inner podcasts-page">
         <div class="podcasts-list">
-            <podcast-tab :isselected="podcastSelected.id == podcast.id" @click.native="selectPodcast(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-tab>
+            <div class="podcasts-search">
+                <div class="search-input-container" style="width:100%;">
+                    <div class="search-input--icon"></div>
+                    <input type="search"
+                           style="width:100%;"
+                           spellcheck="false"
+                           placeholder="Search..."
+                           v-model="search.term" class="search-input">
+                </div>
+            </div>
+            <div>
+                <div class="podcast-list-header" v-if="ciderPodcasts.length != 0">
+                    Followed on Cider
+                </div>
+                <div class="podcast-list-header" v-if="podcasts.length != 0">
+                    Subscribed on iTunes
+                </div>
+                <podcast-tab :isselected="podcastSelected.id == podcast.id" @click.native="selectPodcast(podcast)" v-for="podcast in podcasts" :item="podcast"></podcast-tab>
+    
+            </div>
         </div>
         <div class="episodes-list">
             <div v-if="podcastSelected.id != -1" class="episodes-inline-info">
@@ -25,28 +44,32 @@
             <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>
-        <div class="podcasts-details" v-if="selected.id != -1">
+        <transition name="wpfade">
-            <div class="podcast-artwork">
+            <div class="podcasts-details" v-if="selected.id != -1">
-                <mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
+                <button class="close-btn" @click="selected.id = -1"></button>
-            </div>
+                <div class="podcast-artwork">
-            <h3 class="podcast-header">{{ selected.attributes.name }}</h3>
+                    <mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
-            <button @click="playEpisode(selected)" class="md-btn podcast-play-btn">Play Episode</button>
-            <div class="podcast-genre">
-                {{ selected.attributes.genreNames[0] }}
-            </div>
-            <div class="podcast-metainfo">
-                {{ msToMinSec(selected.attributes.durationInMilliseconds) }} • {{ new Date(selected.attributes.releaseDateTime).toLocaleString() }}
-            </div>
-            <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>
                 </div>
-                <div class="col">
+                <h3 class="podcast-header">{{ selected.attributes.name }}</h3>
-                    <button class="md-btn md-btn-block">Share</button>
+                <button @click="playEpisode(selected)" class="md-btn podcast-play-btn">Play Episode</button>
+                <div class="podcast-genre">
+                    {{ selected.attributes.genreNames[0] }}
+                </div>
+                <div class="podcast-metainfo">
+                    {{ msToMinSec(selected.attributes.durationInMilliseconds) }} • {{ new Date(selected.attributes.releaseDateTime).toLocaleString() }}
+                </div>
+                <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>
+                    </div>
+                    <div class="col">
+                        <button class="md-btn md-btn-block">Share</button>
+                    </div>
                 </div>
             </div>
-        </div>
+        </transition>
+
     </div>
 </script>
 <script type="text/x-template" id="podcast-tab">
@@ -100,8 +123,13 @@
         template: '#apple-podcasts',
         data: function () {
             return {
+                ciderPodcasts: [],
                 podcasts: [],
                 episodes: [],
+                search: {
+                    term: "",
+                    results: []
+                },
                 podcastSelected: {
                     id: -1
                 },
@@ -135,7 +163,7 @@
                 this.getEpisodes(podcast)
             },
             selectEpisode(episode) {
-                this.selected = episode
+                this.selected = Clone(episode)
             },
             async getEpisodes(podcast) {
                 this.episodes = []