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,6 +147,20 @@ class Item extends React.PureComponent {
 
     if (attachment.get('type') === 'unknown') {
       const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH);
+      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' }}>
@@ -156,6 +170,7 @@ class Item extends React.PureComponent {
             </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) {