react-native-firework-sdk 2.10.0 → 2.11.0

package/lib/typescript/components/StoryBlock.d.ts

@@ -18,6 +18,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;
 }
 /**
  * The props type of StoryBlock component.
@@ -83,7 +95,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;
     /**
@@ -94,6 +105,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;
 }
 declare const _default: React.ForwardRefExoticComponent<IStoryBlockProps & React.RefAttributes<IStoryBlockMethods>>;
 export default _default;

package/lib/typescript/components/VideoFeed.d.ts

@@ -83,7 +83,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;
     /**
@@ -94,6 +93,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 {
     sdkInitCalled: boolean;
@@ -117,6 +122,7 @@ declare class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState
     private _onVideoFeedEmpty;
     private _onVideoFeedDidStartPictureInPicture;
     private _onVideoFeedDidStopPictureInPicture;
+    private _onVideoFeedGetFeedId;
     /**
      * @ignore
      */

package/lib/typescript/index.d.ts

@@ -15,7 +15,7 @@ import type AndroidFontInfo from './models/AndroidFontInfo';
 import type ButtonInfo from './models/ButtonInfo';
 import type FeedItemDetails from './models/FeedItemDetails';
 import type FWError from './models/FWError';
-import type { CustomClickLinkButtonEvent, CustomCTAClickEvent, CustomTapProductCardEvent, LiveStreamChatEvent, LiveStreamEvent, PlayerHandler, SDKInitEvent, ShoppingCTAEvent, UpdateProductDetailsEvent, VideoFeedClickEvent, VideoPlaybackEvent } from './models/FWEvents';
+import type { CustomClickCartIconEvent, CustomClickLinkButtonEvent, CustomCTAClickEvent, CustomTapProductCardEvent, LiveStreamChatEvent, LiveStreamEvent, PlayerHandler, SDKInitEvent, ShoppingCTAEvent, UpdateProductDetailsEvent, VideoFeedClickEvent, VideoPlaybackEvent } from './models/FWEvents';
 import type GradientDrawable from './models/GradientDrawable';
 import type { GradientDrawableOrientation } from './models/GradientDrawable';
 import type IOSFontInfo from './models/IOSFontInfo';
@@ -56,4 +56,4 @@ import VideoFeedUtil from './utils/VideoFeedUtil';
 import type { CustomClickCartIconCallback, CustomClickLinkButtonCallback, CustomTapProductCardCallback, ShoppingCTACallback, UpdateProductDetailsCallback } from './VideoShopping';
 import VideoShopping from './VideoShopping';
 export default FireworkSDK;
