Mini Apps: Support fullscreen (#5230)

src/api/gramjs/methods/bots.ts

@@ -194,6 +194,7 @@ export async function requestWebView({
   theme,
   sendAs,
   isFromBotMenu,
+  isFullscreen,
 }: {
   isSilent?: boolean;
   peer: ApiPeer;
@@ -204,6 +205,7 @@ export async function requestWebView({
   theme?: ApiThemeParameters;
   sendAs?: ApiPeer;
   isFromBotMenu?: boolean;
+  isFullscreen?: boolean;
 }) {
   const result = await invokeRequest(new GramJs.messages.RequestWebView({
     silent: isSilent || undefined,
@@ -215,6 +217,7 @@ export async function requestWebView({
     fromBotMenu: isFromBotMenu || undefined,
     platform: WEB_APP_PLATFORM,
     replyTo: replyInfo && buildInputReplyTo(replyInfo),
+    fullscreen: isFullscreen ? true : undefined,
     ...(sendAs && { sendAs: buildInputPeer(sendAs.id, sendAs.accessHash) }),
   }));
 
@@ -222,6 +225,7 @@ export async function requestWebView({
     return {
       url: result.url,
       queryId: result.queryId?.toString(),
+      isFullScreen: Boolean(result.fullscreen),
     };
   }
 
@@ -232,17 +236,20 @@ export async function requestMainWebView({
   peer,
   bot,
   startParam,
+  mode,
   theme,
 }: {
   peer: ApiPeer;
   bot: ApiUser;
   startParam?: string;
+  mode?: string;
   theme?: ApiThemeParameters;
 }) {
   const result = await invokeRequest(new GramJs.messages.RequestMainWebView({
     peer: buildInputPeer(peer.id, peer.accessHash),
     bot: buildInputPeer(bot.id, bot.accessHash),
     startParam,
+    fullscreen: mode === 'fullscreen' || undefined,
     themeParams: theme ? buildInputThemeParams(theme) : undefined,
     platform: WEB_APP_PLATFORM,
   }));
@@ -254,6 +261,7 @@ export async function requestMainWebView({
   return {
     url: result.url,
     queryId: result.queryId?.toString(),
+    isFullscreen: Boolean(result.fullscreen),
   };
 }
 
@@ -310,12 +318,14 @@ export async function requestAppWebView({
   peer,
   app,
   startParam,
+  mode,
   theme,
   isWriteAllowed,
 }: {
   peer: ApiPeer;
   app: ApiBotApp;
   startParam?: string;
+  mode?: string;
   theme?: ApiThemeParameters;
   isWriteAllowed?: boolean;
 }) {
@@ -326,9 +336,10 @@ export async function requestAppWebView({
     themeParams: theme ? buildInputThemeParams(theme) : undefined,
     platform: WEB_APP_PLATFORM,
     writeAllowed: isWriteAllowed || undefined,
+    fullscreen: mode === 'fullscreen' || undefined,
   }));
 
-  return result?.url;
+  return { url: result?.url, isFullscreen: Boolean(result?.fullscreen) };
 }
 
 export function prolongWebView({

src/components/modals/webApp/MinimizedWebAppModal.tsx

@@ -61,7 +61,7 @@ const MinimizedWebAppModal = ({
   });
 
   const handleExpandClick = useLastCallback(() => {
-    changeWebAppModalState();
+    changeWebAppModalState({ state: 'maximized' });
   });
 
   if (!isMinimizedState) return undefined;

src/components/modals/webApp/WebAppModal.module.scss

@@ -58,12 +58,21 @@
 .multi-tab {
   :global {
     .modal-dialog {
-      height: min(42.5rem, 85vh);
+      width: 100%;
+      height: 100%;
+      max-height: min(42.5rem, 85vh);
+
       max-width: 26.25rem;
       background-color: var(--color-web-app-browser);
       backdrop-filter: blur(1.5625rem);
-      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+
-      transition: height var(--state-transition), width var(--state-transition), transform 0.2s ease, opacity 0.2s ease;
+      /* stylelint-disable @stylistic/value-list-comma-newline-after */
+      /* stylelint-disable plugin/no-low-performance-animation-properties */
+      transition:
+         max-height var(--state-transition), max-width var(--state-transition),
+         left var(--state-transition), top var(--state-transition),
+         transform 0.2s ease, opacity 0.2s ease;
+
       box-shadow: var(--modal-shadow);
     }
 
@@ -105,13 +114,26 @@
   :global {
     .modal-dialog {
       cursor: grab !important;
-      width: 300px;
+      max-width: 300px;
-      height: 2.5rem;
+      max-height: 2.5rem;
       min-width: 0;
     }
   }
 }
 
+.fullScreen {
+  :global {
+    .modal-dialog {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 0;
+    }
+    .modal-content {
+      border-radius: 0;
+    }
+  }
+}
+
 .tabs {
   display: flex;
   align-items: center;

src/components/modals/webApp/WebAppModal.tsx

@@ -20,6 +20,7 @@ import buildClassName from '../../../util/buildClassName';
 import buildStyle from '../../../util/buildStyle';
 import { getColorLuma } from '../../../util/colors';
 import { hexToRgb } from '../../../util/switchTheme';
+import windowSize from '../../../util/windowSize';
 
 import useInterval from '../../../hooks/schedulers/useInterval';
 import useAppLayout from '../../../hooks/useAppLayout';
@@ -89,12 +90,16 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
   const minimizedStateSize = useMemo(() => {
     return { width: 300, height: 40 };
   }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [getFrameSize, setFrameSize] = useSignal(
     { width: maximizedStateSize.width, height: maximizedStateSize.height - minimizedStateSize.height },
   );
 
   function getSize() {
-    return modal?.modalState === 'maximized' ? maximizedStateSize : minimizedStateSize;
+    if (modal?.modalState === 'fullScreen') return windowSize.get();
+    if (modal?.modalState === 'maximized') return maximizedStateSize;
+    return minimizedStateSize;
   }
 
   const {
@@ -118,6 +123,8 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
   const { isMobile } = useAppLayout();
   const isOpen = modal?.isModalOpen || false;
   const isMaximizedState = modal?.modalState === 'maximized';
+  const isMinimizedState = modal?.modalState === 'minimized';
+  const isFullScreen = modal?.modalState === 'fullScreen';
 
   const supportMultiTabMode = !isMobile;
   // eslint-disable-next-line no-null/no-null
@@ -151,14 +158,24 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
   const containerElement = ref.current;
 
   useEffect(() => {
-    setIsDraggingEnabled(Boolean(supportMultiTabMode && headerElement && containerElement));
+    setIsDraggingEnabled(Boolean(supportMultiTabMode && headerElement && containerElement && !isFullScreen));
-  }, [supportMultiTabMode, headerElement, containerElement]);
+  }, [supportMultiTabMode, headerElement, containerElement, isFullScreen]);
+
+  useEffect(() => {
+    changeWebAppModalState({ state: 'maximized' });
+  }, [supportMultiTabMode]);
 
   const {
     isDragging,
     style: draggableStyle,
     size,
-  } = useDraggable(ref, headerRef, isDraggingEnabled, getSize());
+  } = useDraggable(
+    ref,
+    headerRef,
+    isDraggingEnabled,
+    getSize(),
+    isFullScreen,
+  );
 
   const currentSize = size || getSize();
 
@@ -170,7 +187,16 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
       const height = currentHeight - minimizedStateSize.height;
       setFrameSize({ width: currentWidth, height });
     }
-  }, [currentWidth, currentHeight, isMaximizedState, minimizedStateSize, setFrameSize]);
+    if (isFullScreen) {
+      setFrameSize({ width: window.innerWidth, height: window.innerHeight });
+    }
+  }, [currentWidth,
+    currentHeight,
+    isMaximizedState,
+    minimizedStateSize,
+    setFrameSize,
+    isFullScreen,
+    isMinimizedState]);
 
   const oldLang = useOldLang();
   const lang = useLang();
@@ -275,7 +301,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
   });
 
   const handleCollapseClick = useLastCallback(() => {
-    changeWebAppModalState();
+    changeWebAppModalState({ state: 'minimized' });
   });
 
   const handleOpenMoreAppsTabClick = useLastCallback(() => {
@@ -497,7 +523,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
 
   // eslint-disable-next-line no-null/no-null
   const containerRef = useRef<HTMLDivElement>(null);
-  useHorizontalScroll(containerRef, !isOpen || !isMaximizedState || !(containerRef.current));
+  useHorizontalScroll(containerRef, !isOpen || isMinimizedState || !(containerRef.current));
 
   function renderTabs() {
     return (
@@ -606,7 +632,8 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
       className={buildClassName(
         styles.root,
         supportMultiTabMode && styles.multiTab,
-        !isMaximizedState && styles.minimized,
+        isMinimizedState && styles.minimized,
+        isFullScreen && styles.fullScreen,
       )}
       dialogStyle={supportMultiTabMode ? draggableStyle : undefined}
       isOpen={isOpen}
@@ -617,6 +644,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
       noBackdrop
       noBackdropClose
     >
+      {isFullScreen && renderMoreMenu()}
       {openedWebApps && sessionKeys?.map((key) => (
         <WebAppModalTabContent
           key={key}
@@ -625,7 +653,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
           registerReloadFrameCallback={registerReloadFrameCallback}
           webApp={openedWebApps[key]}
           isDragging={isDragging}
-          frameSize={supportMultiTabMode ? getFrameSize() : undefined}
+          onContextMenuButtonClick={handleContextMenu}
           isMultiTabSupported={supportMultiTabMode}
         />
       ))}

src/components/modals/webApp/WebAppModalTabContent.module.scss

@@ -1,9 +1,12 @@
+@use "../../../styles/mixins";
+
 .root {
   height: 100%;
   width: 100%;
 }
 
 .multi-tab {
+  position: relative;
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -157,3 +160,124 @@
     padding-left: 2rem;
   }
 }
+
+.closeIcon {
+  --color-header-text: white;
+  position: relative;
+  transform: rotate(-45deg);
+
+  &,
+  &::before,
+  &::after {
+    width: 0.875rem;
+    height: 0.125rem;
+    border-radius: 0.125rem;
+    background-color: var(--color-header-text);
+    transition: var(--slide-transition) transform, var(--color-transition) background-color;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    content: "";
+  }
+
+  &::before {
+    transform: rotate(90deg);
+  }
+
+  &.state-back {
+    transform: rotate(180deg);
+
+    &::before {
+      transform: rotate(45deg) scaleX(0.75) translate(0, -0.3125rem);
+    }
+
+    &::after {
+      transform: rotate(-45deg) scaleX(0.75) translate(0, 0.3125rem);
+    }
+  }
+}
+
+.backIconContainer {
+  padding-right: 0.25rem;
+}
+
+.moreIcon {
+  transform: rotate(90deg);
+}
+
+.headerPanel {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 1rem;
+  padding-inline-end: calc(1rem + var(--scrollbar-width));
+  justify-content: space-between;
+}
+
+.icon {
+  font-size: 1.25rem;
+}
+
+.headerSplitButton {
+  display: flex;
+  flex-direction: row;
+}
+
+.headerButton {
+  height: 1.75rem;
+  width: fit-content;
+  font-size: 0.875rem;
+  font-weight: 500;
+  position: relative;
+  cursor: var(--custom-cursor, pointer);
+  flex-shrink: 0;
+  overflow: hidden;
+
+  outline: none !important;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  color: white;
+  border-radius: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(25px);
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  padding: 0.25rem;
+  padding-inline: 0.625rem;
+}
+
+.left {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.right {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.buttonCaptionContainer {
+  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+  transition: width 0.25s ease-in-out;
+  height: 100%;
+}
+
+.backButtonCaption {
+  width: fit-content;
+  max-width: 20rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

src/components/modals/webApp/WebAppModalTabContent.tsx

@@ -6,7 +6,7 @@ import React, {
 import { getActions, withGlobal } from '../../../global';
 
 import type { ApiAttachBot, ApiChat, ApiUser } from '../../../api/types';
-import type { TabState, WebApp } from '../../../global/types';
+import type { TabState, WebApp, WebAppModalStateType } from '../../../global/types';
 import type { ThemeKey } from '../../../types';
 import type { PopupOptions, WebAppInboundEvent, WebAppOutboundEvent } from '../../../types/webapp';
 
@@ -23,18 +23,22 @@ import { callApi } from '../../../api/gramjs';
 import { REM } from '../../common/helpers/mediaDimensions';
 import renderText from '../../common/helpers/renderText';
 
+import { getIsWebAppsFullscreenSupported } from '../../../hooks/useAppLayout';
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useFlag from '../../../hooks/useFlag';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 import useSyncEffect from '../../../hooks/useSyncEffect';
+import useFullscreen, { checkIfFullscreen } from '../../../hooks/window/useFullscreen';
 import usePopupLimit from './hooks/usePopupLimit';
 import useWebAppFrame from './hooks/useWebAppFrame';
 
+import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import ConfirmDialog from '../../ui/ConfirmDialog';
 import Modal from '../../ui/Modal';
 import Spinner from '../../ui/Spinner';
+import Transition from '../../ui/Transition';
 
 import styles from './WebAppModalTabContent.module.scss';
 
@@ -53,6 +57,7 @@ export type OwnProps = {
   webApp?: WebApp;
   registerSendEventCallback: (callback: (event: WebAppOutboundEvent) => void) => void;
   registerReloadFrameCallback: (callback: (url: string) => void) => void;
+  onContextMenuButtonClick: (e: React.MouseEvent) => void;
   isDragging?: boolean;
   frameSize?: { width: number; height: number };
   isMultiTabSupported? : boolean;
@@ -65,15 +70,17 @@ type StateProps = {
   theme?: ThemeKey;
   isPaymentModalOpen?: boolean;
   paymentStatus?: TabState['payment']['status'];
-  isMaximizedState: boolean;
+  modalState?: WebAppModalStateType;
 };
 
 const NBSP = '\u00A0';
 
 const MAIN_BUTTON_ANIMATION_TIME = 250;
 const ANIMATION_WAIT = 400;
+const COLLAPSING_WAIT = 350;
 const POPUP_SEQUENTIAL_LIMIT = 3;
 const POPUP_RESET_DELAY = 2000; // 2s
+const APP_NAME_DISPLAY_DURATION = 3800;
 const SANDBOX_ATTRIBUTES = [
   'allow-scripts',
   'allow-same-origin',
@@ -99,9 +106,10 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   registerSendEventCallback,
   registerReloadFrameCallback,
   isDragging,
-  isMaximizedState,
+  modalState,
   frameSize,
   isMultiTabSupported,
+  onContextMenuButtonClick,
 }) => {
   const {
     closeActiveWebApp,
@@ -113,6 +121,8 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
     sharePhoneWithBot,
     updateWebApp,
     resetPaymentStatus,
+    changeWebAppModalState,
+    closeWebAppModal,
   } = getActions();
   const [mainButton, setMainButton] = useState<WebAppButton | undefined>();
   const [secondaryButton, setSecondaryButton] = useState<WebAppButton | undefined>();
@@ -127,9 +137,35 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
     unlockPopupsAt, handlePopupOpened, handlePopupClosed,
   } = usePopupLimit(POPUP_SEQUENTIAL_LIMIT, POPUP_RESET_DELAY);
 
+  // eslint-disable-next-line no-null/no-null
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // eslint-disable-next-line no-null/no-null
+  const headerButtonRef = useRef<HTMLDivElement>(null);
+
+  // eslint-disable-next-line no-null/no-null
+  const headerButtonCaptionRef = useRef<HTMLDivElement>(null);
+
+  const isFullscreen = modalState === 'fullScreen';
+  const isMinimizedState = modalState === 'minimized';
+
+  const exitFullScreenCallback = useLastCallback(() => {
+    setTimeout(() => { changeWebAppModalState({ state: 'maximized' }); }, COLLAPSING_WAIT);
+  });
+
+  // eslint-disable-next-line no-null/no-null
+  const fullscreenElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    fullscreenElementRef.current = document.querySelector('#portals') as HTMLElement;
+  }, []);
+
+  const [, setFullscreen, exitFullscreen] = useFullscreen(fullscreenElementRef, exitFullScreenCallback);
+
   const activeWebApp = modal?.activeWebApp;
+  const activeWebAppName = activeWebApp?.appName;
   const {
-    url, buttonText, headerColor, serverHeaderColorKey, serverHeaderColor,
+    url, buttonText, headerColor, serverHeaderColorKey, serverHeaderColor, isBackButtonVisible,
   } = webApp || {};
   const isCloseModalOpen = Boolean(webApp?.isCloseModalOpen);
   const isRemoveModalOpen = Boolean(webApp?.isRemoveModalOpen);
@@ -158,8 +194,8 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   const isSimple = Boolean(buttonText);
 
   const {
-    reloadFrame, sendEvent, sendViewport, sendTheme,
+    reloadFrame, sendEvent, sendFullScreenChanged, sendViewport, sendSafeArea, sendTheme,
-  } = useWebAppFrame(frameRef, isOpen, isSimple, handleEvent, webApp, markLoaded);
+  } = useWebAppFrame(frameRef, isOpen, isFullscreen, isSimple, handleEvent, webApp, markLoaded);
 
   useEffect(() => {
     if (isActive) registerSendEventCallback(sendEvent);
@@ -248,6 +284,32 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
     }, ANIMATION_WAIT);
   }, [theme]);
 
+  const setFullscreenCallback = useLastCallback(() => {
+    if (!checkIfFullscreen() && isActive) {
+      setFullscreen?.();
+    }
+  });
+
+  const exitIfFullscreenCallback = useLastCallback(() => {
+    if (checkIfFullscreen() && isActive) {
+      exitFullscreen?.();
+    }
+  });
+
+  const sendFullScreenChangedCallback = useLastCallback(
+    (value: boolean) => { if (isActive) sendFullScreenChanged(value); },
+  );
+
+  useEffect(() => {
+    if (isFullscreen) {
+      setFullscreenCallback();
+      sendFullScreenChangedCallback(true);
+    } else {
+      exitIfFullscreenCallback();
+      sendFullScreenChangedCallback(false);
+    }
+  }, [isFullscreen]);
+
   useSyncEffect(([prevIsPaymentModalOpen]) => {
     if (isPaymentModalOpen === prevIsPaymentModalOpen) return;
     if (webApp?.slug && !isPaymentModalOpen && paymentStatus) {
@@ -377,6 +439,24 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
 
   function handleEvent(event: WebAppInboundEvent) {
     const { eventType, eventData } = event;
+
+    if (eventType === 'web_app_request_fullscreen') {
+      if (getIsWebAppsFullscreenSupported()) {
+        changeWebAppModalState({ state: 'fullScreen' });
+      } else {
+        sendEvent({
+          eventType: 'fullscreen_failed',
+          eventData: {
+            error: 'UNSUPPORTED',
+          },
+        });
+      }
+    }
+
+    if (eventType === 'web_app_exit_fullscreen') {
+      exitIfFullscreenCallback();
+    }
+
     if (eventType === 'web_app_open_tg_link') {
       const linkUrl = TME_LINK_PREFIX + eventData.path_full;
       openTelegramLink({ url: linkUrl, shouldIgnoreCache: eventData.force_request });
@@ -514,14 +594,19 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   const [shouldShowMainButton, setShouldShowMainButton] = useState(false);
   const [shouldShowSecondaryButton, setShouldShowSecondaryButton] = useState(false);
 
+  const [shouldShowAppNameInFullscreen, setShouldShowAppNameInFullscreen] = useState(false);
+
+  const [backButtonTextWidth, setBackButtonTextWidth] = useState(0);
+
   // Notify view that height changed
   useSyncEffect(() => {
     setTimeout(() => {
       sendViewport();
+      sendSafeArea();
     }, ANIMATION_WAIT);
   }, [shouldShowSecondaryButton, shouldHideSecondaryButton,
     shouldShowMainButton, shouldShowMainButton,
-    secondaryButton?.position, sendViewport]);
+    secondaryButton?.position, sendViewport, sendSafeArea]);
 
   const isVerticalLayout = secondaryButtonCurrentPosition === 'top' || secondaryButtonCurrentPosition === 'bottom';
   const isHorizontalLayout = !isVerticalLayout;
@@ -536,6 +621,35 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   const mainButtonFastTimeout = useRef<ReturnType<typeof setTimeout>>();
   const secondaryButtonChangeTimeout = useRef<ReturnType<typeof setTimeout>>();
   const secondaryButtonFastTimeout = useRef<ReturnType<typeof setTimeout>>();
+  const appNameDisplayTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    if (isFullscreen && isOpen && Boolean(activeWebAppName)) {
+      setShouldShowAppNameInFullscreen(true);
+
+      if (appNameDisplayTimeout.current) {
+        clearTimeout(appNameDisplayTimeout.current);
+      }
+
+      appNameDisplayTimeout.current = setTimeout(() => {
+        setShouldShowAppNameInFullscreen(false);
+        appNameDisplayTimeout.current = undefined;
+      }, APP_NAME_DISPLAY_DURATION);
+    } else {
+      setShouldShowAppNameInFullscreen(false);
+
+      if (appNameDisplayTimeout.current) {
+        clearTimeout(appNameDisplayTimeout.current);
+        appNameDisplayTimeout.current = undefined;
+      }
+    }
+
+    return () => {
+      if (appNameDisplayTimeout.current) {
+        clearTimeout(appNameDisplayTimeout.current);
+      }
+    };
+  }, [isFullscreen, isOpen, activeWebAppName]);
 
   useEffect(() => {
     if (mainButtonChangeTimeout.current) clearTimeout(mainButtonChangeTimeout.current);
@@ -590,30 +704,140 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   const frameWidth = frameSize?.width || 0;
   let frameHeight = frameSize?.height || 0;
   if (shouldDecreaseWebFrameSize) { frameHeight -= 4 * REM; }
-  const frameStyle = buildStyle(
+  const frameStyle = frameSize ? buildStyle(
     `left: ${0}px;`,
     `top: ${0}px;`,
     `width: ${frameWidth}px;`,
     `height: ${frameHeight}px;`,
     isDragging ? 'pointer-events: none;' : '',
+  ) : isDragging ? 'pointer-events: none;' : '';
+
+  const handleBackClick = useLastCallback(() => {
+    if (isBackButtonVisible) {
+      sendEvent({
+        eventType: 'back_button_pressed',
+      });
+    } else {
+      exitIfFullscreenCallback();
+      sendFullScreenChanged(false);
+      changeWebAppModalState({ state: 'maximized' });
+      closeWebAppModal();
+    }
+  });
+
+  const handleCollapseClick = useLastCallback(() => {
+    exitIfFullscreenCallback();
+  });
+
+  const handleShowContextMenu = useLastCallback((e: React.MouseEvent) => {
+    onContextMenuButtonClick(e);
+  });
+
+  const backIconClass = buildClassName(
+    styles.closeIcon,
+    isBackButtonVisible && styles.stateBack,
   );
+  const backButtonCaption = shouldShowAppNameInFullscreen ? activeWebAppName
+    : lang(isBackButtonVisible ? 'Back' : 'Close');
+
+  const hasHeaderElement = headerButtonCaptionRef?.current;
+
+  useEffect(() => {
+    const width = headerButtonCaptionRef?.current?.clientWidth || 0;
+    setBackButtonTextWidth(width);
+  }, [backButtonCaption, hasHeaderElement]);
+
+  function getBackButtonActiveKey() {
+    if (shouldShowAppNameInFullscreen) return 0;
+    return isBackButtonVisible ? 1 : 2;
+  }
+
+  function renderFullscreenBackButtonCaption() {
+    return (
+      <span
+        className={styles.buttonCaptionContainer}
+        style={
+          `width: ${backButtonTextWidth}px;`
+        }
+      >
+        <Transition
+          activeKey={getBackButtonActiveKey()}
+          name="slideFade"
+        >
+          <div
+            ref={headerButtonCaptionRef}
+            className={styles.backButtonCaption}
+          >
+            {backButtonCaption}
+          </div>
+        </Transition>
+      </span>
+    );
+  }
+
+  function renderFullscreenHeaderPanel() {
+    return (
+      <div className={styles.headerPanel}>
+        <div ref={headerButtonRef} className={styles.headerButton} onClick={handleBackClick}>
+          <div className={styles.backIconContainer}>
+            <div className={backIconClass} />
+          </div>
+          {renderFullscreenBackButtonCaption()}
+        </div>
+        <div className={styles.headerSplitButton}>
+          <div
+            className={buildClassName(
+              styles.headerButton,
+              styles.left,
+            )}
+          >
+            <Icon
+              name="down"
+              className={buildClassName(
+                styles.icon,
+                styles.collapseIcon,
+              )}
+              onClick={handleCollapseClick}
+            />
+          </div>
+          <div
+            className={buildClassName(
+              styles.headerButton,
+              styles.right,
+            )}
+          >
+            <Icon
+              name="more"
+              className={buildClassName(
+                styles.icon,
+                styles.moreIcon,
+              )}
+              onClick={handleShowContextMenu}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div
+      ref={containerRef}
       className={buildClassName(
         styles.root,
         !isActive && styles.hidden,
         isMultiTabSupported && styles.multiTab,
       )}
     >
-      {isMaximizedState && <Spinner className={buildClassName(styles.loadingSpinner, isLoaded && styles.hide)} />}
+      {isFullscreen && getIsWebAppsFullscreenSupported() && renderFullscreenHeaderPanel()}
+      {!isMinimizedState && <Spinner className={buildClassName(styles.loadingSpinner, isLoaded && styles.hide)} />}
       <iframe
         className={buildClassName(
           styles.frame,
           shouldDecreaseWebFrameSize && styles.withButton,
           !isLoaded && styles.hide,
         )}
-        style={frameSize ? frameStyle : undefined}
+        style={frameStyle}
         src={url}
         title={`${bot?.firstName} Web App`}
         sandbox={SANDBOX_ATTRIBUTES}
@@ -621,7 +845,7 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
         allowFullScreen
         ref={frameRef}
       />
-      {isMaximizedState && (
+      {!isMinimizedState && (
         <div
           style={`background-color: ${bottomBarColor};`}
           className={buildClassName(
@@ -739,7 +963,7 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
 export default memo(withGlobal<OwnProps>(
   (global, { modal }): StateProps => {
     const { botId: activeBotId } = modal?.activeWebApp || {};
-    const isMaximizedState = modal?.modalState === 'maximized';
+    const modalState = modal?.modalState;
 
     const attachBot = activeBotId ? global.attachMenu.bots[activeBotId] : undefined;
     const bot = activeBotId ? selectUser(global, activeBotId) : undefined;
@@ -757,7 +981,7 @@ export default memo(withGlobal<OwnProps>(
       theme,
       isPaymentModalOpen: isPaymentModalOpen || Boolean(starsInputInvoice),
       paymentStatus,
-      isMaximizedState,
+      modalState,
     };
   },
 )(WebAppModalTabContent));

src/components/modals/webApp/hooks/useWebAppFrame.ts

@@ -7,6 +7,7 @@ import type { WebAppInboundEvent, WebAppOutboundEvent } from '../../../../types/
 
 import { getWebAppKey } from '../../../../global/helpers';
 import { extractCurrentThemeParams } from '../../../../util/themeStyle';
+import { REM } from '../../../common/helpers/mediaDimensions';
 
 import useLastCallback from '../../../../hooks/useLastCallback';
 import useWindowSize from '../../../../hooks/window/useWindowSize';
@@ -32,10 +33,12 @@ const SCROLLBAR_STYLE = `* {
 }`;
 
 const RELOAD_TIMEOUT = 500;
+const SAFE_AREA_HEIGHT = 3.675 * REM;
 
 const useWebAppFrame = (
   ref: React.RefObject<HTMLIFrameElement>,
   isOpen: boolean,
+  isFullscreen: boolean,
   isSimpleView: boolean,
   onEvent: (event: WebAppInboundEvent) => void,
   webApp?: WebApp,
@@ -75,6 +78,15 @@ const useWebAppFrame = (
     ref.current.contentWindow.postMessage(JSON.stringify(event), '*');
   }, [ref]);
 
+  const sendFullScreenChanged = useCallback((value: boolean) => {
+    sendEvent({
+      eventType: 'fullscreen_changed',
+      eventData: {
+        is_fullscreen: value,
+      },
+    });
+  }, [sendEvent]);
+
   const forceReloadFrame = useLastCallback((url: string) => {
     if (!ref.current) return;
     const frame = ref.current;
@@ -114,6 +126,33 @@ const useWebAppFrame = (
     });
   }, [sendEvent, ref]);
 
+  const sendSafeArea = useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    const { height } = ref.current.getBoundingClientRect();
+    const safeAreaHeight = isFullscreen ? SAFE_AREA_HEIGHT : 0;
+    sendEvent({
+      eventType: 'safe_area_changed',
+      eventData: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: height - safeAreaHeight,
+      },
+    });
+
+    sendEvent({
+      eventType: 'content_safe_area_changed',
+      eventData: {
+        left: 0,
+        right: 0,
+        top: safeAreaHeight,
+        bottom: 0,
+      },
+    });
+  }, [sendEvent, isFullscreen, ref]);
+
   const sendTheme = useCallback(() => {
     sendEvent({
       eventType: 'theme_changed',
@@ -160,6 +199,14 @@ const useWebAppFrame = (
         sendViewport(windowSize.isResizing);
       }
 
+      if (eventType === 'web_app_request_safe_area') {
+        sendSafeArea();
+      }
+
+      if (eventType === 'web_app_request_content_safe_area') {
+        sendSafeArea();
+      }
+
       if (eventType === 'web_app_request_theme') {
         sendTheme();
       }
@@ -272,7 +319,8 @@ const useWebAppFrame = (
     }
   }, [
     isSimpleView, sendEvent, onEvent, sendCustomStyle, webApp,
-    sendTheme, sendViewport, onLoad, windowSize.isResizing, ref,
+    sendTheme, sendViewport, sendSafeArea, onLoad, windowSize.isResizing,
+    ref,
   ]);
 
   useEffect(() => {
@@ -281,7 +329,8 @@ const useWebAppFrame = (
       && lastFrameSizeRef.current.height === height && !lastFrameSizeRef.current.isResizing) return;
     lastFrameSizeRef.current = { width, height, isResizing };
     sendViewport(isResizing);
-  }, [sendViewport, windowSize]);
+    sendSafeArea();
+  }, [sendViewport, sendSafeArea, windowSize]);
 
   useEffect(() => {
     if (!webApp?.plannedEvents?.length) return;
@@ -306,14 +355,15 @@ const useWebAppFrame = (
   useEffect(() => {
     if (isOpen && ref.current?.contentWindow) {
       sendViewport();
+      sendSafeArea();
       ignoreEventsRef.current = false;
     } else {
       lastFrameSizeRef.current = undefined;
     }
-  }, [isOpen, sendViewport, ref]);
+  }, [isOpen, isFullscreen, sendViewport, sendSafeArea, ref]);
 
   return {
-    sendEvent, reloadFrame, sendViewport, sendTheme,
+    sendEvent, sendFullScreenChanged, reloadFrame, sendViewport, sendSafeArea, sendTheme,
   };
 };
 

src/global/actions/api/bots.ts

@@ -54,6 +54,8 @@ import {
 } from '../../selectors';
 import { fetchChatByUsername } from './chats';
 
+import { getIsWebAppsFullscreenSupported } from '../../../hooks/useAppLayout';
+
 const GAMEE_URL = 'https://prizes.gamee.com/';
 const TOP_PEERS_REQUEST_COOLDOWN = 60; // 1 min
 const runDebouncedForSearch = debounce((cb) => cb(), 500, false);
@@ -533,6 +535,7 @@ addActionHandler('requestSimpleWebView', async (global, actions, payload): Promi
   global = getGlobal();
   const newActiveApp: WebApp = {
     requestUrl: url,
+    appName: bot.firstName,
     url: webViewUrl,
     botId,
     buttonText,
@@ -543,7 +546,7 @@ addActionHandler('requestSimpleWebView', async (global, actions, payload): Promi
 
 addActionHandler('requestWebView', async (global, actions, payload): Promise<void> => {
   const {
-    url, botId, peerId, theme, isSilent, buttonText, isFromBotMenu, startParam,
+    url, botId, peerId, theme, isSilent, buttonText, isFromBotMenu, startParam, isFullscreen,
     tabId = getCurrentTabId(),
   } = payload;
 
@@ -586,17 +589,19 @@ addActionHandler('requestWebView', async (global, actions, payload): Promise<voi
     isFromBotMenu,
     startParam,
     sendAs,
+    isFullscreen,
   });
   if (!result) {
     return;
   }
 
-  const { url: webViewUrl, queryId } = result;
+  const { url: webViewUrl, queryId, isFullScreen } = result;
 
   global = getGlobal();
   const newActiveApp: WebApp = {
     requestUrl: url,
     url: webViewUrl,
+    appName: bot.firstName,
     botId,
     peerId,
     queryId,
@@ -605,11 +610,15 @@ addActionHandler('requestWebView', async (global, actions, payload): Promise<voi
   };
   global = addWebAppToOpenList(global, newActiveApp, true, true, tabId);
   setGlobal(global);
+
+  if (isFullScreen && getIsWebAppsFullscreenSupported()) {
+    actions.changeWebAppModalState({ state: 'fullScreen', tabId });
+  }
 });
 
 addActionHandler('requestMainWebView', async (global, actions, payload): Promise<void> => {
   const {
-    botId, peerId, theme, startParam, shouldMarkBotTrusted,
+    botId, peerId, theme, startParam, mode, shouldMarkBotTrusted,
     tabId = getCurrentTabId(),
   } = payload;
 
@@ -644,16 +653,18 @@ addActionHandler('requestMainWebView', async (global, actions, payload): Promise
     peer,
     theme,
     startParam,
+    mode,
   });
   if (!result) {
     return;
   }
 
-  const { url: webViewUrl, queryId } = result;
+  const { url: webViewUrl, queryId, isFullscreen } = result;
 
   global = getGlobal();
   const newActiveApp: WebApp = {
     url: webViewUrl,
+    appName: bot.firstName,
     botId,
     peerId,
     queryId,
@@ -661,6 +672,10 @@ addActionHandler('requestMainWebView', async (global, actions, payload): Promise
   };
   global = addWebAppToOpenList(global, newActiveApp, true, true, tabId);
   setGlobal(global);
+
+  if (isFullscreen && getIsWebAppsFullscreenSupported()) {
+    actions.changeWebAppModalState({ state: 'fullScreen', tabId });
+  }
 });
 
 addActionHandler('loadPreviewMedias', async (global, actions, payload): Promise<void> => {
@@ -722,7 +737,7 @@ addActionHandler('closeWebAppsCloseConfirmationModal', (global, actions, payload
 
 addActionHandler('requestAppWebView', async (global, actions, payload): Promise<void> => {
   const {
-    botId, appName, startApp, theme, isWriteAllowed, isFromConfirm, shouldSkipBotTrustRequest,
+    botId, appName, startApp, mode, theme, isWriteAllowed, isFromConfirm, shouldSkipBotTrustRequest,
     tabId = getCurrentTabId(),
   } = payload;
 
@@ -794,10 +809,11 @@ addActionHandler('requestAppWebView', async (global, actions, payload): Promise<
 
   const peer = selectCurrentChat(global, tabId);
 
-  const url = await callApi('requestAppWebView', {
+  const { url, isFullscreen } = await callApi('requestAppWebView', {
     peer: peer || bot,
     app: botApp,
     startParam: startApp,
+    mode,
     isWriteAllowed,
     theme,
   });
@@ -811,14 +827,17 @@ addActionHandler('requestAppWebView', async (global, actions, payload): Promise<
 
   const newActiveApp: WebApp = {
     url,
+    appName: appName && bot.firstName,
     peerId,
     botId,
-    appName,
     buttonText: '',
   };
   global = addWebAppToOpenList(global, newActiveApp, true, true, tabId);
-
   setGlobal(global);
+
+  if (isFullscreen && getIsWebAppsFullscreenSupported()) {
+    actions.changeWebAppModalState({ state: 'fullScreen', tabId });
+  }
 });
 
 addActionHandler('prolongWebView', async (global, actions, payload): Promise<void> => {

src/global/actions/api/chats.ts

@@ -1438,6 +1438,7 @@ addActionHandler('openTelegramLink', async (global, actions, payload): Promise<v
       startAttach: params.startattach,
       attach: params.attach,
       startApp: params.startapp,
+      mode: params.mode,
       originalParts: [part1, part2, part3],
       tabId,
     });
@@ -1491,7 +1492,7 @@ addActionHandler('acceptChatInvite', async (global, actions, payload): Promise<v
 
 addActionHandler('openChatByUsername', async (global, actions, payload): Promise<void> => {
   const {
-    username, messageId, commentId, startParam, startAttach, attach, threadId, originalParts, startApp,
+    username, messageId, commentId, startParam, startAttach, attach, threadId, originalParts, startApp, mode,
     text, onChatChanged, choose,
     tabId = getCurrentTabId(),
   } = payload;
@@ -1530,6 +1531,7 @@ addActionHandler('openChatByUsername', async (global, actions, payload): Promise
         peerId: chat.id,
         theme,
         tabId,
+        mode,
       });
       return;
     }
@@ -1579,6 +1581,7 @@ addActionHandler('openChatByUsername', async (global, actions, payload): Promise
       botId: chatByUsername.id,
       tabId,
       startApp,
+      mode,
       theme,
     });
     return;

src/global/actions/ui/bots.ts

@@ -110,11 +110,9 @@ addActionHandler('closeWebAppModal', (global, actions, payload): ActionReturnTyp
 });
 
 addActionHandler('changeWebAppModalState', (global, actions, payload): ActionReturnType => {
-  const { tabId = getCurrentTabId() } = payload || {};
+  const { state, tabId = getCurrentTabId() } = payload;
-  const tabState = selectTabState(global, tabId);
 
-  const newModalState = tabState.webApps.modalState === 'maximized' ? 'minimized' : 'maximized';
+  return replaceWebAppModalState(global, state, tabId);
-  return replaceWebAppModalState(global, newModalState, tabId);
 });
 
 addActionHandler('setWebAppPaymentSlug', (global, actions, payload): ActionReturnType => {

src/global/types.ts

@@ -149,7 +149,7 @@ export type MessageListType =
 
 export type ChatListType = 'active' | 'archived' | 'saved';
 
-export type WebAppModalStateType = 'maximized' | 'minimized';
+export type WebAppModalStateType = 'fullScreen' | 'maximized' | 'minimized';
 
 export interface MessageList {
   chatId: string;
@@ -1844,6 +1844,7 @@ export interface ActionPayloads {
     startAttach?: string;
     attach?: string;
     startApp?: string;
+    mode?: string;
     choose?: ApiChatType[];
     text?: string;
     originalParts?: (string | undefined)[];
@@ -3121,6 +3122,7 @@ export interface ActionPayloads {
     buttonText: string;
     isFromBotMenu?: boolean;
     startParam?: string;
+    isFullscreen?: boolean;
   } & WithTabId;
   updateWebApp: {
     key: string;
@@ -3131,6 +3133,7 @@ export interface ActionPayloads {
     peerId: string;
     theme?: ApiThemeParameters;
     startParam?: string;
+    mode?: string;
     shouldMarkBotTrusted?: boolean;
   } & WithTabId;
   prolongWebView: {
@@ -3155,6 +3158,7 @@ export interface ActionPayloads {
     appName: string;
     theme?: ApiThemeParameters;
     startApp?: string;
+    mode?: string;
     isWriteAllowed?: boolean;
     isFromConfirm?: boolean;
     shouldSkipBotTrustRequest?: boolean;
@@ -3279,7 +3283,9 @@ export interface ActionPayloads {
   closeWebAppModal: ({
     shouldSkipConfirmation?: boolean;
   } & WithTabId) | undefined;
-  changeWebAppModalState: WithTabId | undefined;
+  changeWebAppModalState: {
+    state: WebAppModalStateType;
+  } & WithTabId;
 
   // Misc
   refreshLangPackFromCache: {

src/hooks/useAppLayout.ts

@@ -29,6 +29,10 @@ export function getIsTablet() {
   return isTablet;
 }
 
+export function getIsWebAppsFullscreenSupported() {
+  return !getIsMobile();
+}
+
 function handleMediaQueryChange() {
   isMobile = mediaQueryCache.get('mobile')?.matches || false;
   isTablet = !isMobile && (mediaQueryCache.get('tablet')?.matches || false);

src/hooks/useDraggable.ts

@@ -1,5 +1,7 @@
 import type { RefObject } from 'react';
-import { useEffect, useSignal, useState } from '../lib/teact/teact';
+import {
+  useEffect, useSignal, useState,
+} from '../lib/teact/teact';
 
 import buildStyle from '../util/buildStyle';
 import { captureEvents } from '../util/captureEvents';
@@ -17,12 +19,14 @@ export interface Point {
 }
 
 let resizeTimeout: number | undefined;
+const FULLSCREEN_POSITION = { x: 0, y: 0 };
 
 export default function useDraggable(
   ref: RefObject<HTMLElement>,
   dragHandleElementRef: RefObject<HTMLElement>,
-  isEnabled: boolean = true,
+  isDragEnabled: boolean = true,
   originalSize: Size,
+  isFullscreen: boolean = false,
 ) {
   const [elementCurrentPosition, setElementCurrentPosition] = useState<Point | undefined>(undefined);
   const [elementCurrentSize, setElementCurrentSize] = useState<Size | undefined>(undefined);
@@ -48,6 +52,14 @@ export default function useDraggable(
     };
   }
 
+  const updateCurrentPosition = useLastCallback((position: Point) => {
+    if (!isFullscreen) setElementCurrentPosition({ x: position.x, y: position.y });
+  });
+
+  const getActualPosition = useLastCallback(() => {
+    return isFullscreen ? FULLSCREEN_POSITION : elementCurrentPosition;
+  });
+
   const getCenteredPosition = useLastCallback(() => {
     if (!elementCurrentSize) return undefined;
     const { width, height } = elementCurrentSize;
@@ -71,7 +83,7 @@ export default function useDraggable(
       const centeredPosition = getCenteredPosition();
       if (!centeredPosition) return;
 
-      setElementCurrentPosition({ x: centeredPosition.x, y: centeredPosition.y });
+      updateCurrentPosition(centeredPosition);
       setIsInitiated();
     }
   }, [elementCurrentSize, isInitiated, element]);
@@ -95,10 +107,10 @@ export default function useDraggable(
   });
 
   useEffect(() => {
-    if (!isEnabled) {
+    if (!isDragEnabled) {
       stopDragging();
     }
-  }, [isEnabled]);
+  }, [isDragEnabled]);
 
   const ensurePositionInVisibleArea = (x: number, y: number) => {
     const visibleArea = getVisibleArea();
@@ -121,10 +133,11 @@ export default function useDraggable(
   };
 
   const adjustPositionWithinBounds = useLastCallback(() => {
+    if (isFullscreen) return;
     const position = !wasElementShown ? getCenteredPosition() : elementCurrentPosition;
     if (!elementCurrentSize || !position) return;
     const newPosition = ensurePositionInVisibleArea(position.x, position.y);
-    setElementCurrentPosition(newPosition);
+    updateCurrentPosition(newPosition);
   });
 
   const ensureSizeInVisibleArea = useLastCallback((sizeForCheck: Size) => {
@@ -192,7 +205,7 @@ export default function useDraggable(
 
   useEffect(() => {
     let cleanup: NoneToVoidFunction | undefined;
-    if (dragHandleElement && isEnabled) {
+    if (dragHandleElement && isDragEnabled) {
       cleanup = captureEvents(dragHandleElement, {
         onCapture: handleStartDrag,
         onDrag: handleDrag,
@@ -202,11 +215,13 @@ export default function useDraggable(
       });
     }
     return cleanup;
-  }, [handleDrag, handleStartDrag, isEnabled, dragHandleElement]);
+  }, [handleDrag, handleStartDrag, isDragEnabled, dragHandleElement]);
 
   const cursorStyle = isDragging ? 'cursor: grabbing !important; ' : '';
 
-  if (!isInitiated || !elementCurrentSize || !elementCurrentPosition) {
+  const actualPosition = getActualPosition();
+
+  if (!isInitiated || !elementCurrentSize || !actualPosition) {
     return {
       isDragging: false,
       style: cursorStyle,
@@ -214,10 +229,10 @@ export default function useDraggable(
   }
 
   const style = buildStyle(
-    `left: ${elementCurrentPosition.x}px;`,
+    `left: ${actualPosition.x}px;`,
-    `top: ${elementCurrentPosition.y}px;`,
+    `top: ${actualPosition.y}px;`,
-    `width: ${elementCurrentSize.width}px;`,
+    !isFullscreen && `max-width: ${elementCurrentSize.width}px;`,
-    `height: ${elementCurrentSize.height}px;`,
+    !isFullscreen && `max-height: ${elementCurrentSize.height}px;`,
     'position: fixed;',
     (isDragging || isWindowsResizing) && 'transition: none !important;',
     cursorStyle,

src/hooks/window/useFullscreen.ts

@@ -4,8 +4,9 @@ import { ElectronEvent } from '../../types/electron';
 
 import { IS_IOS } from '../../util/windowEnvironment';
 
+type ElementType = HTMLElement;
 type RefType = {
-  current: HTMLVideoElement | null;
+  current: ElementType | null;
 };
 
 type ReturnType = [boolean, () => void, () => void] | [false];
@@ -13,11 +14,12 @@ type CallbackType = (isPlayed: boolean) => void;
 
 const prop = getBrowserFullscreenElementProp();
 
-export default function useFullscreen(elRef: RefType, setIsPlayed: CallbackType): ReturnType {
+export default function useFullscreen(elRef: RefType, exitCallback?: CallbackType,
+  enterCallback?: CallbackType): ReturnType {
   const [isFullscreen, setIsFullscreen] = useState(Boolean(prop && document[prop]));
 
   const setFullscreen = () => {
-    if (!elRef.current || !(prop || IS_IOS)) {
+    if (!elRef.current || !(prop || IS_IOS) || isFullscreen) {
       return;
     }
     safeRequestFullscreen(elRef.current);
@@ -33,35 +35,45 @@ export default function useFullscreen(elRef: RefType, setIsPlayed: CallbackType)
   };
 
   useLayoutEffect(() => {
-    const video = elRef.current;
+    const element = elRef.current;
     const listener = () => {
       const isEnabled = Boolean(prop && document[prop]);
       setIsFullscreen(isEnabled);
+      if (isEnabled) {
+        enterCallback?.(false);
+      } else {
+        exitCallback?.(false);
+      }
       // In Firefox fullscreen video controls are not visible by default, so we force them manually
-      video!.controls = isEnabled;
+      if (element instanceof HTMLVideoElement) element.controls = isEnabled;
     };
-    const listenerEnter = () => { setIsFullscreen(true); };
+
+    const listenerEnter = () => {
+      setIsFullscreen(true);
+      if (enterCallback) enterCallback(true);
+    };
+
     const listenerExit = () => {
       setIsFullscreen(false);
-      setIsPlayed(false);
+      if (exitCallback) exitCallback(false);
     };
 
     document.addEventListener('fullscreenchange', listener, false);
     document.addEventListener('webkitfullscreenchange', listener, false);
     document.addEventListener('mozfullscreenchange', listener, false);
 
-    if (video) {
+    if (element) {
-      video.addEventListener('webkitbeginfullscreen', listenerEnter, false);
+      element.addEventListener('webkitbeginfullscreen', listenerEnter, false);
-      video.addEventListener('webkitendfullscreen', listenerExit, false);
+      element.addEventListener('webkitendfullscreen', listenerExit, false);
     }
 
     return () => {
       document.removeEventListener('fullscreenchange', listener, false);
       document.removeEventListener('webkitfullscreenchange', listener, false);
       document.removeEventListener('mozfullscreenchange', listener, false);
-      if (video) {
+      if (element) {
-        video.removeEventListener('webkitbeginfullscreen', listenerEnter, false);
+        element.removeEventListener('webkitbeginfullscreen', listenerEnter, false);
-        video.removeEventListener('webkitendfullscreen', listenerExit, false);
+        element.removeEventListener('webkitendfullscreen', listenerExit, false);
       }
     };
     // eslint-disable-next-line
@@ -117,15 +129,15 @@ export function checkIfFullscreen() {
   return Boolean(fullscreenProp && document[fullscreenProp]);
 }
 
-export function safeRequestFullscreen(video: HTMLVideoElement) {
+export function safeRequestFullscreen(element: ElementType) {
-  if (video.requestFullscreen) {
+  if (element.requestFullscreen) {
-    video.requestFullscreen();
+    element.requestFullscreen();
-  } else if (video.webkitRequestFullscreen) {
+  } else if (element.webkitRequestFullscreen) {
-    video.webkitRequestFullscreen();
+    element.webkitRequestFullscreen();
-  } else if (video.webkitEnterFullscreen) {
+  } else if (element.webkitEnterFullscreen) {
-    video.webkitEnterFullscreen();
+    element.webkitEnterFullscreen();
-  } else if (video.mozRequestFullScreen) {
+  } else if (element.mozRequestFullScreen) {
-    video.mozRequestFullScreen();
+    element.mozRequestFullScreen();
   }
 }
 

src/types/webapp.ts

@@ -26,6 +26,13 @@ export type WebAppButtonOptions = {
   position?: 'left' | 'right' | 'top' | 'bottom';
 };
 
+export type SafeArea = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
 export type WebAppInboundEvent =
   WebAppEvent<'iframe_ready', {
     reload_supported?: boolean;
@@ -102,7 +109,10 @@ export type WebAppInboundEvent =
   WebAppEvent<'web_app_request_viewport' | 'web_app_request_theme' | 'web_app_ready' | 'web_app_expand'
   | 'web_app_request_phone' | 'web_app_close' | 'web_app_close_scan_qr_popup'
   | 'web_app_request_write_access' | 'web_app_request_phone' | 'iframe_will_reload'
-  | 'web_app_biometry_get_info' | 'web_app_biometry_open_settings', null>;
+  | 'web_app_biometry_get_info' | 'web_app_biometry_open_settings'
+  | 'web_app_request_fullscreen' | 'web_app_exit_fullscreen'
+  | 'web_app_request_safe_area' | 'web_app_request_content_safe_area',
+  null>;
 
 export type WebAppOutboundEvent =
   WebAppEvent<'viewport_changed', {
@@ -111,6 +121,8 @@ export type WebAppOutboundEvent =
     is_expanded?: boolean;
     is_state_stable?: boolean;
   }> |
+  WebAppEvent<'content_safe_area_changed', SafeArea> |
+  WebAppEvent<'safe_area_changed', SafeArea> |
   WebAppEvent<'theme_changed', {
     theme_params: {
       bg_color: string;
@@ -133,6 +145,12 @@ export type WebAppOutboundEvent =
   WebAppEvent<'popup_closed', {
     button_id?: string;
   }> |
+  WebAppEvent<'fullscreen_changed', {
+    is_fullscreen: boolean;
+  }> |
+  WebAppEvent<'fullscreen_failed', {
+    error: 'UNSUPPORTED' | string;
+  }> |
   WebAppEvent<'qr_text_received', {
     data: string;
   }> |

src/util/deepLinkParser.ts

@@ -61,6 +61,7 @@ interface PublicUsernameOrBotLink {
   username: string;
   start?: string;
   startApp?: string;
+  mode?: string;
   appName?: string;
   startAttach?: string;
   attach?: string;
@@ -201,6 +202,7 @@ function parseTgLink(url: URL) {
         text: queryParams.text,
         appName: queryParams.appname,
         startApp: queryParams.startapp,
+        mode: queryParams.mode,
         startAttach: queryParams.startattach,
         attach: queryParams.attach,
         choose: queryParams.choose,
@@ -293,6 +295,7 @@ function parseHttpLink(url: URL) {
         start: queryParams.start,
         text: queryParams.text,
         startApp: queryParams.startapp,
+        mode: queryParams.mode,
         appName: undefined,
         startAttach: queryParams.startattach,
         attach: queryParams.attach,
@@ -523,6 +526,7 @@ function buildPublicUsernameOrBotLink(
     start,
     text,
     startApp,
+    mode,
     startAttach,
     attach,
     appName,
@@ -539,6 +543,7 @@ function buildPublicUsernameOrBotLink(
     username,
     start,
     startApp,
+    mode,
     appName,
     startAttach,
     attach,

src/util/deeplink.ts

@@ -25,6 +25,7 @@ export const processDeepLink = (url: string): boolean => {
           startParam: parsedLink.start,
           text: parsedLink.text,
           startApp: parsedLink.startApp,
+          mode: parsedLink.mode,
           startAttach: parsedLink.startAttach,
           attach: parsedLink.attach,
           choose,
@@ -81,7 +82,7 @@ export const processDeepLink = (url: string): boolean => {
     case 'resolve': {
       const {
         domain, phone, post, comment, voicechat, livestream, start, startattach, attach, thread, topic,
-        appname, startapp, story, text,
+        appname, startapp, mode, story, text,
       } = params;
 
       const hasBoost = params.hasOwnProperty('boost');
@@ -92,6 +93,7 @@ export const processDeepLink = (url: string): boolean => {
           openChatByUsername({
             username: domain,
             startApp: startapp,
+            mode,
             originalParts: [domain, appname],
             text,
           });
@@ -117,6 +119,7 @@ export const processDeepLink = (url: string): boolean => {
             messageId: post ? Number(post) : undefined,
             commentId: comment ? Number(comment) : undefined,
             startParam: start,
+            mode,
             startAttach: startattach,
             attach,
             threadId,