diff --git a/package.json b/package.json
index c36d369..5f5b977 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index e5e6050..092706b 100644
--- a/src/components/Dashboard.jsx
+++ b/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,
diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx
index 2855038..92ebf66 100644
--- a/src/components/SourceOverlay.jsx
+++ b/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 (
+ //
+ // )
return (
-
+
+
+
)
}
@@ -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()
diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss
index 77b48f2..3ce66aa 100644
--- a/src/scss/mediaoverlay.scss
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index 19f5926..917087e 100644
--- a/yarn.lock
+++ b/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"