LogalDeveloper/owncast
0
Fork 0
Code Activity

Merge remote-tracking branch 'origin/web-layout'

Browse Source 
* origin/web-layout:
  more clean up and fixins
  fix chat; get rid of jquery
  set up localstorage-able items
This commit is contained in:
Gabe Kangas
2020-06-14 01:29:28 -07:00
parent 6d8e8a8849 50a59ef3c0
commit 5e1524d03e
5 changed files with 150 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
webroot/index.html
View File

@@ -1,26 +1,20 @@
<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 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="./styles/layout.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- unpkg : use the latest version of Video.js --> <!-- unpkg : use the latest version of Video.js -->
<link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> <link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<link <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css"
rel="stylesheet"
/>
<script src="//unpkg.com/video.js/dist/video.min.js"></script> <script src="//unpkg.com/video.js/dist/video.min.js"></script>
<!-- Used for animating the scrolling of the chat div. Can that be done other ways? -->
<script src="vendor/jquery-2.1.4.min.js"></script>
<script src="vendor/autolink.js"></script> <script src="vendor/autolink.js"></script>
<link href="./styles/layout.css" rel="stylesheet" />
</head> </head>
<body> <body>
@@ -34,7 +28,7 @@
<div id="user-info"> <div id="user-info">
<div id="user-info-display" title="Click to update user name" class="flex"> <div id="user-info-display" title="Click to update user name" class="flex">
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" /> <img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
<span id="username-display">Random Username 123</span> <span id="username-display"></span>
</div> </div>
<div id="user-info-change"> <div id="user-info-change">
@@ -99,31 +93,21 @@
</div> </div>
<div id="message-input-container" class="shadow-md"> <div id="message-input-container" class="shadow-md">
<form id="message-form" class="flex" @submit="submitChatForm"> <form id="message-form" class="flex" /*@submit="submitChatForm"*/>
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" /> <input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
<!-- Author -->
<!-- <label class="control-label" for="inputAuthor">Author</label>
<input
id="inputAuthor"
type="text"
class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
placeholder="Name"
v-model="message.author"
/> -->
<textarea <textarea
id="inputBody" id="message-body-form"
placeholder="Message" placeholder="Message"
v-model="message.body" 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 leading-tight 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>
<div id="message-form-actions" class="flex"> <div id="message-form-actions" class="flex">
<span id="message-form-warning"></span> <span id="message-form-warning"></span>
<button <button
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Send > Send
</button> </button>
@@ -136,6 +120,7 @@
</div> </div>
</div> </div>
<script src="js/utils.js"></script>
<script src="js/message.js"></script> <script src="js/message.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>

47
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,28 +24,8 @@ 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(); var appMessagingMisc = new Messaging();
appMessagingMisc.init(); appMessagingMisc.init();
} }
@@ -58,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."
@@ -85,8 +67,8 @@ function setupWebsocket() {
}) })
if (existing.length === 0 || !existing) { if (existing.length === 0 || !existing) {
this.messagesContainer.messages.push(message) this.messagesContainer.messages.push(message);
scrollSmoothToBottom("messages-container") setTimeout(() => { jumpToBottom("#messages-container"); } , 50); // could be better. is there a sort of Vue "componentDidUpdate" we can do this on?
} }
} }
@@ -111,16 +93,3 @@ getStatus()
setupWebsocket() setupWebsocket()
// setInterval(getStatus, 5000) // 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);
});
}

99
webroot/js/message.js
View File

@@ -1,14 +1,13 @@
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) {
return str.replace(/(?:\r\n|\r|\n)/g, '<br />'); return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
} }
formatText() { formatText() {
var linked = autoLink(this.body, { embed: true }); var linked = autoLink(this.body, { embed: true });
@@ -21,7 +20,7 @@ class Message {
body: this.body(), body: this.body(),
image: this.image(), image: this.image(),
id: this.id id: this.id
} };
} }
} }
@@ -38,54 +37,77 @@ class Messaging {
this.maxMessageLength = 500; this.maxMessageLength = 500;
this.maxMessageBuffer = 20; this.maxMessageBuffer = 20;
this.keyUsername = "owncast_username";
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");
this.imgUsernameAvatar = document.querySelector("#username-avatar"); 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"); 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");
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change"); this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
this.btnSubmitMessage = document.querySelector("#button-submit-message");
this.formMessageInput = document.querySelector("#inputBody"); this.formMessageInput = document.querySelector("#message-body-form");
} }
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);
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown); this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown); this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown);
this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton);
this.initLocalStates();
}
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 = () => { handleChatToggle = () => {
this.chatDisplayed = !this.chatDisplayed;
if (this.chatDisplayed) { if (this.chatDisplayed) {
this.tagAppContainer.className = "flex no-chat"; setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
this.chatDisplayed = false;
} else { } else {
this.tagAppContainer.className = "flex"; clearLocalStorage(this.keyChatDisplayed);
this.chatDisplayed = true;
} }
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 = () => {
@@ -95,10 +117,8 @@ class Messaging {
if (newValue) { if (newValue) {
this.userName = newValue; this.userName = newValue;
this.inputChangeUserName.value = newValue; this.updateUsernameFields(newValue);
this.tagMessageAuthor.innerText = newValue; setLocalStorage(this.keyUsername, newValue);
this.tagUsernameDisplay.innerText = newValue;
this.imgUsernameAvatar.src = this.avatarSource + newValue;
} }
this.handleHideChangeNameForm(); this.handleHideChangeNameForm();
} }
@@ -118,11 +138,9 @@ class Messaging {
if (event.keyCode === 13) { // enter if (event.keyCode === 13) { // enter
if (!this.prepNewLine) { if (!this.prepNewLine) {
// submit() this.submitChat(value);
event.preventDefault(); event.preventDefault();
// clear out things.
this.formMessageInput.value = "";
this.tagMessageFormWarning.innerText = "";
return; return;
} }
this.prepNewLine = false; this.prepNewLine = false;
@@ -143,7 +161,30 @@ class Messaging {
this.tagMessageFormWarning.innerText = ""; this.tagMessageFormWarning.innerText = "";
} }
} }
handleSubmitChatButton = event => {
var value = this.formMessageInput.value.trim();
if (value) {
this.submitChat(value);
event.preventDefault();
return false;
}
event.preventDefault();
return false;
}
submitChat(content) {
if (!content) {
return;
}
var message = new Message({
body: content,
author: this.username,
id: uuidv4(),
});
const messageJSON = JSON.stringify(message);
window.ws.send(messageJSON);
// clear out things.
this.formMessageInput.value = "";
this.tagMessageFormWarning.innerText = "";
}
} }

39
webroot/js/utils.js Normal file
View File

@@ -0,0 +1,39 @@
function getLocalStorage(key) {
try {
return localStorage.getItem(key);
} catch (e) {
}
return null;
}
function setLocalStorage(key, value) {
try {
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);
div.scrollTo({
top: div.scrollHeight,// - div.clientHeight,
left: 0,
behavior: 'smooth'
});
}
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);
});
}

24
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;
@@ -148,10 +155,12 @@ header h1 {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: black;
} }
#video-container video { #video-container video {
width: 100%; width: 100%;
display: block; display: block;
min-height: 100%
} }
#stream-info { #stream-info {
@@ -196,6 +205,9 @@ header h1 {
align-items: flex-end; align-items: flex-end;
margin-bottom: 0; margin-bottom: 0;
} }
#message-body-form {
font-size: 1em;
}
#message-form-actions { #message-form-actions {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@@ -282,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;