Populate blurHash when sending stories

ts/components/CompositionArea.stories.tsx

@@ -60,6 +60,8 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   quotedMessageProps: overrideProps.quotedMessageProps,
   onClickQuotedMessage: action('onClickQuotedMessage'),
   setQuotedMessage: action('setQuotedMessage'),
+  // MediaEditor
+  imageToBlurHash: async () => 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
   // MediaQualitySelector
   onSelectMediaQuality: action('onSelectMediaQuality'),
   shouldSendHighQualityAttachments: Boolean(

ts/components/CompositionArea.tsx

@@ -13,6 +13,7 @@ import type {
 import type { ErrorDialogAudioRecorderType } from '../state/ducks/audioRecorder';
 import { RecordingState } from '../state/ducks/audioRecorder';
 import type { HandleAttachmentsProcessingArgsType } from '../util/handleAttachmentsProcessing';
+import type { imageToBlurHash } from '../util/imageToBlurHash';
 import { Spinner } from './Spinner';
 import type {
   Props as EmojiButtonProps,
@@ -56,7 +57,6 @@ import {
   useKeyboardShortcuts,
 } from '../hooks/useKeyboardShortcuts';
 import { MediaEditor } from './MediaEditor';
-import { IMAGE_PNG } from '../types/MIME';
 import { isImageTypeSupported } from '../util/GoogleChrome';
 import * as KeyboardLayout from '../services/keyboardLayout';
 
@@ -98,6 +98,7 @@ export type OwnProps = Readonly<{
   groupAdmins: Array<ConversationType>;
   groupVersion?: 1 | 2;
   i18n: LocalizerType;
+  imageToBlurHash: typeof imageToBlurHash;
   isFetchingUUID?: boolean;
   isGroupV1AndDisabled?: boolean;
   isMissingMandatoryProfileSharing?: boolean;
@@ -174,6 +175,7 @@ export const CompositionArea = ({
   conversationId,
   i18n,
   onSendMessage,
+  imageToBlurHash,
   processAttachments,
   removeAttachment,
   theme,
@@ -594,12 +596,14 @@ export const CompositionArea = ({
         <MediaEditor
           i18n={i18n}
           imageSrc={attachmentToEdit.url}
+          imageToBlurHash={imageToBlurHash}
           isSending={false}
           onClose={() => setAttachmentToEdit(undefined)}
-          onDone={data => {
+          onDone={({ data, contentType, blurHash }) => {
             const newAttachment = {
               ...attachmentToEdit,
-              contentType: IMAGE_PNG,
+              contentType,
+              blurHash,
               data,
               size: data.byteLength,
             };

ts/components/MediaEditor.stories.tsx

@@ -28,6 +28,7 @@ const getDefaultProps = (): PropsType => ({
   onClose: action('onClose'),
   onDone: action('onDone'),
   isSending: false,
+  imageToBlurHash: async () => 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
 
   // StickerButtonProps
   installedPacks,

ts/components/MediaEditor.tsx

@@ -10,6 +10,8 @@ import { get, has, noop } from 'lodash';
 
 import type { LocalizerType } from '../types/Util';
 import { ThemeType } from '../types/Util';
+import type { MIMEType } from '../types/MIME';
+import { IMAGE_PNG } from '../types/MIME';
 import type { Props as StickerButtonProps } from './stickers/StickerButton';
 import type { ImageStateType } from '../mediaEditor/ImageStateType';
 
@@ -20,6 +22,7 @@ import { Slider } from './Slider';
 import { StickerButton } from './stickers/StickerButton';
 import { Theme } from '../util/theme';
 import { canvasToBytes } from '../util/canvasToBytes';
+import type { imageToBlurHash } from '../util/imageToBlurHash';
 import { useFabricHistory } from '../mediaEditor/useFabricHistory';
 import { usePortal } from '../hooks/usePortal';
 import { useUniqueId } from '../hooks/useUniqueId';
@@ -41,13 +44,21 @@ import { AddNewLines } from './conversation/AddNewLines';
 import { useConfirmDiscard } from '../hooks/useConfirmDiscard';
 import { Spinner } from './Spinner';
 
+export type MediaEditorResultType = Readonly<{
+  data: Uint8Array;
+  contentType: MIMEType;
+  blurHash: string;
+  caption?: string;
+}>;
+
 export type PropsType = {
   doneButtonLabel?: string;
   i18n: LocalizerType;
   imageSrc: string;
   isSending: boolean;
+  imageToBlurHash: typeof imageToBlurHash;
   onClose: () => unknown;
-  onDone: (data: Uint8Array, caption?: string | undefined) => unknown;
+  onDone: (result: MediaEditorResultType) => unknown;
 } & Pick<StickerButtonProps, 'installedPacks' | 'recentStickers'> &
   (
     | {
@@ -1115,6 +1126,7 @@ export const MediaEditor = ({
               setIsSaving(true);
 
               let data: Uint8Array;
+              let blurHash: string;
               try {
                 const renderFabricCanvas = await cloneFabricCanvas(
                   fabricCanvas
@@ -1151,6 +1163,12 @@ export const MediaEditor = ({
                 const renderedCanvas = renderFabricCanvas.toCanvasElement();
 
                 data = await canvasToBytes(renderedCanvas);
+
+                const blob = new Blob([data], {
+                  type: IMAGE_PNG,
+                });
+
+                blurHash = await props.imageToBlurHash(blob);
               } catch (err) {
                 onTryClose();
                 throw err;
@@ -1158,7 +1176,12 @@ export const MediaEditor = ({
                 setIsSaving(false);
               }
 
-              onDone(data, caption !== '' ? caption : undefined);
+              onDone({
+                contentType: IMAGE_PNG,
+                data,
+                caption: caption !== '' ? caption : undefined,
+                blurHash,
+              });
             }}
             theme={Theme.Dark}
             variant={ButtonVariant.Primary}

ts/components/StoryCreator.stories.tsx

@@ -37,6 +37,7 @@ export default {
       defaultValue: false,
     },
     i18n: { defaultValue: i18n },
+    imageToBlurHash: async () => 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
     installedPacks: {
       defaultValue: [],
     },

ts/components/StoryCreator.tsx

@@ -14,8 +14,9 @@ import type { LocalizerType } from '../types/Util';
 import type { Props as StickerButtonProps } from './stickers/StickerButton';
 import type { PropsType as SendStoryModalPropsType } from './SendStoryModal';
 import type { UUIDStringType } from '../types/UUID';
+import type { imageToBlurHash } from '../util/imageToBlurHash';
 
-import { IMAGE_JPEG, TEXT_ATTACHMENT } from '../types/MIME';
+import { TEXT_ATTACHMENT } from '../types/MIME';
 import { isVideoAttachment } from '../types/Attachment';
 import { SendStoryModal } from './SendStoryModal';
 
@@ -38,6 +39,7 @@ export type PropsType = {
     conversationIds: Array<string>,
     attachment: AttachmentType
   ) => unknown;
+  imageToBlurHash: typeof imageToBlurHash;
   processAttachment: (
     file: File
   ) => Promise<void | InMemoryAttachmentDraftType>;
@@ -80,6 +82,7 @@ export const StoryCreator = ({
   groupStories,
   hasFirstStoryPostExperience,
   i18n,
+  imageToBlurHash,
   installedPacks,
   isSending,
   linkPreview,
@@ -107,6 +110,7 @@ export const StoryCreator = ({
   const [draftAttachment, setDraftAttachment] = useState<
     AttachmentType | undefined
   >();
+  const [isReadyToSend, setIsReadyToSend] = useState(false);
   const [attachmentUrl, setAttachmentUrl] = useState<string | undefined>();
 
   useEffect(() => {
@@ -123,11 +127,16 @@ export const StoryCreator = ({
         return;
       }
 
+      setDraftAttachment(attachment);
       if (isVideoAttachment(attachment)) {
-        setDraftAttachment(attachment);
+        setAttachmentUrl(undefined);
+        setIsReadyToSend(true);
       } else if (attachment && has(attachment, 'data')) {
         url = URL.createObjectURL(new Blob([get(attachment, 'data')]));
         setAttachmentUrl(url);
+
+        // Needs editing in MediaEditor
+        setIsReadyToSend(false);
       }
     }
 
@@ -142,12 +151,17 @@ export const StoryCreator = ({
   }, [file, processAttachment]);
 
   useEffect(() => {
-    sendStoryModalOpenStateChanged(Boolean(draftAttachment));
+    if (draftAttachment === undefined) {
+      sendStoryModalOpenStateChanged(false);
+      setIsReadyToSend(false);
+    } else {
+      sendStoryModalOpenStateChanged(true);
+    }
   }, [draftAttachment, sendStoryModalOpenStateChanged]);
 
   return (
     <>
-      {draftAttachment && (
+      {draftAttachment && isReadyToSend && (
         <SendStoryModal
           draftAttachment={draftAttachment}
           candidateConversations={candidateConversations}
@@ -182,7 +196,7 @@ export const StoryCreator = ({
           toggleSignalConnectionsModal={toggleSignalConnectionsModal}
         />
       )}
-      {attachmentUrl && (
+      {draftAttachment && !isReadyToSend && attachmentUrl && (
         <MediaEditor
           doneButtonLabel={i18n('next2')}
           i18n={i18n}
@@ -192,13 +206,17 @@ export const StoryCreator = ({
           onClose={onClose}
           supportsCaption
           renderCompositionTextArea={renderCompositionTextArea}
-          onDone={(data, caption) => {
+          imageToBlurHash={imageToBlurHash}
+          onDone={({ contentType, data, blurHash, caption }) => {
             setDraftAttachment({
-              contentType: IMAGE_JPEG,
+              ...draftAttachment,
+              contentType,
               data,
               size: data.byteLength,
+              blurHash,
               caption,
             });
+            setIsReadyToSend(true);
           }}
           recentStickers={recentStickers}
         />
@@ -216,6 +234,7 @@ export const StoryCreator = ({
               textAttachment,
               size: textAttachment.text?.length || 0,
             });
+            setIsReadyToSend(true);
           }}
         />
       )}

ts/state/smart/CompositionArea.tsx

@@ -9,6 +9,7 @@ import { CompositionArea } from '../../components/CompositionArea';
 import type { StateType } from '../reducer';
 import { isConversationSMSOnly } from '../../util/isConversationSMSOnly';
 import { dropNull } from '../../util/dropNull';
+import { imageToBlurHash } from '../../util/imageToBlurHash';
 
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { selectRecentEmojis } from '../selectors/emojis';
@@ -89,6 +90,8 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     recordingState: state.audioRecorder.recordingState,
     // AttachmentsList
     draftAttachments,
+    // MediaEditor
+    imageToBlurHash,
     // MediaQualitySelector
     shouldSendHighQualityAttachments,
     // StagedLinkPreview

ts/state/smart/StoryCreator.tsx

@@ -26,6 +26,7 @@ import { getHasSetMyStoriesPrivacy } from '../selectors/items';
 import { getLinkPreview } from '../selectors/linkPreviews';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { processAttachment } from '../../util/processAttachment';
+import { imageToBlurHash } from '../../util/imageToBlurHash';
 import { useConversationsActions } from '../ducks/conversations';
 import { useGlobalModalActions } from '../ducks/globalModals';
 import { useLinkPreviewActions } from '../ducks/linkPreviews';
@@ -91,6 +92,7 @@ export function SmartStoryCreator(): JSX.Element | null {
       groupStories={groupStories}
       hasFirstStoryPostExperience={!hasSetMyStoriesPrivacy}
       i18n={i18n}
+      imageToBlurHash={imageToBlurHash}
       installedPacks={installedPacks}
       isSending={isSending}
       linkPreview={linkPreviewForSource(LinkPreviewSourceType.StoryCreator)}