From ae44e79a15b2257c3034b272ccdf2d69b01c6455 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Mon, 30 Jun 2025 02:37:28 +0530 Subject: New Features and Cosmetics * Adds option to toggle fullscreen * Adds option to hide controls and hide music player(just visualization only) * Font Changes * Adds Stylized tooltips --- fonts/VCR_OSD_MONO_1.001.ttf | Bin 0 -> 75864 bytes hg.css | 59 ++++- index.html | 156 ++++++++---- player.js | 589 ++++++++++++++++++++++++------------------- 4 files changed, 500 insertions(+), 304 deletions(-) create mode 100644 fonts/VCR_OSD_MONO_1.001.ttf diff --git a/fonts/VCR_OSD_MONO_1.001.ttf b/fonts/VCR_OSD_MONO_1.001.ttf new file mode 100644 index 0000000..dcca687 Binary files /dev/null and b/fonts/VCR_OSD_MONO_1.001.ttf differ diff --git a/hg.css b/hg.css index 722f06f..015a3e3 100644 --- a/hg.css +++ b/hg.css @@ -2,6 +2,10 @@ font-family: "StreamSter"; src: url(./fonts/Streamster.ttf); } +@font-face { + font-family: "VCR"; + src: url(./fonts/VCR_OSD_MONO_1.001.ttf); +} #app, body, html { @@ -15,7 +19,7 @@ body { padding: 0; margin: 0; background: #fafafa; - font-family: "Helvetica Neue", arial, sans-serif; + font-family: "VCR", arial, sans-serif; font-weight: 400; color: #444; -webkit-font-smoothing: antialiased; @@ -131,7 +135,8 @@ h3#track-name { font-weight: 500; letter-spacing: 2px; color: #e91e63; - font-family: "StreamSter", sans-serif; + /* font-family: "StreamSter", sans-serif; */ + font-family: "VCR", sans-serif; margin-bottom: 0; background: rgb(0 0 0 / 71%); padding: 10px; @@ -149,7 +154,7 @@ hr { width: 170px; margin: 0 auto; color: #dce3e7; - font-family: "Droid Serif", serif; + font-family: "VCR", serif; font-size: 13px; font-style: italic; line-height: 18px; @@ -247,19 +252,23 @@ dialog::backdrop { .controls { font-style: italic; font-size: larger; + color: #ff0095; } .footer { position: absolute; bottom: 0px; - width: 350px; + width: 342px; display: flex; color: #ffffff; z-index: 999; justify-content: center; + height: 17px; } .footer .footer-items { + font-size: 13px; + font-family: "VCR", serif; text-decoration: none; cursor: pointer; padding-left: 10px; @@ -267,15 +276,53 @@ dialog::backdrop { justify-content: center; } +.footer-items#history { + margin-top: 3px; +} + canvas { position: absolute; top: 0; } -.refresh { +.buttons { z-index: 999; cursor: pointer; position: relative; - float: right; 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; +} diff --git a/index.html b/index.html index bfcf695..8fa8498 100644 --- a/index.html +++ b/index.html @@ -1,62 +1,128 @@ - - - - - + + + + Retrowave Player - - - - + + + + - +
-
-
🔃
-
-
Now Playing
-
-

Retrowave Player

-
-
-
-
- - - - -
- +
+
+ + + + + + + + + + +
+
🔃
+
+
Now Playing
+
+

Retrowave Player

