Cosmetic Changes

History Upload implementation
author: Indrajith K L 2022-11-26 04:19:24 +0530
committer: Indrajith K L 2022-11-26 04:19:24 +0530
commit: 832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4 (patch)
tree: d5a4f7cbb472b622019341a353a2a0fbbaeb3c5b
parent: d6987de7b8947d5df5fe7896797bdec8ea337d70 (diff)
download: retrowave-player-832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4.tar.gz
retrowave-player-832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4.tar.bz2
retrowave-player-832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4.zip
6 files changed, 127 insertions, 29 deletions
diff --git a/fonts/Streamster.ttf b/fonts/Streamster.ttf
new file mode 100644
index 0000000..5fef909
--- /dev/null
+++ b/fonts/Streamster.ttf
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
--- /dev/null
+++ b/images/comp009.jpg
diff --git a/images/rainbowprism.gif b/images/rainbowprism.gif
new file mode 100644
index 0000000..7786dea
--- /dev/null
+++ b/images/rainbowprism.gif
diff --git a/index.html b/index.html
index 0f0a046..131a981 100644
--- a/index.html
+++ b/index.html
@@ -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(&quot;http://retrowave.ru/artwork/ffd65c85c036971075677e76e6b250eef4c6ef2e.jpg&quot;); 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>
 
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) {
author	Indrajith K L	2022-11-26 04:19:24 +0530
committer	Indrajith K L	2022-11-26 04:19:24 +0530
commit	832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4 (patch)
tree	d5a4f7cbb472b622019341a353a2a0fbbaeb3c5b
parent	d6987de7b8947d5df5fe7896797bdec8ea337d70 (diff)
download	retrowave-player-832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4.tar.gz retrowave-player-832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4.tar.bz2 retrowave-player-832d1a4363f6dd99bef2bc9a61f2b58a6e76c4a4.zip