Merge remote-tracking branch 'upstream/clearnet' into unstable
Audric Ackermann
2 years ago
commit
594eee698b
@ -1,238 +0,0 @@
|
||||
// This is related to all quote logics
|
||||
.module-quote {
|
||||
position: relative;
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
|
||||
/* Primary */
|
||||
&__primary {
|
||||
flex-grow: 1;
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 8px;
|
||||
max-width: 100%;
|
||||
}
|
||||
&__primary__profile-name {
|
||||
font-style: italic;
|
||||
}
|
||||
&__primary__type-label {
|
||||
font-style: italic;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 18px;
|
||||
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
border-color: var(--message-bubbles-received-text-color);
|
||||
}
|
||||
&__primary__author {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
|
||||
.module-contact-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&__primary__text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: start;
|
||||
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
|
||||
a {
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
}
|
||||
}
|
||||
&__primary__filename-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
&__icon-container {
|
||||
flex: initial;
|
||||
min-width: 54px;
|
||||
width: 54px;
|
||||
max-height: 54px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&__circle-background {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--chat-buttons-background-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--chat-buttons-background-hover-color);
|
||||
}
|
||||
}
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
&--file {
|
||||
@include color-svg('../images/file.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
&--image {
|
||||
@include color-svg('../images/image.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
&--microphone {
|
||||
@include color-svg('../images/microphone.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
&--play {
|
||||
@include color-svg('../images/play.svg', var(--chat-buttons-icon-color));
|
||||
}
|
||||
&--movie {
|
||||
@include color-svg('../images/movie.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Generic Files */
|
||||
&__generic {
|
||||
&-file {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
&-file__icon {
|
||||
background: url('../images/file-gradient.svg');
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
height: 28px;
|
||||
width: 36px;
|
||||
margin-inline-start: -4px;
|
||||
margin-inline-end: -6px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
&-file__text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
|
||||
max-width: calc(100% - 26px);
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reference Warning */
|
||||
&__reference {
|
||||
&-warning {
|
||||
height: 26px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--message-link-preview-background-color);
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
&-warning__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color));
|
||||
}
|
||||
|
||||
&-warning__text {
|
||||
margin-inline-start: 6px;
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
&--no-click {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Outgoing messages */
|
||||
.module-quote--outgoing {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
.module-quote {
|
||||
&__primary__type-label {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
border-color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
&__primary__author {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
&__primary__text {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
|
||||
a {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__generic {
|
||||
&-file__text {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-quote-container {
|
||||
margin-bottom: var(--margins-xs);
|
||||
margin-top: var(--margins-xs);
|
||||
min-width: 300px; // if the quoted content is small it doesn't look very good so we set a minimum
|
||||
padding-right: var(--margins-xs);
|
||||
|
||||
/* This is not within the module-quote class so we handle it separately */
|
||||
.module-quote__reference-warning--outgoing {
|
||||
.module-quote__reference-warning__text {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
.module-quote__reference-warning__icon {
|
||||
@include color-svg('../images/broken-link.svg', var(--message-bubbles-sent-text-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,33 @@
|
||||
import React from 'react';
|
||||
import React, { MouseEvent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
// tslint:disable: react-unused-props-and-state
|
||||
|
||||
interface Props {
|
||||
onClick: () => void;
|
||||
onClick: (e: MouseEvent<HTMLDivElement>) => void;
|
||||
}
|
||||
|
||||
export class StagedPlaceholderAttachment extends React.Component<Props> {
|
||||
public render() {
|
||||
const { onClick } = this.props;
|
||||
const StyledStagedPlaceholderAttachment = styled.div`
|
||||
margin: 1px var(--margins-sm);
|
||||
border-radius: var(--border-radius-message-box);
|
||||
border: 1px solid var(--border-color);
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
return (
|
||||
<div className="module-staged-placeholder-attachment" role="button" onClick={onClick}>
|
||||
<div className="module-staged-placeholder-attachment__plus-icon" />
|
||||
</div>
|
||||
);
|
||||
&:hover {
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StagedPlaceholderAttachment = (props: Props) => {
|
||||
const { onClick } = props;
|
||||
|
||||
return (
|
||||
<StyledStagedPlaceholderAttachment role="button" onClick={onClick}>
|
||||
<div className="module-staged-placeholder-attachment__plus-icon" />
|
||||
</StyledStagedPlaceholderAttachment>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,104 @@
|
||||
import React, { MouseEvent, useState } from 'react';
|
||||
|
||||
import * as MIME from '../../../../../types/MIME';
|
||||
|
||||
import { QuoteAuthor } from './QuoteAuthor';
|
||||
import { QuoteText } from './QuoteText';
|
||||
import { QuoteIconContainer } from './QuoteIconContainer';
|
||||
import styled from 'styled-components';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const StyledQuoteContainer = styled.div`
|
||||
min-width: 300px; // if the quoted content is small it doesn't look very good so we set a minimum
|
||||
padding-right: var(--margins-xs);
|
||||
`;
|
||||
|
||||
const StyledQuote = styled.div<{
|
||||
hasAttachment: boolean;
|
||||
isIncoming: boolean;
|
||||
onClick: ((e: MouseEvent<HTMLDivElement>) => void) | undefined;
|
||||
}>`
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
margin: ${props => (props.hasAttachment ? 'var(--margins-md)' : 'var(--margins-xs)')} 0;
|
||||
${props => !props.hasAttachment && 'border-left: 4px solid;'}
|
||||
border-color: ${props =>
|
||||
props.isIncoming
|
||||
? 'var(--message-bubbles-received-text-color)'
|
||||
: 'var(--message-bubbles-sent-text-color)'};
|
||||
cursor: ${props => (props.onClick ? 'pointer' : 'auto')};
|
||||
`;
|
||||
|
||||
const StyledQuoteTextContent = styled.div`
|
||||
flex-grow: 1;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 10px;
|
||||
max-width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
export type QuoteProps = {
|
||||
author: string;
|
||||
isFromMe: boolean;
|
||||
isIncoming: boolean;
|
||||
referencedMessageNotFound: boolean;
|
||||
text?: string;
|
||||
attachment?: QuotedAttachmentType;
|
||||
|
||||
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||
};
|
||||
|
||||
export interface QuotedAttachmentThumbnailType {
|
||||
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?: QuotedAttachmentThumbnailType;
|
||||
}
|
||||
|
||||
export const Quote = (props: QuoteProps) => {
|
||||
const { isIncoming, attachment, text, referencedMessageNotFound, onClick } = props;
|
||||
|
||||
const [imageBroken, setImageBroken] = useState(false);
|
||||
const handleImageErrorBound = () => {
|
||||
setImageBroken(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledQuoteContainer>
|
||||
<StyledQuote
|
||||
hasAttachment={Boolean(!isEmpty(attachment))}
|
||||
isIncoming={isIncoming}
|
||||
onClick={onClick}
|
||||
>
|
||||
<QuoteIconContainer
|
||||
attachment={attachment}
|
||||
handleImageErrorBound={handleImageErrorBound}
|
||||
imageBroken={imageBroken}
|
||||
referencedMessageNotFound={referencedMessageNotFound}
|
||||
/>
|
||||
<StyledQuoteTextContent>
|
||||
<QuoteAuthor author={props.author} isIncoming={isIncoming} />
|
||||
<QuoteText
|
||||
isIncoming={isIncoming}
|
||||
text={text}
|
||||
attachment={attachment}
|
||||
referencedMessageNotFound={referencedMessageNotFound}
|
||||
/>
|
||||
</StyledQuoteTextContent>
|
||||
</StyledQuote>
|
||||
</StyledQuoteContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useQuoteAuthorName } from '../../../../../hooks/useParamSelector';
|
||||
import { PubKey } from '../../../../../session/types';
|
||||
import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation';
|
||||
import { ContactName } from '../../../ContactName';
|
||||
import { QuoteProps } from './Quote';
|
||||
|
||||
const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
|
||||
color: ${props =>
|
||||
props.isIncoming
|
||||
? 'var(--message-bubbles-received-text-color)'
|
||||
: 'var(--message-bubbles-sent-text-color)'};
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
margin-bottom: 2px;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
.module-contact-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
|
||||
type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'isIncoming'>;
|
||||
|
||||
export const QuoteAuthor = (props: QuoteAuthorProps) => {
|
||||
const { author, isIncoming } = props;
|
||||
|
||||
const isPublic = useSelectedIsPublic();
|
||||
const authorName = useQuoteAuthorName(author);
|
||||
|
||||
if (!author || !authorName) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledQuoteAuthor isIncoming={isIncoming}>
|
||||
<ContactName
|
||||
pubkey={PubKey.shorten(author)}
|
||||
name={authorName}
|
||||
compact={true}
|
||||
shouldShowPubkey={Boolean(authorName && isPublic)}
|
||||
/>
|
||||
</StyledQuoteAuthor>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,137 @@
|
||||
import React from 'react';
|
||||
import { QuotedAttachmentThumbnailType, QuoteProps } from './Quote';
|
||||
import { GoogleChrome } from '../../../../../util';
|
||||
import { MIME } from '../../../../../types';
|
||||
|
||||
import { isEmpty, noop } from 'lodash';
|
||||
import { QuoteImage } from './QuoteImage';
|
||||
import styled from 'styled-components';
|
||||
import { icons, SessionIconType } from '../../../../icon';
|
||||
|
||||
function getObjectUrl(thumbnail: QuotedAttachmentThumbnailType | undefined): string | undefined {
|
||||
if (thumbnail && thumbnail.objectUrl) {
|
||||
return thumbnail.objectUrl;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const StyledQuoteIconContainer = styled.div`
|
||||
flex: initial;
|
||||
min-width: 54px;
|
||||
width: 54px;
|
||||
max-height: 54px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const StyledQuoteIcon = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const StyledQuoteIconBackground = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
border-radius: var(--margins-sm);
|
||||
background-color: var(--message-link-preview-background-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--message-link-preview-background-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
fill: currentColor;
|
||||
}
|
||||
`;
|
||||
|
||||
type QuoteIconTypes = Extract<SessionIconType, 'file' | 'image' | 'play' | 'movie' | 'microphone'>;
|
||||
|
||||
type QuoteIconProps = {
|
||||
icon: QuoteIconTypes;
|
||||
};
|
||||
|
||||
export const QuoteIcon = (props: QuoteIconProps) => {
|
||||
const { icon } = props;
|
||||
const iconProps = icons[icon];
|
||||
|
||||
return (
|
||||
<StyledQuoteIconContainer>
|
||||
<StyledQuoteIcon>
|
||||
<StyledQuoteIconBackground>
|
||||
<svg viewBox={iconProps.viewBox}>
|
||||
<path d={iconProps.path} />
|
||||
</svg>
|
||||
</StyledQuoteIconBackground>
|
||||
</StyledQuoteIcon>
|
||||
</StyledQuoteIconContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const QuoteIconContainer = (
|
||||
props: Pick<QuoteProps, 'attachment' | 'referencedMessageNotFound'> & {
|
||||
handleImageErrorBound: () => void;
|
||||
imageBroken: boolean;
|
||||
}
|
||||
) => {
|
||||
const { attachment, imageBroken, handleImageErrorBound, referencedMessageNotFound } = props;
|
||||
|
||||
if (referencedMessageNotFound || !attachment || isEmpty(attachment)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { contentType, thumbnail } = attachment;
|
||||
const isGenericFile =
|
||||
!GoogleChrome.isVideoTypeSupported(contentType) &&
|
||||
!GoogleChrome.isImageTypeSupported(contentType) &&
|
||||
!MIME.isAudio(contentType);
|
||||
|
||||
if (isGenericFile) {
|
||||
return <QuoteIcon icon="file" />;
|
||||
}
|
||||
|
||||
const objectUrl = getObjectUrl(thumbnail);
|
||||
if (objectUrl) {
|
||||
if (GoogleChrome.isVideoTypeSupported(contentType)) {
|
||||
return (
|
||||
<QuoteImage
|
||||
url={objectUrl}
|
||||
contentType={MIME.IMAGE_JPEG}
|
||||
showPlayButton={true}
|
||||
imageBroken={imageBroken}
|
||||
handleImageErrorBound={noop}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (GoogleChrome.isImageTypeSupported(contentType)) {
|
||||
return (
|
||||
<QuoteImage
|
||||
url={objectUrl}
|
||||
contentType={contentType}
|
||||
imageBroken={imageBroken}
|
||||
handleImageErrorBound={handleImageErrorBound}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (MIME.isAudio(contentType)) {
|
||||
return <QuoteIcon icon="microphone" />;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
|
||||
import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
|
||||
import styled from 'styled-components';
|
||||
import { icons } from '../../../../icon';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { QuoteIcon } from './QuoteIconContainer';
|
||||
|
||||
const StyledQuoteImage = styled.div`
|
||||
flex: initial;
|
||||
min-width: 54px;
|
||||
width: 54px;
|
||||
max-height: 54px;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPlayButton = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--chat-buttons-background-color);
|
||||
|
||||
padding-left: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--chat-buttons-background-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--chat-buttons-icon-color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const QuoteImage = (props: {
|
||||
url: string;
|
||||
contentType: string;
|
||||
showPlayButton?: boolean;
|
||||
imageBroken: boolean;
|
||||
handleImageErrorBound: () => void;
|
||||
}) => {
|
||||
const { url, contentType, showPlayButton, imageBroken, handleImageErrorBound } = props;
|
||||
|
||||
const disableDrag = useDisableDrag();
|
||||
|
||||
const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
|
||||
const srcData = !loading ? urlToLoad : '';
|
||||
|
||||
return !isEmpty(srcData) && !imageBroken ? (
|
||||
<StyledQuoteImage>
|
||||
<img
|
||||
src={srcData}
|
||||
alt={window.i18n('quoteThumbnailAlt')}
|
||||
onDragStart={disableDrag}
|
||||
onError={handleImageErrorBound}
|
||||
/>
|
||||
{showPlayButton && (
|
||||
<StyledPlayButton>
|
||||
<div>
|
||||
<svg viewBox={icons.play.viewBox}>
|
||||
<path d={icons.play.path} />
|
||||
</svg>
|
||||
</div>
|
||||
</StyledPlayButton>
|
||||
)}
|
||||
</StyledQuoteImage>
|
||||
) : (
|
||||
<QuoteIcon icon={showPlayButton ? 'movie' : 'image'} />
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,85 @@
|
||||
import { isEmpty } from 'lodash';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useSelectedIsGroup } from '../../../../../state/selectors/selectedConversation';
|
||||
import { MIME } from '../../../../../types';
|
||||
import { GoogleChrome } from '../../../../../util';
|
||||
import { MessageBody } from '../MessageBody';
|
||||
import { QuoteProps } from './Quote';
|
||||
|
||||
const StyledQuoteText = styled.div<{ isIncoming: boolean }>`
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
text-align: start;
|
||||
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
||||
color: ${props =>
|
||||
props.isIncoming
|
||||
? 'var(--message-bubbles-received-text-color)'
|
||||
: 'var(--message-bubbles-sent-text-color)'};
|
||||
a {
|
||||
color: ${props =>
|
||||
props.isIncoming
|
||||
? 'var(--color-received-message-text)'
|
||||
: 'var(--message-bubbles-sent-text-color)'};
|
||||
}
|
||||
`;
|
||||
|
||||
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('image');
|
||||
}
|
||||
if (MIME.isAudio(contentType) && isVoiceMessage) {
|
||||
return window.i18n('voiceMessage');
|
||||
}
|
||||
if (MIME.isAudio(contentType)) {
|
||||
return window.i18n('audio');
|
||||
}
|
||||
return window.i18n('document');
|
||||
}
|
||||
|
||||
export const QuoteText = (
|
||||
props: Pick<QuoteProps, 'text' | 'attachment' | 'isIncoming' | 'referencedMessageNotFound'>
|
||||
) => {
|
||||
const { text, attachment, isIncoming, referencedMessageNotFound } = props;
|
||||
|
||||
const isGroup = useSelectedIsGroup();
|
||||
|
||||
if (!referencedMessageNotFound && attachment && !isEmpty(attachment)) {
|
||||
const { contentType, isVoiceMessage } = attachment;
|
||||
|
||||
const typeLabel = getTypeLabel({ contentType, isVoiceMessage });
|
||||
if (typeLabel && !text) {
|
||||
return <div>{typeLabel}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledQuoteText isIncoming={isIncoming} dir="auto">
|
||||
<MessageBody
|
||||
text={text || window.i18n('originalMessageNotFound')}
|
||||
disableLinks={true}
|
||||
disableJumbomoji={true}
|
||||
isGroup={isGroup}
|
||||
/>
|
||||
</StyledQuoteText>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue