mayekkuzu/scuf-radio-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new functionality

Browse Source 
Updated styles
Added album cover
Added pause and mute buttons
Added social buttons
This commit is contained in:
endme 2024-11-24 16:20:47 +03:00
parent 028ae84d1f
commit 0a57192d66
5 changed files with 481 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.vscode

127
index.html
View File

@ -1,75 +1,79 @@
<!DOCTYPE html><html lang="en"><head> <!DOCTYPE html>
<html lang="en">
<head>
<!-- This website is not affiliated with either lainon.life or fauux. --> <!-- This website is not affiliated with either lainon.life or fauux. -->
<!-- https://github.com/debil03311/fauuxonlife --> <!-- https://github.com/debil03311/fauuxonlife -->
<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>fauuxon.life</title> <title>SCUF FM Radio</title>
<link rel="shortcut icon" href="./public/asset/favicon.ico" type="image/x-icon"> <link
rel="shortcut icon"
href="./public/asset/favicon.ico"
type="image/x-icon"
/>
<!-- Regular --> <!-- Regular -->
<meta name="theme-color" content="#d2738a"> <meta name="theme-color" content="#d2738a" />
<meta name="image" content="https://debil03311.github.io/fauuxonlife/public/asset/embed.png"> <meta name="image" content="./public/asset/embed.png" />
<meta name="title" content="lainon.life interface"> <meta name="title" content="SCUF FM Radio" />
<meta name="description" content="fauux-inspired, unaffiliated, third party interface for the lainon.life web radio"> <meta name="description" content="Сидим кайфуем!" />
<!-- OpenGraph --> <!-- OpenGraph -->
<meta property="og:type" content="website"> <meta property="og:type" content="website" />
<meta property="og:image" content="https://debil03311.github.io/fauuxonlife/public/asset/embed.png"> <meta property="og:image" content="../public/asset/embed.png" />
<meta property="og:site_name" content="fauuxon.life"> <meta property="og:site_name" content="SCUF FM Radio" />
<meta property="og:title" content="lainon.life interface"> <meta property="og:title" content="SCUF FM Radio" />
<meta property="og:description" content="fauux-inspired, unaffiliated, third party interface for the lainon.life web radio"> <meta property="og:description" content="Сидим кайфуем!" />
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary"> <meta property="twitter:card" content="summary" />
<meta property="twitter:image" content="https://debil03311.github.io/fauuxonlife/public/asset/embed.png"> <meta property="twitter:image" content="../public/asset/embed.png" />
<meta property="twitter:title" content="lainon.life interface"> <meta property="twitter:title" content="SCUF FM Radio" />
<meta property="twitter:description" content="fauux-inspired, unaffiliated, third party interface for the lainon.life web radio"> <meta property="twitter:description" content="Сидим кайфуем!" />
<link rel="stylesheet" href="./public/asset/icofont/icofont.min.css"> <link rel="stylesheet" href="./public/asset/icofont/icofont.min.css" />
<link rel="stylesheet" href="./public/css/index.css"> <link rel="stylesheet" href="./public/css/index.css" />
<link rel="stylesheet" href="./public/css/index.m.css"> <link rel="stylesheet" href="./public/css/index.m.css" />
</head><body> </head>
<body>
<div id="darken" class="overlay no-select"></div> <div id="darken" class="overlay no-select"></div>
<div id="scanlines" class="overlay no-select"></div> <div id="scanlines" class="overlay no-select"></div>
<div id="vignette" class="overlay no-select"></div> <div id="vignette" class="overlay no-select"></div>
<div id="warning-message" class="overlay hidden" onclick="this.classList.add('hidden')"> <div
id="warning-message"
class="overlay hidden"
onclick="this.classList.add('hidden')"
>
<div id="warning-content"> <div id="warning-content">
<h2>Something went wrong.</h2> <h2>Что-то пошло не так, бля. Починим!</h2>
<p>
Failed to fetch the necessary data. Check to see if <a href="https://lainon.life">lainon.life</a> is down.
</p>
<p>
If it's not down then there's an issue with CORS, but you can probably it yourself! All you have to do is get an extension/add-on for your browser that enables CORS anywhere. If you're Chromium-based, check <a href="https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf">this one</a> out. If you're on FireFox, I have no idea, maybe <a href="https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/">this one</a>? Do keep in mind that enforcing CORS at all times could break some other sites you may frequent.
</p>
</div> </div>
</div> </div>
<audio id="audio" class="hidden" <audio
id="audio"
class="hidden"
preload="none" preload="none"
src="https://lainon.life/radio/cafe.ogg" src="https://lainon.life/radio/cafe.ogg"
></audio> ></audio>
<header> <header>
fauux(<a href="https://lainon.life/">lainon.life</a>): [<span class="listeners current" title="Listening">0</span>, <span class="listeners unique" title="UNIQUYE">0</span>, <span class="listeners total" title="Peak Listeners">0</span>] <span>=SCUF FM=</span>
<span class="header-stats">Stats</span>
<span>
[<span class="listeners current" title="Listening">0</span>,
<span class="listeners unique" title="Unique">0</span>,
<span class="listeners total" title="Peak Listeners">0</span>]
</span>
</header> </header>
<section id="player"> <section id="player">
<div id="progress-bar" <div id="progress-bar" style="width: 0%" class="no-select"></div>
style="width: 0%"
class="no-select">
</div>
<div id="volume-bar" <div id="volume-bar" style="width: 20%" class="no-select"></div>
style="width: 20%"
class="no-select">
</div>
<div id="current-details" class="no-select"> <div id="current-details" class="no-select">
<span id="current-song"> <span id="current-song">
@ -77,29 +81,48 @@
<span id="current-playlist">NULL</span> <span id="current-playlist">NULL</span>
</span> </span>
<span id="current-artist">NULL</span> <span id="current-artist">NULL</span>
</div> </div>
</section> </section>
<section id="channels"> <section id="channels">
<i id="swing" <i
id="swing"
title="swing" title="swing"
class="channel icofont-ui-play" class="channel icofont-ui-play"
onclick="switchChannel(this.id)" onclick="switchChannel(this.id)"
></i> ></i>
<i
id="pause"
title="pause"
class="channel icofont-ui-pause active"
onclick="pauseRadio()"
></i>
<i
id="mute"
title="mute"
class="control icofont-ui-mute"
onclick="toggleMute()"
></i>
</section> </section>
<section id="song-list"> <section id="song-list">
<div id="list-previous"></div> <div id="list-previous"></div>
<div id="list-current"> <div id="list-current">Press play to play. Vot tak vot!</div>
Select one of the channels above to start listening.<br>
This project is <a href="https://github.com/debil03311/fauuxonlife">open source</a> and unaffiliated with either lainon.life or fauux.
</div>
<div id="list-next"></div> <div id="list-next"></div>
</section> </section>
<script defer src="./public/js/index.js"></script> <section id="social">
</body></html> <a href="https://t.me/scuf_fm" target="_blank"
><i class="social icofont-telegram"></i
></a>
<a href="https://y2z.ru" target="_blank"
><i class="social icofont-web"></i
></a>
</section>
<script defer src="./public/js/index.js"></script>
</body>
</html>

