Merge branch 'release/1.3.0'

Author: SevenOutman

.travis.yml

@@ -5,6 +5,7 @@ node_js:
 script: npm run lint
 
 cache:
+  yarn: true
   directories:
     - "node_modules"
 
@@ -18,7 +19,7 @@ deploy:
     github-token: $GITHUB_TOKEN  # Set in travis-ci.org dashboard, marked secure
     keep-history: true
     on:
-      branch: develop
+      branch: master
     local-dir: demo
   - provider: npm
     skip-cleanup: true

README.md

@@ -1,29 +1,30 @@
-# vue-aplayer 
-[![npm](https://img.shields.io/npm/v/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer)
-[![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)
-[![npm](https://img.shields.io/npm/l/vue-aplayer.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE)
+<h1 align="center">Vue-APlayer</h1>
 
-Vue implementation of [APlayer](https://github.com/MoePlayer/APlayer) prototype.
+> Vue implementation of [APlayer](https://github.com/MoePlayer/APlayer) prototype.
 [**Demo**](https://sevenoutman.github.io/vue-aplayer)
 
-![image](https://i.loli.net/2018/03/13/5aa6bd4562f39.png)
 
-## Install
+[![Travis](https://img.shields.io/travis/SevenOutman/vue-aplayer.svg?style=flat-square)](https://travis-ci.org/SevenOutman/vue-aplayer)
+[![npm](https://img.shields.io/npm/v/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer)
+[![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)
 
-```
-$ npm install vue-aplayer --save
-```
+![vue-aplayer](https://i.loli.net/2018/03/16/5aab3da0746e7.png)
 
-## Requirements
+### Features
+- Clean and simple UI
+- Playlist
+- Lyrics scroll
+- Custom theme color / Self-adapting theme color
+- Mutex play
+- HLS support
 
-- Promise
-- fetch
+Using Vue-APlayer in your project? [Let me know!](https://github.com/SevenOutman/vue-aplayer/issues/26)
 
 ## Usage
 
 ```HTML
-<aplayer autoplay 
+<aplayer autoplay
   :music="{
     title: 'Preparation',
     author: 'Hans Zimmer/Richard Harvey',
@@ -33,84 +34,18 @@ $ npm install vue-aplayer --save
   }"
 />
 ```
-
-```JS
-// ES6
-import Aplayer from 'vue-aplayer'
-
-new Vue({
-    components: {
-        Aplayer
-    }
-})
-```
-
-
-### Props
-
-Props are mostly the same as [APlayer's options](https://aplayer.js.org/#/home?id=options).
-
-| Name | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| music| Object | *required* | Music info for current playing music, see [Music info](https://github.com/SevenOutman/vue-aplayer#music-info) |
-| list | Array | `[]` | Music list to play and display. If list is not empty, music list panel will be shown, even if the only song in the list is identical to music prop. |
-| mini | Boolean | `false` | Mini mode |
-| float | Boolean | `false` | Float mode, in which you can drag the player around and leave it anywhere on your page |
-| autoplay | Boolean | `false` | Whether to autoplay. If more than one mutex player are set autoplay, only the first one will play. |
-| showlrc | Boolean | `false` | Whether to show lyrics or not |
-| mutex | Boolean | `true` | Pause other players when this player is playing |
-| theme | String | `'#b7daff'` | Theme color |
-| mode | String | `'circulation'` | Play mode, can be 'random' 'single 'circulation'(loop) or 'order'(no loop) |
-| preload | String | `'auto'` | The way to load music, can be 'none' 'metadata' or 'auto' |
-| listMaxHeight | String | *none* | Max height of play list |
-| narrow | Boolean | `false` | DEPRECATED, use `mini` instead |
-| listmaxheight | String | *none* | DEPRECATED, use `listMaxHeight` instead |
-
-> If you are using Vue@2.3.0+, you can use [`.sync` Modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) on `music` and `mode` prop.
-
-### Music info
-
-The `music` props can either be an object containing info of the song to play, or an array of such objects.
-
-| Property | Default | Description |
-| -------- | ------- | ----------- |
-| url | *required* | music url |
-| title | `'Untitled'` | music title |
-| author | `'Unknown'` | music author |
-| pic | *none* | music cover picture |
-| lrc | *none* | lrc or url to a .lrc file, see: [LRC](https://aplayer.js.org/#/home?id=lrc) |
-
-> vue-aplayer uses [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to load your lrc when it's a url.
-> If your browser doesn't support fetch by default, please use polyfills like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch).
-
-### Events
-
-| Name | Params | Description |
-| ---- | ------ | ----------- |
-| play | none | Triggered when APlayer start play |
-| pause | none | Triggered when APlayer paused |
-| canplay | none | Triggered when enough data is available that APlayer can play |
-| playing | none | Triggered periodically when APlayer is playing |
-| ended | none | Triggered when APlayer ended playing |
-| error | none | Triggered when an error occurs |
-
-### Slots
-
-- `slot="display"`
-
-This slot represents the content displayed on the music info panel, which by default is the lyric scroll.
-
-The component in this slot will receive two props: `currentMusic` and `playStat`.
+ [**Full documentation**](https://github.com/SevenOutman/vue-aplayer/blob/master/docs)
 
 ## Contribute
 
-Feel free to [open an issue](https://github.com/SevenOutman/vue-aplayer/issues) if you find a bug.
+Feel free to [open an issue](https://github.com/SevenOutman/vue-aplayer/issues) if you find a bug or have a nice idea.
 
-Feature requests and PRs are welcome.
+[PRs are welcome](https://github.com/SevenOutman/vue-aplayer/blob/master/docs/README.md#contribute).
 
 ## Thanks
 [APlayer](https://github.com/MoePlayer/APlayer), for appearance&api design inspiration and prototyping.
 
-## LICENSE
+## License
+
+[MIT Licensed](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE). Copyright (c) 2016-present Shenghao "Doma" Lei
 
-MIT Licensed. See [LICENSE](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE).

docs/README.md

@@ -4,6 +4,11 @@
 $ npm install vue-aplayer --save
 ```
 
+## Requirements
+
+- Promise
+- fetch
+
 ## Usage
 
 ```HTML
@@ -40,14 +45,15 @@ Props are mostly the same as [APlayer's options](https://aplayer.js.org/#/home?i
 | mini | Boolean | `false` | Mini mode |
 | float | Boolean | `false` | Float mode, in which you can drag the player around and leave it anywhere on your page |
 | autoplay | Boolean | `false` | Whether to autoplay. If more than one mutex player are set autoplay, only the first one will play. |
-| showlrc | Boolean | `false` | Whether to show lyrics or not |
-| mutex | Boolean | `false` | Pause other players when this player is playing |
+| showLrc | Boolean | `false` | Whether to show lyrics or not |
+| mutex | Boolean | `true` | Pause other players when this player is playing |
 | theme | String | `'#b7daff'` | 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) |
 | preload | String | `'auto'` | The way to load music, can be 'none' 'metadata' or 'auto' |
 | listMaxHeight | String | *none* | Max height of play list |
-| narrow | Boolean | `false` | DEPRECATED, use `mini` instead |
-| listmaxheight | String | *none* | DEPRECATED, use `listMaxHeight` instead |
+| narrow |  | | DEPRECATED, use `mini` instead |
+| listmaxheight |  |  | DEPRECATED, use `listMaxHeight` instead |
+| showlrc |  |  | DEPRECATED, use `showLrc` instead |
 
 > If you are using Vue@2.3.0+, you can use [`.sync` Modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) on `music` and `mode` prop.
 
@@ -61,6 +67,7 @@ The `music` props can either be an object containing info of the song to play, o
 | title | `'Untitled'` | Music title |
 | author | `'Unknown'` | Music author |
 | pic | *none* | Music cover picture |
+| theme | *none* | Song-specific theme color |
 | lrc | *none* | lrc or url to a .lrc file, see: [LRC](https://aplayer.js.org/#/home?id=lrc) |
 
 > vue-aplayer uses [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to load your lrc when it's a url.
@@ -77,6 +84,23 @@ The `music` props can either be an object containing info of the song to play, o
 | ended | none | Triggered when APlayer ended playing |
 | error | none | Triggered when an error occurs |
 
+## Advanced
+
+### Self-adapting theme color
+Since `v1.3.0`, if you set a **Music Object**'s `theme` property to `'pic'`, Vue-APlayer will pick color from the songs cover image as theme color.
+Also, you can set player's `theme` prop to `'pic'`, it will apply to every song.
+
+All you need to do is adding [color-thief](https://github.com/lokesh/color-thief) to your page.
+> Note that color-thief is **NOT module compatible**
+
+```
+<!-- or other CDNs you prefer -->
+<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
+```
+
+### HLS support
+Since `v1.3.0`, Vue-APlayer supports `*.m3u8` media as an optional functionality. Simply install [hls.js](https://github.com/video-dev/hls.js) into your project, and Vue-APlayer handles the rest.
+
 ### Slots
 
 - `slot="display"`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-aplayer",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Easy-to-config music player for Vue 2.x",
   "main": "dist/vue-aplayer.min.js",
   "files": [
@@ -14,7 +14,6 @@
     "build:demo": "export NODE_ENV=production && webpack --progress --hide-modules --config webpack.demo.config.js",
     "prepublishOnly": "npm run build",
     "predeploy": "npm run build:demo && echo 'vue-aplayer.js.org' > demo/CNAME",
-    "deploy": "gh-pages -d demo",
     "lint": "eslint --ext .js,.vue src"
   },
   "repository": {
@@ -40,7 +39,7 @@
   "homepage": "https://github.com/SevenOutman/vue-aplayer#readme",
   "dependencies": {},
   "peerDependencies": {
-    "vue": "^2.5.13"
+    "vue": "^2.5.16"
   },
   "devDependencies": {
     "autoprefixer": "^8.1.0",
@@ -55,14 +54,13 @@
     "eslint-loader": "^2.0.0",
     "eslint-plugin-vue": "^4.3.0",
     "file-loader": "^1.1.11",
-    "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^3.0.6",
     "node-sass": "^4.5.0",
     "postcss-loader": "^2.1.1",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.20.2",
     "url-loader": "^1.0.1",
-    "vue": "^2.5.13",
+    "vue": "^2.5.16",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^14.2.1",
     "vue-template-compiler": "^2.5.13",
@@ -73,5 +71,8 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "optionalDependencies": {
+    "hls.js": "^0.8.9"
+  }
 }

src/components/aplayer-controller.vue

@@ -105,6 +105,7 @@
           top: 0;
           bottom: 0;
           height: 2px;
+          transition: background-color .3s;
 
           .aplayer-thumb {
             position: absolute;
@@ -115,10 +116,11 @@
             width: 10px;
             height: 10px;
             transform: scale(.8);
-            transition: transform 300ms;
+            transition: transform 300ms, background-color .3s, border-color .3s;
             border-radius: 50%;
             background: #fff;
             cursor: pointer !important;
+
             &:hover {
               transform: scale(1);
             }
@@ -209,7 +211,7 @@
             bottom: 0;
             right: 0;
             width: 5px;
-            transition: all 0.1s ease;
+            transition: all 0.1s ease, background-color .3s;
           }
         }
       }

src/components/aplayer-list.vue

@@ -119,6 +119,8 @@
           left: 0;
           top: 5px;
           cursor: pointer;
+          transition: background-color .3s;
+
         }
         .aplayer-list-index {
           color: #666;

src/components/aplayer-thumbnail.vue

@@ -15,7 +15,6 @@
 </template>
 <script>
   import IconButton from './aplayer-iconbutton.vue'
-  import {getElementViewLeft, getElementViewTop} from '../utils'
 
   export default {
     components: {