@betarena/ad-engine 0.0.30 → 0.0.31

package/package.json

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

package/src/lib/Advert-Engine-Widget.svelte

@@ -493,13 +493,19 @@
   -->
   <DevInfoBox>
     <p>
-      Device Type :|: {deviceType}
+      [detected] Device Type :|: {deviceType}
     </p>
     <p>
-      Geo-Location :|: {geoLocation?.country_code}
+      [detected] Geo-Location :|: {geoLocation?.country_code}
     </p>
     <p>
-      Number of Adverts Detected :|: {betarenaAdsInjectMap.size}
+      [detected] Page Advert Snippets Number :|: {betarenaAdsInjectMap.size}
+    </p>
+    <p>
+      [properties] AuthorId :|: {authorId}
+    </p>
+    <p>
+      [properties] AuthorArticleTagIds :|: [{authorArticleTagIds}]
     </p>
   </DevInfoBox>
 

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

@@ -89,9 +89,9 @@
      * @description
      * 📝 number of `milliseconds` for advert close action show
      * @example
-     * => 15000 (15 seconds)
+     * => 5000 (5 seconds)
      */
-    timeoutForAdvertCloseAction = 15000
+    timeoutForAdvertCloseAction = 5000
   ;
 
   let
@@ -225,11 +225,22 @@
     ╰─────
     -->
     {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
-      <!-- <iframe
-        width=250
-        height=250
-        src={adData.data?.media}
-      /> -->
+      <a
+        href={adData.data?.video_link}
+        target="_blank"
+        rel=
+        "
+        noopener
+        noreferrer
+        "
+      >
+        <!--
+          <iframe
+            width=250
+            height=250
+            src={adData.data?.media}
+          />
+        -->
         <video
           id="banner"
           width=250
@@ -240,6 +251,7 @@
           playsinline={true}
           loop={true}
         />
+      </a>
 
     {:else if (adData.type == 2)}
       <img
@@ -357,6 +369,15 @@
     border-radius: 40px 40px 0px 0px;
     background-color: var(--dark-theme-1-4-shade);
 
+    @mixin banner
+    {
+      /* 🎨 style */
+      max-height: 355px;
+      min-height: 355px;
+      width: 100%;
+      object-fit: cover;
+    }
+
     img
     {
       &#close
@@ -370,24 +391,21 @@
 
       &#banner
       {
+        @include banner;
         /* 🎨 style */
-        height: 355px;
-        width: 100%;
       }
     }
 
     iframe
     {
       /* 🎨 style */
-      width: 100%;
-      object-fit: cover;
+      @include banner;
     }
 
     video
     {
       /* 🎨 style */
-      width: 100%;
-      object-fit: cover;
+      @include banner;
     }
 
     div#main-box
@@ -409,6 +427,7 @@
         /* 🎨 style */
         border-radius: 7.57px;
         max-height: 50px;
+        min-height: 50px;
         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 */;

package/src/lib/misc/admin/Dev-Info-Box.svelte

@@ -165,7 +165,7 @@
     align-content: space-between;
     /* 🛝 layout */
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
 
     div.grid-box
     {
@@ -196,4 +196,21 @@
     }
   }
 
+  /*
+  ╭──────────────────────────────────────────────────────────────────────────────╮
+  │ ⚡️ RESPONSIVNESS                                                              │
+  ╰──────────────────────────────────────────────────────────────────────────────╯
+  */
+
+  @media only screen
+  and (min-width: 560px)
+  {
+    div#developer-admin-infobox
+    {
+      /* 🛝 layout */
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
 </style>