Merge branch 'release/1.6.0'

SevenOutman · May 28, 2018 · 2c8c94f · 2c8c94f
2 parents ca504f4 + 58a80ea
commit 2c8c94f
Show file tree

Hide file tree

Showing 15 changed files with 193 additions and 130 deletions.
diff --git a/.npmrc b/.npmrc
diff --git a/README.md b/README.md
@@ -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
 
diff --git a/docs/README.md b/docs/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
 

diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.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
 

diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/components/aplayer-controller-progress.vue b/src/components/aplayer-controller-progress.vue
@@ -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);

diff --git a/src/components/aplayer-controller-volume.vue b/src/components/aplayer-controller-volume.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;
 

diff --git a/src/components/aplayer-controller.vue b/src/components/aplayer-controller.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>
diff --git a/src/components/aplayer-iconbutton.vue b/src/components/aplayer-iconbutton.vue
@@ -38,10 +38,6 @@
  opacity: 1;
  }
 
- &.inactive {
- opacity: .3;
- }
-
  .aplayer-fill {
  transition: all .2s ease-in-out;
  }