Merge branch 'hotfix/1.4.1'

Author: SevenOutman

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
@@ -28,7 +28,7 @@ Using Vue-APlayer in your project? [Let me know!](https://github.com/SevenOutman
 <aplayer autoplay
   :music="{
     title: 'secret base~君がくれたもの~',
-    author: 'Silent Siren',
+    artist: 'Silent Siren',
     src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
     pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
   }"

docs/README.md

@@ -19,7 +19,7 @@ $ npm install vue-aplayer --save
 <aplayer autoplay
   :music="{
     title: 'secret base~君がくれたもの~',
-    author: 'Silent Siren',
+    artist: 'Silent Siren',
     src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
     pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
   }"
@@ -52,6 +52,7 @@ new Vue({
 | theme | String | `'#41b883'` | Theme color, will be overridden by current `music`'s theme if set |
 | mode | String | `'circulation'` | Play mode, can be 'random' 'single 'circulation'(loop) or 'order'(no loop) |
 | listMaxHeight | String | *none* | Max height of play list |
+| listFolded | Boolean | `false` | Fold playlist initially |
 | narrow |  | | DEPRECATED, use `mini` instead |
 | listmaxheight |  |  | DEPRECATED, use `listMaxHeight` instead |
 | showlrc |  |  | DEPRECATED, use `showLrc` instead |
@@ -84,11 +85,12 @@ The `music` props contains info of the song to play.
 | -------- | ------- | ----------- |
 | src | *required* | Music source url |
 | title | `'Untitled'` | Music title |
-| author | `'Unknown'` | Music author |
+| artist | `'Unknown'` | Music artist |
 | pic | *none* | Music cover picture |
 | lrc | *none* | lrc or url to a .lrc file, see: [LRC](https://aplayer.js.org/#/home?id=lrc) |
 | theme | *none* | Song-specific theme color |
-| url || DEPRECATED, use `src` instead |
+| url | | DEPRECATED, use `src` instead |
+| author |  | DEPRECATED, use `artist` instead |
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-aplayer",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Easy-to-config music player for Vue 2.x",
   "main": "dist/vue-aplayer.min.js",
   "files": [

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>

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'],

src/components/aplayer-list.vue

@@ -18,7 +18,7 @@
         <span class="aplayer-list-cur" :style="{background: theme}"></span>
         <span class="aplayer-list-index">{{ index + 1}}</span>
         <span class="aplayer-list-title">{{ aMusic.title || 'Untitled' }}</span>
-        <span class="aplayer-list-author">{{ aMusic.author || 'Unknown' }}</span>
+        <span class="aplayer-list-author">{{ aMusic.artist || aMusic.author || 'Unknown' }}</span>
       </li>
     </ol>
   </div>
@@ -46,8 +46,9 @@
       listmaxheight: String,
     },
     mounted () {
-      this.$el.style.height = `${this.$el.offsetHeight}px`
-      this.$refs.ol.style.height = `${this.$el.offsetHeight}px`
+      const listHeight = 33 * this.musicList.length - 1
+      this.$el.style.height = `${listHeight}px`
+      this.$refs.ol.style.height = `${listHeight}px`
     },
   }
 </script>

src/components/aplayer-thumbnail.vue

@@ -22,6 +22,7 @@
     },
     props: {
       pic: String,
+      theme: String,
       playing: {
         type: Boolean,
         default: false,
@@ -43,6 +44,7 @@
         if (!this.pic) return {}
         return {
           backgroundImage: `url(${this.pic})`,
+          backgroundColor: this.theme
         }
       },
     },

src/demo/App.vue

@@ -13,8 +13,8 @@
       </svg>
     </a>
     <div class="container">
-      <h1>Vue-APlayer</h1>
-      <p>
+      <h1 align="center">Vue-APlayer</h1>
+      <p align="center">
         <a href="https://www.npmjs.com/package/vue-aplayer"><img
           src="https://img.shields.io/npm/v/vue-aplayer.svg?style=flat-square"/></a>
         <a href="https://david-dm.org/SevenOutman/vue-aplayer#info=devDependencies"><img
@@ -28,7 +28,7 @@
       <aplayer
         :music="{
           title: 'secret base~君がくれたもの~',
-          author: 'Silent Siren',
+          artist: 'Silent Siren',
           src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
           pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
         }"
