Style & Control Changes

* Changes Control labels styles in initial popup
* Changes key bindings
 * x - Toggle Play/Pause
 * a - Play previous (TODO)
 * d - Play Next (TODO)
 * w - Volume Up
 * s - Volume Down
* Adds Swipe Up & Down
 * Volume Up & Down

hg.css

@@ -246,3 +246,8 @@ dialog::backdrop {
 #file-upload {
     display: none;
 }
+
+.controls {
+    font-style: italic;
+    font-size: larger;
+}

index.html

@@ -18,7 +18,9 @@
         <div class="modal-container">
             <h3 class="text-center">Welcome to Retrowave Player</h3>
             <p class="mt-5">Here are the controls:</p>
-            <h4 class="mt-5">Play/Pause - Space/Click/Touch</h4>
+            <h4 class="mt-5">Play/Pause  <span class="controls">x or Click or Touch</span></h4>
+            <h4 class="mt-5">Volume Up  <span class="controls">w or Swipe Up</span></h4>
+            <h4 class="mt-5">Volume Down  <span class="controls">s or Swipe Down</span></h4>
             <p class="mt-5">(You can download the music history of your current browser by clicking the history link on the player)</p>
             <button class="modal-close modal-exit" id="initButton">X</button>
         </div>

player.js

@@ -9,6 +9,7 @@
     const modalEl = document.getElementById("intro-modal");
     const uploadInfoEl = document.getElementById("upload-info");
     const fileUploadEl = document.getElementById("file-upload");
+    let volume = 1;
     openDialog();
     getMusic();
     listenUploadFileChange();
@@ -16,13 +17,7 @@
     coverArtEl.addEventListener("click", (event) => {
         const isNoPause = event.target.classList.contains("no-pause");
         if (howlerInstance && !isNoPause) {
-            isPlaying = !isPlaying;
-
-            if (isPlaying) {
-                howlerInstance.play();
-            } else {
-                howlerInstance.pause();
-            }
+            togglePlay();
         }
     });
 
@@ -37,11 +32,9 @@
     function listenUploadFileChange() {
         fileUploadEl.onchange = function () {
             const selectedFile = fileUploadEl.files[0];
-            console.log(selectedFile);
             const reader = new FileReader();
             reader.readAsText(selectedFile, "UTF-8");
             reader.onload = function (event) {
-                console.log(event.target.result);
                 try {
                     const uploadedPlaylist = JSON.parse(event.target.result);
                     localStorage.setItem("retrowave-history", event.target.result);
@@ -65,25 +58,36 @@
     document.addEventListener("keyup", (event) => {
         const { key } = event;
         switch (key) {
-            case "Space":
+            case "x":
+                togglePlay();
                 break;
-            case "ArrowLeft":
+            case "a":
                 break;
-            case "ArrowRight":
+            case "d":
+                break;
+            case "w":
+                volumeUp();
+                break;
+            case "s":
+                volumeDown();
                 break;
         }
     });
 
     let touchstartX = 0;
     let touchendX = 0;
+    let touchstartY = 0;
+    let touchendY = 0;
     const musixPlayerEl = document.getElementsByClassName("music-player")[0];
     if (musixPlayerEl) {
         musixPlayerEl.addEventListener("touchstart", (e) => {
             touchstartX = e.changedTouches[0].screenX;
+            touchstartY = e.changedTouches[0].screenY;
         });
 
         musixPlayerEl.addEventListener("touchend", (e) => {
             touchendX = e.changedTouches[0].screenX;
+            touchendY = e.changedTouches[0].screenY;
             checkDirection();
         });
     }
@@ -95,6 +99,13 @@
         if (touchendX > touchstartX) {
             // Swipe Right
         }
+
+        if (touchendY < touchstartY) {
+            volumeUp();
+        }
+        if (touchendY > touchstartY) {
+            volumeDown();
+        }
     }
 
     function openDialog() {
@@ -130,6 +141,7 @@
                 playMusic();
             },
         });
+        setVolume();
         isPlaying = true;
 
         updateInfo(currentTrack);
@@ -138,6 +150,35 @@
         howlerInstance.play();
     }
 
+    function volumeDown() {
+        console.log(volume);
+        if(volume>0.1) {
+            volume -= 0.1;
+        }
+        setVolume();
+    }
+
+    function volumeUp() {
+        if(volume<1) {
+            volume += 0.1;
+        }
+        setVolume();
+    }
+
+    function setVolume() {
+        howlerInstance.volume(volume);
+    }
+
+    function togglePlay() {
+        isPlaying = !isPlaying;
+
+        if (isPlaying) {
+            howlerInstance.play();
+        } else {
+            howlerInstance.pause();
+        }
+    }
+
     function updateInfo(trackDetails) {
         titleEl.innerText = trackDetails.title;
         coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`;
@@ -146,7 +187,6 @@
     function getHistory() {
         let localHistoryStore = localStorage.getItem("retrowave-history") || "[]";
         let historyArray = JSON.parse(localHistoryStore);
-        console.log(historyArray);
         return historyArray;
     }