From ae73ae29c495ed8729813dbb853593abe26ecb08 Mon Sep 17 00:00:00 2001
From: grunjol <grunjol@users.noreply.github.com>
Date: Thu, 7 Apr 2016 14:24:23 -0300
Subject: [PATCH] add volume icon and slider (#330)

---
 renderer/index.css       | 36 ++++++++++++++++++++++++++++
 renderer/index.js        |  3 +++
 renderer/views/player.js | 52 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+)

diff --git a/renderer/index.css b/renderer/index.css
index 54966527..199944f5 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -677,6 +677,7 @@ body.drag .app::after {
 
 .player-controls .device,
 .player-controls .fullscreen,
+.player-controls .volume-icon,
 .player-controls .back {
   display: block;
   width: 20px;
@@ -684,6 +685,7 @@ body.drag .app::after {
   margin: 5px;
 }
 
+.player-controls .volume,
 .player-controls .back {
   float: left;
 }
@@ -697,6 +699,7 @@ body.drag .app::after {
   margin-right: 15px;
 }
 
+.player-controls .volume-icon,
 .player-controls .device {
   font-size: 18px; /* make the cast icons less huge */
   margin-top: 8px !important;
@@ -706,6 +709,39 @@ body.drag .app::after {
   color: #9af;
 }
 
+.player-controls .volume {
+  display: block;
+  width: 90px;
+}
+
+.player-controls .volume-icon {
+  float: left;
+  margin-right: 0px;
+}
+
+.player-controls .volume-slider {
+  -webkit-appearance: none;
+  width: 50px;
+  height: 3px;
+  border: none;
+  padding: 0;
+  vertical-align: sub;
+}
+
+.player-controls .volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background-color: #fff;
+  opacity: 1.0;
+  width: 10px;
+  height: 10px;
+  border: 1px solid #303233;
+  border-radius: 50%;
+}
+
+.player-controls .volume-slider:focus {
+  outline: none;
+}
+
 .player .playback-bar:hover .loading-bar {
   height: 5px;
 }
diff --git a/renderer/index.js b/renderer/index.js
index 4a6a86c0..27a784d4 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -252,6 +252,9 @@ function dispatch (action, ...args) {
   if (action === 'changeVolume') {
     changeVolume(args[0] /* increase */)
   }
+  if (action === 'setVolume') {
+    setVolume(args[0] /* increase */)
+  }
   if (action === 'mediaPlaying') {
     state.playing.isPaused = false
     ipcRenderer.send('blockPowerSave')
diff --git a/renderer/views/player.js b/renderer/views/player.js
index d2ecf918..623cdf6e 100644
--- a/renderer/views/player.js
+++ b/renderer/views/player.js
@@ -310,6 +310,31 @@ function renderPlayerControls (state) {
     `)
   }
 
+  // render volume
+  var volume = state.playing.volume
+  var volumeIcon = 'volume_' + (volume === 0 ? 'off' : volume < 0.3 ? 'mute' : volume < 0.6 ? 'down' : 'up')
+  var volumeStyle = { background: '-webkit-gradient(linear, left top, right top, ' +
+    'color-stop(' + (volume * 100) + '%, #eee), ' +
+    'color-stop(' + (volume * 100) + '%, #727272))'
+  }
+
+  elements.push(hx`
+    <div.volume
+      onwheel=${handleVolumeWheel}>
+        <i.icon.volume-icon>
+          ${volumeIcon}
+        </i>
+        <input.volume-slider
+          type='range' min='0' max='1' step='0.05' value=${volumeChanging !== false ? volumeChanging : volume}
+          onmousedown=${handleVolumeScrub}
+          onmouseup=${handleVolumeScrub}
+          onmousemove=${handleVolumeScrub}
+          onwheel=${handleVolumeWheel}
+          style=${volumeStyle}
+        />
+    </div>
+  `)
+
   // Finally, the big button in the center plays or pauses the video
   elements.push(hx`
     <i class='icon play-pause' onclick=${dispatcher('playPause')}>
@@ -327,8 +352,35 @@ function renderPlayerControls (state) {
     var position = fraction * state.playing.duration /* seconds */
     dispatch('playbackJump', position)
   }
+
+  // Handles volume change by wheel
+  function handleVolumeWheel (e) {
+    dispatch('changeVolume', (-e.deltaY | e.deltaX) / 500)
+  }
+
+  // Handles volume slider scrub
+  function handleVolumeScrub (e) {
+    switch (e.type) {
+      case 'mouseup':
+        volumeChanging = false
+        dispatch('setVolume', e.offsetX / 50)
+        break
+      case 'mousedown':
+        volumeChanging = this.value
+        break
+      case 'mousemove':
+        // only change if move was started by click
+        if (volumeChanging !== false) {
+          volumeChanging = this.value
+        }
+        break
+    }
+  }
 }
 
+// lets scrub without sending to volume backend
+var volumeChanging = false
+
 // Renders the loading bar. Shows which parts of the torrent are loaded, which
 // can be "spongey" / non-contiguous
 function renderLoadingBar (state) {