LogalDeveloper/owncast
0
Fork 0
Code Activity

chat fixes and optimizations (#431)

Browse Source 
* - format messages on didMount instead of didUpdate. will also prevent bad setSTate loops when message is blank;
- convert message.js to functional comp
- prevent extra rerenders in messages and chat with shouldComponentUpdate checks

* revert chat test

* more concise returns;
This commit is contained in:
gingervitis
2020-12-06 21:01:52 -08:00
committed by GitHub
parent b405b2fcc7
commit 0062896b7d
3 changed files with 78 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
webroot/js/components/chat/message.js
View File

@@ -1,34 +1,31 @@
import { h, Component } from '/js/web_modules/preact.js';
import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
import ChatMessageView from './chat-message-view.js';
import { messageBubbleColorForString } from '../../utils/user-colors.js';
import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
export default class Message extends Component {
render(props) {
const { message } = props;
const { type } = message;
if (type === SOCKET_MESSAGE_TYPES.CHAT || type === SOCKET_MESSAGE_TYPES.SYSTEM) {
return html`<${ChatMessageView} ...${props} />`;
} else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
const { oldName, newName } = message;
return (
html`
<div class="message message-name-change flex items-center justify-start p-3">
<div class="message-content flex flex-row items-center justify-center text-sm w-full">
<div class="text-white text-center opacity-50 overflow-hidden break-words">
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
</div>
export default function Message(props) {
const { message } = props;
const { type } = message;
if (type === SOCKET_MESSAGE_TYPES.CHAT || type === SOCKET_MESSAGE_TYPES.SYSTEM) {
return html`<${ChatMessageView} ...${props} />`;
} else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
const { oldName, newName } = message;
return (
html`
<div class="message message-name-change flex items-center justify-start p-3">
<div class="message-content flex flex-row items-center justify-center text-sm w-full">
<div class="text-white text-center opacity-50 overflow-hidden break-words">
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
</div>
</div>
`
);
} else {
console.log("Unknown message type:", type);
}
</div>
`
);
} else {
console.log("Unknown message type:", type);
}
}