about summary refs log tree commit diff
path: root/app/javascript/flavours
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-04-14 19:38:00 +0200
committerThibaut Girka <thib@sitedethib.com>2018-04-19 11:16:18 +0200
commitf1e25b672a800b2536624d9bee2e8badf50566f2 (patch)
tree30cc5adc46968d4fe8a6e4f54a5e387b3eb07e3d /app/javascript/flavours
parenta95f8271beba85ead81487f6e7c4ba372d4b454c (diff)
Use javascript to set MediaGallery height automatically
Diffstat (limited to 'app/javascript/flavours')
-rw-r--r--app/javascript/flavours/glitch/components/media_gallery.js23
1 files changed, 21 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index a2219378e..84bf4e39f 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -225,6 +225,15 @@ export default class MediaGallery extends React.PureComponent {
     this.props.onOpenMedia(this.props.media, index);
   }
 
+  handleRef = (node) => {
+    if (node && this.isStandaloneEligible()) {
+      // offsetWidth triggers a layout, so only calculate when we need to
+      this.setState({
+        width: node.offsetWidth,
+      });
+    }
+  }
+
   isStandaloneEligible() {
     const { media, standalone } = this.props;
     return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
@@ -232,11 +241,21 @@ export default class MediaGallery extends React.PureComponent {
 
   render () {
     const { media, intl, sensitive, letterbox, fullwidth } = this.props;
-    const { visible } = this.state;
+    const { width, visible } = this.state;
     const size = media.take(4).size;
 
     let children;
 
+    const style = {};
+
+    if (this.isStandaloneEligible()) {
+      if (width) {
+        style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
+      }
+    } else if (width) {
+      style.height = width / (16/9);
+    }
+
     if (!visible) {
       let warning = <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />;
 
@@ -257,7 +276,7 @@ export default class MediaGallery extends React.PureComponent {
     const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
 
     return (
-      <div className={computedClass}>
+      <div className={computedClass} style={style} ref={this.handleRef}>
         {visible ? (
           <div className='sensitive-info'>
             <IconButton