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

link preview state moved to SessionCompositionBox

Browse Source
pull/1387/head
Audric Ackermann 5 years ago
parent 13e02b5bf1
commit ba959f3379
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
4 changed files with 164 additions and 102 deletions
Show Stats Download Patch File Download Diff File

8
stylesheets/_modules.scss
Unescape Escape View File

@ -2323,11 +2323,11 @@
.module-staged-link-preview__icon-container {
margin-inline-end: 8px;
padding: $session-margin-sm;
}
.module-staged-link-preview__content {
margin-inline-end: 20px;
padding-inline-start: $session-margin-sm;
padding-inline-end: $session-margin-sm;
padding: $session-margin-sm;
}
.module-staged-link-preview__title {
color: $color-gray-90;
@ -2351,8 +2351,8 @@
.module-staged-link-preview__close-button {
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
top: 5px;
right: 5px;
height: 16px;
width: 16px;

9
ts/components/conversation/StagedLinkPreview.tsx
Unescape Escape View File

@ -8,15 +8,16 @@ import { AttachmentType, isImageAttachment } from '../../types/Attachment';
type Props = {
isLoaded: boolean;
title: null | string;
url: null | string;
description: null | string;
domain: null | string;
image?: AttachmentType;
onClose: () => void;
onClose: (url: string) => void;
};
export const StagedLinkPreview = (props: Props) => {
const { isLoaded, onClose, title, image, domain, description } = props;
const { isLoaded, onClose, title, image, domain, description, url } = props;
const isImage = image && isImageAttachment(image);
const i18n = window.i18n;
@ -65,7 +66,9 @@ export const StagedLinkPreview = (props: Props) => {
<button
type="button"
className="module-staged-link-preview__close-button"
onClick={onClose}
onClick={() => {
onClose(url || '');
}}
aria-label={i18n('close')}
/>
</div>

167
ts/components/session/conversation/SessionCompositionBox.tsx
Unescape Escape View File

@ -15,12 +15,17 @@ import { SignalService } from '../../../protobuf';
import { Constants } from '../../../session';
import { toArray } from 'react-emoji-render';
import { SessionQuotedMessageComposition } from './SessionQuotedMessageComposition';
import { Flex } from '../Flex';
import { AttachmentList } from '../../conversation/AttachmentList';
import { ToastUtils } from '../../../session/utils';
import { AttachmentUtil } from '../../../util';
import { SessionStagedLinkPreview } from './SessionStagedLinkPreview';
import {
getPreview,
LINK_PREVIEW_TIMEOUT,
SessionStagedLinkPreview,
} from './SessionStagedLinkPreview';
import { AbortController, AbortSignal } from 'abort-controller';
import { SessionQuotedMessageComposition } from './SessionQuotedMessageComposition';
export interface ReplyingToMessageProps {
convoId: string;
@ -31,6 +36,15 @@ export interface ReplyingToMessageProps {
attachments?: Array<any>;
}
export interface StagedLinkPreviewData {
isLoaded: boolean;
title: string | null;
url: string | null;
domain: string | null;
description: string | null;
image?: AttachmentType;
}
export interface StagedAttachmentType extends AttachmentType {
file: File;
}
@ -63,13 +77,15 @@ interface State {
mediaSetting: boolean | null;
showEmojiPanel: boolean;
voiceRecording?: Blob;
ignoredLink?: string;
ignoredLink?: string; // set the the ignored url when users closed the link preview
stagedLinkPreview?: StagedLinkPreviewData;
}
export class SessionCompositionBox extends React.Component<Props, State> {
private readonly textarea: React.RefObject<HTMLTextAreaElement>;
private readonly fileInput: React.RefObject<HTMLInputElement>;
private emojiPanel: any;
private linkPreviewAbortController?: AbortController;
constructor(props: any) {
super(props);
@ -125,6 +141,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
setTimeout(this.focusCompositionBox, 100);
}
public componentWillUnmount() {
this.linkPreviewAbortController?.abort();
this.linkPreviewAbortController = undefined;
}
public render() {
const { showRecordingView } = this.state;
@ -265,40 +286,126 @@ export class SessionCompositionBox extends React.Component<Props, State> {
return <></>;
}
// Do nothing if we're offline
if (!window.textsecure.messaging) {
return <></>;
}
const { stagedAttachments, quotedMessageProps } = this.props;
const { ignoredLink } = this.state;
// Don't render link previews if quoted message or attachments
if (stagedAttachments.length === 0 && !quotedMessageProps?.id) {
// we try to match the first link found in the current message
const links = window.Signal.LinkPreviews.findLinks(
this.state.message,
undefined
);
if (!links || links.length === 0 || ignoredLink === links[0]) {
return <></>;
}
const firstLink = links[0];
if (ignoredLink && ignoredLink !== firstLink) {
this.setState({ ignoredLink: undefined });
}
return (
<SessionStagedLinkPreview
url={firstLink}
onClose={() => {
this.setState({ ignoredLink: firstLink });
}}
/>
);
// Don't render link previews if quoted message or attachments are already added
if (stagedAttachments.length !== 0 && quotedMessageProps?.id) {
return <></>;
}
// we try to match the first link found in the current message
const links = window.Signal.LinkPreviews.findLinks(
this.state.message,
undefined
);
if (!links || links.length === 0 || ignoredLink === links[0]) {
return <></>;
}
const firstLink = links[0];
// if the first link changed, reset the ignored link so that the preview is generated
if (ignoredLink && ignoredLink !== firstLink) {
this.setState({ ignoredLink: undefined });
}
if (firstLink !== this.state.stagedLinkPreview?.url) {
// trigger fetching of link preview data and image
void this.fetchLinkPreview(firstLink);
}
// if the fetch did not start yet, just don't show anything
if (!this.state.stagedLinkPreview) {
return <></>;
}
const {
isLoaded,
title,
description,
domain,
image,
} = this.state.stagedLinkPreview;
return (
<SessionStagedLinkPreview
isLoaded={isLoaded}
title={title}
description={description}
domain={domain}
image={image}
url={firstLink}
onClose={url => {
this.setState({ ignoredLink: url });
}}
/>
);
return <></>;
}
private async fetchLinkPreview(firstLink: string) {
// mark the link preview as loading, no data are set yet
this.setState({
stagedLinkPreview: {
isLoaded: false,
url: firstLink,
domain: null,
description: null,
image: undefined,
title: null,
},
});
const abortController = new AbortController();
this.linkPreviewAbortController?.abort();
this.linkPreviewAbortController = abortController;
setTimeout(() => {
abortController.abort();
}, LINK_PREVIEW_TIMEOUT);
getPreview(firstLink, abortController.signal)
.then(ret => {
let image: AttachmentType | undefined;
if (ret) {
if (ret.image?.width) {
if (ret.image) {
const blob = new Blob([ret.image.data], {
type: ret.image.contentType,
});
const imageAttachment = {
...ret.image,
url: URL.createObjectURL(blob),
fileName: 'preview',
};
image = imageAttachment;
}
}
}
this.setState({
stagedLinkPreview: {
isLoaded: true,
title: ret?.title || null,
description: ret?.description || '',
url: ret?.url || null,
domain:
(ret?.url && window.Signal.LinkPreviews.getDomain(ret.url)) || '',
image,
},
});
})
.catch(err => {
console.warn('fetch link preview: ', err);
abortController.abort();
this.setState({
stagedLinkPreview: {
isLoaded: true,
title: null,
domain: null,
description: null,
url: firstLink,
image: undefined,
},
});
});
}
private renderQuotedMessage() {
const { quotedMessageProps, removeQuotedMessage } = this.props;
if (quotedMessageProps && quotedMessageProps.id) {

82
ts/components/session/conversation/SessionStagedLinkPreview.tsx
Unescape Escape View File

@ -1,16 +1,16 @@
import React, { useEffect, useState } from 'react';
import { arrayBufferFromFile, AttachmentType } from '../../../types/Attachment';
import { AttachmentUtil, LinkPreviewUtil } from '../../../util';
import { StagedLinkPreview } from '../../conversation/StagedLinkPreview';
import { StagedLinkPreviewData } from './SessionCompositionBox';
import fetch from 'node-fetch';
import { fetchLinkPreviewImage } from '../../../util/linkPreviewFetch';
import { AbortController, AbortSignal } from 'abort-controller';
import { StagedLinkPreview } from '../../conversation/StagedLinkPreview';
type Props = {
url: string;
onClose: () => void;
};
const LINK_PREVIEW_TIMEOUT = 60 * 1000;
export interface StagedLinkPreviewProps extends StagedLinkPreviewData {
onClose: (url: string) => void;
}
export const LINK_PREVIEW_TIMEOUT = 60 * 1000;
export interface GetLinkPreviewResultImage {
data: ArrayBuffer;
@ -28,7 +28,7 @@ export interface GetLinkPreviewResult {
date: number | null;
}
const getPreview = async (
export const getPreview = async (
url: string,
abortSignal: AbortSignal
): Promise<null | GetLinkPreviewResult> => {
@ -107,68 +107,20 @@ const getPreview = async (
};
};
export const SessionStagedLinkPreview = (props: Props) => {
const [isLoaded, setIsLoaded] = useState(false);
const [title, setTitle] = useState<string | null>(null);
const [domain, setDomain] = useState<string | null>(null);
const [description, setDescription] = useState<string | null>(null);
const [image, setImage] = useState<AttachmentType | undefined>(undefined);
useEffect(() => {
// Use this abortcontroller to stop current fetch requests when url changed
const abortController = new AbortController();
setTimeout(() => {
abortController.abort();
}, LINK_PREVIEW_TIMEOUT);
setIsLoaded(false);
setTitle(null);
setDomain(null);
setDescription(null);
setImage(undefined);
getPreview(props.url, abortController.signal)
.then(ret => {
setIsLoaded(true);
if (ret) {
setTitle(ret.title);
if (ret.image?.width) {
if (ret.image) {
const blob = new Blob([ret.image.data], {
type: ret.image.contentType,
});
const imageAttachment = {
...ret.image,
url: URL.createObjectURL(blob),
fileName: 'preview',
};
setImage(imageAttachment);
}
}
setDomain(window.Signal.LinkPreviews.getDomain(ret.url));
if (ret.description) {
setDescription(ret.description);
}
}
})
.catch(err => {
abortController.abort();
setIsLoaded(true);
});
return () => {
// Cancel other in-flight link preview requests.
abortController.abort();
};
}, [props.url]);
export const SessionStagedLinkPreview = (props: StagedLinkPreviewProps) => {
if (!props.url) {
return <></>;
}
return (
<StagedLinkPreview
onClose={props.onClose}
isLoaded={isLoaded}
title={title}
domain={domain}
image={image as any}
description={description}
isLoaded={props.isLoaded}
title={props.title}
domain={props.domain}
url={props.url}
image={props.image as any}
description={props.description}
/>
);
};

Write Preview
Loading…
Cancel
Save