Radioiceberg
/
website
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: modularize ui

Browse Source
main
lambda 2 years ago
parent 4868d41046
commit cb90344b5f
20 changed files with 288 additions and 200 deletions
Show Stats Download Patch File Download Diff File

23
src/animations.js
Unescape View File

@ -0,0 +1,23 @@
const STOP_STATE_POINTS = "650,0, 1350,0, 1350,500, 650,500";
const PLAY_STATE_POINTS = "0,0, 2000,250, 2000,250, 0,500";
const startIcebergsAnimation = () => {
[1, 2, 3].map((i) => {
const polygon = document.getElementById(`iceberg${i}`);
polygon.classList.add("active");
});
};
const stopIcebergsAnimation = () => {
[1, 2, 3].map((i) => {
const polygon = document.getElementById(`iceberg${i}`);
polygon.classList.remove("active");
});
};
export {
startIcebergsAnimation,
stopIcebergsAnimation,
STOP_STATE_POINTS,
PLAY_STATE_POINTS,
};

15
src/dom.js
Unescape View File

@ -0,0 +1,15 @@
const audio = document.querySelector("audio");
const playButton = document.querySelector(".play-stream");
const playButtonAnimation = document.getElementById("play-button-animation");
const artistBlock = document.querySelector(".now-playing_artist");
const titleBlock = document.querySelector(".now-playing_song");
const logoDot = document.querySelector(".logo_dot");
export {
audio,
playButton,
playButtonAnimation,
artistBlock,
titleBlock,
logoDot,
};

BIN
src/fonts/Inter.ttf
View File

Binary file not shown.

BIN
src/fonts/lato-lightitalic.woff
View File

Binary file not shown.

BIN
src/fonts/lato-lightitalic.woff2
View File

Binary file not shown.

BIN
src/fonts/lato-regular-webfont.woff2
View File

Binary file not shown.

20
src/index.html
Unescape View File

@ -43,14 +43,20 @@
</head> </head>
<body> <body>
<h1>Radio . Iceberg</h1> <span class="logo">
<h1>Radio</h1>
<span class="logo_dot">
<span class="logo_dot_inner"></span>
</span>
<h1>Iceberg</h1>
</span>
<button class="play-stream"> <button class="play-stream">
<svg viewBox="0 0 2000 500"> <svg viewBox="0 0 2000 500">
<defs></defs> <defs></defs>
<polygon <polygon
points="0,0, 2000,250, 2000,250, 0,500" points="0,0, 2000,250, 2000,250, 0,500"
fill="var(--color-primary-1)" fill="var(--color-colors-additional-light)"
> >
<animate <animate
id="play-button-animation" id="play-button-animation"
@ -63,7 +69,7 @@
/> />
</polygon> </polygon>
</svg> </svg>
<audio controls preload="none" src="/stream" /> <audio controls preload="auto" src="/stream" />
</button> </button>
<div class="now-playing"> <div class="now-playing">
<div class="now-playing_title">now playing:</div> <div class="now-playing_title">now playing:</div>
@ -75,20 +81,20 @@
<polygon <polygon
id="iceberg1" id="iceberg1"
points="0,0, 100,0, 100,100, 0,100" points="0,0, 100,0, 100,100, 0,100"
fill="var(--color-primary-1)" fill="var(--color-colors-additional-light)"
></polygon> ></polygon>
<polygon <polygon
id="iceberg2" id="iceberg2"
points="5,5, 95,5, 95,95, 5,95" points="5,5, 95,5, 95,95, 5,95"
fill="var(--color-primary-2)" fill="var(--color-colors-additional-dark)"
></polygon> ></polygon>
<polygon <polygon
id="iceberg3" id="iceberg3"
points="10,10, 90,10, 90,90, 10,90" points="10,10, 90,10, 90,90, 10,90"
fill="var(--color-complement-1)" fill="var(--color-colors-additional-medium)"
></polygon> ></polygon>
</svg> </svg>
</div> </div>
<script src="main.js"></script> <script src="main.js" type="module"></script>
</body> </body>
</html> </html>

