@wowlabtech/mini-app-adapter 0.2.1 → 0.2.3

package/dist/index.d.cts

@@ -56,6 +56,10 @@ interface MiniAppViewportInsets {
     safeArea: MiniAppSafeAreaInsets;
     contentSafeArea: MiniAppSafeAreaInsets;
 }
+interface MiniAppViewportState {
+    height: number;
+    stableHeight: number;
+}
 interface MiniAppInitOptions {
     /**
      * Enables verbose logs for platforms that support it.
@@ -170,6 +174,10 @@ interface MiniAppAdapter {
      * Requests fullscreen mode if supported by the platform.
      */
     requestFullscreen?(): void;
+    /**
+     * Subscribes to viewport size changes. Returns disposer.
+     */
+    onViewportChange?(callback: (state: MiniAppViewportState) => void): () => void;
     /**
      * Returns viewport safe area insets if supported by the platform.
      */
@@ -307,6 +315,10 @@ declare abstract class BaseMiniAppAdapter implements MiniAppAdapter {
     getLaunchParams(): unknown;
     decodeStartParam(_param: string): unknown;
     requestFullscreen(): void;
+    onViewportChange(callback: (state: {
+        height: number;
+        stableHeight: number;
+    }) => void): () => void;
     getViewportInsets(): MiniAppViewportInsets | undefined;
     shareMessage(_message: string): Promise<void>;
     shareUrl(_url: string, _text: string): void;
@@ -402,6 +414,10 @@ declare class TelegramMiniAppAdapter extends BaseMiniAppAdapter {
     decodeStartParam(param: string): unknown;
     requestFullscreen(): void;
     getViewportInsets(): MiniAppViewportInsets | undefined;
+    onViewportChange(callback: (state: {
+        height: number;
+        stableHeight: number;
+    }) => void): () => void;
     onAppearanceChange(callback: (appearance: 'dark' | 'light' | undefined) => void): () => void;
     setBackButtonVisibility(visible: boolean): void;
     enableVerticalSwipes(): void;
@@ -420,6 +436,8 @@ declare class TelegramMiniAppAdapter extends BaseMiniAppAdapter {
     private prepareViewport;
     private requestFullscreenInternal;
     private getViewportMountOptions;
+    private safeHeightFromSdk;
+    private stableHeightFromSdk;
     private notifyViewHide;
     private notifyViewRestore;
     protected onDestroy(): void;
@@ -536,4 +554,4 @@ declare function trackPixelEvent(event: string, payload?: Record<string, unknown
 
 declare function getPlatform(): MiniAppPlatform;
 
-export { AdapterProvider, BaseMiniAppAdapter, type CreateAdapterOptions, MaxMiniAppAdapter, type MiniAppAdapter, type MiniAppCapability, type MiniAppEnvironmentInfo, type MiniAppInitOptions, type MiniAppPlatform, type MiniAppPopupOptions, type MiniAppQrScanOptions, ShellMiniAppAdapter, TelegramMiniAppAdapter, VKMiniAppAdapter, WebMiniAppAdapter, configureVkPixel, createAdapter, createShellAPI, detectPlatform, getActiveAdapter, getPlatform, isShell, isShellAndroid, isShellIOS, readShellPlatform, requestShellPushPermission, shell, storeShellToken, trackConversionEvent, trackPixelEvent, useAdapterTheme, useMiniAppAdapter, useSafeArea };
+export { AdapterProvider, BaseMiniAppAdapter, type CreateAdapterOptions, MaxMiniAppAdapter, type MiniAppAdapter, type MiniAppCapability, type MiniAppEnvironmentInfo, type MiniAppInitOptions, type MiniAppPlatform, type MiniAppPopupOptions, type MiniAppQrScanOptions, type MiniAppViewportState, ShellMiniAppAdapter, TelegramMiniAppAdapter, VKMiniAppAdapter, WebMiniAppAdapter, configureVkPixel, createAdapter, createShellAPI, detectPlatform, getActiveAdapter, getPlatform, isShell, isShellAndroid, isShellIOS, readShellPlatform, requestShellPushPermission, shell, storeShellToken, trackConversionEvent, trackPixelEvent, useAdapterTheme, useMiniAppAdapter, useSafeArea };

package/dist/index.d.ts

@@ -56,6 +56,10 @@ interface MiniAppViewportInsets {
     safeArea: MiniAppSafeAreaInsets;
     contentSafeArea: MiniAppSafeAreaInsets;
 }
+interface MiniAppViewportState {
+    height: number;
+    stableHeight: number;
+}
 interface MiniAppInitOptions {
     /**
      * Enables verbose logs for platforms that support it.
@@ -170,6 +174,10 @@ interface MiniAppAdapter {
      * Requests fullscreen mode if supported by the platform.
      */
     requestFullscreen?(): void;
+    /**
+     * Subscribes to viewport size changes. Returns disposer.
+     */
+    onViewportChange?(callback: (state: MiniAppViewportState) => void): () => void;
     /**
      * Returns viewport safe area insets if supported by the platform.
      */
@@ -307,6 +315,10 @@ declare abstract class BaseMiniAppAdapter implements MiniAppAdapter {
     getLaunchParams(): unknown;
     decodeStartParam(_param: string): unknown;
     requestFullscreen(): void;
+    onViewportChange(callback: (state: {
+        height: number;
+        stableHeight: number;
+    }) => void): () => void;
     getViewportInsets(): MiniAppViewportInsets | undefined;
     shareMessage(_message: string): Promise<void>;
     shareUrl(_url: string, _text: string): void;
@@ -402,6 +414,10 @@ declare class TelegramMiniAppAdapter extends BaseMiniAppAdapter {
     decodeStartParam(param: string): unknown;
     requestFullscreen(): void;
     getViewportInsets(): MiniAppViewportInsets | undefined;
+    onViewportChange(callback: (state: {
+        height: number;
+        stableHeight: number;
+    }) => void): () => void;
     onAppearanceChange(callback: (appearance: 'dark' | 'light' | undefined) => void): () => void;
     setBackButtonVisibility(visible: boolean): void;
     enableVerticalSwipes(): void;
@@ -420,6 +436,8 @@ declare class TelegramMiniAppAdapter extends BaseMiniAppAdapter {
     private prepareViewport;
     private requestFullscreenInternal;
     private getViewportMountOptions;
+    private safeHeightFromSdk;
+    private stableHeightFromSdk;
     private notifyViewHide;
     private notifyViewRestore;
     protected onDestroy(): void;
@@ -536,4 +554,4 @@ declare function trackPixelEvent(event: string, payload?: Record<string, unknown
 
 declare function getPlatform(): MiniAppPlatform;
 
-export { AdapterProvider, BaseMiniAppAdapter, type CreateAdapterOptions, MaxMiniAppAdapter, type MiniAppAdapter, type MiniAppCapability, type MiniAppEnvironmentInfo, type MiniAppInitOptions, type MiniAppPlatform, type MiniAppPopupOptions, type MiniAppQrScanOptions, ShellMiniAppAdapter, TelegramMiniAppAdapter, VKMiniAppAdapter, WebMiniAppAdapter, configureVkPixel, createAdapter, createShellAPI, detectPlatform, getActiveAdapter, getPlatform, isShell, isShellAndroid, isShellIOS, readShellPlatform, requestShellPushPermission, shell, storeShellToken, trackConversionEvent, trackPixelEvent, useAdapterTheme, useMiniAppAdapter, useSafeArea };
+export { AdapterProvider, BaseMiniAppAdapter, type CreateAdapterOptions, MaxMiniAppAdapter, type MiniAppAdapter, type MiniAppCapability, type MiniAppEnvironmentInfo, type MiniAppInitOptions, type MiniAppPlatform, type MiniAppPopupOptions, type MiniAppQrScanOptions, type MiniAppViewportState, ShellMiniAppAdapter, TelegramMiniAppAdapter, VKMiniAppAdapter, WebMiniAppAdapter, configureVkPixel, createAdapter, createShellAPI, detectPlatform, getActiveAdapter, getPlatform, isShell, isShellAndroid, isShellIOS, readShellPlatform, requestShellPushPermission, shell, storeShellToken, trackConversionEvent, trackPixelEvent, useAdapterTheme, useMiniAppAdapter, useSafeArea };

package/dist/index.js

@@ -421,7 +421,7 @@ async function startHtml5Qrcode() {
   if (typeof document === "undefined") {
     throw new Error("QR scanning requires a browser environment.");
   }
-  const [{ Html5Qrcode: Html5Qrcode2 }] = await Promise.all([import("html5-qrcode")]);
+  const [{ Html5Qrcode }] = await Promise.all([import("html5-qrcode")]);
   return new Promise((resolve, reject) => {
     const elementId = `native-shell-qr-${Date.now()}`;
     const overlay = document.createElement("div");
@@ -458,7 +458,7 @@ async function startHtml5Qrcode() {
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     let disposed = false;
-    const scanner = new Html5Qrcode2(elementId);
+    const scanner = new Html5Qrcode(elementId);
     const cleanup = async (result, error) => {
       if (disposed) {
         return;
@@ -607,6 +607,27 @@ var BaseMiniAppAdapter = class {
   }
   requestFullscreen() {
   }
+  onViewportChange(callback) {
+    if (typeof window === "undefined") {
+      return () => {
+      };
+    }
+    const fallbackHeight = () => window.visualViewport?.height ?? window.innerHeight;
+    const notify = () => {
+      const height = fallbackHeight();
+      callback({ height, stableHeight: height });
+    };
+    notify();
+    const onResize = () => notify();
+    window.visualViewport?.addEventListener("resize", onResize);
+    window.visualViewport?.addEventListener("scroll", onResize);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.visualViewport?.removeEventListener("resize", onResize);
+      window.visualViewport?.removeEventListener("scroll", onResize);
+      window.removeEventListener("resize", onResize);
+    };
+  }
   getViewportInsets() {
     return void 0;
   }
@@ -1379,6 +1400,63 @@ var TelegramMiniAppAdapter = class extends BaseMiniAppAdapter {
       return void 0;
     }
   }
+  onViewportChange(callback) {
+    const disposers = [];
+    const fallbackHeight = () => typeof window !== "undefined" ? window.visualViewport?.height ?? window.innerHeight : 0;
+    const notify = (state) => {
+      const heightCandidate = state?.height ?? this.safeHeightFromSdk();
+      const stableCandidate = state?.stableHeight ?? this.stableHeightFromSdk();
+      const height = Number.isFinite(heightCandidate) ? heightCandidate : fallbackHeight();
+      const stableHeight = Number.isFinite(stableCandidate) && stableCandidate > 0 ? stableCandidate : height;
+      callback({ height, stableHeight });
+    };
+    const ensureMounted = async () => {
+      try {
+        await ensureViewportMounted(this.getViewportMountOptions());
+      } catch (error) {
+        console.warn("[tvm-app-adapter] ensureViewportMounted failed:", error);
+      }
+    };
+    void ensureMounted().finally(() => notify());
+    const { sdkViewport } = this.getViewportMountOptions();
+    if (typeof sdkViewport.on === "function") {
+      try {
+        const off2 = sdkViewport.on("change", (next) => notify(next));
+        if (typeof off2 === "function") {
+          disposers.push(off2);
+        }
+      } catch (error) {
+        console.warn("[tvm-app-adapter] viewport.on(change) subscription failed:", error);
+      }
+    }
+    try {
+      if (typeof sdkViewport.height?.sub === "function") {
+        disposers.push(sdkViewport.height.sub(() => notify()));
+      }
+      if (typeof sdkViewport.stableHeight?.sub === "function") {
+        disposers.push(sdkViewport.stableHeight.sub(() => notify()));
+      }
+    } catch (error) {
+      console.warn("[tvm-app-adapter] viewport signal subscriptions failed:", error);
+    }
+    if (typeof window !== "undefined") {
+      const onResize = () => notify();
+      window.visualViewport?.addEventListener("resize", onResize);
+      window.addEventListener("resize", onResize);
+      disposers.push(() => {
+        window.visualViewport?.removeEventListener("resize", onResize);
+        window.removeEventListener("resize", onResize);
+      });
+    }
+    return () => {
+      disposers.forEach((dispose) => {
+        try {
+          dispose();
+        } catch {
+        }
+      });
+    };
+  }
   onAppearanceChange(callback) {
     this.appearanceListeners.add(callback);
     callback(this.environment.appearance);
@@ -1609,6 +1687,26 @@ var TelegramMiniAppAdapter = class extends BaseMiniAppAdapter {
       }
     };
   }
+  safeHeightFromSdk() {
+    try {
+      if (typeof rawViewport.height === "function") {
+        return rawViewport.height();
+      }
+    } catch {
+      return void 0;
+    }
+    return void 0;
+  }
+  stableHeightFromSdk() {
+    try {
+      if (typeof rawViewport.stableHeight === "function") {
+        return rawViewport.stableHeight();
+      }
+    } catch {
+      return void 0;
+    }
+    return void 0;
+  }
   notifyViewHide() {
     for (const listener of this.viewHideListeners) {
       try {
@@ -2278,7 +2376,7 @@ var VKMiniAppAdapter = class extends BaseMiniAppAdapter {
 };
 
 // src/adapters/webAdapter.ts
-import { Html5Qrcode } from "html5-qrcode";
+import jsQR from "jsqr";
 var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
   constructor() {
     super("web", {
@@ -2348,14 +2446,31 @@ var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
       closeBtn.style.cursor = "pointer";
       closeBtn.style.zIndex = "9999999999";
       overlay.appendChild(closeBtn);
+      const scanSize = Math.min(Math.floor(Math.min(window.innerWidth, window.innerHeight) * 0.72), 320);
+      const scanBox = document.createElement("div");
+      scanBox.style.width = `${scanSize}px`;
+      scanBox.style.height = `${scanSize}px`;
+      scanBox.style.position = "relative";
+      scanBox.style.flex = "0 0 auto";
+      scanBox.style.borderRadius = "18px";
+      scanBox.style.overflow = "hidden";
+      overlay.appendChild(scanBox);
       const scanArea = document.createElement("div");
-      scanArea.id = "qr-reader";
-      scanArea.style.width = "300px";
-      scanArea.style.height = "300px";
-      scanArea.style.borderRadius = "18px";
-      scanArea.style.overflow = "hidden";
-      scanArea.style.position = "relative";
-      overlay.appendChild(scanArea);
+      scanArea.style.position = "absolute";
+      scanArea.style.inset = "0";
+      scanArea.style.zIndex = "1";
+      scanArea.style.background = "#000";
+      scanBox.appendChild(scanArea);
+      const video = document.createElement("video");
+      video.setAttribute("playsinline", "true");
+      video.autoplay = true;
+      video.muted = true;
+      video.style.width = "100%";
+      video.style.height = "100%";
+      video.style.objectFit = "cover";
+      video.style.position = "absolute";
+      video.style.inset = "0";
+      scanArea.appendChild(video);
       const frame = document.createElement("div");
       frame.style.position = "absolute";
       frame.style.top = "0";
@@ -2365,8 +2480,8 @@ var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
       frame.style.border = "3px solid rgba(255,255,255,0.9)";
       frame.style.borderRadius = "18px";
       frame.style.pointerEvents = "none";
-      frame.style.zIndex = "10";
-      scanArea.appendChild(frame);
+      frame.style.zIndex = "3";
+      scanBox.appendChild(frame);
       const line = document.createElement("div");
       line.style.position = "absolute";
       line.style.left = "0";
@@ -2375,8 +2490,8 @@ var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
       line.style.background = "rgba(255,255,255,0.85)";
       line.style.borderRadius = "2px";
       line.style.animation = "qr-line 2s infinite";
-      line.style.zIndex = "11";
-      scanArea.appendChild(line);
+      line.style.zIndex = "4";
+      scanBox.appendChild(line);
       const styleTag = document.createElement("style");
       styleTag.innerHTML = `
         @keyframes qr-line {
@@ -2393,17 +2508,26 @@ var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
       hint.style.fontSize = "17px";
       hint.style.opacity = "0.9";
       overlay.appendChild(hint);
-      const scanner = new Html5Qrcode("qr-reader");
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d", { willReadFrequently: true });
+      let stream = null;
+      let rafId = null;
+      let lastScanAt = 0;
       let closed = false;
       const finalize = async (result) => {
         if (closed) {
           return;
         }
         closed = true;
-        try {
-          await scanner.stop();
-        } catch {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+          rafId = null;
         }
+        if (stream) {
+          stream.getTracks().forEach((track) => track.stop());
+          stream = null;
+        }
+        video.srcObject = null;
         overlay.remove();
         styleTag.remove();
         document.body.style.overflow = prevOverflow;
@@ -2422,19 +2546,50 @@ var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
       };
       closeBtn.onclick = () => closeScanner(null);
       try {
-        await scanner.start(
-          { facingMode: "environment" },
-          {
-            fps: 10,
-            qrbox: { width: 250, height: 250 },
-            aspectRatio: 1
-          },
-          (decodedText) => {
-            closeScanner(decodedText);
-          },
-          () => {
+        const constraints = [
+          { video: { facingMode: { ideal: "environment" } }, audio: false },
+          { video: { facingMode: "environment" }, audio: false },
+          { video: true, audio: false }
+        ];
+        let lastError = null;
+        for (const constraint of constraints) {
+          try {
+            stream = await navigator.mediaDevices.getUserMedia(constraint);
+            break;
+          } catch (error) {
+            lastError = error;
           }
-        );
+        }
+        if (!stream) {
+          throw lastError instanceof Error ? lastError : new Error("Unable to access camera");
+        }
+        video.srcObject = stream;
+        await video.play();
+        const scanFrame = (now) => {
+          if (closed) {
+            return;
+          }
+          if (now - lastScanAt >= 100 && context && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            const width = video.videoWidth;
+            const height = video.videoHeight;
+            if (width > 0 && height > 0) {
+              canvas.width = width;
+              canvas.height = height;
+              context.drawImage(video, 0, 0, width, height);
+              const imageData = context.getImageData(0, 0, width, height);
+              const result = jsQR(imageData.data, width, height, {
+                inversionAttempts: "attemptBoth"
+              });
+              if (result?.data) {
+                closeScanner(result.data);
+                return;
+              }
+              lastScanAt = now;
+            }
+          }
+          rafId = requestAnimationFrame(scanFrame);
+        };
+        rafId = requestAnimationFrame(scanFrame);
       } catch (error) {
         console.error("QR Start error", error);
         closeScanner(null);
@@ -2487,6 +2642,8 @@ ${url}` : url;
 };
 
 // src/adapters/index.ts
+var CONFIRMED_PLATFORM_STORAGE_KEY = "mini-app-adapter:confirmed-platform";
+var CONFIRMED_PLATFORM_TTL_MS = 30 * 60 * 1e3;
 function detectPlatform() {
   if (typeof window === "undefined") {
     return "web";
@@ -2498,30 +2655,76 @@ function detectPlatform() {
   })();
   const getParam = (name) => searchParams.get(name) ?? hashParams.get(name);
   const hasParam = (...names) => names.some((name) => getParam(name));
+  const readConfirmedPlatform = () => {
+    try {
+      const raw = window.sessionStorage.getItem(CONFIRMED_PLATFORM_STORAGE_KEY);
+      if (!raw) {
+        return null;
+      }
+      const parsed = JSON.parse(raw);
+      if (!parsed?.platform || typeof parsed.ts !== "number") {
+        return null;
+      }
+      if (Date.now() - parsed.ts > CONFIRMED_PLATFORM_TTL_MS) {
+        return null;
+      }
+      return parsed.platform;
+    } catch {
+      return null;
+    }
+  };
+  const persistConfirmedPlatform = (platform) => {
+    if (platform === "web") {
+      return;
+    }
+    try {
+      window.sessionStorage.setItem(
+        CONFIRMED_PLATFORM_STORAGE_KEY,
+        JSON.stringify({ platform, ts: Date.now() })
+      );
+    } catch {
+    }
+  };
   const shellPlatform = readShellPlatform();
   if (shellPlatform) {
+    persistConfirmedPlatform(shellPlatform);
     return shellPlatform;
   }
   const userAgent = navigator.userAgent.toLowerCase();
   const hasNativeBridge = typeof window.NativeBridge?.postMessage === "function";
   if (hasNativeBridge) {
     if (userAgent.includes("android")) {
+      persistConfirmedPlatform("shell_android");
       return "shell_android";
     }
+    persistConfirmedPlatform("shell_ios");
     return "shell_ios";
   }
-  if (window.Telegram?.WebApp || hasParam("tgWebAppPlatform", "tgWebAppVersion", "tgWebAppData", "tgWebAppLanguage") || userAgent.includes("telegram")) {
+  const telegramGlobals = window;
+  const hasTelegramGlobal = Boolean(window.Telegram?.WebApp) || typeof telegramGlobals.TelegramWebviewProxy !== "undefined" || typeof telegramGlobals.TelegramGameProxy !== "undefined";
+  const hasTelegramParams = hasParam("tgWebAppPlatform", "tgWebAppVersion", "tgWebAppData", "tgWebAppLanguage");
+  if (hasTelegramGlobal || hasTelegramParams || userAgent.includes("telegram")) {
+    persistConfirmedPlatform("telegram");
     return "telegram";
   }
   if (window.WebApp) {
+    persistConfirmedPlatform("max");
     return "max";
   }
   if (window.MaxMiniApp) {
+    persistConfirmedPlatform("max");
     return "max";
   }
-  if (hasParam("vk_app_id", "vk_platform")) {
+  const hasVkParams = hasParam("vk_app_id", "vk_platform", "vk_user_id", "vk_language", "sign");
+  const hasVkUserAgentSignal = userAgent.includes("vkclient") || userAgent.includes("vk-android") || userAgent.includes("vkontakte");
+  if (hasVkParams || hasVkUserAgentSignal) {
+    persistConfirmedPlatform("vk");
     return "vk";
   }
+  const confirmedPlatform = readConfirmedPlatform();
+  if (confirmedPlatform && confirmedPlatform !== "web") {
+    return confirmedPlatform;
+  }
   return "web";
 }
 function createAdapter(input) {
@@ -2722,14 +2925,18 @@ var cachedPlatform = null;
 function getPlatform() {
   const adapter = getActiveAdapter();
   if (adapter) {
-    cachedPlatform = adapter.platform;
+    if (adapter.platform !== "web") {
+      cachedPlatform = adapter.platform;
+    }
     return adapter.platform;
   }
-  if (cachedPlatform) {
+  if (cachedPlatform && cachedPlatform !== "web") {
     return cachedPlatform;
   }
   const detectedPlatform = detectPlatform();
-  cachedPlatform = detectedPlatform;
+  if (detectedPlatform !== "web") {
+    cachedPlatform = detectedPlatform;
+  }
   return detectedPlatform;
 }