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

Attachment Modal: Support .jpeg, fix multiple quick media (#1281)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-15 21:50:32 +03:00
parent e374122d85
commit 06f4085aaa
5 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/middle/MiddleColumn.tsx
View File

@ -93,7 +93,7 @@ type DispatchProps = Pick<GlobalActions, (
const CLOSE_ANIMATION_DURATION = IS_SINGLE_COLUMN_LAYOUT ? 450 + ANIMATION_END_DELAY : undefined; const CLOSE_ANIMATION_DURATION = IS_SINGLE_COLUMN_LAYOUT ? 450 + ANIMATION_END_DELAY : undefined;
function canBeQuicklyUploaded(item: DataTransferItem) { function canBeQuicklyUploaded(item: DataTransferItem) {
return item.kind === 'file' && item.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.includes(item.type); return item.kind === 'file' && item.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.has(item.type);
} }
const MiddleColumn: FC<StateProps & DispatchProps> = ({ const MiddleColumn: FC<StateProps & DispatchProps> = ({
@ -189,7 +189,11 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
} }
const { items } = e.dataTransfer || {}; const { items } = e.dataTransfer || {};
const shouldDrawQuick = items && Array.from(items).every(canBeQuicklyUploaded); const shouldDrawQuick = items && Array.from(items)
// Filter unnecessary element for drag and drop images in Firefox (https://github.com/Ajaxy/telegram-tt/issues/49)
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#image
.filter((item) => item.type !== 'text/uri-list')
.every(canBeQuicklyUploaded);
setDropAreaState(shouldDrawQuick ? DropAreaState.QuickFile : DropAreaState.Document); setDropAreaState(shouldDrawQuick ? DropAreaState.QuickFile : DropAreaState.Document);
}, []); }, []);

2
src/components/middle/composer/AttachMenu.tsx
View File

@ -35,7 +35,7 @@ const AttachMenu: FC<OwnProps> = ({
const handleQuickSelect = useCallback(() => { const handleQuickSelect = useCallback(() => {
openSystemFilesDialog( openSystemFilesDialog(
CONTENT_TYPES_FOR_QUICK_UPLOAD, Array.from(CONTENT_TYPES_FOR_QUICK_UPLOAD).join(','),
(e) => handleFileSelect(e, true), (e) => handleFileSelect(e, true),
); );
}, [handleFileSelect]); }, [handleFileSelect]);

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

@ -64,7 +64,7 @@ const AttachmentModal: FC<OwnProps> = ({
const renderingAttachments = attachments.length ? attachments : prevAttachments; const renderingAttachments = attachments.length ? attachments : prevAttachments;
const isOpen = Boolean(attachments.length); const isOpen = Boolean(attachments.length);
const [isHovered, markHovered, unmarkHovered] = useFlag(); const [isHovered, markHovered, unmarkHovered] = useFlag();
const isQuick = renderingAttachments && renderingAttachments.every((a) => a.quick); const isQuick = Boolean(renderingAttachments && renderingAttachments.every((a) => a.quick));
const lang = useLang(); const lang = useLang();
const { const {
@ -129,11 +129,11 @@ const AttachmentModal: FC<OwnProps> = ({
if (files && files.length) { if (files && files.length) {
const newFiles = isQuick const newFiles = isQuick
? Array.from(files).filter((file) => { ? Array.from(files).filter((file) => {
return file.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.includes(file.type); return file.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.has(file.type);
}) })
: Array.from(files); : Array.from(files);
onFileAppend(newFiles, false); onFileAppend(newFiles, isQuick);
} }
}, [isQuick, onFileAppend, unmarkHovered]); }, [isQuick, onFileAppend, unmarkHovered]);

4
src/config.ts
View File

@ -118,7 +118,9 @@ export const BASE_EMOJI_KEYWORD_LANG = 'en';
export const MENU_TRANSITION_DURATION = 200; export const MENU_TRANSITION_DURATION = 200;
export const SLIDE_TRANSITION_DURATION = 450; export const SLIDE_TRANSITION_DURATION = 450;
export const CONTENT_TYPES_FOR_QUICK_UPLOAD = 'image/png,image/gif,image/jpeg,video/mp4,video/avi,video/quicktime'; export const CONTENT_TYPES_FOR_QUICK_UPLOAD = new Set([
'image/png', 'image/gif', 'image/jpeg', 'video/mp4', 'video/avi', 'video/quicktime',
]);
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
export const RE_LINK_TEMPLATE = '((ftp|https?):\\/\\/)?((www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6})\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)'; export const RE_LINK_TEMPLATE = '((ftp|https?):\\/\\/)?((www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6})\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)';

2
src/serviceWorker.ts
View File

@ -5,7 +5,7 @@ import { handlePush, handleNotificationClick, handleClientMessage } from './serv
declare const self: ServiceWorkerGlobalScope; declare const self: ServiceWorkerGlobalScope;
const ASSET_CACHE_PATTERN = /[0-9a-f]{20}.*\.(js|css|woff2?|svg|png|jpg|json|wasm)$/; const ASSET_CACHE_PATTERN = /[0-9a-f]{20}.*\.(js|css|woff2?|svg|png|jpg|jpeg|json|wasm)$/;
self.addEventListener('install', (e) => { self.addEventListener('install', (e) => {
if (DEBUG) { if (DEBUG) {