From 14f6e6abadea9af0e3b3c5e8b66132ece64b07f2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 3 Nov 2019 15:32:43 -0800
Subject: [PATCH] feat: Add support for InVision live images closes #946

---
 app/components/Editor/Embed.js |  1 +
 app/embeds/InVision.js         | 24 ++++++++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/components/Editor/Embed.js b/app/components/Editor/Embed.js
index 2e4bb729..7d7c2416 100644
--- a/app/components/Editor/Embed.js
+++ b/app/components/Editor/Embed.js
@@ -44,6 +44,7 @@ export default class Embed extends React.Component<*> {
 }
 
 const Container = styled.div`
+  text-align: center;
   animation: ${fadeIn} 500ms ease-in-out;
   line-height: 0;
 
diff --git a/app/embeds/InVision.js b/app/embeds/InVision.js
index 9e0208ac..dc3c492a 100644
--- a/app/embeds/InVision.js
+++ b/app/embeds/InVision.js
@@ -1,19 +1,39 @@
 // @flow
 import * as React from 'react';
+import ImageZoom from 'react-medium-image-zoom';
 import Frame from './components/Frame';
 
-const URL_REGEX = new RegExp(
+const IFRAME_REGEX = new RegExp(
   '^https://(invis.io/.*)|(projects.invisionapp.com/share/.*)$'
 );
 
+const IMAGE_REGEX = new RegExp(
+  '^https://(opal.invisionapp.com/static-signed/live-embed/.*)$'
+);
+
 type Props = {
   url: string,
 };
 
 export default class InVision extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
+  static ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
 
   render() {
+    if (IMAGE_REGEX.test(this.props.url)) {
+      return (
+        <ImageZoom
+          image={{
+            src: this.props.url,
+            alt: 'InVision Embed',
+            style: {
+              maxWidth: '100%',
+              maxHeight: '75vh',
+            },
+          }}
+          shouldRespectMaxDimension
+        />
+      );
+    }
     return <Frame src={this.props.url} title="InVision Embed" />;
   }
 }