loading checker

DIYgod · DIYgod · commit 5e610b15e84a · 2018-03-09T01:41:03.000+08:00
diff --git a/src/assets/loading.svg b/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>
diff --git a/src/css/index.scss b/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)
+    }
+}
diff --git a/src/js/icons.js b/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;
diff --git a/src/js/player.js b/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');
         });
     }
diff --git a/src/js/timer.js b/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;
 
diff --git a/src/template/player.art b/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>

Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,16 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;`
`86`	`86`	`}`
`87`	`87`	`}`
`88`	`88`
	`89`	`+ &.aplayer-loading {`
	`90`	`+ .aplayer-info .aplayer-controller .aplayer-loading-icon {`
	`91`	`+ display: block;`
	`92`	`+ }`
	`93`	`+`
	`94`	`+ .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {`
	`95`	`+ transform: scale(1);`
	`96`	`+ }`
	`97`	`+ }`
	`98`	`+`
`89`	`99`	`.aplayer-icon {`
`90`	`100`	`width: 15px;`
`91`	`101`	`height: 15px;`
`@@ -345,6 +355,15 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;`
`345`	`355`	`}`
`346`	`356`	`}`
`347`	`357`	`}`
	`358`	`+`
	`359`	`+ .aplayer-loading-icon {`
	`360`	`+ display: none;`
	`361`	`+`
	`362`	`+ svg {`
	`363`	`+ position: absolute;`
	`364`	`+ animation: rotate 1s linear infinite;`
	`365`	`+ }`
	`366`	`+ }`
`348`	`367`	`}`
`349`	`368`	`}`
`350`	`369`
`@@ -496,3 +515,12 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;`
`496`	`515`	`0%{left:0}`
`497`	`516`	`100%{left: -100%}`
`498`	`517`	`}`
	`518`	`+`
	`519`	`+@keyframes rotate {`
	`520`	`+ 0% {`
	`521`	`+ transform: rotate(0)`
	`522`	`+ }`
	`523`	`+ 100% {`
	`524`	`+ transform: rotate(360deg)`
	`525`	`+ }`
	`526`	`+}`