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 } 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 TextFieldWithSubmit from './config/form-textfield-with-submit';
import { TEXTFIELD_PROPS_STREAM_TITLE } from './config/constants';
import adminStyles from '../../styles/styles.module.scss';
let performedUpgradeCheck = false;
export default function MainLayout(props) {
const { children } = props;
const context = useContext(ServerStatusContext);
const { serverConfig, online, broadcaster, versionNumber, streamTitle } = context || {};
const { instanceDetails } = serverConfig;
const [currentStreamTitle, setCurrentStreamTitle] = useState(streamTitle);
const router = useRouter();
const { route } = router || {};
const { Header, Footer, Content, Sider } = Layout;
const { SubMenu } = Menu;
// status indicator items
const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
const currentThumbnail = online ? (
) : null;
const statusIcon = online ? : ;
const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
const statusIndicator = (
{statusMessage}
{statusIcon}
);
const statusIndicatorWithThumb = online ? (
{statusIndicator}
) : statusIndicator;
// ///////////////
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 && !context.disableUpgradeChecks) {
checkForUpgrade();
performedUpgradeCheck = true
}
});
useEffect(() => {
setCurrentStreamTitle(streamTitle);
}, [streamTitle]);
const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
setCurrentStreamTitle(value);
}
const appClass = classNames({
"owncast-layout": true,
[adminStyles.online]: online,
});
const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
const upgradeVersionString = upgradeVersion || '';
return (
Owncast Admin
{statusIndicatorWithThumb}
{children}
);
}
MainLayout.propTypes = {
children: PropTypes.element.isRequired,
};