2020-06-17 03:55:00 +02:00
|
|
|
async function setupApp() {
|
2020-06-03 02:35:49 +02:00
|
|
|
Vue.filter('plural', function (string, count) {
|
|
|
|
if (count === 1) {
|
2020-06-14 05:15:31 +02:00
|
|
|
return string;
|
2020-06-03 02:35:49 +02:00
|
|
|
} else {
|
2020-06-14 05:15:31 +02:00
|
|
|
return string + "s";
|
2020-06-03 02:35:49 +02:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2020-06-02 22:56:59 +02:00
|
|
|
window.app = new Vue({
|
2020-06-17 03:36:11 +02:00
|
|
|
el: "#app-container",
|
2020-06-02 22:56:59 +02:00
|
|
|
data: {
|
|
|
|
streamStatus: "",
|
2020-06-03 02:35:49 +02:00
|
|
|
viewerCount: 0,
|
2020-06-14 10:10:26 +02:00
|
|
|
sessionMaxViewerCount: 0,
|
|
|
|
overallMaxViewerCount: 0,
|
2020-06-17 03:36:11 +02:00
|
|
|
messages: [],
|
2020-06-17 03:55:00 +02:00
|
|
|
description: "",
|
|
|
|
title: "",
|
2020-06-02 22:56:59 +02:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2020-06-15 06:14:42 +02:00
|
|
|
// init messaging interactions
|
2020-06-14 05:15:31 +02:00
|
|
|
var appMessagingMisc = new Messaging();
|
|
|
|
appMessagingMisc.init();
|
2020-06-15 00:18:43 +02:00
|
|
|
|
2020-06-17 03:55:00 +02:00
|
|
|
const config = await new Config().init();
|
|
|
|
app.description = autoLink(config.description, { embed: false });
|
|
|
|
app.title = config.title;
|
2020-06-02 22:56:59 +02:00
|
|
|
}
|
|
|
|
|
2020-06-14 05:15:31 +02:00
|
|
|
var websocketReconnectTimer;
|
2020-06-02 22:56:59 +02:00
|
|
|
function setupWebsocket() {
|
2020-06-09 19:51:12 +02:00
|
|
|
clearTimeout(websocketReconnectTimer)
|
|
|
|
|
2020-06-15 01:44:38 +02:00
|
|
|
// Uncomment to point to somewhere other than goth.land
|
2020-06-17 03:36:11 +02:00
|
|
|
const protocol = location.protocol == "https:" ? "wss" : "ws"
|
|
|
|
var ws = new WebSocket(protocol + "://" + location.host + "/entry")
|
2020-06-15 01:44:38 +02:00
|
|
|
|
2020-06-17 03:36:11 +02:00
|
|
|
// var ws = new WebSocket("wss://goth.land/entry")
|
2020-06-15 01:44:38 +02:00
|
|
|
|
2020-06-02 22:56:59 +02:00
|
|
|
ws.onmessage = (e) => {
|
2020-06-09 19:51:12 +02:00
|
|
|
const model = JSON.parse(e.data)
|
2020-06-15 01:44:38 +02:00
|
|
|
|
|
|
|
// Ignore non-chat messages (such as keepalive PINGs)
|
|
|
|
if (model.type !== SocketMessageTypes.CHAT) { return; }
|
|
|
|
|
2020-06-09 19:51:12 +02:00
|
|
|
const message = new Message(model)
|
2020-06-17 03:36:11 +02:00
|
|
|
|
|
|
|
const existing = this.app.messages.filter(function (item) {
|
2020-06-03 02:59:40 +02:00
|
|
|
return item.id === message.id
|
|
|
|
})
|
|
|
|
|
|
|
|
if (existing.length === 0 || !existing) {
|
2020-06-17 03:36:11 +02:00
|
|
|
this.app.messages.push(message);
|
2020-06-14 10:10:26 +02:00
|
|
|
setTimeout(() => { jumpToBottom("#messages-container"); } , 50); // could be better. is there a sort of Vue "componentDidUpdate" we can do this on?
|
2020-06-03 02:59:40 +02:00
|
|
|
}
|
2020-06-02 22:56:59 +02:00
|
|
|
}
|
2020-06-03 02:35:49 +02:00
|
|
|
|
|
|
|
ws.onclose = (e) => {
|
|
|
|
// connection closed, discard old websocket and create a new one in 5s
|
|
|
|
ws = null
|
2020-06-09 19:51:12 +02:00
|
|
|
console.log("Websocket closed.")
|
|
|
|
websocketReconnectTimer = setTimeout(setupWebsocket, 5000)
|
2020-06-03 02:35:49 +02:00
|
|
|
}
|
|
|
|
|
2020-06-09 19:51:12 +02:00
|
|
|
// On ws error just close the socket and let it re-connect again for now.
|
2020-06-03 02:35:49 +02:00
|
|
|
ws.onerror = (e) => {
|
2020-06-09 19:51:12 +02:00
|
|
|
console.log("Websocket error: ", e)
|
|
|
|
ws.close()
|
2020-06-03 02:35:49 +02:00
|
|
|
}
|
|
|
|
|
2020-06-16 02:40:12 +02:00
|
|
|
window.ws = ws;
|
2020-06-02 22:56:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
setupApp()
|
2020-06-17 06:05:54 +02:00
|
|
|
|
2020-06-09 23:15:00 +02:00
|
|
|
setupWebsocket()
|
2020-06-02 22:56:59 +02:00
|
|
|
|