pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

more clean up and fixins

pull/5/head
Ginger Wong 5 years ago
parent
3ef20c5516
commit
50a59ef3c0
5 changed files with 48 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      webroot/index.html
  2. 31
      webroot/js/app.js
  3. 28
      webroot/js/message.js
  4. 13
      webroot/js/utils.js
  5. 19
      webroot/styles/layout.css

2
webroot/index.html
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save