keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Reply attachments (#1591)

Browse Source 
* First attachment showing in reply composition.

* WIP: Adding thumbnail to quote response composition component.

* Added icon for voice recording attachment

* Updated formatting.

* Formatting.

* removed duplicate styling.

* WIP: Converting quote component to functional components.

* Fix bug where thumbnails for attachment replies wasn't showing.

* yarn Formatting.

* Removed old quote component.

* Add type to contentTypeSupported method.

* Moved  quote subcomponents out of Quote component.

* yarn format

* Add export to quote subcomponents.

* Fixing linting errors.

* remove commented line.

* Addressing PR comments.
pull/1622/head
Warrick 4 years ago committed by GitHub
parent 2e5a27a81c
commit e6128fa5a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 245 additions and 228 deletions
Show Stats Download Patch File Download Diff File

182
ts/components/conversation/Quote.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
// tslint:disable:react-this-binding-issue
import React from 'react';
import React, { useState } from 'react';
import classNames from 'classnames';
import * as MIME from '../../../ts/types/MIME';
@ -12,7 +12,9 @@ import { ContactName } from './ContactName';
import { PubKey } from '../../session/types';
import { ConversationTypeEnum } from '../../models/conversation';
interface Props {
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
interface QuoteProps {
attachment?: QuotedAttachmentType;
authorPhoneNumber: string;
authorProfileName?: string;
@ -25,15 +27,10 @@ interface Props {
isPublic?: boolean;
withContentAbove: boolean;
onClick?: (e: any) => void;
onClose?: () => void;
text: string;
referencedMessageNotFound: boolean;
}
interface State {
imageBroken: boolean;
}
export interface QuotedAttachmentType {
contentType: MIME.MIMEType;
fileName: string;
@ -48,7 +45,7 @@ interface Attachment {
objectUrl?: string;
}
function validateQuote(quote: Props): boolean {
function validateQuote(quote: QuoteProps): boolean {
if (quote.text) {
return true;
}
@ -92,30 +89,11 @@ function getTypeLabel({
return;
}
export const QuoteIcon = (props: any) => {
const { icon } = props;
export class Quote extends React.Component<Props, State> {
public handleImageErrorBound: () => void;
public constructor(props: Props) {
super(props);
this.handleImageErrorBound = this.handleImageError.bind(this);
this.state = {
imageBroken: false,
};
}
public handleImageError() {
// tslint:disable-next-line no-console
console.log('Message: Image failed to load; failing over to placeholder');
this.setState({
imageBroken: true,
});
}
public renderImage(url: string, i18n: LocalizerType, icon?: string) {
const iconElement = icon ? (
return (
<div className="module-quote__icon-container">
<div className="module-quote__icon-container__inner">
<div className="module-quote__icon-container__circle-background">
<div
@ -126,19 +104,17 @@ export class Quote extends React.Component<Props, State> {
/>
</div>
</div>
) : null;
return (
<div className="module-quote__icon-container">
<img src={url} alt={i18n('quoteThumbnailAlt')} onError={this.handleImageErrorBound} />
{iconElement}
</div>
);
}
};
public renderIcon(icon: string) {
return (
<div className="module-quote__icon-container">
export const QuoteImage = (props: any) => {
const { url, i18n, icon, contentType, handleImageErrorBound } = props;
const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType);
const srcData = !loading ? urlToLoad : '';
const iconElement = icon ? (
<div className="module-quote__icon-container__inner">
<div className="module-quote__icon-container__circle-background">
<div
@ -149,15 +125,21 @@ export class Quote extends React.Component<Props, State> {
/>
</div>
</div>
) : null;
return (
<div className="module-quote__icon-container">
<img src={srcData} alt={i18n('quoteThumbnailAlt')} onError={handleImageErrorBound} />
{iconElement}
</div>
);
}
};
public renderGenericFile() {
const { attachment, isIncoming } = this.props;
export const QuoteGenericFile = (props: any) => {
const { attachment, isIncoming } = props;
if (!attachment) {
return;
return <></>;
}
const { fileName, contentType } = attachment;
@ -167,7 +149,7 @@ export class Quote extends React.Component<Props, State> {
!MIME.isAudio(contentType);
if (!isGenericFile) {
return null;
return <></>;
}
return (
@ -183,11 +165,10 @@ export class Quote extends React.Component<Props, State> {
</div>
</div>
);
}
};
public renderIconContainer() {
const { attachment, i18n } = this.props;
const { imageBroken } = this.state;
export const QuoteIconContainer = (props: any) => {
const { attachment, i18n, imageBroken, handleImageErrorBound } = props;
if (!attachment) {
return null;
@ -197,24 +178,33 @@ export class Quote extends React.Component<Props, State> {
const objectUrl = getObjectUrl(thumbnail);
if (GoogleChrome.isVideoTypeSupported(contentType)) {
return objectUrl && !imageBroken
? this.renderImage(objectUrl, i18n, 'play')
: this.renderIcon('movie');
return objectUrl && !imageBroken ? (
<QuoteImage url={objectUrl} i18n={i18n} icon={'play'} />
) : (
<QuoteIcon icon="movie" />
);
}
if (GoogleChrome.isImageTypeSupported(contentType)) {
return objectUrl && !imageBroken
? this.renderImage(objectUrl, i18n)
: this.renderIcon('image');
return objectUrl && !imageBroken ? (
<QuoteImage
url={objectUrl}
i18n={i18n}
contentType={contentType}
handleImageErrorBound={handleImageErrorBound}
/>
) : (
<QuoteIcon icon="image" />
);
}
if (MIME.isAudio(contentType)) {
return this.renderIcon('microphone');
return <QuoteIcon icon="microphone" />;
}
return null;
}
};
public renderText() {
const { i18n, text, attachment, isIncoming, conversationType, convoId } = this.props;
export const QuoteText = (props: any) => {
const { i18n, text, attachment, isIncoming, conversationType, convoId } = props;
const isGroup = conversationType === ConversationTypeEnum.GROUP;
if (text) {
return (
@ -226,7 +216,7 @@ export class Quote extends React.Component<Props, State> {
)}
>
<MessageBody
isGroup={conversationType === 'group'}
isGroup={isGroup}
convoId={convoId}
text={text}
disableLinks={true}
@ -257,31 +247,9 @@ export class Quote extends React.Component<Props, State> {
}
return null;
}
public renderClose() {
const { onClose } = this.props;
if (!onClose) {
return null;
}
};
// We don't want the overall click handler for the quote to fire, so we stop
// propagation before handing control to the caller's callback.
const onClick = (e: any): void => {
e.stopPropagation();
onClose();
};
// We need the container to give us the flexibility to implement the iOS design.
return (
<div className="module-quote__close-container">
<div className="module-quote__close-button" role="button" onClick={onClick} />
</div>
);
}
public renderAuthor() {
export const QuoteAuthor = (props: any) => {
const {
authorProfileName,
authorPhoneNumber,
@ -290,7 +258,7 @@ export class Quote extends React.Component<Props, State> {
isFromMe,
isIncoming,
isPublic,
} = this.props;
} = props;
return (
<div
@ -313,10 +281,10 @@ export class Quote extends React.Component<Props, State> {
)}
</div>
);
}
};
public renderReferenceWarning() {
const { i18n, isIncoming, referencedMessageNotFound } = this.props;
export const QuoteReferenceWarning = (props: any) => {
const { i18n, isIncoming, referencedMessageNotFound } = props;
if (!referencedMessageNotFound) {
return null;
@ -345,16 +313,27 @@ export class Quote extends React.Component<Props, State> {
</div>
</div>
);
}
};
public render() {
const { isIncoming, onClick, referencedMessageNotFound, withContentAbove } = this.props;
export const Quote = (props: QuoteProps) => {
const [imageBroken, setImageBroken] = useState(false);
if (!validateQuote(this.props)) {
const handleImageErrorBound = null;
const handleImageError = () => {
// tslint:disable-next-line no-console
console.log('Message: Image failed to load; failing over to placeholder');
setImageBroken(true);
};
const { isIncoming, onClick, referencedMessageNotFound, withContentAbove } = props;
if (!validateQuote(props)) {
return null;
}
return (
<>
<div
className={classNames(
'module-quote-container',
@ -373,15 +352,14 @@ export class Quote extends React.Component<Props, State> {
)}
>
<div className="module-quote__primary">
{this.renderAuthor()}
{this.renderGenericFile()}
{this.renderText()}
<QuoteAuthor {...props} />
<QuoteGenericFile {...props} />
<QuoteText {...props} />
</div>
{this.renderIconContainer()}
{this.renderClose()}
<QuoteIconContainer {...props} handleImageErrorBound={handleImageErrorBound} />
</div>
{this.renderReferenceWarning()}
<QuoteReferenceWarning {...props} />
</div>
</>
);
}
}
};

41
ts/components/session/conversation/SessionQuotedMessageComposition.tsx
Unescape Escape View File

@ -1,8 +1,10 @@
import React, { useContext } from 'react';
import { Flex } from '../../basic/Flex';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { ReplyingToMessageProps } from './SessionCompositionBox';
import styled, { DefaultTheme, ThemeContext } from 'styled-components';
import { getAlt, isAudio, isImageAttachment } from '../../../types/Attachment';
import { Image } from '../../conversation/Image';
// tslint:disable: react-unused-props-and-state
interface Props {
@ -44,6 +46,18 @@ export const SessionQuotedMessageComposition = (props: Props) => {
const { text: body, attachments } = quotedMessageProps;
const hasAttachments = attachments && attachments.length > 0;
let hasImageAttachment = false;
let firstImageAttachment;
if (attachments && attachments.length > 0) {
firstImageAttachment = attachments[0];
hasImageAttachment = true;
}
const hasAudioAttachment =
hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
return (
<QuotedMessageComposition theme={theme}>
<Flex
@ -61,7 +75,32 @@ export const SessionQuotedMessageComposition = (props: Props) => {
/>
</Flex>
<QuotedMessageCompositionReply>
<Flex container={true} justifyContent="space-between" margin={theme.common.margins.xs}>
<Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>
{hasImageAttachment && (
<Image
alt={getAlt(firstImageAttachment, window.i18n)}
i18n={window.i18n}
attachment={firstImageAttachment}
height={100}
width={100}
curveTopLeft={true}
curveTopRight={true}
curveBottomLeft={true}
curveBottomRight={true}
url={firstImageAttachment.thumbnail.objectUrl}
/>
)}
{hasAudioAttachment && (
<SessionIcon
iconType={SessionIconType.Microphone}
iconSize={SessionIconSize.Huge}
theme={theme}
/>
)}
</Flex>
</QuotedMessageCompositionReply>
</QuotedMessageComposition>
);

4
ts/receiver/queuedJob.ts
Unescape Escape View File

@ -79,7 +79,7 @@ async function handleGroups(
return groupUpdate;
}
function contentTypeSupported(type: any): boolean {
function contentTypeSupported(type: string): boolean {
const Chrome = window.Signal.Util.GoogleChrome;
return Chrome.isImageTypeSupported(type) || Chrome.isVideoTypeSupported(type);
}
@ -139,7 +139,7 @@ async function copyFromQuotedMessage(
return;
}
if (!firstAttachment || !contentTypeSupported(firstAttachment)) {
if (!firstAttachment || !contentTypeSupported(firstAttachment.contentType)) {
return;
}

Write Preview
Loading…
Cancel
Save