From 490cacf518f73a463b03272dce958b1acc4fcaac Mon Sep 17 00:00:00 2001
From: krzysztof-grzybek <krzysztof.grzybek89@gmail.com>
Date: Sun, 11 Sep 2016 16:22:02 +0200
Subject: [PATCH] Add volume control

---
 bower.json              |  3 +-
 paper-audio-player.html | 72 +++++++++++++++++++++++++++++++++--------
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/bower.json b/bower.json
index 74618ff..4170555 100755
--- a/bower.json
+++ b/bower.json
@@ -27,7 +27,8 @@
     "paper-progress": "PolymerElements/paper-progress#~1.0.1",
     "iron-icons": "PolymerElements/iron-icons#~1.0.3",
     "paper-icon-button": "PolymerElements/paper-icon-button#~1.0.5",
-    "paper-ripple": "PolymerElements/paper-ripple#~1.0.5"
+    "paper-ripple": "PolymerElements/paper-ripple#~1.0.5",
+    "paper-slider": "^1.0.11"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/paper-audio-player.html b/paper-audio-player.html
index 665f1bc..5cab30b 100755
--- a/paper-audio-player.html
+++ b/paper-audio-player.html
@@ -4,6 +4,7 @@
 <link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-slider/paper-slider.html">
 
 <link rel="import" href="paper-audio-icons.html">
 
@@ -65,11 +66,17 @@
       #left,
       #right {
         height: 50px;
-        width: 50px;
         position: relative;
+        display: -webkit-flex;
+        display: -moz-flex;
+        display: -ms-flex;
+        display: -o-flex;
+        display: flex;
+        align-items: center;
       }
 
       #left {
+        width: 50px;
         background-color:  var(--paper-audio-player-color, blueviolet);
       }
 
@@ -141,11 +148,11 @@
 
       /* On hover */
 
-      :host:not(.cantplay) #right:hover #replay {
+      :host:not(.cantplay) .replay-container:hover #replay {
         opacity: 1;
       }
 
-      #right:hover #duration {
+      .replay-container:hover #duration {
         opacity: 0;
       }
 
@@ -206,6 +213,27 @@
         -webkit-align-self: flex-end;
         align-self: flex-end;
       }
+
+      .replay-container {
+        position: relative;
+        width: 50px;
+        height: 100%;
+      }
+
+      .volume-container {
+        position: relative;
+        width: 65px;
+      }
+
+      .volume-control {
+        max-width: 100%;
+        --paper-slider-active-color: var(--paper-audio-player-color, blueviolet);
+        --paper-slider-secondary-color: var(--paper-audio-player-color, blueviolet);
+        --paper-slider-knob-color: var(--paper-audio-player-color, blueviolet);
+        --paper-slider-pin-color: var(--paper-audio-player-color, blueviolet);
+        --paper-slider-knob-start-color: var(--paper-audio-player-color, blueviolet);
+        --paper-slider-knob-start-border-color: var(--paper-audio-player-color, blueviolet);
+      }
     </style>
 
     <div id="wrapper" class="layout-horizontal">
@@ -239,16 +267,26 @@
       </div>
 
       <div id="right"
-           class="self-end"
-           on-click="restart">
+           class="self-end">
 
+        <div class="replay-container"
+             on-click="restart">
         <!-- Duration -->
-        <div id="duration" class="fit" hidden$="{{ ended }}">
-          <span class="fit">{{ _convertSecToMin(timeLeft) }}</span>
+          <div id="duration" class="fit" hidden$="{{ ended }}">
+            <span class="fit">{{ _convertSecToMin(timeLeft) }}</span>
+          </div>
+
+          <!-- Icon -->
+          <paper-icon-button id="replay" class="fit" icon="paper-audio-icons:replay"></paper-icon-button>
+        </div>
+
+        <div class="volume-container">
+          <paper-slider class="volume-control"
+                        id="volume-control"
+                        value="100">
+          </paper-slider>
         </div>
 
-        <!-- Icon -->
-        <paper-icon-button id="replay" class="fit" icon="paper-audio-icons:replay"></paper-icon-button>
       </div>
     </div>
   </template>
@@ -304,11 +342,12 @@
       // Register event listeners
 
       listeners: {
-        'audio.loadedmetadata'  : '_onCanPlay',
-        'audio.playing'         : '_onPlaying',
-        'audio.pause'           : '_onPause',
-        'audio.ended'           : '_onEnd',
-        'audio.error'           : '_onError'
+        'audio.loadedmetadata'                          : '_onCanPlay',
+        'audio.playing'                                 : '_onPlaying',
+        'audio.pause'                                   : '_onPause',
+        'audio.ended'                                   : '_onEnd',
+        'audio.error'                                   : '_onError',
+        'volume-control.immediate-value-changed'        : '_onChangeVolume'
       },
 
 
@@ -525,6 +564,11 @@
 
       _hidePlayIcon: function(isPlaying, canBePlayed){
         return isPlaying ? true : !(canBePlayed || this.preload === 'none');
+      },
+
+      _onChangeVolume: function(e, data) {
+        var player = this;
+        player.$.audio.volume = data.value / 100;
       }
     });
   </script>