react-native-firework-sdk 2.10.1 → 2.11.1

package/lib/typescript/models/VideoFeedConfiguration.d.ts

@@ -1,6 +1,7 @@
 import type IOSFontInfo from './IOSFontInfo';
 import type AndroidFontInfo from './AndroidFontInfo';
 import type GradientDrawable from './GradientDrawable';
+import type { ReplayBadgeConfiguration } from './ReplayBadgeConfiguration';
 export interface VideoFeedTitleConfiguration {
     /**
      * Specifies if the video feed title is hidden.
@@ -130,4 +131,9 @@ export default interface VideoFeedConfiguration {
      * Defaults to 2.
      */
     gridColumns?: number;
+    /**
+     * The configuration of replay badge.
+     * Only supported on iOS.
+     */
+    replayBadge?: ReplayBadgeConfiguration;
 }

package/lib/typescript/models/VideoPlayerConfiguration.d.ts

@@ -5,6 +5,8 @@ import type { VideoPlayerCTAWidth } from './VideoPlayerCTAWidth';
 import type { VideoPlayerCompleteAction } from './VideoPlayerCompleteAction';
 import type { VideoPlayerStyle } from './VideoPlayerStyle';
 import type { VideoPlayerLogoConfiguration } from './VideoPlayerLogoConfiguration';
+import type { ReplayBadgeConfiguration } from './ReplayBadgeConfiguration';
+import type CountdownTimerConfiguration from './CountdownTimerConfiguration';
 export default interface VideoPlayerConfiguration {
     /**
      * Sets the proportion of the video player to its container.
@@ -70,7 +72,16 @@ export default interface VideoPlayerConfiguration {
     /**
      * Specifies the logo configuration
      * Defaults to { option: 'disabled' }
-     * Only supported on iOS.
      */
     videoPlayerLogoConfiguration?: VideoPlayerLogoConfiguration;
+    /**
+     * The configuration of replay badge.
+     * Only supported on iOS.
+     */
+    replayBadgeConfiguration?: ReplayBadgeConfiguration;
+    /**
+     * Specifies countdown timer configuration.
+     * Only supported on iOS.
+     */
+    countdownTimerConfiguration?: CountdownTimerConfiguration;
 }

package/lib/typescript/modules/FireworkSDKModule.d.ts

