indrajith/retrowave-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cosmetic Changes

Browse Source 
History Upload implementation
This commit is contained in:
Indrajith K L
2022-11-26 04:19:24 +05:30
parent d6987de7b8
commit 832d1a4363
6 changed files with 127 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
fonts/Streamster.ttf Normal file
View File

Binary file not shown.

74
hg.css
View File

@@ -1,3 +1,7 @@
@font-face {
font-family: 'StreamSter';
src: url(./fonts/Streamster.ttf);
}
#app, #app,
body, body,
html { html {
@@ -20,6 +24,7 @@ body {
body { body {
background: #f5b7f0; background: #f5b7f0;
background-image: url("./images/rainbowprism.gif");
} }
#app { #app {
@@ -106,14 +111,14 @@ body {
left: 0; left: 0;
} }
h3 { h3#track-name {
font-size: 24px; font-size: 26px;
font-weight: 500; font-weight: 500;
letter-spacing: 2px; letter-spacing: 2px;
color: #9CC9E3; color: #e91e63;
font-family: 'Roboto', sans-serif; font-family: 'StreamSter', sans-serif;
margin-bottom: 0; margin-bottom: 0;
background: rgb(0 0 0 / 55%); background: rgb(0 0 0 / 71%);
padding: 10px; padding: 10px;
} }
@@ -135,7 +140,7 @@ hr {
line-height: 18px; line-height: 18px;
} }
#info { #upload-info {
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
right: 8px; right: 8px;
@@ -179,4 +184,61 @@ dialog::backdrop {
rgba(0, 0, 0, 0.3) 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); 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;
} }

BIN
images/comp009.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/rainbowprism.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

25
index.html
View File

@@ -8,17 +8,21 @@
<title>Retrowave Player</title> <title>Retrowave Player</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<link rel="stylesheet" href="hg.css"> <link rel="stylesheet" href="hg.css">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"></link> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>
<dialog id="dialog"> <div class="modal" id="intro-modal">
<p>Welcome to Retrowave Player</p> <div class="modal-bg modal-exit"></div>
<form method="dialog"> <div class="modal-container">
<button id="initButton">OK</button> <h3 class="text-center">Welcome to Retrowave Player</h3>
</form> <p class="mt-5">Here are the controls:</p>
</dialog> <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 id="app">
<div class="music-player" <div class="music-player"
style="background-image: url(&quot;http://retrowave.ru/artwork/ffd65c85c036971075677e76e6b250eef4c6ef2e.jpg&quot;); background-position: 50% 50%; background-repeat: no-repeat;"> 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>
<div class="gradient-overlay"></div> <div class="gradient-overlay"></div>
<div class="color-overlay"></div> <div class="color-overlay"></div>
<div id="history">history</div> <div id="history" class="no-pause">history</div>
<div id="info">info</div> <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div>
</div> </div>
</div> </div>
<input id="file-upload" type="file" style="visibility:hidden" accept="application/json"/>
<script src="player.js"></script> <script src="player.js"></script>
</body> </body>

57
player.js
View File

@@ -1,28 +1,60 @@
(function () { (function () {
openDialog();
let isPlaying = false; let isPlaying = false;
let currentTracks = []; let currentTracks = [];
let cursor = 0; let cursor = 0;
let howerInstance; let howlerInstance;
const retroWaveRu = "https://retrowave.ru"; const retroWaveRu = "https://retrowave.ru";
getMusic();
let titleEl = document.getElementById("track-name"); let titleEl = document.getElementById("track-name");
let coverArtEl = document.getElementsByClassName("music-player")[0]; 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", () => { coverArtEl.addEventListener("click", (event) => {
if (howerInstance) { const isNoPause = event.target.classList.contains("no-pause");
if (howlerInstance && !isNoPause) {
isPlaying = !isPlaying; isPlaying = !isPlaying;
if (isPlaying) { if (isPlaying) {
howerInstance.play(); howlerInstance.play();
} else { } 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(); playMusic();
}); });
@@ -66,8 +98,7 @@
} }
function openDialog() { function openDialog() {
const dialog = document.getElementById("dialog"); modalEl.classList.add("open");
dialog.showModal();
} }
function getMusic() { function getMusic() {
@@ -88,7 +119,7 @@
const currentTrack = currentTracks[0]; const currentTrack = currentTracks[0];
const singleTrack = currentTrack.streamUrl; const singleTrack = currentTrack.streamUrl;
const fullTrack = `${retroWaveRu}${singleTrack}`; const fullTrack = `${retroWaveRu}${singleTrack}`;
howerInstance = new Howl({ howlerInstance = new Howl({
src: [fullTrack], src: [fullTrack],
html5: true, html5: true,
onend: function () { onend: function () {
@@ -104,7 +135,7 @@
updateInfo(currentTrack); updateInfo(currentTrack);
addToHistory(currentTrack); addToHistory(currentTrack);
howerInstance.play(); howlerInstance.play();
} }
function updateInfo(trackDetails) { function updateInfo(trackDetails) {