Volume Control - drag bug fixed

src/index.html

@@ -64,6 +64,11 @@ <h1 class="mainTitle">Coffitivity Offline</h1>
     </div>
   </span>
 
+  <div class="volume-block">
+    <img class="volume-icon" id="volume-icon" src="../assets/volume.png" />
+    <input type="range" class="volume-slider" value="1" id="volumeControl" min="0" max="1" step="any" oninput="changeVolumeFn(event)" />
+  </div>
+
   <footer>
     <a rel="noreferrer" target="_blank" href="https://twitter.com/intent/tweet?text=Check%20out%20@Coffitivity%20for%20Desktop!%20You%20can%20listen%20to%20ambient%20music%20even%20when%20you%27re%20offline.%20%F0%9F%8E%A7%20%F0%9F%9A%80%20@siwalik%20siwalik.in/coffitivityOffline"><i title="Spread the love" class="footer-icon icon-twitter"></i></a>
 

src/player.js

@@ -1,4 +1,4 @@
-let audioFile, $pause, $play, _cachedSelectedMusicId;
+let audioFile, $pause, $play, _cachedSelectedMusicId, volume;
 let subtextArr = ['Where do you want to be teleported?',
   'Make your pick and start making things',
   'Pick your mood before you make things',
@@ -36,6 +36,9 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelector('.icon-cancel').addEventListener('click', () => {
     document.querySelector('.page3').style.display = 'none';
   });
+
+  volume = localStorage.getItem('volume') === null ? 1 : localStorage.getItem('volume');
+  document.getElementById('volumeControl').value = volume;
 });
 
 window.addEventListener('keydown', function (e) {
@@ -69,6 +72,7 @@ let playerPageFn = (id) => {
     audioFile.src = '../assets/' + id + '.mp3';
   }
   audioFile.play();
+  audioFile.volume = volume;
   // The loop property is not always supported so add an event listener instead
   audioFile.addEventListener('ended', function () {
     this.currentTime = 0;
@@ -98,4 +102,19 @@ let landingPageFn = () => {
 
 let aboutPageFn = () => { //  eslint-disable-line
   document.querySelector('.page3').style.display = 'block';
-};
+};
+
+let changeVolumeFn = (event) => {
+  volume = event.currentTarget.value;
+  // Saving volume
+  localStorage.setItem('volume', volume);
+  if (audioFile) {
+    audioFile.volume = volume;
+  }
+  let volumeIcon = document.getElementById('volume-icon');
+  if (volume === '0') {
+    volumeIcon.src = __dirname + '/../assets/mute-volume.png';
+  } else {
+    volumeIcon.src = __dirname + '/../assets/volume.png';
+  }
+};

src/style.css

@@ -210,4 +210,41 @@ footer {
     margin-top: -140px;
     color: #ffffff;
     margin-left: 95px;
-}
+}
+
+.volume-block {
+    border-radius: 7px;
+    position: absolute;
+    right: 14px;
+    left: 10px;
+    bottom: 65px;
+    -webkit-app-region: no-drag;
+}
+
+.volume-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 95%;
+    height: 2px;
+    background: rgb(48, 60, 80);
+    outline: none;
+    display: block;
+    margin-top: 6px;
+    margin-left: 16px;
+}
+
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgb(48, 60, 80);
+    cursor: pointer;
+}
+
+.volume-icon {
+    width: 5%;
+    float: left;
+    -webkit-user-select: none;
+}