diff --git a/package.json b/package.json index 6e9ae2b5c8..7272156c70 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "email-validator": "^2.0.4", "he": "^1.2.0", "lodash.chunk": "^4.2.0", + "lodash.isequal": "^4.5.0", "lodash.omit": "^4.5.0", "lru_map": "^0.4.1", "mobx": "^6.6.1", @@ -81,6 +82,7 @@ "@types/he": "^1.1.2", "@types/jest": "^26.0.23", "@types/lodash.chunk": "^4.2.7", + "@types/lodash.isequal": "^4.5.6", "@types/lodash.omit": "^4.5.7", "@types/react-native": "^0.67.3", "@types/react-test-renderer": "^17.0.1", diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 7cf712cc3b..77f2f42e14 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -18,6 +18,7 @@ import PasteInput, { import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useAnalytics} from '@segment/analytics-react-native' +import _isEqual from 'lodash.isequal' import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view' import {Autocomplete} from './Autocomplete' import {ExternalEmbed} from './ExternalEmbed' @@ -71,7 +72,9 @@ export const ComposePost = observer(function ComposePost({ const [extLink, setExtLink] = useState( undefined, ) - const [attemptedExtLinks, setAttemptedExtLinks] = useState([]) + const [suggestedExtLinks, setSuggestedExtLinks] = useState>( + new Set(), + ) const [isSelectingPhotos, setIsSelectingPhotos] = useState( imagesOpen || false, ) @@ -128,10 +131,10 @@ export const ComposePost = observer(function ComposePost({ if (extLink.isLoading && extLink.meta?.image && !extLink.localThumb) { downloadAndResize({ uri: extLink.meta.image, - width: 250, - height: 250, + width: 2000, + height: 2000, mode: 'contain', - maxSize: 100000, + maxSize: 1000000, timeout: 15e3, }) .catch(() => undefined) @@ -189,6 +192,9 @@ export const ComposePost = observer(function ComposePost({ setIsSelectingPhotos(false) } } + const onPressAddLinkCard = (uri: string) => { + setExtLink({uri, isLoading: true}) + } const onChangeText = (newText: string) => { setText(newText) @@ -200,19 +206,11 @@ export const ComposePost = observer(function ComposePost({ autocompleteView.setActive(false) } - if (!extLink && /\s$/.test(newText)) { - const ents = extractEntities(newText) - const entLink = ents - ?.filter( - ent => ent.type === 'link' && !attemptedExtLinks.includes(ent.value), - ) - .pop() // use last - if (entLink) { - setExtLink({ - uri: entLink.value, - isLoading: true, - }) - setAttemptedExtLinks([...attemptedExtLinks, entLink.value]) + if (!extLink) { + const ents = extractEntities(newText)?.filter(ent => ent.type === 'link') + const set = new Set(ents ? ents.map(e => e.value) : []) + if (!_isEqual(set, suggestedExtLinks)) { + setSuggestedExtLinks(set) } } } @@ -423,14 +421,29 @@ export const ComposePost = observer(function ComposePost({ )} {isSelectingPhotos && - localPhotos.photos != null && - selectedPhotos.length < 4 && ( - - )} + localPhotos.photos != null && + selectedPhotos.length < 4 ? ( + + ) : !extLink && + selectedPhotos.length === 0 && + suggestedExtLinks.size > 0 ? ( + + {Array.from(suggestedExtLinks).map(url => ( + onPressAddLinkCard(url)}> + + Add link card: {url} + + + ))} + + ) : null}