// Copyright 2021-2022 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import type { ComponentProps } from 'react'; import React, { useEffect } from 'react'; import { Globals } from '@react-spring/web'; import classNames from 'classnames'; import type { ExecuteMenuRoleType } from './TitleBarContainer'; import type { MenuOptionsType, MenuActionType } from '../types/menu'; import type { ToastType } from '../state/ducks/toast'; import type { ViewStoryActionCreatorType } from '../state/ducks/stories'; import type { ReplacementValuesType } from '../types/Util'; import { ThemeType } from '../types/Util'; import { AppViewType } from '../state/ducks/app'; import { Inbox } from './Inbox'; import { SmartInstallScreen } from '../state/smart/InstallScreen'; import { StandaloneRegistration } from './StandaloneRegistration'; import { TitleBarContainer } from './TitleBarContainer'; import { ToastManager } from './ToastManager'; import { usePageVisibility } from '../hooks/usePageVisibility'; import { useReducedMotion } from '../hooks/useReducedMotion'; type PropsType = { appView: AppViewType; openInbox: () => void; registerSingleDevice: (number: string, code: string) => Promise; renderCallManager: () => JSX.Element; renderGlobalModalContainer: () => JSX.Element; isShowingStoriesView: boolean; renderStories: (closeView: () => unknown) => JSX.Element; hasSelectedStoryData: boolean; renderStoryViewer: (closeView: () => unknown) => JSX.Element; requestVerification: ( type: 'sms' | 'voice', number: string, token: string ) => Promise; theme: ThemeType; isMaximized: boolean; isFullScreen: boolean; menuOptions: MenuOptionsType; hasCustomTitleBar: boolean; hideMenuBar: boolean; executeMenuRole: ExecuteMenuRoleType; executeMenuAction: (action: MenuActionType) => void; titleBarDoubleClick: () => void; toast?: { toastType: ToastType; parameters?: ReplacementValuesType; }; hideToast: () => unknown; toggleStoriesView: () => unknown; viewStory: ViewStoryActionCreatorType; } & ComponentProps; export const App = ({ appView, executeMenuAction, executeMenuRole, hasInitialLoadCompleted, hasSelectedStoryData, hideMenuBar, hideToast, i18n, isCustomizingPreferredReactions, isFullScreen, isMaximized, isShowingStoriesView, hasCustomTitleBar, menuOptions, openInbox, registerSingleDevice, renderCallManager, renderCustomizingPreferredReactionsModal, renderGlobalModalContainer, renderLeftPane, renderStories, renderStoryViewer, requestVerification, selectedConversationId, selectedMessage, showConversation, showWhatsNewModal, theme, titleBarDoubleClick, toast, toggleStoriesView, viewStory, }: PropsType): JSX.Element => { let contents; if (appView === AppViewType.Installer) { contents = ; } else if (appView === AppViewType.Standalone) { const onComplete = () => { window.removeSetupMenuItems(); openInbox(); }; contents = ( ); } else if (appView === AppViewType.Inbox) { contents = ( ); } // This are here so that themes are properly applied to anything that is // created in a portal and exists outside of the container. useEffect(() => { document.body.classList.remove('light-theme'); document.body.classList.remove('dark-theme'); if (theme === ThemeType.dark) { document.body.classList.add('dark-theme'); } if (theme === ThemeType.light) { document.body.classList.add('light-theme'); } }, [theme]); const isPageVisible = usePageVisibility(); useEffect(() => { document.body.classList.toggle('page-is-visible', isPageVisible); }, [isPageVisible]); // A11y settings for react-spring const prefersReducedMotion = useReducedMotion(); useEffect(() => { Globals.assign({ skipAnimation: prefersReducedMotion, }); }, [prefersReducedMotion]); return (
{renderGlobalModalContainer()} {renderCallManager()} {isShowingStoriesView && renderStories(toggleStoriesView)} {hasSelectedStoryData && renderStoryViewer(() => viewStory({ closeViewer: true }))} {contents}
); };