LogalDeveloper/owncast
0
Fork 0
Code Activity

put emojiPicker instance in state so page can correctly reflect updates when it has instantiated (#1182)

Browse Source
This commit is contained in:
gingervitis
2021-07-12 10:24:41 -07:00
committed by GitHub
parent 0c6378976c
commit ab254a3902
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
webroot/js/components/chat/chat-input.js
View File

@@ -33,8 +33,6 @@ export default class ChatInput extends Component {
this.messageCharCount = 0; this.messageCharCount = 0;
this.emojiPicker = null;
this.prepNewLine = false; this.prepNewLine = false;
this.modifierKeyPressed = false; // control/meta/shift/alt this.modifierKeyPressed = false; // control/meta/shift/alt
@@ -43,6 +41,7 @@ export default class ChatInput extends Component {
inputText: '', // for counting inputText: '', // for counting
inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH, inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH,
hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT), hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT),
emojiPicker: null,
}; };
this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this); this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this);
@@ -72,7 +71,7 @@ export default class ChatInput extends Component {
return response.json(); return response.json();
}) })
.then((json) => { .then((json) => {
this.emojiPicker = new EmojiButton({ const emojiPicker = new EmojiButton({
zIndex: 100, zIndex: 100,
theme: 'owncast', // see chat.css theme: 'owncast', // see chat.css
custom: json, custom: json,
@@ -85,13 +84,14 @@ export default class ChatInput extends Component {
position: 'right-start', position: 'right-start',
strategy: 'absolute', strategy: 'absolute',
}); });
this.emojiPicker.on('emoji', (emoji) => { emojiPicker.on('emoji', (emoji) => {
this.handleEmojiSelected(emoji); this.handleEmojiSelected(emoji);
}); });
this.emojiPicker.on('hidden', () => { emojiPicker.on('hidden', () => {
this.formMessageInput.current.focus(); this.formMessageInput.current.focus();
replaceCaret(this.formMessageInput.current); replaceCaret(this.formMessageInput.current);
}); });
this.setState({ emojiPicker });
}) })
.catch((error) => { .catch((error) => {
// this.handleNetworkingError(`Emoji Fetch: ${error}`); // this.handleNetworkingError(`Emoji Fetch: ${error}`);
@@ -99,8 +99,9 @@ export default class ChatInput extends Component {
} }
handleEmojiButtonClick() { handleEmojiButtonClick() {
if (this.emojiPicker) { const { emojiPicker } = this.state;
this.emojiPicker.togglePicker(this.emojiPickerButton.current); if (emojiPicker) {
emojiPicker.togglePicker(this.emojiPickerButton.current);
} }
} }
@@ -280,10 +281,10 @@ export default class ChatInput extends Component {
} }
render(props, state) { render(props, state) {
const { hasSentFirstChatMessage, inputCharsLeft, inputHTML } = state; const { hasSentFirstChatMessage, inputCharsLeft, inputHTML, emojiPicker } = state;
const { inputEnabled } = props; const { inputEnabled } = props;
const emojiButtonStyle = { const emojiButtonStyle = {
display: this.emojiPicker && inputCharsLeft > 0 ? 'block' : 'none', display: emojiPicker && inputCharsLeft > 0 ? 'block' : 'none',
}; };
const extraClasses = classNames({ const extraClasses = classNames({
'display-count': inputCharsLeft <= CHAT_CHAR_COUNT_BUFFER, 'display-count': inputCharsLeft <= CHAT_CHAR_COUNT_BUFFER,