@everymatrix/casino-game-page 0.0.324 → 0.0.325

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-page",
-  "version": "0.0.324",
+  "version": "0.0.325",
   "main": "dist/casino-game-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8f6a948528dc53305c9e42402a1585f042f85917"
+  "gitHead": "78178d0c87241acca69756f2bd40ac66e48b7279"
 }

package/src/CasinoGamePage.svelte

@@ -77,6 +77,7 @@
   let showModal:string = 'false';
 
   let gameStyle = '';
+  let gameRationedHeight: number;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -269,6 +270,36 @@
       });
   }
 
+  const resizeIframeIfNotVisible = (): void => {
+    if (isFullscreen) return;
+
+    const resizeCallback = (entries, observer): void => {
+      const maxIntersectionRatio = 0.5;
+      const intersectionRatio = entries[0].intersectionRatio;
+
+      const gameFrameContainerHeight = parseInt(
+        getComputedStyle(gameFrameContainer).height
+      );
+
+      if (!gameRationedHeight)
+        gameRationedHeight =
+          gameFrameContainerHeight *
+          Math.max(intersectionRatio, maxIntersectionRatio);
+
+      gameFrameContainer.style.height = `${gameRationedHeight}px`;
+      gameInnerContainer.style.height = `${gameRationedHeight}px`;
+
+      observer.unobserve(gameFrameContainer);
+    };
+
+    const options = {
+      threshold: 0,
+    };
+
+    const observer = new IntersectionObserver(resizeCallback, options);
+    observer.observe(gameFrameContainer);
+  };
+
   const maximizeGameFrame = ():void => {
     modalFrameWidth = game.width;
     modalFrameHeight = game.height;
@@ -499,6 +530,7 @@
     let mH = isFullscreen || !isModal ? 'none' : (game.height ? `${(Math.floor(game.height) + 100)}px` : '720px');
 
     gameStyle = `width: ${w}; height: ${h}; max-width: ${mW}; max-height: ${mH}`;
+    resizeIframeIfNotVisible();
   }
 
   onMount(() => {