Option to send photos as high quality
This commit is contained in:
parent
6c56d5a5f1
commit
01eabf9ec6
44 changed files with 1263 additions and 363 deletions
|
@ -31,6 +31,12 @@ import { MandatoryProfileSharingActions } from './conversation/MandatoryProfileS
|
|||
import { countStickers } from './stickers/lib';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import { EmojiPickDataType } from './emoji/EmojiPicker';
|
||||
import { AttachmentType, isImageAttachment } from '../types/Attachment';
|
||||
import { AttachmentList } from './conversation/AttachmentList';
|
||||
import { MediaQualitySelector } from './MediaQualitySelector';
|
||||
import { Quote, Props as QuoteProps } from './conversation/Quote';
|
||||
import { StagedLinkPreview } from './conversation/StagedLinkPreview';
|
||||
import { LinkPreviewWithDomain } from '../types/LinkPreview';
|
||||
|
||||
export type OwnProps = {
|
||||
readonly i18n: LocalizerType;
|
||||
|
@ -50,14 +56,24 @@ export type OwnProps = {
|
|||
setDisabled: (disabled: boolean) => void;
|
||||
setShowMic: (showMic: boolean) => void;
|
||||
setMicActive: (micActive: boolean) => void;
|
||||
attSlotRef: React.RefObject<HTMLDivElement>;
|
||||
reset: InputApi['reset'];
|
||||
resetEmojiResults: InputApi['resetEmojiResults'];
|
||||
}>;
|
||||
readonly micCellEl?: HTMLElement;
|
||||
readonly attCellEl?: HTMLElement;
|
||||
readonly attachmentListEl?: HTMLElement;
|
||||
readonly draftAttachments: Array<AttachmentType>;
|
||||
readonly shouldSendHighQualityAttachments: boolean;
|
||||
onChooseAttachment(): unknown;
|
||||
onAddAttachment(): unknown;
|
||||
onClickAttachment(): unknown;
|
||||
onCloseAttachment(): unknown;
|
||||
onClearAttachments(): unknown;
|
||||
onSelectMediaQuality(isHQ: boolean): unknown;
|
||||
readonly quotedMessageProps?: QuoteProps;
|
||||
onClickQuotedMessage(): unknown;
|
||||
setQuotedMessage(message: undefined): unknown;
|
||||
linkPreviewLoading: boolean;
|
||||
linkPreviewResult?: LinkPreviewWithDomain;
|
||||
onCloseLinkPreview(): unknown;
|
||||
};
|
||||
|
||||
export type Props = Pick<
|
||||
|
@ -103,9 +119,25 @@ const emptyElement = (el: HTMLElement) => {
|
|||
|
||||
export const CompositionArea = ({
|
||||
i18n,
|
||||
attachmentListEl,
|
||||
micCellEl,
|
||||
onChooseAttachment,
|
||||
// AttachmentList
|
||||
draftAttachments,
|
||||
onAddAttachment,
|
||||
onClearAttachments,
|
||||
onClickAttachment,
|
||||
onCloseAttachment,
|
||||
// StagedLinkPreview
|
||||
linkPreviewLoading,
|
||||
linkPreviewResult,
|
||||
onCloseLinkPreview,
|
||||
// Quote
|
||||
quotedMessageProps,
|
||||
onClickQuotedMessage,
|
||||
setQuotedMessage,
|
||||
// MediaQualitySelector
|
||||
onSelectMediaQuality,
|
||||
shouldSendHighQualityAttachments,
|
||||
// CompositionInput
|
||||
onSubmit,
|
||||
compositionApi,
|
||||
|
@ -198,9 +230,6 @@ export const CompositionArea = ({
|
|||
receivedPacks,
|
||||
}) > 0;
|
||||
|
||||
// A ref to grab a slot where backbone can insert link previews and attachments
|
||||
const attSlotRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
if (compositionApi) {
|
||||
// Using a React.MutableRefObject, so we need to reassign this prop.
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
@ -210,7 +239,6 @@ export const CompositionArea = ({
|
|||
setDisabled,
|
||||
setShowMic,
|
||||
setMicActive,
|
||||
attSlotRef,
|
||||
reset: () => {
|
||||
if (inputApiRef.current) {
|
||||
inputApiRef.current.reset();
|
||||
|
@ -251,27 +279,31 @@ export const CompositionArea = ({
|
|||
return noop;
|
||||
}, [micCellRef, micCellEl, large, dirty, showMic]);
|
||||
|
||||
React.useLayoutEffect(() => {
|
||||
const { current: attSlot } = attSlotRef;
|
||||
if (attSlot && attachmentListEl) {
|
||||
attSlot.appendChild(attachmentListEl);
|
||||
}
|
||||
const showMediaQualitySelector = draftAttachments.some(isImageAttachment);
|
||||
|
||||
return noop;
|
||||
}, [attSlotRef, attachmentListEl]);
|
||||
|
||||
const emojiButtonFragment = (
|
||||
<div className="module-composition-area__button-cell">
|
||||
<EmojiButton
|
||||
i18n={i18n}
|
||||
doSend={handleForceSend}
|
||||
onPickEmoji={insertEmoji}
|
||||
onClose={focusInput}
|
||||
recentEmojis={recentEmojis}
|
||||
skinTone={skinTone}
|
||||
onSetSkinTone={onSetSkinTone}
|
||||
/>
|
||||
</div>
|
||||
const leftHandSideButtonsFragment = (
|
||||
<>
|
||||
<div className="module-composition-area__button-cell">
|
||||
<EmojiButton
|
||||
i18n={i18n}
|
||||
doSend={handleForceSend}
|
||||
onPickEmoji={insertEmoji}
|
||||
onClose={focusInput}
|
||||
recentEmojis={recentEmojis}
|
||||
skinTone={skinTone}
|
||||
onSetSkinTone={onSetSkinTone}
|
||||
/>
|
||||
</div>
|
||||
{showMediaQualitySelector ? (
|
||||
<div className="module-composition-area__button-cell">
|
||||
<MediaQualitySelector
|
||||
i18n={i18n}
|
||||
isHighQuality={shouldSendHighQualityAttachments}
|
||||
onSelectQuality={onSelectMediaQuality}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
|
||||
const micButtonFragment = showMic ? (
|
||||
|
@ -480,15 +512,52 @@ export const CompositionArea = ({
|
|||
'module-composition-area__row',
|
||||
'module-composition-area__row--column'
|
||||
)}
|
||||
ref={attSlotRef}
|
||||
/>
|
||||
>
|
||||
{quotedMessageProps && (
|
||||
<div className="quote-wrapper">
|
||||
<Quote
|
||||
{...quotedMessageProps}
|
||||
i18n={i18n}
|
||||
onClick={onClickQuotedMessage}
|
||||
onClose={() => {
|
||||
// This one is for redux...
|
||||
setQuotedMessage(undefined);
|
||||
// and this is for conversation_view.
|
||||
clearQuotedMessage();
|
||||
}}
|
||||
withContentAbove
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{linkPreviewLoading && (
|
||||
<div className="preview-wrapper">
|
||||
<StagedLinkPreview
|
||||
{...(linkPreviewResult || {})}
|
||||
i18n={i18n}
|
||||
onClose={onCloseLinkPreview}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{draftAttachments.length ? (
|
||||
<div className="module-composition-area__attachment-list">
|
||||
<AttachmentList
|
||||
attachments={draftAttachments}
|
||||
i18n={i18n}
|
||||
onAddAttachment={onAddAttachment}
|
||||
onClickAttachment={onClickAttachment}
|
||||
onClose={onClearAttachments}
|
||||
onCloseAttachment={onCloseAttachment}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-composition-area__row',
|
||||
large ? 'module-composition-area__row--padded' : null
|
||||
)}
|
||||
>
|
||||
{!large ? emojiButtonFragment : null}
|
||||
{!large ? leftHandSideButtonsFragment : null}
|
||||
<div className="module-composition-area__input">
|
||||
<CompositionInput
|
||||
i18n={i18n}
|
||||
|
@ -523,7 +592,7 @@ export const CompositionArea = ({
|
|||
'module-composition-area__row--control-row'
|
||||
)}
|
||||
>
|
||||
{emojiButtonFragment}
|
||||
{leftHandSideButtonsFragment}
|
||||
{stickerButtonFragment}
|
||||
{attButton}
|
||||
{!dirty ? micButtonFragment : null}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue