stream-chat-react-native-core 5.34.1-beta.4 → 5.35.0-beta.1

package/src/components/MessageInput/MessageInput.tsx

@@ -118,6 +118,7 @@ type MessageInputPropsWithContext<
     | 'FileUploadPreview'
     | 'fileUploads'
     | 'giphyActive'
+    | 'hasImagePicker'
     | 'ImageUploadPreview'
     | 'imageUploads'
     | 'Input'
@@ -184,6 +185,7 @@ const MessageInputWithContext = <
     FileUploadPreview,
     fileUploads,
     giphyActive,
+    hasImagePicker,
     ImageUploadPreview,
     imageUploads,
     Input,
@@ -277,6 +279,9 @@ const MessageInputWithContext = <
   const fileUploadsLength = hasResetFiles ? fileUploads.length : 0;
   const imagesForInput = (!!thread && !!threadList) || (!thread && !threadList);
 
+  /**
+   * Reset the selected images when the component is unmounted.
+   */
   useEffect(() => {
     setSelectedImages([]);
     if (imageUploads.length) {
@@ -285,11 +290,15 @@ const MessageInputWithContext = <
     return () => setSelectedImages([]);
   }, []);
 
+  /**
+   * Reset the selected files when the component is unmounted.
+   */
   useEffect(() => {
     setSelectedFiles([]);
     if (fileUploads.length) {
       fileUploads.forEach((file) => removeFile(file.id));
     }
+
     return () => setSelectedFiles([]);
   }, []);
 
@@ -306,10 +315,10 @@ const MessageInputWithContext = <
   }, [fileUploadsLength, selectedFilesLength]);
 
   useEffect(() => {
-    if (imagesForInput === false && imageUploads.length) {
+    if (imagesForInput === false && imageUploadsLength) {
       imageUploads.forEach((image) => removeImage(image.id));
     }
-  }, [imagesForInput]);
+  }, [imagesForInput, imageUploadsLength]);
 
   const uploadImagesHandler = () => {
     const imageToUpload = selectedImages.find((selectedImage) => {
@@ -371,9 +380,9 @@ const MessageInputWithContext = <
   }, [selectedFilesLength]);
 
   useEffect(() => {
-    if (imagesForInput) {
+    if (imagesForInput && hasImagePicker) {
       if (imageUploadsLength < selectedImagesLength) {
-        /** User removed some image from seleted images within ImageUploadPreview. */
+        // /** User removed some image from seleted images within ImageUploadPreview. */
         const updatedSelectedImages = selectedImages.filter((selectedImage) => {
           const uploadedImage = imageUploads.find(
             (imageUpload) =>
@@ -400,36 +409,38 @@ const MessageInputWithContext = <
         );
       }
     }
-  }, [imageUploadsLength]);
+  }, [imageUploadsLength, hasImagePicker]);
 
   useEffect(() => {
-    if (fileUploadsLength < selectedFilesLength) {
-      /** User removed some video from seleted files within ImageUploadPreview. */
-      const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
-        const uploadedFile = fileUploads.find(
-          (fileUpload) =>
-            fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+    if (hasImagePicker) {
+      if (fileUploadsLength < selectedFilesLength) {
+        /** User removed some video from seleted files within ImageUploadPreview. */
+        const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
+          const uploadedFile = fileUploads.find(
+            (fileUpload) =>
+              fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+          );
+          return uploadedFile;
+        });
+        setSelectedFiles(updatedSelectedFiles);
+      } else if (fileUploadsLength > selectedFilesLength) {
+        /**
+         * User is editing some message which contains video attachments OR
+         * video attachment is added from custom image picker (other than the default bottom-sheet image picker)
+         * using `uploadNewFile` function from `MessageInputContext`.
+         **/
+        setSelectedFiles(
+          fileUploads.map((fileUpload) => ({
+            duration: fileUpload.file.duration,
+            mimeType: fileUpload.file.mimeType,
+            name: fileUpload.file.name,
+            size: fileUpload.file.size,
+            uri: fileUpload.file.uri,
+          })),
         );
-        return uploadedFile;
-      });
-      setSelectedFiles(updatedSelectedFiles);
-    } else if (fileUploadsLength > selectedFilesLength) {
-      /**
-       * User is editing some message which contains video attachments OR
-       * video attachment is added from custom image picker (other than the default bottom-sheet image picker)
-       * using `uploadNewFile` function from `MessageInputContext`.
-       **/
-      setSelectedFiles(
-        fileUploads.map((fileUpload) => ({
-          duration: fileUpload.file.duration,
-          mimeType: fileUpload.file.mimeType,
-          name: fileUpload.file.name,
-          size: fileUpload.file.size,
-          uri: fileUpload.file.uri,
-        })),
-      );
+      }
     }
-  }, [fileUploadsLength]);
+  }, [fileUploadsLength, hasImagePicker]);
 
   const editingExists = !!editing;
   useEffect(() => {
@@ -1012,6 +1023,7 @@ export const MessageInput = <
     FileUploadPreview,
     fileUploads,
     giphyActive,
+    hasImagePicker,
     ImageUploadPreview,
     imageUploads,
     Input,
@@ -1092,6 +1104,7 @@ export const MessageInput = <
         FileUploadPreview,
         fileUploads,
         giphyActive,
+        hasImagePicker,
         ImageUploadPreview,
         imageUploads,
         Input,

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -31,6 +31,7 @@ jest.mock('../../../native.ts', () => {
 
   return {
     isAudioPackageAvailable: jest.fn(() => true),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isImagePickerAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -6,7 +6,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": true,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -25,6 +25,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -40,14 +41,14 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#7A7A7A"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#7A7A7A"
     style={
       [
         {
@@ -56,40 +57,86 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4286216826,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
-      <RNSVGPath
-        clipRule={0}
-        d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
+      <RNSVGGroup
+        clipPath="id"
         fill={
           {
-            "payload": 4286216826,
+            "payload": 4278190080,
             "type": 0,
           }
         }
-        fillRule={0}
-        propList={
-          [
-            "fill",
-            "fillRule",
-          ]
-        }
-      />
+      >
+        <RNSVGPath
+          d="M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z"
+          fill={
+            {
+              "payload": 4286216826,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+      <RNSVGDefs>
+        <RNSVGClipPath
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          name="id"
+        >
+          <RNSVGRect
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            height={32}
+            matrix={
+              [
+                1,
+                0,
+                0,
+                1,
+                0.191406,
+                0,
+              ]
+            }
+            width={32}
+            x={0}
+            y={0}
+          />
+        </RNSVGClipPath>
+      </RNSVGDefs>
     </RNSVGGroup>
   </RNSVGSvgView>
 </View>
@@ -120,6 +167,7 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -135,14 +183,14 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#7A7A7A"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#7A7A7A"
     style={
       [
         {
@@ -151,40 +199,86 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4286216826,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
-      <RNSVGPath
-        clipRule={0}
-        d="M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z"
+      <RNSVGGroup
+        clipPath="id"
         fill={
           {
-            "payload": 4286216826,
+            "payload": 4278190080,
             "type": 0,
           }
         }
-        fillRule={0}
-        propList={
-          [
-            "fill",
-            "fillRule",
-          ]
-        }
-      />
+      >
+        <RNSVGPath
+          d="M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z"
+          fill={
+            {
+              "payload": 4286216826,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+      <RNSVGDefs>
+        <RNSVGClipPath
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          name="id"
+        >
+          <RNSVGRect
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            height={32}
+            matrix={
+              [
+                1,
+                0,
+                0,
+                1,
+                0.191406,
+                0,
+              ]
+            }
+            width={32}
+            x={0}
+            y={0}
+          />
+        </RNSVGClipPath>
+      </RNSVGDefs>
     </RNSVGGroup>
   </RNSVGSvgView>
 </View>

package/src/components/MessageInput/components/InputGiphySearch.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
-import { CircleClose, Lightning } from '../../../icons';
+import { CircleClose, GiphyLightning } from '../../../icons';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { AutoCompleteInput } from '../../AutoCompleteInput/AutoCompleteInput';
 import { useCountdown } from '../hooks/useCountdown';
@@ -23,9 +23,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 12,
     flexDirection: 'row',
-    height: 24,
     marginRight: 8,
     paddingHorizontal: 8,
+    paddingVertical: 4,
   },
   giphyText: {
     fontSize: 12,
@@ -80,7 +80,7 @@ export const InputGiphySearch = <
   return (
     <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
       <View style={[styles.giphyContainer, { backgroundColor: accent_blue }, giphyContainer]}>
-        <Lightning height={16} pathFill={white} width={16} />
+        <GiphyLightning fill={white} size={16} />
         <Text style={[styles.giphyText, { color: white }, giphyText]}>GIPHY</Text>
       </View>
 

package/src/components/MessageInput/components/NativeAttachmentPicker.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, LayoutRectangle, Pressable, StyleSheet } from 'react-native';
+
+import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { CameraSelectorIcon } from '../../AttachmentPicker/components/CameraSelectorIcon';
+import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelectorIcon';
+import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
+
+type NativeAttachmentPickerProps = {
+  onRequestedClose: () => void;
+  attachButtonLayoutRectangle?: LayoutRectangle;
+};
+
+const TOP_PADDING = 4;
+const ATTACH_MARGIN_BOTTOM = 4;
+
+export const NativeAttachmentPicker = ({
+  attachButtonLayoutRectangle,
+  onRequestedClose,
+}: NativeAttachmentPickerProps) => {
+  const size = attachButtonLayoutRectangle?.width ?? 0;
+  const attachButtonItemSize = 40;
+  const NUMBER_OF_BUTTONS = 3;
+  const {
+    theme: {
+      colors: { grey_whisper },
+      messageInput: {
+        nativeAttachmentPicker: {
+          buttonContainer,
+          buttonDimmerStyle: buttonDimmerStyleTheme,
+          container,
+        },
+      },
+    },
+  } = useTheme();
+  const {
+    hasFilePicker,
+    hasImagePicker,
+    pickAndUploadImageFromNativePicker,
+    pickFile,
+    takeAndUploadImage,
+  } = useMessageInputContext();
+
+  const popupHeight =
+    // the top padding
+    TOP_PADDING +
+    // take margins into account
+    ATTACH_MARGIN_BOTTOM * NUMBER_OF_BUTTONS +
+    // the size of the attachment icon items (same size as attach button * amount of attachment button types)
+    attachButtonItemSize * NUMBER_OF_BUTTONS;
+
+  const containerPopupStyle = {
+    borderTopEndRadius: size / 2,
+    // the popup should be rounded as the attach button
+    borderTopStartRadius: size / 2,
+    height: popupHeight,
+    // from the same side horizontal coordinate of the attach button
+    left: attachButtonLayoutRectangle?.x,
+    // we should show the popup right above the attach button and not top of it
+    top: (attachButtonLayoutRectangle?.y ?? 0) - popupHeight,
+    // the width of the popup should be the same as the attach button
+    width: size,
+  };
+
+  const elasticAnimRef = useRef(new Animated.Value(0.5)); // Initial value for scale: 0.5
+
+  useEffect(() => {
+    Animated.timing(elasticAnimRef.current, {
+      duration: 150,
+      easing: Easing.linear,
+      toValue: 1,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const buttonStyle = {
+    borderRadius: attachButtonItemSize / 2,
+    height: attachButtonItemSize,
+    width: attachButtonItemSize,
+  };
+
+  const buttonDimmerStyle = {
+    ...styles.attachButtonDimmer,
+    height: size,
+    // from the same side horizontal coordinate of the attach button
+    left: attachButtonLayoutRectangle?.x,
+    // we should show the popup right on top of the attach button
+    top: attachButtonLayoutRectangle?.y ?? 0 - popupHeight + size,
+    width: size,
+  };
+
+  const onClose = ({ onPressHandler }: { onPressHandler?: () => Promise<void> }) => {
+    if (onPressHandler) {
+      onPressHandler();
+    }
+    Animated.timing(elasticAnimRef.current, {
+      duration: 150,
+      easing: Easing.linear,
+      toValue: 0.2,
+      useNativeDriver: true,
+    }).start(onRequestedClose);
+  };
+
+  const buttons = [];
+
+  if (hasImagePicker) {
+    buttons.push({
+      icon: <ImageSelectorIcon />,
+      id: 'Image',
+      onPressHandler: pickAndUploadImageFromNativePicker,
+    });
+  }
+  if (hasFilePicker) {
+    buttons.push({ icon: <FileSelectorIcon />, id: 'File', onPressHandler: pickFile });
+  }
+  buttons.push({ icon: <CameraSelectorIcon />, id: 'Camera', onPressHandler: takeAndUploadImage });
+
+  return (
+    <>
+      <Pressable
+        onPress={() => {
+          onClose({});
+        }}
+        style={[styles.container, containerPopupStyle, container]}
+      >
+        {/* all the attach buttons */}
+        {buttons.map(({ icon, id, onPressHandler }) => (
+          <Pressable key={id} onPress={() => onClose({ onPressHandler })}>
+            <Animated.View
+              style={[
+                styles.buttonContainer,
+                buttonStyle,
+                {
+                  // temporary background color until we have theming
+                  backgroundColor: grey_whisper,
+                },
+                {
+                  transform: [
+                    {
+                      scaleY: elasticAnimRef.current,
+                    },
+                    {
+                      scaleX: elasticAnimRef.current,
+                    },
+                  ],
+                },
+                buttonContainer,
+              ]}
+            >
+              {icon}
+            </Animated.View>
+          </Pressable>
+        ))}
+      </Pressable>
+      {/* a square view with 50% opacity that semi hides the attach button */}
+      <Pressable onPress={() => onClose({})} style={[buttonDimmerStyle, buttonDimmerStyleTheme]} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  attachButtonDimmer: {
+    opacity: 0,
+    position: 'absolute',
+  },
+  buttonContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: ATTACH_MARGIN_BOTTOM,
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingTop: TOP_PADDING,
+    position: 'absolute',
+  },
+});

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -12,7 +12,7 @@ import {
   SoundReturnType,
   triggerHaptic,
 } from '../../../native';
-import { File } from '../../../types/types';
+import { File, FileTypes } from '../../../types/types';
 import { resampleWaveformData } from '../utils/audioSampling';
 import { normalizeAudioLevel } from '../utils/normalizeAudioLevel';
 
@@ -255,7 +255,7 @@ export const useAudioController = () => {
       duration: durationInSeconds,
       mimeType: 'audio/aac',
       name: `audio_recording_${date}.aac`,
-      type: 'voiceRecording',
+      type: FileTypes.VoiceRecording,
       uri: typeof recording !== 'string' ? (recording?.getURI() as string) : (recording as string),
       waveform_data: resampledWaveformData,
     };

package/src/components/MessageList/MessageList.tsx

@@ -52,7 +52,7 @@ import {
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
 const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
@@ -973,7 +973,7 @@ const MessageListWithContext = <
       if (!isMessageTypeDeleted && message.attachments) {
         return message.attachments.some(
           (attachment) =>
-            attachment.type === 'image' &&
+            attachment.type === FileTypes.Image &&
             !attachment.title_link &&
             !attachment.og_scrape_url &&
             (attachment.image_url || attachment.thumb_url),