diff --git a/webroot/index.html b/webroot/index.html
index 77b432c5c..245865e72 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -2,25 +2,20 @@
Live stream test
-
-
+
-
-
-
+
+
+
+
+
@@ -34,7 +29,7 @@
-
Random Username 123
+
@@ -134,6 +129,7 @@
+
diff --git a/webroot/js/app.js b/webroot/js/app.js
index 64f9f20f3..e9864a693 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -22,28 +22,29 @@ 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();
+ // 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 = "";
- }
- }
- });
+ // this.message.body = "";
+ // }
+ // }
+ // });
+ window.VIDEOJS_NO_DYNAMIC_STYLE = true;
var appMessagingMisc = new Messaging();
appMessagingMisc.init();
}
@@ -109,16 +110,3 @@ getStatus()
setupWebsocket()
// setInterval(getStatus, 5000)
-function scrollSmoothToBottom(id) {
- const div = document.getElementById(id);
- $('#' + id).animate({
- scrollTop: div.scrollHeight - div.clientHeight
- }, 500)
-}
-
-function uuidv4() {
- return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
- const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
- return v.toString(16);
- });
-}
diff --git a/webroot/js/message.js b/webroot/js/message.js
index 5fc9d704c..61014de8d 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -38,6 +38,8 @@ class Messaging {
this.maxMessageLength = 500;
this.maxMessageBuffer = 20;
+ this.keyUsername = "owncast_username";
+ this.keyChatDisplayed = "owncast_chat";
this.tagChatToggle = document.querySelector("#chat-toggle");
@@ -47,7 +49,7 @@ class Messaging {
this.tagUsernameDisplay = document.querySelector("#username-display");
this.imgUsernameAvatar = document.querySelector("#username-avatar");
- this.tagMessageAuthor = document.querySelector("#self-message-author");
+ this.inputMessageAuthor = document.querySelector("#self-message-author");
this.tagMessageFormWarning = document.querySelector("#message-form-warning");
@@ -58,7 +60,6 @@ class Messaging {
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
this.formMessageInput = document.querySelector("#inputBody");
-
}
init() {
this.tagChatToggle.addEventListener("click", this.handleChatToggle);
@@ -69,16 +70,55 @@ class Messaging {
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown);
+ this.initLocalStates();
+
+ var vueMessageForm = new Vue({
+ el: "#message-form",
+ 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 = "";
+ }
+ }
+ });
+
+
+ }
+
+ initLocalStates() {
+ this.username = getLocalStorage(this.keyUsername) || "User" + (Math.floor(Math.random() * 42) + 1);
+ this.updateUsernameFields(this.username);
+
+ this.chatDisplayed = getLocalStorage(this.keyChatDisplayed) || false;
+ this.displayChat();
+ }
+ updateUsernameFields(username) {
+ this.tagUsernameDisplay.innerText = username;
+ this.inputChangeUserName.value = username;
+ this.inputMessageAuthor.value = username;
+ this.imgUsernameAvatar.src = this.avatarSource + username;
+ }
+ displayChat() {
+ this.tagAppContainer.className = this.chatDisplayed ? "flex" : "flex no-chat";
}
handleChatToggle = () => {
- if (this.chatDisplayed) {
- this.tagAppContainer.className = "flex no-chat";
- this.chatDisplayed = false;
- } else {
- this.tagAppContainer.className = "flex";
- this.chatDisplayed = true;
- }
+ this.chatDisplayed = !this.chatDisplayed;
+
+ setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
+ this.displayChat();
}
handleShowChangeNameForm = () => {
this.tagUserInfoDisplay.style.display = "none";
@@ -95,10 +135,12 @@ class Messaging {
if (newValue) {
this.userName = newValue;
- this.inputChangeUserName.value = newValue;
- this.tagMessageAuthor.innerText = newValue;
- this.tagUsernameDisplay.innerText = newValue;
- this.imgUsernameAvatar.src = this.avatarSource + newValue;
+ this.updateUsernameFields(newValue);
+ // this.inputChangeUserName.value = newValue;
+ // this.inputMessageAuthor.value = newValue;
+ // this.tagUsernameDisplay.innerText = newValue;
+ // this.imgUsernameAvatar.src = this.avatarSource + newValue;
+ setLocalStorage(this.keyUsername, newValue);
}
this.handleHideChangeNameForm();
}
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 5ecc164b1..c72bf203c 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -148,10 +148,12 @@ header h1 {
flex-direction: column;
justify-content: flex-start;
align-items: center;
+ background-color: black;
}
#video-container video {
width: 100%;
display: block;
+ min-height: 100%
}
#stream-info {