react-native-firework-sdk 2.7.1 → 2.8.0

package/src/FireworkSDK.ts

@@ -201,8 +201,24 @@ class FireworkSDK {
 
     this.eventEmitter.addListener(FWEventName.CustomCTAClick, (event) => {
       FWLoggerUtil.log(`Receive CustomCTAClick url: ${event?.url}`);
+      FWLoggerUtil.log(
+        `Receive CustomCTAClick callbackId: ${event?.callbackId}`
+      );
 
       if (this.onCustomCTAClick) {
+        if (event) {
+          if (event.callbackId) {
+            const callbackId = event.callbackId;
+            delete event.callbackId;
+            if (Platform.OS === 'ios') {
+              event.playerHandler = {
+                pause: () => FireworkSDKModule.pausePlayer(callbackId),
+                resume: () => FireworkSDKModule.resumePlayer(callbackId),
+              };
+            }
+          }
+        }
+
         this.onCustomCTAClick(event ?? {});
       }
     });

package/src/VideoShopping.ts

@@ -202,7 +202,24 @@ class VideoShopping {
 
     this.eventEmitter.addListener(FWEventName.CustomProductCardTap, (event) => {
       FWLoggerUtil.log(`Receive CustomProductCardTap event url: ${event?.url}`);
-      this.handleCustomProductCardTapEvent(event);
+      if (event) {
+        if (!event.video) {
+          event.video = { videoId: '' };
+        }
+
+        if (event.callbackId) {
+          const callbackId = event.callbackId;
+          delete event.callbackId;
+          if (Platform.OS === 'ios') {
+            event.playerHandler = {
+              pause: () => ShoppingModule.pausePlayer(callbackId),
+              resume: () => ShoppingModule.resumePlayer(callbackId),
+            };
+          }
+        }
+      }
+
+      this.handleCustomProductCardTapEvent(event ?? {});
     });
   }
 

package/src/components/StoryBlock.tsx

@@ -29,6 +29,7 @@ import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
 import FWGlobalState from '../utils/FWGlobalState';
 import FWLoggerUtil from '../utils/FWLoggerUtil';
 import FWStoryBlock from './FWStoryBlock';
+import type ButtonInfo from '../models/ButtonInfo';
 
 const NativeComponentName = 'FWStoryBlock';
 
@@ -79,7 +80,7 @@ export interface IStoryBlockProps {
    */
   productIds?: string[];
   /**
-   * The video or live stream id. Only supported on iOS.
+   * The video or live stream id.
    */
   contentId?: string;
   /**
@@ -95,13 +96,22 @@ export interface IStoryBlockProps {
    */
   adConfiguration?: AdConfiguration;
 
-  /* The configuration of the story block.
-   Only supported on Android.*/
+  /**
+   * 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;
+  /**
+   * Start Picture in Picture callback. Only supported on iOS.
+   */
+  onStoryBlockDidStartPictureInPicture?: (error?: FWError) => void;
+  /**
+   * Stop Picture in Picture callback. Only supported on iOS.
+   */
+  onStoryBlockDidStopPictureInPicture?: (error?: FWError) => void;
 }
 
 const StoryBlock: ForwardRefRenderFunction<
@@ -136,6 +146,56 @@ const StoryBlock: ForwardRefRenderFunction<
     }
   };
 
