From 35ea31700fcfa18a4704fc9148fdf3589b98dc4e Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Mon, 30 Jun 2025 01:15:19 +0530
Subject: New Features

* Adds Refresh button for changing music

---
 hg.css     | 332 ++++++++++++++++++++++++++++++++-----------------------------
 index.html |   1 +
 player.js  |  51 +++++++---
 3 files changed, 213 insertions(+), 171 deletions(-)

diff --git a/hg.css b/hg.css
index cb088c5..722f06f 100644
--- a/hg.css
+++ b/hg.css
@@ -1,86 +1,98 @@
 @font-face {
-    font-family: 'StreamSter';
-    src: url(./fonts/Streamster.ttf);
+  font-family: "StreamSter";
+  src: url(./fonts/Streamster.ttf);
 }
 #app,
 body,
 html {
-    height: 100%;
+  height: 100%;
 }
 
 html,
 body {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    background: #FAFAFA;
-    font-family: 'Helvetica Neue', arial, sans-serif;
-    font-weight: 400;
-    color: #444;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: #fafafa;
+  font-family: "Helvetica Neue", arial, sans-serif;
+  font-weight: 400;
+  color: #444;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-    background: #f5b7f0;
-    background-image: url("./images/rainbowprism.gif");
+  background: #f5b7f0;
+  background-image: url("./images/rainbowprism.gif");
 }
 
 #app {
