Attachment Modal: Disable spoilers for GIF and MP3 (#2886)

This commit is contained in:
Alexander Zinchuk 2023-03-30 18:26:02 -05:00
parent 3f7471920f
commit 17e14172e5
3 changed files with 27 additions and 11 deletions

View File

@ -13,6 +13,7 @@ import type { Signal } from '../../../util/signals';
import { import {
BASE_EMOJI_KEYWORD_LANG, BASE_EMOJI_KEYWORD_LANG,
EDITABLE_INPUT_MODAL_ID, EDITABLE_INPUT_MODAL_ID,
GIF_MIME_TYPE,
SUPPORTED_AUDIO_CONTENT_TYPES, SUPPORTED_AUDIO_CONTENT_TYPES,
SUPPORTED_IMAGE_CONTENT_TYPES, SUPPORTED_IMAGE_CONTENT_TYPES,
SUPPORTED_VIDEO_CONTENT_TYPES, SUPPORTED_VIDEO_CONTENT_TYPES,
@ -328,7 +329,10 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
}, [attachments, onAttachmentsUpdate]); }, [attachments, onAttachmentsUpdate]);
const handleEnableSpoilers = useCallback(() => { const handleEnableSpoilers = useCallback(() => {
onAttachmentsUpdate(attachments.map((a) => ({ ...a, shouldSendAsSpoiler: true }))); onAttachmentsUpdate(attachments.map((a) => ({
...a,
shouldSendAsSpoiler: a.mimeType !== GIF_MIME_TYPE ? true : undefined,
})));
}, [attachments, onAttachmentsUpdate]); }, [attachments, onAttachmentsUpdate]);
const handleDisableSpoilers = useCallback(() => { const handleDisableSpoilers = useCallback(() => {
@ -381,6 +385,12 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
return [everyPhoto, everyVideo, everyAudio]; return [everyPhoto, everyVideo, everyAudio];
}, [renderingAttachments, isQuickGallery]); }, [renderingAttachments, isQuickGallery]);
const hasAnySpoilerable = useMemo(() => {
if (!renderingAttachments) return false;
return renderingAttachments.some((a) => a.mimeType !== GIF_MIME_TYPE
&& !SUPPORTED_AUDIO_CONTENT_TYPES.has(a.mimeType));
}, [renderingAttachments]);
if (!renderingAttachments) { if (!renderingAttachments) {
return undefined; return undefined;
} }
@ -430,7 +440,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
</MenuItem> </MenuItem>
)) ))
} }
{isSendingCompressed && ( {isSendingCompressed && hasAnySpoilerable && (
hasSpoiler ? ( hasSpoiler ? (
<MenuItem icon="spoiler-disable" onClick={handleDisableSpoilers}> <MenuItem icon="spoiler-disable" onClick={handleDisableSpoilers}>
{lang('Attachment.DisableSpoiler')} {lang('Attachment.DisableSpoiler')}

View File

@ -3,7 +3,7 @@ import React, { memo, useCallback, useMemo } from '../../../lib/teact/teact';
import type { FC } from '../../../lib/teact/teact'; import type { FC } from '../../../lib/teact/teact';
import type { ApiAttachment } from '../../../api/types'; import type { ApiAttachment } from '../../../api/types';
import { SUPPORTED_IMAGE_CONTENT_TYPES, SUPPORTED_VIDEO_CONTENT_TYPES } from '../../../config'; import { GIF_MIME_TYPE, SUPPORTED_IMAGE_CONTENT_TYPES, SUPPORTED_VIDEO_CONTENT_TYPES } from '../../../config';
import { getFileExtension } from '../../common/helpers/documentInfo'; import { getFileExtension } from '../../common/helpers/documentInfo';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import { formatMediaDuration } from '../../../util/dateFormat'; import { formatMediaDuration } from '../../../util/dateFormat';
@ -93,7 +93,9 @@ const AttachmentModalItem: FC<OwnProps> = ({
}, [attachment, displayType, index, onDelete]); }, [attachment, displayType, index, onDelete]);
const shouldSkipGrouping = displayType === 'file' || !shouldDisplayGrouped; const shouldSkipGrouping = displayType === 'file' || !shouldDisplayGrouped;
const shouldDisplaySpoiler = Boolean(displayType !== 'file' && attachment.shouldSendAsSpoiler); const canDisplaySpoilerButton = attachment.mimeType !== GIF_MIME_TYPE;
const shouldDisplaySpoiler = Boolean(displayType !== 'file' && canDisplaySpoilerButton
&& attachment.shouldSendAsSpoiler);
const shouldRenderOverlay = displayType !== 'file'; const shouldRenderOverlay = displayType !== 'file';
const rootClassName = buildClassName( const rootClassName = buildClassName(
@ -111,13 +113,15 @@ const AttachmentModalItem: FC<OwnProps> = ({
/> />
{shouldRenderOverlay && ( {shouldRenderOverlay && (
<div className={styles.overlay}> <div className={styles.overlay}>
<i {canDisplaySpoilerButton && (
className={buildClassName( <i
attachment.shouldSendAsSpoiler ? 'icon-spoiler-disable' : 'icon-spoiler', className={buildClassName(
styles.actionItem, attachment.shouldSendAsSpoiler ? 'icon-spoiler-disable' : 'icon-spoiler',
)} styles.actionItem,
onClick={handleSpoilerClick} )}
/> onClick={handleSpoilerClick}
/>
)}
{onDelete && ( {onDelete && (
<i className={buildClassName('icon-delete', styles.actionItem)} onClick={() => onDelete(index)} /> <i className={buildClassName('icon-delete', styles.actionItem)} onClick={() => onDelete(index)} />
)} )}

View File

@ -22,6 +22,7 @@ import {
import { LoadMoreDirection } from '../../../types'; import { LoadMoreDirection } from '../../../types';
import { import {
GIF_MIME_TYPE,
MAX_MEDIA_FILES_FOR_ALBUM, MAX_MEDIA_FILES_FOR_ALBUM,
MESSAGE_LIST_SLICE, MESSAGE_LIST_SLICE,
RE_TELEGRAM_LINK, RE_TELEGRAM_LINK,
@ -1537,6 +1538,7 @@ function getAttachmentType(attachment: ApiAttachment) {
shouldSendAsFile, mimeType, shouldSendAsFile, mimeType,
} = attachment; } = attachment;
if (shouldSendAsFile) return 'file'; if (shouldSendAsFile) return 'file';
if (mimeType === GIF_MIME_TYPE) return 'gif';
if (SUPPORTED_IMAGE_CONTENT_TYPES.has(mimeType) || SUPPORTED_VIDEO_CONTENT_TYPES.has(mimeType)) return 'media'; if (SUPPORTED_IMAGE_CONTENT_TYPES.has(mimeType) || SUPPORTED_VIDEO_CONTENT_TYPES.has(mimeType)) return 'media';
if (SUPPORTED_AUDIO_CONTENT_TYPES.has(mimeType)) return 'audio'; if (SUPPORTED_AUDIO_CONTENT_TYPES.has(mimeType)) return 'audio';
if (attachment.voice) return 'voice'; if (attachment.voice) return 'voice';