treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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

lolsob-rspec
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 = { static propTypes = {
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
time: PropTypes.number, time: PropTypes.number,
controls: PropTypes.bool.isRequired, controls: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired, muted: PropTypes.bool.isRequired,
@ -30,7 +32,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
render () { render () {
return ( return (
<div className='extended-video-player'> <div className='extended-video-player' style={{ width: this.props.width, height: this.props.height }}>
<video <video
ref={this.setRef} ref={this.setRef}
src={this.props.src} 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 { media, intl, onClose } = this.props;
const index = this.getIndex(); const index = this.getIndex();
const attachment = media.get(index);
const url = attachment.get('url');
let leftNav, rightNav, content; 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>; 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) => {
content = media.map((image) => { const width = image.getIn(['meta', 'original', 'width']) || null;
const width = image.getIn(['meta', 'original', 'width']) || null; const height = image.getIn(['meta', 'original', 'height']) || 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')} />; return <ImageLoader previewSrc={image.get('preview_url')} src={image.get('url')} width={width} height={height} key={image.get('preview_url')} />;
}).toArray(); } else if (image.get('type') === 'gifv') {
} else if (attachment.get('type') === 'gifv') { return <ExtendedVideoPlayer src={image.get('url')} muted controls={false} width={width} height={height} key={image.get('preview_url')} />;
content = <ExtendedVideoPlayer src={url} muted controls={false} />; }
}
return null;
}).toArray();
return ( return (
<div className='modal-root__modal media-modal'> <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; max-height: 80vh;
position: relative; position: relative;
.extended-video-player,
img, img,
canvas, canvas,
video { video {
@ -2966,6 +2967,13 @@ button.icon-button.active i.fa-retweet {
height: auto; height: auto;
} }
.extended-video-player,
video {
display: flex;
width: 80vw;
height: 80vh;
}
img, img,
canvas { canvas {
display: block; display: block;