Merge branch 'release/1.6.0'

Author: SevenOutman

.npmrc

@@ -10,25 +10,31 @@
 [![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)
 [![npm](https://img.shields.io/npm/dt/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)
 
-[![GitHub commit activity the past week, 4 weeks, year](https://img.shields.io/github/commit-activity/y/SevenOutman/vue-aplayer.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop)
+[![Hubble](https://img.shields.io/badge/since-2016-409eff.svg?style=flat-square)](https://hubble.js.org/#/?owner=SevenOutman&repo=vue-aplayer&start)
+[![GitHub commit activity the past year](https://img.shields.io/github/commit-activity/y/SevenOutman/vue-aplayer.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop)
 [![GitHub last commit](https://img.shields.io/github/last-commit/SevenOutman/vue-aplayer/develop.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop)
-[![devDependency Status](https://img.shields.io/david/dev/SevenOutman/vue-aplayer.svg?style=flat-square)](https://david-dm.org/SevenOutman/vue-aplayer#info=devDependencies)
+[![Dependents on GitHub](https://img.shields.io/badge/Dependents-200+-FF53A1.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/network/dependents?dependent_type=REPOSITORY)
 [![Discord](https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg?style=flat-square)](https://discord.gg/e3SeMJE)
 
-![Screenshot](https://i.loli.net/2018/05/26/5b090f01033ca.png)
+![Screenshot](https://i.loli.net/2018/05/26/5b0912ce2e250.png)
+
 
 ### Features
-- Clean and simple UI
-- Playlist
+- Beautiful clean UI
 - Lyrics scroll
+- Playlist with repeat & shuffle controls
 - Custom theme color / Self-adapting theme color
 - Drag and place anywhere
 - Mutex play
 - HLS support
+- **Easy props and API**
+- **Dependency free** and light-weight (gzipped 16KB)
 
 Using Vue-APlayer in your project? [Let me know!](https://github.com/SevenOutman/vue-aplayer/issues/26)
 
+
 ## Usage
 
 ```HTML
@@ -45,22 +51,39 @@ Using Vue-APlayer in your project? [Let me know!](https://github.com/SevenOutman
 
  [**中文文档**](https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md)
 
+
 ## Changelog
 
 Detailed changes fro each release are documented in the [release notes](https://github.com/SevenOutman/vue-aplayer/releases).
 
+
 ## Contribution
 
 Feel free to [open an issue](https://github.com/SevenOutman/vue-aplayer/issues) if you find a bug or have a nice idea.
 
 [PRs are welcome](https://github.com/SevenOutman/vue-aplayer/blob/master/docs/README.md#contribute).
 
+
+## The name
+
+- When referring to `Vue-APlayer`, the name should be written in exactly the same case.
+- When referring to its versions, either `Vue-APlayer@1.x` (GitHub) or `vue-aplayer@1.x` (npm) is fine.
+
+
+## Related projects
+
+- [APlayer](https://github.com/MoePlayer/APlayer): Prior art
+- [@moefe/vue-aplayer](https://github.com/MoePlayer/vue-aplayer): Another Vue implementation of APlayer by [@u3u](https://github.com/u3u)
+
+
 ## Thanks
-[APlayer](https://github.com/MoePlayer/APlayer), for appearance&api design inspiration and prototyping.
 
-[@DIYgod](https://github.com/DIYgod), for creating APlayer and sharing cloud storage for hosting my demo page media resources.
+[@DIYgod](https://github.com/DIYgod), for creating APlayer and sharing cloud storage for hosting Vue-APlayer's demo page media resources.
+
 
 ## License
 
-[MIT Licensed](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE). Copyright (c) 2016-present Shenghao "Doma" Lei
+Vue-APlayer is [MIT Licensed](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE). 
+
+Copyright (c) 2016-present Shenghao "Doma" Lei
 

README.md

@@ -1,12 +1,23 @@
 ## Installation
 
+### Node
+
 ```
 $ yarn add vue-aplayer
 ```
 or if you prefer `npm`
 
 ```
-$ npm install vue-aplayer --save
+$ npm i vue-aplayer
+```
+
+### CDN
+
+```html
+<script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
+<script>
+  Vue.component('aplayer', VueAPlayer)
+</script>
 ```
 
 
@@ -129,6 +140,15 @@ All you need to do is adding [color-thief](https://github.com/lokesh/color-thief
 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.
 
 
+### `disableVersionBadge`
+
+By default Vue-APlayer prints a version badge in console. If you want to silent it, you can set `disableVersionBadge` to `true` before you first create a Vue-APlayer instance.
+
+```js
+import VueAPlayer from 'vue-aplayer'
+VueAPlayer.disableVersionBadge = true
+```
+
 
 ### Slots
 

docs/README.md

@@ -1,15 +1,25 @@
 ## 安装
 
+### Node
+
 ```
 $ yarn add vue-aplayer
 ```
 
 或者如果你选择 `npm`
 
 ```
-$ npm install vue-aplayer --save
+$ npm i vue-aplayer
 ```
 
+### CDN
+
+```html
+<script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
+<script>
+  Vue.component('aplayer', VueAPlayer)
+</script>
+```
 
 
 ## 运行时要求
@@ -131,6 +141,15 @@ new Vue({
 从 `v1.3.0` 开始, Vue-APlayer 可选支持 `*.m3u8` 音频. 你需要做的就是在项目中安装 [hls.js](https://github.com/video-dev/hls.js) 包即可.
 
 
+### `disableVersionBadge`
+
+Vue-APlayer 默认会在控制台打印出当前的版本标识，如果你想要禁用它，可以将 `disableVersionBadge` 设为 `true`。
+
+```js
+import VueAPlayer from 'vue-aplayer'
+VueAPlayer.disableVersionBadge = true
+```
+
 
 ### Slots
 

docs/README.zh-CN.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-aplayer",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "Easy-to-use music player for Vue 2.x",
   "main": "dist/vue-aplayer.min.js",
   "files": [
@@ -27,7 +27,9 @@
     "aplayer",
     "vue-aplayer",
     "music-player",
-    "html5"
+    "html5",
+    "component",
+    "vue-compoents"
   ],
   "author": {
     "name": "Doma",
@@ -51,7 +53,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^0.28.10",
     "eslint": "^4.18.2",
-    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-vue": "^4.3.0",
     "file-loader": "^1.1.11",

package.json

@@ -113,7 +113,7 @@
   .aplayer-bar-wrap {
     margin: 0 0 0 5px;
     padding: 4px 0;
-    cursor: pointer !important;
+    cursor: pointer;
     flex: 1;
 
     .aplayer-bar {
@@ -157,7 +157,7 @@
           transition: transform 300ms, background-color .3s, border-color .3s;
           border-radius: 50%;
           background: #fff;
-          cursor: pointer !important;
+          cursor: pointer;
 
           &:hover {
             transform: scale(1);

src/components/aplayer-controller-progress.vue

@@ -75,7 +75,7 @@
 
   .aplayer-volume-wrap {
     position: relative;
-    cursor: pointer !important;
+    cursor: pointer;
     z-index: 0;
 
     &:hover .aplayer-volume-bar-wrap {
@@ -90,12 +90,12 @@
       right: -4px;
       height: 40px;
       z-index: -1;
-      /*overflow: hidden;*/
       transition: all .2s ease;
+
       &::after {
         content: '';
         position: absolute;
-        bottom: -15px;
+        bottom: -16px;
         left: 0;
         right: 0;
         height: 62px;
@@ -106,11 +106,11 @@
       .aplayer-volume-bar {
         position: absolute;
         bottom: 0;
-        left: 9px;
-        width: 9px;
+        left: 11px;
+        width: 5px;
         height: 40px;
         background: #aaa;
-        border-radius: 5px;
+        border-radius: 2.5px;
         overflow: hidden;
         z-index: 1;
 

src/components/aplayer-controller-volume.vue

@@ -21,9 +21,24 @@
         @togglemute="$emit('togglemute')"
         @setvolume="v => $emit('setvolume', v)"
       />
-      <icon-button class="aplayer-icon-mode" icon="shuffle" @click.native="$emit('toggleshuffle')" :class="{ 'inactive': !shuffle }"/>
-      <icon-button class="aplayer-icon-mode" :icon="repeat === 'repeat-one' ? 'repeat-one' : 'repeat-all'" :class="{ 'inactive': repeat === 'no-repeat'}" @click.native="$emit('nextmode')"/>
-      <icon-button class="aplayer-icon-menu" icon="menu" @click.native="$emit('togglelist')"/>
+      <icon-button
+        class="aplayer-icon-mode"
+        icon="shuffle"
+        :class="{ 'inactive': !shuffle }"
+        @click.native="$emit('toggleshuffle')"
+      />
+      <icon-button
+        class="aplayer-icon-mode"
+        :icon="repeat === 'repeat-one' ? 'repeat-one' : 'repeat-all'"
+        :class="{ 'inactive': repeat === 'no-repeat'}"
+        @click.native="$emit('nextmode')"
+      />
+      <icon-button
+        class="aplayer-icon-menu"
+        icon="menu"
+        :class="{ 'inactive': !$parent.showList }"
+        @click.native="$emit('togglelist')"
+      />
     </div>
   </div>
 </template>
@@ -74,14 +89,11 @@
   .aplayer-controller {
     display: flex;
     align-items: center;
-
     position: relative;
 
-
     .aplayer-time {
       display: flex;
       align-items: center;
-
       position: relative;
       height: 17px;
       color: #999;
@@ -92,12 +104,16 @@
         margin-left: 4px;
         margin-right: 4px;
       }
+
       .aplayer-icon {
         cursor: pointer;
         transition: all 0.2s ease;
-
         margin-left: 4px;
 
+        &.inactive {
+          opacity: .3;
+        }
+
         .aplayer-fill {
           fill: #666;
         }
@@ -126,7 +142,6 @@
         }
       }
     }
-
   }
 
 </style>

src/components/aplayer-controller.vue

@@ -38,10 +38,6 @@
       opacity: 1;
     }
 
-    &.inactive  {
-      opacity: .3;
-    }
-
     .aplayer-fill {
       transition: all .2s ease-in-out;
     }