From d540e9e4cae7a88b2c499a69395ce93ae475b55d Mon Sep 17 00:00:00 2001
From: Logan Tegman <ltegman@gmail.com>
Date: Wed, 4 May 2016 10:30:47 -0700
Subject: [PATCH] Switch react lecture component to youtube

---
 common/app/routes/Hikes/components/Lecture.jsx | 11 ++++++-----
 package.json                                   |  2 +-
 server/middlewares/csp.js                      |  4 +++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/common/app/routes/Hikes/components/Lecture.jsx b/common/app/routes/Hikes/components/Lecture.jsx
index c214cfc984..42dd83a775 100644
--- a/common/app/routes/Hikes/components/Lecture.jsx
+++ b/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>
diff --git a/package.json b/package.json
index 739e202db7..a06a2aa556 100644
--- a/package.json
+++ b/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",
diff --git a/server/middlewares/csp.js b/server/middlewares/csp.js
index 33948c028d..70ceb42529 100644
--- a/server/middlewares/csp.js
+++ b/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'",