react-native-firework-sdk 2.16.1 → 2.17.0-beta.1

package/lib/module/components/VideoFeed.js

@@ -1,201 +1,181 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+"use strict";
 
 import React from 'react';
 import { findNodeHandle, Platform, UIManager } from 'react-native';
-import FireworkSDK from '../FireworkSDK';
-import { FWEventName } from '../models/FWEventName';
-import { FWNativeErrorAction } from '../models/FWNativeErrorAction';
-import { FireworkSDKModuleEventEmitter } from '../modules/FireworkSDKModule';
-import FWGlobalState from '../utils/FWGlobalState';
-import gennerateJsonKey from '../utils/FWJsonUtil';
-import FWLoggerUtil from '../utils/FWLoggerUtil';
-import FWVideoFeed from './FWVideoFeed';
-import { FWComponentType } from '../models/FWComponentType';
+import FireworkSDK from "../FireworkSDK.js";
+import { FWEventName } from "../models/FWEventName.js";
+import { FWNativeErrorAction } from "../models/FWNativeErrorAction.js";
+import { FireworkSDKModuleEventEmitter } from "../modules/FireworkSDKModule.js";
+import FWGlobalState from "../utils/FWGlobalState.js";
+import gennerateJsonKey from "../utils/FWJsonUtil.js";
+import FWLoggerUtil from "../utils/FWLoggerUtil.js";
+import FWVideoFeed from "./FWVideoFeed.js";
+import { FWComponentType } from "../models/FWComponentType.js";
+
+/**
+ * The props of VideoFeed component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
 const NativeComponentName = 'FWVideoFeed';
+
 /**
  * VideoFeed component.
  */
