61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
|
import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js"
|
||
|
|
import Visualizer from "./viz.js"
|
||
|
|
|
||
|
|
export function init() {
|
||
|
|
function updateMeta(data) {
|
||
|
|
var title = data.title;
|
||
|
|
var listeners = data.listeners;
|
||
|
|
$('#title').text(title);
|
||
|
|
$('#listeners').text(listeners + " listeners");
|
||
|
|
}
|
||
|
|
|
||
|
|
function visToggle() {
|
||
|
|
if (!document.hidden) {
|
||
|
|
visualizer.start();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.addEventListener('visibilitychange', visToggle);
|
||
|
|
|
||
|
|
var visualizer = null;
|
||
|
|
var audioPlayer = document.getElementById("audio-player");
|
||
|
|
var loaderWidget = document.getElementById("loader");
|
||
|
|
|
||
|
|
$('#the-button').click(() => {
|
||
|
|
if (visualizer == null) {
|
||
|
|
|
||
|
|
audioPlayer.play();
|
||
|
|
|
||
|
|
$(loaderWidget).addClass("show");
|
||
|
|
$('#the-button').remove();
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
visualizer = new Visualizer(audioPlayer);
|
||
|
|
setTimeout(() => {
|
||
|
|
visualizer.start();
|
||
|
|
}, 0);
|
||
|
|
}, 0);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var socket = io();
|
||
|
|
socket.on('connect', () => {
|
||
|
|
socket.emit('live.hello', {});
|
||
|
|
});
|
||
|
|
socket.on('live.heartbeat', (heartbeat) => {
|
||
|
|
console.log('heartbeat')
|
||
|
|
console.log(heartbeat)
|
||
|
|
updateMeta(heartbeat)
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("resize", _.debounce(() => {
|
||
|
|
visualizer.resize();
|
||
|
|
}, 100));
|
||
|
|
|
||
|
|
audioPlayer.addEventListener("waiting", (evt) => {
|
||
|
|
$(loaderWidget).addClass("show");
|
||
|
|
});
|
||
|
|
audioPlayer.addEventListener("playing", (evt) => {
|
||
|
|
$(loaderWidget).removeClass("show");
|
||
|
|
});
|
||
|
|
}
|