51
src/interactions.js
Unescape View File

@ -0,0 +1,51 @@
import { audio, playButton, playButtonAnimation } from "./dom.js";
import {
STOP_STATE_POINTS,
PLAY_STATE_POINTS,
startIcebergsAnimation,
stopIcebergsAnimation,
} from "./animations.js";
const hideAudio = () => {
audio.hidden = true;
};
const playAudio = () => {
audio?.play();
};
const pauseAudio = () => {
audio?.pause();
};
const setButtonPlayState = () => {
playButtonAnimation.setAttribute("from", PLAY_STATE_POINTS);
playButtonAnimation.setAttribute("to", STOP_STATE_POINTS);
playButtonAnimation.beginElement();
};
const setButtonStopState = () => {
playButtonAnimation.setAttribute("from", STOP_STATE_POINTS);
playButtonAnimation.setAttribute("to", PLAY_STATE_POINTS);
playButtonAnimation.beginElement();
};
const handleAudioPlay = () => {
playAudio();
setButtonPlayState();
startIcebergsAnimation();
};
const handleAudioStop = () => {
pauseAudio();
setButtonStopState();
stopIcebergsAnimation();
};
const addPlayerInteractions = () => {
playButton.addEventListener("click", () => {
audio?.paused ? handleAudioPlay() : handleAudioStop();
});
};
export { hideAudio, addPlayerInteractions };

109
src/main.js
Unescape View File