+  const handleStoryBlockDidStartPictureInPicture = (
+    event: NativeSyntheticEvent<any>
+  ) => {
+    FWLoggerUtil.log(
+      `StoryBlock handleStoryBlockDidStartPictureInPicture ${JSON.stringify(
+        event.nativeEvent
+      )}`
+    );
+    const { onStoryBlockDidStartPictureInPicture } = props;
+
+    const { name, reason } = event.nativeEvent;
+
+    if (onStoryBlockDidStartPictureInPicture) {
+      if (name) {
+        if (reason) {
+          onStoryBlockDidStartPictureInPicture({ name, reason });
+        } else {
+          onStoryBlockDidStartPictureInPicture({ name });
+        }
+      } else {
+        onStoryBlockDidStartPictureInPicture();
+      }
+    }
+  };
+
+  const handleStoryBlockDidStopPictureInPicture = (
+    event: NativeSyntheticEvent<any>
+  ) => {
+    FWLoggerUtil.log(
+      `StoryBlock handleStoryBlockDidStopPictureInPicture ${JSON.stringify(
+        event.nativeEvent
+      )}`
+    );
+    const { onStoryBlockDidStopPictureInPicture } = props;
+
+    const { name, reason } = event.nativeEvent;
+
+    if (onStoryBlockDidStopPictureInPicture) {
+      if (name) {
+        if (reason) {
+          onStoryBlockDidStopPictureInPicture({ name, reason });
+        } else {
+          onStoryBlockDidStopPictureInPicture({ name });
+        }
+      } else {
+        onStoryBlockDidStopPictureInPicture();
+      }
+    }
+  };
+
   const handleStoryBlockFullScreenStateChanged = (
     event: NativeSyntheticEvent<any>
   ) => {
@@ -186,6 +246,10 @@ const StoryBlock: ForwardRefRenderFunction<
     return resultString;
   };
 
+  const generateButtonInfoString = (buttonInfo?: ButtonInfo) => {
+    return `imageName:${buttonInfo?.imageName}_systemImageName:${buttonInfo?.systemImageName}_tintColor:${buttonInfo?.tintColor}`;
+  };
+
   const getStoryBlockConfiguration: () =>
     | StoryBlockNativeConfiguration
     | undefined = () => {
@@ -246,6 +310,7 @@ const StoryBlock: ForwardRefRenderFunction<
     const ctaHighlightDelayValue =
       storyBlockConfiguration?.ctaHighlightDelay?.value?.toFixed(5);
     const shareBaseURL = storyBlockConfiguration?.shareBaseURL;
+    const buttonConfiguration = storyBlockConfiguration?.buttonConfiguration;
     const ctaWidth = storyBlockConfiguration?.ctaWidth;
     const showVideoDetailTitle = storyBlockConfiguration?.showVideoDetailTitle;
 
@@ -288,6 +353,24 @@ const StoryBlock: ForwardRefRenderFunction<
     key += `_ctaHighlightDelayType:${ctaHighlightDelayType}`;
     key += `_ctaHighlightDelayValue:${ctaHighlightDelayValue}`;
     key += `_ctaWidth:${ctaWidth}`;
+    key += `_buttonConfiguration.videoDetailButton:${generateButtonInfoString(
+      buttonConfiguration?.videoDetailButton
+    )}`;
+    key += `_buttonConfiguration.closeButton:${generateButtonInfoString(
+      buttonConfiguration?.closeButton
+    )}`;
+    key += `_buttonConfiguration.muteButton:${generateButtonInfoString(
+      buttonConfiguration?.muteButton
+    )}`;
+    key += `_buttonConfiguration.unmuteButton:${generateButtonInfoString(
+      buttonConfiguration?.unmuteButton
+    )}`;
+    key += `_buttonConfiguration.playButton:${generateButtonInfoString(
+      buttonConfiguration?.playButton
+    )}`;
+    key += `_buttonConfiguration.pauseButton:${generateButtonInfoString(
+      buttonConfiguration?.pauseButton
+    )}`;
     key += `_showVideoDetailTitle:${showVideoDetailTitle}`;
 
     key += `_requiresAds:${requiresAds}`;
@@ -432,6 +515,12 @@ const StoryBlock: ForwardRefRenderFunction<
       storyBlockConfiguration={storyBlockConfiguration}
       enablePictureInPicture={undefined}
       onStoryBlockLoadFinished={handleStoryBlockLoadFinished}
+      onStoryBlockDidStartPictureInPicture={
+        handleStoryBlockDidStartPictureInPicture
+      }
+      onStoryBlockDidStopPictureInPicture={
+        handleStoryBlockDidStopPictureInPicture
+      }
       onStoryBlockFullScreenStateChanged={
         handleStoryBlockFullScreenStateChanged
       }

package/src/components/VideoFeed.tsx

@@ -22,6 +22,7 @@ import FWGlobalState from '../utils/FWGlobalState';
 import FWLoggerUtil from '../utils/FWLoggerUtil';
 import FWVideoFeed from './FWVideoFeed';
 import type VideoPlayerNativeConfiguration from '../models/VideoPlayerNativeConfiguration';
+import type ButtonInfo from '../models/ButtonInfo';
 
 export type VideoFeedMode = 'row' | 'column' | 'grid';
 
@@ -91,9 +92,17 @@ export interface IVideoFeedProps {
    */
   adConfiguration?: AdConfiguration;
   /**
-   * The feed loading result callback. It means loading successfully when error equals to undefined. Only supported on iOS.
+   * The feed loading result callback. It means loading successfully when error equals to undefined.
    */
   onVideoFeedLoadFinished?: (error?: FWError) => void;
+  /**
+   * Start Picture in Picture callback. Only supported on iOS.
+   */
+  onVideoFeedDidStartPictureInPicture?: (error?: FWError) => void;
+  /**
+   * Stop Picture in Picture callback. Only supported on iOS.
+   */
+  onVideoFeedDidStopPictureInPicture?: (error?: FWError) => void;
 }
 
 interface IVideoFeedState {
@@ -163,6 +172,56 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     }
   };
 
