owncast/web/components/ui/Sidebar/Sidebar.tsx
t1enne d12712a107 Changed chat behaviour
added recoil value isMobile to determine which chat to display and
style. #1978

changed the player to actually span across the viewport without the
black borders around it.
2022-07-03 12:36:30 +02:00

34 lines
1.1 KiB
TypeScript

import Sider from 'antd/lib/layout/Sider';
import { useRecoilValue } from 'recoil';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatContainer, ChatTextField } from '../../chat';
import s from './Sidebar.module.scss';
import {
chatMessagesAtom,
appStateAtom,
chatDisplayNameAtom,
chatUserIdAtom,
} from '../../stores/ClientConfigStore';
import { AppStateOptions } from '../../stores/application-state';
export default function Sidebar() {
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
const appState = useRecoilValue<AppStateOptions>(appStateAtom);
const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
const chatUserId = useRecoilValue<string>(chatUserIdAtom);
return (
<Sider className={s.root} collapsedWidth={0} width={320}>
<ChatContainer
messages={messages}
loading={appState.chatLoading}
usernameToHighlight={chatDisplayName}
chatUserId={chatUserId}
isModerator={false}
isMobile={false}
/>
<ChatTextField />
</Sider>
);
}