From 896a82653dcdcc02b5ea38a0d22e303bbfbb6291 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Thu, 12 Jun 2025 10:40:00 -0700
Subject: [PATCH] Fix backdrop for video stories in StoryCreator

---
 stylesheets/components/SendStoryModal.scss |  2 +-
 ts/components/StoryCreator.tsx             | 45 +++++++++++++++-------
 ts/types/Attachment.ts                     |  2 +-
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/stylesheets/components/SendStoryModal.scss b/stylesheets/components/SendStoryModal.scss
index 307b7e0927..fde7ce4878 100644
--- a/stylesheets/components/SendStoryModal.scss
+++ b/stylesheets/components/SendStoryModal.scss
@@ -310,7 +310,7 @@
   .SendStoryModal {
     &__story {
       border-radius: 12px;
-      backdrop-filter: blur(90px);
+      backdrop-filter: blur(45px);
       &__image {
         object-fit: contain;
       }
diff --git a/ts/components/StoryCreator.tsx b/ts/components/StoryCreator.tsx
index 1d5babfb93..4658a4ddbc 100644
--- a/ts/components/StoryCreator.tsx
+++ b/ts/components/StoryCreator.tsx
@@ -5,10 +5,7 @@ import React, { useEffect, useState } from 'react';
 import { get, has } from 'lodash';
 
 import { createPortal } from 'react-dom';
-import type {
-  AttachmentType,
-  InMemoryAttachmentDraftType,
-} from '../types/Attachment';
+import type { AttachmentType } from '../types/Attachment';
 import type { LinkPreviewSourceType } from '../types/LinkPreview';
 import type { LinkPreviewForUIType } from '../types/message/LinkPreviews';
 import type { LocalizerType, ThemeType } from '../types/Util';
@@ -26,6 +23,7 @@ import { SendStoryModal } from './SendStoryModal';
 import { MediaEditor } from './MediaEditor';
 import { TextStoryCreator } from './TextStoryCreator';
 import type { DraftBodyRanges } from '../types/BodyRange';
+import type { processAttachment } from '../util/processAttachment';
 
 function usePortalElement(testid: string): HTMLDivElement | null {
   const [element, setElement] = useState<HTMLDivElement | null>(null);
@@ -60,9 +58,7 @@ export type PropsType = {
     bodyRanges: DraftBodyRanges | undefined
   ) => unknown;
   imageToBlurHash: typeof imageToBlurHash;
-  processAttachment: (
-    file: File
-  ) => Promise<void | InMemoryAttachmentDraftType>;
+  processAttachment: typeof processAttachment;
   sendStoryModalOpenStateChanged: (isOpen: boolean) => unknown;
   theme: ThemeType;
 } & Pick<StickerButtonProps, 'installedPacks' | 'recentStickers'> &
@@ -169,22 +165,45 @@ export function StoryCreator({
         return;
       }
 
-      const attachment = await processAttachment(file);
-      if (!attachment || unmounted) {
+      const draft = await processAttachment(file, {
+        // Screenshot is used in `getStoryBackground`
+        generateScreenshot: true,
+        flags: null,
+      });
+      if (!draft || unmounted) {
         return;
       }
 
-      setDraftAttachment(attachment);
-      if (isVideoAttachment(attachment)) {
+      let attachment: AttachmentType = draft;
+      if (isVideoAttachment(draft)) {
+        if (
+          'screenshotData' in draft &&
+          draft.screenshotData &&
+          draft.screenshotContentType
+        ) {
+          url = URL.createObjectURL(
+            new Blob([draft.screenshotData], {
+              type: draft.screenshotContentType,
+            })
+          );
+          attachment = {
+            ...draft,
+            screenshot: {
+              contentType: draft.screenshotContentType,
+              url,
+            },
+          };
+        }
         setAttachmentUrl(undefined);
         setIsReadyToSend(true);
-      } else if (attachment && has(attachment, 'data')) {
-        url = URL.createObjectURL(new Blob([get(attachment, 'data')]));
+      } else if (draft && has(draft, 'data')) {
+        url = URL.createObjectURL(new Blob([get(draft, 'data')]));
         setAttachmentUrl(url);
 
         // Needs editing in MediaEditor
         setIsReadyToSend(false);
       }
+      setDraftAttachment(attachment);
     }
 
     void loadAttachment();
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index 1aa9681841..b073f7b87e 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -228,7 +228,7 @@ export type TextAttachmentType = {
 export type BaseAttachmentDraftType = {
   blurHash?: string;
   contentType: MIME.MIMEType;
-  screenshotContentType?: string;
+  screenshotContentType?: MIME.MIMEType;
   size: number;
   flags?: number;
 };