add volume icon and slider (#330)

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;
 }

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')

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) {