@momo-kits/avatar 0.0.62-beta → 0.0.66-beta

package/Avatar.js

@@ -9,6 +9,12 @@ import {
  ValueUtil, Colors, Text, IconSource, Image, ScaleSize
 } from '@momo-kits/core';
 
+export const AvatarQuality = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+
 export const AvatarSize = {
     tiny: 'tiny',
     small: 'small',
@@ -291,6 +297,7 @@ export default class Avatar extends Component {
             source: props.source,
             dimensions: {}
         };
+        this.imageSource = '';
     }
 
     componentDidMount() {
@@ -354,10 +361,24 @@ export default class Avatar extends Component {
     }
 
     isValidImageUrl = (source) => {
-        const validSource = source && (((source.uri && this.isUrl(source.uri)) || (typeof source === 'number')));
+        const validSource = source && source.uri && this.isUrl(source.uri);
         return validSource;
     }
 
+    mapAvatarQuality = (url, quality) => {
+        if (!quality || quality === AvatarQuality.medium) {
+            return url;
+        }
+        if (quality === AvatarQuality.low) {
+            return url.replace('.png', '_s64.png');
+        }
+        if (quality === AvatarQuality.high) {
+            return url.replace('.png', '_s512.png');
+        }
+
+        return url;
+    }
+
     mapStyleFromSize = (size) => {
         const { dimensions } = this.state;
         const avatarStyle = avatarSize(dimensions?.width || null).small;
@@ -416,8 +437,11 @@ export default class Avatar extends Component {
         };
     }
 
-    onLoadSourceError = () => {
-        this.setState({ hideSource: true, ownUpdate: true });
+    onLoadSourceError = (imageSource) => {
+        if(this.imageSource?.uri !== imageSource?.uri){
+            this.imageSource = imageSource;
+            this.setState({ hideSource: true, ownUpdate: true });
+        }
     }
 
     renderSubIcon = () => {
@@ -456,13 +480,24 @@ export default class Avatar extends Component {
 
     render() {
         const {
-            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage
+            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage, quality
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
         const containerSize = this.extractSize(avatarStyle);
         const imageSource = ValueUtil.getImageSource(source);
         const showName = typeof imageSource === 'object' && Object.keys(imageSource).length === 0 && typeof imageSource !== 'number';
+        // add priority high for avatar
+        if (imageSource?.uri) {
+            imageSource.priority = 'high';
+            imageSource.uri = this.mapAvatarQuality(imageSource.uri, quality);
+            // if doest not have time query, set default cache time to 1 day
+            if (!imageSource.uri?.includes('?') && cached) {
+                const midnight = new Date().setHours(0, 0, 0, 0);
+                imageSource.uri = `${imageSource.uri}?time=${midnight}`;
+            }
+        }
+
         const inner = (
             <View style={[styles.container, containerSize, style]}>
                 {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : <View />}
@@ -472,7 +507,7 @@ export default class Avatar extends Component {
                             cached={cached}
                             loading={loading || isShowLoading}
                             source={imageSource}
-                            onError={this.onLoadSourceError}
+                            onError={() => this.onLoadSourceError(imageSource)}
                             style={avatarStyle}
                             resizeMode={resizeMode}
                             {...extraPropsImage}
@@ -495,6 +530,7 @@ export default class Avatar extends Component {
 Avatar.propTypes = {
     name: PropTypes.string,
     resizeMode: PropTypes.string,
+    quality: PropTypes.oneOf(['low', 'medium', 'high']),
     size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'size8', 'size24', 'size36', 'size44', 'size48', 'size52', 'size56', 'size64', 'size72', 'size80', 'size88', 'size96',
         PropTypes.shape({
             width: PropTypes.number, height: PropTypes.number, borderRadius: PropTypes.number
@@ -513,5 +549,6 @@ Avatar.propTypes = {
 Avatar.defaultProps = {
     resizeMode: 'cover',
     cached: true,
-    scaleSize: false
+    scaleSize: false,
+    quality: 'medium',
 };

package/Avatar.web.js

@@ -11,6 +11,12 @@ import { Icons as IconSource } from '../../core/icons';
 import Text from '../../core/components/typography';
 import { RFValueHorizontal as ScaleSize } from '../../core/components/typography/reponsiveSize';
 
+export const AvatarQuality = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+
 export const AvatarSize = {
     tiny: 'tiny',
     small: 'small',
@@ -356,10 +362,24 @@ export default class Avatar extends Component {
     }
 
     isValidImageUrl = (source) => {
-        const validSource = source && (((source.uri && this.isUrl(source.uri)) || (typeof source === 'number')));
+        const validSource = source && source.uri && this.isUrl(source.uri);
         return validSource;
     }
 
+    mapAvatarQuality = (url, quality) => {
+        if (!quality || quality === AvatarQuality.medium) {
+            return url;
+        }
+        if (quality === AvatarQuality.low) {
+            return url.replace('.png', '_s64.png');
+        }
+        if (quality === AvatarQuality.high) {
+            return url.replace('.png', '_s512.png');
+        }
+
+        return url;
+    }
+
     mapStyleFromSize = (size) => {
         const { dimensions } = this.state;
         const avatarStyle = avatarSize(dimensions?.width || null).small;
@@ -458,13 +478,24 @@ export default class Avatar extends Component {
 
     render() {
         const {
-            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage
+            size, source, name, resizeMode, style, onPress, isShowLoading, loading, cached, extraPropsImage, quality
         } = this.props;
         const { hideSource } = this.state;
         const avatarStyle = this.mapStyleFromSize(size);
         const containerSize = this.extractSize(avatarStyle);
         const imageSource = ValueUtil.getImageSource(source);
         const showName = typeof imageSource === 'object' && Object.keys(imageSource).length === 0 && typeof imageSource !== 'number';
+        // add priority high for avatar
+        if (imageSource?.uri) {
+            imageSource.priority = 'high';
+            imageSource.uri = this.mapAvatarQuality(imageSource.uri, quality);
+            // if doest not have time query, set default cache time to 1 day
+            if (!imageSource.uri?.includes('?') && cached) {
+                const midnight = new Date().setHours(0, 0, 0, 0);
+                imageSource.uri = `${imageSource.uri}?time=${midnight}`;
+            }
+        }
+
         const inner = (
             <View style={[styles.container, containerSize, style]}>
                 {(showName || hideSource) ? this.renderShortName(name, avatarStyle, size) : <View />}
@@ -497,6 +528,7 @@ export default class Avatar extends Component {
 Avatar.propTypes = {
     name: PropTypes.string,
     resizeMode: PropTypes.string,
+    quality: PropTypes.oneOf(['low', 'medium', 'high']),
     size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'size8', 'size24', 'size36', 'size44', 'size48', 'size52', 'size56', 'size64', 'size72', 'size80', 'size88', 'size96',
         PropTypes.shape({
             width: PropTypes.number, height: PropTypes.number, borderRadius: PropTypes.number
@@ -515,5 +547,6 @@ Avatar.propTypes = {
 Avatar.defaultProps = {
     resizeMode: 'cover',
     cached: true,
-    scaleSize: false
+    scaleSize: false,
+    quality: 'medium',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/avatar",
-  "version": "0.0.62-beta",
+  "version": "0.0.66-beta",
   "private": false,
   "main": "index.js",
   "dependencies": {},

package/publish.sh

@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'