moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rich media improvements, fixes #633

This commit is contained in:
Alex Gleason 2021-05-11 16:54:12 -05:00
parent f5441f30bc
commit c6e6c07f49
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/soapbox/features/status/components/card.js
View File

@ -45,6 +45,7 @@ const addAutoPlay = html => {
}
iframe.src += 'autoplay=1&auto_play=1';
iframe.allow = 'autoplay';
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
@ -71,7 +72,7 @@ export default class Card extends React.PureComponent {
};
state = {
width: this.props.defaultWidth || 280,
width: this.props.defaultWidth || 467,
embedded: false,
};
@ -121,12 +122,10 @@ export default class Card extends React.PureComponent {
renderVideo() {
const { card } = this.props;
const cardWidth = card.get('width', card.getIn(['pleroma', 'opengraph', 'width']));
const cardHeight = card.get('height', card.getIn(['pleroma', 'opengraph', 'height']));
const html = card.get('html', card.getIn(['pleroma', 'opengraph', 'html']));
const content = { __html: addAutoPlay(html) };
const { width } = this.state;
const ratio = cardWidth / cardHeight;
const ratio = this.getRatio(card);
const height = width / ratio;
return (
@ -139,6 +138,21 @@ export default class Card extends React.PureComponent {
);
}
getRatio = card => {
const width = card.get('width', card.getIn(['pleroma', 'opengraph', 'width']));
const height = card.get('height', card.getIn(['pleroma', 'opengraph', 'height']));
const ratio = width / height;
// Invalid dimensions, fall back to 16:9
if (typeof width !== 'number' || typeof height !== 'number') {
return 16 / 9;
}
// Constrain to a sane limit
// https://en.wikipedia.org/wiki/Aspect_ratio_(image)
return Math.min(Math.max(9 / 16, ratio), 4);
}
render() {
const { card, maxDescription, compact } = this.props;
const { width, embedded } = this.state;
@ -154,7 +168,7 @@ export default class Card extends React.PureComponent {
const horizontal = (!compact && cardWidth > cardHeight && (cardWidth + 100 >= width)) || interactive || embedded;
const className = classnames('status-card', { horizontal, compact, interactive });
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const ratio = cardWidth / cardHeight;
const ratio = this.getRatio(card);
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
const description = (

4
app/styles/components/status.scss
View File

@ -545,8 +545,8 @@ a.status-card {
.status-card-video,
.status-card-audio {
iframe {
width: 100%;
height: 100%;
width: 100% !important;
height: 100% !important;
}
}