mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make the entire web page wrapped in a vue object

Browse source
This commit is contained in:
Gabe Kangas 2020-06-16 18:36:11 -07:00
parent c8fa2add17
commit ca4932e2b4
2 changed files with 10 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
webroot/index.html
View file

@ -136,7 +136,7 @@ possible hacks
<div id="chat-container" class="bg-gray-800">
<div id="messages-container">
<div v-for="(message, index) in messages">
<div v-for="message in messages">
<div class="message flex">
<img
v-bind:src="message.image"
@ -155,12 +155,11 @@ possible hacks
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<form id="message-form" class="flex">
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
<input type="hidden" name="inputAuthor" id="self-message-author" />
<textarea
id="message-body-form"
placeholder="Message"
v-model="message.body"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
></textarea>

23
webroot/js/app.js
View file

@ -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?
}
}