Merge branch 'upcoming' of https://github.com/ciderapp/Cider into upcoming

src/main/base/app.ts

@@ -1,6 +1,5 @@
 import * as electron from 'electron';
 import * as path from 'path';
-
 export class AppEvents {
     private static protocols: any = [
         "ame",
@@ -125,45 +124,28 @@ export class AppEvents {
         }
         // Play
         else if (arg.includes('/play/')) { //Steer away from protocol:// specific conditionals
-
             const playParam = arg.split('/play/')[1]
             if (playParam.includes('s/')) { // song
                 console.log(playParam)
                 let song = playParam.split('s/')[1]
                 console.warn(`[LinkHandler] Attempting to load song by id: ${song}`);
-                // AppEvents.window.webContents.executeJavaScript(`
-                //     MusicKit.getInstance().setQueue({ song: '${song}'}).then(function(queue) {
-                //         MusicKit.getInstance().play();
-                //     });
-                // `)
+                electron.ipcRenderer.send('play', 'song', song)
             } else if (playParam.includes('a/')) { // album
                 console.log(playParam)
                 let album = playParam.split('a/')[1]
                 console.warn(`[LinkHandler] Attempting to load album by id: ${album}`);
-                // AppEvents.window.webContents.executeJavaScript(`
-                //     MusicKit.getInstance().setQueue({ album: '${album}'}).then(function(queue) {
-                //         MusicKit.getInstance().play();
-                //     });
-                // `)
+                electron.ipcRenderer.send('play', 'album', album)
             } else if (playParam.includes('p/')) { // playlist
                 console.log(playParam)
                 let playlist = playParam.split('p/')[1]
                 console.warn(`[LinkHandler] Attempting to load playlist by id: ${playlist}`);
-                // AppEvents.window.webContents.executeJavaScript(`
-                //     MusicKit.getInstance().setQueue({ playlist: '${playlist}'}).then(function(queue) {
-                //         MusicKit.getInstance().play();
-                //     });
-                // `)
+                electron.ipcRenderer.send('play', 'playlist', playlist)
             }
         } else if (arg.includes('music.apple.com')) { // URL (used with itms/itmss/music/musics uris)
                 console.log(arg)
                 let url = arg.split('//')[1]
                 console.warn(`[LinkHandler] Attempting to load url: ${url}`);
-                // AppEvents.window.webContents.executeJavaScript(`
-                //     MusicKit.getInstance().setQueue({ url: 'https://${url}'}).then(function(queue) {
-                //         MusicKit.getInstance().play();
-                //     });
-                // `)
+                electron.ipcRenderer.send('play', 'url', url)
             }
     }
 }

src/main/base/win.ts

@@ -423,6 +423,14 @@ export class Win {
         })
         
 
+        electron.ipcMain.on('play', (event, type, id) => {
+            this.win.webContents.executeJavaScript(`
+                     MusicKit.getInstance().setQueue({ ${type}: '${id}'}).then(function(queue) {
+                         MusicKit.getInstance().play();
+                     });
+                `)
+        })
+
         function getIp() {
             let ip = false;
             let alias = 0;
@@ -500,7 +508,6 @@ export class Win {
             return { action: "deny" };
         });
     }
-
     private async broadcastRemote() {
         function getIp() {
             let ip :any = false;

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">
-                <button @click="addToLibrary()"
-                        v-if="!addedToLibrary">
-                    <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
-                </button>
-                <button v-else style="opacity:0;">❤️</button>
+            <div class="isLibrary"" v-if="showLibraryStatus == true">
+                <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
+                    <button @click="addToLibrary()" v-if="!addedToLibrary">
+                        <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
+                    </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>