+  private _onVideoFeedDidStartPictureInPicture = (
+    event: NativeSyntheticEvent<any>
+  ) => {
+    FWLoggerUtil.log(
+      `VideoFeed _onVideoFeedDidStartPictureInPicture ${JSON.stringify(
+        event.nativeEvent
+      )}`
+    );
+    const { onVideoFeedDidStartPictureInPicture } = this.props;
+
+    const { name, reason } = event.nativeEvent;
+
+    if (onVideoFeedDidStartPictureInPicture) {
+      if (name) {
+        if (reason) {
+          onVideoFeedDidStartPictureInPicture({ name, reason });
+        } else {
+          onVideoFeedDidStartPictureInPicture({ name });
+        }
+      } else {
+        onVideoFeedDidStartPictureInPicture();
+      }
+    }
+  };
+
+  private _onVideoFeedDidStopPictureInPicture = (
+    event: NativeSyntheticEvent<any>
+  ) => {
+    FWLoggerUtil.log(
+      `VideoFeed _onVideoFeedDidStopPictureInPicture ${JSON.stringify(
+        event.nativeEvent
+      )}`
+    );
+    const { onVideoFeedDidStopPictureInPicture } = this.props;
+
+    const { name, reason } = event.nativeEvent;
+
+    if (onVideoFeedDidStopPictureInPicture) {
+      if (name) {
+        if (reason) {
+          onVideoFeedDidStopPictureInPicture({ name, reason });
+        } else {
+          onVideoFeedDidStopPictureInPicture({ name });
+        }
+      } else {
+        onVideoFeedDidStopPictureInPicture();
+      }
+    }
+  };
+
   /**
    * @ignore
    */
@@ -309,7 +368,8 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
       videoPlayerConfiguration?.ctaHighlightDelay?.value?.toFixed(5);
     const shareBaseURL = videoPlayerConfiguration?.shareBaseURL;
     const ctaWidth = videoPlayerConfiguration?.ctaWidth;
-
+    const buttonConfiguration = videoPlayerConfiguration?.buttonConfiguration;
+    const showVideoDetailTitle = videoPlayerConfiguration?.showVideoDetailTitle;
     const requiresAds = adConfiguration?.requiresAds;
     const adsFetchTimeout = adConfiguration?.adsFetchTimeout;
     const vastAttributesString = this._generateVastAttributesString();
@@ -372,7 +432,28 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
       key += `_ctaHighlightDelayType:${ctaHighlightDelayType}`;
       key += `_ctaHighlightDelayValue:${ctaHighlightDelayValue}`;
       key += `_ctaWidth:${ctaWidth}`;
+      key += `_buttonConfiguration.videoDetailButton:${this._generateButtonInfoString(
+        buttonConfiguration?.videoDetailButton
+      )}`;
+      key += `_buttonConfiguration.closeButton:${this._generateButtonInfoString(
+        buttonConfiguration?.closeButton
+      )}`;
+      key += `_buttonConfiguration.muteButton:${this._generateButtonInfoString(
+        buttonConfiguration?.muteButton
+      )}`;
+      key += `_buttonConfiguration.unmuteButton:${this._generateButtonInfoString(
+        buttonConfiguration?.unmuteButton
+      )}`;
+      key += `_buttonConfiguration.playButton:${this._generateButtonInfoString(
+        buttonConfiguration?.playButton
+      )}`;
+      key += `_buttonConfiguration.pauseButton:${this._generateButtonInfoString(
+        buttonConfiguration?.pauseButton
+      )}`;
+      key += `_showVideoDetailTitle:${showVideoDetailTitle}`;
     }
