new modules: bar icons options player template utils user

src/css/index.scss

@@ -63,6 +63,28 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
         box-sizing: content-box;
     }
 
+    svg {
+        width: 100%;
+        height: 100%;
+
+        path,
+        circle {
+            fill: #fff;
+        }
+    }
+
+    &.aplayer-mobile {
+        .aplayer-icon-volume-down {
+            display: none;
+        }
+    }
+
+    &.aplayer-arrow {
+        .aplayer-icon-mode {
+            display: none;
+        }
+    }
+
     .aplayer-icon {
         width: 15px;
         height: 15px;
@@ -77,7 +99,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
         margin: 0;
         display: inline;
 
-        .aplayer-fill {
+        path {
             transition: all .2s ease-in-out;
         }
     }
@@ -108,7 +130,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
                 opacity: 1;
             }
 
-            .aplayer-fill {
+            path {
                 fill: #fff;
             }
         }
@@ -240,7 +262,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
                     cursor: pointer;
                     transition: all 0.2s ease;
 
-                    .aplayer-fill {
+                    path {
                         fill: #666;
                     }
 
@@ -249,7 +271,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
                     }
 
                     &:hover {
-                        .aplayer-fill {
+                        path {
                             fill: #000;
                         }
                     }

src/js/bar.js

@@ -0,0 +1,27 @@
+class Bar {
+    constructor (template) {
+        this.elements = {};
+        this.elements.volume = template.volume;
+        this.elements.played = template.played;
+        this.elements.loaded = template.loaded;
+    }
+
+    /**
+     * Update progress
+     *
+     * @param {String} type - Point out which bar it is
+     * @param {Number} percentage
+     * @param {String} direction - Point out the direction of this bar, Should be height or width
+     */
+    set (type, percentage, direction) {
+        percentage = Math.max(percentage, 0);
+        percentage = Math.min(percentage, 1);
+        this.elements[type].style[direction] = percentage * 100 + '%';
+    }
+
+    get (type, direction) {
+        return parseFloat(this.elements[type].style[direction]) / 100;
+    }
+}
+
+export default Bar;

src/js/icons.js

@@ -0,0 +1,25 @@
+import play from '../assets/play.svg';
+import pause from '../assets/pause.svg';
+import volumeUp from '../assets/volume-up.svg';
+import volumeDown from '../assets/volume-down.svg';
+import volumeOff from '../assets/volume-off.svg';
+import circulation from '../assets/circulation.svg';
+import random from '../assets/random.svg';
+import order from '../assets/order.svg';
+import single from '../assets/single.svg';
+import menu from '../assets/menu.svg';
+
+const Icons = {
+    play: play,
+    pause: pause,
+    volumeUp: volumeUp,
+    volumeDown: volumeDown,
+    volumeOff: volumeOff,
+    circulation: circulation,
+    random: random,
+    order: order,
+    single: single,
+    menu: menu,
+};
+
+export default Icons;