From de3bf85b288696f86443c5ae29130651fd805132 Mon Sep 17 00:00:00 2001
From: Curtis ROck <curtis.rock@wirelessmessaging.com>
Date: Sat, 26 Sep 2020 12:22:22 -0500
Subject: [PATCH] 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       | 33 ++++++++++++++-----
 .../account_gallery/components/media_item.js  | 29 ++++++++++++++--
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 3eda57795..149aa3740 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/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 (
-        <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');
 
diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js
index 3a59ca55c..c81f08534 100644
--- a/app/soapbox/features/account_gallery/components/media_item.js
+++ b/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) {