+    // key += `_videoPlayerLogoConfiguration.option:${videoPlayerLogoConfigurationOption}`;
+    // key += `_videoPlayerLogoConfiguration.encodeId:${videoPlayerLogoConfigurationEncodeId}`;
 
     key += `_requiresAds:${requiresAds}`;
     key += `_adsFetchTimeout:${adsFetchTimeout}`;
@@ -387,6 +468,12 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
         videoPlayerConfiguration={videoPlayerConfiguration}
         ref={this._nativeComponentRef}
         onVideoFeedLoadFinished={this._onVideoFeedLoadFinished}
+        onVideoFeedDidStartPictureInPicture={
+          this._onVideoFeedDidStartPictureInPicture
+        }
+        onVideoFeedDidStopPictureInPicture={
+          this._onVideoFeedDidStopPictureInPicture
+        }
         mode={mode ?? 'row'}
       />
     );
@@ -431,6 +518,10 @@ class VideoFeed extends React.Component<IVideoFeedProps, IVideoFeedState> {
     return resultString;
   }
 
+  private _generateButtonInfoString(buttonInfo?: ButtonInfo): string {
+    return `imageName:${buttonInfo?.imageName}_systemImageName:${buttonInfo?.systemImageName}_tintColor:${buttonInfo?.tintColor}`;
+  }
+
   private _getVideoFeedConfiguration(): VideoFeedConfiguration | undefined {
     const { videoFeedConfiguration } = this.props;
     if (!videoFeedConfiguration) {

package/src/index.ts

@@ -55,8 +55,12 @@ import type ProductInfoViewConfiguration from './models/ProductInfoViewConfigura
 import type {
   LinkButtonConfiguration,
   ProductCardConfiguration,
+  ProductCardCTAButtonStyle,
   ProductCardCTAButtonText,
+  ProductCardIconConfiguration,
+  ProductCardLabelConfiguration,
   ProductCardPriceConfiguration,
+  ProductCardPriceLabelAxis,
   ProductCardTheme,
   ShoppingCTAButtonConfiguration,
   ShoppingCTAButtonText,
@@ -91,6 +95,10 @@ import type {
 } from './models/VideoPlayerCTADelay';
 import type { VideoPlayerCTAStyle } from './models/VideoPlayerCTAStyle';
 import type { VideoPlayerCTAWidth } from './models/VideoPlayerCTAWidth';
+import type {
+  VideoPlayerLogoConfiguration,
+  VideoPlayerLogoOption,
+} from './models/VideoPlayerLogoConfiguration';
 import type { VideoPlayerStyle } from './models/VideoPlayerStyle';
 import type {
   CustomClickCartIconCallback,
@@ -141,8 +149,12 @@ export {
   OpenVideoPlayerConfiguration,
   Product,
   ProductCardConfiguration,
+  ProductCardCTAButtonStyle,
   ProductCardCTAButtonText,
+  ProductCardIconConfiguration,
+  ProductCardLabelConfiguration,
   ProductCardPriceConfiguration,
+  ProductCardPriceLabelAxis,
   ProductCardTheme,
   ProductInfoViewConfiguration,
   ProductPrice,
@@ -187,6 +199,8 @@ export {
   VideoPlayerCTADelayType,
   VideoPlayerCTAStyle,
   VideoPlayerCTAWidth,
+  VideoPlayerLogoConfiguration,
+  VideoPlayerLogoOption,
   VideoPlayerSize,
   VideoPlayerStyle,
   VideoShopping,

package/src/models/FWEvents.ts

@@ -14,11 +14,31 @@ export interface SDKInitEvent {
   error?: FWError | null;
 }
 
+export interface PlayerHandler {
+  /**
+   * Pause the video playback associated with this CTA.
+   * Only supported on iOS
+   */
+  pause: () => void;
+
+  /**
+   * Resume the video playback associated with this CTA.
+   * Only supported on iOS
+   */
+  resume: () => void;
+}
+
 export interface CustomCTAClickEvent {
   /**
    * Action URL that is associated with this CTA
    */
   url: string;
+
+  /**
+   * The video playback pause/resume handler for the video.
+   * Only supported on iOS
+   */
+  playerHandler?: PlayerHandler;
 }
 
 export interface VideoPlaybackEvent {
@@ -84,6 +104,10 @@ export interface CustomTapProductCardEvent {
    * the video playback details that the product unit belongs to.
    */
   video: VideoPlaybackDetails;
+  /**
+   * The video playback pause/resume handler for the video.
+   */
+  playerHandler?: PlayerHandler;
 }
 
 export interface LiveStreamEvent {

package/src/models/ProductInfoViewConfiguration.ts

@@ -35,14 +35,89 @@ export type ProductCardCTAButtonText = 'shopNow' | 'buyNow';
 export type ProductCardTheme = 'dark' | 'light';
 
 export interface ProductCardPriceConfiguration {
+  /**
+   * Hide the price label or not.
+   * @deprecated This property has no effect on iOS.
+   */
   isHidden?: boolean;
+  /**
+   * The axis of price label.
+   * Default to 'horizontal'.
+   * Only supported on iOS.
+   */
+  axis?: ProductCardPriceLabelAxis;
+  /**
+   * The label configuration of price.
+   * Only supported on iOS.
+   */
+  priceLabel?: ProductCardLabelConfiguration;
+  /**
+   * The label configuration of original price.
+   * Only supported on iOS.
+   */
+  originalPriceLabel?: ProductCardLabelConfiguration;
+  /**
+   * The default display order is [priceLabel, originalPriceLabel]. When the value is `true`, the order is reversed.
+   * Only supported on iOS.
+   */
+  isPriceFirst?: boolean;
 }
 
-export interface ProductCardConfiguration {
+export type ProductCardPriceLabelAxis = 'horizontal' | 'vertical';
+
+export interface ProductCardLabelConfiguration {
   /**
-   * The text of shopping CTA button.
+   * The text color of label.
+   * Only supported on iOS.
    */
-  ctaButtonText?: ProductCardCTAButtonText;
+  textColor?: string;
+  /**
+   * The font size of label.
+   * Only supported on iOS.
+   */
+  fontSize?: number;
+  /**
+   * Number of lines to show.
+   * Only supported on iOS.
+   * Default to 1.
+   */
+  numberOfLines?: number;
+  /**
+   * The iOS font info.
+   * The property is ignored when fontSize is not set.
+   * Only supported on iOS.
+   */
+  iOSFontInfo?: IOSFontInfo;
+}
+
+export interface ProductCardCTAButtonStyle {
+  /**
+   * The text color of CTA button.
+   * Only supported on iOS.
+   */
+  textColor?: string;
+  /**
+   * The font size of CTA button.
+   * Only supported on iOS.
+   */
+  fontSize?: number;
+  /**
+   * The iOS font info.
+   * The property is ignored when fontSize is not set.
+   * Only supported on iOS.
+   */
+  iOSFontInfo?: IOSFontInfo;
+}
+
+export interface ProductCardIconConfiguration {
+  /**
+   * The corner radius of icon.
+   * Only supported on iOS.
+   */
+  cornerRadius?: number;
+}
+
+export interface ProductCardConfiguration {
   /**
    * The theme of product card.
    */
@@ -51,14 +126,48 @@ export interface ProductCardConfiguration {
    * The corner radius of product card.
    */
   cornerRadius?: number;
+  /**
+   * CTA button is hidden or not.
+   */
+  isCtaButtonHidden?: boolean;
+  /**
+   * The text of shopping CTA button.
+   */
+  ctaButtonText?: ProductCardCTAButtonText;
+  /**
+   * The cta button style of product card.
+   * Only supported on iOS.
+   */
+  ctaButtonStyle?: ProductCardCTAButtonStyle;
   /**
    * Price is hidden or not.
    */
   priceConfiguration?: ProductCardPriceConfiguration;
   /**
-   * CTA button is hidden or not.
+   * The width of product card.
+   * Only supported on iOS.
    */
-  isCtaButtonHidden?: boolean;
+  width?: number;
+  /**
+   * The height of product card.
+   * Only supported on iOS.
+   */
+  height?: number;
+  /**
+   * The background color of product card.
+   * Only supported on iOS.
+   */
+  backgroundColor?: string;
+  /**
+   * The icon configuration of product card.
+   * Only supported on iOS.
+   */
+  iconConfiguration?: ProductCardIconConfiguration;
+  /**
+   * The label configuration of product card.
+   * Only supported on iOS.
+   */
+  nameLabel?: ProductCardLabelConfiguration;
 }
 
 export default interface ProductInfoViewConfiguration {

package/src/models/StoryBlockConfiguration.ts

@@ -3,6 +3,7 @@ import type { VideoPlayerCTADelay } from './VideoPlayerCTADelay';
 import type { VideoPlayerCTAStyle } from './VideoPlayerCTAStyle';
 import type { VideoPlayerCTAWidth } from './VideoPlayerCTAWidth';
 import type { VideoPlayerCompleteAction } from './VideoPlayerCompleteAction';
+import type { VideoPlayerLogoConfiguration } from './VideoPlayerLogoConfiguration';
 import type { VideoPlayerStyle } from './VideoPlayerStyle';
 
 export interface StoryBlockConfiguration {
@@ -71,4 +72,10 @@ export interface StoryBlockConfiguration {
    * Only supported on ios.
    */
   showVideoDetailTitle?: boolean;
+  /**
+   * Specifies the logo configuration
+   * Defaults to { option: 'disabled' }
+   * Only supported on iOS.
+   */
+  videoPlayerLogoConfiguration?: VideoPlayerLogoConfiguration;
 }

package/src/models/VideoPlayerConfiguration.ts

@@ -4,6 +4,7 @@ import type { VideoPlayerCTAStyle } from './VideoPlayerCTAStyle';
 import type { VideoPlayerCTAWidth } from './VideoPlayerCTAWidth';
 import type { VideoPlayerCompleteAction } from './VideoPlayerCompleteAction';
 import type { VideoPlayerStyle } from './VideoPlayerStyle';
+import type { VideoPlayerLogoConfiguration } from './VideoPlayerLogoConfiguration';
 
 export default interface VideoPlayerConfiguration {
   /**
@@ -69,4 +70,10 @@ export default interface VideoPlayerConfiguration {
    * Only supported on iOS.
    */
   showVideoDetailTitle?: boolean;
+  /**
+   * Specifies the logo configuration
+   * Defaults to { option: 'disabled' }
+   * Only supported on iOS.
+   */
+  videoPlayerLogoConfiguration?: VideoPlayerLogoConfiguration;
 }

package/src/models/VideoPlayerLogoConfiguration.ts

@@ -0,0 +1,23 @@
+// Specifies the configuration of the media's logo on the player
+// Only supported on iOS.
+export interface VideoPlayerLogoConfiguration {
+  /**
+   * Specifies the logo type.
+   * Defaults to 'disabled'.
+   * Only supported on iOS.
+   */
+  option: VideoPlayerLogoOption;
+  /**
+   * Specifies the logo encoding id.
+   * Required when option is 'creator' or 'channelAggregator'.
+   * Only supported on iOS.
+   */
+  encodedId?: string;
+}
+
+// Specifies the logo option
+// Only supported on iOS.
+export type VideoPlayerLogoOption =
+  | 'disabled'
+  | 'creator'
+  | 'channelAggregator';

package/src/modules/FireworkSDKModule.ts

@@ -27,6 +27,8 @@ interface IFireworkSDKModule extends NativeModule {
   setAdBadgeConfiguration(config?: AdBadgeConfiguration): Promise<any>;
   trackPurchase(parameters: TrackPurchaseParameters): void;
   changeAppLanguage(language?: string | null): Promise<boolean>;
+  pausePlayer(callbackId: number | string): void; // Only supported on iOS
+  resumePlayer(callbackId: number | string): void; // Only supported on iOS
 }
 
 const FireworkSDKModuleEventEmitter = new NativeEventEmitter(FireworkSDKModule);

package/src/modules/ShoppingModule.ts

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