diff --git a/src/api/gramjs/methods/client.ts b/src/api/gramjs/methods/client.ts index 0a01f6a9a..1995e6571 100644 --- a/src/api/gramjs/methods/client.ts +++ b/src/api/gramjs/methods/client.ts @@ -15,7 +15,7 @@ import type { } from '../../types'; import { - DEBUG, DEBUG_GRAMJS, UPLOAD_WORKERS, IS_TEST, APP_VERSION, + DEBUG, DEBUG_GRAMJS, UPLOAD_WORKERS, IS_TEST, APP_VERSION, SUPPORTED_VIDEO_CONTENT_TYPES, VIDEO_MOV_TYPE, } from '../../../config'; import { onRequestPhoneNumber, onRequestCode, onRequestPassword, onRequestRegistration, @@ -56,6 +56,8 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs) // eslint-disable-next-line no-restricted-globals (self as any).isMovSupported = isMovSupported; + // Hacky way to update this set inside GramJS worker + if (isMovSupported) SUPPORTED_VIDEO_CONTENT_TYPES.add(VIDEO_MOV_TYPE); // eslint-disable-next-line no-restricted-globals (self as any).isWebmSupported = isWebmSupported; diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx index 2d0321244..28ea9f51e 100644 --- a/src/components/middle/composer/AttachmentModal.tsx +++ b/src/components/middle/composer/AttachmentModal.tsx @@ -14,6 +14,7 @@ import { } from '../../../config'; import { getFileExtension } from '../../common/helpers/documentInfo'; import captureEscKeyListener from '../../../util/captureEscKeyListener'; +import getFilesFromDataTransferItems from './helpers/getFilesFromDataTransferItems'; import usePrevious from '../../../hooks/usePrevious'; import useMentionTooltip from './hooks/useMentionTooltip'; @@ -154,12 +155,13 @@ const AttachmentModal: FC = ({ unmarkHovered(); }; - const handleFilesDrop = useCallback((e: React.DragEvent) => { + const handleFilesDrop = useCallback(async (e: React.DragEvent) => { e.preventDefault(); unmarkHovered(); - const { dataTransfer: { files } } = e; + const { dataTransfer } = e; + const files = await getFilesFromDataTransferItems(dataTransfer.items); if (files?.length) { const newFiles = isQuick ? Array.from(files).filter((file) => { diff --git a/src/components/middle/composer/helpers/getFilesFromDataTransferItems.ts b/src/components/middle/composer/helpers/getFilesFromDataTransferItems.ts index 846b02139..4a56471c7 100644 --- a/src/components/middle/composer/helpers/getFilesFromDataTransferItems.ts +++ b/src/components/middle/composer/helpers/getFilesFromDataTransferItems.ts @@ -45,5 +45,14 @@ export default async function getFilesFromDataTransferItems(dataTransferItems: D await Promise.all(entriesPromises); - return files; + return files.map(fixMovMime); +} + +// .mov MIME type not reported sometimes https://developer.mozilla.org/en-US/docs/Web/API/File/type#sect1 +function fixMovMime(file: File) { + const ext = file.name.split('.').pop()!; + if (!file.type && ext.toLowerCase() === 'mov') { + return new File([file], file.name, { type: 'video/quicktime' }); + } + return file; } diff --git a/src/util/environment.ts b/src/util/environment.ts index 47e5b2dad..f2adadbea 100644 --- a/src/util/environment.ts +++ b/src/util/environment.ts @@ -6,6 +6,7 @@ import { IS_TEST, SUPPORTED_VIDEO_CONTENT_TYPES, VIDEO_MOV_TYPE, + CONTENT_TYPES_WITH_PREVIEW, } from '../config'; export * from './environmentWebp'; @@ -75,9 +76,14 @@ export const LAYERS_ANIMATION_NAME = IS_ANDROID ? 'slide-fade' : IS_IOS ? 'slide const TEST_VIDEO = document.createElement('video'); // `canPlayType(VIDEO_MOV_TYPE)` returns false negative at least for macOS Chrome and iOS Safari -export const IS_MOV_SUPPORTED = true; +export const IS_MOV_SUPPORTED = Boolean( + TEST_VIDEO.canPlayType(VIDEO_MOV_TYPE).replace('no', '') || IS_IOS || IS_MAC_OS, +); -if (IS_MOV_SUPPORTED) SUPPORTED_VIDEO_CONTENT_TYPES.add(VIDEO_MOV_TYPE); +if (IS_MOV_SUPPORTED) { + SUPPORTED_VIDEO_CONTENT_TYPES.add(VIDEO_MOV_TYPE); + CONTENT_TYPES_WITH_PREVIEW.add(VIDEO_MOV_TYPE); +} export const IS_WEBM_SUPPORTED = Boolean(TEST_VIDEO.canPlayType('video/webm; codecs="vp9"').replace('no', '')) && !(IS_MAC_OS && IS_SAFARI); // Safari on MacOS has some issues with WebM