feat(playground/sdk) show enter / exit fullscreen buttons

Telegram-Mini-Apps · Dec 2, 2024 · a73fb5b · a73fb5b
1 parent b9f1443
commit a73fb5b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/playgrounds/react/src/components/Page.tsx b/playgrounds/react/src/components/Page.tsx
@@ -24,7 +24,7 @@ export function Page({children, back = true}: PropsWithChildren<{
   }, [back]);
 
   return <div style={{
-    paddingTop: contentInset.top,
+    paddingTop: inset.top + contentInset.top,
     paddingLeft: inset.left,
     paddingRight: inset.right,
   }}>

diff --git a/playgrounds/react/src/pages/ViewportParamsPage.tsx b/playgrounds/react/src/pages/ViewportParamsPage.tsx
@@ -1,9 +1,10 @@
 import {
+  hapticFeedback,
   useSignal,
   viewport
 } from '@telegram-apps/sdk-react';
 
-import {List} from '@telegram-apps/telegram-ui';
+import {Button, List} from '@telegram-apps/telegram-ui';
 import {FC, useEffect, useState} from 'react';
 
 import {DisplayData, DisplayDataRow} from '@/components/DisplayData/DisplayData.tsx';
@@ -49,8 +50,40 @@ export const ViewportParamsPage: FC = () => {
     setContentSafeAreaRows(getSafeAreaRows(contentInset));
   }, [contentInset]);
 
+  const requestFullscreen = () => {
+    hapticFeedback.impactOccurred("medium");
+    void viewport.requestFullscreen();
+  }
+
+  const exitFullscreen = () => {
+    hapticFeedback.impactOccurred("medium");
+    void viewport.exitFullscreen();
+  }
+
   return (
     <Page>
+      <div style={{
+        display: "flex",
+        padding: "1rem",
+        gap: "1rem",
+      }}>
+        <Button
+          mode="filled"
+          size="l"
+          onClick={requestFullscreen}
+          style={{flex: "1 1 0%"}}
+        >
+          Request fullscreen
+        </Button>
+        <Button
+          mode="filled"
+          size="l"
+          onClick={exitFullscreen}
+          style={{flex: "1 1 0%"}}
+        >
+          Exit fullscreen
+        </Button>
+      </div>
       <List>
         <DisplayData
           header={'App mode'}