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

New Features and Cosmetics

Browse Source 
* Adds option to toggle fullscreen
* Adds option to hide controls and hide music player(just visualization only)
* Font Changes
* Adds Stylized tooltips
This commit is contained in:
Indrajith K L
2025-06-30 02:37:28 +05:30
parent c708bb42da
commit ae44e79a15
4 changed files with 503 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
fonts/VCR_OSD_MONO_1.001.ttf Normal file
View File

Binary file not shown.

59
hg.css
View File

@@ -2,6 +2,10 @@
font-family: "StreamSter"; font-family: "StreamSter";
src: url(./fonts/Streamster.ttf); src: url(./fonts/Streamster.ttf);
} }
@font-face {
font-family: "VCR";
src: url(./fonts/VCR_OSD_MONO_1.001.ttf);
}
#app, #app,
body, body,
html { html {
@@ -15,7 +19,7 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #fafafa; background: #fafafa;
font-family: "Helvetica Neue", arial, sans-serif; font-family: "VCR", arial, sans-serif;
font-weight: 400; font-weight: 400;
color: #444; color: #444;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -131,7 +135,8 @@ h3#track-name {
font-weight: 500; font-weight: 500;
letter-spacing: 2px; letter-spacing: 2px;
color: #e91e63; color: #e91e63;
font-family: "StreamSter", sans-serif; /* font-family: "StreamSter", sans-serif; */
font-family: "VCR", sans-serif;
margin-bottom: 0; margin-bottom: 0;
background: rgb(0 0 0 / 71%); background: rgb(0 0 0 / 71%);
padding: 10px; padding: 10px;
@@ -149,7 +154,7 @@ hr {
width: 170px; width: 170px;
margin: 0 auto; margin: 0 auto;
color: #dce3e7; color: #dce3e7;
font-family: "Droid Serif", serif; font-family: "VCR", serif;
font-size: 13px; font-size: 13px;
font-style: italic; font-style: italic;
line-height: 18px; line-height: 18px;
@@ -247,19 +252,23 @@ dialog::backdrop {
.controls { .controls {
font-style: italic; font-style: italic;
font-size: larger; font-size: larger;
color: #ff0095;
} }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
width: 350px; width: 342px;
display: flex; display: flex;
color: #ffffff; color: #ffffff;
z-index: 999; z-index: 999;
justify-content: center; justify-content: center;
height: 17px;
} }
.footer .footer-items { .footer .footer-items {
font-size: 13px;
font-family: "VCR", serif;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
padding-left: 10px; padding-left: 10px;
@@ -267,15 +276,53 @@ dialog::backdrop {
justify-content: center; justify-content: center;
} }
.footer-items#history {
margin-top: 3px;
}
canvas { canvas {
position: absolute; position: absolute;
top: 0; top: 0;
} }
.refresh { .buttons {
z-index: 999; z-index: 999;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
float: right;
user-select: none; user-select: none;
} }
.refresh {
float: right;
}
.fullscreen {
float: left;
float: left;
margin-left: 5px;
margin-top: 3px;
color: #565656;
}
.fullscreen svg {
height: 10px;
width: 10px;
color: #ffffffff;
}
.fullscreen:hover * {
color: #ffffff;
}
.hidden {
display: none;
}
.OVR {
position: absolute;
bottom: 0;
z-index: 999;
color: #ffff;
right: 0;
margin-right: 5px;
}

114
index.html
View File

@@ -1,16 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<script src="https://unpkg.com/hydra-synth"></script> <script src="https://unpkg.com/hydra-synth"></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 rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head> </head>
<body> <body>
@@ -19,44 +18,111 @@
<div class="modal-container"> <div class="modal-container">
<h3 class="text-center">Welcome to Retrowave Player</h3> <h3 class="text-center">Welcome to Retrowave Player</h3>
<p class="mt-5">Here are the controls:</p> <p class="mt-5">Here are the controls:</p>
<h4 class="mt-5">Play/Pause <span class="controls">SPACE or Click or Touch</span></h4> <h4 class="mt-5">
<h4 class="mt-5">Volume Up <span class="controls">w or Swipe Up</span></h4> Play/Pause <span class="controls">SPACE or Click or Touch</span>
<h4 class="mt-5">Volume Down <span class="controls">s or Swipe Down</span></h4> </h4>
<h4 class="mt-5">Next Track<span class="controls"> n or Press the Refresh Button</span></h4> <h4 class="mt-5">
<p class="mt-5">(You can download the music history of your current browser by clicking the history link on Volume Up <span class="controls">w or Swipe Up</span>
the player)</p> </h4>
<h4 class="mt-5">
Volume Down <span class="controls">s or Swipe Down</span>
</h4>
<h4 class="mt-5">
Next Track<span class="controls"> n or Press the Refresh Button</span>
</h4>
<h4 class="mt-5">
Toggle Controls<span class="controls"> h</span>
</h4>
<p class="mt-5">
(You can download the music history of your current browser by
clicking the history link on the player)
</p>
<p class="mt-5">All the music is fetched from retrowave.ru</p> <p class="mt-5">All the music is fetched from retrowave.ru</p>
<button class="modal-close modal-exit" id="initButton">X</button> <button class="modal-close modal-exit" id="initButton">X</button>
</div> </div>
</div> </div>
<div id="app"> <div id="app">
<div class="music-player"> <div class="music-player">
<div class="no-pause refresh">🔃</div> <div title="FULLSCREEN" class="no-pause buttons fullscreen toggleable">
<svg
class="no-pause"
width="800px"
height="800px"
fill="#000000"
version="1.1"
viewBox="0 0 384.97 384.97"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
>
<g style="fill: #f9f9f9">
<g id="Fullscreen" style="fill: #f9f9f9">
<path
d="m384.97 12.03c0-6.713-5.317-12.03-12.03-12.03h-108.09c-6.833 0-11.922 5.39-11.934 12.223 0 6.821 5.101 11.838 11.934 11.838h96.062l-0.193 96.519c0 6.833 5.197 12.03 12.03 12.03 6.833-0.012 12.03-5.197 12.03-12.03l0.193-108.37c0-0.036-0.012-0.06-0.012-0.084 1e-3 -0.037 0.013-0.061 0.013-0.097z"
style="fill: #f9f9f9"
/>
<path
d="M120.496,0H12.403c-0.036,0-0.06,0.012-0.096,0.012C12.283,0.012,12.247,0,12.223,0C5.51,0,0.192,5.317,0.192,12.03 L0,120.399c0,6.833,5.39,11.934,12.223,11.934c6.821,0,11.838-5.101,11.838-11.934l0.192-96.339h96.242 c6.833,0,12.03-5.197,12.03-12.03C132.514,5.197,127.317,0,120.496,0z"
style="fill: #f9f9f9"
/>
<path
d="m120.12 360.91h-96.062v-96.242c0-6.833-5.197-12.03-12.03-12.03s-12.031 5.196-12.031 12.03v108.09c0 0.036 0.012 0.06 0.012 0.084 0 0.036-0.012 0.06-0.012 0.096 0 6.713 5.317 12.03 12.03 12.03h108.09c6.833 0 11.922-5.39 11.934-12.223 1e-3 -6.82-5.1-11.837-11.933-11.837z"
style="fill: #f9f9f9"
/>
<path
d="m372.75 252.91c-6.833 0-11.85 5.101-11.838 11.934v96.062h-96.242c-6.833 0-12.03 5.197-12.03 12.03s5.197 12.03 12.03 12.03h108.09c0.036 0 0.06-0.012 0.084-0.012 0.036-0.012 0.06 0.012 0.096 0.012 6.713 0 12.03-5.317 12.03-12.03v-108.09c1e-3 -6.833-5.389-11.934-12.222-11.934z"
style="fill: #f9f9f9"
/>
</g>
</g>
</svg>
</div>
<div class="no-pause buttons refresh toggleable" title="NEXT TRACK">🔃</div>
<div class="title-content"> <div class="title-content">
<div class="intro">Now Playing</div> <div class="intro">Now Playing</div>
<hr> <hr />
<h3 id="track-name">Retrowave Player</h3> <h3 id="track-name">Retrowave Player</h3>
</div> </div>
<div class="gradient-overlay"></div> <div class="gradient-overlay"></div>
<div class="color-overlay"></div> <div class="color-overlay"></div>
<div class="footer"> <div class="footer toggleable">
<div id="history" class="no-pause footer-items">history</div> <div title="DOWNLOAD YOUR PLAYLIST HISTORY" id="history" class="no-pause footer-items">history</div>
<div id="source"><a class="no-pause footer-items" href="https://git.indrajith.dev/retrowave-player/" <div id="source">
target="_blank">source code</a></div> <a
<div id="retrowaveru" class="no-pause"><a class="no-pause footer-items" href="http://retrowave.ru/" title="SOURCE CODE"
target="_blank">retrowave.ru</a></div> class="no-pause footer-items"
<div id="guestbook" class="no-pause"><a class="no-pause footer-items" href="https://indrajith.atabook.org/" href="https://git.indrajith.dev/retrowave-player/"
target="_blank">guestbook</a></div> target="_blank"
>source code</a
>
</div>
<div id="retrowaveru" class="no-pause">
<a
title="RETROWAVE.RU"
class="no-pause footer-items"
href="http://retrowave.ru/"
target="_blank"
>retrowave.ru</a
>
</div>
<div id="guestbook" class="no-pause">
<a
title="SIGN MY GUESTBOOK"
class="no-pause footer-items"
href="https://indrajith.atabook.org/"
target="_blank"
>guestbook</a
>
</div>
</div> </div>
<!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> --> <!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> -->
</div> </div>
</div> </div>
<div id="codef-canvas"></div> <div id="codef-canvas"></div>
<div class="OVR hidden"></div>
<input id="file-upload" type="file" accept="application/json" /> <input id="file-upload" type="file" accept="application/json" />
<!-- <script src="libs/codef_core.js"></script> <!-- <script src="libs/codef_core.js"></script>
<script src="libs/codef_starfield.js"></script> <script src="libs/codef_starfield.js"></script>
<script src="libs/codef_3d.js"></script> --> <script src="libs/codef_3d.js"></script> -->
<script src="player.js"></script> <script src="player.js"></script>
</body> </body>
</html> </html>

117
player.js
View File

@@ -7,6 +7,8 @@
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];
let refreshBtn = document.querySelector(".refresh"); let refreshBtn = document.querySelector(".refresh");
let ovr = document.querySelector(".OVR");
let fullScreenBtn = document.querySelector(".fullscreen");
const modalEl = document.getElementById("intro-modal"); const modalEl = document.getElementById("intro-modal");
// const uploadInfoEl = document.getElementById("upload-info"); // const uploadInfoEl = document.getElementById("upload-info");
const fileUploadEl = document.getElementById("file-upload"); const fileUploadEl = document.getElementById("file-upload");
@@ -20,6 +22,49 @@
getMusic(); getMusic();
listenUploadFileChange(); listenUploadFileChange();
function initDynamicTooltips() {
document.querySelectorAll("[title]").forEach((element) => {
const title = element.getAttribute("title");
element.removeAttribute("title");
element.setAttribute("data-title", title);
element.addEventListener("mouseenter", function (e) {
const tooltip = document.createElement("div");
tooltip.textContent = this.getAttribute("data-title");
tooltip.style.cssText = `
font-family: "VCR", sans-serif;
position: fixed;
background:rgb(255, 255, 255);
color: #000000;
border: 1px solidrgb(0, 0, 0);
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
z-index: 10000;
pointer-events: none;
white-space: nowrap;
`;
document.body.appendChild(tooltip);
this.tooltipEl = tooltip;
const rect = this.getBoundingClientRect();
tooltip.style.left =
rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + "px";
tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + "px";
});
element.addEventListener("mouseleave", function () {
if (this.tooltipEl) {
document.body.removeChild(this.tooltipEl);
this.tooltipEl = null;
}
});
});
}
document.addEventListener("DOMContentLoaded", initDynamicTooltips);
coverArtEl.addEventListener("click", (event) => { coverArtEl.addEventListener("click", (event) => {
const isNoPause = event.target.classList.contains("no-pause"); const isNoPause = event.target.classList.contains("no-pause");
if (howlerInstance && !isNoPause) { if (howlerInstance && !isNoPause) {
@@ -44,7 +89,6 @@
try { try {
const uploadedPlaylist = JSON.parse(event.target.result); const uploadedPlaylist = JSON.parse(event.target.result);
localStorage.setItem("retrowave-history", event.target.result); localStorage.setItem("retrowave-history", event.target.result);
} catch (error) { } catch (error) {
alert("malformed/invalid json file"); alert("malformed/invalid json file");
} }
@@ -53,7 +97,7 @@
} }
document.getElementById("initButton")?.addEventListener("click", () => { document.getElementById("initButton")?.addEventListener("click", () => {
var hydra = new Hydra({ detectAudio: false }) var hydra = new Hydra({ detectAudio: false });
modalEl.classList.remove("open"); modalEl.classList.remove("open");
playMusic(); playMusic();
initHydra(); initHydra();
@@ -66,7 +110,6 @@
document.addEventListener("keyup", (event) => { document.addEventListener("keyup", (event) => {
const { key } = event; const { key } = event;
console.log("key pressed", key);
switch (key) { switch (key) {
case " ": case " ":
togglePlay(); togglePlay();
@@ -84,7 +127,14 @@
case "n": case "n":
playNextTrack(); playNextTrack();
break; break;
case "f":
toggleFullScreen();
break;
case "h":
toggleControls();
break;
case 'x':
toggleEverything();
} }
}); });
@@ -152,7 +202,7 @@
}); });
setVolume(); setVolume();
isPlaying = true; isPlaying = true;
window.hw = howlerInstance window.hw = howlerInstance;
updateInfo(currentTrack); updateInfo(currentTrack);
@@ -161,7 +211,6 @@
} }
function volumeDown() { function volumeDown() {
console.log(volume);
if (volume > 0.1) { if (volume > 0.1) {
volume -= 0.1; volume -= 0.1;
} }
@@ -193,6 +242,7 @@
titleEl.innerText = trackDetails.title; titleEl.innerText = trackDetails.title;
document.title = `Now Playing... ${trackDetails.title}`; document.title = `Now Playing... ${trackDetails.title}`;
coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`; coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`;
ovr.innerHTML = `${trackDetails.title}`
} }
function getHistory() { function getHistory() {
@@ -210,7 +260,7 @@
function downloadHistory() { function downloadHistory() {
const historyArray = getHistory(); const historyArray = getHistory();
let element = document.createElement("a"); let element = document.createElement("a");
let playListData = '#EXTM3U'; let playListData = "#EXTM3U";
historyArray.forEach((musicData) => { historyArray.forEach((musicData) => {
playListData = `${playListData} playListData = `${playListData}
@@ -221,8 +271,7 @@ https://retrowave.ru/${musicData.streamUrl}
element.setAttribute( element.setAttribute(
"href", "href",
"data:audio/x-mpegurl;;charset=utf-8," + "data:audio/x-mpegurl;;charset=utf-8," + encodeURIComponent(playListData)
encodeURIComponent(playListData)
); );
element.setAttribute("download", "retrowave_playlist.m3u"); element.setAttribute("download", "retrowave_playlist.m3u");
@@ -255,6 +304,32 @@ https://retrowave.ru/${musicData.streamUrl}
refreshBtn.addEventListener("click", () => { refreshBtn.addEventListener("click", () => {
playNextTrack(); playNextTrack();
}); });
fullScreenBtn.addEventListener("click", () => {
toggleFullScreen();
});
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
function toggleControls() {
const toggleableElements = document.querySelectorAll(".toggleable");
toggleableElements.forEach((el) => {
el.classList.toggle("hidden");
});
}
function toggleEverything() {
musixPlayerEl.classList.toggle("hidden");
ovr.classList.toggle("hidden");
} }
// function initCodef() { // function initCodef() {
@@ -279,15 +354,23 @@ https://retrowave.ru/${musicData.streamUrl}
// } // }
function initHydra() { function initHydra() {
try {
voronoi(350, 0.15) voronoi(350, 0.15)
.modulateScale(osc(8).rotate(Math.sin(time)), .5) .modulateScale(osc(8).rotate(Math.sin(time)), 0.5)
.thresh(.8) .thresh(0.8)
.modulateRotate(osc(7), .4) .modulateRotate(osc(7), 0.4)
.thresh(.7) .thresh(0.7)
.diff(src(o0).scale(1.8)) .diff(src(o0).scale(1.8))
.modulateScale(osc(2).modulateRotate(o0, .74)) .modulateScale(osc(2).modulateRotate(o0, 0.74))
.diff(src(o0).rotate([-.012, .01, -.002, 0]).scrollY(0, [-1 / 199800, 0].fast(0.7))) .diff(
.brightness([-.02, -.17].smooth().fast(.5))//.modulate(o0, () => a.fft[1] * .2) src(o0)
.out() .rotate([-0.012, 0.01, -0.002, 0])
.scrollY(0, [-1 / 199800, 0].fast(0.7))
)
.brightness([-0.02, -0.17].smooth().fast(0.5)) //.modulate(o0, () => a.fft[1] * .2)
.out();
} catch (error) {
console.error("Hydra initialization failed:", error);
}
} }
})(); })();