mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
Prettified Code!
This commit is contained in:
gabek
GitHub Action
parent
9a91324456
commit
f6015dfe50
@ -42,11 +42,15 @@ export default class ChatMessageView extends Component {
|
||||
render() {
|
||||
const { message, isModerator, accessToken } = this.props;
|
||||
const { user, timestamp } = message;
|
||||
const { displayName, displayColor, createdAt,
|
||||
const {
|
||||
displayName,
|
||||
displayColor,
|
||||
createdAt,
|
||||
isModerator: isAuthorModerator,
|
||||
} = user;
|
||||
} = user;
|
||||
|
||||
const isMessageModeratable = isModerator && message.type === SOCKET_MESSAGE_TYPES.CHAT;
|
||||
const isMessageModeratable =
|
||||
isModerator && message.type === SOCKET_MESSAGE_TYPES.CHAT;
|
||||
|
||||
const { formattedMessage } = this.state;
|
||||
if (!formattedMessage) {
|
||||
@ -67,7 +71,9 @@ export default class ChatMessageView extends Component {
|
||||
: { backgroundColor: messageBubbleColorForHue(displayColor) };
|
||||
const messageClassString = isSystemMessage
|
||||
? 'message flex flex-row items-start p-4 m-2 rounded-lg shadow-l border-solid border-indigo-700 border-2 border-opacity-60 text-l'
|
||||
: `message relative flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm ${isMessageModeratable ? 'moderatable' : ''}`;
|
||||
: `message relative flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm ${
|
||||
isMessageModeratable ? 'moderatable' : ''
|
||||
}`;
|
||||
|
||||
return html`
|
||||
<div
|
||||
@ -78,12 +84,18 @@ export default class ChatMessageView extends Component {
|
||||
<div class="message-content break-words w-full">
|
||||
<div
|
||||
style=${authorTextColor}
|
||||
class="message-author font-bold${isAuthorModerator ? ' moderator-flag' : ''}"
|
||||
class="message-author font-bold${isAuthorModerator
|
||||
? ' moderator-flag'
|
||||
: ''}"
|
||||
title=${userMetadata}
|
||||
>
|
||||
${displayName}
|
||||
</div>
|
||||
${isMessageModeratable && html`<${ModeratorActions} message=${message} accessToken=${accessToken} />`}
|
||||
${isMessageModeratable &&
|
||||
html`<${ModeratorActions}
|
||||
message=${message}
|
||||
accessToken=${accessToken}
|
||||
/>`}
|
||||
<div
|
||||
class="message-text text-gray-300 font-normal overflow-y-hidden pt-2"
|
||||
dangerouslySetInnerHTML=${{ __html: formattedMessage }}
|
||||
|
||||
@ -10,9 +10,15 @@ 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">
|
||||
<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>
|
||||
@ -36,22 +42,25 @@ export default function Message(props) {
|
||||
<span class="font-bold">${displayName}</span>.
|
||||
</>
|
||||
`;
|
||||
return html`<${SystemMessage} contents=${contents}/>`;
|
||||
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}/>`;
|
||||
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}/>`;
|
||||
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}/>`;
|
||||
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);
|
||||
|
||||
@ -106,7 +106,7 @@ class ModeratorMenu extends Component {
|
||||
}
|
||||
|
||||
async handleHideMessage() {
|
||||
if (!confirm("Are you sure you want to remove this message from chat?")) {
|
||||
if (!confirm('Are you sure you want to remove this message from chat?')) {
|
||||
this.props.onDismiss();
|
||||
return;
|
||||
}
|
||||
@ -126,7 +126,7 @@ class ModeratorMenu extends Component {
|
||||
|
||||
try {
|
||||
await fetch(hideMessageUrl, options);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
@ -134,7 +134,7 @@ class ModeratorMenu extends Component {
|
||||
}
|
||||
|
||||
async handleBanUser() {
|
||||
if (!confirm("Are you sure you want to remove this user from chat?")) {
|
||||
if (!confirm('Are you sure you want to remove this user from chat?')) {
|
||||
this.props.onDismiss();
|
||||
return;
|
||||
}
|
||||
@ -154,7 +154,7 @@ class ModeratorMenu extends Component {
|
||||
|
||||
try {
|
||||
await fetch(hideMessageUrl, options);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
@ -196,7 +196,11 @@ class ModeratorMenu extends Component {
|
||||
/>
|
||||
</li>
|
||||
${displayMoreInfo &&
|
||||
html`<${ModeratorMoreInfoContainer} message=${message} handleBanUser=${this.handleBanUser} handleHideMessage=${this.handleHideMessage} />`}
|
||||
html`<${ModeratorMoreInfoContainer}
|
||||
message=${message}
|
||||
handleBanUser=${this.handleBanUser}
|
||||
handleHideMessage=${this.handleHideMessage}
|
||||
/>`}
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
@ -226,14 +230,13 @@ function ModeratorMenuItem({ icon, hoverIcon, label, onClick }) {
|
||||
}
|
||||
|
||||
// more details panel that display message, prev usernames, actions
|
||||
function ModeratorMoreInfoContainer({ message, handleHideMessage, handleBanUser }) {
|
||||
function ModeratorMoreInfoContainer({
|
||||
message,
|
||||
handleHideMessage,
|
||||
handleBanUser,
|
||||
}) {
|
||||
const { user, timestamp, body } = message;
|
||||
const {
|
||||
displayName,
|
||||
createdAt,
|
||||
previousNames,
|
||||
displayColor,
|
||||
} = user;
|
||||
const { displayName, createdAt, previousNames, displayColor } = user;
|
||||
const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR');
|
||||
|
||||
const authorTextColor = { color: textColorForHue(displayColor) };
|
||||
|
||||
@ -3,7 +3,10 @@ import htm from '/js/web_modules/htm.js';
|
||||
const html = htm.bind(h);
|
||||
|
||||
import { setLocalStorage } from '../../utils/helpers.js';
|
||||
import { KEY_USERNAME, KEY_CUSTOM_USERNAME_SET } from '../../utils/constants.js';
|
||||
import {
|
||||
KEY_USERNAME,
|
||||
KEY_CUSTOM_USERNAME_SET,
|
||||
} from '../../utils/constants.js';
|
||||
|
||||
export default class UsernameForm extends Component {
|
||||
constructor(props, context) {
|
||||
@ -38,11 +41,13 @@ export default class UsernameForm extends Component {
|
||||
}
|
||||
|
||||
handleKeydown(event) {
|
||||
if (event.keyCode === 13) { // enter
|
||||
this.handleUpdateUsername();
|
||||
} else if (event.keyCode === 27) { // esc
|
||||
this.handleHideForm();
|
||||
}
|
||||
if (event.keyCode === 13) {
|
||||
// enter
|
||||
this.handleUpdateUsername();
|
||||
} else if (event.keyCode === 27) {
|
||||
// esc
|
||||
this.handleHideForm();
|
||||
}
|
||||
}
|
||||
|
||||
handleUpdateUsername() {
|
||||
@ -72,7 +77,7 @@ export default class UsernameForm extends Component {
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const { username, isModerator } = props;
|
||||
@ -87,32 +92,60 @@ export default class UsernameForm extends Component {
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
html`
|
||||
<div id="user-info" class="whitespace-nowrap">
|
||||
<div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75" onClick=${this.handleDisplayForm}>
|
||||
<span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator && 'moderator-flag'}">${username}</span>
|
||||
</div>
|
||||
|
||||
<div id="user-info-change" class="flex flex-row flex-no-wrap p-1 items-center justify-end" style=${styles.form}>
|
||||
<input type="text"
|
||||
id="username-change-input"
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
|
||||
maxlength="60"
|
||||
placeholder="Update username"
|
||||
defaultValue=${username}
|
||||
onKeydown=${this.handleKeydown}
|
||||
onFocus=${this.handleFocus}
|
||||
onBlur=${this.handleBlur}
|
||||
ref=${this.textInput}
|
||||
/>
|
||||
<button id="button-update-username" onClick=${this.handleUpdateUsername} type="button" class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn">Update</button>
|
||||
|
||||
<button id="button-cancel-change" onClick=${this.handleHideForm} type="button" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50" title="cancel">X</button>
|
||||
</div>
|
||||
return html`
|
||||
<div id="user-info" class="whitespace-nowrap">
|
||||
<div
|
||||
id="user-info-display"
|
||||
style=${styles.info}
|
||||
title="Click to update user name"
|
||||
class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75"
|
||||
onClick=${this.handleDisplayForm}
|
||||
>
|
||||
<span
|
||||
id="username-display"
|
||||
class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
|
||||
'moderator-flag'}"
|
||||
>${username}</span
|
||||
>
|
||||
</div>
|
||||
`);
|
||||
|
||||
<div
|
||||
id="user-info-change"
|
||||
class="flex flex-row flex-no-wrap p-1 items-center justify-end"
|
||||
style=${styles.form}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="username-change-input"
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
|
||||
maxlength="60"
|
||||
placeholder="Update username"
|
||||
defaultValue=${username}
|
||||
onKeydown=${this.handleKeydown}
|
||||
onFocus=${this.handleFocus}
|
||||
onBlur=${this.handleBlur}
|
||||
ref=${this.textInput}
|
||||
/>
|
||||
<button
|
||||
id="button-update-username"
|
||||
onClick=${this.handleUpdateUsername}
|
||||
type="button"
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="button-cancel-change"
|
||||
onClick=${this.handleHideForm}
|
||||
type="button"
|
||||
class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50"
|
||||
title="cancel"
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -183,7 +183,6 @@ export function emojify(HTML, emojiList) {
|
||||
return HTML;
|
||||
}
|
||||
|
||||
|
||||
// MODERATOR UTILS
|
||||
export function checkIsModerator(message) {
|
||||
const { user } = message;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user