mirror of https://github.com/Siphonay/mastodon
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:
parent
292f3cd7e0
commit
684001d729
|
@ -30,6 +30,10 @@ export default class Card extends React.PureComponent {
|
||||||
maxDescription: 50,
|
maxDescription: 50,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
width: 0,
|
||||||
|
};
|
||||||
|
|
||||||
renderLink () {
|
renderLink () {
|
||||||
const { card, maxDescription } = this.props;
|
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 () {
|
renderVideo () {
|
||||||
const { card } = this.props;
|
const { card } = this.props;
|
||||||
const content = { __html: card.get('html') };
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
|
ref={this.setRef}
|
||||||
className='status-card-video'
|
className='status-card-video'
|
||||||
dangerouslySetInnerHTML={content}
|
dangerouslySetInnerHTML={content}
|
||||||
|
style={{ height }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -2155,22 +2155,9 @@ button.icon-button.active i.fa-retweet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card-video {
|
.status-card-video {
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
padding-top: 56.25%;
|
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
top: 0;
|
height: 100%;
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 1px;
|
|
||||||
min-width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
min-height: 100%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue