feat: separated quote components
removed reference warning component since it is no longer neededpull/2757/head
William Grant
2 years ago
parent
a962ef2228
commit
1609ebfe32
@ -1,392 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import * as MIME from '../../../../../ts/types/MIME';
|
||||
import * as GoogleChrome from '../../../../../ts/util/GoogleChrome';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { noop } from 'lodash';
|
||||
import { useDisableDrag } from '../../../../hooks/useDisableDrag';
|
||||
import { useEncryptedFileFetch } from '../../../../hooks/useEncryptedFileFetch';
|
||||
import { PubKey } from '../../../../session/types';
|
||||
import {
|
||||
getSelectedConversationKey,
|
||||
isPublicGroupConversation,
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { ContactName } from '../../ContactName';
|
||||
import { MessageBody } from './MessageBody';
|
||||
import { useIsPrivate } from '../../../../hooks/useParamSelector';
|
||||
|
||||
export type QuotePropsWithoutListener = {
|
||||
attachment?: QuotedAttachmentType;
|
||||
sender: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
isFromMe: boolean;
|
||||
isIncoming: boolean;
|
||||
text: string | null;
|
||||
referencedMessageNotFound: boolean;
|
||||
};
|
||||
|
||||
export type QuotePropsWithListener = QuotePropsWithoutListener & {
|
||||
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||
};
|
||||
|
||||
export interface QuotedAttachmentType {
|
||||
contentType: MIME.MIMEType;
|
||||
fileName: string;
|
||||
/** Not included in protobuf */
|
||||
isVoiceMessage: boolean;
|
||||
thumbnail?: Attachment;
|
||||
}
|
||||
|
||||
interface Attachment {
|
||||
contentType: MIME.MIMEType;
|
||||
/** Not included in protobuf, and is loaded asynchronously */
|
||||
objectUrl?: string;
|
||||
}
|
||||
|
||||
function validateQuote(quote: QuotePropsWithoutListener): boolean {
|
||||
if (quote.text) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (quote.attachment) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getObjectUrl(thumbnail: Attachment | undefined): string | undefined {
|
||||
if (thumbnail && thumbnail.objectUrl) {
|
||||
return thumbnail.objectUrl;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
function getTypeLabel({
|
||||
contentType,
|
||||
isVoiceMessage,
|
||||
}: {
|
||||
contentType: MIME.MIMEType;
|
||||
isVoiceMessage: boolean;
|
||||
}): string | undefined {
|
||||
if (GoogleChrome.isVideoTypeSupported(contentType)) {
|
||||
return window.i18n('video');
|
||||
}
|
||||
if (GoogleChrome.isImageTypeSupported(contentType)) {
|
||||
return window.i18n('photo');
|
||||
}
|
||||
if (MIME.isAudio(contentType) && isVoiceMessage) {
|
||||
return window.i18n('voiceMessage');
|
||||
}
|
||||
if (MIME.isAudio(contentType)) {
|
||||
return window.i18n('audio');
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
export const QuoteIcon = (props: any) => {
|
||||
const { icon } = props;
|
||||
|
||||
return (
|
||||
<div className="module-quote__icon-container">
|
||||
<div className="module-quote__icon-container__inner">
|
||||
<div className="module-quote__icon-container__circle-background">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__icon-container__icon',
|
||||
`module-quote__icon-container__icon--${icon}`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const QuoteImage = (props: {
|
||||
handleImageErrorBound: () => void;
|
||||
url: string;
|
||||
contentType: string;
|
||||
icon?: string;
|
||||
}) => {
|
||||
const { url, icon, contentType, handleImageErrorBound } = props;
|
||||
const disableDrag = useDisableDrag();
|
||||
|
||||
const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
|
||||
const srcData = !loading ? urlToLoad : '';
|
||||
|
||||
const iconElement = icon ? (
|
||||
<div className="module-quote__icon-container__inner">
|
||||
<div className="module-quote__icon-container__circle-background">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__icon-container__icon',
|
||||
`module-quote__icon-container__icon--${icon}`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div className="module-quote__icon-container">
|
||||
<img
|
||||
src={srcData}
|
||||
alt={window.i18n('quoteThumbnailAlt')}
|
||||
onDragStart={disableDrag}
|
||||
onError={handleImageErrorBound}
|
||||
/>
|
||||
{iconElement}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const QuoteGenericFile = (
|
||||
props: Pick<QuotePropsWithoutListener, 'attachment' | 'isIncoming'>
|
||||
) => {
|
||||
const { attachment, isIncoming } = props;
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { fileName, contentType } = attachment;
|
||||
const isGenericFile =
|
||||
!GoogleChrome.isVideoTypeSupported(contentType) &&
|
||||
!GoogleChrome.isImageTypeSupported(contentType) &&
|
||||
!MIME.isAudio(contentType);
|
||||
|
||||
if (!isGenericFile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-quote__generic-file">
|
||||
<div className="module-quote__generic-file__icon" />
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__generic-file__text',
|
||||
isIncoming ? 'module-quote__generic-file__text--incoming' : null
|
||||
)}
|
||||
>
|
||||
{fileName}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const QuoteIconContainer = (
|
||||
props: Pick<QuotePropsWithoutListener, 'attachment'> & {
|
||||
handleImageErrorBound: () => void;
|
||||
imageBroken: boolean;
|
||||
}
|
||||
) => {
|
||||
const { attachment, imageBroken, handleImageErrorBound } = props;
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { contentType, thumbnail } = attachment;
|
||||
const objectUrl = getObjectUrl(thumbnail);
|
||||
|
||||
if (GoogleChrome.isVideoTypeSupported(contentType)) {
|
||||
return objectUrl && !imageBroken ? (
|
||||
<QuoteImage
|
||||
url={objectUrl}
|
||||
contentType={MIME.IMAGE_JPEG}
|
||||
icon="play"
|
||||
handleImageErrorBound={noop}
|
||||
/>
|
||||
) : (
|
||||
<QuoteIcon icon="movie" />
|
||||
);
|
||||
}
|
||||
if (GoogleChrome.isImageTypeSupported(contentType)) {
|
||||
return objectUrl && !imageBroken ? (
|
||||
<QuoteImage
|
||||
url={objectUrl}
|
||||
contentType={contentType}
|
||||
handleImageErrorBound={handleImageErrorBound}
|
||||
/>
|
||||
) : (
|
||||
<QuoteIcon icon="image" />
|
||||
);
|
||||
}
|
||||
if (MIME.isAudio(contentType)) {
|
||||
return <QuoteIcon icon="microphone" />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const QuoteText = (
|
||||
props: Pick<QuotePropsWithoutListener, 'text' | 'attachment' | 'isIncoming'>
|
||||
) => {
|
||||
const { text, attachment, isIncoming } = props;
|
||||
|
||||
const convoId = useSelector(getSelectedConversationKey);
|
||||
const isGroup = !useIsPrivate(convoId);
|
||||
|
||||
if (text) {
|
||||
return (
|
||||
<div
|
||||
dir="auto"
|
||||
className={classNames(
|
||||
'module-quote__primary__text',
|
||||
isIncoming ? 'module-quote__primary__text--incoming' : null
|
||||
)}
|
||||
>
|
||||
<MessageBody text={text} disableLinks={true} disableJumbomoji={true} isGroup={isGroup} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { contentType, isVoiceMessage } = attachment;
|
||||
|
||||
const typeLabel = getTypeLabel({ contentType, isVoiceMessage });
|
||||
if (typeLabel) {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__primary__type-label',
|
||||
isIncoming ? 'module-quote__primary__type-label--incoming' : null
|
||||
)}
|
||||
>
|
||||
{typeLabel}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
type QuoteAuthorProps = {
|
||||
author: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
isFromMe: boolean;
|
||||
isIncoming: boolean;
|
||||
showPubkeyForAuthor?: boolean;
|
||||
};
|
||||
|
||||
const QuoteAuthor = (props: QuoteAuthorProps) => {
|
||||
const { authorProfileName, author, authorName, isFromMe, isIncoming } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__primary__author',
|
||||
isIncoming ? 'module-quote__primary__author--incoming' : null
|
||||
)}
|
||||
>
|
||||
{isFromMe ? (
|
||||
window.i18n('you')
|
||||
) : (
|
||||
<ContactName
|
||||
pubkey={PubKey.shorten(author)}
|
||||
name={authorName}
|
||||
profileName={authorProfileName}
|
||||
compact={true}
|
||||
shouldShowPubkey={Boolean(props.showPubkeyForAuthor)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const QuoteReferenceWarning = (
|
||||
props: Pick<QuotePropsWithoutListener, 'isIncoming' | 'referencedMessageNotFound'>
|
||||
) => {
|
||||
const { isIncoming, referencedMessageNotFound } = props;
|
||||
|
||||
if (!referencedMessageNotFound) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__reference-warning',
|
||||
isIncoming
|
||||
? 'module-quote__reference-warning--incoming'
|
||||
: 'module-quote__reference-warning--outgoing'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__reference-warning__icon',
|
||||
isIncoming ? 'module-quote__reference-warning__icon--incoming' : null
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__reference-warning__text',
|
||||
isIncoming ? 'module-quote__reference-warning__text--incoming' : null
|
||||
)}
|
||||
>
|
||||
{window.i18n('originalMessageNotFound')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Quote = (props: QuotePropsWithListener) => {
|
||||
const [imageBroken, setImageBroken] = useState(false);
|
||||
const handleImageErrorBound = () => {
|
||||
setImageBroken(true);
|
||||
};
|
||||
|
||||
const isPublic = useSelector(isPublicGroupConversation);
|
||||
|
||||
if (!validateQuote(props)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { isIncoming, referencedMessageNotFound, attachment, text, onClick } = props;
|
||||
|
||||
return (
|
||||
<div className={classNames('module-quote-container')}>
|
||||
<div
|
||||
onClick={onClick}
|
||||
role="button"
|
||||
className={classNames(
|
||||
'module-quote',
|
||||
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
|
||||
!onClick ? 'module-quote--no-click' : null,
|
||||
referencedMessageNotFound ? 'module-quote--with-reference-warning' : null
|
||||
)}
|
||||
>
|
||||
<div className="module-quote__primary">
|
||||
<QuoteAuthor
|
||||
authorName={props.authorName}
|
||||
author={props.sender}
|
||||
authorProfileName={props.authorProfileName}
|
||||
isFromMe={props.isFromMe}
|
||||
isIncoming={props.isIncoming}
|
||||
showPubkeyForAuthor={isPublic}
|
||||
/>
|
||||
<QuoteGenericFile {...props} />
|
||||
<QuoteText isIncoming={isIncoming} text={text} attachment={attachment} />
|
||||
</div>
|
||||
<QuoteIconContainer
|
||||
attachment={attachment}
|
||||
handleImageErrorBound={handleImageErrorBound}
|
||||
imageBroken={imageBroken}
|
||||
/>
|
||||
</div>
|
||||
<QuoteReferenceWarning
|
||||
isIncoming={isIncoming}
|
||||
referencedMessageNotFound={referencedMessageNotFound}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,100 @@
|
||||
import React, { useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import * as MIME from '../../../../../types/MIME';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { isPublicGroupConversation } from '../../../../../state/selectors/conversations';
|
||||
import { QuoteAuthor } from './QuoteAuthor';
|
||||
import { QuoteGenericFile } from './QuoteGenericFile';
|
||||
import { QuoteText } from './QuoteText';
|
||||
import { QuoteIconContainer } from './QuoteIconContainer';
|
||||
|
||||
export type QuotePropsWithoutListener = {
|
||||
attachment?: QuotedAttachmentType;
|
||||
sender: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
isFromMe: boolean;
|
||||
isIncoming: boolean;
|
||||
text: string | null;
|
||||
referencedMessageNotFound: boolean;
|
||||
};
|
||||
|
||||
export type QuotePropsWithListener = QuotePropsWithoutListener & {
|
||||
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||
};
|
||||
|
||||
export interface Attachment {
|
||||
contentType: MIME.MIMEType;
|
||||
/** Not included in protobuf, and is loaded asynchronously */
|
||||
objectUrl?: string;
|
||||
}
|
||||
|
||||
export interface QuotedAttachmentType {
|
||||
contentType: MIME.MIMEType;
|
||||
fileName: string;
|
||||
/** Not included in protobuf */
|
||||
isVoiceMessage: boolean;
|
||||
thumbnail?: Attachment;
|
||||
}
|
||||
|
||||
function validateQuote(quote: QuotePropsWithoutListener): boolean {
|
||||
if (quote.text) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (quote.attachment) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export const Quote = (props: QuotePropsWithListener) => {
|
||||
const [imageBroken, setImageBroken] = useState(false);
|
||||
const handleImageErrorBound = () => {
|
||||
setImageBroken(true);
|
||||
};
|
||||
|
||||
const isPublic = useSelector(isPublicGroupConversation);
|
||||
|
||||
if (!validateQuote(props)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { isIncoming, attachment, text, onClick } = props;
|
||||
|
||||
return (
|
||||
<div className={classNames('module-quote-container')}>
|
||||
<div
|
||||
onClick={onClick}
|
||||
role="button"
|
||||
className={classNames(
|
||||
'module-quote',
|
||||
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
|
||||
!onClick ? 'module-quote--no-click' : null
|
||||
)}
|
||||
>
|
||||
<div className="module-quote__primary">
|
||||
<QuoteAuthor
|
||||
authorName={props.authorName}
|
||||
author={props.sender}
|
||||
authorProfileName={props.authorProfileName}
|
||||
isFromMe={props.isFromMe}
|
||||
isIncoming={props.isIncoming}
|
||||
showPubkeyForAuthor={isPublic}
|
||||
/>
|
||||
<QuoteGenericFile {...props} />
|
||||
<QuoteText isIncoming={isIncoming} text={text} attachment={attachment} />
|
||||
</div>
|
||||
<QuoteIconContainer
|
||||
attachment={attachment}
|
||||
handleImageErrorBound={handleImageErrorBound}
|
||||
imageBroken={imageBroken}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
import classNames from 'classnames';
|
||||
import React = require('react');
|
||||
import { ContactName } from '../../../ContactName';
|
||||
import { PubKey } from '../../../../../session/types';
|
||||
|
||||
type QuoteAuthorProps = {
|
||||
author: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
isFromMe: boolean;
|
||||
isIncoming: boolean;
|
||||
showPubkeyForAuthor?: boolean;
|
||||
};
|
||||
|
||||
export const QuoteAuthor = (props: QuoteAuthorProps) => {
|
||||
const { authorProfileName, author, authorName, isFromMe, isIncoming } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__primary__author',
|
||||
isIncoming ? 'module-quote__primary__author--incoming' : null
|
||||
)}
|
||||
>
|
||||
{isFromMe ? (
|
||||
window.i18n('you')
|
||||
) : (
|
||||
<ContactName
|
||||
pubkey={PubKey.shorten(author)}
|
||||
name={authorName}
|
||||
profileName={authorProfileName}
|
||||
compact={true}
|
||||
shouldShowPubkey={Boolean(props.showPubkeyForAuthor)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { MIME } from '../../../../../types';
|
||||
import { GoogleChrome } from '../../../../../util';
|
||||
import { QuotePropsWithoutListener } from './Quote';
|
||||
|
||||
export const QuoteGenericFile = (
|
||||
props: Pick<QuotePropsWithoutListener, 'attachment' | 'isIncoming'>
|
||||
) => {
|
||||
const { attachment, isIncoming } = props;
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { fileName, contentType } = attachment;
|
||||
const isGenericFile =
|
||||
!GoogleChrome.isVideoTypeSupported(contentType) &&
|
||||
!GoogleChrome.isImageTypeSupported(contentType) &&
|
||||
!MIME.isAudio(contentType);
|
||||
|
||||
if (!isGenericFile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-quote__generic-file">
|
||||
<div className="module-quote__generic-file__icon" />
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__generic-file__text',
|
||||
isIncoming ? 'module-quote__generic-file__text--incoming' : null
|
||||
)}
|
||||
>
|
||||
{fileName}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
export const QuoteIcon = (props: any) => {
|
||||
const { icon } = props;
|
||||
|
||||
return (
|
||||
<div className="module-quote__icon-container">
|
||||
<div className="module-quote__icon-container__inner">
|
||||
<div className="module-quote__icon-container__circle-background">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__icon-container__icon',
|
||||
`module-quote__icon-container__icon--${icon}`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { Attachment, QuotePropsWithoutListener } from './Quote';
|
||||
import { GoogleChrome } from '../../../../../util';
|
||||
import { MIME } from '../../../../../types';
|
||||
|
||||
import { noop } from 'lodash';
|
||||
import { QuoteImage } from './QuoteImage';
|
||||
import { QuoteIcon } from './QuoteIcon';
|
||||
|
||||
function getObjectUrl(thumbnail: Attachment | undefined): string | undefined {
|
||||
if (thumbnail && thumbnail.objectUrl) {
|
||||
return thumbnail.objectUrl;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
export const QuoteIconContainer = (
|
||||
props: Pick<QuotePropsWithoutListener, 'attachment'> & {
|
||||
handleImageErrorBound: () => void;
|
||||
imageBroken: boolean;
|
||||
}
|
||||
) => {
|
||||
const { attachment, imageBroken, handleImageErrorBound } = props;
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { contentType, thumbnail } = attachment;
|
||||
const objectUrl = getObjectUrl(thumbnail);
|
||||
|
||||
if (GoogleChrome.isVideoTypeSupported(contentType)) {
|
||||
return objectUrl && !imageBroken ? (
|
||||
<QuoteImage
|
||||
url={objectUrl}
|
||||
contentType={MIME.IMAGE_JPEG}
|
||||
icon="play"
|
||||
handleImageErrorBound={noop}
|
||||
/>
|
||||
) : (
|
||||
<QuoteIcon icon="movie" />
|
||||
);
|
||||
}
|
||||
if (GoogleChrome.isImageTypeSupported(contentType)) {
|
||||
return objectUrl && !imageBroken ? (
|
||||
<QuoteImage
|
||||
url={objectUrl}
|
||||
contentType={contentType}
|
||||
handleImageErrorBound={handleImageErrorBound}
|
||||
/>
|
||||
) : (
|
||||
<QuoteIcon icon="image" />
|
||||
);
|
||||
}
|
||||
if (MIME.isAudio(contentType)) {
|
||||
return <QuoteIcon icon="microphone" />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
|
||||
import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
|
||||
|
||||
export const QuoteImage = (props: {
|
||||
handleImageErrorBound: () => void;
|
||||
url: string;
|
||||
contentType: string;
|
||||
icon?: string;
|
||||
}) => {
|
||||
const { url, icon, contentType, handleImageErrorBound } = props;
|
||||
const disableDrag = useDisableDrag();
|
||||
|
||||
const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
|
||||
const srcData = !loading ? urlToLoad : '';
|
||||
|
||||
const iconElement = icon ? (
|
||||
<div className="module-quote__icon-container__inner">
|
||||
<div className="module-quote__icon-container__circle-background">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__icon-container__icon',
|
||||
`module-quote__icon-container__icon--${icon}`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div className="module-quote__icon-container">
|
||||
<img
|
||||
src={srcData}
|
||||
alt={window.i18n('quoteThumbnailAlt')}
|
||||
onDragStart={disableDrag}
|
||||
onError={handleImageErrorBound}
|
||||
/>
|
||||
{iconElement}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { QuotePropsWithoutListener } from './Quote';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getSelectedConversationKey } from '../../../../../state/selectors/conversations';
|
||||
import { useIsPrivate } from '../../../../../hooks/useParamSelector';
|
||||
import classNames from 'classnames';
|
||||
import { MessageBody } from '../MessageBody';
|
||||
import { MIME } from '../../../../../types';
|
||||
import { GoogleChrome } from '../../../../../util';
|
||||
|
||||
function getTypeLabel({
|
||||
contentType,
|
||||
isVoiceMessage,
|
||||
}: {
|
||||
contentType: MIME.MIMEType;
|
||||
isVoiceMessage: boolean;
|
||||
}): string | undefined {
|
||||
if (GoogleChrome.isVideoTypeSupported(contentType)) {
|
||||
return window.i18n('video');
|
||||
}
|
||||
if (GoogleChrome.isImageTypeSupported(contentType)) {
|
||||
return window.i18n('photo');
|
||||
}
|
||||
if (MIME.isAudio(contentType) && isVoiceMessage) {
|
||||
return window.i18n('voiceMessage');
|
||||
}
|
||||
if (MIME.isAudio(contentType)) {
|
||||
return window.i18n('audio');
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
export const QuoteText = (
|
||||
props: Pick<QuotePropsWithoutListener, 'text' | 'attachment' | 'isIncoming'>
|
||||
) => {
|
||||
const { text, attachment, isIncoming } = props;
|
||||
|
||||
const convoId = useSelector(getSelectedConversationKey);
|
||||
const isGroup = !useIsPrivate(convoId);
|
||||
|
||||
if (text) {
|
||||
return (
|
||||
<div
|
||||
dir="auto"
|
||||
className={classNames(
|
||||
'module-quote__primary__text',
|
||||
isIncoming ? 'module-quote__primary__text--incoming' : null
|
||||
)}
|
||||
>
|
||||
<MessageBody text={text} disableLinks={true} disableJumbomoji={true} isGroup={isGroup} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { contentType, isVoiceMessage } = attachment;
|
||||
|
||||
const typeLabel = getTypeLabel({ contentType, isVoiceMessage });
|
||||
if (typeLabel) {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-quote__primary__type-label',
|
||||
isIncoming ? 'module-quote__primary__type-label--incoming' : null
|
||||
)}
|
||||
>
|
||||
{typeLabel}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
Loading…
Reference in New Issue