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"