From 784813da908bd235b01c4531e6af90f4197755b4 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Sun, 19 Dec 2021 19:37:15 +0500 Subject: [PATCH 1/5] using external image ratio calculator --- .../autoHeightImage/autoHeightImage.tsx | 60 +++++++++++++++++++ .../postHtmlRenderer/postHtmlRenderer.tsx | 50 +--------------- 2 files changed, 62 insertions(+), 48 deletions(-) create mode 100644 src/components/autoHeightImage/autoHeightImage.tsx diff --git a/src/components/autoHeightImage/autoHeightImage.tsx b/src/components/autoHeightImage/autoHeightImage.tsx new file mode 100644 index 000000000..f92748e09 --- /dev/null +++ b/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 ( + + + + + ) + } \ No newline at end of file diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index adeac46bb..d4ae349c9 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/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 { @@ -214,47 +212,3 @@ export const PostHtmlRenderer = memo(({ - - 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 ( - - - - - ) - } \ No newline at end of file From 7d6f631833e33966f3f9d9e221a8cfc05aab0c79 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Sun, 19 Dec 2021 22:32:23 +0500 Subject: [PATCH 2/5] spaning table width to 100% --- src/components/postHtmlRenderer/postHtmlRenderer.tsx | 3 ++- src/components/postHtmlRenderer/postHtmlRendererStyles.ts | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index adeac46bb..0d0f2f3e0 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -197,7 +197,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 diff --git a/src/components/postHtmlRenderer/postHtmlRendererStyles.ts b/src/components/postHtmlRenderer/postHtmlRendererStyles.ts index 4c175faf9..8f2319a21 100644 --- a/src/components/postHtmlRenderer/postHtmlRendererStyles.ts +++ b/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, From 26a2d7b214bc6f309ae4c2019a3dc6c121076935 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Tue, 21 Dec 2021 20:36:43 +0500 Subject: [PATCH 3/5] added meta in addDraft and updateDraft --- ios/Podfile.lock | 27 +++++++++---------- src/providers/ecency/ecency.ts | 13 ++++++--- .../editor/container/editorContainer.tsx | 6 ++--- 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index e322b102b..105aee031 100644 --- a/ios/Podfile.lock +++ b/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 - diff --git a/src/providers/ecency/ecency.ts b/src/providers/ecency/ecency.ts index ec9bf236c..9c5182a64 100644 --- a/src/providers/ecency/ecency.ts +++ b/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 } 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 = extractMetadata(body, thumbIndex) + 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 = extractMetadata(body, thumbIndex) + const data = {id:draftId, title, body, tags, meta } const res = await ecencyApi.post(`/private-api/drafts-update`, data) if(res.data){ return res.data diff --git a/src/screens/editor/container/editorContainer.tsx b/src/screens/editor/container/editorContainer.tsx index 5305c751e..7ce4285e3 100644 --- a/src/screens/editor/container/editorContainer.tsx +++ b/src/screens/editor/container/editorContainer.tsx @@ -459,7 +459,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 +483,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 +495,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({ From dd32a427c84bbdb24bfcfde5cb90d5e46f7c058c Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 23 Dec 2021 12:10:50 +0500 Subject: [PATCH 4/5] fixed bug in editorSettingsModal causing reset of index --- src/providers/ecency/ecency.ts | 6 +++--- .../editor/children/editorSettingsModal.tsx | 15 ++++++++------- .../editor/children/thumbSelectionContent.tsx | 4 ++-- .../editor/children/thumbSelectionModal.tsx | 2 +- src/screens/editor/container/editorContainer.tsx | 16 ++++++++++++++-- src/screens/editor/screen/editorScreen.tsx | 1 + 6 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/providers/ecency/ecency.ts b/src/providers/ecency/ecency.ts index 9c5182a64..fac3363cb 100644 --- a/src/providers/ecency/ecency.ts +++ b/src/providers/ecency/ecency.ts @@ -5,7 +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 } from '../../utils/editor'; +import { extractMetadata, makeJsonMetadata } from '../../utils/editor'; export const getCurrencyRate = (currency) => api @@ -66,7 +66,7 @@ export const deleteDraft = async (draftId:string) => { */ export const addDraft = async (title:string, body:string, tags:string, thumbIndex:number ) => { try { - const meta = extractMetadata(body, thumbIndex) + 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; @@ -91,7 +91,7 @@ export const addDraft = async (title:string, body:string, tags:string, thumbInde */ export const updateDraft = async (draftId:string, title:string, body:string, tags:string, thumbIndex:number, ) => { try { - const meta = extractMetadata(body, thumbIndex) + 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){ diff --git a/src/screens/editor/children/editorSettingsModal.tsx b/src/screens/editor/children/editorSettingsModal.tsx index ed0a4820f..2aaaf9c46 100644 --- a/src/screens/editor/children/editorSettingsModal.tsx +++ b/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 = ( @@ -176,7 +177,7 @@ const EditorSettingsModal = forwardRef(({ {!isEdit && ( diff --git a/src/screens/editor/children/thumbSelectionContent.tsx b/src/screens/editor/children/thumbSelectionContent.tsx index cb7b6448f..f051fa212 100644 --- a/src/screens/editor/children/thumbSelectionContent.tsx +++ b/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 ( - + _onPress()} > + _onPress()} > (this.editorSettingsModalRef = componentRef)} body={fields.body} draftId={draftId} + thumbIndex={thumbIndex} isEdit={isEdit} isCommunityPost={selectedCommunity !== null} handleThumbSelection={this._handleOnThumbSelection} From 3edd3907f0d5433cb720743f91ef86ee67d5e05e Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 23 Dec 2021 13:11:02 +0500 Subject: [PATCH 5/5] fixed thumbnail not changing bug in draftScreen --- src/screens/drafts/screen/draftsScreen.js | 13 ++++++++++--- src/screens/editor/container/editorContainer.tsx | 2 +- src/utils/image.ts | 16 ++++++++++++++++ 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/screens/drafts/screen/draftsScreen.js b/src/screens/drafts/screen/draftsScreen.js index 31651ddc2..1b11284a9 100644 --- a/src/screens/drafts/screen/draftsScreen.js +++ b/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'; diff --git a/src/screens/editor/container/editorContainer.tsx b/src/screens/editor/container/editorContainer.tsx index d21acfe97..44a7ff123 100644 --- a/src/screens/editor/container/editorContainer.tsx +++ b/src/screens/editor/container/editorContainer.tsx @@ -100,7 +100,7 @@ class EditorContainer extends Component { // 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){ + if(_draft.meta && _draft.meta.image){ const urls = extractImageUrls({body}); const draftThumbIndex = urls.indexOf(_draft.meta.image[0]) this.setState({ diff --git a/src/utils/image.ts b/src/utils/image.ts index a4299a3e1..b28a0d960 100644 --- a/src/utils/image.ts +++ b/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';