From 9c635ae7e63d1991f2b03a63bc3743432672ccfc Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 11 Dec 2024 18:16:17 +0100
Subject: [PATCH] Mini Apps: Support  fullscreen button  and visibility_changed
 event (#5292)

---
 .../modals/webApp/WebAppModal.module.scss     |  4 +++
 src/components/modals/webApp/WebAppModal.tsx  | 18 +++++++++++++
 .../modals/webApp/WebAppModalTabContent.tsx   | 25 +++++++++++++++++++
 src/types/webapp.ts                           |  3 +++
 4 files changed, 50 insertions(+)

diff --git a/src/components/modals/webApp/WebAppModal.module.scss b/src/components/modals/webApp/WebAppModal.module.scss
index 30fea2142..33d9619cd 100644
--- a/src/components/modals/webApp/WebAppModal.module.scss
+++ b/src/components/modals/webApp/WebAppModal.module.scss
@@ -290,6 +290,10 @@
   height: 1.75rem !important;
 }
 
+.fullscreenButton {
+  margin-right: 0.5rem;
+}
+
 .tab-close-button {
   transition: opacity 0.25s ease-in-out;
   opacity: 0;
diff --git a/src/components/modals/webApp/WebAppModal.tsx b/src/components/modals/webApp/WebAppModal.tsx
index e7636c161..59fedec9d 100644
--- a/src/components/modals/webApp/WebAppModal.tsx
+++ b/src/components/modals/webApp/WebAppModal.tsx
@@ -306,6 +306,10 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
     changeWebAppModalState({ state: 'minimized' });
   });
 
+  const handleFullscreenClick = useLastCallback(() => {
+    changeWebAppModalState({ state: 'fullScreen' });
+  });
+
   const handleOpenMoreAppsTabClick = useLastCallback(() => {
     openMoreAppsTab();
   });
@@ -588,6 +592,20 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
         {renderTabs()}
         {renderMoreMenu()}
 
+        <Button
+          className={buildClassName(
+            styles.windowStateButton,
+            styles.fullscreenButton,
+            'no-drag',
+          )}
+          round
+          color="translucent"
+          size="tiny"
+          onClick={handleFullscreenClick}
+        >
+          <Icon className={styles.stateIcon} name="expand-modal" />
+        </Button>
+
         <Button
           className={buildClassName(
             styles.windowStateButton,
diff --git a/src/components/modals/webApp/WebAppModalTabContent.tsx b/src/components/modals/webApp/WebAppModalTabContent.tsx
index 345ce9437..edcd47635 100644
--- a/src/components/modals/webApp/WebAppModalTabContent.tsx
+++ b/src/components/modals/webApp/WebAppModalTabContent.tsx
@@ -30,6 +30,7 @@ import renderText from '../../common/helpers/renderText';
 
 import { getIsWebAppsFullscreenSupported } from '../../../hooks/useAppLayout';
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
+import useEffectWithPrevDeps from '../../../hooks/useEffectWithPrevDeps';
 import useFlag from '../../../hooks/useFlag';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
@@ -326,6 +327,30 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
     }
   }, [isFullscreen]);
 
+  const visibilityChangedCallBack = useLastCallback((visibility: boolean) => {
+    sendEvent({
+      eventType: 'visibility_changed',
+      eventData: {
+        is_visible: visibility,
+      },
+    });
+  });
+
+  useEffect(() => {
+    if (isLoaded) {
+      visibilityChangedCallBack(Boolean(isActive));
+    }
+  }, [isActive, isLoaded]);
+
+  useEffectWithPrevDeps(([prevModalState]) => {
+    if (modalState === 'minimized') {
+      visibilityChangedCallBack(false);
+    }
+    if (modalState && prevModalState === 'minimized') {
+      visibilityChangedCallBack(true);
+    }
+  }, [modalState]);
+
   useSyncEffect(([prevIsPaymentModalOpen]) => {
     if (isPaymentModalOpen === prevIsPaymentModalOpen) return;
     if (webApp?.slug && !isPaymentModalOpen && paymentStatus) {
diff --git a/src/types/webapp.ts b/src/types/webapp.ts
index 5627964ac..90ef41e30 100644
--- a/src/types/webapp.ts
+++ b/src/types/webapp.ts
@@ -152,6 +152,9 @@ export type WebAppOutboundEvent =
   WebAppEvent<'fullscreen_changed', {
     is_fullscreen: boolean;
   }> |
+  WebAppEvent<'visibility_changed', {
+    is_visible: boolean;
+  }> |
   WebAppEvent<'fullscreen_failed', {
     error: 'UNSUPPORTED' | string;
   }> |