-export { AdBadgeConfiguration, AdBadgeTextType, AdConfiguration, AndroidFontInfo, ButtonInfo, CustomClickCartIconCallback, CustomClickLinkButtonCallback, CustomClickLinkButtonEvent, CustomCTAClickCallback, CustomCTAClickEvent, CustomTapProductCardCallback, CustomTapProductCardEvent, FeedItemDetails, FireworkSDK, FWError, FWNavigator, GradientDrawable, GradientDrawableOrientation, IOSFontInfo, IOSSystemFontStyle, IOSSystemFontWeight, IStoryBlockMethods, IStoryBlockProps, IVideoFeedProps, LinkButtonConfiguration, LiveStream, LiveStreamChatEvent, LiveStreamChatEventName, LiveStreamEvent, LiveStreamEventDetails, LiveStreamEventName, LiveStreamMessageDetails, onLiveStreamChatEventCallback, onLiveStreamEventCallback, OpenVideoPlayerConfiguration, PlayerHandler, Product, ProductCardConfiguration, ProductCardCTAButtonStyle, ProductCardCTAButtonText, ProductCardIconConfiguration, ProductCardLabelConfiguration, ProductCardPriceConfiguration, ProductCardPriceLabelAxis, ProductCardTheme, ProductInfoViewConfiguration, ProductPrice, ProductUnit, ProductUnitOption, PushRNContainerParams, RNAppProps, SDKInitCallback, SDKInitEvent, SDKInitOptions, ShoppingCTAButtonConfiguration, ShoppingCTAButtonText, ShoppingCTACallback, ShoppingCTAEvent, ShoppingCTAResult, StoryBlock, StoryBlockConfiguration, StoryBlockSource, TrackPurchaseParameters, UpdateProductDetailsCallback, UpdateProductDetailsEvent, VastAttribute, VideoFeed, VideoFeedClickCallback, VideoFeedClickEvent, VideoFeedConfiguration, VideoFeedMode, VideoFeedPadding, VideoFeedPlayIconConfiguration, VideoFeedSource, VideoFeedTitleConfiguration, VideoFeedTitlePosition, VideoFeedUtil, VideoLaunchBehavior, VideoPlaybackCallback, VideoPlaybackDetails, VideoPlaybackEvent, VideoPlaybackEventName, VideoPlayerButtonConfiguration, VideoPlayerCompleteAction, VideoPlayerConfiguration, VideoPlayerCTADelay, VideoPlayerCTADelayType, VideoPlayerCTAStyle, VideoPlayerCTAWidth, VideoPlayerLogoConfiguration, VideoPlayerLogoOption, VideoPlayerSize, VideoPlayerStyle, VideoShopping, };
+export { AdBadgeConfiguration, AdBadgeTextType, AdConfiguration, AndroidFontInfo, ButtonInfo, CustomClickCartIconCallback, CustomClickCartIconEvent, CustomClickLinkButtonCallback, CustomClickLinkButtonEvent, CustomCTAClickCallback, CustomCTAClickEvent, CustomTapProductCardCallback, CustomTapProductCardEvent, FeedItemDetails, FireworkSDK, FWError, FWNavigator, GradientDrawable, GradientDrawableOrientation, IOSFontInfo, IOSSystemFontStyle, IOSSystemFontWeight, IStoryBlockMethods, IStoryBlockProps, IVideoFeedProps, LinkButtonConfiguration, LiveStream, LiveStreamChatEvent, LiveStreamChatEventName, LiveStreamEvent, LiveStreamEventDetails, LiveStreamEventName, LiveStreamMessageDetails, onLiveStreamChatEventCallback, onLiveStreamEventCallback, OpenVideoPlayerConfiguration, PlayerHandler, Product, ProductCardConfiguration, ProductCardCTAButtonStyle, ProductCardCTAButtonText, ProductCardIconConfiguration, ProductCardLabelConfiguration, ProductCardPriceConfiguration, ProductCardPriceLabelAxis, ProductCardTheme, ProductInfoViewConfiguration, ProductPrice, ProductUnit, ProductUnitOption, PushRNContainerParams, RNAppProps, SDKInitCallback, SDKInitEvent, SDKInitOptions, ShoppingCTAButtonConfiguration, ShoppingCTAButtonText, ShoppingCTACallback, ShoppingCTAEvent, ShoppingCTAResult, StoryBlock, StoryBlockConfiguration, StoryBlockSource, TrackPurchaseParameters, UpdateProductDetailsCallback, UpdateProductDetailsEvent, VastAttribute, VideoFeed, VideoFeedClickCallback, VideoFeedClickEvent, VideoFeedConfiguration, VideoFeedMode, VideoFeedPadding, VideoFeedPlayIconConfiguration, VideoFeedSource, VideoFeedTitleConfiguration, VideoFeedTitlePosition, VideoFeedUtil, VideoLaunchBehavior, VideoPlaybackCallback, VideoPlaybackDetails, VideoPlaybackEvent, VideoPlaybackEventName, VideoPlayerButtonConfiguration, VideoPlayerCompleteAction, VideoPlayerConfiguration, VideoPlayerCTADelay, VideoPlayerCTADelayType, VideoPlayerCTAStyle, VideoPlayerCTAWidth, VideoPlayerLogoConfiguration, VideoPlayerLogoOption, VideoPlayerSize, VideoPlayerStyle, VideoShopping, };

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

