diff --git a/webroot/index.html b/webroot/index.html
index c7693f1dd..6c8cbd092 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -1,5 +1,7 @@
+
+
Live stream test
diff --git a/webroot/js/app.js b/webroot/js/app.js
index 8ff70dd03..10e74fa23 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -12,6 +12,8 @@ function setupApp() {
data: {
streamStatus: "",
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;
var appMessagingMisc = new Messaging();
@@ -59,9 +40,9 @@ async function getStatus() {
? "Stream is online."
: "Stream is offline."
- app.viewerCount = status.viewerCount
- app.sessionMaxViewerCount = status.sessionMaxViewerCount
- app.overallMaxViewerCount = status.overallMaxViewerCount
+ app.viewerCount = status.viewerCount;
+ app.sessionMaxViewerCount = status.sessionMaxViewerCount;
+ app.overallMaxViewerCount = status.overallMaxViewerCount;
} catch (e) {
app.streamStatus = "Stream server is offline."
@@ -87,7 +68,7 @@ function setupWebsocket() {
if (existing.length === 0 || !existing) {
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?
}
}
diff --git a/webroot/js/message.js b/webroot/js/message.js
index b69084e19..9b31c0891 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -1,9 +1,9 @@
class Message {
constructor(model) {
- this.author = model.author
- this.body = model.body
- this.image = "https://robohash.org/" + model.author
- this.id = model.id
+ this.author = model.author;
+ this.body = model.body;
+ this.image = model.image || "https://robohash.org/" + model.author;
+ this.id = model.id;
}
addNewlines(str) {
@@ -40,9 +40,11 @@ class Messaging {
this.keyUsername = "owncast_username";
this.keyChatDisplayed = "owncast_chat";
+ this.tagAppContainer = document.querySelector("#app-container");
+
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.tagUsernameDisplay = document.querySelector("#username-display");
@@ -52,7 +54,6 @@ class Messaging {
this.tagMessageFormWarning = document.querySelector("#message-form-warning");
- this.tagAppContainer = document.querySelector("#app-container");
this.inputChangeUserName = document.querySelector("#username-change-input");
this.btnUpdateUserName = document.querySelector("#button-update-username");
@@ -63,7 +64,7 @@ class Messaging {
}
init() {
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.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm);
@@ -72,7 +73,7 @@ class Messaging {
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown);
this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton);
this.initLocalStates();
-
+
}
initLocalStates() {
@@ -94,16 +95,19 @@ class Messaging {
handleChatToggle = () => {
this.chatDisplayed = !this.chatDisplayed;
-
- setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
+ if (this.chatDisplayed) {
+ setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
+ } else {
+ clearLocalStorage(this.keyChatDisplayed);
+ }
this.displayChat();
}
handleShowChangeNameForm = () => {
- this.tagUserInfoDisplay.style.display = "none";
+ this.textUserInfoDisplay.style.display = "none";
this.tagUserInfoChanger.style.display = "flex";
}
handleHideChangeNameForm = () => {
- this.tagUserInfoDisplay.style.display = "flex";
+ this.textUserInfoDisplay.style.display = "flex";
this.tagUserInfoChanger.style.display = "none";
}
handleUpdateUsername = () => {
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
index d01eeb777..9bf1a4e5c 100644
--- a/webroot/js/utils.js
+++ b/webroot/js/utils.js
@@ -8,17 +8,24 @@ function getLocalStorage(key) {
function setLocalStorage(key, value) {
try {
- localStorage.setItem(key, value);
+ if (value !== "" && value !== null) {
+ localStorage.setItem(key, value);
+ } else {
+ localStorage.removeItem(key);
+ }
return true;
} catch (e) {}
return false;
}
+function clearLocalStorage(key) {
+ localStorage.removeItem(key);
+}
+
function jumpToBottom(id) {
const div = document.querySelector(id);
- console.log(div.scrollTop, div.scrollHeight , div.clientHeight)
div.scrollTo({
- top: div.scrollHeight - div.clientHeight,
+ top: div.scrollHeight,// - div.clientHeight,
left: 0,
behavior: 'smooth'
});
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 583c4de44..4587e9d55 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -36,6 +36,7 @@ header {
z-index: 10;
flex-direction: row;
justify-content: space-between;
+ flex-wrap: nowrap;
}
header h1 {
@@ -46,6 +47,7 @@ header h1 {
color: #ddd;
padding: .5em;
white-space: nowrap;
+ width: 20em;
}
#chat-toggle {
@@ -53,7 +55,7 @@ header h1 {
background-color: #555;
text-align: center;
height: 100%;
- width: 3em;
+ min-width: 3em;
justify-content: center;
align-items: center;
}
@@ -67,6 +69,7 @@ header h1 {
flex-direction: row;
justify-content: flex-end;
align-items: center;
+ flex-wrap: nowrap;
}
#user-info-display {
@@ -76,6 +79,8 @@ header h1 {
align-items: center;
cursor: pointer;
padding: .5em 1em;
+ overflow: hidden;
+ width: 100%;
}
#username-avatar {
@@ -87,8 +92,10 @@ header h1 {
#username-display {
font-weight: bold;
font-size: .75em;
- color: #516FEB
-
+ color: #516FEB;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
#user-info-display:hover {
transition: opacity .2s;
@@ -287,8 +294,10 @@ header h1 {
overflow: hidden;
}
-
- #info {
+ #user-info {
+ width: 12em;
+ }
+ #stream-info {
display: none;
overflow: auto;
height: auto;