/* 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 { ClientConfigStore, isChatAvailableSelector, clientConfigStateAtom, fatalErrorStateAtom, appStateAtom, serverStatusState, } 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'; const lockBodyStyle = ` body { overflow: hidden; } `; // 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, customStyles } = clientConfig; const isChatAvailable = useRecoilValue(isChatAvailableSelector); const fatalError = useRecoilValue(fatalErrorStateAtom); const appState = useRecoilValue(appStateAtom); const layoutRef = useRef(null); const { chatDisabled } = clientConfig; const { videoAvailable } = appState; const { online, streamTitle } = clientStatus; useEffect(() => { setupNoLinkReferrer(layoutRef.current); }, []); const isProduction = process.env.NODE_ENV === 'production'; const headerText = online ? streamTitle || name : name; return ( <> {isProduction && } {isProduction ? ( {name ? {name} : {'{{.Name}}'}} ) : ( {name} )}