Fix backdrop for video stories in StoryCreator

This commit is contained in:
Fedor Indutny
2025-06-12 10:40:00 -07:00
committed by GitHub
parent c7eb8ff327
commit 896a82653d
3 changed files with 34 additions and 15 deletions

View File

@@ -310,7 +310,7 @@
.SendStoryModal { .SendStoryModal {
&__story { &__story {
border-radius: 12px; border-radius: 12px;
backdrop-filter: blur(90px); backdrop-filter: blur(45px);
&__image { &__image {
object-fit: contain; object-fit: contain;
} }

View File

@@ -5,10 +5,7 @@ import React, { useEffect, useState } from 'react';
import { get, has } from 'lodash'; import { get, has } from 'lodash';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import type { import type { AttachmentType } from '../types/Attachment';
AttachmentType,
InMemoryAttachmentDraftType,
} from '../types/Attachment';
import type { LinkPreviewSourceType } from '../types/LinkPreview'; import type { LinkPreviewSourceType } from '../types/LinkPreview';
import type { LinkPreviewForUIType } from '../types/message/LinkPreviews'; import type { LinkPreviewForUIType } from '../types/message/LinkPreviews';
import type { LocalizerType, ThemeType } from '../types/Util'; import type { LocalizerType, ThemeType } from '../types/Util';
@@ -26,6 +23,7 @@ import { SendStoryModal } from './SendStoryModal';
import { MediaEditor } from './MediaEditor'; import { MediaEditor } from './MediaEditor';
import { TextStoryCreator } from './TextStoryCreator'; import { TextStoryCreator } from './TextStoryCreator';
import type { DraftBodyRanges } from '../types/BodyRange'; import type { DraftBodyRanges } from '../types/BodyRange';
import type { processAttachment } from '../util/processAttachment';
function usePortalElement(testid: string): HTMLDivElement | null { function usePortalElement(testid: string): HTMLDivElement | null {
const [element, setElement] = useState<HTMLDivElement | null>(null); const [element, setElement] = useState<HTMLDivElement | null>(null);
@@ -60,9 +58,7 @@ export type PropsType = {
bodyRanges: DraftBodyRanges | undefined bodyRanges: DraftBodyRanges | undefined
) => unknown; ) => unknown;
imageToBlurHash: typeof imageToBlurHash; imageToBlurHash: typeof imageToBlurHash;
processAttachment: ( processAttachment: typeof processAttachment;
file: File
) => Promise<void | InMemoryAttachmentDraftType>;
sendStoryModalOpenStateChanged: (isOpen: boolean) => unknown; sendStoryModalOpenStateChanged: (isOpen: boolean) => unknown;
theme: ThemeType; theme: ThemeType;
} & Pick<StickerButtonProps, 'installedPacks' | 'recentStickers'> & } & Pick<StickerButtonProps, 'installedPacks' | 'recentStickers'> &
@@ -169,22 +165,45 @@ export function StoryCreator({
return; return;
} }
const attachment = await processAttachment(file); const draft = await processAttachment(file, {
if (!attachment || unmounted) { // Screenshot is used in `getStoryBackground`
generateScreenshot: true,
flags: null,
});
if (!draft || unmounted) {
return; return;
} }
setDraftAttachment(attachment); let attachment: AttachmentType = draft;
if (isVideoAttachment(attachment)) { 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); setAttachmentUrl(undefined);
setIsReadyToSend(true); setIsReadyToSend(true);
} else if (attachment && has(attachment, 'data')) { } else if (draft && has(draft, 'data')) {
url = URL.createObjectURL(new Blob([get(attachment, 'data')])); url = URL.createObjectURL(new Blob([get(draft, 'data')]));
setAttachmentUrl(url); setAttachmentUrl(url);
// Needs editing in MediaEditor // Needs editing in MediaEditor
setIsReadyToSend(false); setIsReadyToSend(false);
} }
setDraftAttachment(attachment);
} }
void loadAttachment(); void loadAttachment();

View File

@@ -228,7 +228,7 @@ export type TextAttachmentType = {
export type BaseAttachmentDraftType = { export type BaseAttachmentDraftType = {
blurHash?: string; blurHash?: string;
contentType: MIME.MIMEType; contentType: MIME.MIMEType;
screenshotContentType?: string; screenshotContentType?: MIME.MIMEType;
size: number; size: number;
flags?: number; flags?: number;
}; };