84
public/css/index.css
View File

@ -1,9 +1,10 @@
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Zen+Maru+Gothic:wght@400;500;700&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
:root { :root {
--pink: #d2738a; --pink: #d2738a;
--pale: #c1b492; --pale: #c1b492;
--bgcolor: #1e1b1e; --bgcolor: #1e1b1e;
--white: #ddd;
} }
::selection { ::selection {
@ -42,6 +43,18 @@
-webkit-user-select: none !important; -webkit-user-select: none !important;
} }
header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.header-stats {
font-size: 16px;
}
body { body {
min-height: 100vh; min-height: 100vh;
background: #000 url("../asset/bg205.gif"); background: #000 url("../asset/bg205.gif");
@ -58,8 +71,7 @@ body {
} }
a, a,
.listeners .listeners {
{
color: var(--pink); color: var(--pink);
text-decoration: none; text-decoration: none;
text-shadow: 0 0 10px #d2738a64; text-shadow: 0 0 10px #d2738a64;
@ -71,7 +83,8 @@ a:hover {
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; left: 0; top: 0;
left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
@ -83,7 +96,7 @@ a:hover {
#scanlines { #scanlines {
background: url("../asset/scanlines.png"); background: url("../asset/scanlines.png");
opacity: .6; opacity: 0.6;
z-index: 2; z-index: 2;
} }
@ -113,13 +126,12 @@ a:hover {
} }
header, header,
section section {
{
width: clamp(256px, 896px, 90%); width: clamp(256px, 896px, 90%);
background-color: var(--bgcolor); background-color: var(--bgcolor);
box-shadow: 0 0 16px #d2738a32; box-shadow: 0 0 16px #d2738a32;
padding: 1rem; padding: 1rem;
margin: .8rem; margin: 0.8rem;
} }
header { header {
@ -136,13 +148,20 @@ header {
font-size: 1.4rem; font-size: 1.4rem;
cursor: e-resize; cursor: e-resize;
transition: color 0.2s ease-in;
/* display: flex; /* display: flex;
align-items: center; */ align-items: center; */
} }
#player.paused {
color: rgba(0, 0, 0, 0.3);
}
#progress-bar { #progress-bar {
position: absolute; position: absolute;
top: 0; left: 0; top: 0;
left: 0;
height: 100%; height: 100%;
background-color: var(--pink); background-color: var(--pink);
} }
@ -159,12 +178,17 @@ header {
#volume-bar { #volume-bar {
position: absolute; position: absolute;
height: 3px; height: 4px;
top: 6px; top: 6px;
left: 0; left: 0;
background-color: var(--pale); background-color: var(--pale);
background-color: #000; background-color: #000;
box-shadow: 0 0 10px var(--pink); box-shadow: 0 0 10px var(--pink);
transition: opacity 0.2s ease-in;
}
#volume-bar.muted {
opacity: 0.3;
} }
#current-details { #current-details {
@ -185,8 +209,7 @@ header {
} }
#current-title, #current-title,
#current-date #current-date {
{
font-size: 2rem; font-size: 2rem;
font-weight: 800; font-weight: 800;
line-height: 1em; line-height: 1em;
@ -215,18 +238,22 @@ header {
#song-list { #song-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-repeat: no-repeat;
background-size: contain;
background-position: right 72px top;
background-blend-mode: exclusion;
} }
#list-previous { #list-previous {
text-shadow: none; text-shadow: none;
opacity: .6; opacity: 0.6;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
#list-current { #list-current {
color: #DDD; color: #ddd;
font-weight: 600; font-weight: 600;
} }
@ -237,19 +264,40 @@ header {
#channels { #channels {
font-size: 2rem; font-size: 2rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 1em; gap: 1em;
} }
.channel.active { #social {
color: #DDD; font-size: 2rem;
display: flex;
justify-content: center;
gap: 1em;
}
#social a:hover {
text-decoration: none;
}
#social .social:hover {
color: var(--white);
}
.channel.active,
.control.active {
color: #ddd;
text-shadow: 0 0 32px var(--pink); text-shadow: 0 0 32px var(--pink);
pointer-events: none; pointer-events: none;
} }
.channel:not(.active):hover { .control.active {
pointer-events: auto;
cursor: pointer;
}
.channel:not(.active):hover,
.control:not(.active):hover {
color: var(--pink); color: var(--pink);
cursor: pointer; cursor: pointer;
} }