@@ -74,7 +74,7 @@
         mode="circulation"
         :music="{
           title: 'トリカゴ',
-          author: 'XX:me',
+          artist: 'XX:me',
           src: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
           pic: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
         }"
@@ -113,28 +113,28 @@
         list3: [
           {
             title: '前前前世',
-            author: 'RADWIMPS',
+            artist: 'RADWIMPS',
             src: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
             pic: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
             lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
           },
           {
             title: '光るなら.m3u8',
-            author: 'Goose house',
+            artist: 'Goose house',
             src: 'https://moeplayer.b0.upaiyun.com/aplayer/hls/hikarunara.m3u8',
             pic: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
             lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
           },
           {
             title: '回レ！雪月花',
-            author: '小倉唯',
+            artist: '小倉唯',
             src: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3',
             pic: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg',
             lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc'
           },
           {
             title: 'あっちゅ～ま青春!',
-            author: '七森中☆ごらく部',
+            artist: '七森中☆ごらく部',
             src: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.mp3',
             pic: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.jpg',
             lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.lrc',
@@ -161,7 +161,7 @@
   }
 
   h1 {
-    font-size: 54px;
+    font-size: 48px;
     color: #41b883;
     margin: 30px 0 10px;
   }

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"
   >
@@ -14,14 +15,15 @@
         :pic="currentMusic.pic"
         :playing="isPlaying"
         :enable-drag="isFloatMode"
+        :theme="currentTheme"
         @toggleplay="toggle"
         @dragbegin="onDragBegin"
         @dragging="onDragAround"
       />
       <div class="aplayer-info" v-show="!isMiniMode">
         <div class="aplayer-music">
           <span class="aplayer-title">{{ currentMusic.title || 'Untitled' }}</span>
-          <span class="aplayer-author">{{ currentMusic.author || 'Unknown' }}</span>
+          <span class="aplayer-author">{{ currentMusic.artist || currentMusic.author || 'Unknown' }}</span>
         </div>
         <slot name="display" :current-music="currentMusic" :play-stat="playStat">
           <lyrics :current-music="currentMusic" :play-stat="playStat" v-show="shouldShowLrc"/>
@@ -91,6 +93,9 @@
           if (song.url) {
             deprecatedProp('music.url', '1.4.0', 'music.src')
           }
+          if (song.author) {
+            deprecatedProp('music.author', '1.4.1', 'music.artist')
+          }
           return song.src || song.url
         },
       },
@@ -121,7 +126,14 @@
         default: 'circulation',
       },
       listMaxHeight: String,
-
+      /**
+       * @since 1.4.1
+       * Fold playlist initially
+       */
+      listFolded: {
+        type: Boolean,
+        default: false
+      },
 
       /**
        * @since 1.2.0 Float mode
@@ -234,7 +246,7 @@
           loadedTime: 0,
           playedTime: 0,
         },
-        showList: true,
+        showList: !this.listFolded,
 
         // handle Promise returned from audio.play()
         // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
@@ -257,7 +269,11 @@
         // sync muted, volume
 
         internalMuted: this.muted,
-        internalVolume: this.volume
+        internalVolume: this.volume,
+
+        // @since 1.4.1
+        // Loading indicator
+        isLoading: false
       }
     },
     computed: {
@@ -512,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
@@ -597,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))
@@ -610,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)
@@ -653,6 +679,9 @@
 
       currentMusic: {
         handler (music) {
+          // async
+          this.setSelfAdaptingTheme()
+
           const src = music.src || music.url
           // HLS support
           if (/\.m3u8(?=(#|\?|$))/.test(src)) {
@@ -680,7 +709,6 @@
             this.audio.src = src
           }
           // self-adapting theme color
-          this.setSelfAdaptingTheme()
         },
       },