@betarena/ad-engine 0.0.62 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@betarena/ad-engine",
-	"version": "0.0.62",
+	"version": "0.0.63",
 	"private": false,
 	"description": "Betarena ad-engine widget",
 	"keywords": [
@@ -64,7 +64,9 @@
 		"@betarena/scores-lib": "1.11.0-alpha.17",
 		"@fontsource/roboto": "5.0.12",
 		"colorthief": "2.6.0",
-		"svelte-preprocess": "5.1.3"
+		"device-detector-js": "3.0.3",
+		"svelte-preprocess": "5.1.3",
+		"ua-parser-js": "2.0.0"
 	},
 	"main": "./dist/index.js",
 	"svelte": "./src/index.js",

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

@@ -47,7 +47,7 @@
   import { betarenaEndpoint } from './constants/instance.js';
   import { storeSession } from './store/session.js';
   import { logger } from './utils/debug.js';
-  import { detectDeviceType } from './utils/device.js';
+  import { detectDeviceWithUA } from './utils/device.js';
   import { postMod } from './utils/fetch.js';
   import { getUserLocation } from './utils/geo.js';
 
@@ -634,7 +634,7 @@
   (
   ): Promise < void >
   {
-    deviceType = detectDeviceType() as IDeviceType;
+    deviceType = detectDeviceWithUA() as IDeviceType;
     geoLocation = await getUserLocation();
     generateElementMap();
 
@@ -642,9 +642,7 @@
     logger
     (
       [
-        '🚏 checkpoint ➤ initialize(..) // START',
-        `🔹 [var] ➤ deviceType ${deviceType}`,
-        `🔹 [var] ➤ geoLocation ${JSON.stringify(geoLocation)}`
+        '🚏 checkpoint ➤ initialize(..) // START'
       ]
     );
 
@@ -698,7 +696,7 @@
   {
     () =>
     {
-      detectDeviceType();
+      detectDeviceWithUA();
       return;
     }
   }

package/src/lib/utils/device.ts

@@ -15,63 +15,94 @@
 
 // #region ➤ 📦 Package Imports
 
+import DeviceDetector from 'device-detector-js';
+import { UAParser } from 'ua-parser-js';
+
 import { logger } from './debug.js';
 
+import type { IDeviceType } from '@betarena/scores-lib/types/ad-engine/index.js';
+
 // #endregion ➤ 📦 Package Imports
 
 /**
  * @author
  *  @migbash
  * @summary
- *  🟥 MAIN
+ *  🟦 HELPER
  * @description
- *  📝 Detect target device type, such as: `mobile` | `tablet` | `desktop`.
- * @returns { string }
- *  📤
+ *  📝 Detect device used from `User-Agent` data.
+ * @see https://discord.com/channels/457912077277855764/1067871458233159750
+ * @see https://discord.com/channels/457912077277855764/1067529519294070885/1067827869004341319
+ * @return { string }
+ *  📤 `device` type.
  */
-export function detectDeviceType
+export function detectDeviceWithUA
 (
-): string
+): IDeviceType
 {
-  const
+  let
     /**
      * @description
+     *  📝 `device type`.
      */
-    userAgentObject = navigator.userAgent.toLowerCase(),
+    deviceType: IDeviceType = 'mobile'
+  ;
+
+  const
     /**
      * @description
+     *  📝 `user-agent` data.
+     * @example
+     * => 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+     * => [production] navigator.userAgent
      */
-    isUserAgentMobile = userAgentObject.includes('mobile'),
+    userAgent = navigator.userAgent,
     /**
      * @description
+     *  📝 Using `ua-parser-js` module.
      */
-    isUserAgentTablet = /tablet|ipad/.test(userAgentObject)
-  ;
-
-  let
+    methodRes0
+      // eslint-disable-next-line new-cap
+      = UAParser
+      (
+        userAgent
+      ),
     /**
      * @description
-     * 📝 Type of device
+     *  📝 Using 'device-detector-js' module.
      */
-    strDeviceType = 'desktop'
-  ;
-
-  if (isUserAgentMobile)
-    strDeviceType = 'mobile';
-  else if (isUserAgentTablet)
-    strDeviceType = 'tablet';
-  else
-    strDeviceType = 'desktop';
+    methodRes1
+      = new DeviceDetector().parse
+      (
+        userAgent
+      )
   ;
 
   // [🐞]
   logger
   (
     [
-      `🔹 [var] ➤ strDeviceType ${JSON.stringify(strDeviceType)}`,
-      '🚏 checkpoint ➤ detectDeviceType(..) // END'
+      `🔹 [var] ➤ userAgent ${userAgent}`,
+      // `🔹 [var] ➤ methodRes0 ${JSON.stringify(methodRes0, null, 4)}`,
+      `🔹 [var] ➤ methodRes1 ${JSON.stringify(methodRes1, null, 4)}`,
+      `🔹 [var] ➤ deviceType ${deviceType}`,
+      '🚏 checkpoint ➤ detectDeviceWithUA(..) // END'
     ]
   );
 
-  return strDeviceType;
+  // ╭─────
+  // │ NOTE:
+  // │ |: Alternative method to get device type.
+  // ╰─────
+  // deviceType = (methodRes0.device.type ?? 'mobile');
+
+  if (methodRes1.device?.type === 'smartphone')
+    deviceType = 'mobile';
+  else if (methodRes1.device?.type === 'tablet')
+    deviceType = 'tablet';
+  else
+    deviceType = 'desktop';
+  ;
+
+  return deviceType;
 }