16
public/css/index.m.css
View File

@ -11,4 +11,20 @@
#current-date { #current-date {
font-size: 1rem; font-size: 1rem;
} }
#song-list {
background-size: cover;
background-position: center;
font-size: 1.2rem;
}
#list-previous {
opacity: 0.9;
}
.entry-details,
.entry-length {
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000,
1px -1px 0 #000;
}
} }

137
public/js/index.js
View File

@ -4,22 +4,23 @@ const e_songDetails = {
title: document.getElementById("current-title"), title: document.getElementById("current-title"),
playlist: document.getElementById("current-playlist"), playlist: document.getElementById("current-playlist"),
artist: document.getElementById("current-artist"), artist: document.getElementById("current-artist"),
};
} const e_playlist = document.getElementById("current-playlist");
const e_playlist = document.getElementById("current-playlist") const e_songListSection = document.getElementById("song-list");
const e_songList = { const e_songList = {
next: document.getElementById("list-next"), next: document.getElementById("list-next"),
current: document.getElementById("list-current"), current: document.getElementById("list-current"),
previous: document.getElementById("list-previous"), previous: document.getElementById("list-previous"),
} };
const e_listeners = { const e_listeners = {
current: document.querySelector(".listeners.current"), current: document.querySelector(".listeners.current"),
total: document.querySelector(".listeners.total"), total: document.querySelector(".listeners.total"),
unique: document.querySelector(".listeners.unique"), unique: document.querySelector(".listeners.unique"),
} };
const e_audio = document.getElementById("audio"); const e_audio = document.getElementById("audio");
e_audio.volume = 0.2; e_audio.volume = 0.2;
@ -35,29 +36,24 @@ const e_channels = document.querySelectorAll(".channel");
* @param {int} limit - The maximum returnable integer * @param {int} limit - The maximum returnable integer
*/ */
const rRng=(limit)=> Math.floor(Math.random() * limit); const rRng = (limit) => Math.floor(Math.random() * limit);
/** /**
* Return a random item from a given array. * Return a random item from a given array.
* @param {Array} array - The maximum returnable integer * @param {Array} array - The maximum returnable integer
*/ */
const rArr=(array)=> array[rRng(array.length)]; const rArr = (array) => array[rRng(array.length)];
// :^) // :^)
const lainon = { const lainon = {
life: "https://radio.scuf.ru/", life: "https://radio.scuf.ru/",
} };
// Set a random background image // Set a random background image
const backgrounds = [ const backgrounds = ["bg205.gif", "bg_307.gif", "bg_315.gif", "patternTV2.gif"];
"bg205.gif",
"bg_307.gif",
"bg_315.gif",
"patternTV2.gif",
];
document.body.style.setProperty( document.body.style.setProperty(
"background-image", "background-image",
@ -81,10 +77,9 @@ async function fetchData() {
// cors-anywhere, and just in case you're thinking about it, // cors-anywhere, and just in case you're thinking about it,
// no, it's not public and your domain is not on the whitelist. // no, it's not public and your domain is not on the whitelist.
const data = await const data = await fetch(`https://radio.scuf.ru/api/nowplaying/scuf_fm`)
fetch(`https://radio.scuf.ru/api/nowplaying/scuf_fm`) .then((response) => response.json())
.then((response)=> response.json()) .catch((ERROR) => {
.catch((ERROR)=> {
console.error(ERROR); console.error(ERROR);
e_warningMessage.classList.remove("hidden"); e_warningMessage.classList.remove("hidden");
}); });
@ -101,7 +96,7 @@ async function fetchData() {
function parseData(radioData) { function parseData(radioData) {
// Update listeners // Update listeners
for (const listenerType in radioData.listeners) { for (const listenerType in radioData.listeners) {
e_listeners[listenerType].innerText = radioData.listeners[listenerType] e_listeners[listenerType].innerText = radioData.listeners[listenerType];
} }
// Go over the radioData object. // Go over the radioData object.
@ -110,39 +105,37 @@ function parseData(radioData) {
// wasn't found. // wasn't found.
for (const itemType in e_songDetails) { for (const itemType in e_songDetails) {
e_songDetails[itemType].innerText = ( e_songDetails[itemType].innerText = radioData.now_playing.song[itemType]
(radioData.now_playing.song[itemType])
? radioData.now_playing.song[itemType] ? radioData.now_playing.song[itemType]
: `${itemType.toUpperCase()} NOT FOUND` : `${itemType.toUpperCase()} NOT FOUND`;
);
} }
e_playlist.innerText = radioData.now_playing.playlist e_playlist.innerText = radioData.now_playing.playlist;
// Current song's length in seconds // Current song's length in seconds
const songLength = radioData.now_playing.duration; const songLength = radioData.now_playing.duration;
// Increment for the progress bar as a percentage of 100 // Increment for the progress bar as a percentage of 100
progressStep = (1/songLength) * 100; progressStep = (1 / songLength) * 100;
// Set the progress bar to display the current song's elapsed time // Set the progress bar to display the current song's elapsed time
e_progressBar.style.setProperty( e_progressBar.style.setProperty(
"width", "width",
(progressStep * Math.floor(radioData.now_playing.elapsed)) + "%" progressStep * Math.floor(radioData.now_playing.elapsed) + "%"
); );
e_songListSection.style = `background-image: url(${radioData.now_playing.song.art})`;
// Clear the entire song list // Clear the entire song list
for (const element in e_songList) for (const element in e_songList) e_songList[element].innerHTML = "";
e_songList[element].innerHTML = "";
// Fill in the upcoming songs // Fill in the upcoming songs
const {song,duration} = radioData.playing_next const { song, duration } = radioData.playing_next;
const e_songEntry = document.createElement("div"); const e_songEntry = document.createElement("div");
e_songEntry.className = "song-entry"; e_songEntry.className = "song-entry";
e_songEntry.innerHTML = ` e_songEntry.innerHTML = `
<div class="entry-details"> <div class="entry-details">
<span>Next FLEX: </span>
<span class="entry-artist">${song.artist}</span> <span class="entry-artist">${song.artist}</span>
- -
<span class="entry-title">${song.title}</span> <span class="entry-title">${song.title}</span>
@ -152,17 +145,21 @@ function parseData(radioData) {
e_songList.next.appendChild(e_songEntry); e_songList.next.appendChild(e_songEntry);
// Display the current song in the song list // Display the current song in the song list
e_songList.current.innerHTML = ` e_songList.current.innerHTML = `
<div class="song-entry"> <div class="song-entry">
<div class="entry-details"> <div class="entry-details">
<span>Current FLEX: </span> <span class="entry-artist">${
<span class="entry-artist">${radioData.now_playing.song.artist}</span> radioData.now_playing.song.artist
}</span>
- -
<span class="entry-title">${radioData.now_playing.song.title}</span> <span class="entry-title">${
radioData.now_playing.song.title
}</span>
</div> </div>
<span class="entry-length">${toMinSec(radioData.now_playing.duration).join(":")}</span> <span class="entry-length">${toMinSec(
radioData.now_playing.duration
).join(":")}</span>
</div> </div>
`; `;
@ -178,7 +175,9 @@ function parseData(radioData) {
- -
<span class="entry-title">${song.song.title}</span> <span class="entry-title">${song.song.title}</span>
</div> </div>
<span class="entry-length">${toMinSec(song.duration).join(":")}</span> <span class="entry-length">${toMinSec(song.duration).join(
":"
)}</span>
`; `;
e_songList.previous.appendChild(e_songEntry); e_songList.previous.appendChild(e_songEntry);
@ -192,10 +191,7 @@ function parseData(radioData) {
*/ */
function toMinSec(totalSeconds) { function toMinSec(totalSeconds) {
return [ return [padZero(Math.floor(totalSeconds / 60)), padZero(totalSeconds % 60)];
padZero(Math.floor(totalSeconds/60)),
padZero(totalSeconds % 60)
];
} }
/** /**
@ -205,9 +201,7 @@ function toMinSec(totalSeconds) {
*/ */
function padZero(integer) { function padZero(integer) {
return (integer < 10) return integer < 10 ? "0" + integer : "" + integer;
? "0" + integer
: "" + integer
} }
/** /**
@ -216,17 +210,9 @@ function padZero(integer) {
*/ */
function switchChannel(channelName) { function switchChannel(channelName) {
console.log(e_audio.paused,isPlaying) e_player.classList.remove("paused");
if (e_audio.paused === false) {
document.getElementById(channelName).classList.remove("active");
e_audio.pause()
isPlaying = false
currentChannel = "cafe"
e_audio.src = undefined
return
}
// Remove active class from all DOM channel elements // Remove active class from all DOM channel elements
e_channels.forEach((el)=> el.classList.remove("active")); e_channels.forEach((el) => el.classList.remove("active"));
// Add it to the clicked one // Add it to the clicked one
document.getElementById(channelName).classList.add("active"); document.getElementById(channelName).classList.add("active");
@ -239,6 +225,32 @@ function switchChannel(channelName) {
isPlaying = true; isPlaying = true;
} }
function pauseRadio() {
if (!isPlaying) {
return;
}
e_player.classList.add("paused");
progressStep = 0;
e_channels.forEach((el) => el.classList.remove("active"));
document.getElementById("pause").classList.add("active");
e_audio.pause();
isPlaying = false;
}
function toggleMute() {
if (e_audio.muted) {
document.getElementById("mute").classList.remove("active");
e_volumeBar.classList.remove("muted");
e_audio.muted = false;
} else {
document.getElementById("mute").classList.add("active");
e_volumeBar.classList.add("muted");
e_audio.muted = true;
}
}
// Change the volume // Change the volume
let volumeUpdate; // Interval container let volumeUpdate; // Interval container
@ -255,10 +267,7 @@ function setVolume(mouseEvent) {
let audioVolume = (1 / mouseEvent.target.clientWidth) * clickPosition; let audioVolume = (1 / mouseEvent.target.clientWidth) * clickPosition;
// Resize the volume bar to the new width // Resize the volume bar to the new width
e_volumeBar.style.setProperty( e_volumeBar.style.setProperty("width", `${volumeBarWidth}%`);
"width",
`${volumeBarWidth}%`
);
// Set the audio volume // Set the audio volume
e_audio.volume = audioVolume; e_audio.volume = audioVolume;
@ -267,15 +276,14 @@ function setVolume(mouseEvent) {
e_player.onmousemove = setVolume; e_player.onmousemove = setVolume;
e_player.onmousedown = setVolume; e_player.onmousedown = setVolume;
// Refresh radio data when the tab is focused // Refresh radio data when the tab is focused
window.onfocus=()=> { window.onfocus = () => {
if (isPlaying) fetchData(); if (isPlaying) fetchData();
} };
// Update the progress bar every second // Update the progress bar every second
const updateProgressBar = setInterval(()=> { const updateProgressBar = setInterval(() => {
// Current percentage // Current percentage
const width = parseFloat(e_progressBar.style.width); const width = parseFloat(e_progressBar.style.width);
@ -286,15 +294,10 @@ const updateProgressBar = setInterval(()=> {
// increment the progress bar. // increment the progress bar.
if (futureWidth < 100) { if (futureWidth < 100) {
e_progressBar.style.setProperty( e_progressBar.style.setProperty("width", futureWidth + "%");
"width",
futureWidth + "%"
);
} }
// Otherwise, if it does exceed 100%, that means // Otherwise, if it does exceed 100%, that means
// the song has changed, so fetch the new data. // the song has changed, so fetch the new data.
else if (futureWidth >= 100) fetchData();
else if (futureWidth >= 100)
fetchData();
}, 1000); }, 1000);