From 48a77ca043a13d723e31c023aaba46ab99ed2978 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Sun, 16 Feb 2020 22:28:17 +0100
Subject: [PATCH] add custom volume control

---
 src/assets/img/volume-triangle.svg    |  3 ++
 src/assets/scss/5-modules/volume.scss | 66 +++++++++++++++++++++++++++
 src/assets/scss/style.scss            |  1 +
 src/components/Controls.svelte        | 16 +------
 src/components/Volume.svelte          | 19 ++++++++
 5 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/img/volume-triangle.svg
 create mode 100644 src/assets/scss/5-modules/volume.scss
 create mode 100644 src/components/Volume.svelte

diff --git a/src/assets/img/volume-triangle.svg b/src/assets/img/volume-triangle.svg
new file mode 100644
index 0000000..b221da3
--- /dev/null
+++ b/src/assets/img/volume-triangle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="17" viewBox="0 0 40 17">
+  <path fill="#C4C4C4" d="M40,15.201328 L40,1.80052901 C40,0.518480567 38.6821237,-0.351956175 37.4843106,0.138924799 L0.562431379,15.2698574 C-0.356904919,15.6466792 -0.0844775345,17 0.910700368,17 L38.1808595,17 C39.1855708,17 40,16.1947345 40,15.201328 Z"/>
+</svg>
diff --git a/src/assets/scss/5-modules/volume.scss b/src/assets/scss/5-modules/volume.scss
new file mode 100644
index 0000000..184a368
--- /dev/null
+++ b/src/assets/scss/5-modules/volume.scss
@@ -0,0 +1,66 @@
+/* ----------------------------------------------------------- */
+/* == volume control volume */
+/* ----------------------------------------------------------- */
+
+.volume {
+  position: relative;
+  margin: 1rem 0;
+}
+
+.volume__bg,
+.volume__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: .2rem .1rem;
+  width: calc(100% - .2rem);
+  height: calc(100% - .4rem);
+
+  clip-path: url(#volume);
+}
+
+.volume__bg {
+  background: rgba(99, 87, 118, .4);
+}
+
+.volume__progress {
+  background-color: $color-primary;
+}
+
+.volume__input {
+  position: relative;
+  z-index: 1;
+  appearance: none;
+  padding: 0;
+  width: 4rem;
+  border: none;
+  border-radius: .1rem;
+  background: none;
+  box-shadow: none;
+}
+
+.volume__input::range-track {
+  width: 100%;
+  height: 17px;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: 0px 0px 0px #000, 0px 0px 0px #0d0d0d;
+  cursor: pointer;
+
+  animate: .2s;
+  clip-path: url(#volume);
+}
+
+.volume__input::range-thumb {
+  position: relative;
+  appearance: none;
+  width: 20px;
+  width: 6px;
+  height: 19px;
+  border: 0px solid #000;
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: -1px 2px 4px rgba(99, 87, 118, .6);
+  cursor: pointer;
+  transform: translateY(-.1rem);
+}
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 42120f9..fd0fc1c 100755
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -65,6 +65,7 @@
 @import "5-modules/player-big";
 @import "5-modules/player-progress";
 @import "5-modules/player-track";
+@import "5-modules/volume";
 
 
 // --------------------------------------------------------------
diff --git a/src/components/Controls.svelte b/src/components/Controls.svelte
index a311da4..65b19f7 100644
--- a/src/components/Controls.svelte
+++ b/src/components/Controls.svelte
@@ -1,18 +1,6 @@
 <div class="controls">
     <div class="controls-group">
-        <button on:click={() => $muted = !$muted}>
-            {#if $muted}
-                🔇
-            {:else if $volume < 20}
-                🔈
-            {:else if $volume < 80}
-                🔉
-            {:else }
-                🔊
-            {/if}
-        </button>
-
-        <input type="range" min="0" max="100" bind:value={$volume}>
+        <Volume></Volume>
     </div>
 
     <div class="controls-group">
@@ -43,7 +31,6 @@
     import {
         paused,
         muted,
-        volume,
         current,
         queue,
         canPrevious,
@@ -52,6 +39,7 @@
         selectNext,
         loading
     } from '/store.js'
+    import Volume from '/components/Volume'
 </script>
 
 <style>
diff --git a/src/components/Volume.svelte b/src/components/Volume.svelte
new file mode 100644
index 0000000..93a9b4b
--- /dev/null
+++ b/src/components/Volume.svelte
@@ -0,0 +1,19 @@
+<div class="volume">
+    <div class="volume__bg"></div>
+    <div class="volume__progress" style="width: {volumePercent}%;"></div>
+    <input class="volume__input" type="range" min="0" max="100" step="20" bind:value={$volume}>
+</div>
+
+<!-- for mask -->
+<svg width="0" height="0">
+    <clipPath id="volume">
+        <path fill="#C4C4C4" d="M40,15.201328 L40,1.80052901 C40,0.518480567 38.6821237,-0.351956175 37.4843106,0.138924799 L0.562431379,15.2698574 C-0.356904919,15.6466792 -0.0844775345,17 0.910700368,17 L38.1808595,17 C39.1855708,17 40,16.1947345 40,15.201328 Z"/>
+    </clipPath>
+</svg>
+
+<script>
+    import { volume } from '/store.js'
+
+    // to fix visual glitch
+    $: volumePercent = $volume ? $volume -2 : 0
+</script>
\ No newline at end of file