-
 class VideoFeed extends React.Component {
   /**
    * @ignore
    */
+  static defaultProps = {
+    mode: 'row'
+  };
+  _nativeComponentRef = /*#__PURE__*/React.createRef();
+  _subscriptions = [];
+  _loaded = false;
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "_nativeComponentRef", /*#__PURE__*/React.createRef());
-
-    _defineProperty(this, "_subscriptions", []);
-
-    _defineProperty(this, "_loaded", false);
-
-    _defineProperty(this, "refresh", () => {
-      FWLoggerUtil.log(`VideoFeed refresh ${JSON.stringify(this.props)}`);
-      const nativeNodeHandle = findNodeHandle(this._nativeComponentRef.current);
-      let commandId = UIManager.getViewManagerConfig(NativeComponentName).Commands.refresh;
-
-      if (Platform.OS === 'android') {
-        commandId = commandId.toString();
-      }
-
-      let reactTag = findNodeHandle(nativeNodeHandle);
-      FWLoggerUtil.log(`VideoFeed refresh commandId: ${commandId} nativeNodeHandle: ${nativeNodeHandle} reactTag: ${reactTag}`);
-
-      if (!nativeNodeHandle || !reactTag) {
-        return;
-      }
-
-      UIManager.dispatchViewManagerCommand(reactTag, commandId, []);
-    });
-
-    _defineProperty(this, "_onVideoFeedLoadFinished", event => {
-      const {
-        onVideoFeedLoadFinished,
-        onVideoFeedEmpty
-      } = this.props;
-      const {
-        name,
-        reason,
-        action
-      } = event.nativeEvent;
-
-      if (onVideoFeedLoadFinished) {
-        if (name) {
-          let error = {
-            name
-          };
-
-          if (reason) {
-            error.reason = reason;
-          }
-
-          if (Platform.OS === 'android') {
-            if (!this._loaded) {
-              onVideoFeedLoadFinished(error);
-            }
-
-            if (action === FWNativeErrorAction.loadingFirstPage || !this._loaded) {
-              onVideoFeedEmpty === null || onVideoFeedEmpty === void 0 ? void 0 : onVideoFeedEmpty(error);
-            }
-          } else {
+    this.state = {
+      sdkInitCalled: FWGlobalState.getInstance().sdkInitCalled
+    };
+  }
+  refresh = () => {
+    FWLoggerUtil.log(`VideoFeed refresh ${JSON.stringify(this.props)}`);
+    const nativeNodeHandle = findNodeHandle(this._nativeComponentRef.current);
+    let commandId = UIManager.getViewManagerConfig(NativeComponentName).Commands.refresh ?? '';
+    if (Platform.OS === 'android') {
+      commandId = commandId.toString();
+    }
+    let reactTag = findNodeHandle(nativeNodeHandle);
+    FWLoggerUtil.log(`VideoFeed refresh commandId: ${commandId} nativeNodeHandle: ${nativeNodeHandle} reactTag: ${reactTag}`);
+    if (!nativeNodeHandle || !reactTag) {
+      return;
+    }
+    UIManager.dispatchViewManagerCommand(reactTag, commandId, []);
+  };
+  _onVideoFeedLoadFinished = event => {
+    const {
+      onVideoFeedLoadFinished,
+      onVideoFeedEmpty
+    } = this.props;
+    const {
+      name,
+      reason,
+      action
+    } = event.nativeEvent;
+    if (onVideoFeedLoadFinished) {
+      if (name) {
+        let error = {
+          name
+        };
+        if (reason) {
+          error.reason = reason;
+        }
+        if (Platform.OS === 'android') {
+          if (!this._loaded) {
             onVideoFeedLoadFinished(error);
-
-            if (!this._loaded) {
-              onVideoFeedEmpty === null || onVideoFeedEmpty === void 0 ? void 0 : onVideoFeedEmpty(error);
-            }
+          }
+          if (action === FWNativeErrorAction.loadingFirstPage || !this._loaded) {
+            onVideoFeedEmpty?.(error);
           }
         } else {
-          if (Platform.OS === 'android') {
-            if (!this._loaded) {
-              onVideoFeedLoadFinished();
-            }
-          } else {
-            onVideoFeedLoadFinished();
+          onVideoFeedLoadFinished(error);
+          if (!this._loaded) {
+            onVideoFeedEmpty?.(error);
           }
-
-          this._loaded = true;
         }
-      }
-    });
-
-    _defineProperty(this, "_onVideoFeedEmpty", event => {
-      FWLoggerUtil.log(`VideoFeed _onVideoFeedLoadFinished ${JSON.stringify(event.nativeEvent)}`);
-      const {
-        onVideoFeedEmpty
-      } = this.props;
-
-      if (onVideoFeedEmpty) {
-        onVideoFeedEmpty();
-      }
-    });
-
-    _defineProperty(this, "_onVideoFeedDidStartPictureInPicture", event => {
-      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 {
+        if (Platform.OS === 'android') {
+          if (!this._loaded) {
+            onVideoFeedLoadFinished();
           }
         } else {
-          onVideoFeedDidStartPictureInPicture();
+          onVideoFeedLoadFinished();
         }
+        this._loaded = true;
       }
-    });
-
-    _defineProperty(this, "_onVideoFeedDidStopPictureInPicture", event => {
-      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
-            });
-          }
+    }
+  };
+  _onVideoFeedEmpty = event => {
+    FWLoggerUtil.log(`VideoFeed _onVideoFeedLoadFinished ${JSON.stringify(event.nativeEvent)}`);
+    const {
+      onVideoFeedEmpty
+    } = this.props;
+    if (onVideoFeedEmpty) {
+      onVideoFeedEmpty();
+    }
+  };
+  _onVideoFeedDidStartPictureInPicture = event => {
+    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 {
-          onVideoFeedDidStopPictureInPicture();
+          onVideoFeedDidStartPictureInPicture({
+            name
+          });
         }
+      } else {
+        onVideoFeedDidStartPictureInPicture();
       }
-    });
-
-    _defineProperty(this, "_onVideoFeedGetFeedId", event => {
-      FWLoggerUtil.log(`VideoFeed onVideoFeedGetFeedId ${JSON.stringify(event.nativeEvent)}`);
-      const {
-        onVideoFeedGetFeedId
-      } = this.props;
-      const {
-        feedId
-      } = event.nativeEvent;
-
-      if (feedId) {
-        FWGlobalState.getInstance().componentTypeByFeedIdMap.set(feedId, FWComponentType.videoFeed);
-      }
-
-      if (onVideoFeedGetFeedId) {
-        onVideoFeedGetFeedId(feedId !== null && feedId !== void 0 ? feedId : '');
+    }
+  };
+  _onVideoFeedDidStopPictureInPicture = event => {
+    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();
       }
-    });
-
-    this.state = {
-      sdkInitCalled: FWGlobalState.getInstance().sdkInitCalled
-    };
-  }
+    }
+  };
+  _onVideoFeedGetFeedId = event => {
+    FWLoggerUtil.log(`VideoFeed onVideoFeedGetFeedId ${JSON.stringify(event.nativeEvent)}`);
+    const {
+      onVideoFeedGetFeedId
+    } = this.props;
+    const {
+      feedId
+    } = event.nativeEvent;
+    if (feedId) {
+      FWGlobalState.getInstance().componentTypeByFeedIdMap.set(feedId, FWComponentType.videoFeed);
+    }
+    if (onVideoFeedGetFeedId) {
+      onVideoFeedGetFeedId(feedId ?? '');
+    }
+  };
 
   /**
    * @ignore
    */
   componentDidMount() {
     FWLoggerUtil.log(`VideoFeed componentDidMount ${JSON.stringify(this.props)}`);
-
     if (!this.state.sdkInitCalled) {
       FWGlobalState.getInstance().sdkInitCalledPromise.then(() => {
         this.setState({
@@ -203,84 +183,65 @@ class VideoFeed extends React.Component {
         });
       });
     }
-
     const subscriptionOfShareBaseURLUpdated = FireworkSDKModuleEventEmitter.addListener(FWEventName.ShareBaseURLUpdated, () => {
       FWLoggerUtil.log('Receive FWEventName.ShareBaseURLUpdated');
       this.setState({});
     });
-
     this._subscriptions.push(subscriptionOfShareBaseURLUpdated);
-
     const subscriptionOfAdBadgeConfigurationUpdated = FireworkSDKModuleEventEmitter.addListener(FWEventName.AdBadgeConfigurationUpdated, () => {
       FWLoggerUtil.log('Receive FWEventName.AdBadgeConfigurationUpdated');
       this.setState({});
     });
-
     this._subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
-
     const subscriptionOfVideoLaunchBehaviorUpdated = FireworkSDKModuleEventEmitter.addListener(FWEventName.VideoLaunchBehaviorUpdated, () => {
       FWLoggerUtil.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
       this.setState({});
     });
-
     this._subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
-
     const subscriptionOfAppLanguageUpdated = FireworkSDKModuleEventEmitter.addListener(FWEventName.AppLanguageUpdated, () => {
       FWLoggerUtil.log('Receive FWEventName.AppLanguageUpdated');
       this.setState({});
     });
-
     this._subscriptions.push(subscriptionOfAppLanguageUpdated);
-
     const subscriptionOfDataTrackingLevelUpdated = FireworkSDKModuleEventEmitter.addListener(FWEventName.DataTrackingLevelUpdated, () => {
       FWLoggerUtil.log('Receive FWEventName.DataTrackingLevelUpdated');
       this.setState({});
     });
-
     this._subscriptions.push(subscriptionOfDataTrackingLevelUpdated);
-
     const subscriptionOfLivestreamPlayerDesignVersionUpdated = FireworkSDKModuleEventEmitter.addListener(FWEventName.LivestreamPlayerDesignVersionUpdated, () => {
       FWLoggerUtil.log('Receive FWEventName.LivestreamPlayerDesignVersionUpdated');
       this.setState({});
     });
-
     this._subscriptions.push(subscriptionOfLivestreamPlayerDesignVersionUpdated);
   }
+
   /**
    * @ignore
    */
-
-
   componentWillUnmount() {
     FWLoggerUtil.log(`VideoFeed componentWillUnmount ${JSON.stringify(this.props)}`);
-
     this._subscriptions.forEach(value => {
       value.remove();
     });
-
     this._subscriptions = [];
   }
+
   /**
    * @ignore
    */
-
-
   render() {
-    var _adBadgeConfiguration, _adBadgeConfiguration2, _adBadgeConfiguration3, _videoFeedConfigurati, _videoFeedConfigurati2, _videoFeedConfigurati3, _videoFeedConfigurati4, _videoFeedConfigurati5, _videoFeedConfigurati6, _videoFeedConfigurati7, _videoFeedConfigurati8, _videoFeedConfigurati9, _videoFeedConfigurati10, _videoFeedConfigurati11, _videoFeedConfigurati12, _videoFeedConfigurati13, _videoFeedConfigurati14, _videoPlayerConfigura, _videoPlayerConfigura2, _videoPlayerConfigura3, _videoPlayerConfigura4, _videoPlayerConfigura5, _videoPlayerConfigura6;
-
     if (!this.state.sdkInitCalled) {
       return null;
     }
-
     const gShareBaseURL = FireworkSDK.getInstance().shareBaseURL;
     const appLanguage = FireworkSDK.getInstance().appLanguage;
     const videoLaunchBehavior = FireworkSDK.getInstance().videoLaunchBehavior;
     const adBadgeConfiguration = FireworkSDK.getInstance().adBadgeConfiguration;
-    const adBadgeTextType = adBadgeConfiguration === null || adBadgeConfiguration === void 0 ? void 0 : adBadgeConfiguration.badgeTextType;
-    const backgroundColorOfAdBadge = adBadgeConfiguration === null || adBadgeConfiguration === void 0 ? void 0 : adBadgeConfiguration.backgroundColor;
-    const textColorOfAdBadge = adBadgeConfiguration === null || adBadgeConfiguration === void 0 ? void 0 : adBadgeConfiguration.textColor;
-    const androidFontIsCustomOfAdBadge = adBadgeConfiguration === null || adBadgeConfiguration === void 0 ? void 0 : (_adBadgeConfiguration = adBadgeConfiguration.androidFontInfo) === null || _adBadgeConfiguration === void 0 ? void 0 : (_adBadgeConfiguration2 = _adBadgeConfiguration.isCustom) === null || _adBadgeConfiguration2 === void 0 ? void 0 : _adBadgeConfiguration2.toString();
-    const androidFontTypefaceNameOfAdBadge = adBadgeConfiguration === null || adBadgeConfiguration === void 0 ? void 0 : (_adBadgeConfiguration3 = adBadgeConfiguration.androidFontInfo) === null || _adBadgeConfiguration3 === void 0 ? void 0 : _adBadgeConfiguration3.typefaceName;
+    const adBadgeTextType = adBadgeConfiguration?.badgeTextType;
+    const backgroundColorOfAdBadge = adBadgeConfiguration?.backgroundColor;
+    const textColorOfAdBadge = adBadgeConfiguration?.textColor;
+    const androidFontIsCustomOfAdBadge = adBadgeConfiguration?.androidFontInfo?.isCustom?.toString();
+    const androidFontTypefaceNameOfAdBadge = adBadgeConfiguration?.androidFontInfo?.typefaceName;
     const dataTrackingLevel = FireworkSDK.getInstance().dataTrackingLevel;
     const livestreamPlayerDesignVersion = FireworkSDK.getInstance().livestreamPlayerDesignVersion;
     const {
@@ -295,68 +256,57 @@ class VideoFeed extends React.Component {
       enablePictureInPicture,
       adConfiguration
     } = this.props;
-
     const dynamicContentParametersString = this._generateDynamicContentParametersString();
-
     const videoFeedConfiguration = this._getVideoFeedConfiguration();
-
-    const cornerRadius = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati = videoFeedConfiguration.cornerRadius) === null || _videoFeedConfigurati === void 0 ? void 0 : _videoFeedConfigurati.toFixed(5);
-    const titleHidden = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati2 = videoFeedConfiguration.title) === null || _videoFeedConfigurati2 === void 0 ? void 0 : (_videoFeedConfigurati3 = _videoFeedConfigurati2.hidden) === null || _videoFeedConfigurati3 === void 0 ? void 0 : _videoFeedConfigurati3.toString();
-    const titleTextColor = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati4 = videoFeedConfiguration.title) === null || _videoFeedConfigurati4 === void 0 ? void 0 : _videoFeedConfigurati4.textColor;
-    const titleFontSize = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati5 = videoFeedConfiguration.title) === null || _videoFeedConfigurati5 === void 0 ? void 0 : (_videoFeedConfigurati6 = _videoFeedConfigurati5.fontSize) === null || _videoFeedConfigurati6 === void 0 ? void 0 : _videoFeedConfigurati6.toFixed(5);
-    const titleNumberOfLines = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati7 = videoFeedConfiguration.title) === null || _videoFeedConfigurati7 === void 0 ? void 0 : _videoFeedConfigurati7.numberOfLines;
-    const titleAndroidFontInfo = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati8 = videoFeedConfiguration.title) === null || _videoFeedConfigurati8 === void 0 ? void 0 : _videoFeedConfigurati8.androidFontInfo;
-    const titleGradientDrawable = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati9 = videoFeedConfiguration.title) === null || _videoFeedConfigurati9 === void 0 ? void 0 : _videoFeedConfigurati9.gradientDrawable;
-    const titlePosition = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : videoFeedConfiguration.titlePosition;
-    const playIconHidden = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati10 = videoFeedConfiguration.playIcon) === null || _videoFeedConfigurati10 === void 0 ? void 0 : _videoFeedConfigurati10.hidden;
-    const playIconWidth = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati11 = videoFeedConfiguration.playIcon) === null || _videoFeedConfigurati11 === void 0 ? void 0 : (_videoFeedConfigurati12 = _videoFeedConfigurati11.iconWidth) === null || _videoFeedConfigurati12 === void 0 ? void 0 : _videoFeedConfigurati12.toFixed(5);
-    const showAdBadge = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati13 = videoFeedConfiguration.showAdBadge) === null || _videoFeedConfigurati13 === void 0 ? void 0 : _videoFeedConfigurati13.toString();
-    const enableAutoplay = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : videoFeedConfiguration.enableAutoplay;
-    const gridColumns = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : videoFeedConfiguration.gridColumns;
-    const itemSpacing = videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : (_videoFeedConfigurati14 = videoFeedConfiguration.itemSpacing) === null || _videoFeedConfigurati14 === void 0 ? void 0 : _videoFeedConfigurati14.toFixed(5);
-
+    const cornerRadius = videoFeedConfiguration?.cornerRadius?.toFixed(5);
+    const titleHidden = videoFeedConfiguration?.title?.hidden?.toString();
+    const titleTextColor = videoFeedConfiguration?.title?.textColor;
+    const titleFontSize = videoFeedConfiguration?.title?.fontSize?.toFixed(5);
+    const titleNumberOfLines = videoFeedConfiguration?.title?.numberOfLines;
+    const titleAndroidFontInfo = videoFeedConfiguration?.title?.androidFontInfo;
+    const titleGradientDrawable = videoFeedConfiguration?.title?.gradientDrawable;
+    const titlePosition = videoFeedConfiguration?.titlePosition;
+    const playIconHidden = videoFeedConfiguration?.playIcon?.hidden;
+    const playIconWidth = videoFeedConfiguration?.playIcon?.iconWidth?.toFixed(5);
+    const showAdBadge = videoFeedConfiguration?.showAdBadge?.toString();
+    const enableAutoplay = videoFeedConfiguration?.enableAutoplay;
+    const gridColumns = videoFeedConfiguration?.gridColumns;
+    const itemSpacing = videoFeedConfiguration?.itemSpacing?.toFixed(5);
     const videoPlayerConfiguration = this._getVideoPlayerConfiguration();
