LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

more clean up and fixins

Browse Source
This commit is contained in:
Ginger Wong 2020-06-14 01:10:26 -07:00
parent 3ef20c5516
commit 50a59ef3c0
5 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webroot/index.html
View File

@ -1,5 +1,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live stream test</title> <title>Live stream test</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />

31
webroot/js/app.js
View File

@ -12,6 +12,8 @@ function setupApp() {
data: { data: {
streamStatus: "", streamStatus: "",
viewerCount: 0, viewerCount: 0,
sessionMaxViewerCount: 0,
overallMaxViewerCount: 0,
}, },
}); });
@ -22,27 +24,6 @@ function setupApp() {
} }
}) })
// window.chatForm = new Vue({
// el: "#chatForm",
// data: {
// message: {
// author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
// body: ""
// }
// },
// methods: {
// submitChatForm: function (e) {
// const message = new Message(this.message);
// message.id = uuidv4();
// localStorage.author = message.author;
// const messageJSON = JSON.stringify(message);
// window.ws.send(messageJSON);
// e.preventDefault();
// this.message.body = "";
// }
// }
// });
window.VIDEOJS_NO_DYNAMIC_STYLE = true; window.VIDEOJS_NO_DYNAMIC_STYLE = true;
var appMessagingMisc = new Messaging(); var appMessagingMisc = new Messaging();
@ -59,9 +40,9 @@ async function getStatus() {
? "Stream is online." ? "Stream is online."
: "Stream is offline." : "Stream is offline."
app.viewerCount = status.viewerCount app.viewerCount = status.viewerCount;
app.sessionMaxViewerCount = status.sessionMaxViewerCount app.sessionMaxViewerCount = status.sessionMaxViewerCount;
app.overallMaxViewerCount = status.overallMaxViewerCount app.overallMaxViewerCount = status.overallMaxViewerCount;
} catch (e) { } catch (e) {
app.streamStatus = "Stream server is offline." app.streamStatus = "Stream server is offline."
@ -87,7 +68,7 @@ function setupWebsocket() {
if (existing.length === 0 || !existing) { if (existing.length === 0 || !existing) {
this.messagesContainer.messages.push(message); this.messagesContainer.messages.push(message);
setTimeout(() => { jumpToBottom("#messages-container"); } , 10); // 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?
} }
} }

28
webroot/js/message.js
View File

@ -1,9 +1,9 @@
class Message { class Message {
constructor(model) { constructor(model) {
this.author = model.author this.author = model.author;
this.body = model.body this.body = model.body;
this.image = "https://robohash.org/" + model.author this.image = model.image || "https://robohash.org/" + model.author;
this.id = model.id this.id = model.id;
} }
addNewlines(str) { addNewlines(str) {
@ -40,9 +40,11 @@ class Messaging {
this.keyUsername = "owncast_username"; this.keyUsername = "owncast_username";
this.keyChatDisplayed = "owncast_chat"; this.keyChatDisplayed = "owncast_chat";
this.tagAppContainer = document.querySelector("#app-container");
this.tagChatToggle = document.querySelector("#chat-toggle"); this.tagChatToggle = document.querySelector("#chat-toggle");
this.tagUserInfoDisplay = document.querySelector("#user-info-display"); this.textUserInfoDisplay = document.querySelector("#user-info-display");
this.tagUserInfoChanger = document.querySelector("#user-info-change"); this.tagUserInfoChanger = document.querySelector("#user-info-change");
this.tagUsernameDisplay = document.querySelector("#username-display"); this.tagUsernameDisplay = document.querySelector("#username-display");
@ -52,7 +54,6 @@ class Messaging {
this.tagMessageFormWarning = document.querySelector("#message-form-warning"); this.tagMessageFormWarning = document.querySelector("#message-form-warning");
this.tagAppContainer = document.querySelector("#app-container");
this.inputChangeUserName = document.querySelector("#username-change-input"); this.inputChangeUserName = document.querySelector("#username-change-input");
this.btnUpdateUserName = document.querySelector("#button-update-username"); this.btnUpdateUserName = document.querySelector("#button-update-username");
@ -63,7 +64,7 @@ class Messaging {
} }
init() { init() {
this.tagChatToggle.addEventListener("click", this.handleChatToggle); this.tagChatToggle.addEventListener("click", this.handleChatToggle);
this.tagUsernameDisplay.addEventListener("click", this.handleShowChangeNameForm); this.textUserInfoDisplay.addEventListener("click", this.handleShowChangeNameForm);
this.btnUpdateUserName.addEventListener("click", this.handleUpdateUsername); this.btnUpdateUserName.addEventListener("click", this.handleUpdateUsername);
this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm); this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm);
@ -72,7 +73,7 @@ class Messaging {
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown); this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown);
this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton); this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton);
this.initLocalStates(); this.initLocalStates();
} }
initLocalStates() { initLocalStates() {
@ -94,16 +95,19 @@ class Messaging {
handleChatToggle = () => { handleChatToggle = () => {
this.chatDisplayed = !this.chatDisplayed; this.chatDisplayed = !this.chatDisplayed;
if (this.chatDisplayed) {
setLocalStorage(this.keyChatDisplayed, this.chatDisplayed); setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
} else {
clearLocalStorage(this.keyChatDisplayed);
}
this.displayChat(); this.displayChat();
} }
handleShowChangeNameForm = () => { handleShowChangeNameForm = () => {
this.tagUserInfoDisplay.style.display = "none"; this.textUserInfoDisplay.style.display = "none";
this.tagUserInfoChanger.style.display = "flex"; this.tagUserInfoChanger.style.display = "flex";
} }
handleHideChangeNameForm = () => { handleHideChangeNameForm = () => {
this.tagUserInfoDisplay.style.display = "flex"; this.textUserInfoDisplay.style.display = "flex";
this.tagUserInfoChanger.style.display = "none"; this.tagUserInfoChanger.style.display = "none";
} }
handleUpdateUsername = () => { handleUpdateUsername = () => {

13
webroot/js/utils.js
View File

@ -8,17 +8,24 @@ function getLocalStorage(key) {
function setLocalStorage(key, value) { function setLocalStorage(key, value) {
try { try {
localStorage.setItem(key, value); if (value !== "" && value !== null) {
localStorage.setItem(key, value);
} else {
localStorage.removeItem(key);
}
return true; return true;
} catch (e) {} } catch (e) {}
return false; return false;
} }
function clearLocalStorage(key) {
localStorage.removeItem(key);
}
function jumpToBottom(id) { function jumpToBottom(id) {
const div = document.querySelector(id); const div = document.querySelector(id);
console.log(div.scrollTop, div.scrollHeight , div.clientHeight)
div.scrollTo({ div.scrollTo({
top: div.scrollHeight - div.clientHeight, top: div.scrollHeight,// - div.clientHeight,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'
}); });

19
webroot/styles/layout.css
View File

@ -36,6 +36,7 @@ header {
z-index: 10; z-index: 10;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap;
} }
header h1 { header h1 {
@ -46,6 +47,7 @@ header h1 {
color: #ddd; color: #ddd;
padding: .5em; padding: .5em;
white-space: nowrap; white-space: nowrap;
width: 20em;
} }
#chat-toggle { #chat-toggle {
@ -53,7 +55,7 @@ header h1 {
background-color: #555; background-color: #555;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 3em; min-width: 3em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -67,6 +69,7 @@ header h1 {
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
flex-wrap: nowrap;
} }
#user-info-display { #user-info-display {
@ -76,6 +79,8 @@ header h1 {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
padding: .5em 1em; padding: .5em 1em;
overflow: hidden;
width: 100%;
} }
#username-avatar { #username-avatar {
@ -87,8 +92,10 @@ header h1 {
#username-display { #username-display {
font-weight: bold; font-weight: bold;
font-size: .75em; font-size: .75em;
color: #516FEB color: #516FEB;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
#user-info-display:hover { #user-info-display:hover {
transition: opacity .2s; transition: opacity .2s;
@ -287,8 +294,10 @@ header h1 {
overflow: hidden; overflow: hidden;
} }
#user-info {
#info { width: 12em;
}
#stream-info {
display: none; display: none;
overflow: auto; overflow: auto;
height: auto; height: auto;