@@ -14,12 +14,12 @@ export interface SDKInitEvent {
 }
 export interface PlayerHandler {
     /**
-     * Pause the video playback associated with this CTA.
+     * Pause The video playback associated with this CTA.
      * Only supported on iOS
      */
     pause: () => void;
     /**
-     * Resume the video playback associated with this CTA.
+     * Resume The video playback associated with this CTA.
      * Only supported on iOS
      */
     resume: () => void;
@@ -34,6 +34,10 @@ export interface CustomCTAClickEvent {
      * Only supported on iOS
      */
     playerHandler?: PlayerHandler;
+    /**
+     * The video playback details for the event.
+     */
+    video: VideoPlaybackDetails;
 }
 export interface VideoPlaybackEvent {
     eventName: VideoPlaybackEventName;
@@ -55,12 +59,20 @@ export interface ShoppingCTAEvent {
      * A unique identifier of the product unit.
      */
     unitId: string;
+    /**
+     * The video playback details for the event.
+     */
+    video: VideoPlaybackDetails;
 }
 export interface UpdateProductDetailsEvent {
     /**
      * A unique identifier list of the products.
      */
     productIds: string[];
+    /**
+     * The video playback details for the event.
+     */
+    video: VideoPlaybackDetails;
 }
 export interface CustomClickLinkButtonEvent {
     /**
@@ -75,6 +87,11 @@ export interface CustomClickLinkButtonEvent {
      * A unique identifier of the product unit.
      */
     unitId: string;
+    /**
+     * The video playback details for the event.
+     * Only supported on Android.
+     */
+    video?: VideoPlaybackDetails;
 }
 export interface CustomTapProductCardEvent {
     /**
@@ -90,7 +107,7 @@ export interface CustomTapProductCardEvent {
      */
     unitId: string;
     /**
-     * the video playback details that the product unit belongs to.
+     * The video playback details for the event.
      */
     video: VideoPlaybackDetails;
     /**
@@ -107,3 +124,9 @@ export interface LiveStreamChatEvent {
     message: LiveStreamMessageDetails;
     liveStream: LiveStreamEventDetails;
 }
+export interface CustomClickCartIconEvent {
+    /**
+     * The video playback details for the event.
+     */
+    video: VideoPlaybackDetails;
+}

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

@@ -0,0 +1,4 @@
+export declare enum FWNativeErrorAction {
+    loadingFirstPage = "loadingFirstPage",
+    loadingNextPage = "loadingNextPage"
+}

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

@@ -50,5 +50,10 @@ export default interface FeedItemDetails {
      * For instance, (and sport food) (or sport food) (and sport (or food comedy)) sport are all valid expressions.
      * Non-UTF-8 characters are not allowed. If using boolean predicates, the expression needs to be wrapped with parenthesis.
      */
-    hashtagFilterExpression?: string;
+    hashtagFilterExpression?: string | null;
+    /**
+     * The feed id for the item.
+     * Only supported on Android.
+     */
+    feedId?: string | null;
 }

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

@@ -0,0 +1,7 @@
+export interface ReplayBadgeConfiguration {
+    /**
+     * Indicates if the replay badge is hidden.
+     * Defaults to false.
+     */
+    isHidden?: boolean;
+}

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

@@ -1,3 +1,4 @@
+import type { ReplayBadgeConfiguration } from './ReplayBadgeConfiguration';
 import type VideoPlayerButtonConfiguration from './VideoPlayerButtonConfiguration';
 import type { VideoPlayerCTADelay } from './VideoPlayerCTADelay';
 import type { VideoPlayerCTAStyle } from './VideoPlayerCTAStyle';
@@ -72,7 +73,11 @@ export interface StoryBlockConfiguration {
     /**
      * 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;
 }

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,7 @@ 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';
 export default interface VideoPlayerConfiguration {
     /**
      * Sets the proportion of the video player to its container.
@@ -70,7 +71,11 @@ 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;
 }

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.0",
+  "version": "2.11.0",
   "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,9 @@ const StoryBlock: ForwardRefRenderFunction<
     const productInfoViewConfigurationJsonKey = gennerateJsonKey(
       FireworkSDK.getInstance().shopping.productInfoViewConfiguration
     );
+    const replayBadgeConfigurationJsonKey = gennerateJsonKey(
+      storyBlockConfiguration?.replayBadgeConfiguration
+    );
 
     let key = `gShareBaseURL:${gShareBaseURL}`;
     if (Platform.OS === 'ios') {
@@ -391,18 +429,24 @@ 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}`;
 
     return key;
   };
 
   const key = generateKey();
 
+  console.log('story block key', key);
+
   useImperativeHandle(
     forwardedRef,
     () => {
@@ -414,12 +458,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 +477,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 +555,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 +596,7 @@ const StoryBlock: ForwardRefRenderFunction<
       onStoryBlockDidStopPictureInPicture={
         handleStoryBlockDidStopPictureInPicture
       }
+      onStoryBlockGetFeedId={handleStoryBlockGetFeedId}
     />
   );
 };