diff options
author | Indrajith K L | 2022-11-26 21:45:53 +0530 |
---|---|---|
committer | Indrajith K L | 2022-11-26 21:45:53 +0530 |
commit | 199501039cfc0a054b9ee8a6d508f7b545d612bf (patch) | |
tree | c955ef69e82024380473f045aa9f2b25f532c701 | |
parent | c0fd0f510c8cea76f5259412f9e23ae8c0e00fc9 (diff) | |
download | retrowave-player-199501039cfc0a054b9ee8a6d508f7b545d612bf.tar.gz retrowave-player-199501039cfc0a054b9ee8a6d508f7b545d612bf.tar.bz2 retrowave-player-199501039cfc0a054b9ee8a6d508f7b545d612bf.zip |
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
-rw-r--r-- | hg.css | 5 | ||||
-rw-r--r-- | index.html | 4 | ||||
-rw-r--r-- | player.js | 66 |
3 files changed, 61 insertions, 14 deletions
@@ -245,4 +245,9 @@ dialog::backdrop { #file-upload { display: none; +} + +.controls { + font-style: italic; + font-size: larger; }
\ No newline at end of file @@ -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> @@ -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 "a": + break; + case "d": break; - case "ArrowLeft": + case "w": + volumeUp(); break; - case "ArrowRight": + 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; } |