Merge branch 'web-layout' into web-layout-gw

This commit is contained in:
Ginger Wong 2020-06-09 14:13:35 -07:00
commit 5c46191cbf

View file

@ -45,13 +45,12 @@ function setupApp() {
});
}
async function getStatus() {
let url = "https://util.real-ity.com:8042/status";
try {
let response = await fetch(url);
let status = await response.json(); // read response body and parse as JSON
const response = await fetch(url);
const status = await response.json(); // read response body and parse as JSON
app.streamStatus = status.online
? "Stream is online."
: "Stream is offline."
@ -65,13 +64,16 @@ async function getStatus() {
}
var websocketReconnectTimer
function setupWebsocket() {
clearTimeout(websocketReconnectTimer)
const protocol = location.protocol == "https:" ? "wss" : "ws"
var ws = new WebSocket("wss://util.real-ity.com:8042/entry")
ws.onmessage = (e) => {
var model = JSON.parse(e.data)
var message = new Message(model)
const model = JSON.parse(e.data)
const message = new Message(model)
const existing = this.messagesContainer.messages.filter(function (item) {
return item.id === message.id
@ -86,11 +88,14 @@ function setupWebsocket() {
ws.onclose = (e) => {
// connection closed, discard old websocket and create a new one in 5s
ws = null
setTimeout(setupWebsocket, 5000)
console.log("Websocket closed.")
websocketReconnectTimer = setTimeout(setupWebsocket, 5000)
}
// On ws error just close the socket and let it re-connect again for now.
ws.onerror = (e) => {
setTimeout(setupWebsocket, 5000)
console.log("Websocket error: ", e)
ws.close()
}
window.ws = ws
@ -101,42 +106,39 @@ getStatus()
// setupWebsocket()
// setInterval(getStatus, 5000)
// HLS Video setup
function setupVideo() {
var video = document.getElementById("video")
var videoSrc = "hls/stream.m3u8"
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(videoSrc)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play()
});
}
// hls.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using hls.js.
//
// Note: it would be more normal to wait on the 'canplay' event below however
// on Safari (where you are most likely to find built-in HLS support) the
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = videoSrc
video.addEventListener("loadedmetadata", function () {
video.play()
});
}
}
// HLS Video setup. Commented out for local html work. Uncomment to make HLS work.
// const video = document.getElementById("video")
// const videoSrc = "hls/stream.m3u8"
// if (Hls.isSupported()) {
// var hls = new Hls()
// hls.loadSource(videoSrc)
// hls.attachMedia(video)
// hls.on(Hls.Events.MANIFEST_PARSED, function () {
// video.play()
// });
// }
// // hls.js is not supported on platforms that do not have Media Source
// // Extensions (MSE) enabled.
// //
// // When the browser has built-in HLS support (check using `canPlayType`),
// // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// // element through the `src` property. This is using the built-in support
// // of the plain video element, without using hls.js.
// //
// // Note: it would be more normal to wait on the 'canplay' event below however
// // on Safari (where you are most likely to find built-in HLS support) the
// // video.src URL must be on the user-driven white-list before a 'canplay'
// // event will be emitted; the last video event that can be reliably
// // listened-for when the URL is not on the white-list is 'loadedmetadata'.
// else if (video.canPlayType("application/vnd.apple.mpegurl")) {
// video.src = videoSrc
// video.addEventListener("loadedmetadata", function () {
// video.play()
// });
// }
function scrollSmoothToBottom(id) {
var div = document.getElementById(id)
const div = document.getElementById(id)
$('#' + id).animate({
scrollTop: div.scrollHeight - div.clientHeight
}, 500)
@ -144,7 +146,7 @@ function scrollSmoothToBottom(id) {
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}