165 lines
4.5 KiB
HTML
165 lines
4.5 KiB
HTML
<html>
|
|
<head>
|
|
<script
|
|
type="text/javascript"
|
|
src="http://www.youtube.com/player_api"
|
|
></script>
|
|
<title>Weirdradio</title>
|
|
</head>
|
|
<style>
|
|
div.body {
|
|
width: 1024px;
|
|
height: 768px;
|
|
border: solid 1px;
|
|
padding: 1pc;
|
|
}
|
|
div.leftcolumn {
|
|
width: 30%;
|
|
float: left;
|
|
}
|
|
div.title {
|
|
height: 20%;
|
|
}
|
|
div.playlist {
|
|
height: 80%;
|
|
}
|
|
div.rightcolumn {
|
|
width: 60%;
|
|
float: left;
|
|
}
|
|
#playerframe {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: purple;
|
|
}
|
|
</style>
|
|
<body onload="connectSocket()">
|
|
<div class="body">
|
|
<div class="leftcolumn">
|
|
<div class="title">
|
|
<h1>Weirdradio</h1>
|
|
</div>
|
|
<div id="playlist" class="playlist">{playlist}</div>
|
|
</div>
|
|
<div class="rightcolumn">
|
|
<div class="playerframe">
|
|
<div id="player"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var playlist = [];
|
|
var socketConnector = null;
|
|
var socketSemaphore = false;
|
|
var tag = document.createElement("script");
|
|
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
var firstScriptTag = document.getElementsByTagName("script")[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
// 3. This function creates an <iframe> (and YouTube player)
|
|
// after the API code downloads.
|
|
var player;
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player("player", {
|
|
height: "390",
|
|
width: "640",
|
|
videoId: "Wch3gJG2GJ4",
|
|
playerVars: {
|
|
playsinline: 1,
|
|
},
|
|
events: {
|
|
onReady: onPlayerReady,
|
|
onStateChange: onPlayerStateChange,
|
|
},
|
|
});
|
|
}
|
|
|
|
function onPlayerReady(event) {
|
|
event.target.playVideo();
|
|
}
|
|
|
|
var done = false;
|
|
function onPlayerStateChange(event) {
|
|
if (event.data == 0) {
|
|
console.log("playing stopped");
|
|
}
|
|
//if (event.data == YT.PlayerState.PLAYING && !done) {
|
|
// setTimeout(stopVideo, 6000);
|
|
// done = true;
|
|
//}
|
|
}
|
|
function stopVideo() {
|
|
player.stopVideo();
|
|
}
|
|
|
|
function connectSocket() {
|
|
if (socketSemaphore) {
|
|
console.log("Another connection attempt already in progress, canceling!");
|
|
return;
|
|
}
|
|
console.log("Connecting to socket");
|
|
socketSemaphore = true;
|
|
baseUrl = window.location.host.replace("8080", "8090");
|
|
let socket = new WebSocket("ws://" + baseUrl);
|
|
socket.onopen = function (e) {
|
|
clearInterval(socketConnector);
|
|
socketConnector = null;
|
|
socketSemaphore = false;
|
|
console.log("[open] Connection established");
|
|
};
|
|
// TODO: on close and on error attempt reconnect
|
|
socket.onclose = function (event) {
|
|
if (event.wasClean) {
|
|
console.log(
|
|
`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`
|
|
);
|
|
} else {
|
|
// e.g. server process killed or network down
|
|
// event.code is usually 1006 in this case
|
|
// TODO: add some nice ui thingi to show reconnect
|
|
// TODO: also add some timeout function to repeat this until connect is successful, let it interact with 'onopen'
|
|
console.log("[close] Connection died, attempting reconnect");
|
|
if (!socketConnector) {
|
|
socketConnector = setInterval(connectSocket, 5000);
|
|
socketSemaphore = false;
|
|
}
|
|
}
|
|
};
|
|
socket.onmessage = function (event) {
|
|
data = JSON.parse(event.data);
|
|
if (data["videoId"] != undefined && data["videoId"] != null) {
|
|
playlist.push(data);
|
|
updatePlaylist();
|
|
player.loadVideoById(data["videoId"]);
|
|
player.playVideo();
|
|
console.log(`[message] Data received from server: ${event.data}`);
|
|
} else {
|
|
console.log(
|
|
`[unparseable message] Data received from server ${event.data}`
|
|
);
|
|
}
|
|
};
|
|
socketSemaphore = false;
|
|
}
|
|
|
|
function updatePlaylist() {
|
|
pl = document.getElementById("playlist");
|
|
output = "";
|
|
playlist.forEach((e) => {
|
|
output =
|
|
output + `<div><div>${e.title}</div><div>${e.link}</div></div>`;
|
|
});
|
|
pl.innerHTML = output;
|
|
}
|
|
|
|
//function myDebugger() {
|
|
// console.log(socketSemaphore);
|
|
// console.log(socketConnector);
|
|
// console.log("=================");
|
|
//}
|
|
//myDebugger = setInterval(myDebugger, 2000);
|
|
</script>
|
|
</html>
|