Merge branch 'hotfix/1.4.1'

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()
  },
  },