@ -1,110 +1,5 @@
const STOP_STATE_POINTS = "650,0, 1350,0, 1350,500, 650,500"; import { addPlayerInteractions, hideAudio } from "./interactions.js";
const PLAY_STATE_POINTS = "0,0, 2000,250, 2000,250, 0,500"; import { connectToServer } from "./websocket.js";
const getAudio = () => document.querySelector("audio");
const getPlayButton = () => document.querySelector(".play-stream");
const getPlayButtonAnimation = () =>
document.getElementById("play-button-animation");
const hideAudio = () => {
const a = getAudio();
a.hidden = true;
};
const playAudio = () => {
getAudio()?.play();
};
const pauseAudio = () => {
getAudio()?.pause();
};
const setButtonPlayState = () => {
const animationNode = getPlayButtonAnimation();
animationNode.setAttribute("from", PLAY_STATE_POINTS);
animationNode.setAttribute("to", STOP_STATE_POINTS);
animationNode.beginElement();
};
const setButtonStopState = () => {
const animationNode = getPlayButtonAnimation();
animationNode.setAttribute("from", STOP_STATE_POINTS);
animationNode.setAttribute("to", PLAY_STATE_POINTS);
animationNode.beginElement();
};
const startIcebergsAnimation = () => {
[1, 2, 3].map((i) => {
const polygon = document.getElementById(`iceberg${i}`);
polygon.classList.add("active");
});
};
const stopIcebergsAnimation = () => {
[1, 2, 3].map((i) => {
const polygon = document.getElementById(`iceberg${i}`);
polygon.classList.remove("active");
});
};
const handleAudioPlay = () => {
playAudio();
setButtonPlayState();
startIcebergsAnimation();
};
const handleAudioStop = () => {
pauseAudio();
setButtonStopState();
stopIcebergsAnimation();
};
const addPlayerInteractions = () => {
const playerButton = getPlayButton();
const audio = getAudio();
playerButton.addEventListener("click", () => {
audio.paused ? handleAudioPlay() : handleAudioStop();
});
audio.addEventListener("timeupdate", () => {
window.requestAnimationFrame(() => {
document.documentElement.style.setProperty(
"--time",
`${audio.currentTime * 100}deg`
);
});
});
};
async function connectToServer() {
const ws = new WebSocket(`ws://${location.host}/meta`);
ws.addEventListener("message", changeMetadata);
}
const changeMetadata = (metadataEvent) => {
const metaObject = JSON.parse(metadataEvent.data);
const { artist, title } = metaObject;
const artistBlock = document.querySelector(".now-playing_artist");
const titleBlock = document.querySelector(".now-playing_song");
if (artist) {
artistBlock.innerHTML = artist;
} else {
artistBlock.innerHTML = "";
}
if (title) {
titleBlock.innerHTML = title;
document.title = `${title} on Radioiceberg`;
} else {
titleBlock.innerHTML = "";
}
if (artist && title) {
document.title = `${artist} - ${title} on Radioiceberg`;
}
};
const main = () => { const main = () => {
hideAudio(); hideAudio();

58
src/messagesProcessor.js
Unescape View File

@ -0,0 +1,58 @@
import { artistBlock, titleBlock, logoDot } from "./dom.js";
const changeTitles = ({ artist, title }) => {
if (artist) {
artistBlock.innerHTML = artist;
} else {
artistBlock.innerHTML = "";
}
if (title) {
titleBlock.innerHTML = title;
document.title = `${title} on Radioiceberg`;
} else {
titleBlock.innerHTML = "";
}
if (artist && title) {
document.title = `${artist} - ${title} on Radioiceberg`;
}
};
const metadataChange = ({ data }) => {
changeTitles(data);
};
const liveStarted = () => {
logoDot.classList.add("live");
};
const liveEnded = () => {
logoDot.classList.remove("live");
};
const setState = ({ data }) => {
const { lastPlayed } = data;
changeTitles(lastPlayed);
};
const actions = {
metadataChange,
liveStarted,
liveEnded,
setState,
};
export const processMessage = ({ data }) => {
try {
const message = JSON.parse(data);
const action = actions[message.command];
if (action) {
action(message);
} else {
console.log("no action for", message);
}
} catch (error) {
console.error("Error while process websocket message", error);
}
};

10
src/scripts/dom.js
Unescape View File

@ -1,10 +0,0 @@
const getAudio = () => document.querySelector("audio");
const getPlayButton = () => document.querySelector(".play-stream");
const getPlayButtonAnimation = () =>
document.getElementById("play-button-animation");
export {
getAudio,
getPlayButton,
getPlayButtonAnimation
};

14
src/scripts/interactions.js
Unescape View File

@ -1,14 +0,0 @@
import { getAudio } from "./dom.js";
const hideAudio = () => {
const a = getAudio();
a.hidden = true;
};
const playAudio = () => {
getAudio()?.play();
};
const pauseAudio = () => {
getAudio()?.pause();
};

0
src/scripts/now-playing.js
Unescape View File

98
src/styles.css
Unescape View File

@ -1,15 +1,29 @@
@import url("styles/global.css"); @import url("styles/fonts.css");
@import url("styles/system.css"); @import url("styles/variables.css");
@import url("styles/animations.css");
html {
font-size: 16pt;
}
html,
body {
margin: 0;
padding: 0;
}
body { body {
background-color: var(--color-primary-0); background-color: var(--color-colors-base);
color: var(--color-primary-1); color: var(--color-colors-additional-light);
height: 100vh; height: 100vh;
font-family: var(--typography-font-family), sans-serif;
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
line-height: 1.75; line-height: 1.75;
padding: 1rem; padding-left: 1rem;
display: grid;
align-content: center;
} }
h1, h1,
@ -17,8 +31,7 @@ h2,
h3, h3,
h4, h4,
h5 { h5 {
margin: 3rem 0 1.38rem; margin: 0;
font-family: "Lato", sans-serif;
font-weight: 400; font-weight: 400;
line-height: 1.3; line-height: 1.3;
} }
@ -29,7 +42,7 @@ h1 {
h1 { h1 {
margin-top: 0; margin-top: 0;
font-size: 5.063rem; font-size: var(--size-font-large);
} }
.play-stream { .play-stream {
@ -41,8 +54,13 @@ h1 {
} }
.now-playing { .now-playing {
font-family: "Lato Light Italic"; font-size: var(--size-font-medium);
font-size: 1.5rem; }
.now-playing_artist,
.now-playing_song {
font-weight: 300;
font-variation-settings: "slnt" -10;
} }
.icebergs { .icebergs {
@ -54,17 +72,63 @@ h1 {
max-height: 70vh; max-height: 70vh;
} }
#iceberg1, #iceberg1.active,
#iceberg2, #iceberg2.active {
#iceberg3 { animation-name: slide;
transition: transform 2s ease-in-out; animation-iteration-count: infinite;
transform: translate(0); animation-direction: alternate;
} }
#iceberg1.active { #iceberg1.active {
transform: translate(0, calc(100px * sin(var(--time)))); animation-duration: 3s;
} }
#iceberg2.active { #iceberg2.active {
transform: translate(0, calc(50px * cos(var(--time)))); animation-duration: 2s;
}
.logo {
display: flex;
align-items: baseline;
}
.logo_dot {
width: 0.25rem;
height: 0.25rem;
background: white;
border-radius: 100%;
margin: 0 0.25rem;
display: grid;
align-items: center;
justify-items: center;
transition: all 0.25s;
}
.logo_dot > .logo_dot_inner {
display: none;
}
.logo_dot.live {
width: 0.5rem;
height: 0.5rem;
background: var(--color-colors-warning);
box-sizing: border-box;
}
.logo_dot.live > .logo_dot_inner {
display: initial;
}
.logo_dot_inner {
width: 100%;
height: 100%;
border: 1px solid var(--color-colors-warning);
transform: scale(1);
border-radius: 100%;
display: flex;
box-sizing: border-box;
animation-name: grow;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 3s;
} }

