@jolibox/implement 1.3.3 → 1.3.5-beta.10

package/implement.build.log

@@ -1,9 +1,9 @@
 Invoking: npm run clean && npm run build:esm && tsc 
 
-> @jolibox/implement@1.3.3 clean
+> @jolibox/implement@1.3.5-beta.10 clean
 > rimraf ./dist
 
 
-> @jolibox/implement@1.3.3 build:esm
+> @jolibox/implement@1.3.5-beta.10 build:esm
 > BUILD_VERSION=$(node -p "require('./package.json').version")  node esbuild.config.js --format=esm
 

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@jolibox/implement",
   "description": "This project is Jolibox JS-SDk implement for Native && H5",
-  "version": "1.3.3",
+  "version": "1.3.5-beta.10",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@jolibox/common": "1.3.3",
-    "@jolibox/types": "1.3.3",
-    "@jolibox/native-bridge": "1.3.3",
-    "@jolibox/ads": "1.3.3",
+    "@jolibox/common": "1.3.5-beta.10",
+    "@jolibox/types": "1.3.5-beta.10",
+    "@jolibox/native-bridge": "1.3.5-beta.10",
+    "@jolibox/ads": "1.3.5-beta.10",
     "localforage": "1.10.0",
-    "@jolibox/ui": "1.3.3",
+    "@jolibox/ui": "1.3.5-beta.10",
     "web-vitals": "4.2.4"
   },
   "devDependencies": {

package/src/common/report/task-track/index.ts

@@ -11,7 +11,8 @@ type TaskEvent =
   | 'ADS_UNLOCK_GAME' // 广告解锁
   | 'GAME_TASK_EVENT' // 关卡行为
   | 'GAME_ENDED' // 游戏结束
-  | 'GAME_LEVEL_UP'; // 游戏关卡升级
+  | 'GAME_LEVEL_UP' // 游戏关卡升级
+  | 'COMPLETE_WATCH_ADS'; // 完成观看广告
 export type TaskPoint = {
   event: TaskEvent;
   params?: Record<string, unknown>;

package/src/common/utils/index.ts

@@ -13,6 +13,9 @@ const JOLIBOX_JOLI_UNLOGIN_MODAL_EVENT = 'JOLIBOX_JOLI_UNLOGIN_MODAL_EVENT'; //
 const JOLIBOX_GET_USER_SUB_STATUS = 'JOLIBOX_GET_USER_SUB_STATUS';
 const JOLIBOX_SUB_EVENT = 'JOLIBOX_SUB_EVENT';
 
+const CP_LOAD_FINISH = 'CP_LOAD_FINISH';
+const CP_LOAD_PROGRESS = 'CP_LOAD_PROGRESS';
+
 interface JoliboxCustomEvent {
   [JOLIBOX_CUSTOM_ADS_EVENT_TYPE]: {
     isAdShowing: boolean;
@@ -52,6 +55,12 @@ interface JoliboxCustomEvent {
   [JOLIBOX_SUB_EVENT]: {
     sequenceId: string;
   };
+  [CP_LOAD_FINISH]: {
+    // no data
+  };
+  [CP_LOAD_PROGRESS]: {
+    progress: number;
+  };
 }
 
 const notifyCustomEvent = <T extends keyof JoliboxCustomEvent>(eventName: T, data: JoliboxCustomEvent[T]) => {

package/src/h5/api/ads.ts

@@ -125,7 +125,11 @@ const adsContext: IAdsContext<'GAME'> = {
       osType: platform.isAndroid ? 'ANDROID' : platform.isiOS ? 'IOS' : 'PC',
       runtimeType: 'WEB',
       platform: 1000, // WebSDK
-      joliSource: context.joliSource ?? ''
+      joliSource: context.joliSource ?? '',
+      deviceInfo: {
+        platform: 'h5',
+        nativeSDKVersionCode: 0 // not support in h5
+      }
     };
   }
 };

package/src/h5/api/runtime.ts

@@ -1,16 +1,19 @@
 import { createCommands } from '@jolibox/common';
 import { track } from '../report';
 import { context } from '@/common/context';
+import { notifyCustomEvent } from '@/common/utils';
 
 const commands = createCommands();
 
 commands.registerCommand('RuntimeSDK.loadFinishedEvent', () => {
   const duration = performance.now();
+  notifyCustomEvent('CP_LOAD_FINISH', { duration });
   track('loadFinished', {
     duration
   });
 });
 
 commands.registerCommand('RuntimeSDK.loadProgressEvent', (progress) => {
+  notifyCustomEvent('CP_LOAD_PROGRESS', { progress });
   console.log('RuntimeSDK.loadProgressEvent', progress);
 });

package/src/native/api/ads.ts

@@ -85,7 +85,11 @@ const adsContext: IAdsContext<'GAME'> = {
       osType: context.platform === 'android' ? 'ANDROID' : context.platform === 'ios' ? 'IOS' : 'PC',
       runtimeType: 'APP',
       platform: 1000, // WebSDK
-      joliSource: context.joliSource ?? ''
+      joliSource: context.joliSource ?? '',
+      deviceInfo: {
+        platform: context.platform,
+        nativeSDKVersionCode: context.sdkInfo.nativeSDKVersionCode ?? 0
+      }
     };
   }
 };

package/src/native/api/rewards.ts

@@ -1,9 +1,76 @@
 import { BaseError, wrapUserFunction, createCommands } from '@jolibox/common';
-import { canIUseNative, createAPI, registerCanIUse, t } from './base';
+import { canIUseNative, createAPI, createSyncAPI, registerCanIUse, t } from './base';
 import { StandardResponse, ICoinDetailsData } from '@jolibox/types';
 import { context } from '@/common/context';
 import { createAPIError } from '@/common/report/errors';
 import { invokeNative } from '@jolibox/native-bridge';
+import { IAdsContext } from '@jolibox/ads/dist/type/base';
+import { adEventEmitter } from '@/common/ads';
+import { taskTracker, track } from '../report';
+import { JoliboxAdsForGame } from '@jolibox/ads';
+import { innerFetch as fetch } from '../network';
+
+const checkNetworkStatus = () => {
+  const { data } = invokeNative('getNetworkStatusSync');
+  return !!data?.isConnected;
+};
+
+const httpClient = {
+  get: <T>(url: string, options?: any) =>
+    fetch<T>(url, {
+      method: 'GET',
+      responseType: 'json',
+      appendHostCookie: true,
+      ...options
+    }).then((res) => res.response.data as T),
+  post: <T>(url: string, options?: any) =>
+    fetch<T>(url, {
+      method: 'POST',
+      responseType: 'json',
+      appendHostCookie: true,
+      ...options
+    }).then((res) => res.response.data as T)
+};
+
+const adsContext: IAdsContext<'TASK'> = {
+  httpClient,
+  checkNetwork: checkNetworkStatus,
+  track,
+  eventEmitter: adEventEmitter,
+  getWindowInfo: () => ({
+    width: window.innerWidth * window.devicePixelRatio,
+    height: window.innerHeight * window.devicePixelRatio,
+    statusBarHeight: 30
+  }),
+  handleLinkClicked: (link) => {
+    window.open(link, '_blank');
+  },
+  getContextInfo: () => {
+    return {
+      hostAppId: context.hostInfo?.aid ?? '1',
+      deviceId: context.deviceInfo.did ?? '',
+      adId: context.deviceInfo.adId ?? '',
+      sessionId: context.sessionId ?? '',
+      userId: context.hostUserInfo?.uid ?? '',
+      objectType: 'TASK',
+      objectId: context.mpId,
+      testAdsMode: context.testAdsMode,
+      channel: context.joliSource ?? '',
+      deviceBrand: context.deviceInfo.brand,
+      deviceModel: context.deviceInfo.model,
+      osType: context.platform === 'android' ? 'ANDROID' : context.platform === 'ios' ? 'IOS' : 'PC',
+      runtimeType: 'APP',
+      platform: 1000, // WebSDK
+      joliSource: context.joliSource ?? '',
+      deviceInfo: {
+        platform: context.platform,
+        nativeSDKVersionCode: context.sdkInfo.nativeSDKVersionCode ?? 0
+      }
+    };
+  }
+};
+
+// const ads = new JoliboxAdsForGame(adsContext);
 
 const commands = createCommands();
 
@@ -83,3 +150,86 @@ commands.registerCommand('RewardsSDK.getCoinDetails', getCoinDetails);
 registerCanIUse('rewards.getCoinDetails', {
   version: '1.3.2'
 });
+
+const createRewardsAdsManager = createAPI('createRewardsAdsManager', {
+  implement: async () => {
+    try {
+      const ads = new JoliboxAdsForGame(adsContext);
+      if (context.mpType !== 'miniApp') {
+        throw createAPIError({
+          code: -1,
+          msg: '[JoliboxSDK]: createRewardsAdsManager not supported in games. Only supported in mini apps.'
+        });
+      }
+      return {
+        code: 'SUCCESS',
+        message: 'Successfully created RewardsAdsManager',
+        data: {
+          init: async () => {
+            await ads.init();
+            ads.adConfig({
+              preloadAdBreaks: 'on',
+              sound: 'off',
+              onReady: () => {
+                // do nothing
+              }
+            });
+          },
+          showAd: async (callbacks: {
+            onAdLoaded?: () => void;
+            onAdError?: (error: Error) => void;
+            onAdRewarded?: () => void;
+            onAdDismissed?: () => void;
+          }) => {
+            ads.adBreak({
+              type: 'reward',
+              beforeReward: (showAdFn) => {
+                showAdFn();
+                callbacks.onAdLoaded?.();
+              },
+              adDismissed: () => {
+                // do nothing
+                callbacks.onAdDismissed?.();
+              },
+              adViewed: () => {
+                // do nothing
+              },
+              adBreakDone: (placementInfo) => {
+                const breakStatus = placementInfo.breakStatus;
+                const noAdPreloaded =
+                  breakStatus === 'frequencyCapped' ||
+                  breakStatus === 'other' ||
+                  breakStatus === 'error' ||
+                  breakStatus === 'noAdPreloaded';
+                if (breakStatus === 'viewed') {
+                  // reward should be given to user
+                  console.log('-----> complete watch ads');
+                  taskTracker.reporter({
+                    event: 'COMPLETE_WATCH_ADS'
+                  });
+                  callbacks.onAdRewarded?.();
+                }
+
+                if (noAdPreloaded) {
+                  console.log('-----> no ad preloaded or error occurred', breakStatus);
+                  callbacks.onAdError?.(new Error('No ad preloaded or error occurred: ' + breakStatus));
+                }
+              }
+            });
+          }
+        }
+      };
+    } catch (error) {
+      return {
+        code: 'FAILURE',
+        message: '[JoliboxSDK]: Failed to create RewardsAdsManager'
+      };
+    }
+  }
+});
+
+commands.registerCommand('Rewards.createRewardsAdsManager', createRewardsAdsManager);
+
+registerCanIUse('rewards.createRewardsAdsManager', {
+  version: '1.3.4'
+});

package/src/native/bootstrap/index.ts

@@ -9,6 +9,7 @@ import { innerFetch } from '../network';
 import { Env } from '@jolibox/types';
 import { registerLanguageHandler } from '@jolibox/ui';
 import { createIframeModal, registerIframeModalToGlobal } from '../ui/modal-iframe';
+import { onFCP, onLCP, onTTFB } from 'web-vitals';
 interface IBasicMetaConfig {
   canShowRecommended: boolean;
 }
@@ -75,7 +76,7 @@ RuntimeLoader.onReady(() => {
 function addShowAdListener() {
   adEventEmitter.on('isAdShowing', (isShowing) => {
     isAdShowing = isShowing;
-    if (isBoolean(isAdShowing)) {
+    if (isBoolean(isAdShowing) && context.mpType === 'game') {
       invokeNative('updateContainerConfigSync', {
         displayCapsuleButton: !isAdShowing,
         webviewId: context.webviewId
@@ -217,6 +218,32 @@ function addDoExitLoader() {
   });
 }
 
+function trackPerformance() {
+  onFCP((metric) => {
+    track('GameFCP', {
+      value: metric.value,
+      rating: metric.rating,
+      navigationType: metric.navigationType
+    });
+  });
+
+  onLCP((metric) => {
+    track('GameLCP', {
+      value: metric.value,
+      rating: metric.rating,
+      navigationType: metric.navigationType
+    });
+  });
+
+  onTTFB((metric) => {
+    track('GameTTFB', {
+      value: metric.value,
+      rating: metric.rating,
+      navigationType: metric.navigationType
+    });
+  });
+}
+
 async function fetchMetaConfig() {
   try {
     const url = `/api/fe-configs/js-sdk/basic-meta`;
@@ -242,6 +269,7 @@ export function config(): void {
   addWebviewReadyListener();
   addI18nChangedListener();
   fetchMetaConfig();
+  trackPerformance();
   unregisterIframeModal = registerIframeModalToGlobal();
 
   cleanStyles = initializeNativeEnv();