Merge branch 'development' into nt/proposal-link

ios/Podfile.lock

@@ -10,13 +10,13 @@ PODS:
     - AppCenter/Crashes (~> 4.0)
     - AppCenterReactNativeShared (~> 4.0)
     - React-Core
-  - AppCenter/Analytics (4.2.0):
+  - AppCenter/Analytics (4.3.0):
     - AppCenter/Core
-  - AppCenter/Core (4.2.0)
-  - AppCenter/Crashes (4.2.0):
+  - AppCenter/Core (4.3.0)
+  - AppCenter/Crashes (4.3.0):
     - AppCenter/Core
-  - AppCenterReactNativeShared (4.2.0):
-    - AppCenter/Core (= 4.2.0)
+  - AppCenterReactNativeShared (4.3.0):
+    - AppCenter/Core (= 4.3.0)
   - boost-for-react-native (1.63.0)
   - BugsnagReactNative (7.11.0):
     - React-Core
@@ -132,16 +132,16 @@ PODS:
   - lottie-react-native (4.0.3):
     - lottie-ios (~> 3.2.3)
     - React-Core
-  - MatomoTracker (7.4.1):
-    - MatomoTracker/Core (= 7.4.1)
-  - MatomoTracker/Core (7.4.1)
+  - MatomoTracker (7.5):
+    - MatomoTracker/Core (= 7.5)
+  - MatomoTracker/Core (7.5)
   - nanopb (1.30906.0):
     - nanopb/decode (= 1.30906.0)
     - nanopb/encode (= 1.30906.0)
   - nanopb/decode (1.30906.0)
   - nanopb/encode (1.30906.0)
   - PromisesObjC (1.2.12)
-  - Protobuf (3.17.0)
+  - Protobuf (3.19.1)
   - RCTRequired (0.63.4)
   - RCTTypeSafety (0.63.4):
     - FBLazyVector (= 0.63.4)
@@ -683,11 +683,11 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  AppCenter: 87ef6eefd8ade4df59e88951288587429f3dd2a5
+  AppCenter: 883369ab78427b0561c688158d689dfe1f993ea9
   appcenter-analytics: aa074250b2cb182d6f7d67d9c236dd4606673ab5
   appcenter-core: c97920e79eba2321a262d3733cb2a6f1097db539
   appcenter-crashes: 804ae51c5d1742ce20fdb6a68b3d06208a404ad5
-  AppCenterReactNativeShared: ef370308277adf71ec1586798b196e4cc35335ea
+  AppCenterReactNativeShared: a821c7287a296486889ef6339317b701febb0695
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BugsnagReactNative: a96bc039e0e4ec317a8b331714393d836ca60557
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
@@ -710,10 +710,10 @@ SPEC CHECKSUMS:
   libwebp: e90b9c01d99205d03b6bb8f2c8c415e5a4ef66f0
   lottie-ios: c058aeafa76daa4cf64d773554bccc8385d0150e
   lottie-react-native: 96361a9891cf651534ea35c4f85f33d4cf14ed13
-  MatomoTracker: 24a846c9d3aa76933183fe9d47fd62c9efa863fb
+  MatomoTracker: f6a967ef5f0477ce9dfdc9414cdf9cd557bd678c
   nanopb: 59317e09cf1f1a0af72f12af412d54edf52603fc
   PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
-  Protobuf: 7327d4444215b5f18e560a97f879ff5503c4581c
+  Protobuf: 3724efa50cb2846d7ccebc8691c574e85fd74471
   RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
   RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
   React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
@@ -773,4 +773,3 @@ SPEC CHECKSUMS:
 PODFILE CHECKSUM: 9c48318ea254e2c78005a7a0c2d8bfc14ddd783d
 
 COCOAPODS: 1.11.2
-

