Mini Apps: Support fullscreen (#5230)
This commit is contained in:
Alexander Zinchuk
parent
9dca147164
commit
a992820d8a
@ -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({
|
||||
|
||||
@ -61,7 +61,7 @@ const MinimizedWebAppModal = ({
|
||||
});
|
||||
|
||||
const handleExpandClick = useLastCallback(() => {
|
||||
changeWebAppModalState();
|
||||
changeWebAppModalState({ state: 'maximized' });
|
||||
});
|
||||
|
||||
if (!isMinimizedState) return undefined;
|
||||
|
||||
@ -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;
|
||||
height: 2.5rem;
|
||||
max-width: 300px;
|
||||
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;
|
||||
|
||||
@ -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));
|
||||
}, [supportMultiTabMode, headerElement, containerElement]);
|
||||
setIsDraggingEnabled(Boolean(supportMultiTabMode && headerElement && containerElement && !isFullScreen));
|
||||
}, [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}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
} = useWebAppFrame(frameRef, isOpen, isSimple, handleEvent, webApp, markLoaded);
|
||||
reloadFrame, sendEvent, sendFullScreenChanged, sendViewport, sendSafeArea, sendTheme,
|
||||
} = 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));
|
||||
|
||||
@ -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,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -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> => {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -110,11 +110,9 @@ addActionHandler('closeWebAppModal', (global, actions, payload): ActionReturnTyp
|
||||
});
|
||||
|
||||
addActionHandler('changeWebAppModalState', (global, actions, payload): ActionReturnType => {
|
||||
const { tabId = getCurrentTabId() } = payload || {};
|
||||
const tabState = selectTabState(global, tabId);
|
||||
const { state, tabId = getCurrentTabId() } = payload;
|
||||
|
||||
const newModalState = tabState.webApps.modalState === 'maximized' ? 'minimized' : 'maximized';
|
||||
return replaceWebAppModalState(global, newModalState, tabId);
|
||||
return replaceWebAppModalState(global, state, tabId);
|
||||
});
|
||||
|
||||
addActionHandler('setWebAppPaymentSlug', (global, actions, payload): ActionReturnType => {
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;`,
|
||||
`top: ${elementCurrentPosition.y}px;`,
|
||||
`width: ${elementCurrentSize.width}px;`,
|
||||
`height: ${elementCurrentSize.height}px;`,
|
||||
`left: ${actualPosition.x}px;`,
|
||||
`top: ${actualPosition.y}px;`,
|
||||
!isFullscreen && `max-width: ${elementCurrentSize.width}px;`,
|
||||
!isFullscreen && `max-height: ${elementCurrentSize.height}px;`,
|
||||
'position: fixed;',
|
||||
(isDragging || isWindowsResizing) && 'transition: none !important;',
|
||||
cursorStyle,
|
||||
|
||||
@ -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) {
|
||||
video.addEventListener('webkitbeginfullscreen', listenerEnter, false);
|
||||
video.addEventListener('webkitendfullscreen', listenerExit, false);
|
||||
if (element) {
|
||||
element.addEventListener('webkitbeginfullscreen', listenerEnter, false);
|
||||
element.addEventListener('webkitendfullscreen', listenerExit, false);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('fullscreenchange', listener, false);
|
||||
document.removeEventListener('webkitfullscreenchange', listener, false);
|
||||
document.removeEventListener('mozfullscreenchange', listener, false);
|
||||
if (video) {
|
||||
video.removeEventListener('webkitbeginfullscreen', listenerEnter, false);
|
||||
video.removeEventListener('webkitendfullscreen', listenerExit, false);
|
||||
if (element) {
|
||||
element.removeEventListener('webkitbeginfullscreen', listenerEnter, 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) {
|
||||
if (video.requestFullscreen) {
|
||||
video.requestFullscreen();
|
||||
} else if (video.webkitRequestFullscreen) {
|
||||
video.webkitRequestFullscreen();
|
||||
} else if (video.webkitEnterFullscreen) {
|
||||
video.webkitEnterFullscreen();
|
||||
} else if (video.mozRequestFullScreen) {
|
||||
video.mozRequestFullScreen();
|
||||
export function safeRequestFullscreen(element: ElementType) {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
} else if (element.webkitEnterFullscreen) {
|
||||
element.webkitEnterFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}> |
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user