Fixed examples in Quote.md, rough Android visuals
Scott Nonnenberg
7 years ago
parent
6653123671
commit
21bf02c94d
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>
|
||||||
|
After Width: | Height: | Size: 325 B |
@ -1,2 +1,10 @@
|
|||||||
exports.isJPEG = mimeType =>
|
exports.isJPEG = mimeType =>
|
||||||
mimeType === 'image/jpeg';
|
mimeType === 'image/jpeg';
|
||||||
|
|
||||||
|
exports.isVideo = mimeType =>
|
||||||
|
mimeType.startsWith('video/') && mimeType !== 'video/wmv';
|
||||||
|
|
||||||
|
exports.isImage = mimeType =>
|
||||||
|
mimeType.startsWith('image/') && mimeType !== 'image/tiff';
|
||||||
|
|
||||||
|
exports.isAudio = mimeType => mimeType.startsWith('audio/');
|
||||||
|
|||||||
@ -1,14 +1,134 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import Mime from '../../../js/modules/types/mime';
|
||||||
|
|
||||||
interface Props { name: string; }
|
|
||||||
|
|
||||||
interface State { count: number; }
|
interface Props {
|
||||||
|
i18n: (key: string, values?: Array<string>) => string;
|
||||||
|
authorName: string;
|
||||||
|
authorColor: string;
|
||||||
|
attachments: Array<QuotedAttachment>;
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface QuotedAttachment {
|
||||||
|
fileName: string;
|
||||||
|
contentType: string;
|
||||||
|
isVoiceMessage: boolean;
|
||||||
|
objectUrl: string;
|
||||||
|
thumbnail: {
|
||||||
|
contentType: string;
|
||||||
|
data: ArrayBuffer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateQuote(quote: Props): boolean {
|
||||||
|
if (quote.text) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (quote.attachments && quote.attachments.length > 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getContentType(attachments: Array<QuotedAttachment>): string | null {
|
||||||
|
if (!attachments || attachments.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const first = attachments[0];
|
||||||
|
return first.contentType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Quote extends React.Component<Props, {}> {
|
||||||
|
public renderIcon(first: QuotedAttachment) {
|
||||||
|
const contentType = first.contentType;
|
||||||
|
const objectUrl = first.objectUrl;
|
||||||
|
|
||||||
|
if (Mime.isVideo(contentType)) {
|
||||||
|
// Render play icon on top of thumbnail
|
||||||
|
// We'd have to generate our own thumbnail from a local video??
|
||||||
|
return <div className='inner play'>Video</div>;
|
||||||
|
} else if (Mime.isImage(contentType)) {
|
||||||
|
if (objectUrl) {
|
||||||
|
return <div className='inner'><img src={objectUrl} /></div>;
|
||||||
|
} else {
|
||||||
|
return <div className='inner'>Loading Widget</div>
|
||||||
|
}
|
||||||
|
} else if (Mime.isAudio(contentType)) {
|
||||||
|
// Show microphone inner in circle
|
||||||
|
return <div className='inner microphone'>Audio</div>;
|
||||||
|
} else {
|
||||||
|
// Show file icon
|
||||||
|
return <div className='inner file'>File</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public renderIconContainer() {
|
||||||
|
const { attachments } = this.props;
|
||||||
|
|
||||||
|
if (!attachments || attachments.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const first = attachments[0];
|
||||||
|
|
||||||
|
return <div className='icon-container'>
|
||||||
|
{this.renderIcon(first)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
public renderText() {
|
||||||
|
const { i18n, text, attachments } = this.props;
|
||||||
|
|
||||||
|
if (text) {
|
||||||
|
return <div className='text'>{text}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!attachments || attachments.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const contentType = getContentType(attachments);
|
||||||
|
const first = attachments[0];
|
||||||
|
const fileName = first.fileName;
|
||||||
|
|
||||||
|
console.log(contentType);
|
||||||
|
|
||||||
|
if (Mime.isVideo(contentType)) {
|
||||||
|
return <div className='type-label'>{i18n('video')}</div>;
|
||||||
|
} else if (Mime.isImage(contentType)) {
|
||||||
|
return <div className='type-label'>{i18n('photo')}</div>;
|
||||||
|
} else if (Mime.isAudio(contentType) && first.isVoiceMessage) {
|
||||||
|
return <div className='type-label'>{i18n('voiceMessage')}</div>;
|
||||||
|
} else if (Mime.isAudio(contentType)) {
|
||||||
|
console.log(first);
|
||||||
|
return <div className='type-label'>{i18n('audio')}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className='filename-label'>{fileName}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
export class Reply extends React.Component<Props, State> {
|
|
||||||
public render() {
|
public render() {
|
||||||
|
const { authorName, authorColor } = this.props;
|
||||||
|
|
||||||
|
if (!validateQuote(this.props)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>Placeholder</div>
|
<div className={classnames(authorColor, 'quote')} >
|
||||||
|
<div className="primary">
|
||||||
|
<div className="author">{authorName}</div>
|
||||||
|
{this.renderText()}
|
||||||
|
</div>
|
||||||
|
{this.renderIconContainer()}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue