New Features

* Adds Refresh button for changing music

hg.css

@@ -1,5 +1,5 @@
 @font-face {
-    font-family: 'StreamSter';
+  font-family: "StreamSter";
   src: url(./fonts/Streamster.ttf);
 }
 #app,
@@ -14,8 +14,8 @@ body {
   width: 100%;
   padding: 0;
   margin: 0;
-    background: #FAFAFA;
-    font-family: 'Helvetica Neue', arial, sans-serif;
+  background: #fafafa;
+  font-family: "Helvetica Neue", arial, sans-serif;
   font-weight: 400;
   color: #444;
   -webkit-font-smoothing: antialiased;
@@ -67,10 +67,22 @@ body {
 
 .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%);
+  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;
@@ -119,7 +131,7 @@ h3#track-name {
   font-weight: 500;
   letter-spacing: 2px;
   color: #e91e63;
-    font-family: 'StreamSter', sans-serif;
+  font-family: "StreamSter", sans-serif;
   margin-bottom: 0;
   background: rgb(0 0 0 / 71%);
   padding: 10px;
@@ -130,14 +142,14 @@ hr {
   height: 3px;
   margin: 20px auto;
   border: 0;
-    background: #D0BB57;
+  background: #d0bb57;
 }
 
 .intro {
   width: 170px;
   margin: 0 auto;
-    color: #DCE3E7;
-    font-family: 'Droid Serif', serif;
+  color: #dce3e7;
+  font-family: "Droid Serif", serif;
   font-size: 13px;
   font-style: italic;
   line-height: 18px;
@@ -161,11 +173,13 @@ dialog button {
 }
 
 dialog::backdrop {
-    background: repeating-linear-gradient(45deg,
+  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);
+    rgba(0, 0, 0, 0.3) 20px
+  );
   backdrop-filter: blur(3px);
 }
 
@@ -257,3 +271,11 @@ canvas {
   position: absolute;
   top: 0;
 }
+
+.refresh {
+  z-index: 999;
+  cursor: pointer;
+  position: relative;
+  float: right;
+  user-select: none;
+}

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>

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) => {
+    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;