-
-    const playerStyle = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.playerStyle;
-    const videoCompleteAction = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.videoCompleteAction;
-    const showShareButton = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.showShareButton;
-    const showPlaybackButton = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.showPlaybackButton;
-    const showMuteButton = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.showMuteButton;
-    const showBranding = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.showBranding;
-    const ctaDelayType = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : (_videoPlayerConfigura = videoPlayerConfiguration.ctaDelay) === null || _videoPlayerConfigura === void 0 ? void 0 : _videoPlayerConfigura.type;
-    const ctaDelayValue = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : (_videoPlayerConfigura2 = videoPlayerConfiguration.ctaDelay) === null || _videoPlayerConfigura2 === void 0 ? void 0 : (_videoPlayerConfigura3 = _videoPlayerConfigura2.value) === null || _videoPlayerConfigura3 === void 0 ? void 0 : _videoPlayerConfigura3.toFixed(5);
-    const ctaHighlightDelayType = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : (_videoPlayerConfigura4 = videoPlayerConfiguration.ctaHighlightDelay) === null || _videoPlayerConfigura4 === void 0 ? void 0 : _videoPlayerConfigura4.type;
-    const ctaHighlightDelayValue = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : (_videoPlayerConfigura5 = videoPlayerConfiguration.ctaHighlightDelay) === null || _videoPlayerConfigura5 === void 0 ? void 0 : (_videoPlayerConfigura6 = _videoPlayerConfigura5.value) === null || _videoPlayerConfigura6 === void 0 ? void 0 : _videoPlayerConfigura6.toFixed(5);
-    const shareBaseURL = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.shareBaseURL;
-    const ctaWidth = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.ctaWidth;
-    const buttonConfiguration = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.buttonConfiguration;
-    const videoPlayerLogoConfigurationJsonKey = gennerateJsonKey(videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.videoPlayerLogoConfiguration);
-    const countdownTimerConfigurationJsonKey = gennerateJsonKey(videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.countdownTimerConfiguration);
-    const showVideoDetailTitle = videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.showVideoDetailTitle;
-    const requiresAds = adConfiguration === null || adConfiguration === void 0 ? void 0 : adConfiguration.requiresAds;
-    const adsFetchTimeout = adConfiguration === null || adConfiguration === void 0 ? void 0 : adConfiguration.adsFetchTimeout;
-
+    const playerStyle = videoPlayerConfiguration?.playerStyle;
+    const videoCompleteAction = videoPlayerConfiguration?.videoCompleteAction;
+    const showShareButton = videoPlayerConfiguration?.showShareButton;
+    const showPlaybackButton = videoPlayerConfiguration?.showPlaybackButton;
+    const showMuteButton = videoPlayerConfiguration?.showMuteButton;
+    const showBranding = videoPlayerConfiguration?.showBranding;
+    const ctaDelayType = videoPlayerConfiguration?.ctaDelay?.type;
+    const ctaDelayValue = videoPlayerConfiguration?.ctaDelay?.value?.toFixed(5);
+    const ctaHighlightDelayType = videoPlayerConfiguration?.ctaHighlightDelay?.type;
+    const ctaHighlightDelayValue = videoPlayerConfiguration?.ctaHighlightDelay?.value?.toFixed(5);
+    const shareBaseURL = videoPlayerConfiguration?.shareBaseURL;
+    const ctaWidth = videoPlayerConfiguration?.ctaWidth;
+    const buttonConfiguration = videoPlayerConfiguration?.buttonConfiguration;
+    const videoPlayerLogoConfigurationJsonKey = gennerateJsonKey(videoPlayerConfiguration?.videoPlayerLogoConfiguration);
+    const countdownTimerConfigurationJsonKey = gennerateJsonKey(videoPlayerConfiguration?.countdownTimerConfiguration);
+    const showVideoDetailTitle = videoPlayerConfiguration?.showVideoDetailTitle;
+    const requiresAds = adConfiguration?.requiresAds;
+    const adsFetchTimeout = adConfiguration?.adsFetchTimeout;
     const vastAttributesString = this._generateVastAttributesString();
