gearheads/mastodon
Archived
2
0
Fork 0
Code Releases 4 Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/mastodon/features/status/components/card.js
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 }}
/>
);
}