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

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

* origin/web-layout:
  more clean up and fixins
  fix chat; get rid of jquery
  set up localstorage-able items
pull/5/head
Gabe Kangas 5 years ago
parent
6d8e8a8849 50a59ef3c0
commit
5e1524d03e
5 changed files with 151 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      webroot/index.html
  2. 47
      webroot/js/app.js
  3. 99
      webroot/js/message.js
  4. 39
      webroot/js/utils.js
  5. 24
      webroot/styles/layout.css

45
webroot/index.html
Unescape View File

@ -1,26 +1,20 @@ @@ -1,26 +1,20 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live stream test</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="./styles/layout.css" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- unpkg : use the latest version of Video.js -->
<link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<link
href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css"
rel="stylesheet"
/>
<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>
<link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<link 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="vendor/autolink.js"></script>
<link href="./styles/layout.css" rel="stylesheet" />
</head>
<body>
@ -34,7 +28,7 @@ @@ -34,7 +28,7 @@
<div id="user-info">
<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" />
<span id="username-display">Random Username 123</span>
<span id="username-display"></span>
</div>
<div id="user-info-change">
@ -92,38 +86,28 @@ @@ -92,38 +86,28 @@
/>
<div class="message-content">
<p class="message-author">{{ message.author }}</p>
<p class="message-text"v-html="message.formatText()"></p>
<p class="message-text" v-html="message.formatText()"></p>
</div>
</div>
</div>
</div>
<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" />
<!-- 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
id="inputBody"
id="message-body-form"
placeholder="Message"
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>
<div id="message-form-actions" class="flex">
<span id="message-form-warning"></span>
<button
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Send
</button>
@ -136,6 +120,7 @@ @@ -136,6 +120,7 @@
</div>
</div>
<script src="js/utils.js"></script>
<script src="js/message.js"></script>
<script src="js/app.js"></script>
</body>

47
webroot/js/app.js
Unescape View File

@ -12,6 +12,8 @@ function setupApp() { @@ -12,6 +12,8 @@ function setupApp() {
data: {
streamStatus: "",
viewerCount: 0,
sessionMaxViewerCount: 0,
overallMaxViewerCount: 0,
},
});
@ -22,28 +24,8 @@ function setupApp() { @@ -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();
appMessagingMisc.init();
}
@ -58,9 +40,9 @@ async function getStatus() { @@ -58,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."
@ -85,8 +67,8 @@ function setupWebsocket() { @@ -85,8 +67,8 @@ function setupWebsocket() {
})
if (existing.length === 0 || !existing) {
this.messagesContainer.messages.push(message)
scrollSmoothToBottom("messages-container")
this.messagesContainer.messages.push(message);
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() @@ -111,16 +93,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);
});
}

99
webroot/js/message.js
Unescape View File

@ -1,14 +1,13 @@ @@ -1,14 +1,13 @@
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) {
return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
}
formatText() {
var linked = autoLink(this.body, { embed: true });
@ -21,7 +20,7 @@ class Message { @@ -21,7 +20,7 @@ class Message {
body: this.body(),
image: this.image(),
id: this.id
}
};
}
}
@ -38,54 +37,77 @@ class Messaging { @@ -38,54 +37,77 @@ class Messaging {
this.maxMessageLength = 500;
this.maxMessageBuffer = 20;
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");
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.tagAppContainer = document.querySelector("#app-container");
this.inputChangeUserName = document.querySelector("#username-change-input");
this.btnUpdateUserName = document.querySelector("#button-update-username");
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() {
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);
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
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 = () => {
this.chatDisplayed = !this.chatDisplayed;
if (this.chatDisplayed) {
this.tagAppContainer.className = "flex no-chat";
this.chatDisplayed = false;
setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
} else {
this.tagAppContainer.className = "flex";
this.chatDisplayed = true;
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 = () => {
@ -95,10 +117,8 @@ class Messaging { @@ -95,10 +117,8 @@ 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);
setLocalStorage(this.keyUsername, newValue);
}
this.handleHideChangeNameForm();
}
@ -118,11 +138,9 @@ class Messaging { @@ -118,11 +138,9 @@ class Messaging {
if (event.keyCode === 13) { // enter
if (!this.prepNewLine) {
// submit()
this.submitChat(value);
event.preventDefault();
// clear out things.
this.formMessageInput.value = "";
this.tagMessageFormWarning.innerText = "";
return;
}
this.prepNewLine = false;
@ -143,7 +161,30 @@ class Messaging { @@ -143,7 +161,30 @@ class Messaging {
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
Unescape View File

@ -0,0 +1,39 @@ @@ -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
Unescape View File

@ -36,6 +36,7 @@ header { @@ -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 { @@ -46,6 +47,7 @@ header h1 {
color: #ddd;
padding: .5em;
white-space: nowrap;
width: 20em;
}
#chat-toggle {
@ -53,7 +55,7 @@ header h1 { @@ -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 { @@ -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 { @@ -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 { @@ -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;
@ -148,10 +155,12 @@ header h1 { @@ -148,10 +155,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 {
@ -196,6 +205,9 @@ header h1 { @@ -196,6 +205,9 @@ header h1 {
align-items: flex-end;
margin-bottom: 0;
}
#message-body-form {
font-size: 1em;
}
#message-form-actions {
flex-direction: row;
justify-content: space-between;
@ -282,8 +294,10 @@ header h1 { @@ -282,8 +294,10 @@ header h1 {
overflow: hidden;
}
#info {
#user-info {
width: 12em;
}
#stream-info {
display: none;
overflow: auto;
height: auto;

Write Preview
Loading…
Cancel
Save