feat(init): start listening to window resize event. Fix parser for vi…

…ewport_changed event
Telegram-Mini-Apps · Nov 9, 2022 · 6b84f01 · 6b84f01
1 parent 0badf96
commit 6b84f01
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 45 deletions.
diff --git a/packages/bridge/src/event-receiver/global.ts b/packages/bridge/src/event-receiver/global.ts
@@ -1,6 +1,7 @@
 import {EventEmitter, log} from 'twa-core';
 import {extractMessageEventData} from '../parsing';
 import {WindowGlobalEventEmitter} from './constants';
+import {ViewportChangedPayload} from '../events';
 
 export interface GlobalEventEmitterEventsMap {
   /**
@@ -47,7 +48,7 @@ export function getGlobalEventEmitter(debug = false): GlobalEventEmitter {
       if (event.source !== window.parent || typeof event.data !== 'string') {
         return logMessage('log', 'event rejected', event);
       }
-      evData = event.data
+      evData = event.data;
     } else if (event instanceof CustomEvent) {
       // In case, global receiveEvent function was installed, we could receive
       // event of CustomEvent type.
@@ -64,6 +65,20 @@ export function getGlobalEventEmitter(debug = false): GlobalEventEmitter {
     }
   });
 
+  // Desktop version of Telegram sometimes not sending viewport_changed
+  // event. For example, when main button is shown. That's why we should
+  // add out own listener to be sure, viewport information is always fresh.
+  // Issue: https://github.com/Telegram-Web-Apps/client-sdk/issues/8
+  window.addEventListener('resize', () => {
+    const payload: ViewportChangedPayload = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      is_state_stable: true,
+      is_expanded: true,
+    };
+    emitter.emit('message', 'viewport_changed', payload);
+  });
+
   wnd[WindowGlobalEventEmitter] = emitter;
   return emitter;
 }
diff --git a/packages/bridge/src/parsing.ts b/packages/bridge/src/parsing.ts
@@ -1,7 +1,7 @@
 import {
   createJsonStructParser, isRecord,
   JsonParser, parseJsonParamAsBool,
-  parseJsonParamAsNum,
+  parseJsonParamAsNum, parseJsonParamAsOptNum,
   parseJsonParamAsRecord, parseJsonParamAsString,
 } from 'twa-core';
 import {
@@ -12,21 +12,11 @@ import {
 } from './events';
 
 /**
- * `viewport_changed` event payload on web version of Telegram. To be removed,
- * when issue is closed.
- * Issue: https://github.com/Telegram-Web-Apps/client-sdk/issues/12
+ * Raw `viewport_changed` event payload.
  */
-interface WebViewportChangedPayload {
-  height: number;
-  width: number;
-  is_expanded: boolean;
-}
-
-/**
- * `viewport_changed` event payload on non-web version of Telegram.
- */
-interface NonWebViewportChangedPayload {
+interface ViewportChangedRawPayload {
   height: number;
+  width: number | null;
   is_expanded: boolean;
   is_state_stable: boolean;
 }
@@ -37,33 +27,21 @@ interface NonWebViewportChangedPayload {
  */
 const parseJsonParamAsPopupButtonId: JsonParser<string | null> = value => {
   return value === null || value === undefined
-  // TODO: Record is sent in web version of Telegram.
-  //  Issue: https://github.com/Telegram-Web-Apps/client-sdk/issues/4
-  || isRecord(value)
     ? null
     : parseJsonParamAsString(value);
 };
 
 /**
  * Parses incoming JSON value as ViewportChangedPayload.
  */
-const parseJsonParamAsNonWebViewportChangedPayload =
-  createJsonStructParser<NonWebViewportChangedPayload>({
+const parseJsonParamAsViewportChangedRawPayload =
+  createJsonStructParser<ViewportChangedRawPayload>({
     height: ['height', parseJsonParamAsNum],
+    width: ['width', parseJsonParamAsOptNum],
     is_state_stable: ['is_state_stable', parseJsonParamAsBool],
     is_expanded: ['is_expanded', parseJsonParamAsBool],
   });
 
-/**
- * Parses incoming JSON value as ViewportChangedPayload.
- */
-const parseJsonParamAsWebViewportChangedPayload =
-  createJsonStructParser<WebViewportChangedPayload>({
-    height: ['height', parseJsonParamAsNum],
-    width: ['width', parseJsonParamAsNum],
-    is_expanded: ['is_expanded', parseJsonParamAsBool],
-  });
-
 /**
  * Parses incoming value as ThemeChangedPayload.
  */
@@ -75,22 +53,12 @@ export const extractThemeChangedPayload = createJsonStructParser<ThemeChangedPay
  * Parses incoming value as ViewportChangedPayload.
  */
 export function extractViewportChangedPayload(data: unknown): ViewportChangedPayload {
-  try {
-    // Firstly, try to parse event payload as its web version.
-    const payload = parseJsonParamAsWebViewportChangedPayload(data);
-
-    // Property is_state_stable is not sent on Web version of Telegram. We
-    // pass it by ourselves to follow consistency between platforms.
-    return {...payload, is_state_stable: true};
-  } catch (e) {
-    // Otherwise, try to parse it as it is presented in desktop and mobile
-    // versions.
-    const payload = parseJsonParamAsNonWebViewportChangedPayload(data);
+  // Firstly, try to parse event payload as its web version.
+  const {width, ...rest} = parseJsonParamAsViewportChangedRawPayload(data);
 
-    // As long as non web version of Telegram is not sending width property,
-    // we pass it by ourselves to follow consistency between platforms.
-    return {...payload, width: window.innerWidth};
-  }
+  // Desktop and mobile versions of Telegram are not sending width property.
+  // TODO: Issue
+  return {...rest, width: width === null ? window.innerWidth : width};
 }
 
 /**