-
-    const replayBadgeVideoFeedConfigurationJsonKey = gennerateJsonKey(videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : videoFeedConfiguration.replayBadge);
-    const replayBadgeVideoPlayerConfigurationJsonKey = gennerateJsonKey(videoPlayerConfiguration === null || videoPlayerConfiguration === void 0 ? void 0 : videoPlayerConfiguration.replayBadgeConfiguration);
-    const shadowVideoFeedConfigurationJsonKey = gennerateJsonKey(videoFeedConfiguration === null || videoFeedConfiguration === void 0 ? void 0 : videoFeedConfiguration.shadow);
+    const replayBadgeVideoFeedConfigurationJsonKey = gennerateJsonKey(videoFeedConfiguration?.replayBadge);
+    const replayBadgeVideoPlayerConfigurationJsonKey = gennerateJsonKey(videoPlayerConfiguration?.replayBadgeConfiguration);
+    const shadowVideoFeedConfigurationJsonKey = gennerateJsonKey(videoFeedConfiguration?.shadow);
     let key = `gShareBaseURL:${gShareBaseURL}`;
-
     if (Platform.OS === 'ios') {
       key += `_appLanguage:${appLanguage}`;
     }
-
     key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
     key += `_adBadgeTextType:${adBadgeTextType}`;
     key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
     key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
