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

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?:
@@ -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
+          );
         }
       }
     }

package/src/components/StoryBlock.tsx

@@ -1,14 +1,25 @@
-import React from 'react';
+import type { ForwardRefRenderFunction } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 
-import type {
-  EmitterSubscription,
+import {
+  BackHandler,
+  findNodeHandle,
   NativeSyntheticEvent,
+  Platform,
   StyleProp,
+  UIManager,
   ViewStyle,
 } from 'react-native';
-import { findNodeHandle, Platform, UIManager } from 'react-native';
 
 import FireworkSDK from '../FireworkSDK';
+import type AdConfiguration from '../models/AdConfiguration';
 import type FWError from '../models/FWError';
 import { FWEventName } from '../models/FWEventName';
 import type { StoryBlockSource } from '../models/StoryBlockSource';
@@ -18,17 +29,16 @@ import FWStoryBlock from './FWStoryBlock';
 
 const NativeComponentName = 'FWStoryBlock';
 
-const createFragment = (viewId: any) => {
-  if (Platform.OS === 'android') {
-    UIManager.dispatchViewManagerCommand(
-      viewId,
-      UIManager.getViewManagerConfig(
-        NativeComponentName
-      ).Commands.create.toString(),
-      [viewId]
-    );
-  }
-};
+export interface IStoryBlockMethods {
+  /**
+   * Play the story block.
+   */
+  play: () => void;
+  /**
+   * Pause the story block.
+   */
+  pause: () => void;
+}
 
 /**
  * The props type of StoryBlock component.
@@ -55,88 +65,119 @@ export interface IStoryBlockProps {
    */
   dynamicContentParameters?: { [key: string]: string[] };
   /**
-   * Specifies if Picture in Picture is enabled.
+   * Specifies if Picture in Picture is enabled. Only supported on iOS.
    */
   enablePictureInPicture?: boolean;
+  /**
+   * Ad configuration of the feed. Only supported on iOS.
+   */
+  adConfiguration?: AdConfiguration;
   /**
    * The feed loading result callback. It means loading successfully when error equals to undefined.
    */
   onStoryBlockLoadFinished?: (error?: FWError) => void;
 }
 
