WIP: video sources

package.json

@@ -20,8 +20,9 @@
     "object-hash": "^1.3.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-portal": "^4.2.0",
     "react-image": "^1.5.1",
+    "react-media-player": "^0.7.5",
+    "react-portal": "^4.2.0",
     "react-redux": "^5.0.4",
     "react-tabs": "^1.0.0",
     "redux": "^3.6.0",

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
+      <Media>
-        className="vimeo-iframe"
+        <div className="media">
-        src="https://player.vimeo.com/video/33044546"
+          <div className="media-player">
-        frameborder="0"
+            <Player src="https://player.vimeo.com/video/33044546" />
-        webkitallowfullscreen
+          </div>
-        mozallowfullscreen
+          <div className="media-controls">
-        allowfullscreen
+            <controls.PlayPause/>
-      ></iframe>
+            <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-width: $panel-width - 100;
-$vimeo-height: $panel-height;
+// $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;
+  // min-height: $vimeo-height;
-  max-height: $vimeo-height;
+  // max-height: $vimeo-height;
   min-width: $vimeo-width;
   max-width: $vimeo-width;
   border: none;

yarn.lock

@@ -4967,7 +4967,7 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
-prop-types@15.6.2, prop-types@^15.5.0, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@15.6.2, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -5102,6 +5102,12 @@ react-image@^1.5.1:
     "@babel/runtime" "^7.0.0"
     prop-types "15.6.2"
 
+react-media-player@^0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/react-media-player/-/react-media-player-0.7.5.tgz#4ada5cba5814d1121a8690ba89e520e5d5210975"
+  dependencies:
+    prop-types "^15.5.10"
+
 react-portal@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"