/* eslint-disable react/no-invalid-html-attribute */
/* eslint-disable react/no-danger */
/* eslint-disable react/no-unescaped-entities */
import { useRecoilValue } from 'recoil';
import Head from 'next/head';
import { FC, useEffect, useRef } from 'react';
import { Layout } from 'antd';
import dynamic from 'next/dynamic';
import Script from 'next/script';
import { ErrorBoundary } from 'react-error-boundary';
import { Footer } from '../../ui/Footer/Footer';
import {
ClientConfigStore,
isChatAvailableSelector,
clientConfigStateAtom,
fatalErrorStateAtom,
appStateAtom,
serverStatusState,
isMobileAtom,
ChatState,
chatStateAtom,
} from '../../stores/ClientConfigStore';
import { Content } from '../../ui/Content/Content';
import { Header } from '../../ui/Header/Header';
import { ClientConfig } from '../../../interfaces/client-config.model';
import { DisplayableError } from '../../../types/displayable-error';
import setupNoLinkReferrer from '../../../utils/no-link-referrer';
import { TitleNotifier } from '../../TitleNotifier/TitleNotifier';
import { ServerRenderedHydration } from '../../ServerRendered/ServerRenderedHydration';
import { Theme } from '../../theme/Theme';
import styles from './Main.module.scss';
import { PushNotificationServiceWorker } from '../../workers/PushNotificationServiceWorker/PushNotificationServiceWorker';
import { AppStateOptions } from '../../stores/application-state';
import { Noscript } from '../../ui/Noscript/Noscript';
import { ServerStatus } from '../../../interfaces/server-status.model';
import { DYNAMIC_PADDING_VALUE } from '../../../utils/constants';
// Lazy loaded components
const FatalErrorStateModal = dynamic(
() =>
import('../../modals/FatalErrorStateModal/FatalErrorStateModal').then(
mod => mod.FatalErrorStateModal,
),
{
ssr: false,
},
);
export const Main: FC = () => {
const clientConfig = useRecoilValue(clientConfigStateAtom);
const clientStatus = useRecoilValue(serverStatusState);
const { name } = clientConfig;
const isChatAvailable = useRecoilValue(isChatAvailableSelector);
const fatalError = useRecoilValue(fatalErrorStateAtom);
const appState = useRecoilValue(appStateAtom);
const isMobile = useRecoilValue(isMobileAtom);
const chatState = useRecoilValue(chatStateAtom);
const layoutRef = useRef(null);
const { chatDisabled } = clientConfig;
const { videoAvailable } = appState;
const { online, streamTitle } = clientStatus;
// accounts for sidebar width when online in desktop
const showChat = online && !chatDisabled && chatState === ChatState.VISIBLE;
const dynamicFooterPadding = showChat && !isMobile ? DYNAMIC_PADDING_VALUE : '';
useEffect(() => {
setupNoLinkReferrer(layoutRef.current);
}, []);
const isProduction = process.env.NODE_ENV === 'production';
const headerText = online ? streamTitle || name : name;
return (
<>
{isProduction && }
{isProduction ? (
{name ? {name} : {'{{.Name}}'}}
) : (
{name}
)}
(
)}
>
{fatalError && (
)}
);
};