mirror of
https://github.com/owncast/owncast.git
synced 2024-11-23 21:28:29 +03:00
69f217f758
* feat(mobile): refactor mobile chat into modal - Make page always scrollable - Move mobile chat into a standalone modal * fix(test): split out mobile browser test specs * fix(mobile): force chat button to render on top of footer * fix: some small updates from review * fix: hide/show hide chat menu option based on width * fix: chat button icon getting cut off * chore(tests): add browser tests for mobile chat modal * chore(tests): add story for ChatModal component * fix(test): quiet shellcheck * fix: remove unused import * fix(tests): silence storybook linting warning * fix(ui): reposition chat modal button icon with transform
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { Modal } from 'antd';
|
|
import { FC } from 'react';
|
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
|
|
import styles from './ChatModal.module.scss';
|
|
|
|
import { ComponentError } from '../../ui/ComponentError/ComponentError';
|
|
import { ChatContainer } from '../../chat/ChatContainer/ChatContainer';
|
|
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
|
import { CurrentUser } from '../../../interfaces/current-user';
|
|
import { UserDropdown } from '../../common/UserDropdown/UserDropdown';
|
|
|
|
export type ChatModalProps = {
|
|
messages: ChatMessage[];
|
|
currentUser: CurrentUser;
|
|
handleClose: () => void;
|
|
};
|
|
|
|
export const ChatModal: FC<ChatModalProps> = ({ messages, currentUser, handleClose }) => {
|
|
if (!currentUser) {
|
|
return null;
|
|
}
|
|
const { id, displayName, isModerator } = currentUser;
|
|
|
|
const modalBodyStyle = {
|
|
padding: '0px',
|
|
height: '55vh',
|
|
};
|
|
|
|
return (
|
|
<ErrorBoundary
|
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
fallbackRender={({ error, resetErrorBoundary }) => (
|
|
<ComponentError
|
|
componentName="ChatModal"
|
|
message={error.message}
|
|
retryFunction={resetErrorBoundary}
|
|
/>
|
|
)}
|
|
>
|
|
<Modal
|
|
open
|
|
centered
|
|
maskClosable={false}
|
|
footer={null}
|
|
title={<UserDropdown id="chat-modal-user-menu" showToggleChatOption={false} />}
|
|
maskStyle={{
|
|
zIndex: 700,
|
|
}}
|
|
className={styles.root}
|
|
bodyStyle={modalBodyStyle}
|
|
wrapClassName={styles.modalWrapper}
|
|
onCancel={handleClose}
|
|
>
|
|
<ChatContainer
|
|
messages={messages}
|
|
usernameToHighlight={displayName}
|
|
chatUserId={id}
|
|
isModerator={isModerator}
|
|
chatAvailable
|
|
focusInput={false}
|
|
/>
|
|
</Modal>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|