@wowlabtech/mini-app-adapter 0.2.1 → 0.2.3

package/dist/index.cjs

@@ -479,7 +479,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");
@@ -516,7 +516,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;
@@ -665,6 +665,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;
   }
@@ -1406,6 +1427,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);
@@ -1636,6 +1714,26 @@ var TelegramMiniAppAdapter = class extends BaseMiniAppAdapter {
       }
     };
   }
+  safeHeightFromSdk() {
+    try {
+      if (typeof import_sdk.viewport.height === "function") {
+        return import_sdk.viewport.height();
+      }
+    } catch {
+      return void 0;
+    }
+    return void 0;
+  }
+  stableHeightFromSdk() {
+    try {
+      if (typeof import_sdk.viewport.stableHeight === "function") {
+        return import_sdk.viewport.stableHeight();
+      }
+    } catch {
+      return void 0;
+    }
+    return void 0;
+  }
   notifyViewHide() {
     for (const listener of this.viewHideListeners) {
       try {
@@ -2303,7 +2401,7 @@ var VKMiniAppAdapter = class extends BaseMiniAppAdapter {
 };
 
 // src/adapters/webAdapter.ts
-var import_html5_qrcode = require("html5-qrcode");
+var import_jsqr = __toESM(require("jsqr"), 1);
 var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
   constructor() {
     super("web", {
@@ -2373,14 +2471,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";
@@ -2390,8 +2505,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";
@@ -2400,8 +2515,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 {
@@ -2418,17 +2533,26 @@ var WebMiniAppAdapter = class extends BaseMiniAppAdapter {
       hint.style.fontSize = "17px";
       hint.style.opacity = "0.9";
       overlay.appendChild(hint);
-      const scanner = new import_html5_qrcode.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;
@@ -2447,19 +2571,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 = (0, import_jsqr.default)(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);
@@ -2512,6 +2667,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";
@@ -2523,30 +2680,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) {
@@ -2747,14 +2950,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;
 }