@wavemaker/app-rn-runtime 11.10.1-rc.200 → 11.10.2-next.27741

package/components/basic/picture/picture.component.js

@@ -22,6 +22,8 @@ export class WmPictureState extends BaseComponentState {
     _defineProperty(this, "naturalImageHeight", 0);
     _defineProperty(this, "imageWidth", 0);
     _defineProperty(this, "imageHeight", 0);
+    _defineProperty(this, "originalContainerWidth", 0);
+    _defineProperty(this, "originalContainerHeight", 0);
   }
 }
 export default class WmPicture extends BaseComponent {
@@ -29,23 +31,32 @@ export default class WmPicture extends BaseComponent {
     super(_props, DEFAULT_CLASS, new WmPictureProps());
     _defineProperty(this, "_pictureSource", null);
     _defineProperty(this, "_picturePlaceHolder", null);
+    // The below property will be used to track and remove the calculateImageSize listenrs of individual picturesource
+    _defineProperty(this, "_cleanupTracker", {});
     _defineProperty(this, "onViewLayoutChange", e => {
+      var _this$styles, _this$styles2, _this$styles3;
       let imageWidth = e.nativeEvent.layout.width;
       let imageHeight = e.nativeEvent.layout.height;
       if (!imageWidth && !imageHeight) {
         return;
       }
-      if (!this.styles.root.height || typeof this.styles.root.height === 'string' && !this.styles.root.height.includes('%')) {
+      if (!((_this$styles = this.styles) !== null && _this$styles !== void 0 && _this$styles.root.height) || typeof ((_this$styles2 = this.styles) === null || _this$styles2 === void 0 ? void 0 : _this$styles2.root.height) === 'string' && !((_this$styles3 = this.styles) !== null && _this$styles3 !== void 0 && _this$styles3.root.height.includes('%'))) {
         imageHeight = 0;
       }
-      if (imageWidth && !imageHeight) {
+      if (this.state.props.aspectRatio && !imageHeight && imageWidth) {
+        imageHeight = imageWidth / parseFloat(this.state.props.aspectRatio);
+      } else if (this.state.props.aspectRatio && !imageWidth && imageHeight) {
+        imageWidth = imageWidth * parseFloat(this.state.props.aspectRatio);
+      } else if (imageWidth && !imageHeight) {
         imageHeight = imageWidth * this.state.naturalImageHeight / this.state.naturalImageWidth;
       } else if (imageHeight && !imageWidth) {
         imageWidth = imageHeight * this.state.naturalImageWidth / this.state.naturalImageHeight;
       }
       this.updateState({
         imageWidth: imageWidth,
-        imageHeight: imageHeight
+        imageHeight: imageHeight,
+        originalContainerWidth: e.nativeEvent.layout.width,
+        originalContainerHeight: e.nativeEvent.layout.height
       });
     });
     _defineProperty(this, "showImage", (imageElement, props) => {
@@ -63,6 +74,9 @@ export default class WmPicture extends BaseComponent {
     if (imageSrc && typeof imageSrc === 'object' && typeof imageSrc.default === 'function') {
       return null;
     }
+    if (this.state.props.aspectRatio) {
+      return imageSrc;
+    }
     if (isNumber(imageSrc)) {
       const {
         width,
@@ -80,10 +94,30 @@ export default class WmPicture extends BaseComponent {
         });
         this.cleanup.splice(this.cleanup.indexOf(cancel), 1);
       });
+      if (this.props.picturesource && this._cleanupTracker[this.props.picturesource]) {
+        this._cleanupTracker[this.props.picturesource].push(cancel);
+      } else if (this.props.picturesource && !this._cleanupTracker[this.props.picturesource]) {
+        this._cleanupTracker[this.props.picturesource] = [];
+        this._cleanupTracker[this.props.picturesource].push(cancel);
+      }
       this.cleanup.push(cancel);
     }
     return imageSrc;
   }
+
+  // Check if the image source prop is changed from previous update to remove all listeners
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.state.props.picturesource !== prevProps.picturesource) {
+      if (prevProps.picturesource && this._cleanupTracker[prevProps.picturesource]) {
+        this._cleanupTracker[prevProps.picturesource].forEach(func => {
+          func();
+        });
+        this._cleanupTracker[prevProps.picturesource] = [];
+        delete this._cleanupTracker[prevProps.picturesource];
+      }
+    }
+    super.componentDidUpdate(prevProps, prevState);
+  }
   onPropertyChange(name, $new, $old) {
     switch (name) {
       case 'picturesource':
@@ -129,7 +163,7 @@ export default class WmPicture extends BaseComponent {
     } else {
       source = imgSrc;
     }
-    if (this.state.naturalImageWidth) {
+    if (this.state.naturalImageWidth || this.state.props.aspectRatio) {
       elementToshow = /*#__PURE__*/React.createElement(Image, _extends({}, this.getTestProps('picture'), {
         style: [this.styles.picture, shapeStyles.picture],
         resizeMode: props.resizemode,
@@ -152,10 +186,52 @@ export default class WmPicture extends BaseComponent {
       height: skeletonHeight
     });
   }
+  //TODO: remove the re calculation logic later. Keeping it as an extra safety.  
+  calculateBasedOnAspectRatio() {
+    if (this.state.props.aspectRatio) {
+      if (this.state.originalContainerWidth) {
+        return {
+          imageHeight: this.state.originalContainerWidth / parseFloat(this.state.props.aspectRatio),
+          imageWidth: this.state.originalContainerWidth
+        };
+      } else if (this.state.originalContainerHeight) {
+        return {
+          imageHeight: this.state.originalContainerHeight,
+          imageWidth: this.state.originalContainerHeight * parseFloat(this.state.props.aspectRatio)
+        };
+      }
+    }
+    return null;
+  }
+
+  //TODO: remove the re calculation logic later. Keeping it as an extra safety.  
+  calculateBasedOnNaturalDimensions() {
+    const isNaturalSizesExists = this.state.naturalImageHeight && this.state.naturalImageWidth;
+    const isContainerSizesExists = this.state.originalContainerWidth && this.state.originalContainerHeight;
+    if (!isNaturalSizesExists || !isContainerSizesExists) {
+      return null;
+    }
+    return {
+      imageHeight: this.state.originalContainerWidth * this.state.naturalImageHeight / this.state.naturalImageWidth,
+      imageWidth: this.state.originalContainerHeight * this.state.naturalImageWidth / this.state.naturalImageHeight
+    };
+  }
   renderWidget(props) {
     var _shapeStyles$picture4;
-    const imageWidth = this.state.imageWidth;
-    const imageHeight = this.state.imageHeight;
+    let imageWidth = this.state.imageWidth;
+    let imageHeight = this.state.imageHeight;
+
+    //TODO: remove the re calculation logic later. Keeping it as an extra safety.  
+    const aspectDimensions = this.calculateBasedOnAspectRatio();
+    const naturalDimensions = this.calculateBasedOnNaturalDimensions();
+    if (aspectDimensions) {
+      const dimensions = aspectDimensions;
+      imageWidth = dimensions.imageWidth;
+      imageHeight = dimensions.imageHeight;
+    } else if (naturalDimensions) {
+      const dimensions = naturalDimensions;
+      imageHeight = dimensions.imageHeight;
+    }
     const shapeStyles = this.createShape(props.shape, imageWidth);
     this._pictureSource = this._pictureSource || this.loadImage(props.picturesource);
     this._picturePlaceHolder = props.fastload ? this._pictureSource || this._picturePlaceHolder || this.loadImage(props.pictureplaceholder) : this._picturePlaceHolder || this.loadImage(props.pictureplaceholder);
@@ -164,7 +240,7 @@ export default class WmPicture extends BaseComponent {
     if (imgSrc) {
       elementToshow = this.getElementToShow(props, imgSrc, shapeStyles);
     }
-    return imgSrc && (this.state.naturalImageWidth || props.isSvg) ? /*#__PURE__*/React.createElement(View, {
+    return imgSrc && (this.state.naturalImageWidth || props.isSvg || props.aspectRatio) ? /*#__PURE__*/React.createElement(View, {
       style: [{
         width: imageWidth,
         height: imageHeight

package/components/basic/picture/picture.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Image","View","isNumber","Tappable","BaseComponent","BaseComponentState","ImageSizeEstimator","isFullPathUrl","AccessibilityWidgetType","getAccessibilityProps","WmPictureProps","DEFAULT_CLASS","Animatedview","createSkeleton","WmPictureState","constructor","args","_defineProperty","WmPicture","props","e","imageWidth","nativeEvent","layout","width","imageHeight","height","styles","root","includes","state","naturalImageHeight","naturalImageWidth","updateState","imageElement","fastload","loadImage","image","loadAsset","imageSrc","default","resolveAssetSource","cancel","getSize","cleanup","splice","indexOf","push","onPropertyChange","name","$new","$old","_pictureSource","_picturePlaceHolder","createShape","shape","picture","borderRadius","theme","getStyle","getElementToShow","imgSrc","shapeStyles","elementToshow","source","imgStyle","resizemode","createElement","uri","_extends","getTestProps","style","resizeMode","PICTURE","renderSkeleton","_this$styles$root","_shapeStyles$root","_shapeStyles$picture","_this$styles$root2","_shapeStyles$root2","_shapeStyles$picture2","_this$styles$root3","_shapeStyles$picture3","_shapeStyles$root3","_this$styles$root4","skeletonWidth","skeletonwidth","skeletonHeight","skeletonheight","skeleton","renderWidget","_shapeStyles$picture4","picturesource","pictureplaceholder","isSvg","_background","overflow","onLayout","onViewLayoutChange","disableTouchEffect","disabletoucheffect","getTestPropsForAction","rippleColor","target","entryanimation","animation","delay","animationdelay","showImage"],"sources":["picture.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Image, LayoutChangeEvent, View } from 'react-native';\n// import { NumberProp, SvgUri } from 'react-native-svg';\nimport { isNumber, isString } from 'lodash-es';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport ImageSizeEstimator from '@wavemaker/app-rn-runtime/core/imageSizeEstimator';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\n\nimport WmPictureProps from './picture.props';\nimport { DEFAULT_CLASS, WmPictureStyles } from './picture.styles';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport WmSkeleton, { createSkeleton } from '../skeleton/skeleton.component';\n\nexport class WmPictureState extends BaseComponentState<WmPictureProps> {\n  naturalImageWidth: number = 0;\n  naturalImageHeight: number = 0;\n  imageWidth: number = 0;\n  imageHeight: number = 0;\n}\n\nexport default class WmPicture extends BaseComponent<WmPictureProps, WmPictureState, WmPictureStyles> {\n\n  private _pictureSource = null as any;\n  private _picturePlaceHolder = null as any;\n\n  constructor(props: WmPictureProps) {\n    super(props, DEFAULT_CLASS, new WmPictureProps());\n  }\n\n  loadImage(image: string | undefined) {\n    if (!image || !this.loadAsset) {\n      return null;\n    }\n    const imageSrc = this.loadAsset(image) as any;\n    if (imageSrc && typeof imageSrc === 'object' && typeof imageSrc.default === 'function') {\n      return null;\n    }\n    if (isNumber(imageSrc)) {\n      const {width, height} = Image.resolveAssetSource(imageSrc);\n      this.updateState({\n        naturalImageWidth: width,\n        naturalImageHeight: height\n      } as WmPictureState);\n    } else if (imageSrc !== null) {\n      const cancel = ImageSizeEstimator.getSize(imageSrc, (width: number, height: number) => {\n        this.updateState({\n          naturalImageWidth: width,\n          naturalImageHeight: height\n        } as WmPictureState);\n        this.cleanup.splice(this.cleanup.indexOf(cancel), 1);\n      });\n      this.cleanup.push(cancel);\n    }\n    return imageSrc;\n  }\n\n  onPropertyChange(name: string, $new: any, $old: any) {\n    switch(name) {\n      case 'picturesource':\n        this._pictureSource = null;\n      case 'pictureplaceholder':\n        this._picturePlaceHolder = null;\n        break;\n    }\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let imageWidth = e.nativeEvent.layout.width;\n    let imageHeight = e.nativeEvent.layout.height;\n    if (!imageWidth && !imageHeight) {\n      return;\n    }\n    if (!this.styles.root.height\n        || (typeof this.styles.root.height === 'string'\n          && !this.styles.root.height.includes('%'))) {\n        imageHeight = 0;\n    }\n    if (imageWidth && !imageHeight) {\n      imageHeight = imageWidth * this.state.naturalImageHeight / this.state.naturalImageWidth;\n    } else if (imageHeight && !imageWidth) {\n      imageWidth = imageHeight * this.state.naturalImageWidth / this.state.naturalImageHeight;\n    }\n    this.updateState({\n      imageWidth: imageWidth,\n      imageHeight: imageHeight\n    } as WmPictureState);\n  };\n\n  createShape(shape: string | undefined, imageWidth?: number | string): WmPictureStyles {\n    if (shape) {\n      switch(shape) {\n        case 'circle':\n          return {\n            picture: {\n              borderRadius: isNumber(imageWidth) ? imageWidth / 2 : 4\n            }\n          } as WmPictureStyles;\n        case 'rounded' :\n          return (this.theme.getStyle('rounded-image') as WmPictureStyles);\n        case 'thumbnail' :\n          return (this.theme.getStyle('thumbnail-image') as WmPictureStyles);\n      }\n    }\n    return {} as WmPictureStyles;\n  }\n\n  getElementToShow(props: WmPictureProps, imgSrc: any, shapeStyles: WmPictureStyles) {\n    let elementToshow, source;\n    if (imgSrc && typeof imgSrc === 'object' && typeof imgSrc?.default === 'function') {\n      let imgStyle : any = {};\n      if (props.resizemode === 'contain') {\n        imgStyle['width'] = '100%';\n        imgStyle['height'] = '100%';\n      }\n      elementToshow = React.createElement(imgSrc?.default, imgStyle);\n    //} else if (!isWebPreviewMode() && props.isSvg) {\n    //  svg from uri\n    //  elementToshow = <SvgUri testID={this.getTestId('picture')} width={this.styles.root.width as NumberProp} height={this.styles.root.height as NumberProp} uri={imgSrc}/>;\n    } else if (isFullPathUrl(imgSrc)) {\n      source = {\n        uri: imgSrc\n      };\n    } else {\n      source = imgSrc;\n    }\n    if (this.state.naturalImageWidth) {\n      elementToshow = (\n        <Image\n          {...this.getTestProps('picture')}\n          style={[this.styles.picture, shapeStyles.picture]}\n          resizeMode={props.resizemode}\n          source={source}\n          {...getAccessibilityProps(AccessibilityWidgetType.PICTURE, props)}\n        />\n      );\n    }\n    return elementToshow;\n  }\n\n  public renderSkeleton(props: WmPictureProps){\n    const imageWidth = this.state.imageWidth;\n    const imageHeight = this.state.imageHeight;\n    const shapeStyles = this.createShape(this.props.shape, imageWidth);\n    const skeletonWidth = this.props.skeletonwidth || this.styles.root?.width || shapeStyles.root?.width || shapeStyles.picture?.width || imageWidth;\n    const skeletonHeight = this.props.skeletonheight || this.styles.root?.height || shapeStyles.root?.height || shapeStyles.picture?.height || imageHeight;\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      borderRadius:  this.props.shape == 'circle' && this.styles.root?.width ? 25 : shapeStyles.picture?.borderRadius || shapeStyles.root?.borderRadius || this.styles.root?.borderRadius || 4,\n      width: skeletonWidth as DimensionValue,\n      height: skeletonHeight as DimensionValue\n    });\n  }\n\n  showImage = (imageElement: any, props: WmPictureProps) => {\n    if(props.fastload){\n      return imageElement;\n    }\n    return this.state.imageWidth ? imageElement : null\n  }\n\n  renderWidget(props: WmPictureProps) {\n    const imageWidth = this.state.imageWidth;\n    const imageHeight = this.state.imageHeight;\n    const shapeStyles = this.createShape(props.shape, imageWidth);\n    this._pictureSource =  this._pictureSource || this.loadImage(props.picturesource);\n    this._picturePlaceHolder = props.fastload ? \n      (this._pictureSource || this._picturePlaceHolder || this.loadImage(props.pictureplaceholder)) :\n      (this._picturePlaceHolder || this.loadImage(props.pictureplaceholder));\n    const imgSrc: any = this._pictureSource || this._picturePlaceHolder;\n    let elementToshow;\n    if (imgSrc) {\n      elementToshow = this.getElementToShow(props, imgSrc, shapeStyles);\n    }\n    return imgSrc && (this.state.naturalImageWidth || props.isSvg) ? (\n      <View style={[{\n        width: imageWidth,\n        height: imageHeight\n      }, this.styles.root, shapeStyles.root, shapeStyles.picture]}>\n        {this._background}\n      <View style={[{overflow: 'hidden', width: '100%',\n        height: '100%'}]} onLayout={this.onViewLayoutChange}>\n        <Tappable\n          disableTouchEffect={this.state.props.disabletoucheffect}\n          {...this.getTestPropsForAction()}\n          rippleColor={this.styles.root.rippleColor}\n          target={this} styles={{width: imageWidth ? null : '100%', height: imageHeight ? null : '100%'}}>\n          <Animatedview entryanimation={props.animation} delay={props.animationdelay} style={[{\n                height: imageHeight,\n                width: imageWidth,\n                borderRadius: shapeStyles.picture?.borderRadius\n              }]}>\n                {this.showImage(elementToshow, props)}\n            </Animatedview>\n          </Tappable>\n        </View>\n      </View>\n    ): null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Image","View","isNumber","Tappable","BaseComponent","BaseComponentState","ImageSizeEstimator","isFullPathUrl","AccessibilityWidgetType","getAccessibilityProps","WmPictureProps","DEFAULT_CLASS","Animatedview","createSkeleton","WmPictureState","constructor","args","_defineProperty","WmPicture","props","e","_this$styles","_this$styles2","_this$styles3","imageWidth","nativeEvent","layout","width","imageHeight","height","styles","root","includes","state","aspectRatio","parseFloat","naturalImageHeight","naturalImageWidth","updateState","originalContainerWidth","originalContainerHeight","imageElement","fastload","loadImage","image","loadAsset","imageSrc","default","resolveAssetSource","cancel","getSize","cleanup","splice","indexOf","picturesource","_cleanupTracker","push","componentDidUpdate","prevProps","prevState","snapshot","forEach","func","onPropertyChange","name","$new","$old","_pictureSource","_picturePlaceHolder","createShape","shape","picture","borderRadius","theme","getStyle","getElementToShow","imgSrc","shapeStyles","elementToshow","source","imgStyle","resizemode","createElement","uri","_extends","getTestProps","style","resizeMode","PICTURE","renderSkeleton","_this$styles$root","_shapeStyles$root","_shapeStyles$picture","_this$styles$root2","_shapeStyles$root2","_shapeStyles$picture2","_this$styles$root3","_shapeStyles$picture3","_shapeStyles$root3","_this$styles$root4","skeletonWidth","skeletonwidth","skeletonHeight","skeletonheight","skeleton","calculateBasedOnAspectRatio","calculateBasedOnNaturalDimensions","isNaturalSizesExists","isContainerSizesExists","renderWidget","_shapeStyles$picture4","aspectDimensions","naturalDimensions","dimensions","pictureplaceholder","isSvg","_background","overflow","onLayout","onViewLayoutChange","disableTouchEffect","disabletoucheffect","getTestPropsForAction","rippleColor","target","entryanimation","animation","delay","animationdelay","showImage"],"sources":["picture.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Image, LayoutChangeEvent, View } from 'react-native';\n// import { NumberProp, SvgUri } from 'react-native-svg';\nimport { isNumber, isString } from 'lodash-es';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport ImageSizeEstimator from '@wavemaker/app-rn-runtime/core/imageSizeEstimator';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\n\nimport WmPictureProps from './picture.props';\nimport { DEFAULT_CLASS, WmPictureStyles } from './picture.styles';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport WmSkeleton, { createSkeleton } from '../skeleton/skeleton.component';\n\nexport class WmPictureState extends BaseComponentState<WmPictureProps> {\n  naturalImageWidth: number = 0;\n  naturalImageHeight: number = 0;\n  imageWidth: number = 0;\n  imageHeight: number = 0;\n  originalContainerWidth: number = 0;\n  originalContainerHeight: number = 0;\n}\n\nexport default class WmPicture extends BaseComponent<WmPictureProps, WmPictureState, WmPictureStyles> {\n\n  private _pictureSource = null as any;\n  private _picturePlaceHolder = null as any;\n\n  // The below property will be used to track and remove the calculateImageSize listenrs of individual picturesource\n  private _cleanupTracker = {} as any\n\n  constructor(props: WmPictureProps) {\n    super(props, DEFAULT_CLASS, new WmPictureProps());\n  }\n\n  loadImage(image: string | undefined) {\n    if (!image || !this.loadAsset) {\n      return null;\n    }\n    const imageSrc = this.loadAsset(image) as any;\n    if (imageSrc && typeof imageSrc === 'object' && typeof imageSrc.default === 'function') {\n      return null;\n    }\n    if(this.state.props.aspectRatio) {\n      return imageSrc;\n    }\n    if (isNumber(imageSrc)) {\n      const {width, height} = Image.resolveAssetSource(imageSrc);\n      this.updateState({\n        naturalImageWidth: width,\n        naturalImageHeight: height\n      } as WmPictureState);\n    } else if (imageSrc !== null) {\n      const cancel = ImageSizeEstimator.getSize(imageSrc, (width: number, height: number) => {\n        this.updateState({\n          naturalImageWidth: width,\n          naturalImageHeight: height\n        } as WmPictureState);\n        this.cleanup.splice(this.cleanup.indexOf(cancel), 1);\n      });\n      if(this.props.picturesource && this._cleanupTracker[this.props.picturesource]) {\n        this._cleanupTracker[this.props.picturesource].push(cancel)\n      } else if(this.props.picturesource && !this._cleanupTracker[this.props.picturesource]) {\n        this._cleanupTracker[this.props.picturesource] = [];\n        this._cleanupTracker[this.props.picturesource].push(cancel)\n      }\n      this.cleanup.push(cancel);\n    }\n    return imageSrc;\n  }\n\n    // Check if the image source prop is changed from previous update to remove all listeners\n  componentDidUpdate(prevProps: Readonly<WmPictureProps>, prevState: Readonly<WmPictureState>, snapshot?: any): void {\n    if(this.state.props.picturesource !== prevProps.picturesource) {\n      if(prevProps.picturesource && this._cleanupTracker[prevProps.picturesource]) {\n        this._cleanupTracker[prevProps.picturesource].forEach((func: any) => {\n          func();\n        });  \n        this._cleanupTracker[prevProps.picturesource] = []\n        delete this._cleanupTracker[prevProps.picturesource] \n      }\n    }\n    super.componentDidUpdate(prevProps, prevState)\n  }\n\n\n  onPropertyChange(name: string, $new: any, $old: any) {\n    switch(name) {\n      case 'picturesource':\n        this._pictureSource = null;\n      case 'pictureplaceholder':\n        this._picturePlaceHolder = null;\n        break;\n    }\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let imageWidth = e.nativeEvent.layout.width;\n    let imageHeight = e.nativeEvent.layout.height;\n    if (!imageWidth && !imageHeight) {\n      return;\n    }\n    if (!this.styles?.root.height\n        || (typeof this.styles?.root.height === 'string'\n          && !this.styles?.root.height.includes('%'))) {\n        imageHeight = 0;\n    }\n    if(this.state.props.aspectRatio && !imageHeight && imageWidth) {\n      imageHeight = imageWidth / parseFloat(this.state.props.aspectRatio as string)\n    } else if (this.state.props.aspectRatio && !imageWidth && imageHeight) {\n      imageWidth = imageWidth * parseFloat(this.state.props.aspectRatio as string)\n    } else if (imageWidth && !imageHeight) {\n      imageHeight = imageWidth * this.state.naturalImageHeight / this.state.naturalImageWidth;\n    } else if (imageHeight && !imageWidth) {\n      imageWidth = imageHeight * this.state.naturalImageWidth / this.state.naturalImageHeight;\n    }\n    this.updateState({\n      imageWidth: imageWidth,\n      imageHeight: imageHeight,\n      originalContainerWidth: e.nativeEvent.layout.width,\n      originalContainerHeight: e.nativeEvent.layout.height\n    } as WmPictureState);\n  };\n\n  createShape(shape: string | undefined, imageWidth?: number | string): WmPictureStyles {\n    if (shape) {\n      switch(shape) {\n        case 'circle':\n          return {\n            picture: {\n              borderRadius: isNumber(imageWidth) ? imageWidth / 2 : 4\n            }\n          } as WmPictureStyles;\n        case 'rounded' :\n          return (this.theme.getStyle('rounded-image') as WmPictureStyles);\n        case 'thumbnail' :\n          return (this.theme.getStyle('thumbnail-image') as WmPictureStyles);\n      }\n    }\n    return {} as WmPictureStyles;\n  }\n\n  getElementToShow(props: WmPictureProps, imgSrc: any, shapeStyles: WmPictureStyles) {\n    let elementToshow, source;\n    if (imgSrc && typeof imgSrc === 'object' && typeof imgSrc?.default === 'function') {\n      let imgStyle : any = {};\n      if (props.resizemode === 'contain') {\n        imgStyle['width'] = '100%';\n        imgStyle['height'] = '100%';\n      }\n      elementToshow = React.createElement(imgSrc?.default, imgStyle);\n    //} else if (!isWebPreviewMode() && props.isSvg) {\n    //  svg from uri\n    //  elementToshow = <SvgUri testID={this.getTestId('picture')} width={this.styles.root.width as NumberProp} height={this.styles.root.height as NumberProp} uri={imgSrc}/>;\n    } else if (isFullPathUrl(imgSrc)) {\n      source = {\n        uri: imgSrc\n      };\n    } else {\n      source = imgSrc;\n    }\n    if (this.state.naturalImageWidth || this.state.props.aspectRatio) {\n      elementToshow = (\n        <Image\n          {...this.getTestProps('picture')}\n          style={[this.styles.picture, shapeStyles.picture]}\n          resizeMode={props.resizemode}\n          source={source}\n          {...getAccessibilityProps(AccessibilityWidgetType.PICTURE, props)}\n        />\n      );\n    }\n    return elementToshow;\n  }\n\n  public renderSkeleton(props: WmPictureProps){\n    const imageWidth = this.state.imageWidth;\n    const imageHeight = this.state.imageHeight;\n    const shapeStyles = this.createShape(this.props.shape, imageWidth);\n    const skeletonWidth = this.props.skeletonwidth || this.styles.root?.width || shapeStyles.root?.width || shapeStyles.picture?.width || imageWidth;\n    const skeletonHeight = this.props.skeletonheight || this.styles.root?.height || shapeStyles.root?.height || shapeStyles.picture?.height || imageHeight;\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      borderRadius:  this.props.shape == 'circle' && this.styles.root?.width ? 25 : shapeStyles.picture?.borderRadius || shapeStyles.root?.borderRadius || this.styles.root?.borderRadius || 4,\n      width: skeletonWidth as DimensionValue,\n      height: skeletonHeight as DimensionValue\n    });\n  }\n\n  showImage = (imageElement: any, props: WmPictureProps) => {\n    if(props.fastload){\n      return imageElement;\n    }\n    return this.state.imageWidth ? imageElement : null\n  }\n\n\n    //TODO: remove the re calculation logic later. Keeping it as an extra safety.  \n    calculateBasedOnAspectRatio(): {imageWidth: number, imageHeight: number} | null  {\n      if(this.state.props.aspectRatio) {\n        if(this.state.originalContainerWidth) {\n          return {\n            imageHeight: this.state.originalContainerWidth / parseFloat(this.state.props.aspectRatio as string),\n            imageWidth: this.state.originalContainerWidth\n          }\n        } else if(this.state.originalContainerHeight) {\n          return {\n            imageHeight: this.state.originalContainerHeight, \n            imageWidth: this.state.originalContainerHeight * parseFloat(this.state.props.aspectRatio as string),\n          }\n        }\n      }\n      return null\n    }\n    \n    //TODO: remove the re calculation logic later. Keeping it as an extra safety.  \n    calculateBasedOnNaturalDimensions(): {imageWidth: number, imageHeight: number} | null {  \n      const isNaturalSizesExists = this.state.naturalImageHeight && this.state.naturalImageWidth\n      const isContainerSizesExists = this.state.originalContainerWidth && this.state.originalContainerHeight\n  \n      if(!isNaturalSizesExists || !isContainerSizesExists) {\n        return null;\n      }\n      return {\n        imageHeight: this.state.originalContainerWidth * this.state.naturalImageHeight / this.state.naturalImageWidth,\n        imageWidth: this.state.originalContainerHeight * this.state.naturalImageWidth / this.state.naturalImageHeight\n      }\n    }\n  \n\n  renderWidget(props: WmPictureProps) {\n    let imageWidth = this.state.imageWidth;\n    let imageHeight = this.state.imageHeight;\n\n\n    //TODO: remove the re calculation logic later. Keeping it as an extra safety.  \n    const aspectDimensions = this.calculateBasedOnAspectRatio();\n    const naturalDimensions = this.calculateBasedOnNaturalDimensions();\n    if(aspectDimensions) {\n      const dimensions = aspectDimensions as {imageWidth: number, imageHeight: number}\n      imageWidth = dimensions.imageWidth;\n      imageHeight = dimensions.imageHeight\n    } else if(naturalDimensions) {\n      const dimensions = naturalDimensions as {imageWidth: number, imageHeight: number}\n      imageHeight = dimensions.imageHeight\n    }\n    \n    const shapeStyles = this.createShape(props.shape, imageWidth);\n    this._pictureSource =  this._pictureSource || this.loadImage(props.picturesource);\n    this._picturePlaceHolder = props.fastload ? \n      (this._pictureSource || this._picturePlaceHolder || this.loadImage(props.pictureplaceholder)) :\n      (this._picturePlaceHolder || this.loadImage(props.pictureplaceholder));\n    const imgSrc: any = this._pictureSource || this._picturePlaceHolder;\n    let elementToshow;\n    if (imgSrc) {\n      elementToshow = this.getElementToShow(props, imgSrc, shapeStyles);\n    }\n    return imgSrc && (this.state.naturalImageWidth || props.isSvg || props.aspectRatio) ? (\n      <View style={[{\n        width: imageWidth,\n        height: imageHeight\n      }, this.styles.root, shapeStyles.root, shapeStyles.picture]}>\n        {this._background}\n      <View style={[{overflow: 'hidden', width: '100%',\n        height: '100%'}]} onLayout={this.onViewLayoutChange}>\n        <Tappable\n          disableTouchEffect={this.state.props.disabletoucheffect}\n          {...this.getTestPropsForAction()}\n          rippleColor={this.styles.root.rippleColor}\n          target={this} styles={{width: imageWidth ? null : '100%', height: imageHeight ? null : '100%'}}>\n          <Animatedview entryanimation={props.animation} delay={props.animationdelay} style={[{\n                height: imageHeight,\n                width: imageWidth,\n                borderRadius: shapeStyles.picture?.borderRadius\n              }]}>\n                {this.showImage(elementToshow, props)}\n            </Animatedview>\n          </Tappable>\n        </View>\n      </View>\n    ): null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/basic/picture/picture.props.js

@@ -18,6 +18,7 @@ export default class WmPictureProps extends BaseProps {
     _defineProperty(this, "hint", undefined);
     _defineProperty(this, "accessibilityrole", 'image');
     _defineProperty(this, "fastload", false);
+    _defineProperty(this, "aspectRatio", null);
   }
 }
 //# sourceMappingURL=picture.props.js.map

package/components/basic/picture/picture.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmPictureProps","constructor","args","_defineProperty","undefined"],"sources":["picture.props.ts"],"sourcesContent":["import { AccessibilityRole, ImageResizeMode } from 'react-native';\nimport { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmPictureProps extends BaseProps {\n  animation?: string = null as any;\n  animationdelay?: number = null as any;\n  picturesource?: string = null as any;\n  pictureplaceholder?: string = null as any;\n  shape?: string = null as any;\n  isSvg?: string = null as any;\n  resizemode?: ImageResizeMode = 'stretch' as any;\n  skeletonheight?: string = null as any;\n  skeletonwidth?: string = null as any;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole = 'image';\n  fastload?: boolean = false;\n}\n"],"mappings":";;;AACA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,oBAC/B,IAAI;IAAAA,eAAA,yBACC,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,6BACC,IAAI;IAAAA,eAAA,gBACjB,IAAI;IAAAA,eAAA,gBACJ,IAAI;IAAAA,eAAA,qBACU,SAAS;IAAAA,eAAA,yBACd,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,6BACCC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA,4BACe,OAAO;IAAAA,eAAA,mBAC1B,KAAK;EAAA;AAC5B","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmPictureProps","constructor","args","_defineProperty","undefined"],"sources":["picture.props.ts"],"sourcesContent":["import { AccessibilityRole, ImageResizeMode } from 'react-native';\nimport { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmPictureProps extends BaseProps {\n  animation?: string = null as any;\n  animationdelay?: number = null as any;\n  picturesource?: string = null as any;\n  pictureplaceholder?: string = null as any;\n  shape?: string = null as any;\n  isSvg?: string = null as any;\n  resizemode?: ImageResizeMode = 'stretch' as any;\n  skeletonheight?: string = null as any;\n  skeletonwidth?: string = null as any;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole = 'image';\n  fastload?: boolean = false;\n  aspectRatio?: string | number | null = null;\n}\n"],"mappings":";;;AACA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,oBAC/B,IAAI;IAAAA,eAAA,yBACC,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,6BACC,IAAI;IAAAA,eAAA,gBACjB,IAAI;IAAAA,eAAA,gBACJ,IAAI;IAAAA,eAAA,qBACU,SAAS;IAAAA,eAAA,yBACd,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,6BACCC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA,4BACe,OAAO;IAAAA,eAAA,mBAC1B,KAAK;IAAAA,eAAA,sBACa,IAAI;EAAA;AAC7C","ignoreList":[]}

package/components/basic/video/video.component.js

@@ -3,7 +3,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
-import { View, Image, TouchableWithoutFeedback } from 'react-native';
+import { View, Image, TouchableWithoutFeedback, Platform, Text } from 'react-native';
 import { VideoView, createVideoPlayer } from 'expo-video';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmVideoProps from './video.props';
@@ -16,6 +16,7 @@ export class WmVideoState extends BaseComponentState {
     super(...args);
     _defineProperty(this, "isVideoReady", false);
     _defineProperty(this, "playStarted", false);
+    _defineProperty(this, "videoPosterDismissed", false);
   }
 }
 export default class WmVideo extends BaseComponent {
@@ -104,6 +105,12 @@ export default class WmVideo extends BaseComponent {
     this.player.addListener('statusChange', this.playerReadyStatusChange.bind(this));
     this.initializeProps();
   }
+  onPlayIconTap() {
+    this.updateState({
+      videoPosterDismissed: true
+    });
+    this.player.play();
+  }
   componentWillUnmount() {
     super.componentWillUnmount();
     this.player.removeListener('playingChange', this.playingStatusChange);
@@ -116,12 +123,14 @@ export default class WmVideo extends BaseComponent {
       videoposter,
       onFullscreenEnter,
       onFullscreenExit,
-      requiresLinearPlayback
+      requiresLinearPlayback,
+      showDefaultVideoPoster
     } = props;
     const {
       playStarted
     } = this.state;
     const isPlaying = playStarted || this.state.props.autoplay;
+    const showOverlay = !showDefaultVideoPoster && !this.state.videoPosterDismissed;
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
     }, this._background, /*#__PURE__*/React.createElement(VideoView, _extends({}, getAccessibilityProps(AccessibilityWidgetType.VIDEO, props), {
@@ -131,14 +140,35 @@ export default class WmVideo extends BaseComponent {
         flex: 1
       },
       player: this.player,
-      nativeControls: props.controls,
+      nativeControls: props.controls || showOverlay,
       contentFit: 'contain',
       testID: this.getTestId('video'),
       allowsPictureInPicture: allowsPictureInPicture,
       onFullscreenEnter: onFullscreenEnter,
       onFullscreenExit: onFullscreenExit,
       requiresLinearPlayback: requiresLinearPlayback
-    })), !isPlaying && videoposter ? this.renderVideoPoster(props) : /*#__PURE__*/React.createElement(React.Fragment, null));
+    })), !isPlaying && videoposter && showDefaultVideoPoster ? this.renderVideoPoster(props) : /*#__PURE__*/React.createElement(React.Fragment, null), !isPlaying && !showDefaultVideoPoster && !this.state.videoPosterDismissed ? /*#__PURE__*/React.createElement(View, {
+      style: this.styles.playIconContainer
+    }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+      style: {
+        width: 80,
+        height: 80
+      },
+      onPress: this.onPlayIconTap.bind(this)
+    }, Platform.OS === 'android' ? /*#__PURE__*/React.createElement(Image, _extends({}, this.getTestProps('video_play_button'), {
+      style: {
+        width: 80,
+        height: 80
+      },
+      resizeMode: 'contain',
+      source: this.getSource('resources/images/imagelists/play.png')
+    })) : /*#__PURE__*/React.createElement(Text, {
+      style: {
+        fontSize: 80,
+        fontWeight: 'bold',
+        color: 'white'
+      }
+    }, "\u25B6"))) : /*#__PURE__*/React.createElement(React.Fragment, null));
   }
 }
 //# sourceMappingURL=video.component.js.map

package/components/basic/video/video.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Image","TouchableWithoutFeedback","VideoView","createVideoPlayer","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","AccessibilityWidgetType","getAccessibilityProps","isFullPathUrl","createSkeleton","WmVideoState","constructor","args","_defineProperty","WmVideo","props","getSource","path","resource","loadAsset","uri","renderVideoPoster","accessibilityImageProps","accessibilitylabel","hint","accessibilityrole","createElement","onPress","player","play","_extends","getTestProps","style","position","top","bottom","left","right","width","height","resizeMode","source","videoposter","PICTURE","renderSkeleton","theme","styles","skeleton","root","playingStatusChange","isPlaying","state","playStarted","updateState","autoplay","playerReadyStatusChange","statusObj","videoReady","status","isVideoReady","initializeProps","loop","muted","showNowPlayingNotification","componentDidMount","mp4format","webmformat","videoSource","addListener","bind","componentWillUnmount","removeListener","release","renderWidget","allowsPictureInPicture","onFullscreenEnter","onFullscreenExit","requiresLinearPlayback","_background","VIDEO","flex","nativeControls","controls","contentFit","testID","getTestId","Fragment"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Image, TouchableWithoutFeedback } from 'react-native';\nimport { VideoView, createVideoPlayer } from 'expo-video';\nimport {\n  BaseComponent,\n  BaseComponentState,\n} from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport {\n  AccessibilityWidgetType,\n  getAccessibilityProps,\n} from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {\n  isVideoReady: boolean = false;\n  playStarted: boolean = false;\n}\n\nexport default class WmVideo extends BaseComponent<\n  WmVideoProps,\n  WmVideoState,\n  WmVideoStyles\n> {\n  private player: any;\n\n  constructor(props: WmVideoProps) {\n    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());\n  }\n\n  getSource(path: string) {\n    if (!path) {\n      return null;\n    }\n    const resource = this.loadAsset && this.loadAsset(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource as string,\n      };\n    }\n    return resource || {\n      uri: ''\n    };\n  }\n\n  renderVideoPoster(props: WmVideoProps) {\n    const accessibilityImageProps = {...props, \n      accessibilitylabel : `${props.accessibilitylabel}_poster`,\n      hint: `${props.hint}_poster`,\n      accessibilityrole: `${props.accessibilityrole}_poster`,\n    }\n    return (\n      <TouchableWithoutFeedback onPress={() => this.player.play()}>\n        <Image\n          {...this.getTestProps('video_poster')}\n          style={{\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            width: '100%',\n            height: '100%',\n          }}\n          resizeMode={'cover'}\n          source={this.getSource(props.videoposter) as any}\n          {...getAccessibilityProps(AccessibilityWidgetType.PICTURE, accessibilityImageProps)}\n        />\n      </TouchableWithoutFeedback>\n    );\n  }\n\n  public renderSkeleton(props: WmVideoProps): React.ReactNode {\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n    });\n  }\n\n  public playingStatusChange(isPlaying: boolean) {\n    if (!this.state.playStarted) {\n      this.updateState({\n        playStarted: this.state.props.autoplay || isPlaying,\n      } as WmVideoState);\n    }\n  }\n\n  playerReadyStatusChange(statusObj: any) {\n    const videoReady = statusObj.status === 'readyToPlay'\n    if (this.state.props.autoplay && videoReady) {\n        this.player.play();\n    }\n    this.updateState({\n      isVideoReady: videoReady,\n    } as WmVideoState);\n  }\n\n  initializeProps(){\n    const {\n      loop,\n      muted,\n      showNowPlayingNotification,\n    } = this.state.props\n\n    this.player.muted = muted; \n    this.player.loop = loop; \n    this.player.showNowPlayingNotification = showNowPlayingNotification; \n  }\n\n  componentDidMount(): void {\n    super.componentDidMount();\n    const { mp4format, webmformat, autoplay } = this.state.props;\n    const videoSource = this.getSource(mp4format || webmformat) ;\n\n    this.player = createVideoPlayer(videoSource);\n    this.player.addListener(\n      'playingChange',\n      this.playingStatusChange.bind(this)\n    );\n    this.player.addListener(\n      'statusChange',\n      this.playerReadyStatusChange.bind(this)\n    );\n\n    this.initializeProps()\n  }\n\n  componentWillUnmount(): void {\n    super.componentWillUnmount();\n    this.player.removeListener('playingChange', this.playingStatusChange);\n    this.player.removeListener('statusChange', this.playerReadyStatusChange);\n    this.player.release();\n  }\n\n\n  renderWidget(props: WmVideoProps) {\n    const {\n      allowsPictureInPicture,\n      videoposter,\n      onFullscreenEnter,\n      onFullscreenExit,\n      requiresLinearPlayback\n    } = props;\n\n    const { playStarted } = this.state;\n    const isPlaying = playStarted || this.state.props.autoplay;\n\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <VideoView\n          {...getAccessibilityProps(AccessibilityWidgetType.VIDEO, props)}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          player={this.player}\n          nativeControls={props.controls}\n          contentFit={'contain'}\n          testID={this.getTestId('video')}\n          allowsPictureInPicture={allowsPictureInPicture}\n          onFullscreenEnter={onFullscreenEnter}\n          onFullscreenExit={onFullscreenExit}\n          requiresLinearPlayback={requiresLinearPlayback}\n        />\n        {!isPlaying && videoposter ? (\n          this.renderVideoPoster(props)\n        ) : (\n          <></>\n        )}\n      </View>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Image","TouchableWithoutFeedback","Platform","Text","VideoView","createVideoPlayer","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","AccessibilityWidgetType","getAccessibilityProps","isFullPathUrl","createSkeleton","WmVideoState","constructor","args","_defineProperty","WmVideo","props","getSource","path","resource","loadAsset","uri","renderVideoPoster","accessibilityImageProps","accessibilitylabel","hint","accessibilityrole","createElement","onPress","player","play","_extends","getTestProps","style","position","top","bottom","left","right","width","height","resizeMode","source","videoposter","PICTURE","renderSkeleton","theme","styles","skeleton","root","playingStatusChange","isPlaying","state","playStarted","updateState","autoplay","playerReadyStatusChange","statusObj","videoReady","status","isVideoReady","initializeProps","loop","muted","showNowPlayingNotification","componentDidMount","mp4format","webmformat","videoSource","addListener","bind","onPlayIconTap","videoPosterDismissed","componentWillUnmount","removeListener","release","renderWidget","allowsPictureInPicture","onFullscreenEnter","onFullscreenExit","requiresLinearPlayback","showDefaultVideoPoster","showOverlay","_background","VIDEO","flex","nativeControls","controls","contentFit","testID","getTestId","Fragment","playIconContainer","OS","fontSize","fontWeight","color"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Image, TouchableWithoutFeedback, Platform, Text } from 'react-native';\nimport { VideoView, createVideoPlayer } from 'expo-video';\nimport {\n  BaseComponent,\n  BaseComponentState,\n} from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport {\n  AccessibilityWidgetType,\n  getAccessibilityProps,\n} from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {\n  isVideoReady: boolean = false;\n  playStarted: boolean = false;\n  videoPosterDismissed: boolean = false;\n}\n\nexport default class WmVideo extends BaseComponent<\n  WmVideoProps,\n  WmVideoState,\n  WmVideoStyles\n> {\n  private player: any;\n\n  constructor(props: WmVideoProps) {\n    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());\n  }\n\n  getSource(path: string) {\n    if (!path) {\n      return null;\n    }\n    const resource = this.loadAsset && this.loadAsset(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource as string,\n      };\n    }\n    return resource || {\n      uri: ''\n    };\n  }\n\n  renderVideoPoster(props: WmVideoProps) {\n    const accessibilityImageProps = {...props, \n      accessibilitylabel : `${props.accessibilitylabel}_poster`,\n      hint: `${props.hint}_poster`,\n      accessibilityrole: `${props.accessibilityrole}_poster`,\n    }\n    return (\n      <TouchableWithoutFeedback onPress={() => this.player.play()}>\n        <Image\n          {...this.getTestProps('video_poster')}\n          style={{\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            width: '100%',\n            height: '100%',\n          }}\n          resizeMode={'cover'}\n          source={this.getSource(props.videoposter) as any}\n          {...getAccessibilityProps(AccessibilityWidgetType.PICTURE, accessibilityImageProps)}\n        />\n      </TouchableWithoutFeedback>\n    );\n  }\n\n\n  public renderSkeleton(props: WmVideoProps): React.ReactNode {\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n    });\n  }\n\n  public playingStatusChange(isPlaying: boolean) {\n    if (!this.state.playStarted) {\n      this.updateState({\n        playStarted: this.state.props.autoplay || isPlaying,\n      } as WmVideoState);\n    }\n  }\n\n  playerReadyStatusChange(statusObj: any) {\n    const videoReady = statusObj.status === 'readyToPlay'\n    if (this.state.props.autoplay && videoReady) {\n        this.player.play();\n    }\n    this.updateState({\n      isVideoReady: videoReady,\n    } as WmVideoState);\n  }\n\n  initializeProps(){\n    const {\n      loop,\n      muted,\n      showNowPlayingNotification,\n    } = this.state.props\n\n    this.player.muted = muted; \n    this.player.loop = loop; \n    this.player.showNowPlayingNotification = showNowPlayingNotification; \n  }\n\n  componentDidMount(): void {\n    super.componentDidMount();\n    const { mp4format, webmformat, autoplay } = this.state.props;\n    const videoSource = this.getSource(mp4format || webmformat) ;\n\n    this.player = createVideoPlayer(videoSource);\n    this.player.addListener(\n      'playingChange',\n      this.playingStatusChange.bind(this)\n    );\n    this.player.addListener(\n      'statusChange',\n      this.playerReadyStatusChange.bind(this)\n    ); \n    this.initializeProps()\n  }\n\n  onPlayIconTap() {\n    this.updateState({\n      videoPosterDismissed: true\n    } as WmVideoState)\n    this.player.play()\n  }\n\n  componentWillUnmount(): void {\n    super.componentWillUnmount();\n    this.player.removeListener('playingChange', this.playingStatusChange);\n    this.player.removeListener('statusChange', this.playerReadyStatusChange);\n    this.player.release();\n  }\n\n  renderWidget(props: WmVideoProps) {\n    const {\n      allowsPictureInPicture,\n      videoposter,\n      onFullscreenEnter,\n      onFullscreenExit,\n      requiresLinearPlayback,\n      showDefaultVideoPoster\n    } = props;\n\n    const { playStarted } = this.state;\n    const isPlaying = playStarted || this.state.props.autoplay;\n    const showOverlay = !showDefaultVideoPoster && !this.state.videoPosterDismissed\n\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <VideoView\n          {...getAccessibilityProps(AccessibilityWidgetType.VIDEO, props)}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          player={this.player}\n          nativeControls={props.controls || showOverlay}\n          contentFit={'contain'}\n          testID={this.getTestId('video')}\n          allowsPictureInPicture={allowsPictureInPicture}\n          onFullscreenEnter={onFullscreenEnter}\n          onFullscreenExit={onFullscreenExit}\n          requiresLinearPlayback={requiresLinearPlayback}\n        />\n        {!isPlaying && videoposter && showDefaultVideoPoster ? (\n          this.renderVideoPoster(props)\n        ) : (\n          <></>\n        )}\n        {\n          !isPlaying && !showDefaultVideoPoster && !this.state.videoPosterDismissed ? (\n            <View style={this.styles.playIconContainer}>\n              <TouchableWithoutFeedback style={{width: 80, height: 80 }} onPress={this.onPlayIconTap.bind(this)}>\n                {Platform.OS === 'android' ? <Image\n                {...this.getTestProps('video_play_button')}\n                style={{\n                  width: 80, \n                  height: 80,\n                }}\n                resizeMode={'contain'}\n                source={this.getSource('resources/images/imagelists/play.png') as any}\n              /> : <Text style={{ fontSize: 80, fontWeight: 'bold', color: 'white'}} >▶</Text> } \n              </TouchableWithoutFeedback>\n            </View>            \n          ) : (\n            <></>\n          )\n        }\n      </View>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/components/basic/video/video.props.js

@@ -14,6 +14,7 @@ export default class WmVideoProps extends BaseProps {
     _defineProperty(this, "subtitlelang", 'en');
     _defineProperty(this, "subtitlesource", null);
     _defineProperty(this, "videoposter", 'resources/images/imagelists/default-image.png');
+    _defineProperty(this, "showDefaultVideoPoster", true);
     _defineProperty(this, "videopreload", 'none');
     _defineProperty(this, "videosupportmessage", 'Your browser does not support the video tag.');
     _defineProperty(this, "webmformat", null);

package/components/basic/video/video.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmVideoProps","constructor","args","_defineProperty","undefined"],"sources":["video.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\nexport default class WmVideoProps extends BaseProps {\n    autoplay = false;\n    controls = false;\n    loop = false;\n    mp4format: string = null as any;\n    muted = false;\n    oggformat: string = null as any;\n    subtitlelang = 'en';\n    subtitlesource: string = null as any;\n    videoposter = 'resources/images/imagelists/default-image.png';\n    videopreload = 'none';\n    videosupportmessage = 'Your browser does not support the video tag.';\n    webmformat: string = null as any;\n    accessibilitylabel?: string = undefined;\n    hint?: string = undefined;\n    accessibilityrole?: AccessibilityRole;\n    onFullscreenEnter: (() => void) | null = null;\n    onFullscreenExit: (() => void) | null = null;\n    requiresLinearPlayback: boolean = true;\n    isLive: boolean = false;\n    playing: boolean = false;\n    showNowPlayingNotification: boolean = false;\n    allowsPictureInPicture: boolean = false;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBACrC,KAAK;IAAAA,eAAA,mBACL,KAAK;IAAAA,eAAA,eACT,KAAK;IAAAA,eAAA,oBACQ,IAAI;IAAAA,eAAA,gBAChB,KAAK;IAAAA,eAAA,oBACO,IAAI;IAAAA,eAAA,uBACT,IAAI;IAAAA,eAAA,yBACM,IAAI;IAAAA,eAAA,sBACf,+CAA+C;IAAAA,eAAA,uBAC9C,MAAM;IAAAA,eAAA,8BACC,8CAA8C;IAAAA,eAAA,qBAC/C,IAAI;IAAAA,eAAA,6BACKC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA;IAAAA,eAAA,4BAEgB,IAAI;IAAAA,eAAA,2BACL,IAAI;IAAAA,eAAA,iCACV,IAAI;IAAAA,eAAA,iBACpB,KAAK;IAAAA,eAAA,kBACJ,KAAK;IAAAA,eAAA,qCACc,KAAK;IAAAA,eAAA,iCACT,KAAK;EAAA;AAC3C","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmVideoProps","constructor","args","_defineProperty","undefined"],"sources":["video.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\nexport default class WmVideoProps extends BaseProps {\n    autoplay = false;\n    controls = false;\n    loop = false;\n    mp4format: string = null as any;\n    muted = false;\n    oggformat: string = null as any;\n    subtitlelang = 'en';\n    subtitlesource: string = null as any;\n    videoposter = 'resources/images/imagelists/default-image.png';\n    showDefaultVideoPoster = true;\n    videopreload = 'none';\n    videosupportmessage = 'Your browser does not support the video tag.';\n    webmformat: string = null as any;\n    accessibilitylabel?: string = undefined;\n    hint?: string = undefined;\n    accessibilityrole?: AccessibilityRole;\n    onFullscreenEnter: (() => void) | null = null;\n    onFullscreenExit: (() => void) | null = null;\n    requiresLinearPlayback: boolean = true;\n    isLive: boolean = false;\n    playing: boolean = false;\n    showNowPlayingNotification: boolean = false;\n    allowsPictureInPicture: boolean = false;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBACrC,KAAK;IAAAA,eAAA,mBACL,KAAK;IAAAA,eAAA,eACT,KAAK;IAAAA,eAAA,oBACQ,IAAI;IAAAA,eAAA,gBAChB,KAAK;IAAAA,eAAA,oBACO,IAAI;IAAAA,eAAA,uBACT,IAAI;IAAAA,eAAA,yBACM,IAAI;IAAAA,eAAA,sBACf,+CAA+C;IAAAA,eAAA,iCACpC,IAAI;IAAAA,eAAA,uBACd,MAAM;IAAAA,eAAA,8BACC,8CAA8C;IAAAA,eAAA,qBAC/C,IAAI;IAAAA,eAAA,6BACKC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA;IAAAA,eAAA,4BAEgB,IAAI;IAAAA,eAAA,2BACL,IAAI;IAAAA,eAAA,iCACV,IAAI;IAAAA,eAAA,iBACpB,KAAK;IAAAA,eAAA,kBACJ,KAAK;IAAAA,eAAA,qCACc,KAAK;IAAAA,eAAA,iCACT,KAAK;EAAA;AAC3C","ignoreList":[]}

package/components/basic/video/video.styles.js

@@ -13,6 +13,19 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
         height: 300,
         width: "100%"
       }
+    },
+    playIconContainer: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: '100%',
+      width: '100%',
+      backgroundColor: 'rgba(0,0,0,0.1)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
     }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);

package/components/basic/video/video.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","width","text","skeleton"],"sources":["video.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../skeleton/skeleton.styles';\n\nexport type WmVideoStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-video';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = defineStyles<WmVideoStyles>({\n        root: {\n            height: 300,\n            width : \"100%\"\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: 300,\n                width : \"100%\"    \n            }\n        } as any as WmSkeletonStyles\n    });\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,WAAW;AACxCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAGL,YAAY,CAAgB;IAC9CM,IAAI,EAAE;MACFC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAG;IACZ,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFC,MAAM,EAAE,GAAG;QACXC,KAAK,EAAG;MACZ;IACJ;EACJ,CAAC,CAAC;EACFJ,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","width","text","skeleton","playIconContainer","position","top","bottom","left","right","backgroundColor","display","justifyContent","alignItems"],"sources":["video.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../skeleton/skeleton.styles';\nimport { WmPictureStyles } from '../picture/picture.styles';\nimport { ViewStyle } from 'react-native';\n\nexport type WmVideoStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles;\n    playIconContainer: ViewStyle;\n};\n\nexport const DEFAULT_CLASS = 'app-video';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = defineStyles<WmVideoStyles>({\n        root: {\n            height: 300,\n            width : \"100%\"\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: 300,\n                width : \"100%\"    \n            }\n        } as any as WmSkeletonStyles,\n        playIconContainer: {\n            position: 'absolute', \n            top: 0, \n            bottom: 0, \n            left: 0, \n            right: 0, \n            height: '100%', \n            width: '100%',\n            backgroundColor: 'rgba(0,0,0,0.1)',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center'\n} \n    });\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAUxF,OAAO,MAAMC,aAAa,GAAG,WAAW;AACxCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAGL,YAAY,CAAgB;IAC9CM,IAAI,EAAE;MACFC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAG;IACZ,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFC,MAAM,EAAE,GAAG;QACXC,KAAK,EAAG;MACZ;IACJ,CAA4B;IAC5BG,iBAAiB,EAAE;MACfC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE,CAAC;MACTC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRT,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbS,eAAe,EAAE,iBAAiB;MAClCC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE;IACxB;EACI,CAAC,CAAC;EACFhB,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

package/components/page/page-content/page-content.component.js

@@ -11,6 +11,7 @@ import { DEFAULT_CLASS } from './page-content.styles';
 import { ScrollView } from 'react-native-gesture-handler';
 import WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { FixedViewContainer } from '@wavemaker/app-rn-runtime/core/fixed-view.component';
 export class WmPageContentState extends BaseComponentState {}
 export default class WmPageContent extends BaseComponent {
   constructor(props) {
@@ -78,7 +79,7 @@ export default class WmPageContent extends BaseComponent {
         style: {
           flex: 1
         }
-      }, /*#__PURE__*/React.createElement(ScrollView, {
+      }, /*#__PURE__*/React.createElement(FixedViewContainer, null, /*#__PURE__*/React.createElement(ScrollView, {
         ref: this.scrollRef,
         contentContainerStyle: [this.styles.root, {
           backgroundColor: 'transparent'
@@ -88,7 +89,7 @@ export default class WmPageContent extends BaseComponent {
           this.notify('scroll', [event]);
         },
         scrollEventThrottle: 48
-      }, props.children));
+      }, props.children)));
     })) : /*#__PURE__*/React.createElement(View, {
       style: [this.styles.root, {
         backgroundColor: this._showSkeleton ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor
@@ -107,7 +108,7 @@ export default class WmPageContent extends BaseComponent {
         style: {
           flex: 1
         }
-      }, this._background, props.children);
+      }, /*#__PURE__*/React.createElement(FixedViewContainer, null, this._background, props.children));
     }));
   }
 }