-    height: 100%;
+  height: 100%;
 }
 
 * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 .music-player {
-    width: 350px;
-    height: 500px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -250px 0 0 -175px;
-    overflow: hidden;
-    border-radius: 10px;
-    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
-    text-align: center;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    z-index: 999;
+  width: 350px;
+  height: 500px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -250px 0 0 -175px;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  z-index: 999;
 }
 
 .music-player .color-overlay {
-    /* Rectangle 11: */
-    background: rgba(84, 104, 110, 0.4);
-    width: 350px;
-    height: 500px;
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
+  /* Rectangle 11: */
+  background: rgba(84, 104, 110, 0.4);
+  width: 350px;
+  height: 500px;
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
 }
 
 .music-player .gradient-overlay {
-    /* bg-gradient: */
-    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
-    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
-    background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
-    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
-    width: 350px;
-    height: 500px;
-    position: absolute;
-    top: 350px;
-    left: 0;
-    z-index: 15;
+  /* bg-gradient: */
+  background-image: -webkit-linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 21%
+  );
+  background-image: -moz-linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 21%
+  );
+  background-image: -o-linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 21%
+  );
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 21%
+  );
+  width: 350px;
+  height: 500px;
+  position: absolute;
+  top: 350px;
+  left: 0;
+  z-index: 15;
 }
 
 .player-controls {
-    /* width: 100%;
+  /* width: 100%;
     position: absolute;
     bottom: 100px;
     left: 0;
@@ -96,164 +108,174 @@ body {
 }
 
 .music-player:hover .player-controls {
-    opacity: 1;
-    bottom: 120px;
+  opacity: 1;
+  bottom: 120px;
 }
 
 .music-player:hover .color-overlay {
-    background: rgba(84, 104, 110, 0.8);
+  background: rgba(84, 104, 110, 0.8);
 }
 
 .title-content {
-    text-align: center;
-    margin: 130px 0 0 0;
-    position: absolute;
-    z-index: 20;
-    width: 100%;
-    top: 0;
-    left: 0;
+  text-align: center;
+  margin: 130px 0 0 0;
+  position: absolute;
+  z-index: 20;
+  width: 100%;
+  top: 0;
+  left: 0;
 }
 
 h3#track-name {
-    font-size: 26px;
-    font-weight: 500;
-    letter-spacing: 2px;
-    color: #e91e63;
-    font-family: 'StreamSter', sans-serif;
-    margin-bottom: 0;
-    background: rgb(0 0 0 / 71%);
-    padding: 10px;
+  font-size: 26px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  color: #e91e63;
+  font-family: "StreamSter", sans-serif;
+  margin-bottom: 0;
+  background: rgb(0 0 0 / 71%);
+  padding: 10px;
 }
 
 hr {
-    width: 50px;
-    height: 3px;
-    margin: 20px auto;
-    border: 0;
-    background: #D0BB57;
+  width: 50px;
+  height: 3px;
+  margin: 20px auto;
+  border: 0;
+  background: #d0bb57;
 }
 
 .intro {
-    width: 170px;
-    margin: 0 auto;
-    color: #DCE3E7;
-    font-family: 'Droid Serif', serif;
-    font-size: 13px;
-    font-style: italic;
-    line-height: 18px;
+  width: 170px;
+  margin: 0 auto;
+  color: #dce3e7;
+  font-family: "Droid Serif", serif;
+  font-size: 13px;
+  font-style: italic;
+  line-height: 18px;
 }
 
 dialog {
-    text-align: center;
-    padding: 50px;
-    z-index: 999;
-    border: 1px solid #000000;
-    margin-left: 15px;
-    width: 50%;
-    background: #000000;
-    color: #ffffff;
+  text-align: center;
+  padding: 50px;
+  z-index: 999;
+  border: 1px solid #000000;
+  margin-left: 15px;
+  width: 50%;
+  background: #000000;
+  color: #ffffff;
 }
 
 dialog button {
-    background: #ffffff;
-    border: none;
-    padding: 3px;
+  background: #ffffff;
+  border: none;
+  padding: 3px;
 }
 
 dialog::backdrop {
-    background: repeating-linear-gradient(45deg,
-            rgba(0, 0, 0, 0.2),
-            rgba(0, 0, 0, 0.2) 1px,
-            rgba(0, 0, 0, 0.3) 1px,
-            rgba(0, 0, 0, 0.3) 20px);
-    backdrop-filter: blur(3px);
+  background: repeating-linear-gradient(
+    45deg,
+    rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.2) 1px,
+    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;
+  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;
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
 }
 
 .modal-bg {
-    position: absolute;
-    background: teal;
-    background-image: url(./images/comp009.jpg);
-    width: 100%;
-    height: 100%;
+  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;
+  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;
+  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;
+  text-align: center;
 }
 
 .mt-5 {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 #file-upload {
-    display: none;
+  display: none;
 }
 
 .controls {
-    font-style: italic;
-    font-size: larger;
+  font-style: italic;
+  font-size: larger;
 }
 
-.footer  {
-    position: absolute;
-    bottom: 0px;
-    width: 350px;
-    display: flex;
-    color: #ffffff;
-    z-index: 999;
-    justify-content: center;
+.footer {
+  position: absolute;
+  bottom: 0px;
+  width: 350px;
+  display: flex;
+  color: #ffffff;
+  z-index: 999;
+  justify-content: center;
 }
 
 .footer .footer-items {
-    text-decoration: none;
-    cursor: pointer;
-    padding-left: 10px;
-    color: #ffffff;
-    justify-content: center;
+  text-decoration: none;
+  cursor: pointer;
+  padding-left: 10px;
+  color: #ffffff;
+  justify-content: center;
 }
 
 canvas {
-    position: absolute;
-    top: 0;
-}
\ No newline at end of file
+  position: absolute;
+  top: 0;
+}
+
+.refresh {
+  z-index: 999;
+  cursor: pointer;
+  position: relative;
+  float: right;
+  user-select: none;
+}
diff --git a/index.html b/index.html
index 6f546d2..53843eb 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@
     </div>
     <div id="app">
         <div class="music-player">
+            <div class="no-pause refresh">🔃</div>
             <div class="title-content">
                 <div class="intro">Now Playing</div>
                 <hr>
diff --git a/player.js b/player.js
index 214ef29..2e6ee02 100644
--- a/player.js
+++ b/player.js
@@ -6,6 +6,7 @@
     const retroWaveRu = "https://retrowave.ru";
     let titleEl = document.getElementById("track-name");
     let coverArtEl = document.getElementsByClassName("music-player")[0];
+    let refreshBtn = document.querySelector(".refresh");
     const modalEl = document.getElementById("intro-modal");
     // const uploadInfoEl = document.getElementById("upload-info");
     const fileUploadEl = document.getElementById("file-upload");
@@ -56,7 +57,7 @@
         modalEl.classList.remove("open");
         playMusic();
         initHydra();
-        // initCodef();
+        initControls();
     });
 
     document.getElementById("history").addEventListener("click", () => {
@@ -120,16 +121,15 @@
         modalEl.classList.add("open");
     }
 
-    function getMusic() {
-        fetch(`https://retrowave.ru/api/v1/tracks?limit=5&cursor=${cursor}`)
-            .then((res) => res.json())
-            .then((res) => {
-                const {
-                    body: { tracks, cursor: currentCursor },
-                } = res;
-                cursor = currentCursor;
-                currentTracks = tracks;
-            });
+    async function getMusic() {
+        const res = await fetch(
+          `https://retrowave.ru/api/v1/tracks?limit=10&cursor=${cursor}`
+        ).then((res) => res.json());
+        const {
+          body: { tracks, cursor: currentCursor },
+        } = res;
+        cursor = currentCursor;
+        currentTracks = tracks;
     }
 
     function initPlayer() { }
@@ -142,11 +142,7 @@
             src: [fullTrack],
             html5: true,
             onend: function () {
-                currentTracks.shift();
-                if (currentTracks.length <= 3) {
-                    getMusic();
-                }
-                playMusic();
+                playNextTrack();
             },
         });
         setVolume();
@@ -233,6 +229,29 @@ https://retrowave.ru/${musicData.streamUrl}
         document.body.removeChild(element);
     }
 
+    function playNextTrack() {
+        currentTracks.shift();
+        if (currentTracks.length <= 3) {
+            getMusic();
+        }
+        playMusic();
+    }
+
+    function resetHowler(destroy = false) {
+        howlerInstance.stop();
+        if (destroy) {
+            howlerInstance.unload();
+            howlerInstance = null;
+        }
+    }
+
+    function initControls() {
+        refreshBtn.addEventListener("click", () => {
+            resetHowler();
+            playNextTrack();
+        });
+    }
+
     // function initCodef() {
     //     const width = window.innerWidth;
     //     const height = window.innerHeight;
-- 
cgit v1.2.3