aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--fonts/Streamster.ttfbin0 -> 66872 bytes
-rw-r--r--hg.css74
-rw-r--r--images/comp009.jpgbin0 -> 2708 bytes
-rw-r--r--images/rainbowprism.gifbin0 -> 28620 bytes
-rw-r--r--index.html25
-rw-r--r--player.js57
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
Binary files differ
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
Binary files differ
diff --git a/images/rainbowprism.gif b/images/rainbowprism.gif
new file mode 100644
index 0000000..7786dea
--- /dev/null
+++ b/images/rainbowprism.gif
Binary files differ
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) {