From d206b44abe7a8da2dec32e90808321d865cece2a Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 5 Dec 2018 10:48:46 -0500
Subject: [PATCH 1/3] Add video player to wedo page

---
 .../extension-landing/extension-landing.scss  |  7 ++++++
 src/views/wedo2/wedo2.jsx                     | 22 +++++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss
index 96a763cbb..a6204909c 100644
--- a/src/components/extension-landing/extension-landing.scss
+++ b/src/components/extension-landing/extension-landing.scss
@@ -114,6 +114,13 @@
                     color: $ui-white;
                 }
             }
+
+            .video-player {
+                height: 180px;
+                border: 2px solid $ui-border;
+                border-radius: 10px;
+                overflow: hidden;
+            }
         }
 
         .extension-image {
diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx
index 2b1aa7374..65c57e89a 100644
--- a/src/views/wedo2/wedo2.jsx
+++ b/src/views/wedo2/wedo2.jsx
@@ -51,10 +51,24 @@ class Wedo2 extends ExtensionLanding {
                             />
                         </FlexRow>
                     }
-                    renderImage={<img
-                        alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
-                        src="/images/wedo2/wedo2-illustration.png"
-                    />}
+                    renderImage={
+                        <div className="video-player">
+                            <iframe
+                                allowFullScreen
+                                allowTransparency="true"
+                                frameBorder="0"
+                                height="180"
+                                scrolling="no"
+                                src={`https://fast.wistia.net/embed/iframe/4im7iizv47?seo=false&videoFoam=true`}
+                                title="📹"
+                                width="320"
+                            />
+                            <script
+                                async
+                                src="https://fast.wistia.net/assets/external/E-v1.js"
+                            />
+                        </div>
+                    }
                     renderRequirements={
                         <ExtensionRequirements>
                             <span>

From 8c6013b243698c67ba21f9725e5e28ff5a63b1f5 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 5 Dec 2018 17:25:07 -0500
Subject: [PATCH 2/3] Add extension video component to wedo and ev3 pages

---
 .../extension-landing/extension-landing.scss  |  4 +--
 .../extension-landing/extension-video.jsx     | 29 +++++++++++++++++++
 src/views/ev3/ev3.jsx                         |  9 +++---
 src/views/wedo2/wedo2.jsx                     | 20 +++----------
 4 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 src/components/extension-landing/extension-video.jsx

diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss
index a6204909c..491f29083 100644
--- a/src/components/extension-landing/extension-landing.scss
+++ b/src/components/extension-landing/extension-landing.scss
@@ -117,8 +117,8 @@
 
             .video-player {
                 height: 180px;
-                border: 2px solid $ui-border;
-                border-radius: 10px;
+                border: 0.25rem solid $ui-white-15percent;
+                border-radius: 0.75rem;
                 overflow: hidden;
             }
         }
diff --git a/src/components/extension-landing/extension-video.jsx b/src/components/extension-landing/extension-video.jsx
new file mode 100644
index 000000000..e8b068290
--- /dev/null
+++ b/src/components/extension-landing/extension-video.jsx
@@ -0,0 +1,29 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./extension-landing.scss');
+
+const ExtensionVideo = props => (
+    <div className="video-player">
+        <iframe
+            allowFullScreen
+            allowTransparency="true"
+            frameBorder="0"
+            height="180"
+            scrolling="no"
+            src={`https://fast.wistia.net/embed/iframe/${props.videoId}?seo=false&videoFoam=true`}
+            title="📹"
+            width="320"
+        />
+        <script
+            async
+            src="https://fast.wistia.net/assets/external/E-v1.js"
+        />
+    </div>
+);
+
+ExtensionVideo.propTypes = {
+    videoId: PropTypes.string
+};
+
+module.exports = ExtensionVideo;
diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx
index 011b67b2d..9e06531a2 100644
--- a/src/views/ev3/ev3.jsx
+++ b/src/views/ev3/ev3.jsx
@@ -13,6 +13,7 @@ const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
 
 const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
+const ExtensionVideo = require('../../components/extension-landing/extension-video.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
@@ -54,10 +55,10 @@ class EV3 extends ExtensionLanding {
                             />
                         </FlexRow>
                     }
-                    renderImage={<img
-                        alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
-                        src="/images/ev3/ev3-illustration.png"
-                    />}
+                    renderImage={
+                        <ExtensionVideo
+                            videoId="0huu6wfiki"
+                        />}
                     renderRequirements={
                         <ExtensionRequirements>
                             <span>
diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx
index 65c57e89a..563560726 100644
--- a/src/views/wedo2/wedo2.jsx
+++ b/src/views/wedo2/wedo2.jsx
@@ -13,6 +13,7 @@ const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
 
 const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
+const ExtensionVideo = require('../../components/extension-landing/extension-video.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
@@ -52,22 +53,9 @@ class Wedo2 extends ExtensionLanding {
                         </FlexRow>
                     }
                     renderImage={
-                        <div className="video-player">
-                            <iframe
-                                allowFullScreen
-                                allowTransparency="true"
-                                frameBorder="0"
-                                height="180"
-                                scrolling="no"
-                                src={`https://fast.wistia.net/embed/iframe/4im7iizv47?seo=false&videoFoam=true`}
-                                title="📹"
-                                width="320"
-                            />
-                            <script
-                                async
-                                src="https://fast.wistia.net/assets/external/E-v1.js"
-                            />
-                        </div>
+                        <ExtensionVideo
+                            videoId="4im7iizv47"
+                        />
                     }
                     renderRequirements={
                         <ExtensionRequirements>

From c371a3757f6b011ae7b7173ff494be372d430303 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Thu, 6 Dec 2018 09:43:30 -0500
Subject: [PATCH 3/3] Maybe this is the correct order for CSS properties

---
 src/components/extension-landing/extension-landing.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss
index 491f29083..2c6805e55 100644
--- a/src/components/extension-landing/extension-landing.scss
+++ b/src/components/extension-landing/extension-landing.scss
@@ -116,9 +116,9 @@
             }
 
             .video-player {
+                border: .25rem solid $ui-white-15percent;
+                border-radius: .75rem;
                 height: 180px;
-                border: 0.25rem solid $ui-white-15percent;
-                border-radius: 0.75rem;
                 overflow: hidden;
             }
         }