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

translations always show over video

Browse Source
This commit is contained in:
Lachlan Kermode
2019-08-16 16:05:54 +01:00
parent db83c77e55
commit a6b69ff61d
3 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Overlay/Content.js
View File

@@ -5,7 +5,7 @@ import Md from './Md'
import Spinner from '../presentational/Spinner'
import NoSource from '../presentational/NoSource'
export default ({ media, viewIdx }) => {
export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
const el = document.querySelector(`.source-media-gallery`)
const shiftW = el ? el.getBoundingClientRect().width : 0
@@ -26,6 +26,15 @@ export default ({ media, viewIdx }) => {
case 'Video':
return (
<div className='media-player'>
<div className='banner-trans right-overlay'>
{translations ? translations.map((trans, idx) => (
langIdx !== idx + 1 ? (
<div className='trans-button' onClick={() => switchLanguage(idx + 1)}>{trans.code}</div>
) : (
<div className='trans-button' onClick={() => switchLanguage(0)}>EN</div>
)
)) : null}
</div>
<Player
poster={poster}
className='source-video'

17
src/components/Overlay/Media.js
View File

@@ -49,19 +49,16 @@ class SourceOverlay extends React.Component {
<h3 className='mo-banner-content'>{shortenedTitle}</h3>
<div className='banner-trans'>
{this.props.translations ? this.props.translations.map((trans, idx) => (
this.state.langIdx !== idx + 1 ? (
<div className='trans-button' onClick={() => this.switchLanguage(idx + 1)}>{trans.code}</div>
) : (
<div className='trans-button' onClick={() => this.switchLanguage(0)}>EN</div>
)
)) : null}
</div>
</div>
<div className='mo-container' onClick={e => e.stopPropagation()}>
<div className='mo-media-container'>
<Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewIdx={this.state.mediaIdx} />
<Content
switchLanguage={(lang) => this.switchLanguage(lang)}
translations={this.props.translations}
langIdx={this.state.langIdx}
media={paths.map(p => selectTypeFromPathWithPoster(p, poster))}
viewIdx={this.state.mediaIdx}
/>
</div>
</div>