scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
Add videos to WeDo and EV3 landing pages
This commit is contained in:
Eric Rosenbaum 2018-12-06 10:38:19 -05:00 committed by GitHub
commit b49854300b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/extension-landing/extension-landing.scss
View file

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

29
src/components/extension-landing/extension-video.jsx Normal file
View file

@ -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;

7
src/views/ev3/ev3.jsx
View file

@ -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
alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
src="/images/ev3/ev3-illustration.png"
renderImage={
<ExtensionVideo
videoId="0huu6wfiki"
/>}
renderRequirements={
<ExtensionRequirements>

10
src/views/wedo2/wedo2.jsx
View file

@ -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
alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
src="/images/wedo2/wedo2-illustration.png"
/>}
renderImage={
<ExtensionVideo
videoId="4im7iizv47"
/>
}
renderRequirements={
<ExtensionRequirements>
<span>