src/components/autoHeightImage/autoHeightImage.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { Image } from "react-native";
+import EStyleSheet from "react-native-extended-stylesheet";
+import FastImage from "react-native-fast-image";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+
+
+
+  export const AutoHeightImage = ({
+    contentWidth, 
+    imgUrl, 
+    isAnchored, 
+    onPress
+  }:{
+    contentWidth:number, 
+    imgUrl:string,
+    isAnchored:boolean,
+    onPress:()=>void,
+  }) => {
+
+
+    const [imgWidth, setImgWidth] = useState(contentWidth);
+    const [imgHeight, setImgHeight] = useState(imgWidth * (9/16))
+    const [onLoadCalled, setOnLoadCalled] = useState(false);
+
+    useEffect(() => {
+      _fetchImageBounds();
+    }, [])
+
+    const _fetchImageBounds = () => {
+        Image.getSize(imgUrl, (width, height)=>{
+          const newWidth = width < contentWidth ? width : contentWidth;
+          const newHeight = (height / width) * newWidth;
+          setImgHeight(newHeight);
+          setImgWidth(newWidth);
+        })
+    }
+
+    const imgStyle = {
+      width:imgWidth, 
+      height:imgHeight, 
+      backgroundColor: onLoadCalled ? 'transparent' : EStyleSheet.value('$primaryGray')
+    }
+
+    const _onLoad = () => {
+      setOnLoadCalled(true);
+    }
+
+    return (
+      <TouchableWithoutFeedback onPress={onPress} disabled={!isAnchored}>
+        <FastImage 
+          style={imgStyle}
+          source={{uri:imgUrl}}
+          resizeMode={FastImage.resizeMode.contain}
+          onLoad={_onLoad}
+        />
+      </TouchableWithoutFeedback>
+      
+    )
+  }

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -1,11 +1,9 @@
-import React, { memo, useState } from "react";
+import React, { memo } from "react";
 import RenderHTML, { CustomRendererProps, Element, TNode } from "react-native-render-html";
 import styles from "./postHtmlRendererStyles";
 import { LinkData, parseLinkData } from "./linkDataParser";
 import VideoThumb from "./videoThumb";
