mirror of
https://github.com/owncast/owncast.git
synced 2024-10-26 06:26:03 +03:00
9a91324456
* - mock detect when user turns into moderator - add moderator indicator to display on messages and username changer * also mock moderator flag in message payload about user to display indicator * add some menu looking icons and a menu of actions * WIP chat moderators * Add support for admin promoting a user to moderator * WIP- open a more info panel of user+message info; add some a11y to buttons * style the details panel * adjust positioning of menus * Merge fixes. ChatClient->Client ChatServer->Server * Remove moderator bool placeholders to use real state * Support inline hiding of messages by moderators * Support inline banning of chat users * Cleanup linter warnings * Puppeteer tests fail after typing take place * Manually resolve conflicts in chat between moderator feature and develop Co-authored-by: Gabe Kangas <gabek@real-ity.com>
59 lines
2.1 KiB
JavaScript
59 lines
2.1 KiB
JavaScript
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 { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
|
|
import { checkIsModerator } from '../../utils/chat.js';
|
|
|
|
function SystemMessage(props) {
|
|
const { contents } = props;
|
|
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">
|
|
${contents}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
export default function Message(props) {
|
|
const { message } = props;
|
|
const { type, oldName, user, body } = 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 { displayName } = user;
|
|
const contents = html`
|
|
<>
|
|
<span class="font-bold">${oldName}</span> is now known as ${' '}
|
|
<span class="font-bold">${displayName}</span>.
|
|
</>
|
|
`;
|
|
return html`<${SystemMessage} contents=${contents}/>`;
|
|
} else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
|
|
const { displayName } = user;
|
|
const contents = html`<span class="font-bold">${displayName}</span> joined the chat.`;
|
|
return html`<${SystemMessage} contents=${contents}/>`;
|
|
} else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) {
|
|
const contents = html`<span
|
|
dangerouslySetInnerHTML=${{ __html: body }}
|
|
></span>`;
|
|
return html`<${SystemMessage} contents=${contents}/>`;
|
|
} else if (type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
|
|
// moderator message
|
|
const isModerator = checkIsModerator(message);
|
|
if (isModerator) {
|
|
const contents = html`<span class="font-bold moderator-flag">You are now a moderator.</span>`;
|
|
return html`<${SystemMessage} contents=${contents}/>`;
|
|
}
|
|
} else {
|
|
console.log('Unknown message type:', type);
|
|
}
|
|
}
|