LogalDeveloper/owncast
0
Fork 0
Code Activity

Prettified Code!

Browse Source
This commit is contained in:
gabek
2021-11-03 02:28:19 +00:00
committed by GitHub Action
parent 9a91324456
commit f6015dfe50
5 changed files with 117 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
webroot/js/components/chat/chat-message-view.js
View File

@@ -42,11 +42,15 @@ export default class ChatMessageView extends Component {
render() { render() {
const { message, isModerator, accessToken } = this.props; const { message, isModerator, accessToken } = this.props;
const { user, timestamp } = message; const { user, timestamp } = message;
const { displayName, displayColor, createdAt, const {
displayName,
displayColor,
createdAt,
isModerator: isAuthorModerator, 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; const { formattedMessage } = this.state;
if (!formattedMessage) { if (!formattedMessage) {
@@ -67,7 +71,9 @@ export default class ChatMessageView extends Component {
: { backgroundColor: messageBubbleColorForHue(displayColor) }; : { backgroundColor: messageBubbleColorForHue(displayColor) };
const messageClassString = isSystemMessage 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 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` return html`
<div <div
@@ -78,12 +84,18 @@ export default class ChatMessageView extends Component {
<div class="message-content break-words w-full"> <div class="message-content break-words w-full">
<div <div
style=${authorTextColor} style=${authorTextColor}
class="message-author font-bold${isAuthorModerator ? ' moderator-flag' : ''}" class="message-author font-bold${isAuthorModerator
? ' moderator-flag'
: ''}"
title=${userMetadata} title=${userMetadata}
> >
${displayName} ${displayName}
</div> </div>
${isMessageModeratable && html`<${ModeratorActions} message=${message} accessToken=${accessToken} />`} ${isMessageModeratable &&
html`<${ModeratorActions}
message=${message}
accessToken=${accessToken}
/>`}
<div <div
class="message-text text-gray-300 font-normal overflow-y-hidden pt-2" class="message-text text-gray-300 font-normal overflow-y-hidden pt-2"
dangerouslySetInnerHTML=${{ __html: formattedMessage }} dangerouslySetInnerHTML=${{ __html: formattedMessage }}

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

@@ -10,9 +10,15 @@ import { checkIsModerator } from '../../utils/chat.js';
function SystemMessage(props) { function SystemMessage(props) {
const { contents } = props; const { contents } = props;
return html` return html`
<div class="message message-name-change flex items-center justify-start p-3"> <div
<div class="message-content flex flex-row items-center justify-center text-sm w-full"> class="message message-name-change flex items-center justify-start p-3"
<div class="text-white text-center opacity-50 overflow-hidden break-words"> >
<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} ${contents}
</div> </div>
</div> </div>
@@ -39,7 +45,8 @@ export default function Message(props) {
return html`<${SystemMessage} contents=${contents} />`; return html`<${SystemMessage} contents=${contents} />`;
} else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) { } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
const { displayName } = user; const { displayName } = user;
const contents = html`<span class="font-bold">${displayName}</span> joined the chat.`; const contents = html`<span class="font-bold">${displayName}</span> joined
the chat.`;
return html`<${SystemMessage} contents=${contents} />`; return html`<${SystemMessage} contents=${contents} />`;
} else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) { } else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) {
const contents = html`<span const contents = html`<span
@@ -50,7 +57,9 @@ export default function Message(props) {
// moderator message // moderator message
const isModerator = checkIsModerator(message); const isModerator = checkIsModerator(message);
if (isModerator) { if (isModerator) {
const contents = html`<span class="font-bold moderator-flag">You are now a moderator.</span>`; const contents = html`<span class="font-bold moderator-flag"
>You are now a moderator.</span
>`;
return html`<${SystemMessage} contents=${contents} />`; return html`<${SystemMessage} contents=${contents} />`;
} }
} else { } else {

23
webroot/js/components/chat/moderator-actions.js
View File

@@ -106,7 +106,7 @@ class ModeratorMenu extends Component {
} }
async handleHideMessage() { 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(); this.props.onDismiss();
return; return;
} }
@@ -134,7 +134,7 @@ class ModeratorMenu extends Component {
} }
async handleBanUser() { 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(); this.props.onDismiss();
return; return;
} }
@@ -196,7 +196,11 @@ class ModeratorMenu extends Component {
/> />
</li> </li>
${displayMoreInfo && ${displayMoreInfo &&
html`<${ModeratorMoreInfoContainer} message=${message} handleBanUser=${this.handleBanUser} handleHideMessage=${this.handleHideMessage} />`} html`<${ModeratorMoreInfoContainer}
message=${message}
handleBanUser=${this.handleBanUser}
handleHideMessage=${this.handleHideMessage}
/>`}
</ul> </ul>
`; `;
} }
@@ -226,14 +230,13 @@ function ModeratorMenuItem({ icon, hoverIcon, label, onClick }) {
} }
// more details panel that display message, prev usernames, actions // 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 { user, timestamp, body } = message;
const { const { displayName, createdAt, previousNames, displayColor } = user;
displayName,
createdAt,
previousNames,
displayColor,
} = user;
const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR'); const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR');
const authorTextColor = { color: textColorForHue(displayColor) }; const authorTextColor = { color: textColorForHue(displayColor) };

61
webroot/js/components/chat/username.js
View File

@@ -3,7 +3,10 @@ import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);
import { setLocalStorage } from '../../utils/helpers.js'; 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 { export default class UsernameForm extends Component {
constructor(props, context) { constructor(props, context) {
@@ -38,9 +41,11 @@ export default class UsernameForm extends Component {
} }
handleKeydown(event) { handleKeydown(event) {
if (event.keyCode === 13) { // enter if (event.keyCode === 13) {
// enter
this.handleUpdateUsername(); this.handleUpdateUsername();
} else if (event.keyCode === 27) { // esc } else if (event.keyCode === 27) {
// esc
this.handleHideForm(); this.handleHideForm();
} }
} }
@@ -87,17 +92,30 @@ export default class UsernameForm extends Component {
}, },
}; };
return html`
return (
html`
<div id="user-info" class="whitespace-nowrap"> <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}> <div
<span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator && 'moderator-flag'}">${username}</span> 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>
<div id="user-info-change" class="flex flex-row flex-no-wrap p-1 items-center justify-end" style=${styles.form}> <div
<input type="text" 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" 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" 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" maxlength="60"
@@ -108,11 +126,26 @@ export default class UsernameForm extends Component {
onBlur=${this.handleBlur} onBlur=${this.handleBlur}
ref=${this.textInput} 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-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> <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>
</div> </div>
`); `;
} }
} }

1
webroot/js/utils/chat.js
View File

@@ -183,7 +183,6 @@ export function emojify(HTML, emojiList) {
return HTML; return HTML;
} }
// MODERATOR UTILS // MODERATOR UTILS
export function checkIsModerator(message) { export function checkIsModerator(message) {
const { user } = message; const { user } = message;