✨ Improve miniplayer

atcq · Aug 6, 2020 · a4ed2ea · a4ed2ea
1 parent a2aa399
commit a4ed2ea
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 61 deletions.
diff --git a/src/pages/miniplayer/miniplayer.css b/src/pages/miniplayer/miniplayer.css
@@ -166,3 +166,12 @@ body.showinfo #background {
     transition-duration: 0.15s;
     transition-timing-function: ease-out;
 }
+
+#loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    text-align: center;
+}
diff --git a/src/pages/miniplayer/miniplayer.html b/src/pages/miniplayer/miniplayer.html
@@ -21,7 +21,22 @@
     </head>
 
     <body>
-        <div id="content">
+        <div id="loading">
+            <div class="preloader-wrapper big active">
+                <div class="spinner-layer spinner-red-only">
+                    <div class="circle-clipper left">
+                        <div class="circle"></div>
+                    </div>
+                    <div class="gap-patch">
+                        <div class="circle"></div>
+                    </div>
+                    <div class="circle-clipper right">
+                        <div class="circle"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="content" class="hide">
             <div class="cmd-bar drag">
                 <div class="cmd-btn left drag" id="btn-drag">
                     <i class="material-icons">drag_indicator</i>

diff --git a/src/pages/miniplayer/miniplayer.js b/src/pages/miniplayer/miniplayer.js
@@ -1,16 +1,5 @@
 const { ipcRenderer } = require('electron')
 const settingsProvider = require('../../providers/settingsProvider')
-const Vibrant = require('node-vibrant')
-
-const body = document.getElementsByTagName('body')[0]
-const background = document.getElementById('background')
-const title = document.getElementById('title')
-const author = document.getElementById('author')
-
-const current = document.getElementById('current')
-const duration = document.getElementById('duration')
-const progress = document.getElementById('progress')
-const secondsEffect = document.getElementById('secondsEffect')
 
 const btnClose = document.getElementById('btn-close')
 const btnDislike = document.getElementById('btn-dislike')
@@ -19,46 +8,70 @@ const btnPlayPause = document.getElementById('btn-play-pause')
 const btnNext = document.getElementById('btn-next')
 const btnLike = document.getElementById('btn-like')
 
-btnClose.addEventListener('click', () => {
-    ipcRenderer.send('window', { command: 'restore-main-window' })
-})
-
-btnDislike.addEventListener('click', () => {
-    ipcRenderer.send('media-command', { command: 'media-vote-down' })
-})
-
-btnPrevious.addEventListener('click', () => {
-    ipcRenderer.send('media-command', { command: 'media-track-previous' })
-})
-
-btnPlayPause.addEventListener('click', () => {
-    ipcRenderer.send('media-command', { command: 'media-play-pause' })
-    body.classList.toggle('showinfo')
-})
-
-btnNext.addEventListener('click', () => {
-    ipcRenderer.send('media-command', { command: 'media-track-next' })
-})
+let body = document.getElementsByTagName('body')[0]
+let background = document.getElementById('background')
+let title = document.getElementById('title')
+let author = document.getElementById('author')
 
-btnLike.addEventListener('click', () => {
-    ipcRenderer.send('media-command', { command: 'media-vote-up' })
-})
+let current = document.getElementById('current')
+let duration = document.getElementById('duration')
+let progress = document.getElementById('progress')
+let secondsEffect = document.getElementById('secondsEffect')
 
 document.addEventListener('DOMContentLoaded', async () => {
     setPlayerInfo(await retrieveAllInfo())
 
     setInterval(async () => {
         setPlayerInfo(await retrieveAllInfo())
     }, 500)
-})
 
-document.addEventListener('wheel', function (ev) {
-    ev.preventDefault()
-    if (ev.deltaY < 0) {
-        ipcRenderer.send('media-command', { command: 'media-volume-up' })
-    } else {
-        ipcRenderer.send('media-command', { command: 'media-volume-down' })
-    }
+    document.addEventListener('wheel', function (ev) {
+        ev.preventDefault()
+        if (ev.deltaY < 0) {
+            ipcRenderer.send('media-command', { command: 'media-volume-up' })
+        } else {
+            ipcRenderer.send('media-command', { command: 'media-volume-down' })
+        }
+    })
+
+    document.addEventListener('dblclick', (ev) => {
+        if (ev.clientX >= 100) {
+            ipcRenderer.send('media-command', {
+                command: 'media-seekbar-forward',
+            })
+            showDbClickAnimation('right')
+        } else {
+            ipcRenderer.send('media-command', {
+                command: 'media-seekbar-rewind',
+            })
+            showDbClickAnimation('left')
+        }
+    })
+
+    btnClose.addEventListener('click', () => {
+        ipcRenderer.send('window', { command: 'restore-main-window' })
+    })
+
+    btnDislike.addEventListener('click', () => {
+        ipcRenderer.send('media-command', { command: 'media-vote-down' })
+    })
+
+    btnPrevious.addEventListener('click', () => {
+        ipcRenderer.send('media-command', { command: 'media-track-previous' })
+    })
+
+    btnPlayPause.addEventListener('click', () => {
+        ipcRenderer.send('media-command', { command: 'media-play-pause' })
+        body.classList.toggle('showinfo')
+    })
+
+    btnNext.addEventListener('click', () => {
+        ipcRenderer.send('media-command', { command: 'media-track-next' })
+    })
+
+    btnLike.addEventListener('click', () => {
+        ipcRenderer.send('media-command', { command: 'media-vote-up' })
+    })
 })
 
 async function retrieveAllInfo() {
@@ -70,18 +83,9 @@ async function retrieveAllInfo() {
     })
 }
 
-document.addEventListener('dblclick', (ev) => {
-    if (ev.clientX >= 100) {
-        ipcRenderer.send('media-command', { command: 'media-seekbar-forward' })
-        showDbClickAnimation('right')
-    } else {
-        ipcRenderer.send('media-command', { command: 'media-seekbar-rewind' })
-        showDbClickAnimation('left')
-    }
-})
-
 function setPlayerInfo(data) {
     document.title = `${data.track.title} - ${data.track.author}`
+
     body.style.backgroundImage = `url(${data.track.cover})`
     background.style.backgroundImage = `url(${data.track.cover})`
     title.innerHTML = data.track.title || 'Title'
@@ -90,31 +94,33 @@ function setPlayerInfo(data) {
     duration.innerHTML = data.track.durationHuman || '0:00'
     progress.style.width = data.player.statePercent * 100 + '%'
     if (data.player.isPaused) {
-        btnPlayPause.children[0].innerHTML = 'play_arrow'
+        btnPlayPause.children.item(0).innerHTML = 'play_arrow'
         body.classList.add('showinfo')
     } else {
-        btnPlayPause.children[0].innerHTML = 'pause'
+        btnPlayPause.children.item(0).innerHTML = 'pause'
         body.classList.remove('showinfo')
     }
 
     switch (data.player.likeStatus) {
         case 'LIKE':
-            btnLike.children[0].classList.remove('outlined')
-            btnDislike.children[0].classList.add('outlined')
+            btnLike.children.item(0).classList.remove('outlined')
+            btnDislike.children.item(0).classList.add('outlined')
             break
 
         case 'DISLIKE':
-            btnLike.children[0].classList.add('outlined')
-            btnDislike.children[0].classList.remove('outlined')
+            btnLike.children.item(0).classList.add('outlined')
+            btnDislike.children.item(0).classList.remove('outlined')
             break
 
         case 'INDIFFERENT':
-            btnLike.children[0].classList.add('outlined')
-            btnDislike.children[0].classList.add('outlined')
+            btnLike.children.item(0).classList.add('outlined')
+            btnDislike.children.item(0).classList.add('outlined')
             break
     }
 
     if (settingsProvider.get('settings-miniplayer-paint-controls')) {
+        const Vibrant = require('node-vibrant')
+
         Vibrant.from(data.track.cover)
             .getPalette()
             .then((palette) => {
@@ -127,6 +133,11 @@ function setPlayerInfo(data) {
     if (settingsProvider.get('settings-miniplayer-always-show-controls')) {
         body.classList.add('showinfo')
     }
+
+    if (data.track.id) {
+        document.querySelector('#loading').classList.add('hide')
+        document.querySelector('#content').classList.remove('hide')
+    }
 }
 
 function showDbClickAnimation(side) {