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

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 (
       <div
+        ref={this.setRef}
         className='status-card-video'
         dangerouslySetInnerHTML={content}
+        style={{ height }}
       />
     );
   }
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%;
   }
 }