19
src/styles/animations.css
Unescape View File

@ -0,0 +1,19 @@
@keyframes slide {
from {
transform: translate(0, 0);
}
to {
transform: translate(0, 25%);
}
}
@keyframes grow {
from {
border-color: var(--color-colors-warning);
transform: scale(0);
}
to {
border-color: transparent;
transform: scale(3);
}
}

4
src/styles/fonts.css
Unescape View File

@ -0,0 +1,4 @@
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.ttf") format("truetype");
}

9
src/styles/global.css
Unescape View File

@ -1,9 +0,0 @@
html {
font-size: 100%;
}
html,
body {
margin: 0;
padding: 0;
}

36
src/styles/system.css
Unescape View File

@ -1,36 +0,0 @@
/* Typography */
@font-face {
font-family: "Lato";
src: url("fonts/lato-regular-webfont.woff2") format("woff2"),
url("fonts/lato-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Lato Light Italic";
src: url("fonts/lato-lightitalic.woff2") format("woff2"),
url("fonts/lato-lightitalic.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* Colors */
:root {
--color-primary-0: #252525;
--color-primary-1: #ded8d8;
--color-primary-2: #7d7d7d;
--color-primary-3: #010101;
--color-primary-4: #0e0404;
--color-complement-0: #1e1e1e;
--color-complement-1: #adb2ad;
--color-complement-2: #646464;
--color-complement-3: #010101;
--color-complement-4: #030b03;
--time: 0;
--lol: calc(100px * sin(var(--time)));
}

14
src/styles/variables.css
Unescape View File

@ -0,0 +1,14 @@
:root {
--color-colors-base: #252525;
--color-colors-warning: #ff0000;
--color-colors-additional-dark: #bebebe;
--color-colors-additional-medium: #cbcaca;
--color-colors-additional-light: #d9d9d9;
--size-font-small: 0.75rem;
--size-font-medium: 1rem;
--size-font-large: 2rem;
--size-font-base: 1rem;
--typography-font-family: Inter;
}

8
src/websocket.js
Unescape View File

@ -0,0 +1,8 @@
import { processMessage } from "./messagesProcessor.js";
const socketProtocol = location.protocol === "http:" ? "ws:" : "wss:";
export async function connectToServer() {
const ws = new WebSocket(`${socketProtocol}//${location.host}/meta`);
ws.addEventListener("message", processMessage);
}