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

set up localstorage-able items

pull/5/head
Ginger Wong 5 years ago
parent
4553ae628b
commit
2aaedd99b5
4 changed files with 88 additions and 60 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. 20
      webroot/index.html
  2. 58
      webroot/js/app.js
  3. 68
      webroot/js/message.js
  4. 2
      webroot/styles/layout.css

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

58
webroot/js/app.js
Unescape 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
Unescape 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 = "";
}
}
});
handleChatToggle = () => {
if (this.chatDisplayed) {
this.tagAppContainer.className = "flex no-chat";
this.chatDisplayed = false;
} else {
this.tagAppContainer.className = "flex";
this.chatDisplayed = true;
} }
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;
setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
this.displayChat();
} }
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
Unescape 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 {

Write Preview
Loading…
Cancel
Save