import { useRecoilState, useRecoilValue } from 'recoil';
import { Layout, Tabs, Spin } from 'antd';
import { FC, MutableRefObject, useEffect, useRef, useState } from 'react';
import cn from 'classnames';
import dynamic from 'next/dynamic';
import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
import {
clientConfigStateAtom,
chatMessagesAtom,
currentUserAtom,
isChatAvailableSelector,
isChatVisibleSelector,
appStateAtom,
isOnlineSelector,
isMobileAtom,
serverStatusState,
} from '../../stores/ClientConfigStore';
import { ClientConfig } from '../../../interfaces/client-config.model';
import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
import { OwncastPlayer } from '../../video/OwncastPlayer/OwncastPlayer';
import styles from './Content.module.scss';
import { Sidebar } from '../Sidebar/Sidebar';
import { Footer } from '../Footer/Footer';
import { ActionButtonRow } from '../../action-buttons/ActionButtonRow/ActionButtonRow';
import { ActionButton } from '../../action-buttons/ActionButton/ActionButton';
import { OfflineBanner } from '../OfflineBanner/OfflineBanner';
import { AppStateOptions } from '../../stores/application-state';
import { FollowButton } from '../../action-buttons/FollowButton';
import { NotifyButton } from '../../action-buttons/NotifyButton';
import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
import { ServerStatus } from '../../../interfaces/server-status.model';
import { Statusbar } from '../Statusbar/Statusbar';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { FollowerCollection } from '../followers/FollowerCollection/FollowerCollection';
import { ExternalAction } from '../../../interfaces/external-action';
import { Modal } from '../Modal/Modal';
import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
const { Content: AntContent } = Layout;
const BrowserNotifyModal = dynamic(() =>
import('../../modals/BrowserNotifyModal/BrowserNotifyModal').then(mod => mod.BrowserNotifyModal),
);
const NotifyReminderPopup = dynamic(() =>
import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
);
// We only need to load the chat container here if we're in mobile or narrow
// windows, so lazy loading it makes sense.
const ChatContainer = dynamic(() =>
import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
);
const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extraPageContent }) => {
const aboutTabContent = ;
const followersTabContent = ;
const items = [
{ label: 'About', key: '2', children: aboutTabContent },
{ label: 'Followers', key: '3', children: followersTabContent },
];
return (
<>
>
);
};
function useHeight(ref: MutableRefObject) {
const [contentH, setContentH] = useState(0);
const handleResize = () => {
if (!ref.current) return;
const fromTop = ref.current.getBoundingClientRect().top;
const { innerHeight } = window;
setContentH(innerHeight - fromTop);
};
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return contentH;
}
const MobileContent = ({
name,
streamTitle,
summary,
tags,
socialHandles,
extraPageContent,
messages,
currentUser,
showChat,
actions,
setExternalActionToDisplay,
}) => {
if (!currentUser) {
return null;
}
const mobileContentRef = useRef();
const { id, displayName } = currentUser;
const chatContent = showChat && (
);
const aboutTabContent = (
<>
>
);
const followersTabContent = ;
const items = [
showChat && { label: 'Chat', key: '0', children: chatContent },
{ label: 'About', key: '2', children: aboutTabContent },
{ label: 'Followers', key: '3', children: followersTabContent },
];
const height = `${useHeight(mobileContentRef)}px`;
const replacementTabBar = (props, DefaultTabBar) => (
);
return (
);
};
const ExternalModal = ({ externalActionToDisplay, setExternalActionToDisplay }) => {
const { title, description, url } = externalActionToDisplay;
return (
setExternalActionToDisplay(null)}
/>
);
};
export const Content: FC = () => {
const appState = useRecoilValue(appStateAtom);
const clientConfig = useRecoilValue(clientConfigStateAtom);
const isChatVisible = useRecoilValue(isChatVisibleSelector);
const isChatAvailable = useRecoilValue(isChatAvailableSelector);
const currentUser = useRecoilValue(currentUserAtom);
const [isMobile, setIsMobile] = useRecoilState(isMobileAtom);
const messages = useRecoilValue(chatMessagesAtom);
const online = useRecoilValue(isOnlineSelector);
const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } =
useRecoilValue(serverStatusState);
const {
extraPageContent,
version,
name,
summary,
socialHandles,
tags,
externalActions,
offlineMessage,
chatDisabled,
federation,
notifications,
} = clientConfig;
const [showNotifyReminder, setShowNotifyReminder] = useState(false);
const [showNotifyPopup, setShowNotifyPopup] = useState(false);
const { account: fediverseAccount } = federation;
const { browser: browserNotifications } = notifications;
const { enabled: browserNotificationsEnabled } = browserNotifications;
const [externalActionToDisplay, setExternalActionToDisplay] = useState(null);
const externalActionSelected = (action: ExternalAction) => {
const { openExternally, url } = action;
if (openExternally) {
window.open(url, '_blank');
} else {
setExternalActionToDisplay(action);
}
};
const externalActionButtons = externalActions.map(action => (
));
const incrementVisitCounter = () => {
let visits = parseInt(getLocalStorage(LOCAL_STORAGE_KEYS.userVisitCount), 10);
if (Number.isNaN(visits)) {
visits = 0;
}
setLocalStorage(LOCAL_STORAGE_KEYS.userVisitCount, visits + 1);
if (visits > 2 && !getLocalStorage(LOCAL_STORAGE_KEYS.hasDisplayedNotificationModal)) {
setShowNotifyReminder(true);
}
};
const disableNotifyReminderPopup = () => {
setShowNotifyPopup(false);
setShowNotifyReminder(false);
setLocalStorage(LOCAL_STORAGE_KEYS.hasDisplayedNotificationModal, true);
};
const checkIfMobile = () => {
const w = window.innerWidth;
if (isMobile === undefined) {
if (w <= 768) setIsMobile(true);
else setIsMobile(false);
}
if (!isMobile && w <= 768) setIsMobile(true);
if (isMobile && w > 768) setIsMobile(false);
};
useEffect(() => {
incrementVisitCounter();
checkIfMobile();
window.addEventListener('resize', checkIfMobile);
return () => {
window.removeEventListener('resize', checkIfMobile);
};
}, []);
const showChat = !chatDisabled && isChatAvailable && isChatVisible;
return (
<>
{online && }
{!online && !appState.appLoading && (
setShowNotifyPopup(true)}
/>
)}
{online && (
)}
{!isMobile && (
{externalActionButtons}
setShowNotifyPopup(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
setShowNotifyPopup(true)} />
)}
disableNotifyReminderPopup()}
handleCancel={() => disableNotifyReminderPopup()}
>
{isMobile ? (
) : (
)}
{showChat && !isMobile && }
{!isMobile && false &&
}
{externalActionToDisplay && (
)}
>
);
};
export default Content;