-import FastImage, { OnLoadEvent } from "react-native-fast-image";
-import { TouchableOpacity, TouchableWithoutFeedback } from "react-native-gesture-handler";
-import EStyleSheet from "react-native-extended-stylesheet";
+import { AutoHeightImage } from "../autoHeightImage/autoHeightImage";
 
 
 interface PostHtmlRendererProps {
@@ -200,7 +198,8 @@ export const PostHtmlRenderer = memo(({
         td:styles.td,
         blockquote:styles.blockquote,
         code:styles.code,
-        p:styles.p
+        p:styles.p,
+        table:styles.table,
       }}
       domVisitors={{
         onElement:_onElement
@@ -214,50 +213,3 @@ export const PostHtmlRenderer = memo(({
     />
    )
   }, (next, prev)=>next.body === prev.body)
-
-
-
-
-  const AutoHeightImage = ({
-    contentWidth, 
-    imgUrl, 
-    isAnchored, 
-    onPress
-  }:{
-    contentWidth:number, 
-    imgUrl:string,
-    isAnchored:boolean,
-    onPress:()=>void,
-  }) => {
-
-    const [imgWidth, setImgWidth] = useState(contentWidth);
-    const [imgHeight, setImgHeight] = useState(imgWidth * (9/16))
-    const [onLoadCalled, setOnLoadCalled] = useState(false);
-
-    const imgStyle = {
-      width:imgWidth, 
-      height:imgHeight, 
-      backgroundColor: onLoadCalled ? 'transparent' : EStyleSheet.value('$primaryGray')
-    }
-
-    const _onLoad = (evt:OnLoadEvent) => {
-      const {width, height} = evt.nativeEvent;
-      const newWidth = width < contentWidth ? width : contentWidth;
-      const newHeight = (height / width) * newWidth;
-      setImgHeight(newHeight);
-      setImgWidth(newWidth);
-      setOnLoadCalled(true);
-    }
-
-    return (
-      <TouchableWithoutFeedback onPress={onPress} disabled={!isAnchored}>
-        <FastImage 
-          style={imgStyle}
-          source={{uri:imgUrl}}
-          resizeMode={FastImage.resizeMode.contain}
-          onLoad={_onLoad}
-        />
-      </TouchableWithoutFeedback>
-      
-    )
-  }

src/components/postHtmlRenderer/postHtmlRendererStyles.ts

@@ -28,11 +28,11 @@ export default EStyleSheet.create({
   th:{
     flex: 1,
     justifyContent: 'center',
+    alignItems:'center',
     fontWeight: 'bold',
     color: '$primaryBlack',
     fontSize: 14,
     padding: 10,
-
   } as TextStyle,
   tr:{
     backgroundColor:'$darkIconColor',
@@ -45,6 +45,10 @@ export default EStyleSheet.create({
     padding:10,
     borderColor: '$tableBorderColor',
     backgroundColor: '$tableTrColor',
+    alignItems:'center',
+  } as ViewStyle,
+  table:{
+      width: '100%',
   } as ViewStyle,
   blockquote: {
     borderLeftWidth: 5,

src/providers/ecency/ecency.ts

@@ -5,6 +5,7 @@ import serverList from '../../config/serverListApi';
 import bugsnagInstance from '../../config/bugsnag';
 import { SERVER_LIST } from '../../constants/options/api';
 import { parsePost } from '../../utils/postParser';
+import { extractMetadata, makeJsonMetadata } from '../../utils/editor';
 
 export const getCurrencyRate = (currency) =>
   api
@@ -61,10 +62,12 @@ export const deleteDraft = async (draftId:string) => {
  * @params title
  * @params body
  * @params tags
+ * @param thumbIndex
  */
-export const addDraft = async (title:string, body:string, tags:string) => {
+export const addDraft = async (title:string, body:string, tags:string, thumbIndex:number ) => {
   try {
-    const data = { title, body, tags }
+    const meta = makeJsonMetadata(extractMetadata(body, thumbIndex), tags)
+    const data = { title, body, tags, meta }
     const res = await ecencyApi.post('/private-api/drafts-add', data)
     const { drafts } = res.data;
     if (drafts) {
@@ -84,10 +87,12 @@ export const addDraft = async (title:string, body:string, tags:string) => {
  * @params title
  * @params body
  * @params tags
+ * @params thumbIndex
  */
-export const updateDraft = async (draftId:string, title:string, body:string, tags:string) => {
+export const updateDraft = async (draftId:string, title:string, body:string, tags:string, thumbIndex:number, ) => {
   try {
-    const data = {id:draftId, title, body, tags }
+    const meta = makeJsonMetadata(extractMetadata(body, thumbIndex), tags)
+    const data = {id:draftId, title, body, tags, meta }
     const res = await ecencyApi.post(`/private-api/drafts-update`, data)
     if(res.data){
       return res.data

src/screens/drafts/screen/draftsScreen.js

@@ -5,7 +5,7 @@ import ScrollableTabView from 'react-native-scrollable-tab-view';
 
 // Utils
 import { postBodySummary } from '@ecency/render-helper';
-import { catchDraftImage } from '../../../utils/image';
+import { catchImageFromMetadata, catchDraftImage } from '../../../utils/image';
 import { getFormatedCreatedDate } from '../../../utils/time';
 
 // Components
@@ -15,6 +15,7 @@ import { BasicHeader, TabBar, DraftListItem, PostCardPlaceHolder } from '../../.
 import globalStyles from '../../../globalStyles';
 import styles from './draftStyles';
 import { OptionsModal } from '../../../components/atoms';
+import { jsonStringify } from '../../../utils/jsonUtils';
 
 const DraftsScreen = ({
   currentAccount,
@@ -40,8 +41,14 @@ const DraftsScreen = ({
   const _renderItem = (item, type) => {
     const tags = item.tags ? item.tags.split(/[ ,]+/) : [];
     const tag = tags[0] || '';
-    const image = catchDraftImage(item.body);
-    const thumbnail = catchDraftImage(item.body, 'match', true);
+
+    // if meta exist, get 1st image from meta else get 1st image from body
+    const image =
+      item.meta && item.meta.image ? catchImageFromMetadata(item.meta) : catchDraftImage(item.body);
+    const thumbnail =
+      item.meta && item.meta.image
+        ? catchImageFromMetadata(item.meta, 'match', true)
+        : catchDraftImage(item.body, 'match', true);
     const summary = postBodySummary({ ...item, last_update: item.modified }, 100);
     const isSchedules = type === 'schedules';
 

src/screens/editor/children/editorSettingsModal.tsx

@@ -35,6 +35,7 @@ export interface EditorSettingsModalRef {
 interface EditorSettingsModalProps {
   body:string;
   draftId:string;
+  thumbIndex:number,
   isEdit:boolean;
   isCommunityPost:boolean;
   handleRewardChange:(rewardType:string)=>void;
@@ -46,6 +47,7 @@ interface EditorSettingsModalProps {
 const EditorSettingsModal =  forwardRef(({
   body,
   draftId,
+  thumbIndex,
   isEdit,
   isCommunityPost,
   handleRewardChange,
@@ -57,17 +59,12 @@ const EditorSettingsModal =  forwardRef(({
 
     const [showModal, setShowModal] = useState(false);
     const [rewardTypeIndex, setRewardTypeIndex] = useState(0);
-    const [thumbIndex, setThumbIndex] = useState(0);
     const [scheduleLater, setScheduleLater] = useState(false)
     const [shouldReblog, setShouldReblog] = useState(false);
     const [scheduledFor, setScheduledFor] = useState('');
     const [disableDone, setDisableDone] = useState(false);
 
-    useEffect(() => {
-      if(handleThumbSelection){
-        handleThumbSelection(thumbIndex);
-      }
-    }, [thumbIndex])
+    // removed the useeffect causing index reset bug
 
 
     useEffect(()=>{
@@ -112,6 +109,10 @@ const EditorSettingsModal =  forwardRef(({
       setShowModal(false);
     }
  
+    // handle index change here instead of useeffetc
+    const _handleThumbIndexSelection = (index:number) => {
+      handleThumbSelection(index)
+    }
 
     const _renderContent = (
       <View style={{flex:1}}>
@@ -176,7 +177,7 @@ const EditorSettingsModal =  forwardRef(({
             <ThumbSelectionContent 
               body={body}
               thumbIndex={thumbIndex}
-              onThumbSelection={setThumbIndex}
+              onThumbSelection={_handleThumbIndexSelection}
             />
   
             {!isEdit && (

src/screens/editor/children/thumbSelectionContent.tsx

@@ -34,14 +34,14 @@ const ThumbSelectionContent = ({body, thumbIndex, onThumbSelection}: ThumbSelect
 
     //VIEW_RENDERERS
     const _renderImageItem = ({item, index}:{item:string, index:number}) => {
-        const _onPress = () => {
+        const _onPress = () => {  
             onThumbSelection(index);
         }
 
         const selectedStyle = index === thumbIndex ? styles.selectedStyle : null
 
         return (
-            <TouchableOpacity onPress={_onPress} >
+            <TouchableOpacity onPress={() => _onPress()} >
                 <FastImage 
                     source={{uri:item}}
                     style={{...styles.thumbStyle, ...selectedStyle}}

src/screens/editor/children/thumbSelectionModal.tsx

@@ -60,7 +60,7 @@ const ThumbSelectionModal = ({ onThumbSelection, thumbIndex }:ThumbSelectionModa
       const selectedStyle = index === thumbIndex ? styles.selectedStyle : null
 
     return (
-        <TouchableOpacity onPress={_onPress} >
+        <TouchableOpacity onPress={() => _onPress()} >
             <FastImage 
                 source={{uri:item}}
                 style={{...styles.thumbStyle, ...selectedStyle}}

src/screens/editor/container/editorContainer.tsx

@@ -38,6 +38,7 @@ import {
   makeJsonMetadataReply,
   makeJsonMetadataForUpdate,
   createPatch,
+  extractImageUrls,
 } from '../../../utils/editor';
 // import { generateSignature } from '../../../utils/image';
 // Component
@@ -75,7 +76,7 @@ class EditorContainer extends Component {
       sharedSnippetText: null,
       onLoadDraftPress: false,
       thumbIndex: 0,
-      shouldReblog:false
+      shouldReblog:false,
     };
   }
 
@@ -96,6 +97,17 @@ class EditorContainer extends Component {
 
       if (navigationParams.draft) {
         _draft = navigationParams.draft;
+        
+        // if meta exist on draft, get the index of 1st image in meta from images urls in body
+        const body = _draft.body
+        if(_draft.meta && _draft.meta.image){
+          const urls = extractImageUrls({body});
+          const draftThumbIndex = urls.indexOf(_draft.meta.image[0])
+          this.setState({
+            thumbIndex:draftThumbIndex,
+          })
+        }
+
         this.setState({
           draftId: _draft._id,
           isDraft: true,
@@ -459,7 +471,7 @@ class EditorContainer extends Component {
   };
 
   _saveDraftToDB = async (fields, silent = false) => {
-    const { isDraftSaved, draftId } = this.state;
+    const { isDraftSaved, draftId, thumbIndex } = this.state;
     const { currentAccount, dispatch, intl } = this.props;
 
     const beneficiaries = this._extractBeneficiaries();
@@ -483,7 +495,7 @@ class EditorContainer extends Component {
 
         //update draft is draftId is present
         if (draftId && draftField) {
-          await updateDraft(draftId, draftField.title, draftField.body, draftField.tags);
+          await updateDraft(draftId, draftField.title, draftField.body, draftField.tags, thumbIndex);
 
           if (this._isMounted) {
             this.setState({
@@ -495,7 +507,7 @@ class EditorContainer extends Component {
 
         //create new darft otherwise
         else if (draftField) {
-          const response = await addDraft(draftField.title, draftField.body, draftField.tags);
+          const response = await addDraft(draftField.title, draftField.body, draftField.tags, thumbIndex);
 
           if (this._isMounted) {
             this.setState({
@@ -1119,7 +1131,7 @@ class EditorContainer extends Component {
     } = this.state;
 
     const tags = navigation.state.params && navigation.state.params.tags;
-
+    
     return (
       <EditorScreen
         autoFocusText={autoFocusText}

src/screens/editor/screen/editorScreen.tsx

@@ -462,6 +462,7 @@ class EditorScreen extends Component {
           ref={(componentRef) => (this.editorSettingsModalRef = componentRef)}
           body={fields.body}
           draftId={draftId}
+          thumbIndex={thumbIndex}
           isEdit={isEdit}
           isCommunityPost={selectedCommunity !== null}
           handleThumbSelection={this._handleOnThumbSelection}

src/utils/image.ts

@@ -78,6 +78,22 @@ export const catchDraftImage = (body, format = 'match', thumbnail = false) => {
   return null;
 };
 
+// get the image from meta data
+export const catchImageFromMetadata = (meta, format = 'match', thumbnail = false) => {
+  format = whatOs === 'android' ? 'webp' : 'match';
+
+  if (meta && meta.image) {
+    const images = meta.image;
+    console.log('images : ',images);
+    
+    if (thumbnail) {
+      return proxifyImageSrc(images[0], 6, 5, format);
+    }
+    return proxifyImageSrc(images[0], 600, 500, format);
+  }
+  return null;
+};
+
 export const getResizedImage = (url, size = 600, format = 'match') => {
   //TODO: implement fallback onError, for imagehoster is down case
   format = whatOs === 'android' ? 'webp' : 'match';