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
Split 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 @@ @@ -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 @@ @@ -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 @@ @@ -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>

58
webroot/js/app.js
Unescape View File

@ -22,28 +22,29 @@ function setupApp() { @@ -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();
this.message.body = "";
}
}
});
// 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();
}
@ -109,16 +110,3 @@ getStatus() @@ -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
Unescape View File

@ -38,6 +38,8 @@ class Messaging { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save