Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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" />
<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>
<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>
<script src="vendor/autolink.js"></script>
<link href="./styles/layout.css" rel="stylesheet" />
</head>
<body>
@ -34,7 +29,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">
@ -134,6 +129,7 @@
</div>
</div>
<script src="js/utils.js"></script>
<script src="js/message.js"></script>
<script src="js/app.js"></script>
</body>

54
webroot/js/app.js
View File

@ -22,28 +22,29 @@ 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();
// 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 = "";
}
}
});
// this.message.body = "";
// }
// }
// });
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
var appMessagingMisc = new Messaging();
appMessagingMisc.init();
}
@ -109,16 +110,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);
});
}

68
webroot/js/message.js
View File

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

2
webroot/styles/layout.css
View File

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