LogalDeveloper/owncast
0
Fork 0
Code Activity

generate avatar img with util

Browse Source
This commit is contained in:
Ginger Wong
2020-07-04 22:34:00 -07:00
parent 96258fc0f3
commit 5efa67d605
3 changed files with 79 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
webroot/index.html
View File

@@ -21,8 +21,6 @@ GW TODO:
- accessilbity - accessilbity
- convert all the https://robohash.org/username123 areas to {{}}, put into util
- generate ?set=x(1-1)&size=10x10
*/ */
</script> </script>
@@ -45,7 +43,12 @@ GW TODO:
<div id="user-options-container" class="flex"> <div id="user-options-container" class="flex">
<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 bg-black bg-opacity-50 border border-solid border-gray-700" /> <img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt=""
id="username-avatar"
class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
/>
<span id="username-display" class="text-indigo-600"></span> <span id="username-display" class="text-indigo-600"></span>
</div> </div>

112
webroot/js/message.js
View File

@@ -1,13 +1,13 @@
const SocketMessageTypes = { const SocketMessageTypes = {
CHAT: "CHAT", CHAT: 'CHAT',
PING: "PING" PING: 'PING'
} }
class Message { class Message {
constructor(model) { constructor(model) {
this.author = model.author; this.author = model.author;
this.body = model.body; this.body = model.body;
this.image = model.image || "https://robohash.org/" + model.author; this.image = model.image || generateAvatar(model.author);
this.id = model.id; this.id = model.id;
this.type = model.type; this.type = model.type;
} }
@@ -33,63 +33,69 @@ class Message {
class Messaging { class Messaging {
constructor() { constructor() {
this.chatDisplayed = false; this.chatDisplayed = false;
this.username = ""; this.username = '';
this.avatarSource = "https://robohash.org/";
this.messageCharCount = 0; this.messageCharCount = 0;
this.maxMessageLength = 500; this.maxMessageLength = 500;
this.maxMessageBuffer = 20; this.maxMessageBuffer = 20;
this.keyUsername = "owncast_username"; this.keyUsername = 'owncast_username';
this.keyChatDisplayed = "owncast_chat"; this.keyUserAvatar = 'owncast_avatar';
this.keyChatDisplayed = 'owncast_chat';
this.tagAppContainer = document.querySelector("#app-container"); this.tagAppContainer = document.querySelector('#app-container');
this.tagChatToggle = document.querySelector("#chat-toggle"); this.tagChatToggle = document.querySelector('#chat-toggle');
this.tagUserInfoChanger = document.querySelector("#user-info-change"); this.tagUserInfoChanger = document.querySelector('#user-info-change');
this.tagUsernameDisplay = document.querySelector("#username-display"); this.tagUsernameDisplay = document.querySelector('#username-display');
this.tagMessageFormWarning = document.querySelector("#message-form-warning"); this.tagMessageFormWarning = document.querySelector('#message-form-warning');
this.inputMessageAuthor = document.querySelector("#self-message-author"); this.inputMessageAuthor = document.querySelector('#self-message-author');
this.inputChangeUserName = document.querySelector("#username-change-input"); this.inputChangeUserName = document.querySelector('#username-change-input');
this.btnUpdateUserName = document.querySelector("#button-update-username"); this.btnUpdateUserName = document.querySelector('#button-update-username');
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change"); this.btnCancelUpdateUsername = document.querySelector('#button-cancel-change');
this.btnSubmitMessage = document.querySelector("#button-submit-message"); this.btnSubmitMessage = document.querySelector('#button-submit-message');
this.formMessageInput = document.querySelector("#message-body-form"); this.formMessageInput = document.querySelector('#message-body-form');
this.imgUsernameAvatar = document.querySelector("#username-avatar"); this.imgUsernameAvatar = document.querySelector('#username-avatar');
this.textUserInfoDisplay = document.querySelector("#user-info-display"); this.textUserInfoDisplay = document.querySelector('#user-info-display');
this.scrollableMessagesContainer = document.querySelector("#messages-container"); this.scrollableMessagesContainer = document.querySelector('#messages-container');
} }
init() { init() {
this.tagChatToggle.addEventListener("click", this.handleChatToggle.bind(this)); this.tagChatToggle.addEventListener('click', this.handleChatToggle.bind(this));
this.textUserInfoDisplay.addEventListener("click", this.handleShowChangeNameForm.bind(this)); this.textUserInfoDisplay.addEventListener('click', this.handleShowChangeNameForm.bind(this));
this.btnUpdateUserName.addEventListener("click", this.handleUpdateUsername.bind(this)); this.btnUpdateUserName.addEventListener('click', this.handleUpdateUsername.bind(this));
this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm.bind(this)); this.btnCancelUpdateUsername.addEventListener('click', this.handleHideChangeNameForm.bind(this));
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown.bind(this)); this.inputChangeUserName.addEventListener('keydown', this.handleUsernameKeydown.bind(this));
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown.bind(this)); this.formMessageInput.addEventListener('keydown', this.handleMessageInputKeydown.bind(this));
this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton.bind(this)); this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this));
this.initLocalStates(); this.initLocalStates();
if (hasTouchScreen()) { if (hasTouchScreen()) {
this.scrollableMessagesContainer = document.body; this.scrollableMessagesContainer = document.body;
this.tagAppContainer.classList.add("touch-screen"); this.tagAppContainer.classList.add('touch-screen');
window.app.layout = "touch"; window.app.layout = 'touch';
window.onorientationchange = this.handleOrientationChange.bind(this); window.onorientationchange = this.handleOrientationChange.bind(this);
this.handleOrientationChange(); this.handleOrientationChange();
} else { } else {
this.tagAppContainer.classList.add("desktop"); this.tagAppContainer.classList.add('desktop');
window.app.layout = "desktop"; window.app.layout = 'desktop';
} }
} }
initLocalStates() { initLocalStates() {
this.username = getLocalStorage(this.keyUsername) || "User" + (Math.floor(Math.random() * 42) + 1); this.username = getLocalStorage(this.keyUsername) || generateUsername();
console.log("=== initt state", getLocalStorage(this.keyUserAvatar))
this.imgUsernameAvatar.src = getLocalStorage(this.keyUserAvatar) || generateAvatar(this.username);
console.log("===",this.imgUsernameAvatar.src)
this.updateUsernameFields(this.username); this.updateUsernameFields(this.username);
this.chatDisplayed = getLocalStorage(this.keyChatDisplayed) || false; this.chatDisplayed = getLocalStorage(this.keyChatDisplayed) || false;
@@ -99,16 +105,15 @@ class Messaging {
this.tagUsernameDisplay.innerText = username; this.tagUsernameDisplay.innerText = username;
this.inputChangeUserName.value = username; this.inputChangeUserName.value = username;
this.inputMessageAuthor.value = username; this.inputMessageAuthor.value = username;
this.imgUsernameAvatar.src = this.avatarSource + username;
} }
displayChat() { displayChat() {
if (this.chatDisplayed) { if (this.chatDisplayed) {
this.tagAppContainer.classList.add("chat"); this.tagAppContainer.classList.add('chat');
this.tagAppContainer.classList.remove("no-chat"); this.tagAppContainer.classList.remove('no-chat');
jumpToBottom(this.scrollableMessagesContainer); jumpToBottom(this.scrollableMessagesContainer);
} else { } else {
this.tagAppContainer.classList.add("no-chat"); this.tagAppContainer.classList.add('no-chat');
this.tagAppContainer.classList.remove("chat"); this.tagAppContainer.classList.remove('chat');
} }
} }
@@ -117,12 +122,12 @@ class Messaging {
if(!isPortrait) { if(!isPortrait) {
if (document.body.clientWidth < 1024) { if (document.body.clientWidth < 1024) {
this.tagAppContainer.classList.add("no-chat"); this.tagAppContainer.classList.add('no-chat');
this.tagAppContainer.classList.add("landscape"); this.tagAppContainer.classList.add('landscape');
} }
} else { } else {
if (this.chatDisplayed) this.tagAppContainer.classList.remove("no-chat"); if (this.chatDisplayed) this.tagAppContainer.classList.remove('no-chat');
this.tagAppContainer.classList.remove("landscape"); this.tagAppContainer.classList.remove('landscape');
} }
} }
@@ -136,17 +141,17 @@ class Messaging {
this.displayChat(); this.displayChat();
} }
handleShowChangeNameForm() { handleShowChangeNameForm() {
this.textUserInfoDisplay.style.display = "none"; this.textUserInfoDisplay.style.display = 'none';
this.tagUserInfoChanger.style.display = "flex"; this.tagUserInfoChanger.style.display = 'flex';
if (document.body.clientWidth < 640) { if (document.body.clientWidth < 640) {
this.tagChatToggle.style.display = "none"; this.tagChatToggle.style.display = 'none';
} }
} }
handleHideChangeNameForm() { handleHideChangeNameForm() {
this.textUserInfoDisplay.style.display = "flex"; this.textUserInfoDisplay.style.display = 'flex';
this.tagUserInfoChanger.style.display = "none"; this.tagUserInfoChanger.style.display = 'none';
if (document.body.clientWidth < 640) { if (document.body.clientWidth < 640) {
this.tagChatToggle.style.display = "inline-block"; this.tagChatToggle.style.display = 'inline-block';
} }
} }
@@ -158,7 +163,9 @@ class Messaging {
if (newValue) { if (newValue) {
this.username = newValue; this.username = newValue;
this.updateUsernameFields(newValue); this.updateUsernameFields(newValue);
this.imgUsernameAvatar.src = generateAvatar(newValue);
setLocalStorage(this.keyUsername, newValue); setLocalStorage(this.keyUsername, newValue);
setLocalStorage(this.keyUserAvatar, this.imgUsernameAvatar.src);
} }
this.handleHideChangeNameForm(); this.handleHideChangeNameForm();
} }
@@ -191,13 +198,13 @@ class Messaging {
} }
if (numCharsLeft <= this.maxMessageBuffer) { if (numCharsLeft <= this.maxMessageBuffer) {
this.tagMessageFormWarning.innerText = numCharsLeft + " chars left"; this.tagMessageFormWarning.innerText = `${numCharsLeft} chars left`;
if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) { if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
event.preventDefault(); event.preventDefault();
return; return;
} }
} else { } else {
this.tagMessageFormWarning.innerText = ""; this.tagMessageFormWarning.innerText = '';
} }
} }
handleSubmitChatButton(event) { handleSubmitChatButton(event) {
@@ -217,6 +224,7 @@ class Messaging {
var message = new Message({ var message = new Message({
body: content, body: content,
author: this.username, author: this.username,
image: this.imgUsernameAvatar.src,
}); });
const messageJSON = JSON.stringify(message); const messageJSON = JSON.stringify(message);
if (window && window.ws) { if (window && window.ws) {
@@ -224,7 +232,7 @@ class Messaging {
} }
// clear out things. // clear out things.
this.formMessageInput.value = ""; this.formMessageInput.value = '';
this.tagMessageFormWarning.innerText = ""; this.tagMessageFormWarning.innerText = '';
} }
} }

13
webroot/js/utils.js
View File

@@ -75,3 +75,16 @@ function hasTouchScreen() {
return hasTouchScreen; return hasTouchScreen;
} }
// generate random avatar from https://robohash.org
function generateAvatar(hash) {
const avatarSource = 'https://robohash.org/';
const optionSize = '?size=80x80';
const optionSet = '&set=set3';
const optionBg = ''; // or &bgset=bg1 or bg2
return avatarSource + hash + optionSize + optionSet + optionBg;
}
function generateUsername() {
return `User ${(Math.floor(Math.random() * 42) + 1)}`;
}