Merge pull request #2405 from ericrosenbaum/feature/landing-pg-vids

Add videos to WeDo and EV3 landing pages

src/components/extension-landing/extension-landing.scss

@@ -114,6 +114,13 @@
                     color: $ui-white;
                 }
             }
+
+            .video-player {
+                border: .25rem solid $ui-white-15percent;
+                border-radius: .75rem;
+                height: 180px;
+                overflow: hidden;
+            }
         }
 
         .extension-image {

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;

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,9 +55,9 @@ class EV3 extends ExtensionLanding {
                             />
                         </FlexRow>
                     }
-                    renderImage={<img
+                    renderImage={
-                        alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
+                        <ExtensionVideo
-                        src="/images/ev3/ev3-illustration.png"
+                            videoId="0huu6wfiki"
                         />}
                     renderRequirements={
                         <ExtensionRequirements>

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');
@@ -51,10 +52,11 @@ class Wedo2 extends ExtensionLanding {
                             />
                         </FlexRow>
                     }
-                    renderImage={<img
+                    renderImage={
-                        alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
+                        <ExtensionVideo
-                        src="/images/wedo2/wedo2-illustration.png"
+                            videoId="4im7iizv47"
-                    />}
+                        />
+                    }
                     renderRequirements={
                         <ExtensionRequirements>
                             <span>