disable size by js option

app/javascript/mastodon/components/media_gallery.js

@@ -1,19 +1,25 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { is } from 'immutable';
+import {is} from 'immutable';
 import IconButton from './icon_button';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import {defineMessages, FormattedMessage} from 'react-intl';
-import { isIOS } from '../is_mobile';
+import {isIOS} from '../is_mobile';
 import classNames from 'classnames';
-import { autoPlayGif, displayMedia } from '../initial_state';
+import {autoPlayGif, displayMedia} from '../initial_state';
 
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
 });
+const disableCustomSize = true;
 
 class Item extends React.PureComponent {
 
+  mediaWidth = 200;
+  mediaHeight = 500;
+
+
+
   static propTypes = {
     attachment: ImmutablePropTypes.map.isRequired,
     standalone: PropTypes.bool,
@@ -61,19 +67,20 @@ class Item extends React.PureComponent {
   render () {
     const { attachment, index, size, standalone, displayWidth } = this.props;
 
-    let width  = 50;
+    let width = this.mediaWidth;
-    let height = 100;
+    let height = this.mediaHeight;
     let top    = 'auto';
     let left   = 'auto';
     let bottom = 'auto';
     let right  = 'auto';
 
+    // size is the number of pictures attached to the gallery
     if (size === 1) {
-      width = 100;
+      width = this.mediaWidth;
     }
 
     if (size === 4 || (size === 3 && index > 0)) {
-      height = 50;
+      height = this.mediaHeight;
     }
 
     if (size === 2) {
@@ -129,28 +136,48 @@ class Item extends React.PureComponent {
       const x      = ((focusX /  2) + .5) * 100;
       const y      = ((focusY / -2) + .5) * 100;
 
-      thumbnail = (
+      if (disableCustomSize) {
-        <a
+        thumbnail = (
-          className='media-gallery__item-thumbnail'
+          <a
-          href={attachment.get('remote_url') || originalUrl}
+            className='media-gallery__item-thumbnail'
-          onClick={this.handleClick}
+            href={attachment.get('remote_url') || originalUrl}
-          target='_blank'
+            onClick={this.handleClick}
-        >
+            target='_blank'
-          <img
+          >
-            src={previewUrl}
+            <img
-            srcSet={srcSet}
+              src={previewUrl}
-            sizes={sizes}
+              srcSet={srcSet}
-            alt={attachment.get('description')}
+              alt={attachment.get('description')}
-            title={attachment.get('description')}
+              title={attachment.get('description')}
-            style={{ objectPosition: `${x}% ${y}%` }}
+            />
-          />
+          </a>
-        </a>
+        );
-      );
+      } else {
+        // thumbnail resized by the js
+        thumbnail = (
+          <a
+            className='media-gallery__item-thumbnail'
+            href={attachment.get('remote_url') || originalUrl}
+            onClick={this.handleClick}
+            target='_blank'
+          >
+            <img
+              src={previewUrl}
+              srcSet={srcSet}
+              sizes={sizes}
+              alt={attachment.get('description')}
+              title={attachment.get('description')}
+              style={{objectPosition: `${x}% ${y}%`}}
+            />
+          </a>
+        );
+      }
+
     } else if (attachment.get('type') === 'gifv') {
       const autoPlay = !isIOS() && autoPlayGif;
 
       thumbnail = (
-        <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
+        <div className={classNames('media-gallery__gifv', {autoplay: autoPlay})}>
           <video
             className='media-gallery__item-gifv-thumbnail'
             aria-label={attachment.get('description')}
@@ -168,13 +195,27 @@ class Item extends React.PureComponent {
           <span className='media-gallery__gifv__label'>GIF</span>
         </div>
       );
+
     }
 
-    return (
+    let template = '';
-      <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
+    if (disableCustomSize) {
-        {thumbnail}
+      template = (
-      </div>
+        <div className={classNames('media-gallery__item', {standalone})} key={attachment.get('id')}
-    );
+             style={{left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%`}}>
+          {thumbnail}
+        </div>
+      );
+    } else {
+      template = (
+        <div className={classNames('media-gallery__item', {standalone})} key={attachment.get('id')}>
+          {thumbnail}
+        </div>
+      );
+    }
+
+    return template;
+
   }
 
 }
@@ -236,39 +277,68 @@ class MediaGallery extends React.PureComponent {
 
     const style = {};
 
-    if (this.isStandaloneEligible()) {
+    if (!disableCustomSize) {
-      if (width) {
-        style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
-      }
-    } else if (width) {
-      style.height = width / (16/9);
-    } else {
-      style.height = height;
-    }
 
+      if (this.isStandaloneEligible()) {
+        if (width) {
+          style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
+        }
+      } else if (width) {
+        style.height = width / (16/9);
+      } else {
+        style.height = height;
+      }
+
+    }
     if (!visible) {
       let warning;
 
       if (sensitive) {
+      // TODO translate
         warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
       } else {
+      // TODO translate
         warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
       }
+      if (disableCustomSize) {
+        // TODO translate
+        children = (
+          <button type='button' className='media-spoiler' onClick={this.handleOpen} ref={this.handleRef}>
+            <span className='media-spoiler__warning'>{warning}</span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle'
+
+                                                                       defaultMessage='Click to view'/></span>
+          </button>
+        );
+      } else {
+        children = (
+          <button type='button' className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>
+            <span className='media-spoiler__warning'>{warning}</span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle'
+                                                                       defaultMessage='Click to view'/></span>
+          </button>
+        );
+      }
 
-      children = (
-        <button type='button' className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>
-          <span className='media-spoiler__warning'>{warning}</span>
-          <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-        </button>
-      );
     } else {
       const size = media.take(4).size;
 
-      if (this.isStandaloneEligible()) {
+      if (disableCustomSize) {
-        children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} />;
+        if (this.isStandaloneEligible()) {
+          children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width}/>;
+        } else {
+          children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick}
+                                                                attachment={attachment} index={i} size={size}/>);
+        }
       } else {
-        children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} />);
+        if (this.isStandaloneEligible()) {
+          children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width}/>;
+        } else {
+          children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick}
+                                                                attachment={attachment} index={i} size={size}/>);
+        }
       }
+
     }
 
     return (

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -14,6 +14,8 @@ import Video from '../../video';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
+  mediaHeight = 500
+
   static contextTypes = {
     router: PropTypes.object,
   };
@@ -61,7 +63,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             preview={video.get('preview_url')}
             src={video.get('url')}
             alt={video.get('description')}
-            width={300}
+            width={this.mediaHeight}
             height={150}
             inline
             onOpenVideo={this.handleOpenVideo}
@@ -74,7 +76,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             standalone
             sensitive={status.get('sensitive')}
             media={status.get('media_attachments')}
-            height={300}
+            height={this.mediaHeight}
             onOpenMedia={this.props.onOpenMedia}
           />
         );