scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add extension video component to wedo and ev3 pages

Browse source
This commit is contained in:
Eric Rosenbaum 2018-12-05 17:25:07 -05:00
parent d206b44abe
commit 8c6013b243
4 changed files with 40 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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;

9
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,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>

20
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');
@ -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>