bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor oembed card to work with videos on Pleroma

Browse source
This commit is contained in:
Alex Gleason 2020-08-15 19:40:08 -05:00
parent 99d96ed901
commit 9afac986fb
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/soapbox/features/status/components/card.js
View file

@ -121,9 +121,12 @@ export default class Card extends React.PureComponent {
renderVideo() { renderVideo() {
const { card } = this.props; const { card } = this.props;
const content = { __html: addAutoPlay(card.get('html')) }; 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 { width } = this.state;
const ratio = card.get('width') / card.get('height'); const ratio = cardWidth / cardHeight;
const height = width / ratio; const height = width / ratio;
return ( return (
@ -144,12 +147,14 @@ export default class Card extends React.PureComponent {
return null; return null;
} }
const cardWidth = card.get('width', card.getIn(['pleroma', 'opengraph', 'width']));
const cardHeight = card.get('height', card.getIn(['pleroma', 'opengraph', 'height']));
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded; const interactive = card.get('type') !== 'link' || card.getIn(['pleroma', 'opengraph', 'html']);
const interactive = card.get('type') !== 'link'; const horizontal = (!compact && cardWidth > cardHeight && (cardWidth + 100 >= width)) || interactive || embedded;
const className = classnames('status-card', { horizontal, compact, interactive }); 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 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 = card.get('width') / card.get('height'); const ratio = cardWidth / cardHeight;
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
const description = ( const description = (
@ -161,7 +166,8 @@ export default class Card extends React.PureComponent {
); );
let embed = ''; let embed = '';
let thumbnail = <div style={{ backgroundImage: `url(${card.get('image')})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />; const imageUrl = card.get('image') || card.getIn(['pleroma', 'opengraph', 'thumbnail_url']);
let thumbnail = <div style={{ backgroundImage: `url(${imageUrl})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />;
if (interactive) { if (interactive) {
if (embedded) { if (embedded) {