dragonchaser/weirdradio
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Activity

add reconnect & format index

Browse Source 
Signed-off-by: Christian Richter <crichter@owncloud.com>
This commit is contained in:
Christian Richter
2022-07-17 11:16:21 +02:00
parent 983570594d
commit b01cf0ce89
1 changed files with 122 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/index.html
View File

@@ -1,7 +1,11 @@
<html> <html>
<head> <head>
<script type='text/javascript' src='http://www.youtube.com/player_api'></script> <script
<title>Weirdradio</title></head> type="text/javascript"
src="http://www.youtube.com/player_api"
></script>
<title>Weirdradio</title>
</head>
<style> <style>
div.body { div.body {
width: 1024px; width: 1024px;
@@ -35,9 +39,7 @@
<div class="title"> <div class="title">
<h1>Weirdradio</h1> <h1>Weirdradio</h1>
</div> </div>
<div id="playlist" class="playlist"> <div id="playlist" class="playlist">{playlist}</div>
{playlist}
</div>
</div> </div>
<div class="rightcolumn"> <div class="rightcolumn">
<div class="playerframe"> <div class="playerframe">
@@ -47,28 +49,28 @@
</div> </div>
</body> </body>
<script> <script>
var playlist = [] var playlist = [];
var tag = document.createElement('script'); var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api"; tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0]; var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player) // 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads. // after the API code downloads.
var player; var player;
function onYouTubeIframeAPIReady() { function onYouTubeIframeAPIReady() {
player = new YT.Player('player', { player = new YT.Player("player", {
height: '390', height: "390",
width: '640', width: "640",
videoId: 'Wch3gJG2GJ4', videoId: "Wch3gJG2GJ4",
playerVars: { playerVars: {
'playsinline': 1 playsinline: 1,
}, },
events: { events: {
'onReady': onPlayerReady, onReady: onPlayerReady,
'onStateChange': onPlayerStateChange onStateChange: onPlayerStateChange,
} },
}); });
} }
@@ -79,7 +81,7 @@
var done = false; var done = false;
function onPlayerStateChange(event) { function onPlayerStateChange(event) {
if (event.data == 0) { if (event.data == 0) {
console.log("playing stopped") console.log("playing stopped");
} }
//if (event.data == YT.PlayerState.PLAYING && !done) { //if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000); // setTimeout(stopVideo, 6000);
@@ -91,32 +93,36 @@
} }
function connectSocket() { function connectSocket() {
baseUrl = (window.location.host).replace("8080", "8090") baseUrl = window.location.host.replace("8080", "8090");
let socket = new WebSocket("ws://" + baseUrl); let socket = new WebSocket("ws://" + baseUrl);
socket.onopen = function (e) { socket.onopen = function (e) {
console.log("[open] Connection established"); console.log("[open] Connection established");
}; };
// TODO: on close and on error attempt reconnect
socket.onmessage = function (event) { socket.onmessage = function (event) {
data = JSON.parse(event.data) data = JSON.parse(event.data);
if (data["videoId"] != undefined && data["videoId"] != null) { if (data["videoId"] != undefined && data["videoId"] != null) {
playlist.push(data) playlist.push(data);
updatePlaylist() updatePlaylist();
player.loadVideoById(data["videoId"]) player.loadVideoById(data["videoId"]);
player.playVideo() player.playVideo();
console.log(`[message] Data received from server: ${event.data}`); console.log(`[message] Data received from server: ${event.data}`);
} else { } else {
console.log(`[unparseable message] Data received from server ${event.data}`) console.log(
`[unparseable message] Data received from server ${event.data}`
);
} }
}; };
} }
function updatePlaylist() { function updatePlaylist() {
pl = document.getElementById("playlist") pl = document.getElementById("playlist");
output = "" output = "";
playlist.forEach((e) => { playlist.forEach((e) => {
output = output + `<div><div>${e.title}</div><div>${e.link}</div></div>` output =
}) output + `<div><div>${e.title}</div><div>${e.link}</div></div>`;
pl.innerHTML = output });
pl.innerHTML = output;
} }
</script> </script>
</html> </html>