react-native-firework-sdk 2.3.1 → 2.4.0-beta.2

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

@@ -13,7 +13,7 @@ export default interface Product {
      */
     description?: string | null;
     /**
-     * The availability of the product. Only supported on iOS.
+     * The availability of the product.
      */
     isAvailable?: boolean;
     /**

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

@@ -28,7 +28,7 @@ export default interface ProductUnit {
      */
     price?: ProductPrice;
     /**
-     * The availability of the product unit. Only supported on iOS.
+     * The availability of the product unit.
      */
     isAvailable?: boolean;
     /**

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

@@ -23,7 +23,7 @@ export interface StoryBlockConfiguration {
      */
     ctaDelay?: VideoPlayerCTADelay;
     /**
-     * Specifies the delay before the highlight animation occurs. Only supported on iOS.
+     * Specifies the delay before the highlight animation occurs.
      */
     ctaHighlightDelay?: VideoPlayerCTADelay;
     /**

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

@@ -0,0 +1,7 @@
+import type { StoryBlockConfiguration } from './StoryBlockConfiguration';
+export default interface StoryBlockNativeConfiguration extends StoryBlockConfiguration {
+    /**
+     * Specifies if Picture in Picture is enabled.
+     */
+    enablePictureInPicture?: boolean;
+}

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

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

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

@@ -4,19 +4,23 @@ import type GradientDrawable from './GradientDrawable';
 export interface VideoFeedTitleConfiguration {
     /**
      * Specifies if the video feed title is hidden.
+     * Defaults to false.
      */
     hidden?: boolean;
     /**
      * The text color of video feed title.
+     * If you don't set this property, the text color will be white with alpha is 0.98 on iOS and #ffffff on Android.
      */
     textColor?: string;
     /**
      * The font size of video feed title.
+     * If you don't set this property, the font size will be 12 on iOS and 14sp on Android.
      */
     fontSize?: number;
     /**
      * Specifies the number of allowed lines for the label.
      * Only supported on iOS.
+     * Defaults to 2.
      */
     numberOfLines?: number;
     /**
@@ -44,7 +48,15 @@ export interface VideoFeedTitleConfiguration {
     gradientDrawable?: GradientDrawable;
 }
 export interface VideoFeedPlayIconConfiguration {
+    /**
+     * Specifies if the play icon is hidden.
+     * Defaults to false.
+     */
     hidden?: boolean;
+    /**
+     * The width of play icon.
+     * If you don't set this property, the icon width will be 40 on iOS and 36dp on Android.
+     */
     iconWidth?: number;
 }
 export type VideoFeedTitlePosition = 'stacked' | 'nested';
@@ -56,11 +68,13 @@ export interface VideoFeedPadding {
 }
 export default interface VideoFeedConfiguration {
     /**
-     * Background color of video feed.
+     * Background color of video feed, such as #c0c0c0.
+     * If you don't set this property, the background will be transparent.
      */
     backgroundColor?: string;
     /**
      * Corner radius of video feed item.
+     * Defaults to 10 on iOS. Defaults to 0 on Android.
      */
     cornerRadius?: number;
     /**
@@ -69,10 +83,13 @@ export default interface VideoFeedConfiguration {
     title?: VideoFeedTitleConfiguration;
     /**
      * Title position of video feed item.
+     * Defaults to nested.
      */
     titlePosition?: VideoFeedTitlePosition;
     /**
-     * The padding of video feed title. Only supported on iOS.
+     * The padding of video feed title.
+     * Defaults to { top: 8, right: 8, bottom: 8, left: 8 }.
+     * Only supported on iOS.
      */
     titlePadding?: VideoFeedPadding;
     /**
@@ -81,28 +98,36 @@ export default interface VideoFeedConfiguration {
     playIcon?: VideoFeedPlayIconConfiguration;
     /**
      * Indicates if the video feed item shows ad badge.
+     * Defaults to false.
      */
     showAdBadge?: boolean;
     /**
-     * The aspect ratio(width / height) for video feed item. Only supported on iOS.
+     * The aspect ratio(width / height) for video feed item.
+     * Defaults to 4 / 6.
+     * Only supported on iOS.
      */
     aspectRatio?: number;
     /**
-     * The padding of video feed content. Only supported on iOS.
+     * The padding of video feed content.
+     * Defaults to { top: 10, right: 10, bottom: 10, left: 10 }.
+     * Only supported on iOS.
      */
     contentPadding?: VideoFeedPadding;
     /**
      * The item spacing for video feed.
+     * If you don't set this property, the item spacing will be 10 on iOS and 4px on Android.
      */
     itemSpacing?: number;
     /**
      * Specifies if autoplay is enabled.
+     * Defaults to false.
      */
     enableAutoplay?: boolean;
     /**
      * The number of feed items to be displayed per row.
      * The property only takes effect when video feed mode is grid.
      * The property value needs to be an integer and greater than 0.
+     * Defaults to 2.
      */
     gridColumns?: number;
 }

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

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

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

