@betarena/ad-engine 0.0.76 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.76",
+	"version": "0.1.0",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [

package/src/lib/Advert-Slide-Child.svelte

@@ -48,7 +48,6 @@
   import { storeSession } from './store/session.js';
 
   import iconClose from './assets/icon-close.svg';
-  import iconArrow from './assets/icon-external-link.svg';
   import { logger } from './utils/debug.js';
 
   import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0.js';
@@ -88,7 +87,7 @@
      * @example
      * => 10000 (10 seconds)
      */
-    timeoutForAdvertShow = 10000,
+    timeoutForAdvertShow = 0,
     /**
      * @description
      * 📝 number of `milliseconds` for advert close action show
@@ -232,132 +231,153 @@
     out:fly={{ y: 500, duration: 500 }}
     class:dark-theme={isDarkTheme}
   >
+    <div
+      style=
+      "
+        position: relative;
+        height: 280px;
+        width: auto;
+        margin: 20px 19.5px 0 19.5px;
+      "
+    >
 
-    <!--
-    ╭─────
-    │ ➤ (image) close
-    ╰─────
-    -->
-    {#if isAdvertCloseBtnShown}
-      <img
-        id='close'
-        src={iconClose}
-        alt='icon-close'
-        title='icon-close'
-        loading='lazy'
-        class=
-        "
-        cursor-pointer
-        "
-        on:click=
-        {
-          () =>
+      <!--
+      ╭─────
+      │ ➤ (image) close
+      ╰─────
+      -->
+      {#if isAdvertCloseBtnShown}
+        <img
+          id='close'
+          src={iconClose}
+          alt='icon-close'
+          title='icon-close'
+          loading='lazy'
+          class=
+          "
+          cursor-pointer
+          "
+          on:click=
           {
-            betarenaAdEngineStore.updateData
-            (
-              [
-                ['toggleAdShownState', undefined]
-              ]
-            );
-            document.body.classList.remove
-            (
-              'disable-scroll'
-            );
-            return;
+            () =>
+            {
+              betarenaAdEngineStore.updateData
+              (
+                [
+                  ['toggleAdShownState', undefined]
+                ]
+              );
+              document.body.classList.remove
+              (
+                'disable-scroll'
+              );
+              return;
+            }
           }
-        }
-      />
-    {/if}
+        />
+      {/if}
 
-    <!--
-    ╭─────
-    │ ➤ (image) banner image
-    ╰─────
-    -->
-    {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
-      <a
-        href={adData.data.video_link}
-        target="_blank"
-        rel=
-        "
-        noopener
-        noreferrer
-        "
-        on:click=
-        {
-          () =>
+      <!--
+      ╭─────
+      │ ➤ (image) banner image
+      ╰─────
+      -->
+      {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
+        <a
+          href={adData.data.video_link}
+          target="_blank"
+          rel=
+          "
+          noopener
+          noreferrer
+          "
+          on:click=
           {
-            new ServiceAdEngine
-            (
-              betarenaEndpoint
-            ).updateAdEngineClickCounter
-            (
-              {
-                query: {
-                  creativeId: adData.id
-                },
-                body: {}
-              }
-            );
-            return;
+            () =>
+            {
+              new ServiceAdEngine
+              (
+                betarenaEndpoint
+              ).updateAdEngineClickCounter
+              (
+                {
+                  query: {
+                    creativeId: adData.id
+                  },
+                  body: {}
+                }
+              );
+              return;
+            }
           }
-        }
-      >
-        <!--
-          <iframe
+        >
+          <!--
+            <iframe
+              width=250
+              height=250
+              src={adData.data?.media}
+            />
+          -->
+          <video
+            id="banner"
             width=250
             height=250
-            src={adData.data?.media}
+            src={adData.data.media}
+            autoplay={true}
+            muted={true}
+            playsinline={true}
+            loop={true}
           />
+        </a>
+
+      {:else if adData.type == 3 && adData.data?.code}
+
+        <!--
+        sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
+        referrerpolicy="no-referrer-when-downgrade"
         -->
-        <video
-          id="banner"
-          width=250
-          height=250
-          src={adData.data.media}
-          autoplay={true}
-          muted={true}
-          playsinline={true}
-          loop={true}
-        />
-      </a>
 
-    {:else if adData.type == 3 && adData.data?.code}
 
-      <!--
-      sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
-      referrerpolicy="no-referrer-when-downgrade"
-      -->
+          <iframe
+            title="ad"
+            srcdoc='
+              <!doctype html>
+              <html
+                style=
+                "
+                  overflow: scroll;
+                  overflow-x: hidden;
+                  height: 280px;
+                  width: 336px;
+                "
+              >
+                <head>
+                  <meta charset="utf-8">
+                </head>
+                <body
+                  style=
+                  "
+                    margin:0;
+                  "
+                >
+                  {adData.data.code}
+                </body>
+              </html>
+            '
+          />
+
+      {:else if (adData.type == 2)}
+        <img
+          id='banner'
+          src={adData.data?.media}
+          alt=''
+          title=''
+          loading='lazy'
+        />
+
+      {/if}
 
-      <iframe
-        title="ad"
-        width=300
-        height=250
-        srcdoc='
-          <!doctype html>
-          <html>
-            <head>
-              <meta charset="utf-8">
-            </head>
-            <body
-              style="margin:0"
-            >
-              {adData.data.code}
-            </body>
-          </html>
-        '
-      />
-
-    {:else if (adData.type == 2)}
-      <img
-        id='banner'
-        src={adData.data?.media}
-        alt=''
-        title=''
-        loading='lazy'
-      />
-
-    {/if}
+    </div>
 
     <!--
     ╭─────
@@ -377,11 +397,12 @@
         id="title"
         class=
         "
-        s-20
-        w-600
+        s-18
+        w-700
         m-0
         m-b-20
         text-center
+        color-white
         "
       >
         {@html adData.data?.title}
@@ -400,6 +421,10 @@
         noopener
         noreferrer
         "
+        style=
+        "
+        justify-content: center;
+        "
         on:click=
         {
           () =>
@@ -421,29 +446,22 @@
         }
       >
         <button
+          class=
+          "
+          btn-primary
+          "
         >
           <span
             class=
             "
-            s-18
+            s-16
             w-500
+            color-dark-theme-1-7-shade
+            uppercase
             "
           >
             {adData.data?.cta_title ?? 'Recieve Bonus'}
           </span>
-          <img
-            id=''
-            src={iconArrow}
-            alt='icon-arrow'
-            title='icon-arrow'
-            loading='lazy'
-            class=
-            "
-            m-l-10
-            "
-            width="12"
-            height="12"
-          />
         </button>
       </a>
 
@@ -480,17 +498,25 @@
     left: 0;
     /* 🎨 style */
     overflow: hidden;
-    border-radius: 40px 40px 0px 0px;
-    background-color: var(--white);
+    border-radius: 20px 20px 0px 0px;
+    background-color: #232323;
 
     @mixin banner
     {
       /* 🎨 style */
-      max-height: 355px;
-      min-height: 355px;
-      width: 100%;
-      background-color: black;
+      min-height: unset;
+      max-height: unset;
+      height: 280px;
+      border: none;
+      width: 336px;
       object-fit: cover;
+
+      /* 📌 position */
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin: 0;
     }
 
     img
@@ -526,7 +552,7 @@
     div#main-box
     {
       /* 🎨 style */
-      padding: 20px 20px 35px 20px;
+      padding: 20px 12.5px 60px 12.5px;
 
       p
       {
@@ -540,13 +566,13 @@
       button
       {
         /* 🎨 style */
-        border-radius: 7.57px;
-        max-height: 50px;
-        min-height: 50px;
+        border-radius: 8px;
+        max-height: 48px;
+        min-height: 48px;
         width: 100%;
-        padding: 10px;
-        background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
-        color: var(--white);
+        padding: 12px;
+        // background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
+        color: var(--dark-theme-1-7-shade);
       }
     }