+
+
+
+ + + +
+ guestbook +
+
+ +
+ - - - \ No newline at end of file + + diff --git a/player.js b/player.js index 2c7e73f..51ae188 100644 --- a/player.js +++ b/player.js @@ -1,293 +1,376 @@ (function () { - let isPlaying = false; - let currentTracks = []; - let cursor = 0; - let howlerInstance; - 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"); - let volume = 1; - let effectCanvas; - let starField; - let line3D; - const synthwaveColor = 0xff2975; - - openDialog(); - getMusic(); - listenUploadFileChange(); - - coverArtEl.addEventListener("click", (event) => { - const isNoPause = event.target.classList.contains("no-pause"); - if (howlerInstance && !isNoPause) { - togglePlay(); + let isPlaying = false; + let currentTracks = []; + let cursor = 0; + let howlerInstance; + const retroWaveRu = "https://retrowave.ru"; + let titleEl = document.getElementById("track-name"); + let coverArtEl = document.getElementsByClassName("music-player")[0]; + let refreshBtn = document.querySelector(".refresh"); + let ovr = document.querySelector(".OVR"); + let fullScreenBtn = document.querySelector(".fullscreen"); + const modalEl = document.getElementById("intro-modal"); + // const uploadInfoEl = document.getElementById("upload-info"); + const fileUploadEl = document.getElementById("file-upload"); + let volume = 1; + let effectCanvas; + let starField; + let line3D; + const synthwaveColor = 0xff2975; + + openDialog(); + getMusic(); + 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; } + }); }); + } - // 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]; - const reader = new FileReader(); - reader.readAsText(selectedFile, "UTF-8"); - reader.onload = function (event) { - 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", () => { - var hydra = new Hydra({ detectAudio: false }) - modalEl.classList.remove("open"); - playMusic(); - initHydra(); - initControls(); - }); - - document.getElementById("history").addEventListener("click", () => { - downloadHistory(); - }); - - document.addEventListener("keyup", (event) => { - const { key } = event; - console.log("key pressed", key); - switch (key) { - case " ": - togglePlay(); - break; - case "a": - break; - case "d": - break; - case "w": - volumeUp(); - break; - case "s": - volumeDown(); - break; - case "n": - playNextTrack(); - break; - - } - }); + document.addEventListener("DOMContentLoaded", initDynamicTooltips); - let touchstartX = 0; - let touchendX = 0; - let touchstartY = 0; - let touchendY = 0; - const musixPlayerEl = document.getElementsByClassName("music-player")[0]; - if (musixPlayerEl) { - musixPlayerEl.addEventListener("touchstart", (e) => { - touchstartX = e.changedTouches[0].screenX; - touchstartY = e.changedTouches[0].screenY; - }); - - musixPlayerEl.addEventListener("touchend", (e) => { - touchendX = e.changedTouches[0].screenX; - touchendY = e.changedTouches[0].screenY; - checkDirection(); - }); + coverArtEl.addEventListener("click", (event) => { + const isNoPause = event.target.classList.contains("no-pause"); + if (howlerInstance && !isNoPause) { + togglePlay(); } - - function checkDirection() { - if (touchendX < touchstartX) { - // Swipe Left - } - if (touchendX > touchstartX) { - // Swipe Right - } - - if (touchendY < touchstartY) { - volumeUp(); - } - if (touchendY > touchstartY) { - volumeDown(); + }); + + // 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]; + const reader = new FileReader(); + reader.readAsText(selectedFile, "UTF-8"); + reader.onload = function (event) { + 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", () => { + var hydra = new Hydra({ detectAudio: false }); + modalEl.classList.remove("open"); + playMusic(); + initHydra(); + initControls(); + }); + + document.getElementById("history").addEventListener("click", () => { + downloadHistory(); + }); + + document.addEventListener("keyup", (event) => { + const { key } = event; + switch (key) { + case " ": + togglePlay(); + break; + case "a": + break; + case "d": + break; + case "w": + volumeUp(); + break; + case "s": + volumeDown(); + break; + case "n": + playNextTrack(); + break; + case "f": + toggleFullScreen(); + break; + case "h": + toggleControls(); + break; + case 'x': + toggleEverything(); } + }); + + let touchstartX = 0; + let touchendX = 0; + let touchstartY = 0; + let touchendY = 0; + const musixPlayerEl = document.getElementsByClassName("music-player")[0]; + if (musixPlayerEl) { + musixPlayerEl.addEventListener("touchstart", (e) => { + touchstartX = e.changedTouches[0].screenX; + touchstartY = e.changedTouches[0].screenY; + }); - function openDialog() { - modalEl.classList.add("open"); - } + musixPlayerEl.addEventListener("touchend", (e) => { + touchendX = e.changedTouches[0].screenX; + touchendY = e.changedTouches[0].screenY; + checkDirection(); + }); + } - 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 checkDirection() { + if (touchendX < touchstartX) { + // Swipe Left } - - function initPlayer() { } - - function playMusic() { - const currentTrack = currentTracks[0]; - const singleTrack = currentTrack.streamUrl; - const fullTrack = `${retroWaveRu}${singleTrack}`; - howlerInstance = new Howl({ - src: [fullTrack], - html5: true, - onend: function () { - playNextTrack(); - }, - }); - setVolume(); - isPlaying = true; - window.hw = howlerInstance - - updateInfo(currentTrack); - - addToHistory(currentTrack); - howlerInstance.play(); + if (touchendX > touchstartX) { + // Swipe Right } - function volumeDown() { - console.log(volume); - if (volume > 0.1) { - volume -= 0.1; - } - setVolume(); + if (touchendY < touchstartY) { + volumeUp(); } - - function volumeUp() { - if (volume < 1) { - volume += 0.1; - } - setVolume(); + if (touchendY > touchstartY) { + volumeDown(); } + } + + function openDialog() { + modalEl.classList.add("open"); + } + + 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() {} + + function playMusic() { + const currentTrack = currentTracks[0]; + const singleTrack = currentTrack.streamUrl; + const fullTrack = `${retroWaveRu}${singleTrack}`; + howlerInstance = new Howl({ + src: [fullTrack], + html5: true, + onend: function () { + playNextTrack(); + }, + }); + setVolume(); + isPlaying = true; + window.hw = howlerInstance; - function setVolume() { - howlerInstance.volume(volume); - } + updateInfo(currentTrack); - function togglePlay() { - isPlaying = !isPlaying; + addToHistory(currentTrack); + howlerInstance.play(); + } - if (isPlaying) { - howlerInstance.play(); - } else { - howlerInstance.pause(); - } + function volumeDown() { + if (volume > 0.1) { + volume -= 0.1; } + setVolume(); + } - function updateInfo(trackDetails) { - titleEl.innerText = trackDetails.title; - document.title = `Now Playing... ${trackDetails.title}`; - coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`; + function volumeUp() { + if (volume < 1) { + volume += 0.1; } + setVolume(); + } - function getHistory() { - let localHistoryStore = localStorage.getItem("retrowave-history") || "[]"; - let historyArray = JSON.parse(localHistoryStore); - return historyArray; - } + function setVolume() { + howlerInstance.volume(volume); + } - function addToHistory(trackDetails) { - let historyArray = getHistory(); - historyArray.push(trackDetails); - localStorage.setItem("retrowave-history", JSON.stringify(historyArray)); - } + function togglePlay() { + isPlaying = !isPlaying; - function downloadHistory() { - const historyArray = getHistory(); - let element = document.createElement("a"); - let playListData = '#EXTM3U'; - historyArray.forEach((musicData) => { - playListData = `${playListData} + if (isPlaying) { + howlerInstance.play(); + } else { + howlerInstance.pause(); + } + } + + function updateInfo(trackDetails) { + titleEl.innerText = trackDetails.title; + document.title = `Now Playing... ${trackDetails.title}`; + coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`; + ovr.innerHTML = `${trackDetails.title}` + } + + function getHistory() { + let localHistoryStore = localStorage.getItem("retrowave-history") || "[]"; + let historyArray = JSON.parse(localHistoryStore); + return historyArray; + } + + function addToHistory(trackDetails) { + let historyArray = getHistory(); + historyArray.push(trackDetails); + localStorage.setItem("retrowave-history", JSON.stringify(historyArray)); + } + + function downloadHistory() { + const historyArray = getHistory(); + let element = document.createElement("a"); + let playListData = "#EXTM3U"; + historyArray.forEach((musicData) => { + playListData = `${playListData} #EXTINF:${Math.ceil(musicData.duration / 1000)}, ${musicData.title} https://retrowave.ru/${musicData.streamUrl} `; - }); + }); - element.setAttribute( - "href", - "data:audio/x-mpegurl;;charset=utf-8," + - encodeURIComponent(playListData) - ); - element.setAttribute("download", "retrowave_playlist.m3u"); + element.setAttribute( + "href", + "data:audio/x-mpegurl;;charset=utf-8," + encodeURIComponent(playListData) + ); + element.setAttribute("download", "retrowave_playlist.m3u"); - element.style.display = "none"; - document.body.appendChild(element); + element.style.display = "none"; + document.body.appendChild(element); - element.click(); + element.click(); - document.body.removeChild(element); - } + document.body.removeChild(element); + } - function playNextTrack() { - resetHowler(); - currentTracks.shift(); - if (currentTracks.length <= 3) { - getMusic(); - } - playMusic(); + function playNextTrack() { + resetHowler(); + currentTracks.shift(); + if (currentTracks.length <= 3) { + getMusic(); } - - function resetHowler(destroy = false) { - howlerInstance.stop(); - if (destroy) { - howlerInstance.unload(); - howlerInstance = null; - } + playMusic(); + } + + function resetHowler(destroy = false) { + howlerInstance.stop(); + if (destroy) { + howlerInstance.unload(); + howlerInstance = null; } + } - function initControls() { - refreshBtn.addEventListener("click", () => { - playNextTrack(); - }); + function initControls() { + refreshBtn.addEventListener("click", () => { + playNextTrack(); + }); + + fullScreenBtn.addEventListener("click", () => { + toggleFullScreen(); + }); + } + + function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } } + } - // function initCodef() { - // const width = window.innerWidth; - // const height = window.innerHeight; - // effectCanvas = new canvas(width, height, 'codef-canvas'); - // starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0); - // line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 ); - // line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); - // line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); - // renderCodeFx(); - // } - - // function renderCodeFx() { - // effectCanvas.fill('#000000'); - // line3D.group.rotation.x+=0.01; - // line3D.group.rotation.y+=0.02; - // line3D.group.rotation.z+=0.04; - // starField.draw(); - // line3D.draw(); - // requestAnimationFrame(renderCodeFx); - // } - - function initHydra() { - voronoi(350, 0.15) - .modulateScale(osc(8).rotate(Math.sin(time)), .5) - .thresh(.8) - .modulateRotate(osc(7), .4) - .thresh(.7) - .diff(src(o0).scale(1.8)) - .modulateScale(osc(2).modulateRotate(o0, .74)) - .diff(src(o0).rotate([-.012, .01, -.002, 0]).scrollY(0, [-1 / 199800, 0].fast(0.7))) - .brightness([-.02, -.17].smooth().fast(.5))//.modulate(o0, () => a.fft[1] * .2) - .out() + 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() { + // const width = window.innerWidth; + // const height = window.innerHeight; + // effectCanvas = new canvas(width, height, 'codef-canvas'); + // starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0); + // line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 ); + // line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); + // line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); + // renderCodeFx(); + // } + + // function renderCodeFx() { + // effectCanvas.fill('#000000'); + // line3D.group.rotation.x+=0.01; + // line3D.group.rotation.y+=0.02; + // line3D.group.rotation.z+=0.04; + // starField.draw(); + // line3D.draw(); + // requestAnimationFrame(renderCodeFx); + // } + + function initHydra() { + try { + voronoi(350, 0.15) + .modulateScale(osc(8).rotate(Math.sin(time)), 0.5) + .thresh(0.8) + .modulateRotate(osc(7), 0.4) + .thresh(0.7) + .diff(src(o0).scale(1.8)) + .modulateScale(osc(2).modulateRotate(o0, 0.74)) + .diff( + src(o0) + .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); } + } })(); -- cgit v1.2.3