react-native-firework-sdk 2.8.6 → 2.9.0

package/src/components/StoryBlock.tsx

@@ -9,7 +9,6 @@ import React, {
 } from 'react';
 
 import {
-  BackHandler,
   findNodeHandle,
   NativeSyntheticEvent,
   Platform,
@@ -43,6 +42,11 @@ export interface IStoryBlockMethods {
    * Pause the story block.
    */
   pause: () => void;
+  /**
+   * Open the fullscreen story block.
+   * Only supported on Android.
+   */
+  openFullscreen: () => void;
 }
 
 /**
@@ -93,18 +97,25 @@ export interface IStoryBlockProps {
    */
   cornerRadius?: number;
   /**
-   * Ad configuration of the feed. Only supported on iOS.
+   * Ad configuration of the feed.
    */
   adConfiguration?: AdConfiguration;
 
-  /**
-   * The configuration of the story block.
-   */
+  /* The configuration of the story block. */
   storyBlockConfiguration?: StoryBlockConfiguration;
   /**
    * The feed loading result callback. It means loading successfully when error equals to undefined.
    */
   onStoryBlockLoadFinished?: (error?: FWError) => void;
+  /**
+   * The callback is triggered when there are no items in the story block.
+   * The callback is triggered in the following cases:
+   *  1. Loading successfully but the back end returns an empty list.
+   *  2. The load failed and list is empty.
+   * onStoryBlockLoadFinished will also be triggered when onStoryBlockEmpty is triggered.
+   * Only supported on Android.
+   */
+  onStoryBlockEmpty?: (error?: FWError) => void;
   /**
    * Start Picture in Picture callback. Only supported on iOS.
    */
@@ -120,10 +131,10 @@ const StoryBlock: ForwardRefRenderFunction<
   IStoryBlockProps
 > = (props: IStoryBlockProps, forwardedRef) => {
   const nativeComponentRef = useRef(null);
-  const [isFullscreenState, setIsFullscreenState] = useState<boolean>(false);
   const [sdkInitCalled, setSdkInitCalled] = useState<boolean>(
     FWGlobalState.getInstance().sdkInitCalled
   );
+  const loadedRef = useRef<boolean>(false);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
   const handleStoryBlockLoadFinished = (event: NativeSyntheticEvent<any>) => {
@@ -131,22 +142,37 @@ const StoryBlock: ForwardRefRenderFunction<
       `StoryBlock handleStoryBlockLoadFinished ${event.nativeEvent.name}`
     );
 
-    const { onStoryBlockLoadFinished } = props;
+    const { onStoryBlockLoadFinished, onStoryBlockEmpty } = props;
     const { name, reason } = event.nativeEvent;
 
     if (onStoryBlockLoadFinished) {
       if (name) {
+        let error: FWError = { name };
         if (reason) {
-          onStoryBlockLoadFinished({ name, reason });
-        } else {
-          onStoryBlockLoadFinished({ name });
+          error.reason = reason;
+        }
+
+        onStoryBlockLoadFinished(error);
+        if (!loadedRef.current) {
+          onStoryBlockEmpty?.(error);
         }
       } else {
         onStoryBlockLoadFinished();
+        loadedRef.current = true;
       }
     }
   };
 
+  const handleStoryBlockEmpty = (event: NativeSyntheticEvent<any>) => {
+    FWLoggerUtil.log(`StoryBlock handleStoryBlockEmpty ${event.nativeEvent}`);
+
+    const { onStoryBlockEmpty } = props;
+
+    if (onStoryBlockEmpty) {
+      onStoryBlockEmpty();
+    }
+  };
+
   const handleStoryBlockDidStartPictureInPicture = (
     event: NativeSyntheticEvent<any>
   ) => {
@@ -197,16 +223,6 @@ const StoryBlock: ForwardRefRenderFunction<
     }
   };
 
-  const handleStoryBlockFullScreenStateChanged = (
-    event: NativeSyntheticEvent<any>
-  ) => {
-    FWLoggerUtil.log(
-      `StoryBlock handleStoryBlockFullScreenStateChanged ${event.nativeEvent.isFullScreen}`
-    );
-    const { isFullScreen } = event.nativeEvent;
-    setIsFullscreenState(isFullScreen);
-  };
-
   const generateDynamicContentParametersString = (): string => {
     const { dynamicContentParameters } = props;
 
@@ -412,6 +428,9 @@ const StoryBlock: ForwardRefRenderFunction<
         pause: () => {
           sendCommand('pause');
         },
+        openFullscreen: () => {
+          sendCommand('openFullscreen');
+        },
       };
     },
     []
