WIP: video sources

src/components/Dashboard.jsx

@@ -159,7 +159,7 @@ export default connect(
     ...state,
     app: {
       ...state.app,
-      source: state.domain.sources["24Kanal - Chervonosilske Damaged Tank Photo"]
+      source: state.domain.sources["Anna News - Horbatenko Tanks Video"]
     }
   }),
   // state => state,

src/components/SourceOverlay.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Img from 'react-image'
+import { Media, Player, controls } from 'react-media-player'
 import Spinner from './presentational/Spinner'
 import NoSource from './presentational/NoSource'
 
@@ -10,15 +11,28 @@ class SourceOverlay extends React.Component {
   }
 
   renderVideo() {
+    // return (
+    //   <iframe
+    //     className="vimeo-iframe"
+    //     src="https://player.vimeo.com/video/33044546"
+    //     frameborder="0"
+    //     webkitallowfullscreen
+    //     mozallowfullscreen
+    //     allowfullscreen
+    //   ></iframe>
+    // )
     return (
-      <iframe
-        className="vimeo-iframe"
-        src="https://player.vimeo.com/video/33044546"
-        frameborder="0"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen
-      ></iframe>
+      <Media>
+        <div className="media">
+          <div className="media-player">
+            <Player src="https://player.vimeo.com/video/33044546" />
+          </div>
+          <div className="media-controls">
+            <controls.PlayPause/>
+            <controls.MuteUnmute/>
+          </div>
+        </div>
+      </Media>
     )
   }
 
@@ -47,6 +61,7 @@ class SourceOverlay extends React.Component {
   }
 
   _renderSwitch() {
+    console.table(this.props.source)
     switch(this.props.source.type) {
       case 'Video':
         return this.renderVideo()