@@ -1,15 +1,21 @@
 import type IOSFontInfo from './IOSFontInfo';
+/**
+ * Only supported on iOS.
+ */
 export interface VideoPlayerCTAStyle {
     /**
      * The background color of CTA button.
+     * Defaults to #3A86FF.
      */
     backgroundColor?: string;
     /**
      * The text color of CTA button.
+     * Defaults to #FFFFFF.
      */
     textColor?: string;
     /**
      * The font size of CTA button.
+     * Defaults to 14.
      */
     fontSize?: number;
     /**

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

@@ -6,14 +6,17 @@ import type { VideoPlayerStyle } from './VideoPlayerStyle';
 export default interface VideoPlayerConfiguration {
     /**
      * Sets the proportion of the video player to its container.
+     * Defaults to full.
      */
     playerStyle?: VideoPlayerStyle;
     /**
      * Behavior occurring after video is complete.
+     * Defaults to advanceToNext.
      */
     videoCompleteAction?: VideoPlayerCompleteAction;
     /**
      * Indicates if the video player shows share button.
+     * Defaults to true.
      */
     showShareButton?: boolean;
     /**
@@ -22,22 +25,27 @@ export default interface VideoPlayerConfiguration {
     ctaButtonStyle?: VideoPlayerCTAStyle;
     /**
      * Indicates if the video player shows playback button.
+     * Defaults to false on iOS. Default to true on Android.
      */
     showPlaybackButton?: boolean;
     /**
      * Indicates if the video player shows mute button.
+     * Defaults to true.
      */
     showMuteButton?: boolean;
     /**
      * Indicates if Firework branding should be showed or not.
+     * Defaults to true.
      */
     showBranding?: boolean;
     /**
      * Specifies the delay before showing the CTA.
+     * Defaults to { type: constant, value: 3 }.
      */
     ctaDelay?: VideoPlayerCTADelay;
     /**
-     * Specifies the delay before the highlight animation occurs. Only supported on iOS.
+     * Specifies the delay before the highlight animation occurs.
+     * Defaults to { type: constant, value: 2 }.
      */
     ctaHighlightDelay?: VideoPlayerCTADelay;
     /**
@@ -46,6 +54,7 @@ export default interface VideoPlayerConfiguration {
     shareBaseURL?: string;
     /**
      * Specifies the desired width for the Video Player CTA button.
+     * Defaults to fullWidth.
      */
     ctaWidth?: VideoPlayerCTAWidth;
 }

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

@@ -0,0 +1,7 @@
+import type VideoPlayerConfiguration from './VideoPlayerConfiguration';
+export default interface VideoPlayerNativeConfiguration extends VideoPlayerConfiguration {
+    /**
+     * Specifies if Picture in Picture is enabled.
+     */
+    enablePictureInPicture?: boolean;
+}

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

@@ -2,10 +2,10 @@ import { NativeEventEmitter, NativeModule } from 'react-native';
 import type AdBadgeConfiguration from '../models/AdBadgeConfiguration';
 import type SDKInitOptions from '../models/SDKInitOptions';
 import type TrackPurchaseParameters from '../models/TrackPurchaseParameters';
