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

238
assets/index.html
View File

@@ -1,122 +1,128 @@
<html> <html>
<head> <head>
<script type='text/javascript' src='http://www.youtube.com/player_api'></script> <script
<title>Weirdradio</title></head> type="text/javascript"
<style> src="http://www.youtube.com/player_api"
div.body { ></script>
width: 1024px; <title>Weirdradio</title>
height: 768px; </head>
border: solid 1px; <style>
padding: 1pc; div.body {
} width: 1024px;
div.leftcolumn { height: 768px;
width: 30%; border: solid 1px;
float: left; padding: 1pc;
} }
div.title { div.leftcolumn {
height: 20%; width: 30%;
} float: left;
div.playlist { }
height: 80%; div.title {
} height: 20%;
div.rightcolumn { }
width: 60%; div.playlist {
float: left; height: 80%;
} }
#playerframe { div.rightcolumn {
height: 100%; width: 60%;
width: 100%; float: left;
background-color: purple; }
} #playerframe {
</style> height: 100%;
<body onload="connectSocket()"> width: 100%;
<div class="body"> background-color: purple;
<div class="leftcolumn"> }
<div class="title"> </style>
<h1>Weirdradio</h1> <body onload="connectSocket()">
</div> <div class="body">
<div id="playlist" class="playlist"> <div class="leftcolumn">
{playlist} <div class="title">
</div> <h1>Weirdradio</h1>
</div> </div>
<div class="rightcolumn"> <div id="playlist" class="playlist">{playlist}</div>
<div class="playerframe"> </div>
<div id="player"></div> <div class="rightcolumn">
</div> <div class="playerframe">
<div id="player"></div>
</div> </div>
</div> </div>
</body> </div>
<script> </body>
var playlist = [] <script>
var tag = document.createElement('script'); var playlist = [];
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; tag.src = "https://www.youtube.com/iframe_api";
function onPlayerStateChange(event) { var firstScriptTag = document.getElementsByTagName("script")[0];
if (event.data == 0) { firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log("playing stopped")
}
//if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
// done = true;
//}
}
function stopVideo() {
player.stopVideo();
}
function connectSocket() {
baseUrl = (window.location.host).replace("8080", "8090")
let socket = new WebSocket("ws://"+baseUrl);
socket.onopen = function(e) {
console.log("[open] Connection established");
};
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}`)
}
};
}
function updatePlaylist() { // 3. This function creates an <iframe> (and YouTube player)
pl = document.getElementById("playlist") // after the API code downloads.
output = "" var player;
playlist.forEach((e) => { function onYouTubeIframeAPIReady() {
output = output + `<div><div>${e.title}</div><div>${e.link}</div></div>` player = new YT.Player("player", {
}) height: "390",
pl.innerHTML = output 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() {
baseUrl = window.location.host.replace("8080", "8090");
let socket = new WebSocket("ws://" + baseUrl);
socket.onopen = function (e) {
console.log("[open] Connection established");
};
// TODO: on close and on error attempt reconnect
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}`
);
} }
</script> };
</html> }
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;
}
</script>
</html>