kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Added PDF filetype detection and rendering via iFrame, but get CSP related issue of trying to embed remote content into an iFrame.
Applied to both timeline and profile media galleryinline_pdf
rodzic
bc2aaca5da
commit
de3bf85b28
|
@ -147,15 +147,30 @@ class Item extends React.PureComponent {
|
|||
|
||||
if (attachment.get('type') === 'unknown') {
|
||||
const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH);
|
||||
return (
|
||||
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
|
||||
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
|
||||
<span className='media-gallery__item__icons'><Icon id='file' /></span>
|
||||
<span className='media-gallery__filename__label'>{filename}</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
var re = /(?:\.([^.]+))?$/;
|
||||
const type = re.exec(filename)[1]; // e.g. "pdf"
|
||||
if(type === 'pdf') {
|
||||
return (
|
||||
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<iframe
|
||||
title='my title'
|
||||
src={attachment.get('remote_url')}
|
||||
width='100%'
|
||||
height='500px'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
|
||||
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
|
||||
<span className='media-gallery__item__icons'><Icon id='file' /></span>
|
||||
<span className='media-gallery__filename__label'>{filename}</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else if (attachment.get('type') === 'image') {
|
||||
const previewUrl = attachment.get('preview_url');
|
||||
|
||||
|
|
|
@ -9,12 +9,15 @@ import { decode } from 'blurhash';
|
|||
import { isIOS } from 'soapbox/is_mobile';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import StillImage from 'soapbox/components/still_image';
|
||||
import { truncateFilename } from 'soapbox/utils/media';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
autoPlayGif: getSettings(state).get('autoPlayGif'),
|
||||
displayMedia: getSettings(state).get('displayMedia'),
|
||||
});
|
||||
|
||||
const MAX_FILENAME_LENGTH = 45;
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class MediaItem extends ImmutablePureComponent {
|
||||
|
||||
|
@ -104,9 +107,22 @@ class MediaItem extends ImmutablePureComponent {
|
|||
|
||||
let thumbnail = '';
|
||||
let icon;
|
||||
|
||||
if (attachment.get('type') === 'unknown') {
|
||||
// Skip
|
||||
const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH);
|
||||
var re = /(?:\.([^.]+))?$/;
|
||||
const type = re.exec(filename)[1]; // e.g. "pdf"
|
||||
if(type === 'pdf') {
|
||||
thumbnail = (
|
||||
<iframe
|
||||
title='my title'
|
||||
src={attachment.get('remote_url')}
|
||||
width='100%'
|
||||
height='500px'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// skip
|
||||
}
|
||||
} else if (attachment.get('type') === 'image') {
|
||||
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
|
||||
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
|
||||
|
@ -156,6 +172,15 @@ class MediaItem extends ImmutablePureComponent {
|
|||
<span className='media-gallery__file-extension__label'>{fileExtension}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (attachment.get('type') === 'pdf') {
|
||||
thumbnail = (
|
||||
<iframe
|
||||
title='my title'
|
||||
src='/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf'
|
||||
width='100%'
|
||||
height='500px'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!visible) {
|
||||
|
|
Ładowanie…
Reference in New Issue