mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-28 19:19:06 +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="chat-container" class="bg-gray-800">
<div id="messages-container"> <div id="messages-container">
<div v-for="(message, index) in messages"> <div v-for="message in messages">
<div class="message flex"> <div class="message flex">
<img <img
v-bind:src="message.image" 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"> <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<form id="message-form" class="flex"> <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 <textarea
id="message-body-form" id="message-body-form"
placeholder="Message" 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" 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> ></textarea>

21
webroot/js/app.js
View file

@ -8,23 +8,16 @@ function setupApp() {
}) })
window.app = new Vue({ window.app = new Vue({
el: "#stream-info", el: "#app-container",
data: { data: {
streamStatus: "", streamStatus: "",
viewerCount: 0, viewerCount: 0,
sessionMaxViewerCount: 0, sessionMaxViewerCount: 0,
overallMaxViewerCount: 0, overallMaxViewerCount: 0,
messages: [],
}, },
}); });
window.messagesContainer = new Vue({
el: "#messages-container",
data: {
messages: []
}
})
// style hackings // style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true; window.VIDEOJS_NO_DYNAMIC_STYLE = true;
@ -76,10 +69,10 @@ function setupWebsocket() {
clearTimeout(websocketReconnectTimer) clearTimeout(websocketReconnectTimer)
// Uncomment to point to somewhere other than goth.land // Uncomment to point to somewhere other than goth.land
// const protocol = location.protocol == "https:" ? "wss" : "ws" const protocol = location.protocol == "https:" ? "wss" : "ws"
// var ws = new WebSocket(protocol + "://" + location.host + "/entry") 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) => { ws.onmessage = (e) => {
const model = JSON.parse(e.data) const model = JSON.parse(e.data)
@ -89,12 +82,12 @@ function setupWebsocket() {
const message = new Message(model) 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 return item.id === message.id
}) })
if (existing.length === 0 || !existing) { 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? setTimeout(() => { jumpToBottom("#messages-container"); } , 50); // could be better. is there a sort of Vue "componentDidUpdate" we can do this on?
} }
} }