2022-04-28 19:54:33 +03:00
|
|
|
import { useRecoilValue } from 'recoil';
|
2022-05-04 00:17:05 +03:00
|
|
|
import { Layout, Tabs, Layout, Row, Col, Tabs } from 'antd';
|
|
|
|
import Grid from 'antd/lib/card/Grid';
|
|
|
|
import {
|
|
|
|
chatVisibilityAtom,
|
|
|
|
clientConfigStateAtom,
|
|
|
|
chatMessagesAtom,
|
|
|
|
chatStateAtom,
|
|
|
|
} from '../../stores/ClientConfigStore';
|
2022-04-28 19:54:33 +03:00
|
|
|
import { ClientConfig } from '../../../interfaces/client-config.model';
|
2022-04-29 00:36:05 +03:00
|
|
|
import CustomPageContent from '../../CustomPageContent';
|
|
|
|
import OwncastPlayer from '../../video/OwncastPlayer';
|
|
|
|
import FollowerCollection from '../../FollowersCollection';
|
2022-05-04 00:55:13 +03:00
|
|
|
import s from './Content.module.scss';
|
|
|
|
import Sidebar from '../Sidebar';
|
|
|
|
import Footer from '../Footer';
|
2022-05-04 10:55:44 +03:00
|
|
|
import ChatContainer from '../../chat/ChatContainer';
|
|
|
|
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
|
|
|
import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
|
|
|
|
import ChatTextField from '../../chat/ChatTextField/ChatTextField';
|
2022-04-29 00:36:05 +03:00
|
|
|
|
|
|
|
const { TabPane } = Tabs;
|
2022-04-28 19:54:33 +03:00
|
|
|
|
|
|
|
const { Content } = Layout;
|
|
|
|
|
|
|
|
export default function FooterComponent() {
|
2022-05-03 03:45:22 +03:00
|
|
|
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
|
2022-05-04 00:55:13 +03:00
|
|
|
const chatOpen = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
|
2022-05-04 10:55:44 +03:00
|
|
|
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
|
|
|
|
const chatState = useRecoilValue<ChatState>(chatStateAtom);
|
|
|
|
|
2022-04-28 19:54:33 +03:00
|
|
|
const { extraPageContent } = clientConfig;
|
|
|
|
|
2022-05-04 00:17:05 +03:00
|
|
|
const followers: Follower[] = [];
|
|
|
|
|
|
|
|
const total = 0;
|
|
|
|
|
2022-04-28 19:54:33 +03:00
|
|
|
return (
|
2022-05-04 10:55:44 +03:00
|
|
|
<Content className={`${s.root}`} data-columns={chatOpen ? 2 : 1}>
|
|
|
|
<div className={`${s.leftCol}`}>
|
2022-05-04 00:55:13 +03:00
|
|
|
<OwncastPlayer source="https://watch.owncast.online" />
|
|
|
|
<div className={`${s.lowerRow}`}>
|
|
|
|
<Tabs defaultActiveKey="1" type="card">
|
|
|
|
<TabPane tab="About" key="1">
|
|
|
|
<CustomPageContent content={extraPageContent} />
|
|
|
|
</TabPane>
|
|
|
|
<TabPane tab="Followers" key="2">
|
2022-05-04 00:17:05 +03:00
|
|
|
<FollowerCollection total={total} followers={followers} />
|
2022-05-04 00:55:13 +03:00
|
|
|
</TabPane>
|
|
|
|
</Tabs>
|
2022-05-04 10:55:44 +03:00
|
|
|
{chatOpen && (
|
|
|
|
<div className={`${s.mobileChat}`}>
|
|
|
|
<ChatContainer messages={messages} state={chatState} />
|
|
|
|
<ChatTextField />
|
|
|
|
</div>
|
|
|
|
)}
|
2022-05-04 00:55:13 +03:00
|
|
|
<Footer />
|
|
|
|
</div>
|
2022-05-04 10:55:44 +03:00
|
|
|
</div>
|
|
|
|
{chatOpen && <Sidebar />}
|
2022-04-28 19:54:33 +03:00
|
|
|
</Content>
|
|
|
|
);
|
|
|
|
}
|