bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-07-03 07:28:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Using prettier for linting

Browse Source
This commit is contained in:
Zac Ioannidis
2020-12-08 13:13:50 +00:00
parent fa329066e4
commit 81e00fd917
111 changed files with 3986 additions and 3294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,76 +1,94 @@
import React from 'react'
import { Player } from 'video-react'
import Img from 'react-image'
import Md from './Md'
import Spinner from '../presentational/Spinner'
import NoSource from '../presentational/NoSource'
import React from "react";
import { Player } from "video-react";
import Img from "react-image";
import Md from "./Md";
import Spinner from "../presentational/Spinner";
import NoSource from "../presentational/NoSource";
export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
const el = document.querySelector(`.source-media-gallery`)
const shiftW = el ? el.getBoundingClientRect().width : 0
const el = document.querySelector(".source-media-gallery");
const shiftW = el ? el.getBoundingClientRect().width : 0;
function renderMedia (media) {
let { path, type, poster } = media
function renderMedia(media) {
const { path, type, poster } = media;
switch (type) {
case 'Image':
case "Image":
return (
<div className='source-image-container'>
<div className="source-image-container">
<Img
className='source-image'
className="source-image"
src={path}
loader={<div className='source-image-loader'><Spinner /></div>}
unloader={<NoSource failedUrls={[ path ]} />}
onClick={() => window.open(path, '_blank')}
loader={
<div className="source-image-loader">
<Spinner />
</div>
}
unloader={<NoSource failedUrls={[path]} />}
onClick={() => window.open(path, "_blank")}
/>
</div>
)
case 'Video':
);
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 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'
className="source-video"
playsInline
src={path}
/>
</div>
)
case 'Text':
);
case "Text":
return (
<div className='source-text-container'>
<div className="source-text-container">
<Md
path={path}
loader={<Spinner />}
unloader={() => this.renderError()}
/>
</div>
)
case 'Document':
return (
<iframe className='source-document' src={path} />
)
);
case "Document":
return <iframe className="source-document" src={path} />;
default:
return (
<NoSource failedUrls={[`Application does not support extension: ${path.split('.')[1]}`]} />
)
<NoSource
failedUrls={[
`Application does not support extension: ${path.split(".")[1]}`,
]}
/>
);
}
}
return (
<div
className='source-media-gallery'
className="source-media-gallery"
style={{ transform: `translate(${viewIdx * -shiftW}px)` }}
>
{media.map((m) => renderMedia(m))}
</div>
)
}
);
};