diff options
| -rw-r--r-- | fonts/Streamster.ttf | bin | 0 -> 66872 bytes | |||
| -rw-r--r-- | hg.css | 74 | ||||
| -rw-r--r-- | images/comp009.jpg | bin | 0 -> 2708 bytes | |||
| -rw-r--r-- | images/rainbowprism.gif | bin | 0 -> 28620 bytes | |||
| -rw-r--r-- | index.html | 25 | ||||
| -rw-r--r-- | player.js | 57 |
6 files changed, 127 insertions, 29 deletions
diff --git a/fonts/Streamster.ttf b/fonts/Streamster.ttf Binary files differnew file mode 100644 index 0000000..5fef909 --- /dev/null +++ b/fonts/Streamster.ttf @@ -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 Binary files differnew file mode 100644 index 0000000..7beff67 --- /dev/null +++ b/images/comp009.jpg diff --git a/images/rainbowprism.gif b/images/rainbowprism.gif Binary files differnew file mode 100644 index 0000000..7786dea --- /dev/null +++ b/images/rainbowprism.gif @@ -8,17 +8,21 @@ <title>Retrowave Player</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> <link rel="stylesheet" href="hg.css"> - <link rel="icon" href="/favicon.ico"> - <link rel="icon" type="image/svg+xml" href="/favicon.svg"></link> + <link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> </head> <body> - <dialog id="dialog"> - <p>Welcome to Retrowave Player</p> - <form method="dialog"> - <button id="initButton">OK</button> - </form> - </dialog> + <div class="modal" id="intro-modal"> + <div class="modal-bg modal-exit"></div> + <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> + <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> + </div> <div id="app"> <div class="music-player" style="background-image: url("http://retrowave.ru/artwork/ffd65c85c036971075677e76e6b250eef4c6ef2e.jpg"); background-position: 50% 50%; background-repeat: no-repeat;"> @@ -29,10 +33,11 @@ </div> <div class="gradient-overlay"></div> <div class="color-overlay"></div> - <div id="history">history</div> - <div id="info">info</div> + <div id="history" class="no-pause">history</div> + <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> </div> </div> + <input id="file-upload" type="file" style="visibility:hidden" accept="application/json"/> <script src="player.js"></script> </body> @@ -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) { |
