Merge pull request #15187 from raisedadead/fix/placeholder-project-view

fix(frontend-projects): replace video with image thumbnail

common/app/routes/challenges/views/backend/Back-End.jsx

@@ -146,6 +146,7 @@ export class BackEnd extends PureComponent {
             </form>
           </Row>
           <Row>
+            <br/>
             <Output
               defaultOutput={
 `/**

common/app/routes/challenges/views/project/Project.jsx

@@ -1,9 +1,8 @@
 import React, { PropTypes } from 'react';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
-import Youtube from 'react-youtube';
 import PureComponent from 'react-pure-render/component';
-import { Col, Row } from 'react-bootstrap';
+import { Col, Row, Image } from 'react-bootstrap';
 
 import SidePanel from './Side-Panel.jsx';
 import ToolPanel from './Tool-Panel.jsx';
@@ -18,13 +17,13 @@ const mapStateToProps = createSelector(
       challenge: {
         id,
         description,
-        challengeSeed: [ videoId = '' ] = []
+        image
       } = {},
       title
     }
   ) => ({
     id,
-    videoId,
+    image,
     title,
     description
   })
@@ -32,9 +31,9 @@ const mapStateToProps = createSelector(
 const propTypes = {
   description: PropTypes.arrayOf(PropTypes.string),
   id: PropTypes.string,
+  image: PropTypes.string,
   isCompleted: PropTypes.bool,
-  title: PropTypes.string,
+  title: PropTypes.string
-  videoId: PropTypes.string
 };
 
 export class Project extends PureComponent {
@@ -42,10 +41,11 @@ export class Project extends PureComponent {
     const {
       id,
       title,
-      videoId,
+      image,
       isCompleted,
       description
     } = this.props;
+    const imageURL = '//i.imgur.com/' + image + '.png';
     return (
       <Row>
         <Col md={ 4 }>
@@ -59,9 +59,10 @@ export class Project extends PureComponent {
           md={ 8 }
           xs={ 12 }
           >
-          <Youtube
+          <Image
             id={ id }
-            videoId={ videoId }
+            responsive={ true }
+            src={ imageURL }
           />
           <br />
           <ToolPanel />

common/models/challenge.json

@@ -65,6 +65,9 @@
     "description": {
       "type": "array"
     },
+    "image": {
+      "type": "string"
+    },
     "tests": {
       "type": "array"
     },

seed/challenges/03-front-end-libraries/front-end-libraries-projects.json

@@ -14,9 +14,7 @@
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freeCodeCamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
-      "challengeSeed": [
+      "image": "A9mEKIF",
-        "A9mEKIF"
-      ],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
@@ -43,9 +41,7 @@
         "Remember to use the <a href='https://forum.freeCodeCamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
       "releasedOn": "January 10, 2017",
-      "challengeSeed": [
+      "image": "FFDvuCP",
-        "FFDvuCP"
-      ],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
@@ -72,9 +68,7 @@
         "Remember to use the <a href='https://forum.freeCodeCamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
       "releasedOn": "February 17, 2017",
-      "challengeSeed": [
+      "image": "OkeFgKL",
-        "OkeFgKL"
-      ],
       "tests": [],
       "type": "zipline",
       "isRequired": true,
@@ -102,9 +96,7 @@
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freeCodeCamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
-      "challengeSeed": [
+      "image": "xlAXPjX",
-        "xlAXPjX"
-      ],
       "tests": [],
       "type": "zipline",
       "challengeType": 3,
@@ -126,9 +118,7 @@
         "Once you're done, submit the URL to your working project with all its tests passing.",
         "Remember to use the <a href='https://forum.freeCodeCamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
       ],
-      "challengeSeed": [
+      "image": "u5RTBt4",
-        "u5RTBt4"
-      ],
       "tests": [],
       "type": "zipline",
       "isRequired": true,