-/**
- * StoryBlock component. Only supported on iOS.
- */
-class StoryBlock extends React.Component<IStoryBlockProps> {
-  nativeComponentRef = React.createRef<any>();
+const StoryBlock: ForwardRefRenderFunction<
+  IStoryBlockMethods,
+  IStoryBlockProps
+> = (props: IStoryBlockProps, forwardedRef) => {
+  const nativeComponentRef = useRef(null);
+  const [isFullscreenState, setIsFullscreenState] = useState<boolean>(false);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useImperativeHandle(
+    forwardedRef,
+    () => {
+      const sendCommand = (command: string) => {
+        const nativeNodeHandle = findNodeHandle(nativeComponentRef.current);
 
-  subscriptions: EmitterSubscription[] = [];
-  componentDidMount() {
+        let commandId: string | number =
+          UIManager.getViewManagerConfig(NativeComponentName).Commands[command];
+        if (Platform.OS === 'android') {
+          commandId = commandId.toString();
+        }
+
+        UIManager.dispatchViewManagerCommand(
+          findNodeHandle(nativeNodeHandle),
+          commandId,
+          []
+        );
+      };
+      return {
+        play: () => {
+          sendCommand('play');
+        },
+        pause: () => {
+          sendCommand('pause');
+        },
+      };
+    },
+    []
+  );
+  useEffect(() => {
     const subscriptionOfShareBaseURLUpdated =
       FireworkSDKModuleEventEmitter.addListener(
         FWEventName.ShareBaseURLUpdated,
         () => {
-          this.setState({});
+          FWLoggerUtil.log('Receive FWEventName.ShareBaseURLUpdated');
+          forceUpdate();
         }
       );
-    this.subscriptions.push(subscriptionOfShareBaseURLUpdated);
-
     const subscriptionOfAdBadgeConfigurationUpdated =
       FireworkSDKModuleEventEmitter.addListener(
         FWEventName.AdBadgeConfigurationUpdated,
         () => {
-          this.setState({});
+          FWLoggerUtil.log('Receive FWEventName.AdBadgeConfigurationUpdated');
+          forceUpdate();
         }
       );
-    this.subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
 
     const subscriptionOfVideoLaunchBehaviorUpdated =
       FireworkSDKModuleEventEmitter.addListener(
         FWEventName.VideoLaunchBehaviorUpdated,
         () => {
           FWLoggerUtil.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
-          this.setState({});
+          forceUpdate();
         }
       );
-    this.subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
 
-    if (Platform.OS === 'android') {
-      const viewId = findNodeHandle(this.nativeComponentRef.current);
-      FWLoggerUtil.log(
-        `StoryBlock componentDidMount createFragment viewId: ${viewId}`
+    const subscriptionOfAppLanguageUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.AppLanguageUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.AppLanguageUpdated');
+          forceUpdate();
+        }
       );
-      createFragment(viewId);
+
+    if (Platform.OS === 'android') {
+      setTimeout(() => {
+        const viewId = findNodeHandle(nativeComponentRef.current);
+        FWLoggerUtil.log(`StoryBlock createFragment viewId: ${viewId}`);
+        UIManager.dispatchViewManagerCommand(
+          viewId,
+          UIManager.getViewManagerConfig(
+            NativeComponentName
+          ).Commands.create.toString(),
+          [viewId]
+        );
+      }, 500);
     }
-  }
-
-  componentWillUnmount() {
-    this.subscriptions.forEach((value) => {
-      value.remove();
-    });
-
-    this.subscriptions = [];
-  }
-
-  render() {
-    const { style } = this.props;
-
-    return (
-      <FWStoryBlock
-        ref={this.nativeComponentRef}
-        key={this._generateKey()}
-        {...this.props}
-        onStoryBlockLoadFinished={this._onStoryBlockLoadFinished}
-        style={Object.assign({}, style, { zIndex: -1 })}
-      />
-    );
-  }
 
-  private _onStoryBlockLoadFinished = (event: NativeSyntheticEvent<any>) => {
+    return () => {
+      subscriptionOfShareBaseURLUpdated.remove();
+      subscriptionOfAdBadgeConfigurationUpdated.remove();
+      subscriptionOfVideoLaunchBehaviorUpdated.remove();
+      subscriptionOfAppLanguageUpdated.remove();
+    };
+  }, []);
+
+  const handleStoryBlockLoadFinished = (event: NativeSyntheticEvent<any>) => {
     FWLoggerUtil.log(
-      `StoryBlock _onStoryBlockLoadFinished ${event.nativeEvent.name}`
+      `StoryBlock handleStoryBlockLoadFinished ${event.nativeEvent.name}`
     );
 
-    const { onStoryBlockLoadFinished } = this.props;
+    const { onStoryBlockLoadFinished } = props;
     const { name, reason } = event.nativeEvent;
 
     if (onStoryBlockLoadFinished) {
@@ -152,60 +193,132 @@ class StoryBlock extends React.Component<IStoryBlockProps> {
     }
   };
 
-  private _generateKey(): string {
+  const handleStoryBlockFullscreenStateChanged = (
+    event: NativeSyntheticEvent<any>
+  ) => {
+    FWLoggerUtil.log(
+      `StoryBlock handleStoryBlockFullscreenStateChanged ${event.nativeEvent.isFullScreen}`
+    );
+    const { isFullScreen } = event.nativeEvent;
+    setIsFullscreenState(isFullScreen);
+  };
+
+  const generateDynamicContentParametersString = (): string => {
+    const { dynamicContentParameters } = props;
+
+    if (!dynamicContentParameters) {
+      return '';
+    }
+
+    let resultString = '';
+    const sortedKeyList = Object.keys(dynamicContentParameters).sort();
+    for (const key of sortedKeyList) {
+      const value = dynamicContentParameters[key];
+      const valueString = value.join(',');
+      if (resultString.length > 0) {
+        resultString += '_';
+      }
+
+      resultString += `${key}:${valueString}`;
+    }
+
+    return resultString;
+  };
+
+  const generateVastAttributesString = () => {
+    const { adConfiguration } = props;
+    const vastAttributes = adConfiguration?.vastAttributes ?? '';
+    if (!vastAttributes) {
+      return '';
+    }
+
+    let resultString = '';
+    for (const attribute of vastAttributes) {
+      if (resultString.length > 0) {
+        resultString += '_';
+      }
+      resultString += `${attribute.name ?? ''}:${attribute.value}`;
+    }
+
+    return resultString;
+  };
+
+  const generateKey = (): string => {
     const {
       source,
       channel = '',
       playlist = '',
       enablePictureInPicture = false,
-    } = this.props;
+      adConfiguration,
+    } = props;
 
     const shareBaseURL = FireworkSDK.getInstance().getShareBaseURL() ?? '';
+    const videoLaunchBehavior =
+      FireworkSDK.getInstance().getVideoLaunchBehavior();
     const 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';
+      generateDynamicContentParametersString();
+    const appLanguage = FireworkSDK.getInstance().appLanguage ?? '';
+    const requiresAds = adConfiguration?.requiresAds ?? false;
+    const adsFetchTimeout = adConfiguration?.adsFetchTimeout ?? 10;
+    const vastAttributesString = generateVastAttributesString();
 
     let key = `source:${source}`;
     key += `_channel:${channel}`;
     key += `_playlist:${playlist}`;
     key += `_shareBaseURL:${shareBaseURL}`;
+    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
     key += `_adBadgeTextType:${adBadgeTextType}`;
     key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
     key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
-    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
+    key += `_appLanguage:${appLanguage}`;
+    key += `_requiresAds:${requiresAds}`;
+    key += `_adsFetchTimeout:${adsFetchTimeout}`;
+    key += `_vastAttributes:${vastAttributesString}`;
 
     return key;
-  }
-
-  private _generateDynamicContentParametersString(): string {
-    const { dynamicContentParameters } = this.props;
+  };
 
-    if (!dynamicContentParameters) {
-      return '';
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      const onBackPress = () => {
+        if (isFullscreenState) {
+          FireworkSDK.getInstance().navigator.popNativeContainer();
+          return true;
+        }
+        return false;
+      };
+      const subscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        onBackPress
+      );
+      return () => {
+        subscription.remove();
+      };
     }
 
-    let resultString = '';
-    const sortedKeyList = Object.keys(dynamicContentParameters).sort();
-    for (const key of sortedKeyList) {
-      const value = dynamicContentParameters[key];
-      const valueString = value.join(',');
-      if (resultString.length > 0) {
-        resultString += '_';
-      }
-
-      resultString += `${key}:${valueString}`;
-    }
+    return;
+  }, [isFullscreenState]);
 
-    return resultString;
-  }
-}
+  const { style } = props;
+  return (
+    <FWStoryBlock
+      ref={nativeComponentRef}
+      key={generateKey()}
+      {...props}
+      onStoryBlockLoadFinished={handleStoryBlockLoadFinished}
+      onStoryBlockFullScreenStateChanged={
+        handleStoryBlockFullscreenStateChanged
+      }
+      style={Object.assign({}, style, { zIndex: -1 })}
+    />
+  );
+};
 
