me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Sorin Davidoi 2017-07-13 22:18:18 +02:00 committed by Eugen Rochko
parent ecab38fd66
commit b047d5c747
3 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/mastodon/components/extended_video_player.js
View file

@ -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}

20
app/javascript/mastodon/features/ui/components/media_modal.js
View file

@ -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'>

8
app/javascript/styles/components.scss
View file

@ -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;