add custom volume control

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>

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

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";
 
 
 // --------------------------------------------------------------

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>

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>