Switch react lecture component to youtube

common/app/routes/Hikes/components/Lecture.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Button, Col, Row } from 'react-bootstrap';
-import Vimeo from 'react-vimeo';
+import Youtube from 'react-youtube';
 import { createSelector } from 'reselect';
 import debug from 'debug';
 
@@ -34,7 +34,7 @@ export class Lecture extends React.Component {
     // actions
     toggleQuestionView: PropTypes.func,
     // ui
-    id: PropTypes.number,
+    id: PropTypes.string,
     description: PropTypes.array,
     dashedName: PropTypes.string,
     hardGoTo: PropTypes.func
@@ -74,10 +74,11 @@ export class Lecture extends React.Component {
     return (
       <Col xs={ 12 }>
         <Row>
-          <Vimeo
+          <Youtube
+            id='player_1'
+            onEnd={ toggleQuestionView }
             onError={ this.handleError }
-            onFinish= { toggleQuestionView }
-            videoId={ '' + id } />
+            videoId={ id } />
         </Row>
         <Row>
           <article>

package.json

@@ -112,7 +112,7 @@
     "react-router-bootstrap": "~0.20.1",
     "react-router-redux": "^2.1.0",
     "react-toastr": "^2.4.0",
-    "react-vimeo": "~0.1.0",
+    "react-youtube": "^6.1.0",
     "redux": "^3.0.5",
     "redux-actions": "^0.9.1",
     "redux-form": "^4.1.4",

server/middlewares/csp.js

@@ -25,7 +25,9 @@ export default function csp() {
         'https://*.jsdelivr.com',
         '*.jsdelivr.com',
         '*.twimg.com',
-        'https://*.twimg.com'
+        'https://*.twimg.com',
+        '*.youtube.com',
+        '*.ytimg.com'
       ].concat(trusted),
       styleSrc: [
         "'unsafe-inline'",