-
     if (Platform.OS === 'android') {
       key += `_androidFontIsCustomOfAdBadge${androidFontIsCustomOfAdBadge}`;
       key += `_androidFontTypefaceNameOfAdBadge${androidFontTypefaceNameOfAdBadge}`;
     }
-
     key += `_dataTrackingLevel:${dataTrackingLevel}`;
     key += `_livestreamPlayerDesignVersion:${livestreamPlayerDesignVersion}`;
     key += `_source:${source}`;
@@ -365,38 +315,31 @@ class VideoFeed extends React.Component {
     key += `_playlistGroup:${playlistGroup}`;
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_hashtagFilterExpression:${hashtagFilterExpression}`;
-    key += `_productIds:${productIds === null || productIds === void 0 ? void 0 : productIds.join(',')}`;
+    key += `_productIds:${productIds?.join(',')}`;
     key += `_contentId:${contentId}`;
     key += `_mode:${mode}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
     key += `_titleHidden:${titleHidden}`;
-
     if (Platform.OS === 'android') {
-      var _titleGradientDrawabl;
-
       key += `_cornerRadius:${cornerRadius}`;
       key += `_titleTextColor:${titleTextColor}`;
       key += `_titleFontSize:${titleFontSize}`;
       key += `_titleNumberOfLines:${titleNumberOfLines}`;
-      key += `_titleAndroidFontInfo.isCustom:${titleAndroidFontInfo === null || titleAndroidFontInfo === void 0 ? void 0 : titleAndroidFontInfo.isCustom}`;
-      key += `_titleAndroidFontInfo.typefaceName:${titleAndroidFontInfo === null || titleAndroidFontInfo === void 0 ? void 0 : titleAndroidFontInfo.typefaceName}`;
-      key += `_titleGradientDrawable.orientation:${titleGradientDrawable === null || titleGradientDrawable === void 0 ? void 0 : titleGradientDrawable.orientation}`;
-      key += `_titleGradientDrawable.colors:${titleGradientDrawable === null || titleGradientDrawable === void 0 ? void 0 : (_titleGradientDrawabl = titleGradientDrawable.colors) === null || _titleGradientDrawabl === void 0 ? void 0 : _titleGradientDrawabl.join(',')}`;
+      key += `_titleAndroidFontInfo.isCustom:${titleAndroidFontInfo?.isCustom}`;
+      key += `_titleAndroidFontInfo.typefaceName:${titleAndroidFontInfo?.typefaceName}`;
+      key += `_titleGradientDrawable.orientation:${titleGradientDrawable?.orientation}`;
+      key += `_titleGradientDrawable.colors:${titleGradientDrawable?.colors?.join(',')}`;
       key += `_playIconHidden:${playIconHidden}`;
       key += `_playIconWidth:${playIconWidth}`;
       key += `_showAdBadge:${showAdBadge}`;
     }
-
     key += `_titlePosition:${titlePosition}`;
-
     if (Platform.OS === 'android') {
       key += `_enableAutoplay:${enableAutoplay}`;
     }
-
     key += `_gridColumns:${gridColumns}`;
     key += `_itemSpacing:${itemSpacing}`;
     key += `_shareBaseURL:${shareBaseURL}`;
-
     if (Platform.OS === 'android') {
       key += `_playerStyle:${playerStyle}`;
       key += `_videoCompleteAction:${videoCompleteAction}`;
@@ -409,17 +352,16 @@ class VideoFeed extends React.Component {
       key += `_ctaHighlightDelayType:${ctaHighlightDelayType}`;
       key += `_ctaHighlightDelayValue:${ctaHighlightDelayValue}`;
       key += `_ctaWidth:${ctaWidth}`;
-      key += `_buttonConfiguration.videoDetailButton:${this._generateButtonInfoString(buttonConfiguration === null || buttonConfiguration === void 0 ? void 0 : buttonConfiguration.videoDetailButton)}`;
-      key += `_buttonConfiguration.closeButton:${this._generateButtonInfoString(buttonConfiguration === null || buttonConfiguration === void 0 ? void 0 : buttonConfiguration.closeButton)}`;
-      key += `_buttonConfiguration.muteButton:${this._generateButtonInfoString(buttonConfiguration === null || buttonConfiguration === void 0 ? void 0 : buttonConfiguration.muteButton)}`;
-      key += `_buttonConfiguration.unmuteButton:${this._generateButtonInfoString(buttonConfiguration === null || buttonConfiguration === void 0 ? void 0 : buttonConfiguration.unmuteButton)}`;
-      key += `_buttonConfiguration.playButton:${this._generateButtonInfoString(buttonConfiguration === null || buttonConfiguration === void 0 ? void 0 : buttonConfiguration.playButton)}`;
-      key += `_buttonConfiguration.pauseButton:${this._generateButtonInfoString(buttonConfiguration === null || buttonConfiguration === void 0 ? void 0 : buttonConfiguration.pauseButton)}`;
+      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 += `_videoPlayerLogoConfiguration:${videoPlayerLogoConfigurationJsonKey}`;
       key += `_countdownTimerConfiguration:${countdownTimerConfigurationJsonKey}`;
       key += `_showVideoDetailTitle:${showVideoDetailTitle}`;
     }
-
     key += `_requiresAds:${requiresAds}`;
     key += `_adsFetchTimeout:${adsFetchTimeout}`;
     key += `_vastAttributes:${vastAttributesString}`;
@@ -427,9 +369,8 @@ class VideoFeed extends React.Component {
     key += `_replayBadgeVideoPlayerConfiguration:${replayBadgeVideoPlayerConfigurationJsonKey}`;
     key += `_shadowVideoFeedConfiguration:${shadowVideoFeedConfigurationJsonKey}`;
     console.log('video feed key', key);
-    return /*#__PURE__*/React.createElement(FWVideoFeed, _extends({
-      key: key
-    }, this.props, {
+    return /*#__PURE__*/_jsx(FWVideoFeed, {
+      ...this.props,
       enablePictureInPicture: undefined,
       videoFeedConfiguration: videoFeedConfiguration,
       videoPlayerConfiguration: videoPlayerConfiguration,
@@ -439,118 +380,92 @@ class VideoFeed extends React.Component {
       onVideoFeedDidStartPictureInPicture: this._onVideoFeedDidStartPictureInPicture,
       onVideoFeedDidStopPictureInPicture: this._onVideoFeedDidStopPictureInPicture,
       onVideoFeedGetFeedId: this._onVideoFeedGetFeedId,
-      mode: mode !== null && mode !== void 0 ? mode : 'row'
-    }));
+      mode: mode ?? 'row'
+    }, key);
   }
-
   _generateDynamicContentParametersString() {
     const {
       dynamicContentParameters
     } = this.props;
-
     if (!dynamicContentParameters) {
       return '';
     }
-
     let resultString = '';
     const sortedKeyList = Object.keys(dynamicContentParameters).sort();
-
     for (const key of sortedKeyList) {
-      const value = dynamicContentParameters[key];
+      const value = dynamicContentParameters[key] ?? [];
       const valueString = value.join(',');
-
       if (resultString.length > 0) {
         resultString += '_';
       }
-
       resultString += `${key}:${valueString}`;
     }
-
     return resultString;
   }
-
   _generateVastAttributesString() {
     const {
       adConfiguration
     } = this.props;
-    const vastAttributes = adConfiguration === null || adConfiguration === void 0 ? void 0 : adConfiguration.vastAttributes;
-
+    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;
   }
-
   _generateButtonInfoString(buttonInfo) {
-    return `imageName:${buttonInfo === null || buttonInfo === void 0 ? void 0 : buttonInfo.imageName}_systemImageName:${buttonInfo === null || buttonInfo === void 0 ? void 0 : buttonInfo.systemImageName}_tintColor:${buttonInfo === null || buttonInfo === void 0 ? void 0 : buttonInfo.tintColor}`;
+    return `imageName:${buttonInfo?.imageName}_systemImageName:${buttonInfo?.systemImageName}_tintColor:${buttonInfo?.tintColor}`;
   }
-
   _getVideoFeedConfiguration() {
     const {
       videoFeedConfiguration
     } = this.props;
-
     if (!videoFeedConfiguration) {
       return videoFeedConfiguration;
     }
-
     let resultVideoFeedConfiguration = videoFeedConfiguration;
-
     if (resultVideoFeedConfiguration.gridColumns && Math.floor(resultVideoFeedConfiguration.gridColumns) !== resultVideoFeedConfiguration.gridColumns) {
       const gridColumns = Math.floor(resultVideoFeedConfiguration.gridColumns);
-      resultVideoFeedConfiguration = { ...resultVideoFeedConfiguration,
+      resultVideoFeedConfiguration = {
+        ...resultVideoFeedConfiguration,
         gridColumns
       };
     }
-
     if (resultVideoFeedConfiguration.title && resultVideoFeedConfiguration.title.numberOfLines && Math.floor(resultVideoFeedConfiguration.title.numberOfLines) !== resultVideoFeedConfiguration.title.numberOfLines) {
       const numberOfLines = Math.floor(resultVideoFeedConfiguration.title.numberOfLines);
-      resultVideoFeedConfiguration = { ...resultVideoFeedConfiguration,
-        title: { ...resultVideoFeedConfiguration.title,
+      resultVideoFeedConfiguration = {
+        ...resultVideoFeedConfiguration,
+        title: {
+          ...resultVideoFeedConfiguration.title,
           numberOfLines
         }
       };
     }
-
     return resultVideoFeedConfiguration;
   }
-
   _getVideoPlayerConfiguration() {
     const {
       videoPlayerConfiguration,
       enablePictureInPicture
     } = this.props;
     let resultVideoPlayerConfiguration = videoPlayerConfiguration;
-
     if (typeof enablePictureInPicture === 'boolean') {
       if (!resultVideoPlayerConfiguration) {
         resultVideoPlayerConfiguration = {};
       }
-
-      resultVideoPlayerConfiguration = { ...resultVideoPlayerConfiguration,
+      resultVideoPlayerConfiguration = {
+        ...resultVideoPlayerConfiguration,
         enablePictureInPicture
       };
     }
-
     return resultVideoPlayerConfiguration;
   }
-
 }
-
-_defineProperty(VideoFeed, "defaultProps", {
-  mode: 'row'
-});
-
 export default VideoFeed;
 //# sourceMappingURL=VideoFeed.js.map