ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web App Modal: Set custom background to <iframe>

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-07-06 13:52:06 +02:00
parent 2236f3de37
commit 9589e9ee29
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/modals/webApp/WebAppModalTabContent.tsx
View File

@ -1,15 +1,8 @@
import type { FC } from '../../../lib/teact/teact'; import type { FC } from '../../../lib/teact/teact';
import type React from '../../../lib/teact/teact'; import { memo, useEffect, useMemo, useRef, useState } from '../../../lib/teact/teact';
import {
memo, useEffect,
useMemo,
useRef, useState,
} from '../../../lib/teact/teact';
import { getActions, withGlobal } from '../../../global'; import { getActions, withGlobal } from '../../../global';
import type { import type { ApiAttachBot, ApiBotAppSettings, ApiUser } from '../../../api/types';
ApiAttachBot, ApiBotAppSettings, ApiUser,
} from '../../../api/types';
import type { TabState } from '../../../global/types'; import type { TabState } from '../../../global/types';
import type { BotAppPermissions, ThemeKey } from '../../../types'; import type { BotAppPermissions, ThemeKey } from '../../../types';
import type { import type {
@ -33,6 +26,7 @@ import {
} from '../../../global/selectors'; } from '../../../global/selectors';
import { getGeolocationStatus, IS_GEOLOCATION_SUPPORTED } from '../../../util/browser/windowEnvironment'; import { getGeolocationStatus, IS_GEOLOCATION_SUPPORTED } from '../../../util/browser/windowEnvironment';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import buildStyle from '../../../util/buildStyle.ts';
import download from '../../../util/download'; import download from '../../../util/download';
import { extractCurrentThemeParams, validateHexColor } from '../../../util/themeStyle'; import { extractCurrentThemeParams, validateHexColor } from '../../../util/themeStyle';
import { callApi } from '../../../api/gramjs'; import { callApi } from '../../../api/gramjs';
@ -189,7 +183,7 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
const [, setFullscreen, exitFullscreen] = useFullscreen(fullscreenElementRef, exitFullScreenCallback); const [, setFullscreen, exitFullscreen] = useFullscreen(fullscreenElementRef, exitFullScreenCallback);
const activeWebApp = modal?.activeWebAppKey ? modal.openedWebApps[modal.activeWebAppKey] : undefined; const activeWebApp = modal?.activeWebAppKey ? modal.openedWebApps[modal.activeWebAppKey] : undefined;
const activeWebAppName = activeWebApp?.appName; const { appName: activeWebAppName, backgroundColor } = activeWebApp || {};
const { const {
url, buttonText, isBackButtonVisible, url, buttonText, isBackButtonVisible,
} = webApp || {}; } = webApp || {};
@ -333,7 +327,9 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
}); });
const sendFullScreenChangedCallback = useLastCallback( const sendFullScreenChangedCallback = useLastCallback(
(value: boolean) => { if (isActive) sendFullScreenChanged(value); }, (value: boolean) => {
if (isActive) sendFullScreenChanged(value);
},
); );
useEffect(() => { useEffect(() => {
@ -897,7 +893,10 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
} }
}, [setShouldDecreaseWebFrameSize, shouldShowSecondaryButton, shouldShowMainButton]); }, [setShouldDecreaseWebFrameSize, shouldShowSecondaryButton, shouldShowMainButton]);
const frameStyle = isTransforming ? 'pointer-events: none;' : ''; const frameStyle = buildStyle(
`background-color: ${backgroundColor || 'var(--color-background)'}`,
isTransforming && 'pointer-events: none;',
);
const handleBackClick = useLastCallback(() => { const handleBackClick = useLastCallback(() => {
if (isBackButtonVisible) { if (isBackButtonVisible) {