forked from treehouse/mastodon
fix(components/media_modal): Style issues (#4187)
parent
0c7c188c45
commit
a9a0c854e1
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue