LogalDeveloper/owncast
0
Fork 0
Code Activity

set up localstorage-able items

Browse Source
This commit is contained in:
Ginger Wong
2020-06-13 23:38:09 -07:00
parent 4553ae628b
commit 2aaedd99b5
4 changed files with 86 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
webroot/index.html
View File

@@ -2,25 +2,20 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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" <script src="//unpkg.com/video.js/dist/video.min.js"></script>
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? --> <!-- 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/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 +29,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">
@@ -134,6 +129,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>

54
webroot/js/app.js
View File

@@ -22,28 +22,29 @@ function setupApp() {
} }
}) })
window.chatForm = new Vue({ // window.chatForm = new Vue({
el: "#chatForm", // el: "#chatForm",
data: { // data: {
message: { // message: {
author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1), // author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
body: "" // body: ""
} // }
}, // },
methods: { // methods: {
submitChatForm: function (e) { // submitChatForm: function (e) {
const message = new Message(this.message); // const message = new Message(this.message);
message.id = uuidv4(); // message.id = uuidv4();
localStorage.author = message.author; // localStorage.author = message.author;
const messageJSON = JSON.stringify(message); // const messageJSON = JSON.stringify(message);
window.ws.send(messageJSON); // window.ws.send(messageJSON);
e.preventDefault(); // e.preventDefault();
this.message.body = ""; // this.message.body = "";
} // }
} // }
}); // });
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
var appMessagingMisc = new Messaging(); var appMessagingMisc = new Messaging();
appMessagingMisc.init(); appMessagingMisc.init();
} }
@@ -109,16 +110,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);
});
}

68
webroot/js/message.js
View File

@@ -38,6 +38,8 @@ class Messaging {
this.maxMessageLength = 500; this.maxMessageLength = 500;
this.maxMessageBuffer = 20; this.maxMessageBuffer = 20;
this.keyUsername = "owncast_username";
this.keyChatDisplayed = "owncast_chat";
this.tagChatToggle = document.querySelector("#chat-toggle"); this.tagChatToggle = document.querySelector("#chat-toggle");
@@ -47,7 +49,7 @@ class Messaging {
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");
@@ -58,7 +60,6 @@ class Messaging {
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change"); this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
this.formMessageInput = document.querySelector("#inputBody"); this.formMessageInput = document.querySelector("#inputBody");
} }
init() { init() {
this.tagChatToggle.addEventListener("click", this.handleChatToggle); this.tagChatToggle.addEventListener("click", this.handleChatToggle);
@@ -69,16 +70,55 @@ class Messaging {
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.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 = () => { handleChatToggle = () => {
if (this.chatDisplayed) { this.chatDisplayed = !this.chatDisplayed;
this.tagAppContainer.className = "flex no-chat";
this.chatDisplayed = false; setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
} else { this.displayChat();
this.tagAppContainer.className = "flex";
this.chatDisplayed = true;
}
} }
handleShowChangeNameForm = () => { handleShowChangeNameForm = () => {
this.tagUserInfoDisplay.style.display = "none"; this.tagUserInfoDisplay.style.display = "none";
@@ -95,10 +135,12 @@ class Messaging {
if (newValue) { if (newValue) {
this.userName = newValue; this.userName = newValue;
this.inputChangeUserName.value = newValue; this.updateUsernameFields(newValue);
this.tagMessageAuthor.innerText = newValue; // this.inputChangeUserName.value = newValue;
this.tagUsernameDisplay.innerText = newValue; // this.inputMessageAuthor.value = newValue;
this.imgUsernameAvatar.src = this.avatarSource + newValue; // this.tagUsernameDisplay.innerText = newValue;
// this.imgUsernameAvatar.src = this.avatarSource + newValue;
setLocalStorage(this.keyUsername, newValue);
} }
this.handleHideChangeNameForm(); this.handleHideChangeNameForm();
} }

2
webroot/styles/layout.css
View File

@@ -148,10 +148,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 {