aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--hg.css332
-rw-r--r--index.html1
-rw-r--r--player.js51
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;