Commit a9a0c854 authored by Sorin Davidoi's avatar Sorin Davidoi Committed by Eugen Rochko

fix(components/media_modal): Style issues (#4187)

parent 0c7c188c
......@@ -5,6 +5,8 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
static propTypes = {
src: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
time: PropTypes.number,
controls: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired,
......@@ -30,7 +32,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
render () {
return (
<div className='extended-video-player'>
<div className='extended-video-player' style={{ width: this.props.width, height: this.props.height }}>
<video
ref={this.setRef}
src={this.props.src}
......
......@@ -65,8 +65,6 @@ export default class MediaModal extends ImmutablePureComponent {
const { media, intl, onClose } = this.props;
const index = this.getIndex();
const attachment = media.get(index);
const url = attachment.get('url');
let leftNav, rightNav, content;
......@@ -77,16 +75,18 @@ export default class MediaModal extends ImmutablePureComponent {
rightNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--right' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
}
if (attachment.get('type') === 'image') {
content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null;
content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null;
if (image.get('type') === 'image') {
return <ImageLoader previewSrc={image.get('preview_url')} src={image.get('url')} width={width} height={height} key={image.get('preview_url')} />;
}).toArray();
} else if (attachment.get('type') === 'gifv') {
content = <ExtendedVideoPlayer src={url} muted controls={false} />;
}
} else if (image.get('type') === 'gifv') {
return <ExtendedVideoPlayer src={image.get('url')} muted controls={false} width={width} height={height} key={image.get('preview_url')} />;
}
return null;
}).toArray();
return (
<div className='modal-root__modal media-modal'>
......
......@@ -2957,6 +2957,7 @@ button.icon-button.active i.fa-retweet {
max-height: 80vh;
position: relative;
.extended-video-player,
img,
canvas,
video {
......@@ -2966,6 +2967,13 @@ button.icon-button.active i.fa-retweet {
height: auto;
}
.extended-video-player,
video {
display: flex;
width: 80vw;
height: 80vh;
}
img,
canvas {
display: block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment