loading checker

src/assets/loading.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
+    <path d="M4 16c0-6.6 5.4-12 12-12s12 5.4 12 12c0 1.2-0.8 2-2 2s-2-0.8-2-2c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.2 0 2 0.8 2 2s-0.8 2-2 2c-6.6 0-12-5.4-12-12z"></path>
+</svg>

src/css/index.scss

@@ -86,6 +86,16 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
         }
     }
 
+    &.aplayer-loading {
+        .aplayer-info .aplayer-controller .aplayer-loading-icon {
+            display: block;
+        }
+
+        .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
+            transform: scale(1);
+        }
+    }
+
     .aplayer-icon {
         width: 15px;
         height: 15px;
@@ -345,6 +355,15 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
                     }
                 }
             }
+
+            .aplayer-loading-icon {
+                display: none;
+
+                svg {
+                    position: absolute;
+                    animation: rotate 1s linear infinite;
+                }
+            }
         }
     }
 
@@ -496,3 +515,12 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
     0%{left:0}
     100%{left: -100%}
 }
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
+}

src/js/icons.js

@@ -9,6 +9,7 @@ import menu from '../assets/menu.svg';
 import loopAll from '../assets/loop-all.svg';
 import loopOne from '../assets/loop-one.svg';
 import loopNone from '../assets/loop-none.svg';
+import loading from '../assets/loading.svg';
 
 const Icons = {
     play: play,
@@ -22,6 +23,7 @@ const Icons = {
     loopAll: loopAll,
     loopOne: loopOne,
     loopNone: loopNone,
+    loading: loading,
 };
 
 export default Icons;

src/js/player.js

@@ -250,6 +250,7 @@ class APlayer {
                 this.pause();
             });
 
+            this.timer.enable('loading');
             this.timer.enable('progress');
 
             if (this.options.mutex) {
@@ -282,6 +283,7 @@ class APlayer {
 
             this.audio.pause();
 
+            this.timer.disable('loading');
             this.timer.disable('progress');
         });
     }

src/js/timer.js

@@ -15,7 +15,7 @@ class Timer {
             }
         )();
 
-        this.types = ['progress'];
+        this.types = ['loading', 'progress'];
 
         this.init();
     }
@@ -42,6 +42,31 @@ class Timer {
         }, 100);
     }
 
+    initloadingChecker () {
+        let lastPlayPos = 0;
+        let currentPlayPos = 0;
+        let bufferingDetected = false;
+        this.loadingChecker = setInterval(() => {
+            if (this.enableloadingChecker) {
+                // whether the audio is buffering
+                currentPlayPos = this.player.audio.currentTime;
+                if (!bufferingDetected
+                    && currentPlayPos === lastPlayPos
+                    && !this.player.audio.paused) {
+                    this.player.container.classList.add('aplayer-loading');
+                    bufferingDetected = true;
+                }
+                if (bufferingDetected
+                    && currentPlayPos > lastPlayPos
+                    && !this.player.audio.paused) {
+                    this.player.container.classList.remove('aplayer-loading');
+                    bufferingDetected = false;
+                }
+                lastPlayPos = currentPlayPos;
+            }
+        }, 100);
+    }
+
     enable (type) {
         this[`enable${type}Checker`] = true;
 

src/template/player.art

@@ -14,7 +14,9 @@
             <div class="aplayer-bar">
                 <div class="aplayer-loaded" style="width: 0"></div>
                 <div class="aplayer-played" style="width: 0; background: {{ options.theme }};">
-                    <span class="aplayer-thumb" style="background: {{ options.theme }};"></span>
+                    <span class="aplayer-thumb" style="background: {{ options.theme }};">
+                        <span class="aplayer-loading-icon">{{@ icons.loading }}</span>
+                    </span>
                 </div>
             </div>
         </div>