Dynamically calculate card height for embeds instead of padding (#5265)

The padding trick was hard-coded to a 16:9 ratio, but we can use
width and height provided from OEmbed information and width
of the card itself to calculate a new height
This commit is contained in:
Eugen Rochko 2017-10-08 02:34:49 +02:00 committed by GitHub
parent 292f3cd7e0
commit 684001d729
2 changed files with 19 additions and 17 deletions

View file

@ -30,6 +30,10 @@ export default class Card extends React.PureComponent {
maxDescription: 50,
};
state = {
width: 0,
};
renderLink () {
const { card, maxDescription } = this.props;
@ -75,14 +79,25 @@ export default class Card extends React.PureComponent {
);
}
setRef = c => {
if (c) {
this.setState({ width: c.offsetWidth });
}
}
renderVideo () {
const { card } = this.props;
const content = { __html: card.get('html') };
const { card } = this.props;
const content = { __html: card.get('html') };
const { width } = this.state;
const ratio = card.get('width') / card.get('height');
const height = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio);
return (
<div
ref={this.setRef}
className='status-card-video'
dangerouslySetInnerHTML={content}
style={{ height }}
/>
);
}

View file

@ -2155,22 +2155,9 @@ button.icon-button.active i.fa-retweet {
}
.status-card-video {
position: relative;
width: 100%;
height: auto;
padding-top: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 1px;
min-width: 100%;
height: 1px;
min-height: 100%;
margin: auto;
width: 100%;
height: 100%;
}
}