Add explicit link-embed controls to the composer (#120)

* Add explicit link-embed controls

* Update the target rez/size of link embed thumbs

* Remove the alert before publishing without a link card

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",

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<apilib.ExternalEmbedDraft | undefined>(
     undefined,
   )
-  const [attemptedExtLinks, setAttemptedExtLinks] = useState<string[]>([])
+  const [suggestedExtLinks, setSuggestedExtLinks] = useState<Set<string>>(
+    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,
+        width: 2000,
-        height: 250,
+        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)) {
+    if (!extLink) {
-      const ents = extractEntities(newText)
+      const ents = extractEntities(newText)?.filter(ent => ent.type === 'link')
-      const entLink = ents
+      const set = new Set(ents ? ents.map(e => e.value) : [])
-        ?.filter(
+      if (!_isEqual(set, suggestedExtLinks)) {
-          ent => ent.type === 'link' && !attemptedExtLinks.includes(ent.value),
+        setSuggestedExtLinks(set)
-        )
-        .pop() // use last
-      if (entLink) {
-        setExtLink({
-          uri: entLink.value,
-          isLoading: true,
-        })
-        setAttemptedExtLinks([...attemptedExtLinks, entLink.value])
       }
     }
   }
@@ -424,13 +422,28 @@ export const ComposePost = observer(function ComposePost({
           </ScrollView>
           {isSelectingPhotos &&
           localPhotos.photos != null &&
-            selectedPhotos.length < 4 && (
+          selectedPhotos.length < 4 ? (
             <PhotoCarouselPicker
               selectedPhotos={selectedPhotos}
               onSelectPhotos={onSelectPhotos}
               localPhotos={localPhotos}
             />
-            )}
+          ) : !extLink &&
+            selectedPhotos.length === 0 &&
+            suggestedExtLinks.size > 0 ? (
+            <View style={s.mb5}>
+              {Array.from(suggestedExtLinks).map(url => (
+                <TouchableOpacity
+                  key={`suggested-${url}`}
+                  style={[pal.borderDark, styles.addExtLinkBtn]}
+                  onPress={() => onPressAddLinkCard(url)}>
+                  <Text>
+                    Add link card: <Text style={pal.link}>{url}</Text>
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          ) : null}
           <View style={[pal.border, styles.bottomBar]}>
             <TouchableOpacity
               testID="composerSelectPhotosButton"
@@ -572,6 +585,13 @@ const styles = StyleSheet.create({
     paddingLeft: 13,
     paddingRight: 8,
   },
+  addExtLinkBtn: {
+    borderWidth: 1,
+    borderRadius: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    marginBottom: 4,
+  },
   bottomBar: {
     flexDirection: 'row',
     paddingVertical: 10,

yarn.lock

@@ -2815,6 +2815,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.isequal@^4.5.6":
+  version "4.5.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.6.tgz#ff42a1b8e20caa59a97e446a77dc57db923bc02b"
+  integrity sha512-Ww4UGSe3DmtvLLJm2F16hDwEQSv7U0Rr8SujLUA2wHI2D2dm8kPu6Et+/y303LfjTIwSBKXB/YTUcAKpem/XEg==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.omit@^4.5.7":
   version "4.5.7"
   resolved "https://registry.yarnpkg.com/@types/lodash.omit/-/lodash.omit-4.5.7.tgz#2357ed2412b4164344e8ee41f85bb0b2920304ba"