ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Composer: Fix sending and playing .mov video (#1909)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-06-06 01:44:32 +04:00
parent 3ba1f50c3b
commit 99b5cceac3
4 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/gramjs/methods/client.ts
View File

@ -15,7 +15,7 @@ import type {
} from '../../types'; } from '../../types';
import { 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'; } from '../../../config';
import { import {
onRequestPhoneNumber, onRequestCode, onRequestPassword, onRequestRegistration, onRequestPhoneNumber, onRequestCode, onRequestPassword, onRequestRegistration,
@ -56,6 +56,8 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
// eslint-disable-next-line no-restricted-globals // eslint-disable-next-line no-restricted-globals
(self as any).isMovSupported = isMovSupported; (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 // eslint-disable-next-line no-restricted-globals
(self as any).isWebmSupported = isWebmSupported; (self as any).isWebmSupported = isWebmSupported;

6
src/components/middle/composer/AttachmentModal.tsx
View File

@ -14,6 +14,7 @@ import {
} from '../../../config'; } from '../../../config';
import { getFileExtension } from '../../common/helpers/documentInfo'; import { getFileExtension } from '../../common/helpers/documentInfo';
import captureEscKeyListener from '../../../util/captureEscKeyListener'; import captureEscKeyListener from '../../../util/captureEscKeyListener';
import getFilesFromDataTransferItems from './helpers/getFilesFromDataTransferItems';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
import useMentionTooltip from './hooks/useMentionTooltip'; import useMentionTooltip from './hooks/useMentionTooltip';
@ -154,12 +155,13 @@ const AttachmentModal: FC<OwnProps> = ({
unmarkHovered(); unmarkHovered();
}; };
const handleFilesDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => { const handleFilesDrop = useCallback(async (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault(); e.preventDefault();
unmarkHovered(); unmarkHovered();
const { dataTransfer: { files } } = e; const { dataTransfer } = e;
const files = await getFilesFromDataTransferItems(dataTransfer.items);
if (files?.length) { if (files?.length) {
const newFiles = isQuick const newFiles = isQuick
? Array.from(files).filter((file) => { ? Array.from(files).filter((file) => {

11
src/components/middle/composer/helpers/getFilesFromDataTransferItems.ts
View File

@ -45,5 +45,14 @@ export default async function getFilesFromDataTransferItems(dataTransferItems: D
await Promise.all(entriesPromises); 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;
} }

10
src/util/environment.ts
View File

@ -6,6 +6,7 @@ import {
IS_TEST, IS_TEST,
SUPPORTED_VIDEO_CONTENT_TYPES, SUPPORTED_VIDEO_CONTENT_TYPES,
VIDEO_MOV_TYPE, VIDEO_MOV_TYPE,
CONTENT_TYPES_WITH_PREVIEW,
} from '../config'; } from '../config';
export * from './environmentWebp'; 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'); const TEST_VIDEO = document.createElement('video');
// `canPlayType(VIDEO_MOV_TYPE)` returns false negative at least for macOS Chrome and iOS Safari // `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', '')) 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 && !(IS_MAC_OS && IS_SAFARI); // Safari on MacOS has some issues with WebM