add loading indicator to progress bar thumb

SevenOutman · Mar 27, 2018 · f111e9f · f111e9f
1 parent 06f0443
commit f111e9f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 [![devDependency Status](https://img.shields.io/david/dev/SevenOutman/vue-aplayer.svg?style=flat-square)](https://david-dm.org/SevenOutman/vue-aplayer#info=devDependencies)
 [![npm](https://img.shields.io/npm/dt/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer)
 
-![vue-aplayer](https://i.loli.net/2018/03/16/5aab3da0746e7.png)
+![Vue-APlayer](https://i.loli.net/2018/03/16/5aab3da0746e7.png)
 
 ### Features
 - Clean and simple UI

diff --git a/src/components/aplayer-controller-progress.vue b/src/components/aplayer-controller-progress.vue
@@ -21,6 +21,11 @@
           class="aplayer-thumb"
           :style="{borderColor:　theme, backgroundColor: thumbHovered ? theme : '#fff'}"
         >
+          <span class="aplayer-loading-icon"
+                :style="{backgroundColor: theme }"
+          >
+            <icon type="loading"/>
+          </span>
         </span>
       </div>
     </div>
@@ -29,8 +34,12 @@
 
 <script>
   import {getElementViewLeft} from '../utils'
+  import Icon from './aplayer-icon.vue'
 
   export default {
+    components: {
+      Icon
+    },
     props: ['loadProgress', 'playProgress', 'theme'],
     data () {
       return {
@@ -153,8 +162,40 @@
           &:hover {
             transform: scale(1);
           }
+
+          overflow: hidden;
+          .aplayer-loading-icon {
+            display: none;
+            width: 100%;
+            height: 100%;
+
+            svg {
+              position: absolute;
+              animation: spin 1s linear infinite;
+              fill: #ffffff;
+            }
+          }
         }
       }
     }
   }
+
+  .aplayer-loading {
+    .aplayer-bar-wrap .aplayer-bar .aplayer-thumb .aplayer-loading-icon {
+      display: block;
+    }
+
+    .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0)
+    }
+    100% {
+      transform: rotate(360deg)
+    }
+  }
 </style>
diff --git a/src/components/aplayer-icon.vue b/src/components/aplayer-icon.vue
@@ -18,6 +18,7 @@
     'order': ['0 0 32 32', 'M0.622 18.334h19.54v7.55l11.052-9.412-11.052-9.413v7.549h-19.54v3.725z'],
     'single': ['0 0 38 32', 'M2.072 21.577c0.71-0.197 1.125-0.932 0.928-1.641-0.221-0.796-0.333-1.622-0.333-2.457 0-5.049 4.108-9.158 9.158-9.158h5.428c0.056-0.922 0.221-1.816 0.482-2.667h-5.911c-3.158 0-6.128 1.23-8.361 3.463s-3.463 5.203-3.463 8.361c0 1.076 0.145 2.143 0.431 3.171 0.164 0.59 0.7 0.976 1.284 0.976 0.117 0 0.238-0.016 0.357-0.049zM21.394 25.613h-12.409v-2.362c0-0.758-0.528-1.052-1.172-0.652l-5.685 3.522c-0.644 0.4-0.651 1.063-0.014 1.474l5.712 3.69c0.637 0.411 1.158 0.127 1.158-0.63v-2.374h12.409c3.158 0 6.128-1.23 8.361-3.463 1.424-1.424 2.44-3.148 2.99-5.029-0.985 0.368-2.033 0.606-3.125 0.691-1.492 3.038-4.619 5.135-8.226 5.135zM28.718 0c-4.985 0-9.026 4.041-9.026 9.026s4.041 9.026 9.026 9.026 9.026-4.041 9.026-9.026-4.041-9.026-9.026-9.026zM30.392 13.827h-1.728v-6.822c-0.635 0.576-1.433 1.004-2.407 1.285v-1.713c0.473-0.118 0.975-0.325 1.506-0.62 0.532-0.325 0.975-0.665 1.329-1.034h1.3v8.904z'],
     'menu': ['0 0 22 32', 'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'],
+    'loading': ['0 0 32 32', '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']
   };
   export default {
     props: ['type'],

diff --git a/src/vue-aplayer.vue b/src/vue-aplayer.vue
@@ -5,7 +5,8 @@
       'aplayer-narrow': isMiniMode,
       'aplayer-withlist' : !isMiniMode && musicList.length > 0,
       'aplayer-withlrc': !isMiniMode && (!!$slots.display || shouldShowLrc),
-      'aplayer-float': isFloatMode
+      'aplayer-float': isFloatMode,
+      'aplayer-loading': isPlaying && isLoading
     }"
     :style="floatStyleObj"
   >
@@ -268,7 +269,11 @@
         // sync muted, volume
 
         internalMuted: this.muted,
-        internalVolume: this.volume
+        internalVolume: this.volume,
+
+        // @since 1.4.1
+        // Loading indicator
+        isLoading: false
       }
     },
     computed: {
@@ -523,6 +528,12 @@
       onAudioPause () {
         this.isPlaying = false
       },
+      onAudioWaiting () {
+        this.isLoading = true
+      },
+      onAudioCanplay () {
+        this.isLoading = false
+      },
       onAudioDurationChange () {
         if (this.audio.duration !== 1) {
           this.playStat.duration = this.audio.duration
@@ -608,7 +619,9 @@
           'pause', 'play', 'playing', 'progress',
           'ratechange',
           'seeked', 'seeking', 'stalled', 'suspend',
-          'timeupdate', 'volumechange', 'waiting'
+          'timeupdate',
+          'volumechange',
+          'waiting'
         ]
         mediaEvents.forEach(event => {
           this.audio.addEventListener(event, e => this.$emit(event, e))
@@ -621,6 +634,8 @@
         this.audio.addEventListener('play', this.onAudioPlay)
         this.audio.addEventListener('pause', this.onAudioPause)
         this.audio.addEventListener('abort', this.onAudioPause)
+        this.audio.addEventListener('waiting', this.onAudioWaiting)
+        this.audio.addEventListener('canplay', this.onAudioCanplay)
         this.audio.addEventListener('progress', this.onAudioProgress)
         this.audio.addEventListener('durationchange', this.onAudioDurationChange)
         this.audio.addEventListener('seeking', this.onAudioSeeking)