diff --git a/webroot/index.html b/webroot/index.html index ef2225023..177ede131 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -136,7 +136,7 @@ possible hacks
-
+
- + diff --git a/webroot/js/app.js b/webroot/js/app.js index fd88c4388..6751e7c31 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -8,23 +8,16 @@ function setupApp() { }) window.app = new Vue({ - el: "#stream-info", + el: "#app-container", data: { streamStatus: "", viewerCount: 0, sessionMaxViewerCount: 0, overallMaxViewerCount: 0, + messages: [], }, }); - window.messagesContainer = new Vue({ - el: "#messages-container", - data: { - messages: [] - } - }) - - // style hackings window.VIDEOJS_NO_DYNAMIC_STYLE = true; @@ -76,10 +69,10 @@ function setupWebsocket() { clearTimeout(websocketReconnectTimer) // Uncomment to point to somewhere other than goth.land - // const protocol = location.protocol == "https:" ? "wss" : "ws" - // var ws = new WebSocket(protocol + "://" + location.host + "/entry") + const protocol = location.protocol == "https:" ? "wss" : "ws" + var ws = new WebSocket(protocol + "://" + location.host + "/entry") - var ws = new WebSocket("wss://goth.land/entry") + // var ws = new WebSocket("wss://goth.land/entry") ws.onmessage = (e) => { const model = JSON.parse(e.data) @@ -88,13 +81,13 @@ function setupWebsocket() { if (model.type !== SocketMessageTypes.CHAT) { return; } const message = new Message(model) - - const existing = this.messagesContainer.messages.filter(function (item) { + + const existing = this.app.messages.filter(function (item) { return item.id === message.id }) if (existing.length === 0 || !existing) { - this.messagesContainer.messages.push(message); + this.app.messages.push(message); setTimeout(() => { jumpToBottom("#messages-container"); } , 50); // could be better. is there a sort of Vue "componentDidUpdate" we can do this on? } }