parent
4868d41046
commit
cb90344b5f
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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 };
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
@ -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
|
||||
};
|
||||
@ -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,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);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("/fonts/Inter.ttf") format("truetype");
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -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)));
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
Reference in new issue