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

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

@@ -1,21 +1,25 @@
 import type IOSFontInfo from './IOSFontInfo';
-export interface AddToCartButtonConfiguration {
+export type ShoppingCTAButtonText = 'addToCart' | 'shopNow';
+export interface ShoppingCTAButtonConfiguration {
     /**
-     * The background color of "Add to cart" button.
+     * The text of shopping CTA button.
+     */
+    text?: ShoppingCTAButtonText;
+    /**
+     * The background color of CTA button.
      */
     backgroundColor?: string;
     /**
-     * The text color of "Add to cart" button.
+     * The text color of CTA button.
      */
     textColor?: string;
     /**
-     * The font size of "Add to cart" button.
+     * The font size of CTA button.
      */
     fontSize?: number;
     /**
      * The iOS font info of "Add to cart" button.
      * The property is ignored when fontSize is not set.
-     * Only supported on iOS.
      */
     iOSFontInfo?: IOSFontInfo;
 }
@@ -24,11 +28,11 @@ export interface LinkButtonConfiguration {
 }
 export default interface ProductInfoViewConfiguration {
     /**
-     * Configuration of "Add to cart" button. Only supported on iOS.
+     * Configuration of shopping CTA button. Only supported on iOS.
      */
-    addToCartButton?: AddToCartButtonConfiguration;
+    ctaButton?: ShoppingCTAButtonConfiguration;
     /**
-     * Configuration of link button next to "Add to cart" button. Only supported on iOS.
+     * Configuration of link button next to "Add to cart" button.
      */
     linkButton?: LinkButtonConfiguration;
 }

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

@@ -1,6 +1,11 @@
 export type VideoLaunchBehavior = 'default' | 'muteOnFirstLaunch';
 export default interface SDKInitOptions {
+    /**
+     * Custom value to identify the current user.
+     */
     userId?: string;
-    shareBaseURL?: string;
+    /**
+     * Behavior occurring after video is launched.
+     */
     videoLaunchBehavior?: VideoLaunchBehavior;
 }

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

@@ -0,0 +1,11 @@
+export default interface ShoppingCTAResult {
+    /**
+     * The result of shopping CTA button.
+     */
+    res: 'success' | 'fail';
+    /**
+     * We will show a toast to display the tips.
+     * If the property is undefined or empty string, we don't show a toast.
+     */
+    tips?: string;
+}

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

@@ -1 +1 @@
-export type StoryBlockSource = 'discover' | 'channel' | 'playlist' | 'dynamicContent';
+export type StoryBlockSource = 'discover' | 'channel' | 'playlist' | 'dynamicContent' | 'hashtagPlaylist';

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

@@ -1 +1 @@
-export type VideoFeedSource = 'discover' | 'channel' | 'playlist' | 'playlistGroup' | 'dynamicContent';
+export type VideoFeedSource = 'discover' | 'channel' | 'playlist' | 'playlistGroup' | 'dynamicContent' | 'hashtagPlaylist';

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

@@ -27,4 +27,20 @@ export default interface VideoPlaybackDetails {
      * Indicates if the video is associated with a call-to-action (CTA).
      */
     hasCTA?: boolean | null;
+    /**
+     * The amount of time the video was playing at the time of the event.
+     */
+    progress?: number | null;
+    /**
+     * The type of the CTA button clicked: "buy" "download" "view" "book".
+     */
+    ctaActionType?: string | null;
+    /**
+     * The url of the CTA button clicked.
+     */
+    ctaActionURL?: string | null;
+    /**
+     * The associated feed ID
+     */
+    feedId?: string | null;
 }

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

@@ -7,6 +7,14 @@ declare enum VideoPlaybackEventName {
      * Video started.
      */
     Start = "fw:video:start",
+    /**
+     * Video paused.
+     */
+    Pause = "fw:video:pause",
+    /**
+     * Video resume.
+     */
+    Resume = "fw:video:resume",
     /**
      * Video reached 25%.
      */
@@ -24,7 +32,11 @@ declare enum VideoPlaybackEventName {
      */
     Complete = "fw:video:complete",
     /**
-     * When ad video finishes playing.
+     * Ad video started playing.
+     */
+    AdStart = "fw:video:ad-start",
+    /**
+     * Ad video completed playing.
      */
     AdEnd = "fw:video:ad-end",
     /**

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

@@ -69,4 +69,8 @@ export default interface VideoPlayerConfiguration {
      * Specifies the delay before the highlight animation occurs. Only supported on iOS.
      */
     ctaHighlightDelay?: VideoPlayerCTADelay;
+    /**
+     * The share base URL of the video.
+     */
+    shareBaseURL?: string;
 }

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

@@ -11,8 +11,7 @@ interface IFireworkSDKModule extends NativeModule {
     setVideoPlaybackEventEnabled(enabled: boolean): void;
     setAdBadgeConfiguration(config?: AdBadgeConfiguration): Promise<any>;
     trackPurchase(parameters: TrackPurchaseParameters): void;
-    changeAppLanguage(language: string): Promise<boolean>;
-    restart(): Promise<any>;
+    changeAppLanguage(language?: string | null): Promise<boolean>;
 }
 declare const FireworkSDKModuleEventEmitter: NativeEventEmitter;
 export { FireworkSDKModuleEventEmitter };

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

@@ -1,10 +1,11 @@
 import { NativeEventEmitter, NativeModule } from 'react-native';
 import type Product from '../models/Product';
 import type ProductInfoViewConfiguration from '../models/ProductInfoViewConfiguration';
+import type ShoppingCTAResult from '../models/ShoppingCTAResult';
 interface IShoppingModule extends NativeModule {
     init(): void;
     updateVideoProducts(products: Product[], callbackId: number | string): void;
-    updateAddToCartStatus(res: string, tips: string, callbackId: number | string): void;
+    updateShoppingCTAResult(result: ShoppingCTAResult, callbackId: number | string): void;
     setCartIconVisible(visible: boolean): void;
     setCartItemCount(count: number): void;
     setCustomClickCartIconEnabled(enabled: boolean): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-firework-sdk",
-  "version": "2.0.0",
+  "version": "2.2.0-beta.1",
   "description": "Firework React Native SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -13,13 +13,18 @@
     "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__",
-    "!docs/"
+    "!docs/",
+    "!README_PUBLIC_REPO.md"
   ],
   "scripts": {
     "test": "jest",
@@ -34,7 +39,7 @@
     "android"
   ],
   "repository": "",
-  "author": "",
+  "author": "Loop Now Technologies, Inc.",
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/loopsocial/react-native-firework-sdk/issues"

package/react-native-firework-sdk.podspec

@@ -1,31 +1,38 @@
-require "json"
+require 'json'
 
-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 Pod::Spec.new do |s|
-  s.name         = "react-native-firework-sdk"
-  s.version      = package["version"]
-  s.summary      = package["description"]
-  s.homepage     = package["homepage"]
-  s.license      = "Apache License, Version 2.0"
-  s.authors      = package["author"]
+  s.name         = 'react-native-firework-sdk'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = package['homepage']
+  s.license      = 'Apache License, Version 2.0'
+  s.authors      = package['author']
 
-  s.platforms    = { :ios => "12.0" }
-  s.source       = { :git => "https://github.com/loopsocial/bogano.git", :tag => "#{s.version}" }
+  s.platforms    = { ios: '12.0' }
+  s.source       = { git: 'https://github.com/loopsocial/bogano.git', tag: "#{s.version}" }
 
   s.swift_version = '5.0'
-  # s.header_dir = "ios"
-  # s.public_header_files = "ios/*.h"
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
-
-  s.script_phase = { :name => 'Copy module header files', :script => 'echo "react-native-firework-sdk module_header_path path is"
-module_header_path=${PODS_TARGET_SRCROOT}"/ios/react_native_firework_sdk.h"
-echo $module_header_path
-cp $module_header_path "${PODS_ROOT}/Headers/Public/react_native_firework_sdk/"', :execution_position => :before_compile }
-
-
-  s.dependency "React-Core"
-
-  s.dependency "FireworkVideo", "1.7.0"
-
+  s.script_phase = { name: 'Copy module header files', script: '
+module_header_path="${PODS_TARGET_SRCROOT}/ios/react_native_firework_sdk.h"
+target_header_directory="${PODS_ROOT}/Headers/Public/react_native_firework_sdk/"
+echo "module_header_path $module_header_path"
+echo "target_header_directory $target_header_directory"
+if [ -d $target_header_directory ]
+then
+  cp -f $module_header_path $target_header_directory
+fi
+', execution_position: :before_compile }
+
+  s.source_files = 'ios/**/*.{h,m,mm,swift}'
+  s.exclude_files = [
+    'ios/Support/**/*',
+    'ios/FireworkVideoUI/**/*'
+  ]
+  s.preserve_paths       = "FireworkVideoUI.xcframework"
+  s.vendored_frameworks  = "FireworkVideoUI.xcframework"
+
+  s.dependency 'React-Core'
+  s.dependency 'FireworkVideo', '1.9.0'
 end

package/src/FireworkSDK.ts

@@ -57,7 +57,7 @@ class FireworkSDK {
   private _onCustomCTAClick: CustomCTAClickCallback | undefined;
 
   /**
-   * The callback of video playback. Only supported on iOS.
+   * The callback of video playback.
    */
   public get onVideoPlayback(): VideoPlaybackCallback | undefined {
     return this._onVideoPlayback;
@@ -69,11 +69,17 @@ class FireworkSDK {
   private _onVideoPlayback?: VideoPlaybackCallback | undefined;
 
   /**
-   * Get share base URL.
+   * The global share base URL of the video.
+   * The {@link VideoPlayerConfiguration.shareBaseURL} in {@link VideoPlayerConfiguration} will override this.
    */
-  public getShareBaseURL(): string | undefined {
+  public get shareBaseURL(): string | undefined {
     return this._shareBaseURL;
   }
+  public set shareBaseURL(value: string | undefined) {
+    FireworkSDKModule.setShareBaseURL(value ?? '').then(() => {
+      this.updateInternalShareBaseURL(value);
+    });
+  }
   private _shareBaseURL: string | undefined;
 
   /**
@@ -100,6 +106,11 @@ class FireworkSDK {
   }
   private _adBadgeConfiguration: AdBadgeConfiguration | undefined;
 
+  public get appLanguage(): string | undefined | null {
+    return this._appLanguage;
+  }
+  private _appLanguage: string | undefined | null;
+
   /**
    * Defaults to false.
    * You can enable debug logs by setting this property to true.
@@ -114,7 +125,7 @@ class FireworkSDK {
   /**
    * Get video launch behavior.
    */
-  public getVideoLaunchBehavior(): VideoLaunchBehavior | undefined {
+  public get videoLaunchBehavior(): VideoLaunchBehavior | undefined {
     return this._videoLaunchBehavior;
   }
   private _videoLaunchBehavior: VideoLaunchBehavior | undefined;
@@ -198,6 +209,19 @@ class FireworkSDK {
         this.onVideoFeedClick(event ?? {});
       }
     });
+
+    if (Platform.OS === 'ios') {
+      this.eventEmitter.addListener(
+        FWEventName.NativeAppLanguageUpdated,
+        (event) => {
+          FWLoggerUtil.log(
+            `Receive NativeAppLanguageUpdated event appLanguage: ${event.appLanguage}`
+          );
+          const language = event.appLanguage;
+          this.updateInternalAppLanguage(language);
+        }
+      );
+    }
   }
 
   /**
@@ -208,12 +232,6 @@ class FireworkSDK {
     FWLoggerUtil.log('Call FireworkSDK init method');
 
     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;
@@ -245,18 +263,39 @@ class FireworkSDK {
   }
 
   /**
-   * Change App level language. Only supported on Android.
-   * @param {string} language Such as en, ar and en-US
-   * @returns {Promise<boolean>}
+   * Change App level language. Only supported on iOS.
+   * @param {string | undefined | null} language Such as en, ar and en-US
+   * If language is null or undefined or empty string, SDK will use system language.
+   * @returns {Promise<boolean>} The result of changing app language.
    */
-  public async changeAppLanguage(language: string): Promise<boolean> {
-    if (Platform.OS === 'android') {
+  public async changeAppLanguage(language?: string | null): Promise<boolean> {
+    if (Platform.OS === 'ios') {
       const result = await FireworkSDKModule.changeAppLanguage(language);
+      if (result) {
+        this.updateInternalAppLanguage(language);
+      }
       return result;
     }
 
     return false;
   }
+
+  private updateInternalAppLanguage(language?: string | null) {
+    const valueHasChanged = this._appLanguage !== language;
+    this._appLanguage = language;
+    if (valueHasChanged) {
+      this.eventEmitter.emit(FWEventName.AppLanguageUpdated);
+    }
+  }
+
+  private updateInternalShareBaseURL(shareBaseURL?: string) {
+    const shareBaseURLChanged = this._shareBaseURL !== shareBaseURL;
+    console.log('updateInternalShareBaseURL shareBaseURL', shareBaseURL);
+    this._shareBaseURL = shareBaseURL;
+    if (shareBaseURLChanged) {
+      this.eventEmitter.emit(FWEventName.ShareBaseURLUpdated);
+    }
+  }
 }
 
 export default FireworkSDK;

package/src/LiveStream.ts

@@ -16,11 +16,11 @@ class LiveStream {
   private static _instance?: LiveStream;
 
   /**
-   * The callback of live stream event. Only supported on iOS.
+   * The callback of live stream event.
    */
   public onLiveStreamEvent?: onLiveStreamEventCallback;
   /**
-   * The callback of live stream chat event. Only supported on iOS.
+   * The callback of live stream chat event.
    */
   public onLiveStreamChatEvent?: onLiveStreamChatEventCallback;
 

package/src/VideoShopping.ts

@@ -1,10 +1,9 @@
 import { NativeEventEmitter, Platform } from 'react-native';
 
-import type AddToCartResult from './models/AddToCartResult';
 import { FWEventName } from './models/FWEventName';
 import type {
-  AddToCartEvent,
   CustomClickLinkButtonEvent,
+  ShoppingCTAEvent,
   UpdateProductDetailsEvent,
 } from './models/FWEvents';
 import type Product from './models/Product';
@@ -13,10 +12,11 @@ import ShoppingModule, {
   ShoppingModuleEventEmitter,
 } from './modules/ShoppingModule';
 import FWLoggerUtil from './utils/FWLoggerUtil';
+import type ShoppingCTAResult from './models/ShoppingCTAResult';
 
-export type AddToCartCallback = (
-  event: AddToCartEvent
-) => Promise<AddToCartResult | undefined | null>;
+export type ShoppingCTACallback = (
+  event: ShoppingCTAEvent
+) => Promise<ShoppingCTAResult>;
 
 export type CustomClickCartIconCallback = () => Promise<void>;
 
@@ -35,12 +35,10 @@ class VideoShopping {
   private static _instance?: VideoShopping;
 
   /**
-   * This callback is triggered when the user clicks the "Add to cart" button.
-   *
-   * The host apps can return an AddToCartResult object to tell FireworkSDK the result of adding to cart.
-   * If the host apps want to customize the processing logic of clicking "Add to cart" button, they could return null or undefined in the callback.
+   * This callback is triggered when the user clicks the "Add to cart" or "Shop now" button.
+   * The host app can return a ShoppingCTAResult object to tell SDK how to handle the result.
    */
-  public onAddToCart?: AddToCartCallback;
+  public onShoppingCTA?: ShoppingCTACallback;
 
   /**
    * This callback is triggered when the user clicks the shopping cart icon.
@@ -82,8 +80,8 @@ class VideoShopping {
   private _cartIconVisible: boolean = true;
 
   /**
-   * The host app can use this property to configure "Add to cart" button style
-   * and hide the link button next to "Add to cart" button. Only supported on iOS.
+   * The configuration of product info view.
+   * Please refer to {@link ProductInfoViewConfiguration} for more details.
    */
   public get productInfoViewConfiguration():
     | ProductInfoViewConfiguration
@@ -95,9 +93,7 @@ class VideoShopping {
     value: ProductInfoViewConfiguration | undefined
   ) {
     this._productInfoViewConfiguration = value;
-    if (Platform.OS === 'ios') {
-      ShoppingModule.setProductInfoViewConfiguration(value ?? {});
-    }
+    ShoppingModule.setProductInfoViewConfiguration(value ?? {});
   }
 
   private _productInfoViewConfiguration?:
@@ -106,7 +102,7 @@ class VideoShopping {
 
   /**
    * This callback is triggered when the user clicks
-   * the link button next to Add to cart button. Only supported on Android.
+   * the link button next to Add to cart button.
    *
    * The host app can customize the click event processing logic of
    * the link button by setting the callback.
@@ -120,9 +116,7 @@ class VideoShopping {
     value: CustomClickLinkButtonCallback | undefined
   ) {
     this._onCustomClickLinkButton = value;
-    if (Platform.OS === 'android') {
-      ShoppingModule.setCustomClickLinkButtonEnabled(!!value);
-    }
+    ShoppingModule.setCustomClickLinkButtonEnabled(!!value);
   }
   private _onCustomClickLinkButton?: CustomClickLinkButtonCallback | undefined;
 
@@ -140,12 +134,15 @@ class VideoShopping {
   }
 
   private constructor() {
-    this.eventEmitter.addListener(FWEventName.AddToCart, (event) => {
-      FWLoggerUtil.log(
-        `Receive AddToCart event productId: ${event?.productId} unitId: ${event?.unitId}`
-      );
-      this.handleAddToCartEvent(event);
-    });
+    this.eventEmitter.addListener(
+      FWEventName.ShoppingCTAButtonClick,
+      (event) => {
+        FWLoggerUtil.log(
+          `Receive ShoppingCTA event productId: ${event?.productId} unitId: ${event?.unitId} url: ${event?.url}`
+        );
+        this.handleShoppingCTAEvent(event);
+      }
+    );
 
     this.eventEmitter.addListener(FWEventName.ClickCartIcon, () => {
       FWLoggerUtil.log('Receive ClickCartIcon event');
@@ -161,17 +158,15 @@ class VideoShopping {
 
     this.eventEmitter.addListener(FWEventName.LogMessage, () => {});
 
-    if (Platform.OS === 'android') {
-      this.eventEmitter.addListener(
-        FWEventName.CustomLinkButtonClick,
-        (event) => {
-          FWLoggerUtil.log(
-            `Receive CustomLinkButtonClick event url: ${event?.url}`
-          );
-          this.handleCustomLinkButtonClickEvent(event);
-        }
-      );
-    }
+    this.eventEmitter.addListener(
+      FWEventName.CustomLinkButtonClick,
+      (event) => {
+        FWLoggerUtil.log(
+          `Receive CustomLinkButtonClick event url: ${event?.url}`
+        );
+        this.handleCustomLinkButtonClickEvent(event);
+      }
+    );
   }
 
   /**
@@ -186,30 +181,22 @@ class VideoShopping {
     ShoppingModule.setCartItemCount(count);
   }
 
-  private async handleAddToCartEvent(event: any) {
+  private async handleShoppingCTAEvent(event: any) {
     const callbackId = event.callbackId;
     delete event.callbackId;
-    if (this.onAddToCart) {
-      const result = await this.onAddToCart(event as AddToCartEvent);
-      if (result) {
-        if (callbackId) {
-          ShoppingModule.updateAddToCartStatus(
-            result.res,
-            result.tips,
-            callbackId
-          );
-        }
-      } else {
-        if (callbackId) {
-          if (Platform.OS === 'ios') {
-            ShoppingModule.clearCallbackId(callbackId, FWEventName.AddToCart);
-          }
-        }
+
+    if (this.onShoppingCTA) {
+      const result = await this.onShoppingCTA(event as ShoppingCTAEvent);
+      if (callbackId) {
+        ShoppingModule.updateShoppingCTAResult(result, callbackId);
       }
     } else {
       if (callbackId) {
         if (Platform.OS === 'ios') {
-          ShoppingModule.clearCallbackId(callbackId, FWEventName.AddToCart);
+          ShoppingModule.clearCallbackId(
+            callbackId,
+            FWEventName.ShoppingCTAButtonClick
+          );
         }
       }
     }