react-native-firework-sdk 2.4.2 → 2.5.1

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

@@ -0,0 +1,18 @@
+export default interface ButtonInfo {
+    /**
+     * The name of image in the asset catalogs.
+     * For example, you need to add the image in the Images.xcassets(or Assets.xcassets etc.)
+     * Only supported on iOS.
+     */
+    imageName?: string;
+    /**
+     * The system image name.
+     * Only supported on iOS.
+     */
+    systemImageName?: string;
+    /**
+     * This applies only to system image.
+     * Only supported on iOS.
+     */
+    tintColor?: string;
+}

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

@@ -15,5 +15,6 @@ export declare enum FWEventName {
     AppLanguageUpdated = "fw:app-language-updated",
     NativeAppLanguageUpdated = "fw:native-app-language-updated",
     LogMessage = "fw:log-message",
-    CustomLinkButtonClick = "fw:shopping:custom-link-button-click"
+    CustomLinkButtonClick = "fw:shopping:custom-link-button-click",
+    CustomProductCardTap = "fw:shopping:custom-product-card-tap"
 }

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

@@ -59,6 +59,24 @@ export interface CustomClickLinkButtonEvent {
      */
     unitId: string;
 }
+export interface CustomTapProductCardEvent {
+    /**
+     * The url for the product unit
+     */
+    url: string;
+    /**
+     * A unique identifier of the product.
+     */
+    productId: string;
+    /**
+     * A unique identifier of the product unit.
+     */
+    unitId: string;
+    /**
+     * the video playback details that the product unit belongs to.
+     */
+    video: VideoPlaybackDetails;
+}
 export interface LiveStreamEvent {
     eventName: LiveStreamEventName;
     info: LiveStreamEventDetails;

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

@@ -26,6 +26,18 @@ export interface ShoppingCTAButtonConfiguration {
 export interface LinkButtonConfiguration {
     isHidden?: boolean;
 }
+export type ProductCardCTAButtonText = 'shopNow' | 'buyNow';
+export type ProductCardTheme = 'dark' | 'light';
+export interface ProductCardConfiguration {
+    /**
+     * The text of shopping CTA button.
+     */
+    ctaButtonText?: ProductCardCTAButtonText;
+    /**
+     * The theme of product card.
+     */
+    theme?: ProductCardTheme;
+}
 export default interface ProductInfoViewConfiguration {
     /**
      * Configuration of shopping CTA button. Only supported on iOS.
@@ -35,4 +47,8 @@ export default interface ProductInfoViewConfiguration {
      * Configuration of link button next to shopping CTA button.
      */
     linkButton?: LinkButtonConfiguration;
+    /**
+     * Configuration of product card. Only supported on iOS.
+     */
+    productCard?: ProductCardConfiguration;
 }

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

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

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

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

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

@@ -0,0 +1,39 @@
+import type ButtonInfo from './ButtonInfo';
+export default interface VideoPlayerButtonConfiguration {
+    /**
+     * Specifies the video detail button info.
+     * Image will be drawn in a 40pt x 40pt frame.
+     * Only supported on iOS.
+     */
+    videoDetailButton?: ButtonInfo;
+    /**
+     * Specifies the close button info.
+     * Image will be drawn in a 40pt x 40pt frame.
+     * Only supported on iOS.
+     */
+    closeButton?: ButtonInfo;
+    /**
+     * Specifies the mute button info.
+     * Image will be drawn in a 40pt x 40pt frame.
+     * Only supported on iOS.
+     */
+    muteButton?: ButtonInfo;
+    /**
+     * Specifies the unmute button info.
+     * Image will be drawn in a 40pt x 40pt frame.
+     * Only supported on iOS.
+     */
+    unmuteButton?: ButtonInfo;
+    /**
+     * Specifies the play info.
+     * Image will be drawn at the center of the player view.
+     * Only supported on iOS.
+     */
+    playButton?: ButtonInfo;
+    /**
+     * Specifies the pause info.
+     * Image will be drawn at the center of the player view.
+     * Only supported on iOS.
+     */
+    pauseButton?: ButtonInfo;
+}

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

@@ -1,3 +1,4 @@
+import type VideoPlayerButtonConfiguration from './VideoPlayerButtonConfiguration';
 import type { VideoPlayerCTADelay } from './VideoPlayerCTADelay';
 import type { VideoPlayerCTAStyle } from './VideoPlayerCTAStyle';
 import type { VideoPlayerCTAWidth } from './VideoPlayerCTAWidth';
@@ -57,4 +58,9 @@ export default interface VideoPlayerConfiguration {
      * Defaults to fullWidth.
      */
     ctaWidth?: VideoPlayerCTAWidth;
+    /**
+     * The host app could use this property to customize the button images of the video player.
+     * Only supported on iOS.
+     */
+    buttonConfiguration?: VideoPlayerButtonConfiguration;
 }

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

@@ -11,6 +11,7 @@ interface IShoppingModule extends NativeModule {
     clearCallbackId(callbackId: number | string, eventName: string): void;
     setProductInfoViewConfiguration(config: ProductInfoViewConfiguration): void;
     setCustomClickLinkButtonEnabled(enabled: boolean): Promise<any>;
+    setCustomTapProductCardEnabled(enabled: boolean): Promise<any>;
 }
 declare const ShoppingModuleEventEmitter: NativeEventEmitter;
 export { ShoppingModuleEventEmitter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-firework-sdk",
-  "version": "2.4.2",
+  "version": "2.5.1",
   "description": "Firework React Native SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/react-native-firework-sdk.podspec

@@ -35,5 +35,5 @@ fi
 
   s.static_framework = true
   s.dependency 'React-Core'
-  s.dependency 'FireworkVideo', '1.11.0'
+  s.dependency 'FireworkVideo', '1.12.0'
 end

package/src/FWNavigator.ts

@@ -3,7 +3,6 @@ import type PushRNContainerParams from './models/PushRNContainerParams';
 import FWNavigatorModule, {
   FWNavigatorModuleEventEmitter,
 } from './modules/FWNavigatorModule';
-import FWLoggerUtil from './utils/FWLoggerUtil';
 
 /**
  * You can use this class for pushing RN page from the native page.
@@ -19,7 +18,6 @@ class FWNavigator {
   }
 
   private constructor() {
-    FWLoggerUtil.log('FWNavigator constructor');
     FWNavigatorModuleEventEmitter.addListener(FWEventName.LogMessage, () => {});
   }
 

package/src/VideoShopping.ts

@@ -3,6 +3,7 @@ import { NativeEventEmitter, Platform } from 'react-native';
 import { FWEventName } from './models/FWEventName';
 import type {
   CustomClickLinkButtonEvent,
+  CustomTapProductCardEvent,
   ShoppingCTAEvent,
   UpdateProductDetailsEvent,
 } from './models/FWEvents';
@@ -32,6 +33,10 @@ export type CustomClickLinkButtonCallback = (
   event: CustomClickLinkButtonEvent
 ) => Promise<void> | void;
 
+export type CustomTapProductCardCallback = (
+  event: CustomTapProductCardEvent
+) => Promise<void> | void;
+
 /**
  * The entry class of video shopping.
  */
@@ -79,6 +84,28 @@ class VideoShopping {
   }
   private _onCustomClickLinkButton?: CustomClickLinkButtonCallback | undefined;
 
+  /**
+   * This callback is triggered when the user clicks product card.
+   * Only supported on iOS.
+   *
+   * The host app can customize the tap event processing logic of
+   * the product card by setting the callback.
+   */
+  public get onCustomTapProductCard():
+    | CustomTapProductCardCallback
+    | undefined {
+    return this._onCustomTapProductCard;
+  }
+  public set onCustomTapProductCard(
+    value: CustomTapProductCardCallback | undefined
+  ) {
+    this._onCustomTapProductCard = value;
+    if (Platform.OS === 'ios') {
+      ShoppingModule.setCustomTapProductCardEnabled(!!value);
+    }
+  }
+  private _onCustomTapProductCard?: CustomTapProductCardCallback | undefined;
+
   /**
    * Defaults to true.
    * You can hide the cart icon by setting this property to false.
@@ -172,6 +199,11 @@ class VideoShopping {
         this.handleCustomLinkButtonClickEvent(event);
       }
     );
+
+    this.eventEmitter.addListener(FWEventName.CustomProductCardTap, (event) => {
+      FWLoggerUtil.log(`Receive CustomProductCardTap event url: ${event?.url}`);
+      this.handleCustomProductCardTapEvent(event);
+    });
   }
 
   /**
@@ -271,6 +303,14 @@ class VideoShopping {
       this.onCustomClickLinkButton(event);
     }
   }
+
+  private async handleCustomProductCardTapEvent(
+    event: CustomTapProductCardEvent
+  ) {
+    if (this.onCustomTapProductCard) {
+      this.onCustomTapProductCard(event);
+    }
+  }
 }
 
 export default VideoShopping;

package/src/components/StoryBlock.tsx

@@ -78,6 +78,10 @@ export interface IStoryBlockProps {
    * Product ids used to generate the sku feed
    */
   productIds?: string[];
+  /**
+   * The video or live stream id. Only supported on iOS.
+   */
+  contentId?: string;
   /**
    * Specifies if Picture in Picture is enabled. Only supported on iOS.
    */
@@ -221,6 +225,7 @@ const StoryBlock: ForwardRefRenderFunction<
       playlist,
       hashtagFilterExpression,
       productIds,
+      contentId,
       enablePictureInPicture,
       cornerRadius,
       adConfiguration,
@@ -264,6 +269,7 @@ const StoryBlock: ForwardRefRenderFunction<
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_hashtagFilterExpression:${hashtagFilterExpression}`;
     key += `productIds:${productIds?.join(',')}`;
+    key += `_contentId:${contentId}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
     key += `_cornerRadius:${cornerRadius}`;
 

package/src/components/VideoFeed.tsx

@@ -66,6 +66,10 @@ export interface IVideoFeedProps {
    * Product ids used to generate the sku feed
    */
   productIds?: string[];
+  /**
+   * The video or live stream id. Only supported on iOS.
+   */
+  contentId?: string;
   /**
    * One of three available display modes. Defaults to row.
    */
@@ -264,6 +268,7 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
       playlistGroup,
       hashtagFilterExpression,
       productIds,
+      contentId,
       mode,
       enablePictureInPicture,
       adConfiguration,
@@ -329,6 +334,7 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_hashtagFilterExpression:${hashtagFilterExpression}`;
     key += `_productIds:${productIds?.join(',')}`;
+    key += `_contentId:${contentId}`;
     key += `_mode:${mode}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
 

package/src/index.ts

@@ -23,11 +23,13 @@ import type { AdBadgeTextType } from './models/AdBadgeConfiguration';
 import type AdConfiguration from './models/AdConfiguration';
 import type { VastAttribute } from './models/AdConfiguration';
 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,
   SDKInitEvent,
@@ -52,6 +54,9 @@ import type Product from './models/Product';
 import type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';
 import type {
   LinkButtonConfiguration,
+  ProductCardConfiguration,
+  ProductCardCTAButtonText,
+  ProductCardTheme,
   ShoppingCTAButtonConfiguration,
   ShoppingCTAButtonText,
 } from './models/ProductInfoViewConfiguration';
@@ -76,6 +81,7 @@ import type { VideoFeedSource } from './models/VideoFeedSource';
 import type VideoPlaybackDetails from './models/VideoPlaybackDetails';
 import type { VideoPlayerSize } from './models/VideoPlaybackDetails';
 import VideoPlaybackEventName from './models/VideoPlaybackEventName';
+import type VideoPlayerButtonConfiguration from './models/VideoPlayerButtonConfiguration';
 import type { VideoPlayerCompleteAction } from './models/VideoPlayerCompleteAction';
 import type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';
 import type {
@@ -88,6 +94,7 @@ import type { VideoPlayerStyle } from './models/VideoPlayerStyle';
 import type {
   CustomClickCartIconCallback,
   CustomClickLinkButtonCallback,
+  CustomTapProductCardCallback,
   ShoppingCTACallback,
   UpdateProductDetailsCallback,
 } from './VideoShopping';
@@ -100,11 +107,14 @@ export {
   AdBadgeTextType,
   AdConfiguration,
   AndroidFontInfo,
+  ButtonInfo,
   CustomClickCartIconCallback,
   CustomClickLinkButtonCallback,
   CustomClickLinkButtonEvent,
   CustomCTAClickCallback,
   CustomCTAClickEvent,
+  CustomTapProductCardCallback,
+  CustomTapProductCardEvent,
   FeedItemDetails,
   FireworkSDK,
   FWError,
@@ -129,6 +139,9 @@ export {
   onLiveStreamEventCallback,
   OpenVideoPlayerConfiguration,
   Product,
+  ProductCardConfiguration,
+  ProductCardCTAButtonText,
+  ProductCardTheme,
   ProductInfoViewConfiguration,
   ProductPrice,
   ProductUnit,
@@ -165,6 +178,7 @@ export {
   VideoPlaybackDetails,
   VideoPlaybackEvent,
   VideoPlaybackEventName,
+  VideoPlayerButtonConfiguration,
   VideoPlayerCompleteAction,
   VideoPlayerConfiguration,
   VideoPlayerCTADelay,

package/src/models/ButtonInfo.ts

@@ -0,0 +1,18 @@
+export default interface ButtonInfo {
+  /**
+   * The name of image in the asset catalogs.
+   * For example, you need to add the image in the Images.xcassets(or Assets.xcassets etc.)
+   * Only supported on iOS.
+   */
+  imageName?: string;
+  /**
+   * The system image name.
+   * Only supported on iOS.
+   */
+  systemImageName?: string;
+  /**
+   * This applies only to system image.
+   * Only supported on iOS.
+   */
+  tintColor?: string;
+}

package/src/models/FWEventName.ts

@@ -16,4 +16,5 @@ export enum FWEventName {
   NativeAppLanguageUpdated = 'fw:native-app-language-updated',
   LogMessage = 'fw:log-message',
   CustomLinkButtonClick = 'fw:shopping:custom-link-button-click',
+  CustomProductCardTap = 'fw:shopping:custom-product-card-tap',
 }

package/src/models/FWEvents.ts

@@ -67,6 +67,25 @@ export interface CustomClickLinkButtonEvent {
   unitId: string;
 }
 
+export interface CustomTapProductCardEvent {
+  /**
+   * The url for the product unit
+   */
+  url: string;
+  /**
+   * A unique identifier of the product.
+   */
+  productId: string;
+  /**
+   * A unique identifier of the product unit.
+   */
+  unitId: string;
+  /**
+   * the video playback details that the product unit belongs to.
+   */
+  video: VideoPlaybackDetails;
+}
+
 export interface LiveStreamEvent {
   eventName: LiveStreamEventName;
   info: LiveStreamEventDetails;

package/src/models/ProductInfoViewConfiguration.ts

@@ -30,6 +30,21 @@ export interface LinkButtonConfiguration {
   isHidden?: boolean;
 }
 
+export type ProductCardCTAButtonText = 'shopNow' | 'buyNow';
+
+export type ProductCardTheme = 'dark' | 'light';
+
+export interface ProductCardConfiguration {
+  /**
+   * The text of shopping CTA button.
+   */
+  ctaButtonText?: ProductCardCTAButtonText;
+  /**
+   * The theme of product card.
+   */
+  theme?: ProductCardTheme;
+}
+
 export default interface ProductInfoViewConfiguration {
   /**
    * Configuration of shopping CTA button. Only supported on iOS.
@@ -39,4 +54,8 @@ export default interface ProductInfoViewConfiguration {
    * Configuration of link button next to shopping CTA button.
    */
   linkButton?: LinkButtonConfiguration;
+  /**
+   * Configuration of product card. Only supported on iOS.
+   */
+  productCard?: ProductCardConfiguration;
 }

package/src/models/StoryBlockSource.ts

@@ -4,4 +4,5 @@ export type StoryBlockSource =
   | 'playlist'
   | 'dynamicContent'
   | 'hashtagPlaylist'
-  | 'sku';
+  | 'sku'
+  | 'singleContent';

package/src/models/VideoFeedSource.ts

@@ -5,4 +5,5 @@ export type VideoFeedSource =
   | 'playlistGroup'
   | 'dynamicContent'
   | 'hashtagPlaylist'
-  | 'sku';
+  | 'sku'
+  | 'singleContent';

package/src/models/VideoPlayerButtonConfiguration.ts

@@ -0,0 +1,40 @@
+import type ButtonInfo from './ButtonInfo';
+
+export default interface VideoPlayerButtonConfiguration {
+  /**
+   * Specifies the video detail button info.
+   * Image will be drawn in a 40pt x 40pt frame.
+   * Only supported on iOS.
+   */
+  videoDetailButton?: ButtonInfo;
+  /**
+   * Specifies the close button info.
+   * Image will be drawn in a 40pt x 40pt frame.
+   * Only supported on iOS.
+   */
+  closeButton?: ButtonInfo;
+  /**
+   * Specifies the mute button info.
+   * Image will be drawn in a 40pt x 40pt frame.
+   * Only supported on iOS.
+   */
+  muteButton?: ButtonInfo;
+  /**
+   * Specifies the unmute button info.
+   * Image will be drawn in a 40pt x 40pt frame.
+   * Only supported on iOS.
+   */
+  unmuteButton?: ButtonInfo;
+  /**
+   * Specifies the play info.
+   * Image will be drawn at the center of the player view.
+   * Only supported on iOS.
+   */
+  playButton?: ButtonInfo;
+  /**
+   * Specifies the pause info.
+   * Image will be drawn at the center of the player view.
+   * Only supported on iOS.
+   */
+  pauseButton?: ButtonInfo;
+}

package/src/models/VideoPlayerConfiguration.ts

@@ -1,3 +1,4 @@
+import type VideoPlayerButtonConfiguration from './VideoPlayerButtonConfiguration';
 import type { VideoPlayerCTADelay } from './VideoPlayerCTADelay';
 import type { VideoPlayerCTAStyle } from './VideoPlayerCTAStyle';
 import type { VideoPlayerCTAWidth } from './VideoPlayerCTAWidth';
@@ -58,4 +59,9 @@ export default interface VideoPlayerConfiguration {
    * Defaults to fullWidth.
    */
   ctaWidth?: VideoPlayerCTAWidth;
+  /**
+   * The host app could use this property to customize the button images of the video player.
+   * Only supported on iOS.
+   */
+  buttonConfiguration?: VideoPlayerButtonConfiguration;
 }

package/src/modules/ShoppingModule.ts

@@ -28,6 +28,7 @@ interface IShoppingModule extends NativeModule {
   clearCallbackId(callbackId: number | string, eventName: string): void; // Only supported on iOS
   setProductInfoViewConfiguration(config: ProductInfoViewConfiguration): void;
   setCustomClickLinkButtonEnabled(enabled: boolean): Promise<any>;
+  setCustomTapProductCardEnabled(enabled: boolean): Promise<any>; // Only supported on iOS
 }
 
 const ShoppingModuleEventEmitter = new NativeEventEmitter(ShoppingModule);