Changeset View
Changeset View
Standalone View
Standalone View
web/media/multimedia-modal.react.js
// @flow | // @flow | ||||
import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { XCircle as XCircleIcon } from 'react-feather'; | import { XCircle as XCircleIcon } from 'react-feather'; | ||||
import { useModalContext } from 'lib/components/modal-provider.react.js'; | import { useModalContext } from 'lib/components/modal-provider.react.js'; | ||||
import css from './media.css'; | import css from './media.css'; | ||||
type BaseProps = { | type BaseProps = { | ||||
+type: string, | |||||
+uri: string, | +uri: string, | ||||
}; | }; | ||||
type Props = { | type Props = { | ||||
...BaseProps, | ...BaseProps, | ||||
+popModal: (modal: ?React.Node) => void, | +popModal: (modal: ?React.Node) => void, | ||||
}; | }; | ||||
class MultimediaModal extends React.PureComponent<Props> { | class MultimediaModal extends React.PureComponent<Props> { | ||||
overlay: ?HTMLDivElement; | overlay: ?HTMLDivElement; | ||||
componentDidMount() { | componentDidMount() { | ||||
invariant(this.overlay, 'overlay ref unset'); | invariant(this.overlay, 'overlay ref unset'); | ||||
this.overlay.focus(); | this.overlay.focus(); | ||||
} | } | ||||
render(): React.Node { | render(): React.Node { | ||||
let mediaModalItem; | |||||
if (this.props.type === 'photo') { | |||||
mediaModalItem = <img src={this.props.uri} />; | |||||
} else { | |||||
mediaModalItem = ( | |||||
<video controls> | |||||
<source src={this.props.uri} /> | |||||
</video> | |||||
); | |||||
} | |||||
return ( | return ( | ||||
<div | <div | ||||
className={css.multimediaModalOverlay} | className={css.multimediaModalOverlay} | ||||
ref={this.overlayRef} | ref={this.overlayRef} | ||||
onClick={this.onBackgroundClick} | onClick={this.onBackgroundClick} | ||||
tabIndex={0} | tabIndex={0} | ||||
onKeyDown={this.onKeyDown} | onKeyDown={this.onKeyDown} | ||||
> | > | ||||
<img src={this.props.uri} /> | {mediaModalItem} | ||||
<XCircleIcon | <XCircleIcon | ||||
onClick={this.props.popModal} | onClick={this.props.popModal} | ||||
className={css.closeMultimediaModal} | className={css.closeMultimediaModal} | ||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
Show All 26 Lines |