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

app/soapbox/components/media_gallery.js

@@ -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 (
+      var re = /(?:\.([^.]+))?$/;
-        <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      const type = re.exec(filename)[1];   // e.g. "pdf"
-          <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
+      if(type === 'pdf') {
-            <canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
+        return (
-            <span className='media-gallery__item__icons'><Icon id='file' /></span>
+          <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
-            <span className='media-gallery__filename__label'>{filename}</span>
+            <iframe
-          </a>
+              title='my title'
-        </div>
+              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');
 

app/soapbox/features/account_gallery/components/media_item.js

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