package/components/page/page-content/page-content.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createRef","KeyboardAvoidingView","Platform","View","isWebPreviewMode","HideMode","BaseComponent","BaseComponentState","WmPageContentProps","DEFAULT_CLASS","ScrollView","WmLottie","SafeAreaInsetsContext","WmPageContentState","WmPageContent","constructor","props","_defineProperty","hideMode","DONOT_ADD_TO_DOM","scrollRef","subscribe","args","scrollTo","_this$scrollRef","current","scrollToEnd","position","_this$scrollRef2","x","y","Animated","renderSkeleton","skeletonanimationresource","createElement","style","width","styles","root","content","skeleton","source","loop","autoplay","speed","skeletonanimationspeed","renderWidget","showScrollbar","scrollbarColor","scrollable","height","backgroundColor","_showSkeleton","_background","Consumer","insets","top","bottom","left","right","keyboardOffset","verticalOffset","OS","behavior","undefined","keyboardVerticalOffset","flex","ref","contentContainerStyle","showsVerticalScrollIndicator","onScroll","event","notify","scrollEventThrottle","children"],"sources":["page-content.component.tsx"],"sourcesContent":["import React, { createRef, RefObject } from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { HideMode } from '@wavemaker/app-rn-runtime/core/if.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmPageContentProps from './page-content.props';\nimport { DEFAULT_CLASS, WmPageContentStyles } from './page-content.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\nimport WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\n\nexport class WmPageContentState extends BaseComponentState<WmPageContentProps> {\n\n}\n\nexport default class WmPageContent extends BaseComponent<WmPageContentProps, WmPageContentState, WmPageContentStyles> {\n  private scrollRef: RefObject<any>;\n\n  constructor(props: WmPageContentProps) {\n    super(props, DEFAULT_CLASS, new WmPageContentProps());\n    this.hideMode = HideMode.DONOT_ADD_TO_DOM;\n    this.scrollRef = createRef();\n    this.subscribe('scrollToPosition', (args: any) => {\n      this.scrollTo(args)\n    })\n\n    this.subscribe('scrollToEnd', () => {\n      this.scrollRef?.current.scrollToEnd();\n    })\n  }\n\n  public scrollTo(position: {x: number, y: number}){\n    this.scrollRef?.current.scrollTo({\n      x: position.x,\n      y: position.y,\n      Animated: true\n    });\n  }\n\n  public renderSkeleton(props: WmPageContentProps): React.ReactNode {\n    if(this.props.skeletonanimationresource) {\n      return <View style={[{width: '100%'}, this.styles.root]}>\n       <WmLottie styles={{ content: {...this.styles.root, ...this.styles.skeleton.root} }} source={this.props.skeletonanimationresource} loop={true} autoplay={true} speed={this.props.skeletonanimationspeed}/>\n      </View>\n    } \n    return null;\n  }  \n\n  renderWidget(props: WmPageContentProps) {\n    const showScrollbar = (this.styles.root as any).scrollbarColor != 'transparent';\n    //     return ((props.scrollable || isWebPreviewMode()) && !this._showSkeleton) ? (\n      return (props.scrollable || isWebPreviewMode()) ? (\n        <View style={{height: '100%', width: '100%', backgroundColor: this._showSkeleton && this.styles.skeleton.root.backgroundColor ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor}}>\n        {this._background}\n        <SafeAreaInsetsContext.Consumer>\n        {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n          const keyboardOffset = insets?.bottom || 0;\n          const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;\n          return (\n            <KeyboardAvoidingView\n              behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n              keyboardVerticalOffset={verticalOffset}\n              style={{ flex: 1 }}>\n              <ScrollView \n                ref={this.scrollRef}\n                contentContainerStyle={[this.styles.root, {backgroundColor: 'transparent'}]}\n                showsVerticalScrollIndicator={showScrollbar}\n                onScroll={(event) => {this.notify('scroll', [event])}}\n                scrollEventThrottle={48}>\n                {props.children}\n              </ScrollView>\n            </KeyboardAvoidingView>\n          )}}\n      </SafeAreaInsetsContext.Consumer>\n      </View>      \n      ) : (\n        <View style={[this.styles.root,\n            {backgroundColor: this._showSkeleton ?\n              this.styles.skeleton.root.backgroundColor : \n              this.styles.root.backgroundColor}]}>\n          <SafeAreaInsetsContext.Consumer>\n            {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n              const keyboardOffset = insets?.bottom || 0;\n              const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;\n              return (\n                <KeyboardAvoidingView\n                  behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n                  keyboardVerticalOffset={verticalOffset}\n                  style={{ flex: 1 }}>\n                  {this._background}\n                  {props.children}\n                </KeyboardAvoidingView>\n              )}}\n          </SafeAreaInsetsContext.Consumer>\n        </View>\n      );\n    }\n  }\n      "],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createRef","KeyboardAvoidingView","Platform","View","isWebPreviewMode","HideMode","BaseComponent","BaseComponentState","WmPageContentProps","DEFAULT_CLASS","ScrollView","WmLottie","SafeAreaInsetsContext","FixedViewContainer","WmPageContentState","WmPageContent","constructor","props","_defineProperty","hideMode","DONOT_ADD_TO_DOM","scrollRef","subscribe","args","scrollTo","_this$scrollRef","current","scrollToEnd","position","_this$scrollRef2","x","y","Animated","renderSkeleton","skeletonanimationresource","createElement","style","width","styles","root","content","skeleton","source","loop","autoplay","speed","skeletonanimationspeed","renderWidget","showScrollbar","scrollbarColor","scrollable","height","backgroundColor","_showSkeleton","_background","Consumer","insets","top","bottom","left","right","keyboardOffset","verticalOffset","OS","behavior","undefined","keyboardVerticalOffset","flex","ref","contentContainerStyle","showsVerticalScrollIndicator","onScroll","event","notify","scrollEventThrottle","children"],"sources":["page-content.component.tsx"],"sourcesContent":["import React, { createRef, RefObject } from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { HideMode } from '@wavemaker/app-rn-runtime/core/if.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmPageContentProps from './page-content.props';\nimport { DEFAULT_CLASS, WmPageContentStyles } from './page-content.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\nimport WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\nimport { FixedViewContainer } from '@wavemaker/app-rn-runtime/core/fixed-view.component';\n\nexport class WmPageContentState extends BaseComponentState<WmPageContentProps> {\n\n}\n\nexport default class WmPageContent extends BaseComponent<WmPageContentProps, WmPageContentState, WmPageContentStyles> {\n  private scrollRef: RefObject<any>;\n\n  constructor(props: WmPageContentProps) {\n    super(props, DEFAULT_CLASS, new WmPageContentProps());\n    this.hideMode = HideMode.DONOT_ADD_TO_DOM;\n    this.scrollRef = createRef();\n    this.subscribe('scrollToPosition', (args: any) => {\n      this.scrollTo(args)\n    })\n\n    this.subscribe('scrollToEnd', () => {\n      this.scrollRef?.current.scrollToEnd();\n    })\n  }\n\n  public scrollTo(position: {x: number, y: number}){\n    this.scrollRef?.current.scrollTo({\n      x: position.x,\n      y: position.y,\n      Animated: true\n    });\n  }\n\n  public renderSkeleton(props: WmPageContentProps): React.ReactNode {\n    if(this.props.skeletonanimationresource) {\n      return <View style={[{width: '100%'}, this.styles.root]}>\n       <WmLottie styles={{ content: {...this.styles.root, ...this.styles.skeleton.root} }} source={this.props.skeletonanimationresource} loop={true} autoplay={true} speed={this.props.skeletonanimationspeed}/>\n      </View>\n    } \n    return null;\n  }  \n\n  renderWidget(props: WmPageContentProps) {\n    const showScrollbar = (this.styles.root as any).scrollbarColor != 'transparent';\n    //     return ((props.scrollable || isWebPreviewMode()) && !this._showSkeleton) ? (\n      return (props.scrollable || isWebPreviewMode()) ? (\n        <View style={{height: '100%', width: '100%', backgroundColor: this._showSkeleton && this.styles.skeleton.root.backgroundColor ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor}}>\n        {this._background}\n        <SafeAreaInsetsContext.Consumer>\n        {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n          const keyboardOffset = insets?.bottom || 0;\n          const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;\n          return (\n            <KeyboardAvoidingView\n              behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n              keyboardVerticalOffset={verticalOffset}\n              style={{ flex: 1 }}>\n              <FixedViewContainer>\n                <ScrollView \n                  ref={this.scrollRef}\n                  contentContainerStyle={[this.styles.root, {backgroundColor: 'transparent'}]}\n                  showsVerticalScrollIndicator={showScrollbar}\n                  onScroll={(event) => {this.notify('scroll', [event])}}\n                  scrollEventThrottle={48}>\n                    {props.children}\n                </ScrollView>\n              </FixedViewContainer>\n            </KeyboardAvoidingView>\n          )}}\n      </SafeAreaInsetsContext.Consumer>\n      </View>      \n      ) : (\n        <View style={[this.styles.root,\n            {backgroundColor: this._showSkeleton ?\n              this.styles.skeleton.root.backgroundColor : \n              this.styles.root.backgroundColor}]}>\n          <SafeAreaInsetsContext.Consumer>\n            {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n              const keyboardOffset = insets?.bottom || 0;\n              const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;\n              return (\n                <KeyboardAvoidingView\n                  behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n                  keyboardVerticalOffset={verticalOffset}\n                  style={{ flex: 1 }}>\n                  <FixedViewContainer>\n                    {this._background}\n                    {props.children}\n                  </FixedViewContainer>\n                </KeyboardAvoidingView>\n              )}}\n          </SafeAreaInsetsContext.Consumer>\n        </View>\n      );\n    }\n  }\n      "],"mappings":"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","ignoreList":[]}

package/core/fixed-view.component.js

@@ -12,9 +12,11 @@ export class FixedView extends React.Component {
     _defineProperty(this, "cachedComponent", void 0);
     _defineProperty(this, "id", FixedView.counter++);
   }
-  componentWillUnmount() {
-    this.container.remove(this);
-  }
+
+  // componentWillUnmount() {
+  //     this.container.remove(this);
+  // }
+
   render() {
     this.cachedComponent = this.props.usememo === true && this.cachedComponent || /*#__PURE__*/React.createElement(FixedViewContext.Consumer, null, container => {
       this.container = container;