@@ -5,6 +5,7 @@ import type TrackPurchaseParameters from '../models/TrackPurchaseParameters';
 import type VideoPlayerNativeConfiguration from '../models/VideoPlayerNativeConfiguration';
 interface IFireworkSDKModule extends NativeModule {
     init(options?: SDKInitOptions): Promise<any>;
+    markInitCalled(): Promise<boolean>;
     openVideoPlayer(url: string, config?: VideoPlayerNativeConfiguration): void;
     setVideoFeedClickCallbackEnabled(enabled: boolean): void;
     setCustomCTAClickEnabled(enabled: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-firework-sdk",
-  "version": "2.10.1",
+  "version": "2.11.1",
   "description": "Firework React Native SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -13,13 +13,9 @@
     "ios",
     "cpp",
     "react-native-firework-sdk.podspec",
-    "FireworkVideoUI.xcframework",
     "!lib/typescript/example",
     "!android/build",
     "!ios/build",
-    "!ios/FireworkVideoUI/build",
-    "!ios/FireworkVideoUI/Pods",
-    "!ios/FireworkVideoUI/scripts",
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__",

package/react-native-firework-sdk.podspec

@@ -27,13 +27,11 @@ fi
 
   s.source_files = 'ios/**/*.{h,m,mm,swift}'
   s.exclude_files = [
-    'ios/Support/**/*',
-    'ios/FireworkVideoUI/**/*'
+    'ios/Support/**/*'
   ]
-  s.preserve_paths       = "FireworkVideoUI.xcframework"
-  s.vendored_frameworks  = "FireworkVideoUI.xcframework"
 
   s.static_framework = true
   s.dependency 'React-Core'
-  s.dependency 'FireworkVideo', '1.16.0'
+  s.dependency 'FireworkVideoUI', '0.1.0'
+  s.dependency 'FireworkVideo', '1.18.0'
 end

package/src/FireworkSDK.ts

@@ -190,8 +190,8 @@ class FireworkSDK {
     this.eventEmitter.addListener(FWEventName.SDKInit, (event) => {
       FWLoggerUtil.log(`Receive SDKInit event ${event?.error}`);
 
-      if (this.onSDKInit) {
-        this.onSDKInit(event ?? {});
+      if (this.onSDKInit && event) {
+        this.onSDKInit(event);
       }
     });
 
@@ -205,21 +205,18 @@ class FireworkSDK {
         `Receive CustomCTAClick callbackId: ${event?.callbackId}`
       );
 
-      if (this.onCustomCTAClick) {
-        if (event) {
-          if (event.callbackId) {
-            const callbackId = event.callbackId;
-            delete event.callbackId;
-            if (Platform.OS === 'ios') {
-              event.playerHandler = {
-                pause: () => FireworkSDKModule.pausePlayer(callbackId),
-                resume: () => FireworkSDKModule.resumePlayer(callbackId),
-              };
-            }
+      if (this.onCustomCTAClick && event) {
+        if (event.callbackId) {
+          const callbackId = event.callbackId;
+          delete event.callbackId;
+          if (Platform.OS === 'ios') {
+            event.playerHandler = {
+              pause: () => FireworkSDKModule.pausePlayer(callbackId),
+              resume: () => FireworkSDKModule.resumePlayer(callbackId),
+            };
           }
         }
-
-        this.onCustomCTAClick(event ?? {});
+        this.onCustomCTAClick(event);
       }
     });
 
@@ -228,16 +225,16 @@ class FireworkSDK {
         `Receive VideoPlayback event eventName: ${event?.eventName}`
       );
 
-      if (this.onVideoPlayback) {
-        this.onVideoPlayback(event ?? {});
+      if (this.onVideoPlayback && event) {
+        this.onVideoPlayback(event);
       }
     });
 
     this.eventEmitter.addListener(FWEventName.VideoFeedClick, (event) => {
       FWLoggerUtil.log(`Receive VideoFeedClick event id: ${event?.info.id}`);
 
-      if (this.onVideoFeedClick) {
-        this.onVideoFeedClick(event ?? {});
+      if (this.onVideoFeedClick && event) {
+        this.onVideoFeedClick(event);
       }
     });
 
@@ -278,6 +275,14 @@ class FireworkSDK {
    * You only need to call this method when you call init method in native side instead of JS side.
    */
   public async markInitCalled(): Promise<void> {
+    FWLoggerUtil.log('Call FireworkSDK markInitCalled method');
+
+    const hasCalledSDKInitFromNative = await FireworkSDKModule.markInitCalled();
+    if (hasCalledSDKInitFromNative) {
+      await ShoppingModule.init();
+      await LiveStreamModule.init();
+    }
+
     FWGlobalState.getInstance().resolveSdkInitCalled();
   }
 
@@ -303,12 +308,10 @@ class FireworkSDK {
   public async trackPurchase(
     parameters: TrackPurchaseParameters
   ): Promise<void> {
-    if (Platform.OS === 'ios') {
-      if (!FWGlobalState.getInstance().sdkInitCalled) {
-        await FWGlobalState.getInstance().sdkInitCalledPromise;
-      }
-      FireworkSDKModule.trackPurchase(parameters);
+    if (!FWGlobalState.getInstance().sdkInitCalled) {
+      await FWGlobalState.getInstance().sdkInitCalledPromise;
     }
+    FireworkSDKModule.trackPurchase(parameters);
   }
 
   /**

package/src/VideoShopping.ts

@@ -2,6 +2,7 @@ import { NativeEventEmitter, Platform } from 'react-native';
 
 import { FWEventName } from './models/FWEventName';
 import type {
+  CustomClickCartIconEvent,
   CustomClickLinkButtonEvent,
   CustomTapProductCardEvent,
   ShoppingCTAEvent,
@@ -20,7 +21,9 @@ export type ShoppingCTACallback = (
   event: ShoppingCTAEvent
 ) => Promise<ShoppingCTAResult> | ShoppingCTAResult;
 
-export type CustomClickCartIconCallback = () => Promise<void> | void;
+export type CustomClickCartIconCallback = (
+  event: CustomClickCartIconEvent
+) => Promise<void> | void;
 
 export type UpdateProductDetailsCallbackResult = Product[] | undefined | null;
 export type UpdateProductDetailsCallback = (
@@ -186,9 +189,9 @@ class VideoShopping {
       }
     );
 
-    this.eventEmitter.addListener(FWEventName.ClickCartIcon, () => {
+    this.eventEmitter.addListener(FWEventName.ClickCartIcon, (event) => {
       FWLoggerUtil.log('Receive ClickCartIcon event');
-      this.handleClickCartIconEvent();
+      this.handleClickCartIconEvent(event);
     });
 
     this.eventEmitter.addListener(FWEventName.UpdateProductDetails, (event) => {
@@ -213,10 +216,6 @@ class VideoShopping {
     this.eventEmitter.addListener(FWEventName.CustomProductCardTap, (event) => {
       FWLoggerUtil.log(`Receive CustomProductCardTap event url: ${event?.url}`);
       if (event) {
-        if (!event.video) {
-          event.video = { videoId: '' };
-        }
-
         if (event.callbackId) {
           const callbackId = event.callbackId;
           delete event.callbackId;
@@ -227,9 +226,8 @@ class VideoShopping {
             };
           }
         }
+        this.handleCustomProductCardTapEvent(event);
       }
-
-      this.handleCustomProductCardTapEvent(event ?? {});
     });
   }
 
@@ -269,9 +267,9 @@ class VideoShopping {
     }
   }
 
-  private async handleClickCartIconEvent() {
+  private async handleClickCartIconEvent(event: any) {
     if (this.onCustomClickCartIcon) {
-      this.onCustomClickCartIcon();
+      this.onCustomClickCartIcon(event as CustomClickCartIconEvent);
     }
   }
 

package/src/components/StoryBlock.tsx

@@ -47,6 +47,18 @@ export interface IStoryBlockMethods {
    * Only supported on Android.
    */
   openFullscreen: () => void;
+  /**
+   * Triggered when the story block enters the viewport.
+   * Only supported on iOS.
+   * It is recommended that the host app is triggered when listening for scrolling.
+   */
+  onViewportEntered: () => void;
+  /**
+   * Triggered when the story block leaves the viewport.
+   * Only supported on iOS.
+   * It is recommended that the host app is triggered when listening for scrolling.
+   */
+  onViewportLeft: () => void;
 }
 
 /**
@@ -113,7 +125,6 @@ export interface IStoryBlockProps {
    *  1. Loading successfully but the back end returns an empty list.
    *  2. The load failed and list is empty.
    * onStoryBlockLoadFinished will also be triggered when onStoryBlockEmpty is triggered.
-   * Only supported on Android.
    */
   onStoryBlockEmpty?: (error?: FWError) => void;
   /**
@@ -124,6 +135,12 @@ export interface IStoryBlockProps {
    * Stop Picture in Picture callback. Only supported on iOS.
    */
   onStoryBlockDidStopPictureInPicture?: (error?: FWError) => void;
+  /**
+   *
+   * The host app could use this callback to get feed id.
+   * The feed id can be used for conversion tracking.
+   */
+  onStoryBlockGetFeedId?: (feedId: string) => void;
 }
 
 const StoryBlock: ForwardRefRenderFunction<
@@ -223,6 +240,21 @@ const StoryBlock: ForwardRefRenderFunction<
     }
   };
 
+  const handleStoryBlockGetFeedId = (event: NativeSyntheticEvent<any>) => {
+    FWLoggerUtil.log(
+      `StoryBlock handleStoryBlockGetFeedId ${JSON.stringify(
+        event.nativeEvent
+      )}`
+    );
+    const { onStoryBlockGetFeedId } = props;
+
+    const { feedId } = event.nativeEvent;
+
+    if (onStoryBlockGetFeedId) {
+      onStoryBlockGetFeedId(feedId ?? '');
+    }
+  };
+
   const generateDynamicContentParametersString = (): string => {
     const { dynamicContentParameters } = props;
 
@@ -328,6 +360,9 @@ const StoryBlock: ForwardRefRenderFunction<
       storyBlockConfiguration?.ctaHighlightDelay?.value?.toFixed(5);
     const shareBaseURL = storyBlockConfiguration?.shareBaseURL;
     const buttonConfiguration = storyBlockConfiguration?.buttonConfiguration;
+    const videoPlayerLogoConfigurationJsonKey = gennerateJsonKey(
+      storyBlockConfiguration?.videoPlayerLogoConfiguration
+    );
     const ctaWidth = storyBlockConfiguration?.ctaWidth;
     const showVideoDetailTitle = storyBlockConfiguration?.showVideoDetailTitle;
 
@@ -337,6 +372,12 @@ const StoryBlock: ForwardRefRenderFunction<
     const productInfoViewConfigurationJsonKey = gennerateJsonKey(
       FireworkSDK.getInstance().shopping.productInfoViewConfiguration
     );
+    const replayBadgeConfigurationJsonKey = gennerateJsonKey(
+      storyBlockConfiguration?.replayBadgeConfiguration
+    );
+    const countdownTimerConfigurationJsonKey = gennerateJsonKey(
+      storyBlockConfiguration?.countdownTimerConfiguration
+    );
 
     let key = `gShareBaseURL:${gShareBaseURL}`;
     if (Platform.OS === 'ios') {
@@ -391,18 +432,25 @@ const StoryBlock: ForwardRefRenderFunction<
     key += `_buttonConfiguration.pauseButton:${generateButtonInfoString(
       buttonConfiguration?.pauseButton
     )}`;
+    if (Platform.OS === 'android') {
+      key += `_videoPlayerLogoConfiguration:${videoPlayerLogoConfigurationJsonKey}`;
+    }
     key += `_showVideoDetailTitle:${showVideoDetailTitle}`;
 
     key += `_requiresAds:${requiresAds}`;
     key += `_adsFetchTimeout:${adsFetchTimeout}`;
     key += `_vastAttributes:${vastAttributesString}`;
-    key += `_productInfoViewConfigurationJsonKey:${productInfoViewConfigurationJsonKey}`;
+    key += `_productInfoViewConfiguration:${productInfoViewConfigurationJsonKey}`;
+    key += `_replayBadgeConfiguration:${replayBadgeConfigurationJsonKey}`;
+    key += `_countdownTimerConfiguration:${countdownTimerConfigurationJsonKey}`;
 
     return key;
   };
 
   const key = generateKey();
 
+  console.log('story block key', key);
+
   useImperativeHandle(
     forwardedRef,
     () => {
@@ -414,12 +462,14 @@ const StoryBlock: ForwardRefRenderFunction<
         if (Platform.OS === 'android') {
           commandId = commandId.toString();
         }
-
-        UIManager.dispatchViewManagerCommand(
-          findNodeHandle(nativeNodeHandle),
-          commandId,
-          []
+        let reactTag: number | null = findNodeHandle(nativeNodeHandle);
+        FWLoggerUtil.log(
+          `StoryBlock sendCommand: ${command} commandId: ${commandId} nativeNodeHandle: ${nativeNodeHandle} reactTag: ${reactTag}`
         );
+        if (!nativeNodeHandle || !reactTag) {
+          return;
+        }
+        UIManager.dispatchViewManagerCommand(reactTag, commandId, []);
       };
       return {
         play: () => {
@@ -431,6 +481,18 @@ const StoryBlock: ForwardRefRenderFunction<
         openFullscreen: () => {
           sendCommand('openFullscreen');
         },
+        onViewportEntered: () => {
+          if (Platform.OS !== 'ios') {
+            return;
+          }
+          sendCommand('onViewportEntered');
+        },
+        onViewportLeft: () => {
+          if (Platform.OS !== 'ios') {
+            return;
+          }
+          sendCommand('onViewportLeft');
+        },
       };
     },
     []
@@ -497,6 +559,9 @@ const StoryBlock: ForwardRefRenderFunction<
       setTimeout(() => {
         const viewId = findNodeHandle(nativeComponentRef.current);
         FWLoggerUtil.log(`StoryBlock createFragment viewId: ${viewId}`);
+        if (!viewId) {
+          return;
+        }
         UIManager.dispatchViewManagerCommand(
           viewId,
           UIManager.getViewManagerConfig(
@@ -535,6 +600,7 @@ const StoryBlock: ForwardRefRenderFunction<
       onStoryBlockDidStopPictureInPicture={
         handleStoryBlockDidStopPictureInPicture
       }
+      onStoryBlockGetFeedId={handleStoryBlockGetFeedId}
     />
   );
 };

package/src/components/VideoFeed.tsx

@@ -12,17 +12,19 @@ import {
 
 import FireworkSDK from '../FireworkSDK';
 import type AdConfiguration from '../models/AdConfiguration';
+import type ButtonInfo from '../models/ButtonInfo';
 import type FWError from '../models/FWError';
 import { FWEventName } from '../models/FWEventName';
+import { FWNativeErrorAction } from '../models/FWNativeErrorAction';
 import type VideoFeedConfiguration from '../models/VideoFeedConfiguration';
 import type { VideoFeedSource } from '../models/VideoFeedSource';
 import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
+import type VideoPlayerNativeConfiguration from '../models/VideoPlayerNativeConfiguration';
 import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
 import FWGlobalState from '../utils/FWGlobalState';
+import gennerateJsonKey from '../utils/FWJsonUtil';
 import FWLoggerUtil from '../utils/FWLoggerUtil';
 import FWVideoFeed from './FWVideoFeed';
-import type VideoPlayerNativeConfiguration from '../models/VideoPlayerNativeConfiguration';
-import type ButtonInfo from '../models/ButtonInfo';
 
 export type VideoFeedMode = 'row' | 'column' | 'grid';
 
@@ -101,7 +103,6 @@ export interface IVideoFeedProps {
    *  1. Loading successfully but the back end returns an empty list.
    *  2. The load failed and list is empty.
    * onVideoFeedLoadFinished will also be triggered when onVideoFeedEmpty is triggered.
-   * Only supported on Android.
    */
   onVideoFeedEmpty?: (error?: FWError) => void;
   /**
@@ -112,6 +113,12 @@ export interface IVideoFeedProps {
    * Stop Picture in Picture callback. Only supported on iOS.
    */
   onVideoFeedDidStopPictureInPicture?: (error?: FWError) => void;
+  /**
+   *
+   * The host app could use this callback to get feed id.
+   * The feed id can be used for conversion tracking.
+   */
+  onVideoFeedGetFeedId?: (feedId: string) => void;
 }
 
 interface IVideoFeedState {
@@ -154,12 +161,14 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     if (Platform.OS === 'android') {
       commandId = commandId.toString();
     }
-
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(nativeNodeHandle),
-      commandId,
-      []
+    let reactTag: number | null = findNodeHandle(nativeNodeHandle);
+    FWLoggerUtil.log(
+      `StoryBlock refresh commandId: ${commandId} nativeNodeHandle: ${nativeNodeHandle} reactTag: ${reactTag}`
     );
+    if (!nativeNodeHandle || !reactTag) {
+      return;
+    }
+    UIManager.dispatchViewManagerCommand(reactTag, commandId, []);
   };
 
   private _onVideoFeedLoadFinished = (event: NativeSyntheticEvent<any>) => {
@@ -168,7 +177,7 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     );
     const { onVideoFeedLoadFinished, onVideoFeedEmpty } = this.props;
 
-    const { name, reason } = event.nativeEvent;
+    const { name, reason, action } = event.nativeEvent;
 
     if (onVideoFeedLoadFinished) {
       if (name) {
@@ -177,8 +186,17 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
           error.reason = reason;
         }
         onVideoFeedLoadFinished(error);
-        if (!this._loaded) {
-          onVideoFeedEmpty?.(error);
+        if (Platform.OS === 'android') {
+          if (
+            action === FWNativeErrorAction.loadingFirstPage ||
+            !this._loaded
+          ) {
+            onVideoFeedEmpty?.(error);
+          }
+        } else {
+          if (!this._loaded) {
+            onVideoFeedEmpty?.(error);
+          }
         }
       } else {
         onVideoFeedLoadFinished();
@@ -248,6 +266,19 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     }
   };
 
+  private _onVideoFeedGetFeedId = (event: NativeSyntheticEvent<any>) => {
+    FWLoggerUtil.log(
+      `VideoFeed onVideoFeedGetFeedId ${JSON.stringify(event.nativeEvent)}`
+    );
+    const { onVideoFeedGetFeedId } = this.props;
+
+    const { feedId } = event.nativeEvent;
+
+    if (onVideoFeedGetFeedId) {
+      onVideoFeedGetFeedId(feedId ?? '');
+    }
+  };
+
   /**
    * @ignore
    */
@@ -387,11 +418,22 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     const shareBaseURL = videoPlayerConfiguration?.shareBaseURL;
     const ctaWidth = videoPlayerConfiguration?.ctaWidth;
     const buttonConfiguration = videoPlayerConfiguration?.buttonConfiguration;
+    const videoPlayerLogoConfigurationJsonKey = gennerateJsonKey(
+      videoPlayerConfiguration?.videoPlayerLogoConfiguration
+    );
+    const countdownTimerConfigurationJsonKey = gennerateJsonKey(
+      videoPlayerConfiguration?.countdownTimerConfiguration
+    );
     const showVideoDetailTitle = videoPlayerConfiguration?.showVideoDetailTitle;
     const requiresAds = adConfiguration?.requiresAds;
     const adsFetchTimeout = adConfiguration?.adsFetchTimeout;
     const vastAttributesString = this._generateVastAttributesString();
-
+    const replayBadgeVideoFeedConfigurationJsonKey = gennerateJsonKey(
+      videoFeedConfiguration?.replayBadge
+    );
+    const replayBadgeVideoPlayerConfigurationJsonKey = gennerateJsonKey(
+      videoPlayerConfiguration?.replayBadgeConfiguration
+    );
     let key = `gShareBaseURL:${gShareBaseURL}`;
     if (Platform.OS === 'ios') {
       key += `_appLanguage:${appLanguage}`;
@@ -470,12 +512,18 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
       key += `_buttonConfiguration.pauseButton:${this._generateButtonInfoString(
         buttonConfiguration?.pauseButton
       )}`;
+      key += `_videoPlayerLogoConfiguration:${videoPlayerLogoConfigurationJsonKey}`;
+      key += `_countdownTimerConfiguration:${countdownTimerConfigurationJsonKey}`;
       key += `_showVideoDetailTitle:${showVideoDetailTitle}`;
     }
 
     key += `_requiresAds:${requiresAds}`;
     key += `_adsFetchTimeout:${adsFetchTimeout}`;
     key += `_vastAttributes:${vastAttributesString}`;
+    key += `_replayBadgeVideoFeedConfiguration:${replayBadgeVideoFeedConfigurationJsonKey}`;
+    key += `_replayBadgeVideoPlayerConfiguration:${replayBadgeVideoPlayerConfigurationJsonKey}`;
+
+    console.log('video feed key', key);
 
     return (
       <FWVideoFeed
@@ -493,6 +541,7 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
         onVideoFeedDidStopPictureInPicture={
           this._onVideoFeedDidStopPictureInPicture
         }
+        onVideoFeedGetFeedId={this._onVideoFeedGetFeedId}
         mode={mode ?? 'row'}
       />
     );