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()

src/scss/mediaoverlay.scss

@@ -1,7 +1,7 @@
 $panel-width: 800px;
 $panel-height: 800px;
-$vimeo-width: $panel-width;
-$vimeo-height: $panel-height;
+$vimeo-width: $panel-width - 100;
+// $vimeo-height: $panel-height - 100;
 
 $header-inset: 10px;
 
@@ -67,8 +67,13 @@ $header-inset: 10px;
 .mo-media-container {
   padding-top: 3*$header-inset;
   font-family: "Lato", Helvetica, sans-serif;
-  max-height: $vimeo-height;
+  // max-height: $vimeo-height;
   min-width: 100%;
+
+  .media-player {
+    width: 100%;
+    max-width: $vimeo-width;
+  }
 }
 
 .mo-meta-container {
@@ -100,8 +105,8 @@ $header-inset: 10px;
 }
 
 .vimeo-iframe {
-  min-height: $vimeo-height;
-  max-height: $vimeo-height;
+  // min-height: $vimeo-height;
+  // max-height: $vimeo-height;
   min-width: $vimeo-width;
   max-width: $vimeo-width;
   border: none;