From 684001d729a4684ab00a24e31ec39f8cae6e37a7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 8 Oct 2017 02:34:49 +0200 Subject: [PATCH] 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 --- .../features/status/components/card.js | 19 +++++++++++++++++-- app/javascript/styles/components.scss | 17 ++--------------- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index 41c4300d3..bb83374b9 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -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 (
); } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index d578e9930..b6da70c91 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -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%; } }