mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

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 gallery
inline_pdf
Curtis ROck 2020-09-26 12:22:22 -05:00
rodzic bc2aaca5da
commit de3bf85b28
2 zmienionych plików z 51 dodań i 11 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

33
app/soapbox/components/media_gallery.js
Wyświetl plik

@ -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');

29
app/soapbox/features/account_gallery/components/media_item.js
Wyświetl plik

@ -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) {