Merge branch 'release/1.5.0'

Author: SevenOutman

docs/README.md

@@ -50,14 +50,15 @@ new Vue({
 | showLrc | Boolean | `false` | Whether to show lyrics or not |
 | mutex | Boolean | `true` | Pause other players when this player is playing |
 | 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) |
+| shuffle | Boolean | `false` | Shuffle the playlist |
+| repeat | String | `'no-repeat'` | How to repeat play. Either to `'repeat-one'` `'repeat-all'` or `'no-repeat'`. You can also use accordingly `'none'` `'music'` `'list'` for easier remembering |
 | 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 |
 
-> 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` props.
+> If you are using Vue@2.3.0+, you can use [`.sync` Modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) on `music`, `shuffle` and `repeat` props.
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-aplayer",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Easy-to-config music player for Vue 2.x",
   "main": "dist/vue-aplayer.min.js",
   "files": [
@@ -59,6 +59,7 @@
     "postcss-loader": "^2.1.1",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.20.2",
+    "svg-inline-loader": "^0.8.0",
     "url-loader": "^1.0.1",
     "vue": "^2.5.16",
     "vue-html-loader": "^1.2.4",

src/assets/loading.svg

@@ -20,7 +20,8 @@
         @togglemute="$emit('togglemute')"
         @setvolume="v => $emit('setvolume', v)"
       />
-      <icon-button class="aplayer-icon-mode" :icon="mode" @click.native="$emit('nextmode')"/>
+      <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')"/>
     </div>
   </div>
@@ -37,7 +38,7 @@
       VProgress,
       Volume,
     },
-    props: ['mode', 'stat', 'theme', 'volume', 'muted'],
+    props: ['shuffle', 'repeat', 'stat', 'theme', 'volume', 'muted'],
     computed: {
       loadProgress () {
         if (this.stat.duration === 0) return 0

src/assets/lrc.svg

@@ -1,55 +1,29 @@
 <template>
-  <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" :viewBox="viewBox" width="100%">
+  <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" :viewBox="svg.viewBox" width="100%">
     <use xlink:href="#aplayer-${type}"></use>
-    <path class="aplayer-fill" :d="d"></path>
+    <path class="aplayer-fill" :d="svg.d"></path>
   </svg>
 </template>
 
 <script>
+  const requireAssets = require.context('../assets', false, /\.svg$/)
+  const SVGs = requireAssets.keys().reduce((svgs, path) => {
+    const inlineSvg = requireAssets(path)
+    const [raw, viewBox, d] = inlineSvg.match(/^<svg.+?viewBox="(.+?)".*><path.+?d="(.+?)".*><\/path><\/svg>$/)
+
+    svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = {
+      viewBox,
+      d
+    }
+    return svgs
+  }, {})
 
-  const SVG = {
-    'play': ['0 0 16 31', 'M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z'],
-    'pause': ['0 0 17 32', 'M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z'],
-    'volume-up': ['0 0 28 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z'],
-    'volume-down': ['0 0 28 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z'],
-    'volume-off': ['0 0 28 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z'],
-    'circulation': ['0 0 29 32', 'M25.6 9.92q1.344 0 2.272 0.928t0.928 2.272v9.28q0 1.28-0.928 2.24t-2.272 0.96h-22.4q-1.28 0-2.24-0.96t-0.96-2.24v-9.28q0-1.344 0.96-2.272t2.24-0.928h8v-3.52l6.4 5.76-6.4 5.76v-3.52h-6.72v6.72h19.84v-6.72h-4.8v-4.48h6.080z'],
-    'random': ['0 0 33 31', 'M29.867 9.356l-5.003 5.003c-0.094 0.094-0.235 0.141-0.36 0.141-0.266 0-0.5-0.219-0.5-0.5v-3.002h-4.002c-2.079 0-3.064 1.423-3.94 3.111-0.453 0.875-0.844 1.782-1.219 2.673-1.735 4.033-3.768 8.223-8.849 8.223h-3.502c-0.281 0-0.5-0.219-0.5-0.5v-3.002c0-0.281 0.219-0.5 0.5-0.5h3.502c2.079 0 3.064-1.423 3.94-3.111 0.453-0.875 0.844-1.782 1.219-2.673 1.735-4.033 3.768-8.223 8.849-8.223h4.002v-3.002c0-0.281 0.219-0.5 0.5-0.5 0.141 0 0.266 0.063 0.375 0.156l4.987 4.987c0.094 0.094 0.141 0.235 0.141 0.36s-0.047 0.266-0.141 0.36zM10.262 14.781c-0.907-1.892-1.907-3.783-4.268-3.783h-3.502c-0.281 0-0.5-0.219-0.5-0.5v-3.002c0-0.281 0.219-0.5 0.5-0.5h3.502c2.783 0 4.831 1.298 6.41 3.518-0.876 1.344-1.517 2.798-2.142 4.268zM29.867 23.363l-5.003 5.003c-0.094 0.094-0.235 0.141-0.36 0.141-0.266 0-0.5-0.235-0.5-0.5v-3.002c-4.643 0-7.504 0.547-10.396-3.518 0.86-1.344 1.501-2.798 2.126-4.268 0.907 1.892 1.907 3.783 4.268 3.783h4.002v-3.002c0-0.281 0.219-0.5 0.5-0.5 0.141 0 0.266 0.063 0.375 0.156l4.987 4.987c0.094 0.094 0.141 0.235 0.141 0.36s-0.047 0.266-0.141 0.36z'],
-    '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'],
     computed: {
-      viewBox () {
-        return SVG[this.type][0]
-      },
-      d () {
-        return SVG[this.type][1]
-      },
-    },
-  }
-</script>
-
-<style lang="scss">
-  .aplayer-icon {
-    width: 15px;
-    height: 15px;
-    border: none;
-    background-color: transparent;
-    outline: none;
-    cursor: pointer;
-    opacity: .8;
-    vertical-align: middle;
-    padding: 0;
-    font-size: 12px;
-    margin: 0;
-    display: inline;
-
-    .aplayer-fill {
-      transition: all .2s ease-in-out;
+      svg () {
+        return SVGs[this.type] || {}
+      }
     }
   }
-</style>
+</script>

src/assets/menu.svg

@@ -17,3 +17,33 @@
     props: ['icon'],
   }
 </script>
+
+
+<style lang="scss">
+  .aplayer-icon {
+    width: 15px;
+    height: 15px;
+    border: none;
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+    opacity: .8;
+    vertical-align: middle;
+    padding: 0;
+    font-size: 12px;
+    margin: 0;
+    display: inline;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.inactive  {
+      opacity: .3;
+    }
+
+    .aplayer-fill {
+      transition: all .2s ease-in-out;
+    }
+  }
+</style>

src/assets/no-repeat.svg

@@ -15,10 +15,9 @@
     <div class="container">
       <h1 align="center">Vue-APlayer</h1>
       <p align="center">
+        <img :src="`https://img.shields.io/badge/DEMO-v${version}-41b883.svg?style=flat-square`"/>
         <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
-          src="https://img.shields.io/david/dev/SevenOutman/vue-aplayer.svg?style=flat-square"/></a>
         <a href="https://www.npmjs.com/package/vue-aplayer"><img
           src="https://img.shields.io/npm/dt/vue-aplayer.svg?style=flat-square"/></a>
         <a href="https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE"><img
@@ -38,7 +37,8 @@
       <aplayer
         autoplay
         theme="pic"
-        mode="random"
+        shuffle
+        repeat="list"
         show-lrc
         :controls="controls"
         :muted.sync="muted"
@@ -53,12 +53,6 @@
         <li>HLS support</li>
         <li>External controls</li>
         <ul>
-          <li>
-            <a role="button" tabindex="-1" @click="controls = !controls">
-              {{ controls ? 'Hide': 'Show'}} native controls (develop only)
-            </a>
-            <span v-if="controls">Drag on either Vue-APlayer or native controls to see how they synchronize</span>
-          </li>
           <li>
             <a role="button" tabindex="-1" @click="muted = !muted">
               {{ muted ? 'Unmute' : 'Mute' }} player
@@ -106,6 +100,7 @@
     },
     data () {
       return {
+        version: VERSION,
         controls: false,
         volume: 1,
         muted: false,

src/assets/pause.svg

@@ -53,8 +53,8 @@ export function versionCompare (semantic1, semantic2) {
   if (semantic1 === semantic2) {
     return 0
   }
-  const [major1, minor1, patch1] = semantic1.split('.')
-  const [major2, minor2, patch2] = semantic2.split('.')
+  const [major1, minor1, patch1] = semantic1.split('.').map(Number)
+  const [major2, minor2, patch2] = semantic2.split('.').map(Number)
 
   if (major1 > major2) {
     return 1