import React, { useContext, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import Head from 'next/head'; import { differenceInSeconds } from 'date-fns'; import { useRouter } from 'next/router'; import { Layout, Menu, Popover, Alert } from 'antd'; import { SettingOutlined, HomeOutlined, LineChartOutlined, ToolOutlined, PlayCircleFilled, MinusSquareFilled, QuestionCircleOutlined, MessageOutlined, ExperimentOutlined, } from '@ant-design/icons'; import classNames from 'classnames'; import { upgradeVersionAvailable } from '../utils/apis'; import { parseSecondsToDurationString } from '../utils/format'; import OwncastLogo from './logo'; import { ServerStatusContext } from '../utils/server-status-context'; import { AlertMessageContext } from '../utils/alert-message-context'; import TextFieldWithSubmit from './config/form-textfield-with-submit'; import { TEXTFIELD_PROPS_STREAM_TITLE } from '../utils/config-constants'; import { UpdateArgs } from '../types/config-section'; let performedUpgradeCheck = false; export default function MainLayout(props) { const { children } = props; const context = useContext(ServerStatusContext); const { serverConfig, online, broadcaster, versionNumber } = context || {}; const { instanceDetails } = serverConfig; const [currentStreamTitle, setCurrentStreamTitle] = useState(''); const alertMessage = useContext(AlertMessageContext); const router = useRouter(); const { route } = router || {}; const { Header, Footer, Content, Sider } = Layout; const { SubMenu } = Menu; const [upgradeVersion, setUpgradeVersion] = useState(null); const checkForUpgrade = async () => { try { const result = await upgradeVersionAvailable(versionNumber); setUpgradeVersion(result); } catch (error) { console.log('==== error', error); } }; useEffect(() => { if (!performedUpgradeCheck) { checkForUpgrade(); performedUpgradeCheck = true; } }); useEffect(() => { setCurrentStreamTitle(instanceDetails.streamTitle); }, [instanceDetails]); const handleStreamTitleChanged = ({ value }: UpdateArgs) => { setCurrentStreamTitle(value); }; const appClass = classNames({ 'app-container': true, online, }); const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none'; const upgradeVersionString = upgradeVersion || ''; const clearAlertMessage = () => { alertMessage.setMessage(null); }; const headerAlertMessage = alertMessage.message ? ( ) : null; // status indicator items const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : ''; const currentThumbnail = online ? ( current thumbnail ) : null; const statusIcon = online ? : ; const statusMessage = online ? `Online ${streamDurationString}` : 'Offline'; const statusIndicator = (
{statusMessage} {statusIcon}
); const statusIndicatorWithThumb = online ? ( {statusIndicator} ) : ( statusIndicator ); return ( Owncast Admin

Owncast Admin

}> Home } title="Current stream"> Viewers } title="Chat utilities"> Chat }> General Social Links Page Content Server Setup Video Configuration Storage } title="Utilities"> Hardware Logs Upgrade to v{upgradeVersionString} } title="Integrations"> Webhooks Access Tokens } title="Help"> Help
{statusIndicatorWithThumb}
{headerAlertMessage} {children}
); } MainLayout.propTypes = { children: PropTypes.element.isRequired, };