LogalDeveloper/owncast
0
Fork 0
Code Activity

move over other input field fxns to input component

Browse Source
This commit is contained in:
Ginger Wong
2020-08-15 18:28:29 -07:00
parent 63d7671fed
commit 703aa40271
2 changed files with 121 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
webroot/js/chat/chat-input.js
View File

@@ -4,8 +4,13 @@ const html = htm.bind(h);
import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button'; import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button';
import { URL_CUSTOM_EMOJIS } from '../utils.js'; import { URL_CUSTOM_EMOJIS, getLocalStorage } from '../utils.js';
import { generatePlaceholderText } from '../utils/chat.js'; import {
KEY_CHAT_FIRST_MESSAGE_SENT,
generatePlaceholderText,
getCaretPosition,
setCaretPosition,
} from '../utils/chat.js';
export default class ChatInput extends Component { export default class ChatInput extends Component {
constructor(props, context) { constructor(props, context) {
@@ -20,6 +25,12 @@ export default class ChatInput extends Component {
this.prepNewLine = false; this.prepNewLine = false;
this.state = {
inputValue: '',
inputWarning: '',
hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT),
};
this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this); this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this);
this.handleEmojiSelected = this.handleEmojiSelected.bind(this); this.handleEmojiSelected = this.handleEmojiSelected.bind(this);
this.getCustomEmojis = this.getCustomEmojis.bind(this); this.getCustomEmojis = this.getCustomEmojis.bind(this);
@@ -28,6 +39,8 @@ export default class ChatInput extends Component {
this.handleMessageInputKeyup = this.handleMessageInputKeyup.bind(this); this.handleMessageInputKeyup = this.handleMessageInputKeyup.bind(this);
this.handleMessageInputBlur = this.handleMessageInputBlur.bind(this); this.handleMessageInputBlur = this.handleMessageInputBlur.bind(this);
this.handleMessageInput = this.handleMessageInput.bind(this); this.handleMessageInput = this.handleMessageInput.bind(this);
this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
this.handlePaste = this.handlePaste.bind(this);
} }
componentDidMount() { componentDidMount() {
@@ -70,19 +83,22 @@ export default class ChatInput extends Component {
} }
handleEmojiSelected(emoji) { handleEmojiSelected(emoji) {
let content = '';
if (emoji.url) { if (emoji.url) {
const url = location.protocol + "//" + location.host + "/" + emoji.url; const url = location.protocol + "//" + location.host + "/" + emoji.url;
const name = url.split('\\').pop().split('/').pop(); const name = url.split('\\').pop().split('/').pop();
document.querySelector('#message-body-form').innerHTML += "<img class=\"emoji\" alt=\"" + name + "\" src=\"" + url + "\"/>"; content = "<img class=\"emoji\" alt=\"" + name + "\" src=\"" + url + "\"/>";
} else { } else {
document.querySelector('#message-body-form').innerHTML += emoji.emoji; content = emoji.emoji;
} }
this.formMessageInput.current.innerHTML += content;
} }
// autocomplete user names // autocomplete user names
autoCompleteNames() { autoCompleteNames() {
const { chatUserNames } = this.props; const { chatUserNames } = this.props;
const rawValue = this.formMessageInput.innerHTML; const rawValue = this.formMessageInput.current.innerHTML;
const position = getCaretPosition(this.formMessageInput); const position = getCaretPosition(this.formMessageInput);
const at = rawValue.lastIndexOf('@', position - 1); const at = rawValue.lastIndexOf('@', position - 1);
@@ -90,7 +106,7 @@ export default class ChatInput extends Component {
return false; return false;
} }
var partial = rawValue.substring(at + 1, position).trim(); const partial = rawValue.substring(at + 1, position).trim();
if (partial === this.suggestion) { if (partial === this.suggestion) {
partial = this.partial; partial = this.partial;
@@ -98,7 +114,7 @@ export default class ChatInput extends Component {
this.partial = partial; this.partial = partial;
} }
const possibilities = chatUsernames.filter(function (username) { const possibilities = chatUserNames.filter(function (username) {
return username.toLowerCase().startsWith(partial.toLowerCase()); return username.toLowerCase().startsWith(partial.toLowerCase());
}); });
@@ -110,24 +126,24 @@ export default class ChatInput extends Component {
this.suggestion = possibilities[this.completionIndex]; this.suggestion = possibilities[this.completionIndex];
// TODO: Fix the space not working. I'm guessing because the DOM ignores spaces and it requires a nbsp or something? // TODO: Fix the space not working. I'm guessing because the DOM ignores spaces and it requires a nbsp or something?
this.formMessageInput.innerHTML = rawValue.substring(0, at + 1) + this.suggestion + ' ' + rawValue.substring(position); this.formMessageInput.current.innerHTML = rawValue.substring(0, at + 1) + this.suggestion + ' ' + rawValue.substring(position);
setCaretPosition(this.formMessageInput, at + this.suggestion.length + 2); setCaretPosition(this.formMessageInput.current, at + this.suggestion.length + 2);
} }
return true; return true;
} }
handleMessageInputKeydown(event) { handleMessageInputKeydown(event) {
console.log("========this.formMessageInput", this.formMessageInput) const okCodes = [37,38,39,40,16,91,18,46,8];
const okCodes = [37,38,39,40,16,91,18,46,8]; const formField = this.formMessageInput.current;
const value = this.formMessageInput.innerHTML.trim(); const htmlValue = formField.innerHTML.trim();
const numCharsLeft = this.maxMessageLength - value.length; let textValue = formField.innerText.trim();
let numCharsLeft = this.maxMessageLength - textValue.length;
if (event.keyCode === 13) { // enter if (event.keyCode === 13) { // enter
if (!this.prepNewLine) { if (!this.prepNewLine) {
this.submitChat(value); this.sendMessage();
event.preventDefault(); event.preventDefault();
this.prepNewLine = false; this.prepNewLine = false;
return; return;
} }
} }
@@ -139,20 +155,25 @@ export default class ChatInput extends Component {
event.preventDefault(); event.preventDefault();
// value could have been changed, update variables // value could have been changed, update variables
value = this.formMessageInput.innerHTML.trim(); textValue = formField.innerText.trim();
numCharsLeft = this.maxMessageLength - value.length; numCharsLeft = this.maxMessageLength - textValue.length;
} }
} }
// if (numCharsLeft <= this.maxMessageBuffer) { // text count
// this.tagMessageFormWarning.innerText = `${numCharsLeft} chars left`; if (numCharsLeft <= this.maxMessageBuffer) {
// if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) { this.setState({
// event.preventDefault(); inputWarning: `${numCharsLeft} chars left`,
// return; });
// } if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
// } else { event.preventDefault(); // prevent typing more
// this.tagMessageFormWarning.innerText = ''; return;
// } }
} else {
this.setState({
inputWarning: '',
});
}
} }
handleMessageInputKeyup(event) { handleMessageInputKeyup(event) {
@@ -166,44 +187,77 @@ export default class ChatInput extends Component {
} }
handleMessageInput(event) { handleMessageInput(event) {
// event.target.value console.log("========on input",event.target, this.formMessageInput.current.innerHTML, this.formMessageInput.current.innerText);
} }
// setChatPlaceholderText() { handlePaste(event) {
// // NOTE: This is a fake placeholder that is being styled via CSS. event.preventDefault();
// // You can't just set the .placeholder property because it's not a form element. document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));
// const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT); }
// const placeholderText = hasSentFirstChatMessage ? CHAT_PLACEHOLDER_TEXT : CHAT_INITIAL_PLACEHOLDER_TEXT;
// this.formMessageInput.setAttribute("placeholder", placeholderText); handleSubmitChatButton(event) {
// } event.preventDefault();
this.sendMessage();
}
sendMessage() {
const { handleSendMessage } = this.props;
const { hasSentFirstChatMessage } = this.state;
const message = this.formMessageInput.current.innerHTML.trim();
const newStates = {
inputWarning: '',
};
handleSendMessage(message);
if (!hasSentFirstChatMessage) {
newStates.hasSentFirstChatMessage = true;
setLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT, true);
}
// clear things out.
this.setState(newStates);
this.formMessageInput.current.innerHTML = '';
}
render(props, state) { render(props, state) {
const { contenteditable, hasSentFirstChatMessage } = props; const { hasSentFirstChatMessage, inputWarning } = state;
const { inputEnabled } = props;
const emojiButtonStyle = { const emojiButtonStyle = {
display: this.emojiPicker ? 'block' : 'none', display: this.emojiPicker ? 'block' : 'none',
}; };
const placeholderText = generatePlaceholderText(contenteditable, hasSentFirstChatMessage); const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
return ( return (
html` html`
<div> <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<div <div
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
onkeydown=${this.handleMessageInputKeydown} onkeydown=${this.handleMessageInputKeydown}
onkeyup=${this.handleMessageInputKeyup} onkeyup=${this.handleMessageInputKeyup}
onblur=${this.handleMessageInputBlur} onblur=${this.handleMessageInputBlur}
oninput=${this.handleMessageInput} oninput=${this.handleMessageInput}
contenteditable=${contenteditable} onpaste=${this.handlePaste}
contenteditable=${inputEnabled}
placeholder=${placeholderText} placeholder=${placeholderText}
ref=${this.formMessageInput} ref=${this.formMessageInput}
></div> ></div>
<button <button
type="button" type="button"
style=${emojiButtonStyle} style=${emojiButtonStyle}
onclick=${this.handleEmojiButtonClick} onclick=${this.handleEmojiButtonClick}
>😏</button> >😏</button>
<div id="message-form-actions" class="flex">
<span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>
<button
onclick=${this.handleSubmitChatButton}
type="button"
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Chat
</button>
</div>
</div> </div>
`); `);
} }

79
webroot/js/chat/chat.js
View File

@@ -19,14 +19,9 @@ export default class Chat extends Component {
this.state = { this.state = {
inputEnabled: true, inputEnabled: true,
hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT),
inputValue: '',
inputWarning: '',
messages: [], messages: [],
chatUserNames: [], chatUserNames: [],
};
}
this.websocket = null; this.websocket = null;
@@ -34,7 +29,8 @@ export default class Chat extends Component {
this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this); this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
this.websocketDisconnected = this.websocketDisconnected.bind(this); this.websocketDisconnected = this.websocketDisconnected.bind(this);
this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this); // this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
this.submitChat = this.submitChat.bind(this);
} }
componentDidMount() { componentDidMount() {
@@ -156,29 +152,35 @@ export default class Chat extends Component {
return; return;
} }
const { username, userAvatarImage } = this.props; const { username, userAvatarImage } = this.props;
var message = new Message({ const message = {
body: content, body: content,
author: username, author: username,
image: userAvatarImage, image: userAvatarImage,
type: SOCKET_MESSAGE_TYPES.CHAT, type: SOCKET_MESSAGE_TYPES.CHAT,
}); };
// var message = new Message({
// body: content,
// author: username,
// image: userAvatarImage,
// type: SOCKET_MESSAGE_TYPES.CHAT,
// });
this.websocket.send(message); this.websocket.send(message);
// clear out things. // clear out things.
const newStates = { // const newStates = {
inputValue: '', // inputValue: '',
inputWarning: '', // inputWarning: '',
}; // };
// this.formMessageInput.innerHTML = ''; // this.formMessageInput.innerHTML = '';
// this.tagMessageFormWarning.innerText = ''; // this.tagMessageFormWarning.innerText = '';
// const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT); // const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT);
if (!this.state.hasSentFirstChatMessage) { // if (!this.state.hasSentFirstChatMessage) {
newStates.hasSentFirstChatMessage = true; // newStates.hasSentFirstChatMessage = true;
setLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT, true); // setLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT, true);
// this.setChatPlaceholderText(); // // this.setChatPlaceholderText();
} // }
this.setState(newStates); // this.setState(newStates);
} }
disableChat() { disableChat() {
@@ -196,10 +198,6 @@ export default class Chat extends Component {
this.setState({ this.setState({
inputEnabled: true, inputEnabled: true,
}); });
// if (this.formMessageInput) {
// this.formMessageInput.contentEditable = true;
// this.setChatPlaceholderText();
// }
} }
updateAuthorList(message) { updateAuthorList(message) {
@@ -224,7 +222,7 @@ export default class Chat extends Component {
render(props, state) { render(props, state) {
const { username } = props; const { username } = props;
const { messages, inputEnabled, hasSentFirstChatMessage, chatUserNames, inputWarning } = state; const { messages, inputEnabled, chatUserNames } = state;
return ( return (
html` html`
@@ -236,32 +234,11 @@ export default class Chat extends Component {
} }
messages.. messages..
</div> </div>
<${ChatInput}
chatUserNames=${chatUserNames}
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid"> inputEnabled=${inputEnabled}
<!-- <form id="message-form" class="flex"> --> handleSendMessage=${this.submitChat}
/>
<!-- <input type="hidden" name="inputAuthor" id="self-message-author" value=${username} /> -->
<${ChatInput}
contenteditable=${inputEnabled}
hasSentFirstChatMessage=${hasSentFirstChatMessage}
chatUserNames=${chatUserNames}
handleSubmitForm=${this.handleSubmitChatButton}
/>
<div id="message-form-actions" class="flex">
<span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>
<button
onclick=${this.handleSubmitChatButton}
type="button"
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Chat
</button>
</div>
<!-- </form> -->
</div>
</div> </div>
</section> </section>
`); `);