-export default StoryBlock;
+export default forwardRef(StoryBlock);

package/src/components/VideoFeed.tsx

@@ -83,21 +83,21 @@ const NativeComponentName = 'FWVideoFeed';
  * VideoFeed component.
  */
 class VideoFeed extends React.Component<IVideoFeedProps> {
+  /**
+   * @ignore
+   */
   static defaultProps = {
     mode: 'row',
   };
 
-  nativeComponentRef = React.createRef<any>();
+  private _nativeComponentRef = React.createRef<any>();
 
-  subscriptions: EmitterSubscription[] = [];
+  private _subscriptions: EmitterSubscription[] = [];
 
-  /**
-   * Force refreshing the video feed.
-   */
   public refresh = () => {
     FWLoggerUtil.log(`VideoFeed refresh ${JSON.stringify(this.props)}`);
 
-    const nativeNodeHandle = findNodeHandle(this.nativeComponentRef.current);
+    const nativeNodeHandle = findNodeHandle(this._nativeComponentRef.current);
 
     let commandId: string | number =
       UIManager.getViewManagerConfig(NativeComponentName).Commands.refresh;
@@ -133,6 +133,9 @@ class VideoFeed extends React.Component<IVideoFeedProps> {
     }
   };
 
+  /**
+   * @ignore
+   */
   componentDidMount() {
     FWLoggerUtil.log(
       `VideoFeed componentDidMount ${JSON.stringify(this.props)}`
@@ -146,7 +149,7 @@ class VideoFeed extends React.Component<IVideoFeedProps> {
           this.setState({});
         }
       );
-    this.subscriptions.push(subscriptionOfShareBaseURLUpdated);
+    this._subscriptions.push(subscriptionOfShareBaseURLUpdated);
 
     const subscriptionOfAdBadgeConfigurationUpdated =
       FireworkSDKModuleEventEmitter.addListener(
@@ -156,7 +159,7 @@ class VideoFeed extends React.Component<IVideoFeedProps> {
           this.setState({});
         }
       );
-    this.subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
+    this._subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
 
     const subscriptionOfVideoLaunchBehaviorUpdated =
       FireworkSDKModuleEventEmitter.addListener(
@@ -166,21 +169,36 @@ class VideoFeed extends React.Component<IVideoFeedProps> {
           this.setState({});
         }
       );
-    this.subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
+    this._subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
+    const subscriptionOfAppLanguageUpdated =
+      FireworkSDKModuleEventEmitter.addListener(
+        FWEventName.AppLanguageUpdated,
+        () => {
+          FWLoggerUtil.log('Receive FWEventName.AppLanguageUpdated');
+          this.setState({});
+        }
+      );
+    this._subscriptions.push(subscriptionOfAppLanguageUpdated);
   }
 
+  /**
+   * @ignore
+   */
   componentWillUnmount() {
     FWLoggerUtil.log(
       `VideoFeed componentWillUnmount ${JSON.stringify(this.props)}`
     );
 
-    this.subscriptions.forEach((value) => {
+    this._subscriptions.forEach((value) => {
       value.remove();
     });
 
-    this.subscriptions = [];
+    this._subscriptions = [];
   }
 
+  /**
+   * @ignore
+   */
   render() {
     FWLoggerUtil.log(`VideoFeed render ${JSON.stringify(this.props)}`);
 
@@ -213,6 +231,7 @@ class VideoFeed extends React.Component<IVideoFeedProps> {
     const showAdBadge = videoFeedConfiguration?.showAdBadge ?? false;
     const videoLaunchBehavior =
       FireworkSDK.getInstance().getVideoLaunchBehavior() ?? 'default';
+    const appLanguage = FireworkSDK.getInstance().appLanguage ?? '';
 
     let key = `source:${source}`;
     key += `_channel:${channel}`;
@@ -234,12 +253,13 @@ class VideoFeed extends React.Component<IVideoFeedProps> {
     key += `_vastAttributes:${vastAttributesString}`;
     key += `_showAdBadge:${showAdBadge}`;
     key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
+    key += `_appLanguage:${appLanguage}`;
 
     return (
       <FWVideoFeed
         key={key}
         {...this.props}
-        ref={this.nativeComponentRef}
+        ref={this._nativeComponentRef}
         onVideoFeedLoadFinished={this._onVideoFeedLoadFinished}
         mode={mode}
         style={Object.assign({}, this.props.style, { zIndex: -1 })}