diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index ed0e4ff1b..a1290f9af 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/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 { isIOS } from '../is_mobile';
+import {defineMessages, FormattedMessage} from 'react-intl';
+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 height = 100;
+ let width = this.mediaWidth;
+ 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) {
+ thumbnail = (
+
+
+
+ );
+ } else {
+ // thumbnail resized by the js
+ thumbnail = (
+
+
+
+ );
+ }
+
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && autoPlayGif;
thumbnail = (
-
+
);
+
}
- return (
-
- {thumbnail}
-
- );
+ let template = '';
+ if (disableCustomSize) {
+ template = (
+
+ {thumbnail}
+
+ );
+ } else {
+ template = (
+
+ {thumbnail}
+
+ );
+ }
+
+ return template;
+
}
}
@@ -236,39 +277,68 @@ class MediaGallery extends React.PureComponent {
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);
- } else {
- style.height = height;
- }
+ if (!disableCustomSize) {
+ 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 =
;
} else {
+ // TODO translate
warning =
;
}
+ if (disableCustomSize) {
+ // TODO translate
+ children = (
+
+ );
+ } else {
+ children = (
+
+ );
+ }
- children = (
-
- );
} else {
const size = media.take(4).size;
- if (this.isStandaloneEligible()) {
- children =
;
+ if (disableCustomSize) {
+ if (this.isStandaloneEligible()) {
+ children =
- ;
+ } else {
+ children = media.take(4).map((attachment, i) =>
- );
+ }
} else {
- children = media.take(4).map((attachment, i) =>
);
+ if (this.isStandaloneEligible()) {
+ children = - ;
+ } else {
+ children = media.take(4).map((attachment, i) =>
- );
+ }
}
+
}
return (
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index b0dea8817..16be65315 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/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}
/>
);