Merge pull request #173 from JaxonTekk/upcoming

ui changes

src/renderer/style.less

@@ -2689,6 +2689,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         height: 120px;
       }
     }
+
+    .podcast-no-search-results {
+      text-align: center;
+      margin-top: 40px;
+    }
   }
 
   .podcasts-details {
@@ -3632,6 +3637,52 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     background-repeat: no-repeat;
   }
 
+  /* CSS.gg
+  */
+  @keyframes load-bar {
+    10% {box-shadow: inset 0 -4px 0}
+    20% {box-shadow: inset 0 -10px 0}
+    30% {box-shadow: inset 0 -12px 0}
+    40% {box-shadow: inset 0 -8px 0}
+    50% {box-shadow: inset 0 -4px 0}
+    60% {box-shadow: inset 0 -6px 0}
+    80% {box-shadow: inset 0 -12px 0}
+    90% {box-shadow: inset 0 -6px 0}
+    to {box-shadow: inset 0 -2px 0}
+  }
+
+  .loadbar-sound,
+  .loadbar-sound::after,
+  .loadbar-sound::before {
+    animation: load-bar 1.3s ease infinite alternate;
+    box-sizing: border-box;
+    width: 3px;
+    height: 28px;
+    box-shadow: inset 0 -12px 0;
+  }
+  .loadbar-sound {
+    margin-left: 22px;
+    margin-top: -16px;
+    position: relative;
+    transform: scale(var(--load-bar,1));
+    color: var(--keyColor);
+    display: block;
+  }
+  .loadbar-sound::after,
+  .loadbar-sound::before {
+    content: "";
+    position: absolute;
+    bottom: 0
+  }
+  .loadbar-sound::before {
+    left: -4.5px;
+    animation-delay: -2.4s
+  }
+  .loadbar-sound::after {
+    right: -4.2px;
+    animation-delay: -3.7s
+  }
+
   .isLibrary {
     flex: 0 0 auto;
     width: 40px;

src/renderer/views/components/mediaitem-list-item.ejs

@@ -14,12 +14,15 @@
          @mouseleave="showInLibrary = false"
          :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
         <template v-if="isVisible">
-            <div class="isLibrary" :style="{opacity: (showInLibrary ? 1 : 0)}" v-if="showLibraryStatus == true">
+            <div class="isLibrary"" v-if="showLibraryStatus == true">
-                <button @click="addToLibrary()"
+                <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
-                        v-if="!addedToLibrary">
+                    <button @click="addToLibrary()" v-if="!addedToLibrary">
-                    <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
+                        <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
-                </button>
+                    </button>
-                <button v-else style="opacity:0;">❤️</button>
+                </div>
+                <div v-if="app.mk.isPlaying && app.mk.nowPlayingItem._songId == item.attributes.playParams.id" :style="{display: (showInLibrary ? 'none' : 'block')}">
+                    <div class="loadbar-sound"></div>
+                </div>
             </div>
             <div class="artwork" v-if="showArtwork == true">
                 <mediaitem-artwork

src/renderer/views/pages/podcasts.ejs

@@ -58,6 +58,10 @@
                 </div>
                 <h3>Episodes</h3>
             </div>
+            <div v-if="this.search.results.length == 0 && podcastSelected.id == -1" class="podcast-no-search-results">
+                <h3>No Results</h3>
+                <p>Try a new search.</p>
+            </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>