@@ -495,27 +514,6 @@ const StoryBlock: ForwardRefRenderFunction<
     });
   }, []);
 
-  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();
-      };
-    }
-
-    return;
-  }, [isFullscreenState]);
-
   if (!sdkInitCalled) {
     return null;
   }
@@ -530,15 +528,13 @@ const StoryBlock: ForwardRefRenderFunction<
       storyBlockConfiguration={storyBlockConfiguration}
       enablePictureInPicture={undefined}
       onStoryBlockLoadFinished={handleStoryBlockLoadFinished}
+      onStoryBlockEmpty={handleStoryBlockEmpty}
       onStoryBlockDidStartPictureInPicture={
         handleStoryBlockDidStartPictureInPicture
       }
       onStoryBlockDidStopPictureInPicture={
         handleStoryBlockDidStopPictureInPicture
       }
-      onStoryBlockFullScreenStateChanged={
-        handleStoryBlockFullScreenStateChanged
-      }
     />
   );
 };

package/src/components/VideoFeed.tsx

@@ -88,13 +88,22 @@ export interface IVideoFeedProps {
    */
   videoPlayerConfiguration?: VideoPlayerConfiguration;
   /**
-   * Ad configuration of the feed. Only supported on iOS.
+   * Ad configuration of the feed.
    */
   adConfiguration?: AdConfiguration;
   /**
    * The feed loading result callback. It means loading successfully when error equals to undefined.
    */
   onVideoFeedLoadFinished?: (error?: FWError) => void;
+  /**
+   * The callback is triggered when there are no items in the story block.
+   * The callback is triggered in the following cases:
+   *  1. Loading successfully but the back end returns an empty list.
+   *  2. The load failed and list is empty.
+   * onVideoFeedLoadFinished will also be triggered when onVideoFeedEmpty is triggered.
+   * Only supported on Android.
+   */
+  onVideoFeedEmpty?: (error?: FWError) => void;
   /**
    * Start Picture in Picture callback. Only supported on iOS.
    */
@@ -126,6 +135,8 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
 
   private _subscriptions: EmitterSubscription[] = [];
 
+  private _loaded: boolean = false;
+
   constructor(props: IVideoFeedProps) {
     super(props);
     this.state = {
@@ -155,23 +166,38 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     FWLoggerUtil.log(
       `VideoFeed _onVideoFeedLoadFinished ${JSON.stringify(event.nativeEvent)}`
     );
-    const { onVideoFeedLoadFinished } = this.props;
+    const { onVideoFeedLoadFinished, onVideoFeedEmpty } = this.props;
 
     const { name, reason } = event.nativeEvent;
 
     if (onVideoFeedLoadFinished) {
       if (name) {
+        let error: FWError = { name };
         if (reason) {
-          onVideoFeedLoadFinished({ name, reason });
-        } else {
-          onVideoFeedLoadFinished({ name });
+          error.reason = reason;
+        }
+        onVideoFeedLoadFinished(error);
+        if (!this._loaded) {
+          onVideoFeedEmpty?.(error);
         }
       } else {
         onVideoFeedLoadFinished();
+        this._loaded = true;
       }
     }
   };
 
+  private _onVideoFeedEmpty = (event: NativeSyntheticEvent<any>) => {
+    FWLoggerUtil.log(
+      `VideoFeed _onVideoFeedLoadFinished ${JSON.stringify(event.nativeEvent)}`
+    );
+    const { onVideoFeedEmpty } = this.props;
+
+    if (onVideoFeedEmpty) {
+      onVideoFeedEmpty();
+    }
+  };
+
   private _onVideoFeedDidStartPictureInPicture = (
     event: NativeSyntheticEvent<any>
   ) => {
@@ -296,12 +322,6 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
    * @ignore
    */
   render() {
-    FWLoggerUtil.log(
-      `VideoFeed render props ${JSON.stringify(
-        this.props
-      )} state ${JSON.stringify(this.state)}`
-    );
-
     if (!this.state.sdkInitCalled) {
       return null;
     }
@@ -466,6 +486,7 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
         videoPlayerConfiguration={videoPlayerConfiguration}
         ref={this._nativeComponentRef}
         onVideoFeedLoadFinished={this._onVideoFeedLoadFinished}
+        onVideoFeedEmpty={this._onVideoFeedEmpty}
         onVideoFeedDidStartPictureInPicture={
           this._onVideoFeedDidStartPictureInPicture
         }

package/src/index.ts

@@ -101,6 +101,7 @@ import type {
   VideoPlayerLogoOption,
 } from './models/VideoPlayerLogoConfiguration';
 import type { VideoPlayerStyle } from './models/VideoPlayerStyle';
+import VideoFeedUtil from './utils/VideoFeedUtil';
 import type {
   CustomClickCartIconCallback,
   CustomClickLinkButtonCallback,
@@ -189,6 +190,7 @@ export {
   VideoFeedSource,
   VideoFeedTitleConfiguration,
   VideoFeedTitlePosition,
+  VideoFeedUtil,
   VideoLaunchBehavior,
   VideoPlaybackCallback,
   VideoPlaybackDetails,

package/src/models/ButtonInfo.ts

@@ -2,7 +2,6 @@ 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;
   /**

package/src/models/ProductInfoViewConfiguration.ts

@@ -140,7 +140,7 @@ export interface ProductCardConfiguration {
    */
   ctaButtonStyle?: ProductCardCTAButtonStyle;
   /**
-   * Price is hidden or not.
+   * The price configuration of product card.
    */
   priceConfiguration?: ProductCardPriceConfiguration;
   /**
@@ -172,7 +172,7 @@ export interface ProductCardConfiguration {
 
 export default interface ProductInfoViewConfiguration {
   /**
-   * Configuration of shopping CTA button. Only supported on iOS.
+   * Configuration of shopping CTA button.
    */
   ctaButton?: ShoppingCTAButtonConfiguration;
   /**
@@ -180,7 +180,7 @@ export default interface ProductInfoViewConfiguration {
    */
   linkButton?: LinkButtonConfiguration;
   /**
-   * Configuration of product card. Only supported on iOS.
+   * Configuration of product card.
    */
   productCard?: ProductCardConfiguration;
 }

package/src/models/StoryBlockConfiguration.ts

@@ -64,12 +64,10 @@ export interface StoryBlockConfiguration {
   /**
    * The host app could use this property to customize the button images of the video player.
    * On iOS, the property only applies to full-screen story block but not to compact story block.
-   * Only supported on iOS.
    */
   buttonConfiguration?: VideoPlayerButtonConfiguration;
   /**
    * Specifies if the title should be shown.
-   * Only supported on ios.
    */
   showVideoDetailTitle?: boolean;
   /**

package/src/models/VideoPlayerButtonConfiguration.ts

@@ -4,37 +4,31 @@ 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

@@ -62,12 +62,10 @@ export default interface VideoPlayerConfiguration {
   ctaWidth?: VideoPlayerCTAWidth;
   /**
    * The host app could use this property to customize the button images of the video player.
-   * Only supported on iOS.
    */
   buttonConfiguration?: VideoPlayerButtonConfiguration;
   /**
    * Indicates if the video player shows title.
-   * Only supported on iOS.
    */
   showVideoDetailTitle?: boolean;
   /**

package/src/utils/VideoFeedUtil.ts

@@ -0,0 +1,74 @@
+import { Platform } from 'react-native';
+import type VideoFeedConfiguration from '../models/VideoFeedConfiguration';
+
+class VideoFeedUtil {
+  static calculateGridFeedHeight({
+    videoFeedConfiguration = {},
+    rows,
+    columns,
+    width,
+  }: {
+    videoFeedConfiguration?: VideoFeedConfiguration;
+    rows: number;
+    columns: number;
+    width: number;
+  }): number {
+    if (Platform.OS === 'ios') {
+      const contentPadding = videoFeedConfiguration.contentPadding ?? {
+        top: 10,
+        right: 10,
+        bottom: 10,
+        left: 10,
+      };
+      const itemSpacing = videoFeedConfiguration.itemSpacing ?? 10;
+      const aspectRatio = videoFeedConfiguration.aspectRatio ?? 4 / 6;
+      const horizontalMargin =
+        (contentPadding.left ?? 10) + (contentPadding.right ?? 10);
+      const verticalMargin =
+        (contentPadding.top ?? 10) + (contentPadding.bottom ?? 10);
+      const totalHorizontalSpacing = (columns - 1) * itemSpacing;
+      const totalVerticalSpacing = (rows - 1) * itemSpacing;
+
+      const availableItemWidth =
+        width - (totalHorizontalSpacing + horizontalMargin);
+      const singleItemWidth = availableItemWidth / columns;
+      const singleItemHeight = singleItemWidth / aspectRatio;
+      const feedHeight =
+        singleItemHeight * rows + totalVerticalSpacing + verticalMargin;
+
+      return Math.ceil(feedHeight);
+    } else {
+      const itemSpacing = videoFeedConfiguration.itemSpacing ?? 8;
+      const contentPadding = {
+        top: itemSpacing / 2,
+        right: itemSpacing / 2,
+        bottom: itemSpacing / 2,
+        left: itemSpacing / 2,
+      };
+      const aspectRatio = 9 / 16;
+      const horizontalMargin =
+        (contentPadding.left ?? 4) + (contentPadding.right ?? 4);
+      const verticalMargin =
+        (contentPadding.top ?? 4) + (contentPadding.bottom ?? 4);
+      const totalHorizontalSpacing = (columns - 1) * itemSpacing;
+      const totalVerticalSpacing = (rows - 1) * itemSpacing;
+
+      const availableItemWidth =
+        width - totalHorizontalSpacing - horizontalMargin;
+      const singleItemWidth = availableItemWidth / columns;
+      let singleItemHeight = 0;
+      if (videoFeedConfiguration.titlePosition === 'stacked') {
+        singleItemHeight = singleItemWidth / aspectRatio + 30;
+      } else {
+        singleItemHeight = singleItemWidth / aspectRatio;
+      }
+
+      const feedHeight =
+        singleItemHeight * rows + totalVerticalSpacing + verticalMargin;
+
+      return Math.ceil(feedHeight);
+    }
+  }
+}
+
+export default VideoFeedUtil;

package/android/src/main/java/com/fireworksdk/bridge/utils/FWStatusBarUtil.kt

@@ -1,28 +0,0 @@
-package com.fireworksdk.bridge.utils
-
-import android.app.Activity
-import android.view.WindowManager
-
-
-object FWStatusBarUtil {
-
-  private var windowAttrs: WindowManager.LayoutParams? = null
-
-  private fun saveFlags(activity: Activity) {
-    val attr = WindowManager.LayoutParams()
-    attr.copyFrom(activity.window.attributes)
-    windowAttrs = attr
-  }
-
-  fun hideSystemNavigationUI(activity: Activity) {
-    saveFlags(activity)
-    @Suppress("DEPRECATION")
-    activity.window.addFlags(
-      WindowManager.LayoutParams.FLAG_FULLSCREEN
-    )
-  }
-
-  fun restoreSystemNavigationUI(activity: Activity) {
-    activity.window.attributes = windowAttrs
-  }
-}

package/android/src/main/java/com/fireworksdk/bridge/utils/FWStoryBlockUtil.kt

@@ -1,30 +0,0 @@
-package com.fireworksdk.bridge.utils
-
-import com.fireworksdk.bridge.components.storyblock.StoryBlockFragment
-
-object FWStoryBlockUtil {
-
-  private val list = ArrayList<StoryBlockFragment>()
-
-  fun getCurrentFullScreenStoryBlockFragment(): StoryBlockFragment? {
-    while (list.size > 0) {
-      val fragment = list.last()
-      if (!fragment.isFullScreen()) {
-        list.removeLast()
-      } else {
-        return fragment
-      }
-    }
-    return null
-  }
-
-  fun addFullScreenStoryBlockFragment(fragment: StoryBlockFragment?) {
-    fragment ?: return
-    list.add(fragment)
-  }
-
-  fun removeFullScreenStoryBlockFragment(fragment: StoryBlockFragment?) {
-    fragment ?: return
-    list.remove(fragment)
-  }
-}