bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-11 04:48:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

WIP: video sources

Browse Source
This commit is contained in:
Lachlan Kermode
2018-12-21 12:47:18 +00:00
parent ff7ef5ccb1
commit 670ec6dbb2
5 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -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",

2
src/components/Dashboard.jsx
View File

@@ -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,

31
src/components/SourceOverlay.jsx
View File

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

15
src/scss/mediaoverlay.scss
View File

@@ -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;

8
yarn.lock
View File

@@ -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"