Cosmetic Changes
History Upload implementation
This commit is contained in:
Indrajith K L
BIN
fonts/Streamster.ttf
Normal file
BIN
fonts/Streamster.ttf
Normal file
Binary file not shown.
74
hg.css
74
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;
|
||||
}
|
||||
BIN
images/comp009.jpg
Normal file
BIN
images/comp009.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
images/rainbowprism.gif
Normal file
BIN
images/rainbowprism.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
25
index.html
25
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("http://retrowave.ru/artwork/ffd65c85c036971075677e76e6b250eef4c6ef2e.jpg"); 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>
|
||||
|
||||
|
||||
57
player.js
57
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) {
|
||||
|
||||
Reference in New Issue
Block a user