react-native-firework-sdk 2.0.0-beta.1 → 2.0.0-beta.5

package/src/FireworkSDK.ts

@@ -10,6 +10,8 @@ import type {
   VideoFeedClickEvent,
   VideoPlaybackEvent,
 } from './models/FWEvents';
+import type SDKInitOptions from './models/SDKInitOptions';
+import type { VideoLaunchBehavior } from './models/SDKInitOptions';
 import type TrackPurchaseParameters from './models/TrackPurchaseParameters';
 import type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';
 import FireworkSDKModule, {
@@ -26,7 +28,7 @@ export type VideoPlaybackCallback = (event: VideoPlaybackEvent) => void;
 export type VideoFeedClickCallback = (event: VideoFeedClickEvent) => void;
 
 /**
- * Entry class of Firework SDK, which supports the sdk initialization and global configuration.
+ * Firework SDK.
  */
 class FireworkSDK {
   private static _instance?: FireworkSDK;
@@ -67,39 +69,34 @@ class FireworkSDK {
   private _onVideoPlayback?: VideoPlaybackCallback | undefined;
 
   /**
-   * The share base URL of videos. Only supported on iOS.
+   * Get share base URL.
    */
-  public get shareBaseURL(): string | undefined {
+  public getShareBaseURL(): string | undefined {
     return this._shareBaseURL;
   }
-  public set shareBaseURL(value: string | undefined) {
-    const valueHasChanged = this._shareBaseURL !== value;
-    this._shareBaseURL = value;
-    FireworkSDKModule.setShareBaseURL(value ?? '').then(() => {
-      if (valueHasChanged) {
-        this.eventEmitter.emit(FWEventName.ShareBaseURLUpdated);
-      }
-    });
-  }
   private _shareBaseURL: string | undefined;
 
   /**
-   * The configuration for ad badges. Only supported on iOS.
+   * Get the configuration for ad badges. Only supported on iOS.
    */
-  public get adBadgeConfiguration(): AdBadgeConfiguration | undefined {
+  public getAdBadgeConfiguration(): AdBadgeConfiguration | undefined {
     return this._adBadgeConfiguration;
   }
-  public set adBadgeConfiguration(value: AdBadgeConfiguration | undefined) {
+  /**
+   * Set the configuration for ad badges. Only supported on iOS.
+   */
+  public async setAdBadgeConfiguration(
+    value: AdBadgeConfiguration | undefined
+  ): Promise<void> {
+    await FireworkSDKModule.setAdBadgeConfiguration(value ?? {});
     const valueHasChanged =
       this._adBadgeConfiguration?.badgeTextType !== value?.badgeTextType ||
       this._adBadgeConfiguration?.backgroundColor !== value?.backgroundColor ||
       this._adBadgeConfiguration?.textColor !== value?.textColor;
     this._adBadgeConfiguration = value;
-    FireworkSDKModule.setAdBadgeConfiguration(value ?? {}).then(() => {
-      if (valueHasChanged) {
-        this.eventEmitter.emit(FWEventName.AdBadgeConfigurationUpdated);
-      }
-    });
+    if (valueHasChanged) {
+      this.eventEmitter.emit(FWEventName.AdBadgeConfigurationUpdated);
+    }
   }
   private _adBadgeConfiguration: AdBadgeConfiguration | undefined;
 
@@ -114,6 +111,14 @@ class FireworkSDK {
     FWLoggerUtil.enabled = value;
   }
 
+  /**
+   * Get video launch behavior.
+   */
+  public getVideoLaunchBehavior(): VideoLaunchBehavior | undefined {
+    return this._videoLaunchBehavior;
+  }
+  private _videoLaunchBehavior: VideoLaunchBehavior | undefined;
+
   private get eventEmitter(): NativeEventEmitter {
     return FireworkSDKModuleEventEmitter;
   }
@@ -197,12 +202,25 @@ class FireworkSDK {
 
   /**
    * Initializes Firework SDK.
-   * @param {string?} userId An id to uniquely identify device or user.
+   * @param {SDKInitOptions?} options
    */
-  public init(userId?: string) {
+  public async init(options?: SDKInitOptions): Promise<void> {
     FWLoggerUtil.log('Call FireworkSDK init method');
 
-    FireworkSDKModule.init(userId);
+    FireworkSDKModule.init(options).then(() => {
+      const shareBaseURLChanged = this._shareBaseURL !== options?.shareBaseURL;
+      this._shareBaseURL = options?.shareBaseURL;
+      if (shareBaseURLChanged) {
+        this.eventEmitter.emit(FWEventName.ShareBaseURLUpdated);
+      }
+
+      const videoLaunchBehaviorUpdated =
+        this._videoLaunchBehavior !== options?.videoLaunchBehavior;
+      this._videoLaunchBehavior = options?.videoLaunchBehavior;
+      if (videoLaunchBehaviorUpdated) {
+        this.eventEmitter.emit(FWEventName.VideoLaunchBehaviorUpdated);
+      }
+    });
     ShoppingModule.init();
     LiveStreamModule.init();
   }
@@ -229,7 +247,7 @@ class FireworkSDK {
   /**
    * Change App level language. Only supported on Android.
    * @param {string} language Such as en, ar and en-US
-   * @returns
+   * @returns {Promise<boolean>}
    */
   public async changeAppLanguage(language: string): Promise<boolean> {
     if (Platform.OS === 'android') {

package/src/VideoShopping.ts

@@ -1,12 +1,12 @@
 import { NativeEventEmitter, Platform } from 'react-native';
 
 import type AddToCartResult from './models/AddToCartResult';
+import { FWEventName } from './models/FWEventName';
 import type {
   AddToCartEvent,
   CustomClickLinkButtonEvent,
   UpdateProductDetailsEvent,
 } from './models/FWEvents';
-import { FWEventName } from './models/FWEventName';
 import type Product from './models/Product';
 import type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';
 import ShoppingModule, {
@@ -28,8 +28,6 @@ export type CustomClickLinkButtonCallback = (
   event: CustomClickLinkButtonEvent
 ) => Promise<void>;
 
-type CallbackInfo = { callbackId?: number | string };
-
 /**
  * The entry class of video shopping.
  */
@@ -188,7 +186,7 @@ class VideoShopping {
     ShoppingModule.setCartItemCount(count);
   }
 
-  private async handleAddToCartEvent(event: AddToCartEvent & CallbackInfo) {
+  private async handleAddToCartEvent(event: any) {
     const callbackId = event.callbackId;
     delete event.callbackId;
     if (this.onAddToCart) {
@@ -223,9 +221,7 @@ class VideoShopping {
     }
   }
 
-  private async handleUpdateProductDetailsEvent(
-    event: UpdateProductDetailsEvent & CallbackInfo
-  ) {
+  private async handleUpdateProductDetailsEvent(event: any) {
     const callbackId = event.callbackId;
     delete event.callbackId;
     if (this.onUpdateProductDetails) {

package/src/components/StoryBlock.tsx

@@ -30,6 +30,9 @@ const createFragment = (viewId: any) => {
   }
 };
 
+/**
+ * The props type of StoryBlock component.
+ */
 export interface IStoryBlockProps {
   /**
    * Standard React Native View Style.
@@ -62,9 +65,9 @@ export interface IStoryBlockProps {
 }
 
 /**
- * Only supported on iOS.
+ * StoryBlock component. Only supported on iOS.
  */
-export default class StoryBlock extends React.Component<IStoryBlockProps> {
+class StoryBlock extends React.Component<IStoryBlockProps> {
   nativeComponentRef = React.createRef<any>();
 
   subscriptions: EmitterSubscription[] = [];
@@ -87,6 +90,16 @@ export default class StoryBlock extends React.Component<IStoryBlockProps> {
       );
     this.subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
 
+    const subscriptionOfVideoLaunchBehaviorUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.VideoLaunchBehaviorUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
+          this.setState({});
+        }
+      );
+    this.subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
+
     if (Platform.OS === 'android') {
       const viewId = findNodeHandle(this.nativeComponentRef.current);
       FWLoggerUtil.log(
@@ -147,14 +160,16 @@ export default class StoryBlock extends React.Component<IStoryBlockProps> {
       enablePictureInPicture = false,
     } = this.props;
 
-    const shareBaseURL = FireworkSDK.getInstance().shareBaseURL ?? '';
+    const shareBaseURL = FireworkSDK.getInstance().getShareBaseURL() ?? '';
     const adBadgeConfiguration =
-      FireworkSDK.getInstance().adBadgeConfiguration ?? {};
+      FireworkSDK.getInstance().getAdBadgeConfiguration() ?? {};
     const adBadgeTextType = adBadgeConfiguration.badgeTextType ?? '';
     const backgroundColorOfAdBadge = adBadgeConfiguration.backgroundColor ?? '';
     const textColorOfAdBadge = adBadgeConfiguration.textColor ?? '';
     const dynamicContentParametersString =
       this._generateDynamicContentParametersString();
+    const videoLaunchBehavior =
+      FireworkSDK.getInstance().getVideoLaunchBehavior() ?? 'default';
 
     let key = `source:${source}`;
     key += `_channel:${channel}`;
@@ -165,6 +180,7 @@ export default class StoryBlock extends React.Component<IStoryBlockProps> {
     key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
+    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
 
     return key;
   }
@@ -191,3 +207,5 @@ export default class StoryBlock extends React.Component<IStoryBlockProps> {
     return resultString;
   }
 }
+
+export default StoryBlock;

package/src/components/VideoFeed.tsx

@@ -23,6 +23,9 @@ import FWVideoFeed from './FWVideoFeed';
 
 export type VideoFeedMode = 'row' | 'column' | 'grid';
 
+/**
+ * The props of VideoFeed component.
+ */
 export interface IVideoFeedProps {
   /**
    * Standard React Native View Style.
@@ -76,7 +79,10 @@ export interface IVideoFeedProps {
 
 const NativeComponentName = 'FWVideoFeed';
 
-export default class VideoFeed extends React.Component<IVideoFeedProps> {
+/**
+ * VideoFeed component.
+ */
+class VideoFeed extends React.Component<IVideoFeedProps> {
   static defaultProps = {
     mode: 'row',
   };
@@ -151,6 +157,16 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
         }
       );
     this.subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
+
+    const subscriptionOfVideoLaunchBehaviorUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.VideoLaunchBehaviorUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
+          this.setState({});
+        }
+      );
+    this.subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
   }
 
   componentWillUnmount() {
@@ -180,10 +196,9 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
     const videoFeedConfiguration = this._getVideoFeedConfiguration();
     const titleHidden = videoFeedConfiguration?.title?.hidden ?? false;
     const titlePosition = videoFeedConfiguration?.titlePosition ?? 'nested';
-    const customLayoutName = videoFeedConfiguration?.customLayoutName ?? '';
-    const shareBaseURL = FireworkSDK.getInstance().shareBaseURL ?? '';
+    const shareBaseURL = FireworkSDK.getInstance().getShareBaseURL() ?? '';
     const adBadgeConfiguration =
-      FireworkSDK.getInstance().adBadgeConfiguration ?? {};
+      FireworkSDK.getInstance().getAdBadgeConfiguration() ?? {};
     const adBadgeTextType = adBadgeConfiguration.badgeTextType ?? '';
     const backgroundColorOfAdBadge = adBadgeConfiguration.backgroundColor ?? '';
     const textColorOfAdBadge = adBadgeConfiguration.textColor ?? '';
@@ -191,16 +206,13 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
       this._generateDynamicContentParametersString();
     const enableAutoplay = videoFeedConfiguration?.enableAutoplay ?? false;
 
-    let enablePictureInPictureLegacy = false;
-    if (videoFeedConfiguration) {
-      enablePictureInPictureLegacy =
-        (videoFeedConfiguration as any).enablePictureInPicture ?? false;
-    }
     const gridColumns = videoFeedConfiguration?.gridColumns ?? 2;
     const requiresAds = adConfiguration?.requiresAds ?? false;
     const adsFetchTimeout = adConfiguration?.adsFetchTimeout ?? 10;
     const vastAttributesString = this._generateVastAttributesString();
     const showAdBadge = videoFeedConfiguration?.showAdBadge ?? false;
+    const videoLaunchBehavior =
+      FireworkSDK.getInstance().getVideoLaunchBehavior() ?? 'default';
 
     let key = `source:${source}`;
     key += `_channel:${channel}`;
@@ -209,7 +221,6 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
     key += `_mode:${mode}`;
     key += `_titleHidden:${titleHidden}`;
     key += `_titlePosition:${titlePosition}`;
-    key += `_customLayoutName:${customLayoutName}`;
     key += `_shareBaseURL:${shareBaseURL}`;
     key += `_adBadgeTextType:${adBadgeTextType}`;
     key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
@@ -217,12 +228,12 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_enableAutoplay:${enableAutoplay}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
-    key += `_enablePictureInPictureLegacy:${enablePictureInPictureLegacy}`;
     key += `_gridColumns:${gridColumns}`;
     key += `_requiresAds:${requiresAds}`;
     key += `_adsFetchTimeout:${adsFetchTimeout}`;
     key += `_vastAttributes:${vastAttributesString}`;
     key += `_showAdBadge:${showAdBadge}`;
+    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
 
     return (
       <FWVideoFeed
@@ -295,3 +306,5 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
     }
   }
 }
+
+export default VideoFeed;

package/src/index.ts

@@ -1,3 +1,4 @@
+import type { IStoryBlockProps } from './components/StoryBlock';
 import StoryBlock from './components/StoryBlock';
 import type { IVideoFeedProps, VideoFeedMode } from './components/VideoFeed';
 import VideoFeed from './components/VideoFeed';
@@ -19,6 +20,7 @@ import type { AdBadgeTextType } from './models/AdBadgeConfiguration';
 import type AdConfiguration from './models/AdConfiguration';
 import type { VastAttribute } from './models/AdConfiguration';
 import type AddToCartResult from './models/AddToCartResult';
+import type AndroidFontInfo from './models/AndroidFontInfo';
 import type FeedItemDetails from './models/FeedItemDetails';
 import type FWError from './models/FWError';
 import type {
@@ -29,6 +31,7 @@ import type {
   LiveStreamEvent,
   SDKInitEvent,
   UpdateProductDetailsEvent,
+  VideoFeedClickEvent,
   VideoPlaybackEvent,
 } from './models/FWEvents';
 import type IOSFontInfo from './models/IOSFontInfo';
@@ -48,6 +51,8 @@ import type {
 } from './models/ProductInfoViewConfiguration';
 import type ProductUnit from './models/ProductUnit';
 import type { ProductPrice, ProductUnitOption } from './models/ProductUnit';
+import type SDKInitOptions from './models/SDKInitOptions';
+import type { VideoLaunchBehavior } from './models/SDKInitOptions';
 import type { StoryBlockSource } from './models/StoryBlockSource';
 import type TrackPurchaseParameters from './models/TrackPurchaseParameters';
 import type VideoFeedConfiguration from './models/VideoFeedConfiguration';
@@ -63,7 +68,6 @@ import type { VideoPlayerSize } from './models/VideoPlaybackDetails';
 import VideoPlaybackEventName from './models/VideoPlaybackEventName';
 import type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';
 import type {
-  VideoLaunchBehavior,
   VideoPlayerCompleteAction,
   VideoPlayerCTADelay,
   VideoPlayerCTADelayType,
@@ -88,17 +92,20 @@ export {
   AddToCartCallback,
   AddToCartEvent,
   AddToCartResult,
+  AndroidFontInfo,
   CustomClickCartIconCallback,
   CustomClickLinkButtonCallback,
   CustomClickLinkButtonEvent,
   CustomCTAClickCallback,
   CustomCTAClickEvent,
   FeedItemDetails,
+  FireworkSDK,
   FWError,
   FWNavigator,
   IOSFontInfo,
   IOSSystemFontStyle,
   IOSSystemFontWeight,
+  IStoryBlockProps,
   IVideoFeedProps,
   LinkButtonConfiguration,
   LiveStream,
@@ -117,6 +124,7 @@ export {
   ProductUnitOption,
   SDKInitCallback,
   SDKInitEvent,
+  SDKInitOptions,
   StoryBlock,
   StoryBlockSource,
   TrackPurchaseParameters,
@@ -125,6 +133,7 @@ export {
   VastAttribute,
   VideoFeed,
   VideoFeedClickCallback,
+  VideoFeedClickEvent,
   VideoFeedConfiguration,
   VideoFeedContentPadding,
   VideoFeedMode,

package/src/models/AndroidFontInfo.ts

@@ -0,0 +1,14 @@
+/**
+ * Only supported on Android.
+ */
+export default interface AndroidFontInfo {
+  /**
+   * Whether to use a custom font. Default is false.
+   */
+  isCustom?: boolean;
+  /**
+   * The Android system typeface name, such as "DEFAULT", "DEFAULT_BOLD", "SANS_SERIF", "SERIF", "MONOSPACE".
+   * Or custom font name, such as: "fonts/kaushanscript_regular.ttf". (You need to set the isCustom=true and put the font file in the "assets" directory: app/src/main/assets/fonts/kaushanscript_regular.ttf)
+   */
+  typefaceName?: string;
+}

package/src/models/FWEventName.ts

@@ -9,6 +9,7 @@ export enum FWEventName {
   LiveStream = 'fw:livestream',
   LiveStreamChat = 'fw:livestream-chat',
   ShareBaseURLUpdated = 'fw:share-base-url-updated',
+  VideoLaunchBehaviorUpdated = 'fw:video-launch-behavior-updated',
   AdBadgeConfigurationUpdated = 'fw:ad-badge-configuration-updated',
   LogMessage = 'fw:log-message',
   CustomLinkButtonClick = 'fw:shopping:custom-link-button-click',

package/src/models/SDKInitOptions.ts

@@ -0,0 +1,7 @@
+export type VideoLaunchBehavior = 'default' | 'muteOnFirstLaunch';
+
+export default interface SDKInitOptions {
+  userId?: string;
+  shareBaseURL?: string;
+  videoLaunchBehavior?: VideoLaunchBehavior;
+}

package/src/models/VideoFeedConfiguration.ts

@@ -1,4 +1,5 @@
 import type IOSFontInfo from './IOSFontInfo';
+import type AndroidFontInfo from './AndroidFontInfo';
 
 export interface VideoFeedTitleConfiguration {
   /**
@@ -14,11 +15,17 @@ export interface VideoFeedTitleConfiguration {
    */
   fontSize?: number;
   /**
-   * The iOS font info of "Add to cart" button.
+   * The iOS font info of video feed title.
    * The property is ignored when fontSize is not set.
    * Only supported on iOS.
    */
   iOSFontInfo?: IOSFontInfo;
+  /**
+   * The Android font info of "VideoFeedTitle".
+   * The property is ignored when fontSize is not set.
+   * Only supported on Android.
+   */
+  androidFontInfo?: AndroidFontInfo;
 }
 
 export interface VideoFeedPlayIconConfiguration {
@@ -60,10 +67,6 @@ export default interface VideoFeedConfiguration {
    * Indicates if the video feed item shows ad badge.
    */
   showAdBadge?: boolean;
-  /**
-   * Custom layout name for video feed item. Only supported on Android. Deprecate
-   */
-  customLayoutName?: string;
   /**
    * The aspect ratio(width / height) for video feed item. Only supported on iOS.
    */
@@ -86,10 +89,4 @@ export default interface VideoFeedConfiguration {
    * The property value needs to be an integer and greater than 0.
    */
   gridColumns?: number;
-  /**
-   * Please use the enablePictureInPicture in IVideoFeedProps. Deprecate
-   *
-   * @deprecated The property will be deprecated since RN SDK V2.
-   */
-  enablePictureInPicture?: boolean;
 }

package/src/models/VideoPlayerConfiguration.ts

@@ -16,7 +16,7 @@ export interface VideoPlayerCTAStyle {
    */
   fontSize?: number;
   /**
-   * The iOS font info of "Add to cart" button.
+   * The iOS font info of CTA button.
    * The property is ignored when fontSize is not set.
    * Only supported on iOS.
    */
@@ -35,8 +35,6 @@ export interface VideoPlayerCTADelay {
   value: number;
 }
 
-export type VideoLaunchBehavior = 'default' | 'muteOnFirstLaunch';
-
 export default interface VideoPlayerConfiguration {
   /**
    * Sets the proportion of the video player to its container.
@@ -62,10 +60,6 @@ export default interface VideoPlayerConfiguration {
    * Indicates if the video player shows mute button.
    */
   showMuteButton?: boolean;
-  /**
-   * Specifies the video player launch behavior. Only supported on iOS.
-   */
-  launchBehavior?: VideoLaunchBehavior;
   /**
    * Indicates if Firework branding should be showed or not.
    */

package/src/modules/FireworkSDKModule.ts

@@ -1,10 +1,10 @@
-import { NativeEventEmitter, NativeModule } from 'react-native';
-import { NativeModules } from 'react-native';
-import type AdBadgeConfiguration from '../models/AdBadgeConfiguration';
+import { NativeEventEmitter, NativeModule, NativeModules } from 'react-native';
 
 import { LINKING_ERROR } from '../constants/FWErrorMessage';
-import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
+import type AdBadgeConfiguration from '../models/AdBadgeConfiguration';
+import type SDKInitOptions from '../models/SDKInitOptions';
 import type TrackPurchaseParameters from '../models/TrackPurchaseParameters';
+import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
 
 const FireworkSDKModule = NativeModules.FireworkSDK
   ? NativeModules.FireworkSDK
@@ -18,7 +18,7 @@ const FireworkSDKModule = NativeModules.FireworkSDK
     );
 
 interface IFireworkSDKModule extends NativeModule {
-  init(userId?: string): void;
+  init(options?: SDKInitOptions): Promise<any>;
   openVideoPlayer(url: string, config?: VideoPlayerConfiguration): void;
   setCustomCTAClickEnabled(enabled: boolean): void;
   setShareBaseURL(url?: string): Promise<any>;
@@ -26,7 +26,7 @@ interface IFireworkSDKModule extends NativeModule {
   setAdBadgeConfiguration(config?: AdBadgeConfiguration): Promise<any>;
   trackPurchase(parameters: TrackPurchaseParameters): void;
   changeAppLanguage(language: string): Promise<boolean>;
-  restart(): Promise<void>;
+  restart(): Promise<any>;
 }
 
 const FireworkSDKModuleEventEmitter = new NativeEventEmitter(FireworkSDKModule);