Merge pull request #10 from Iantra/master

Fixed divider showing during loading

lib/index.css

@@ -29,12 +29,14 @@ body {
   height: calc(100vh + 40px);
   -webkit-filter: blur(20px) brightness(35%);
   overflow: hidden;
+  opacity: 0;
 }
 
 #cover {
   position: absolute;
   left: calc(50vw - 320px);
   top: calc(50vh - 320px);
+  opacity: 0;
 }
 
 * {
@@ -46,9 +48,10 @@ body {
   bottom: 7vh;
   width: 100vw;
   text-align: center;
+  opacity: 0;
 }
 
 #track-info > #title {
   font-size: 20px;
   margin-bottom: 6px;
-}
+}

lib/index.js

@@ -15,6 +15,12 @@ ipc.on('artist', function(artist) {
 ipc.on('loadingText', function(text) {
   document.getElementById('loading').innerHTML = text;
 });
+ipc.on('fadein', function() {
+  fadeIn(document.getElementById('cover'));
+  fadeIn(document.getElementById('background'));
+  fadeIn(document.getElementById('track-info'));
+});
+
 document.onkeydown = function(e) {
   e = e || window.event;
   if (e.keyCode == 27) { //ESC
@@ -23,4 +29,20 @@ document.onkeydown = function(e) {
   /*else if (e.keyCode == 84) { //T
 
   }*/
-};
+};
+
+function fadeIn(el) {
+  el.style.opacity = 0;
+
+  var last = +new Date();
+  var tick = function() {
+    el.style.opacity = +el.style.opacity + (new Date() - last) / 800;
+    last = +new Date();
+
+    if (+el.style.opacity < 1) {
+      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 10);
+    }
+  };
+
+  tick();
+}

lib/main.js

@@ -190,6 +190,7 @@ function getAlbumCover(id) {
     coverUrl = data.images[0].url;
     if (mainWindow !== null) {
       mainWindow.webContents.send('coverUrl', coverUrl);
+      mainWindow.webContents.send('fadein');
     }
   });
 }