@betarena/ad-engine 0.0.59 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.59",
+	"version": "0.0.60",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [
@@ -53,7 +53,6 @@
 		"eslint": "8.51.0",
 		"eslint-config-prettier": "8.8.0",
 		"eslint-plugin-svelte": "2.34.0",
-		"json5": "2.2.3",
 		"sass": "1.72.0",
 		"svelte": "4.2.12",
 		"svelte-check": "3.6.6",
@@ -64,6 +63,7 @@
 	"dependencies": {
 		"@betarena/scores-lib": "1.11.0-alpha.17",
 		"@fontsource/roboto": "5.0.12",
+		"colorthief": "2.6.0",
 		"svelte-preprocess": "5.1.3"
 	},
 	"main": "./dist/index.js",

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

@@ -43,6 +43,7 @@
   import { betarenaEndpoint } from './constants/instance.js';
   import { storeAdmin } from './store/admin.js';
   import { postMod } from './utils/fetch.js';
+  import { getImageBgColor } from './utils/npm.colorthief.js';
 
   import type { AdsCreativeMain } from '@betarena/scores-lib/types/_AUTO-HASURA_.js';
 
@@ -198,6 +199,12 @@
   (
     () =>
     {
+      getImageBgColor
+      (
+        objectAdverData.data?.media ?? '',
+        '--betarena-ad-engine-interscroller-advert-background-image-'
+      );
+
       injectBetarenaInterscrollerAd();
 
       storeAdmin.updateData
@@ -237,6 +244,7 @@
   right: 0px;
   width: 100vw;
   max-width: 100vw;
+  background-color: var(--betarena-ad-engine-interscroller-advert-background-image-);
   "
 >
   <h2 class="info-box">
@@ -283,7 +291,6 @@
         <div
           style=
           "
-          background: url({objectAdverData.data?.media});
           height: 100vh;
           width: 100vw;
           background-repeat: no-repeat;
@@ -317,59 +324,67 @@
   ╰──────────────────────────────────────────────────────────────────────────────╯
   */
 
-  .info-box
-  {
-    color: var(--colors-text-text-primary-900, #fbfbfb);
-    text-align: center;
-    font-family: Roboto;
-    font-size: 12px !important;
-    font-style: normal;
-    font-weight: 700 !important;
-    line-height: 38px !important; /* 190% */
-    text-transform: uppercase;
-    width: 100%;
-    margin: 0 !important;
-    z-index: 1;
-    background: var(--colors-background-bg-secondary, #313131);
-  }
-
   .interscroller-wrapper
   {
+    /* 📌 position */
     position: relative !important;
     cursor: pointer !important;
-    background: #ffffff !important;
     z-index: 10000000 !important;
+    /* 🛝 layout */
     flex-direction: column;
     justify-content: space-between;
-  }
-
-  .interscroller-bg-wrapper
-  {
-    position: absolute !important;
-    width: 100% !important;
-    left: 0 !important;
-  }
 
-  .interscroller-bg
-  {
-    position: fixed !important;
-    height: 100% !important;
-    top: 0;
-    backface-visibility: hidden !important;
-    -webkit-backface-visibility: hidden !important;
-    border: 0 !important;
-  }
+    .info-box
+    {
+      /* 📌 position */
+      z-index: 1;
+      /* 🎨 style */
+      color: var(--colors-text-text-primary-900, #fbfbfb);
+      text-align: center;
+      font-family: Roboto;
+      font-size: 12px !important;
+      font-style: normal;
+      font-weight: 700 !important;
+      line-height: 38px !important; /* 190% */
+      text-transform: uppercase;
+      width: 100%;
+      margin: 0 !important;
+      background: var(--colors-background-bg-secondary, #313131);
+    }
 
-  .ad_image
-  {
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100vw !important;
-    max-height: 100% !important;
-    touch-action: manipulation;
-    user-select: none;
-    -webkit-user-drag: none;
-    -webkit-touch-callout: none;
+    .interscroller-bg-wrapper
+    {
+      /* 📌 position */
+      position: absolute !important;
+      left: 0 !important;
+      /* 🎨 style */
+      width: 100% !important;
+
+      .interscroller-bg
+      {
+        /* 📌 position */
+        position: fixed !important;
+        top: 30px;
+        /* 🎨 style */
+        height: 100% !important;
+        backface-visibility: hidden !important;
+        -webkit-backface-visibility: hidden !important;
+        border: 0 !important;
+      }
+
+      .ad_image
+      {
+        /* 🎨 style */
+        width: 100% !important;
+        height: 100% !important;
+        max-width: 100vw !important;
+        max-height: 100% !important;
+        touch-action: manipulation;
+        user-select: none;
+        -webkit-user-drag: none;
+        -webkit-touch-callout: none;
+      }
+    }
   }
 
   /*

package/src/lib/utils/npm.colorthief.ts

@@ -0,0 +1,160 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Component Overview                                                 │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Internal Svelte Code Format :|: V.8.0                                          │
+// │ ➤ Status :|: 🔒 LOCKED                                                           │
+// │ ➤ Author(s) :|: @migbash                                                         │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ Main Scores Color Thief Logic                                                    │
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+// #region ➤ 📦 Package Imports
+
+// @ts-expect-error :: 📌 Importing the colorthief package for Types Is missing.
+import ColorThief from 'colorthief/dist/color-thief.mjs';
+
+// #endregion ➤ 📦 Package Imports
+
+const colorThief = new ColorThief();
+
+/**
+ * @author
+ *  @migbash
+ * @summary
+ *  🟦 HELPER
+ * @description
+ *  📝 Convert RGB to Hexidecimal
+ * @param { number } r
+ *  ❗️ **REQUIRED** : Red Value
+ * @param { number } g
+ *  ❗️ **REQUIRED** : Green Value
+ * @param { number } b
+ *  ❗️ **REQUIRED** : Blue Value
+ * @return { string }
+ *  📤 Hexidecimal Value for target RGB input.
+ */
+export const rgbToHex = (
+  r: number,
+  g: number,
+  b: number
+): string =>
+{
+  return '#' + [r, g, b]
+    .map
+    (
+      (
+        x
+      ) =>
+      {
+        const
+          /**
+           * @description
+           * 📝 Convert the number to HEX
+           */
+          hex = x.toString(16)
+        ;
+        return hex.length === 1
+          ? `0${hex}`
+          : hex
+        ;
+      }
+    )
+    .join('')
+  ;
+}
+
+/**
+ * @author
+ *  @migbash
+ * @summary
+ *  🟦 HELPER
+ * @description
+ *  📝 Get the image background color
+ * @param { string } strImageUrl
+ *  ❗️ **REQUIRED** : The image URL
+ * @param { string } strImageColorVariable
+ * ❗️ **REQUIRED** : The image variable
+ * @return { void }
+ */
+export function getImageBgColor
+(
+  strImageUrl: string,
+  strImageColorVariable: string
+): void
+{
+  if (!strImageUrl) return;
+
+  try
+  {
+    const
+      /**
+       * @description
+       * 📝 Create a new image instance
+       */
+      img = new Image()
+    ;
+
+    // ╭─────
+    // │ NOTE:
+    // │ |: Listen, event to wait for the image to load
+    // ╰─────
+    img.addEventListener
+    (
+      'load',
+      () =>
+      {
+        const
+          /**
+           * @description
+           * 📝 Get the color values from the image
+           */
+          colorValues
+            = colorThief.getColor(img) as [number, number, number],
+          /**
+           * @description
+           * 📝 Convert the color values to HEX
+           */
+          hexColor
+            = rgbToHex
+            (
+              colorValues[0],
+              colorValues[1],
+              colorValues[2]
+            ),
+          /**
+           * @description
+           * 📝 Pass this values as a `CSS :root` variable, accessible to all the website,
+           */
+          doc = document.documentElement
+        ;
+
+        doc.style.setProperty
+        (
+          strImageColorVariable,
+          hexColor
+        );
+      }
+    );
+
+    const
+      // [ℹ] declaring the image paramaters & CORS by-pass
+      imageURL = 'https://corsproxy.io/?' + encodeURIComponent(strImageUrl)
+    ;
+
+    img.crossOrigin = 'anonymous';
+    img.src = imageURL;
+  }
+  catch (e)
+  {
+    // eslint-disable-next-line no-console
+    console.error
+    (
+      '-- getImageBgColor() ERR --',
+      e
+    );
+  }
+
+  return;
+}