From 832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sat, 26 Nov 2022 04:19:24 +0530 Subject: Cosmetic Changes History Upload implementation --- fonts/Streamster.ttf | Bin 0 -> 66872 bytes hg.css | 74 ++++++++++++++++++++++++++++++++++++++++++++---- images/comp009.jpg | Bin 0 -> 2708 bytes images/rainbowprism.gif | Bin 0 -> 28620 bytes index.html | 25 +++++++++------- player.js | 57 ++++++++++++++++++++++++++++--------- 6 files changed, 127 insertions(+), 29 deletions(-) create mode 100644 fonts/Streamster.ttf create mode 100644 images/comp009.jpg create mode 100644 images/rainbowprism.gif diff --git a/fonts/Streamster.ttf b/fonts/Streamster.ttf new file mode 100644 index 0000000..5fef909 Binary files /dev/null and b/fonts/Streamster.ttf differ diff --git a/hg.css b/hg.css index 46754e5..0910471 100644 --- a/hg.css +++ b/hg.css @@ -1,3 +1,7 @@ +@font-face { + font-family: 'StreamSter'; + src: url(./fonts/Streamster.ttf); +} #app, body, html { @@ -20,6 +24,7 @@ body { body { background: #f5b7f0; + background-image: url("./images/rainbowprism.gif"); } #app { @@ -106,14 +111,14 @@ body { left: 0; } -h3 { - font-size: 24px; +h3#track-name { + font-size: 26px; font-weight: 500; letter-spacing: 2px; - color: #9CC9E3; - font-family: 'Roboto', sans-serif; + color: #e91e63; + font-family: 'StreamSter', sans-serif; margin-bottom: 0; - background: rgb(0 0 0 / 55%); + background: rgb(0 0 0 / 71%); padding: 10px; } @@ -135,7 +140,7 @@ hr { line-height: 18px; } -#info { +#upload-info { bottom: 0px; position: absolute; right: 8px; @@ -179,4 +184,61 @@ dialog::backdrop { rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 20px); backdrop-filter: blur(3px); +} + +.modal { + position: fixed; + width: 100vw; + height: 100vh; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; +} + +.modal.open { + visibility: visible; + opacity: 1; + transition-delay: 0s; +} + +.modal-bg { + position: absolute; + background: teal; + background-image: url(./images/comp009.jpg); + width: 100%; + height: 100%; +} + +.modal-container { + border-radius: 10px; + background: #fff; + position: relative; + padding: 30px; +} + +.modal-close { + position: absolute; + right: 15px; + top: 15px; + outline: none; + appearance: none; + color: red; + background: none; + border: 0px; + font-weight: bold; + cursor: pointer; +} + +.text-center { + text-align: center; +} + +.mt-5 { + margin-top: 10px; } \ No newline at end of file diff --git a/images/comp009.jpg b/images/comp009.jpg new file mode 100644 index 0000000..7beff67 Binary files /dev/null and b/images/comp009.jpg differ diff --git a/images/rainbowprism.gif b/images/rainbowprism.gif new file mode 100644 index 0000000..7786dea Binary files /dev/null and b/images/rainbowprism.gif differ diff --git a/index.html b/index.html index 0f0a046..131a981 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,21 @@ Retrowave Player - - + + - -

Welcome to Retrowave Player

-
- -
- +
@@ -29,10 +33,11 @@
-
history
-
info
+
history
+
Upload
+ diff --git a/player.js b/player.js index 8cf2151..53cdefe 100644 --- a/player.js +++ b/player.js @@ -1,28 +1,60 @@ (function () { - openDialog(); let isPlaying = false; let currentTracks = []; let cursor = 0; - let howerInstance; + let howlerInstance; const retroWaveRu = "https://retrowave.ru"; - getMusic(); - let titleEl = document.getElementById("track-name"); let coverArtEl = document.getElementsByClassName("music-player")[0]; + const modalEl = document.getElementById("intro-modal"); + const uploadInfoEl = document.getElementById("upload-info"); + const fileUploadEl = document.getElementById("file-upload"); + openDialog(); + getMusic(); + listenUploadFileChange(); - coverArtEl.addEventListener("click", () => { - if (howerInstance) { + coverArtEl.addEventListener("click", (event) => { + const isNoPause = event.target.classList.contains("no-pause"); + if (howlerInstance && !isNoPause) { isPlaying = !isPlaying; if (isPlaying) { - howerInstance.play(); + howlerInstance.play(); } else { - howerInstance.pause(); + howlerInstance.pause(); } } }); - document.getElementById("initButton").addEventListener("click", () => { + uploadInfoEl.addEventListener("click", () => { + const confirmText = `Do you really want to change your playlist?\nThis will replace all your retrowave music history.\nIf you are sure about this, make sure to upload a valid json file probably downloaded using history link.`; + + if (confirm(confirmText)) { + fileUploadEl.click(); + } + }); + + 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); + + } catch (error) { + alert("malformed/invalid json file"); + } + }; + }; + } + + document.getElementById("initButton")?.addEventListener("click", () => { + modalEl.classList.remove("open"); playMusic(); }); @@ -66,8 +98,7 @@ } function openDialog() { - const dialog = document.getElementById("dialog"); - dialog.showModal(); + modalEl.classList.add("open"); } function getMusic() { @@ -88,7 +119,7 @@ const currentTrack = currentTracks[0]; const singleTrack = currentTrack.streamUrl; const fullTrack = `${retroWaveRu}${singleTrack}`; - howerInstance = new Howl({ + howlerInstance = new Howl({ src: [fullTrack], html5: true, onend: function () { @@ -104,7 +135,7 @@ updateInfo(currentTrack); addToHistory(currentTrack); - howerInstance.play(); + howlerInstance.play(); } function updateInfo(trackDetails) { -- cgit v1.2.3