package/src/lib/utils/geo.ts

@@ -1,5 +1,26 @@
+// ╭──────────────────────────────────────────────────────────────────────────────────╮
+// │ 📌 High Order Overview                                                           │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ ➤ Code Format   // V.8.0                                                         │
+// │ ➤ Status        // 🔒 LOCKED                                                     │
+// │ ➤ Author(s)     // @migbash                                                      │
+// │ ➤ Maintainer(s) // @migbash                                                      │
+// │ ➤ Created on    // <date-created>                                                │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ 📝 Description                                                                   │
+// ┣──────────────────────────────────────────────────────────────────────────────────┫
+// │ BETARENA (Module)
+// │ |: Geo Location Logic
+// ╰──────────────────────────────────────────────────────────────────────────────────╯
+
+// #region ➤ 📦 Package Imports
+
+import { logger } from './debug.js';
+
 import type { GeoJsResponse } from '../types/geojs.js';
 
+// #endregion ➤ 📦 Package Imports
+
 /**
  * @author
  *  @migbash
@@ -7,7 +28,8 @@ import type { GeoJsResponse } from '../types/geojs.js';
  *  🟥 MAIN
  * @description
  *  📝 Detect user `geo-location`.
- * @returns { Promise <void> }
+ * @return { Promise < GeoJsResponse > }
+ *  📤 `geo-location` data.
  */
 export async function getUserLocation
 (
@@ -18,17 +40,29 @@ export async function getUserLocation
      * @description
      * 📝 Response from `fetch`
     */
-    response = await fetch
-    (
-      'https://get.geojs.io/v1/ip/geo.json',
-      {
-        method: 'GET'
-      }
-    )
+    dataRes0
+      = await fetch
+      (
+        'https://get.geojs.io/v1/ip/geo.json',
+        {
+          method: 'GET'
+        }
+      ),
+    /**
+     * @description
+     * 📝 Response from `fetch`
+     */
+    dataRes1 = await dataRes0.json()
   ;
 
   // [🐞]
-  // console.log('geoLocation', geoLocation);
+  logger
+  (
+    [
+      `🔹 [var] ➤ dataRes0 :: ${JSON.stringify(dataRes1, null, 4)}`,
+      '🚏 checkpoint ➤ getUserLocation(..) // END'
+    ]
+  );
 
-  return await response.json();
+  return dataRes1;
 }