stream-chat-react-native-core 5.0.0-offline-support.12 → 5.0.0

package/src/components/{MessageInput/AudioAttachmentUploadPreview.tsx → Attachment/AudioAttachment.tsx}

@@ -4,12 +4,7 @@ import { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-nat
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import {
-  FileUpload,
-  MessageInputContextValue,
-  useMessageInputContext,
-  useTheme,
-} from '../../contexts';
+import { FileUpload, useTheme } from '../../contexts';
 import { Pause, Play } from '../../icons';
 import {
   PlaybackStatus,
@@ -18,7 +13,6 @@ import {
   VideoPayloadData,
   VideoProgressData,
 } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 
 dayjs.extend(duration);
@@ -34,7 +28,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     paddingRight: 8,
   },
-  fileContentContainer: { flexDirection: 'row' },
+  fileContentContainer: { flexDirection: 'row', paddingRight: 40 },
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
@@ -76,27 +70,17 @@ const styles = StyleSheet.create({
   },
 });
 
-export type AudioAttachmentUploadPreviewPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile'
-> & {
-  index: number;
-  item: FileUpload;
+export type AudioAttachmentPropsWithContext = {
+  item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, status?: boolean) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
-  testID: string;
+  testID?: string;
 };
 
-const AudioAttachmentUploadPreviewWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>,
-) => {
+const AudioAttachmentWithContext = (props: AudioAttachmentPropsWithContext) => {
   const soundRef = React.useRef<SoundReturnType | null>(null);
-  const { fileUploads, index, item, onLoad, onPlayPause, onProgress } = props;
+  const { item, onLoad, onPlayPause, onProgress } = props;
 
   const handleLoad = (payload: VideoPayloadData) => {
     onLoad(item.id, payload.duration);
@@ -212,11 +196,10 @@ const AudioAttachmentUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white },
+      colors: { accent_blue, black, grey_dark, static_black, static_white },
       messageInput: {
         fileUploadPreview: {
-          audioAttachmentUploadPreview: { progressControlView, progressDurationText, roundedView },
-          fileContainer,
+          audioAttachment: { progressControlView, progressDurationText, roundedView },
           fileContentContainer,
           filenameText,
           fileTextContainer,
@@ -236,91 +219,74 @@ const AudioAttachmentUploadPreviewWithContext = <
   const lastIndexOfDot = item.file.name.lastIndexOf('.');
 
   return (
-    <View
-      style={[
-        styles.fileContainer,
-        index === fileUploads.length - 1
-          ? {
-              marginBottom: 0,
-            }
-          : {},
-        {
-          borderColor: grey_whisper,
-          width: -16,
-        },
-        fileContainer,
-      ]}
-      testID='audio-attachment-upload-preview'
-    >
-      <View style={[styles.fileContentContainer, fileContentContainer]}>
-        <TouchableOpacity
-          accessibilityLabel='Play Pause Button'
-          onPress={() => handlePlayPause()}
+    <View style={[styles.fileContentContainer, fileContentContainer]}>
+      <TouchableOpacity
+        accessibilityLabel='Play Pause Button'
+        onPress={() => handlePlayPause()}
+        style={[
+          styles.roundedView,
+          roundedView,
+          { backgroundColor: static_white, shadowColor: black },
+        ]}
+      >
+        {item.paused ? (
+          <Play height={24} pathFill={static_black} width={24} />
+        ) : (
+          <Pause height={24} pathFill={static_black} width={24} />
+        )}
+      </TouchableOpacity>
+      <View style={[styles.fileTextContainer, fileTextContainer]}>
+        <Text
+          accessibilityLabel='File Name'
+          numberOfLines={1}
           style={[
-            styles.roundedView,
-            roundedView,
-            { backgroundColor: static_white, shadowColor: black },
+            styles.filenameText,
+            {
+              color: black,
+              width:
+                16 - // 16 = horizontal padding
+                40 - // 40 = file icon size
+                24 - // 24 = close icon size
+                24, // 24 = internal padding
+            },
+            I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
+            filenameText,
           ]}
         >
-          {item.paused ? (
-            <Play height={24} pathFill={static_black} width={24} />
-          ) : (
-            <Pause height={24} pathFill={static_black} width={24} />
+          {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}
+        </Text>
+        <View
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          {/* <ExpoSoundPlayer filePaused={!!item.paused} soundRef={soundRef} /> */}
+          {Sound.Player && (
+            <Sound.Player
+              onEnd={handleEnd}
+              onLoad={handleLoad}
+              onProgress={handleProgress}
+              paused={item.paused as boolean}
+              soundRef={soundRef}
+              testID='sound-player'
+              uri={item.file.uri}
+            />
           )}
-        </TouchableOpacity>
-        <View style={[styles.fileTextContainer, fileTextContainer]}>
-          <Text
-            accessibilityLabel='File Name'
-            numberOfLines={1}
-            style={[
-              styles.filenameText,
-              {
-                color: black,
-                width:
-                  16 - // 16 = horizontal padding
-                  40 - // 40 = file icon size
-                  24 - // 24 = close icon size
-                  24, // 24 = internal padding
-              },
-              I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
-              filenameText,
-            ]}
-          >
-            {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}
+          <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
+            {progressDuration}
           </Text>
-          <View
-            style={{
-              alignItems: 'center',
-              display: 'flex',
-              flexDirection: 'row',
-            }}
-          >
-            {/* <ExpoSoundPlayer filePaused={!!item.paused} soundRef={soundRef} /> */}
-            {Sound.Player && (
-              <Sound.Player
-                onEnd={handleEnd}
-                onLoad={handleLoad}
-                onProgress={handleProgress}
-                paused={item.paused as boolean}
-                soundRef={soundRef}
-                testID='sound-player'
-                uri={item.file.uri}
-              />
-            )}
-            <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
-              {progressDuration}
-            </Text>
-            <View style={[styles.progressControlView, progressControlView]}>
-              <ProgressControl
-                duration={item.duration as number}
-                filledColor={accent_blue}
-                onPlayPause={handlePlayPause}
-                onProgressDrag={handleProgressDrag}
-                progress={item.progress as number}
-                testID='progress-control'
-                width={110}
-              />
-            </View>
+          <View style={[styles.progressControlView, progressControlView]}>
+            <ProgressControl
+              duration={item.duration as number}
+              filledColor={accent_blue}
+              onPlayPause={handlePlayPause}
+              onProgressDrag={handleProgressDrag}
+              progress={item.progress as number}
+              testID='progress-control'
+              width={120}
+            />
           </View>
         </View>
       </View>
@@ -328,35 +294,20 @@ const AudioAttachmentUploadPreviewWithContext = <
   );
 };
 
-export type AudioAttachmentUploadPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>> & {
-  index: number;
-  item: FileUpload;
+export type AudioAttachmentProps = Partial<AudioAttachmentPropsWithContext> & {
+  item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, status?: boolean) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
   testID: string;
 };
 
 /**
- * AudioAttachmentUploadPreview
- * UI Component to preview the audio files set for upload
+ * AudioAttachment
+ * UI Component to preview the audio files
  */
-export const AudioAttachmentUploadPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioAttachmentUploadPreviewProps<StreamChatGenerics>,
-) => {
-  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
-
-  return (
-    <AudioAttachmentUploadPreviewWithContext
-      {...{ fileUploads, removeFile, uploadFile }}
-      {...props}
-    />
-  );
-};
+export const AudioAttachment = (props: AudioAttachmentProps) => (
+  <AudioAttachmentWithContext {...props} />
+);
 
-AudioAttachmentUploadPreview.displayName =
-  'AudioAttachmentUploadPreview{messageInput{autoAttachmentUploadPreview}}';
+AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';

package/src/components/Attachment/Card.tsx

@@ -309,6 +309,7 @@ export const Card = <
 
   return (
     <MemoizedCard
+      key={`${message?.id}${message?.updated_at}`} // press listeners must change on message update, updating key ensures this
       {...{
         additionalTouchableProps,
         CardCover,

package/src/components/Attachment/FileAttachment.tsx

@@ -103,6 +103,7 @@ const FileAttachmentWithContext = <
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
+            additionalInfo: { attachment },
             emitter: 'fileAttachment',
             event,
           });
@@ -111,6 +112,7 @@ const FileAttachmentWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            additionalInfo: { attachment },
             defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,
@@ -120,6 +122,7 @@ const FileAttachmentWithContext = <
       onPressIn={(event) => {
         if (onPressIn) {
           onPressIn({
+            additionalInfo: { attachment },
             defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -1,30 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { Attachment as AttachmentDefault } from './Attachment';
 
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
+
 import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { isAudioPackageAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const FILE_PREVIEW_HEIGHT = 60;
+
 const styles = StyleSheet.create({
   container: {
     padding: 4,
   },
+  fileContainer: {
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    height: FILE_PREVIEW_HEIGHT,
+    justifyContent: 'space-between',
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
 });
 
 export type FileAttachmentGroupPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {
+  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment' | 'AudioAttachment'> & {
     /**
      * The unique id for the message with file attachments
      */
@@ -35,15 +50,77 @@ export type FileAttachmentGroupPropsWithContext<
     }>;
   };
 
+type FilesToDisplayType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Attachment<StreamChatGenerics> & {
+  duration: number;
+  paused: boolean;
+  progress: number;
+};
+
 const FileAttachmentGroupWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { Attachment, files, messageId, styles: stylesProp = {} } = props;
+  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
+  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);
+
+  useEffect(() => {
+    setFilesToDisplay(files.map((file) => ({ ...file, duration: 0, paused: true, progress: 0 })));
+  }, [files]);
+
+  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
+  const onLoad = (index: string, duration: number) => {
+    setFilesToDisplay((prevFilesToDisplay) =>
+      prevFilesToDisplay.map((fileToDisplay, id) => ({
+        ...fileToDisplay,
+        duration: id.toString() === index ? duration : fileToDisplay.duration,
+      })),
+    );
+  };
+
+  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
+  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {
+    setFilesToDisplay((prevFileUploads) =>
+      prevFileUploads.map((fileUpload, id) => ({
+        ...fileUpload,
+        progress:
+          id.toString() === index
+            ? hasEnd
+              ? 1
+              : currentTime
+              ? currentTime / (fileUpload.duration as number)
+              : 0
+            : fileUpload.progress,
+      })),
+    );
+  };
+
+  // The handler which controls or sets the paused/played state of the audio.
+  const onPlayPause = (index: string, pausedStatus?: boolean) => {
+    if (pausedStatus === false) {
+      // If the status is false we set the audio with the index as playing and the others as paused.
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload, id) => ({
+          ...fileUpload,
+          paused: id.toString() === index ? false : true,
+        })),
+      );
+    } else {
+      // If the status is true we simply set all the audio's paused state as true.
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload) => ({
+          ...fileUpload,
+          paused: true,
+        })),
+      );
+    }
+  };
 
   const {
     theme: {
+      colors: { grey_whisper, white },
       messageSimple: {
         fileAttachmentGroup: { container },
       },
@@ -52,7 +129,7 @@ const FileAttachmentGroupWithContext = <
 
   return (
     <View style={[styles.container, container, stylesProp.container]}>
-      {files.map((file, index) => (
+      {filesToDisplay.map((file, index) => (
         <View
           key={`${messageId}-${index}`}
           style={[
@@ -60,7 +137,40 @@ const FileAttachmentGroupWithContext = <
             stylesProp.attachmentContainer,
           ]}
         >
-          <Attachment attachment={file} />
+          {file.type === 'audio' && isAudioPackageAvailable() ? (
+            <View
+              accessibilityLabel='audio-attachment-preview'
+              style={[
+                styles.fileContainer,
+                index === filesToDisplay.length - 1
+                  ? {
+                      marginBottom: 0,
+                    }
+                  : {},
+                {
+                  backgroundColor: white,
+                  borderColor: grey_whisper,
+                  width: -16,
+                },
+              ]}
+            >
+              <AudioAttachment
+                item={{
+                  duration: file.duration,
+                  file: { name: file.title as string, uri: file.asset_url },
+                  id: index.toString(),
+                  paused: file.paused,
+                  progress: file.progress,
+                }}
+                onLoad={onLoad}
+                onPlayPause={onPlayPause}
+                onProgress={onProgress}
+                testID='audio-attachment-preview'
+              />
+            </View>
+          ) : (
+            <Attachment attachment={file} />
+          )}
         </View>
       ))}
     </View>
@@ -74,9 +184,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const { files: prevFiles } = prevProps;
   const { files: nextFiles } = nextProps;
 
-  const filesEqual = prevFiles.length === nextFiles.length;
-
-  return filesEqual;
+  return prevFiles.length === nextFiles.length;
 };
 
 const MemoizedFileAttachmentGroup = React.memo(
@@ -98,7 +206,8 @@ export const FileAttachmentGroup = <
 
   const { files: contextFiles } = useMessageContext<StreamChatGenerics>();
 
-  const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();
+  const { Attachment = AttachmentDefault, AudioAttachment } =
+    useMessagesContext<StreamChatGenerics>();
 
   const files = propFiles || contextFiles;
 
@@ -108,6 +217,7 @@ export const FileAttachmentGroup = <
     <MemoizedFileAttachmentGroup
       {...{
         Attachment,
+        AudioAttachment,
         files,
         messageId,
       }}

package/src/components/Attachment/Gallery.tsx

@@ -62,6 +62,12 @@ const styles = StyleSheet.create({
     left: 4,
     position: 'absolute',
   },
+  imageLoadingIndicatorContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
   imageLoadingIndicatorStyle: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -77,7 +83,7 @@ const styles = StyleSheet.create({
 
 export type GalleryPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     | 'alignment'
@@ -135,9 +141,9 @@ const GalleryWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setImage,
-    setImages,
+    setMessages,
     setOverlay,
+    setSelectedMessage,
     threadList,
     videos,
     VideoThumbnail,
@@ -250,9 +256,9 @@ const GalleryWithContext = <
                   onPressIn={onPressIn}
                   preventPress={preventPress}
                   rowIndex={rowIndex}
-                  setImage={setImage}
-                  setImages={setImages}
+                  setMessages={setMessages}
                   setOverlay={setOverlay}
+                  setSelectedMessage={setSelectedMessage}
                   thumbnail={thumbnail}
                   VideoThumbnail={VideoThumbnail}
                 />
@@ -290,7 +296,7 @@ type GalleryThumbnailProps<
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
 > &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
@@ -316,9 +322,9 @@ const GalleryThumbnail = <
   onPressIn,
   preventPress,
   rowIndex,
-  setImage,
-  setImages,
+  setMessages,
   setOverlay,
+  setSelectedMessage,
   thumbnail,
   VideoThumbnail,
 }: GalleryThumbnailProps<StreamChatGenerics>) => {
@@ -336,11 +342,11 @@ const GalleryThumbnail = <
       // Added if-else to keep the logic readable, instead of DRY.
       // if - legacyImageViewerSwipeBehaviour is disabled
       // else - legacyImageViewerSwipeBehaviour is enabled
-      setImages([message]);
-      setImage({ messageId: message.id, url: thumbnail.url });
+      setMessages([message]);
+      setSelectedMessage({ messageId: message.id, url: thumbnail.url });
       setOverlay('gallery');
     } else if (legacyImageViewerSwipeBehaviour) {
-      setImage({ messageId: message?.id, url: thumbnail.url });
+      setSelectedMessage({ messageId: message?.id, url: thumbnail.url });
       setOverlay('gallery');
     }
   };
@@ -490,7 +496,7 @@ const GalleryImageThumbnail = <
             uri={thumbnail.url}
           />
           {isLoadingImage && (
-            <View style={{ position: 'absolute' }}>
+            <View style={[styles.imageLoadingIndicatorContainer]}>
               <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
             </View>
           )}
@@ -519,7 +525,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     videos: nextVideos,
   } = nextProps;
 
-  const messageEqual = prevMessage?.id === nextMessage?.id;
+  const messageEqual =
+    prevMessage?.id === nextMessage?.id &&
+    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
   if (!messageEqual) return false;
 
   const groupStylesEqual =
@@ -572,23 +580,25 @@ export const Gallery = <
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
     images: propImages,
+    message: propMessage,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
     onPressIn: propOnPressIn,
     preventPress: propPreventPress,
-    setImage: propSetImage,
     setOverlay: propSetOverlay,
+    setSelectedMessage: propSetSelectedMessage,
     threadList: propThreadList,
     videos: propVideos,
     VideoThumbnail: PropVideoThumbnail,
   } = props;
 
-  const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages, setSelectedMessage: contextSetSelectedMessage } =
+    useImageGalleryContext<StreamChatGenerics>();
   const {
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
     images: contextImages,
-    message,
+    message: contextMessage,
     onLongPress: contextOnLongPress,
     onPress: contextOnPress,
     onPressIn: contextOnPressIn,
@@ -607,6 +617,7 @@ export const Gallery = <
 
   const images = propImages || contextImages;
   const videos = propVideos || contextVideos;
+  const message = propMessage || contextMessage;
 
   if (!images.length && !videos.length) return null;
 
@@ -618,7 +629,7 @@ export const Gallery = <
   const onPress = propOnPress || contextOnPress;
   const preventPress =
     typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
-  const setImage = propSetImage || contextSetImage;
+  const setSelectedMessage = propSetSelectedMessage || contextSetSelectedMessage;
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
   const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
@@ -643,9 +654,9 @@ export const Gallery = <
         onPress,
         onPressIn,
         preventPress,
-        setImage,
-        setImages,
+        setMessages,
         setOverlay,
+        setSelectedMessage,
         threadList,
         videos,
         VideoThumbnail,