-import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
+import type VideoPlayerNativeConfiguration from '../models/VideoPlayerNativeConfiguration';
 interface IFireworkSDKModule extends NativeModule {
     init(options?: SDKInitOptions): Promise<any>;
-    openVideoPlayer(url: string, config?: VideoPlayerConfiguration): void;
+    openVideoPlayer(url: string, config?: VideoPlayerNativeConfiguration): void;
     setCustomCTAClickEnabled(enabled: boolean): void;
     setShareBaseURL(url?: string): Promise<any>;
     setVideoPlaybackEventEnabled(enabled: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-firework-sdk",
-  "version": "2.3.1",
+  "version": "2.4.0-beta.2",
   "description": "Firework React Native SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -31,7 +31,7 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "prepare": "bob build",
+    "build": "bob build",
     "generate-doc": "rm -rf docs && npx typedoc",
     "prettier": "npx prettier --write \"{src,example}/**/*.{ts,tsx}\""
   },

package/react-native-firework-sdk.podspec

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

package/src/FireworkSDK.ts

@@ -13,7 +13,6 @@ import type {
 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, {
   FireworkSDKModuleEventEmitter,
 } from './modules/FireworkSDKModule';
@@ -22,6 +21,7 @@ import ShoppingModule from './modules/ShoppingModule';
 import FWLoggerUtil from './utils/FWLoggerUtil';
 import VideoShopping from './VideoShopping';
 import FWGlobalState from './utils/FWGlobalState';
+import type OpenVideoPlayerConfiguration from './models/OpenVideoPlayerConfiguration';
 
 export type SDKInitCallback = (event: SDKInitEvent) => Promise<void> | void;
 export type CustomCTAClickCallback = (
@@ -256,7 +256,7 @@ class FireworkSDK {
    */
   public async openVideoPlayer(
     url: string,
-    config?: VideoPlayerConfiguration
+    config?: OpenVideoPlayerConfiguration
   ): Promise<void> {
     if (!FWGlobalState.getInstance().sdkInitCalled) {
       await FWGlobalState.getInstance().sdkInitCalledPromise;

package/src/components/StoryBlock.tsx

@@ -23,6 +23,7 @@ import type AdConfiguration from '../models/AdConfiguration';
 import type FWError from '../models/FWError';
 import { FWEventName } from '../models/FWEventName';
 import type { StoryBlockConfiguration } from '../models/StoryBlockConfiguration';
+import type StoryBlockNativeConfiguration from '../models/StoryBlockNativeConfiguration';
 import type { StoryBlockSource } from '../models/StoryBlockSource';
 import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
 import FWGlobalState from '../utils/FWGlobalState';
@@ -73,10 +74,18 @@ export interface IStoryBlockProps {
    * Non-UTF-8 characters are not allowed. If using boolean predicates, the expression needs to be wrapped with parenthesis.
    */
   hashtagFilterExpression?: string;
+  /**
+   * Product ids used to generate the sku feed
+   */
+  productIds?: string[];
   /**
    * Specifies if Picture in Picture is enabled. Only supported on iOS.
    */
   enablePictureInPicture?: boolean;
+  /**
+   * The corner radius of story block.
+   */
+  cornerRadius?: number;
   /**
    * Ad configuration of the feed. Only supported on iOS.
    */
@@ -157,7 +166,7 @@ const StoryBlock: ForwardRefRenderFunction<
 
   const generateVastAttributesString = () => {
     const { adConfiguration } = props;
-    const vastAttributes = adConfiguration?.vastAttributes ?? '';
+    const vastAttributes = adConfiguration?.vastAttributes;
     if (!vastAttributes) {
       return '';
     }
@@ -173,53 +182,67 @@ const StoryBlock: ForwardRefRenderFunction<
     return resultString;
   };
 
+  const getStoryBlockConfiguration: () =>
+    | StoryBlockNativeConfiguration
+    | undefined = () => {
+    const { storyBlockConfiguration, enablePictureInPicture } = props;
+    let resultStoryBlockConfiguration:
+      | StoryBlockNativeConfiguration
+      | undefined = storyBlockConfiguration;
+    if (typeof enablePictureInPicture === 'boolean') {
+      if (!resultStoryBlockConfiguration) {
+        resultStoryBlockConfiguration = {};
+      }
+      resultStoryBlockConfiguration = {
+        ...resultStoryBlockConfiguration,
+        enablePictureInPicture,
+      };
+    }
+    return resultStoryBlockConfiguration;
+  };
+  const storyBlockConfiguration = getStoryBlockConfiguration();
+
   const generateKey = (): string => {
-    const gShareBaseURL = FireworkSDK.getInstance().shareBaseURL ?? '';
-    const appLanguage = FireworkSDK.getInstance().appLanguage ?? '';
-    const videoLaunchBehavior =
-      FireworkSDK.getInstance().videoLaunchBehavior ?? '';
-    const adBadgeConfiguration =
-      FireworkSDK.getInstance().adBadgeConfiguration ?? {};
-    const adBadgeTextType = adBadgeConfiguration.badgeTextType ?? '';
-    const backgroundColorOfAdBadge = adBadgeConfiguration.backgroundColor ?? '';
-    const textColorOfAdBadge = adBadgeConfiguration.textColor ?? '';
+    const gShareBaseURL = FireworkSDK.getInstance().shareBaseURL;
+    const appLanguage = FireworkSDK.getInstance().appLanguage;
+    const videoLaunchBehavior = FireworkSDK.getInstance().videoLaunchBehavior;
+    const adBadgeConfiguration = FireworkSDK.getInstance().adBadgeConfiguration;
+    const adBadgeTextType = adBadgeConfiguration?.badgeTextType;
+    const backgroundColorOfAdBadge = adBadgeConfiguration?.backgroundColor;
+    const textColorOfAdBadge = adBadgeConfiguration?.textColor;
     const androidFontIsCustomOfAdBadge =
-      adBadgeConfiguration.androidFontInfo?.isCustom?.toString() ?? '';
+      adBadgeConfiguration?.androidFontInfo?.isCustom;
     const androidFontTypefaceNameOfAdBadge =
-      adBadgeConfiguration.androidFontInfo?.typefaceName ?? '';
+      adBadgeConfiguration?.androidFontInfo?.typefaceName;
 
     const {
       source,
-      channel = '',
-      playlist = '',
-      hashtagFilterExpression = '',
-      enablePictureInPicture = false,
+      channel,
+      playlist,
+      hashtagFilterExpression,
+      productIds,
+      enablePictureInPicture,
+      cornerRadius,
       adConfiguration,
-      storyBlockConfiguration,
     } = props;
     const dynamicContentParametersString =
       generateDynamicContentParametersString();
 
-    const videoCompleteAction =
-      storyBlockConfiguration?.videoCompleteAction ?? '';
-    const showShareButton =
-      storyBlockConfiguration?.showShareButton?.toString() ?? '';
-    const showPlaybackButton =
-      storyBlockConfiguration?.showPlaybackButton?.toString() ?? '';
-    const showBranding =
-      storyBlockConfiguration?.showBranding?.toString() ?? '';
-    const ctaDelayType = storyBlockConfiguration?.ctaDelay?.type ?? '';
-    const ctaDelayValue =
-      storyBlockConfiguration?.ctaDelay?.value?.toFixed(5) ?? '';
+    const videoCompleteAction = storyBlockConfiguration?.videoCompleteAction;
+    const showShareButton = storyBlockConfiguration?.showShareButton;
+    const showPlaybackButton = storyBlockConfiguration?.showPlaybackButton;
+    const showBranding = storyBlockConfiguration?.showBranding;
+    const ctaDelayType = storyBlockConfiguration?.ctaDelay?.type;
+    const ctaDelayValue = storyBlockConfiguration?.ctaDelay?.value?.toFixed(5);
     const ctaHighlightDelayType =
-      storyBlockConfiguration?.ctaHighlightDelay?.type ?? '';
+      storyBlockConfiguration?.ctaHighlightDelay?.type;
     const ctaHighlightDelayValue =
-      storyBlockConfiguration?.ctaHighlightDelay?.value?.toFixed(5) ?? '';
-    const shareBaseURL = storyBlockConfiguration?.shareBaseURL ?? '';
-    const ctaWidth = storyBlockConfiguration?.ctaWidth ?? '';
+      storyBlockConfiguration?.ctaHighlightDelay?.value?.toFixed(5);
+    const shareBaseURL = storyBlockConfiguration?.shareBaseURL;
+    const ctaWidth = storyBlockConfiguration?.ctaWidth;
 
-    const requiresAds = adConfiguration?.requiresAds?.toString() ?? '';
-    const adsFetchTimeout = adConfiguration?.adsFetchTimeout ?? 10;
+    const requiresAds = adConfiguration?.requiresAds;
+    const adsFetchTimeout = adConfiguration?.adsFetchTimeout;
     const vastAttributesString = generateVastAttributesString();
 
     let key = `gShareBaseURL:${gShareBaseURL}`;
@@ -240,7 +263,9 @@ const StoryBlock: ForwardRefRenderFunction<
     key += `_playlist:${playlist}`;
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_hashtagFilterExpression:${hashtagFilterExpression}`;
+    key += `productIds:${productIds?.join(',')}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
+    key += `_cornerRadius:${cornerRadius}`;
 
     key += `_shareBaseURL:${shareBaseURL}`;
     if (Platform.OS === 'android') {
@@ -386,12 +411,16 @@ const StoryBlock: ForwardRefRenderFunction<
   if (!sdkInitCalled) {
     return null;
   }
-
+  const { style, cornerRadius, ...otherProps } = props;
   return (
     <FWStoryBlock
       ref={nativeComponentRef}
       key={key}
-      {...props}
+      {...otherProps}
+      cornerRadius={cornerRadius}
+      style={Object.assign({ borderRadius: cornerRadius }, style)}
+      storyBlockConfiguration={storyBlockConfiguration}
+      enablePictureInPicture={undefined}
       onStoryBlockLoadFinished={handleStoryBlockLoadFinished}
       onStoryBlockFullScreenStateChanged={
         handleStoryBlockFullScreenStateChanged