Media display improvements

- built in fullwidth styling
 - letterbox settings toggle
 - media no longer counts towards height when making toot-collapsing
measurements

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

@@ -20,6 +20,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
     onOpenVideo: PropTypes.func.isRequired,
     autoPlayGif: PropTypes.bool,
@@ -36,6 +37,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   render () {
     const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
+    const { settings } = this.props;
 
     let media           = '';
     let mediaIcon       = null;
@@ -45,10 +47,28 @@ export default class DetailedStatus extends ImmutablePureComponent {
       if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
         media = <AttachmentList media={status.get('media_attachments')} />;
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
+        media = (
+          <VideoPlayer
+            sensitive={status.get('sensitive')}
+            media={status.getIn(['media_attachments', 0])}
+            letterbox={settings.getIn(['media', 'letterbox'])}
+            height={250}
+            onOpenVideo={this.props.onOpenVideo}
+            autoplay
+          />
+        );
         mediaIcon = 'video-camera';
       } else {
-        media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
+        media = (
+          <MediaGallery
+            sensitive={status.get('sensitive')}
+            media={status.get('media_attachments')}
+            letterbox={settings.getIn(['media', 'letterbox'])}
+            height={250}
+            onOpenMedia={this.props.onOpenMedia}
+            autoPlayGif={this.props.autoPlayGif}
+          />
+        );
         mediaIcon = 'picture-o';
       }
     } else media = <CardContainer statusId={status.get('id')} />;

app/javascript/mastodon/features/status/index.js

@@ -37,6 +37,7 @@ const makeMapStateToProps = () => {
 
   const mapStateToProps = (state, props) => ({
     status: getStatus(state, Number(props.params.statusId)),
+    settings: state.get('local_settings'),
     ancestorsIds: state.getIn(['contexts', 'ancestors', Number(props.params.statusId)]),
     descendantsIds: state.getIn(['contexts', 'descendants', Number(props.params.statusId)]),
     me: state.getIn(['meta', 'me']),
@@ -60,6 +61,7 @@ export default class Status extends ImmutablePureComponent {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
+    settings: ImmutablePropTypes.map.isRequired,
     ancestorsIds: ImmutablePropTypes.list,
     descendantsIds: ImmutablePropTypes.list,
     me: PropTypes.number,
@@ -143,7 +145,7 @@ export default class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants;
-    const { status, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
+    const { status, settings, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
 
     if (status === null) {
       return (
@@ -172,6 +174,7 @@ export default class Status extends ImmutablePureComponent {
 
             <DetailedStatus
               status={status}
+              settings={settings}
               autoPlayGif={autoPlayGif}
               me={me}
               onOpenVideo={this.handleOpenVideo}

app/javascript/mastodon/features/ui/components/settings_modal.js

@@ -168,12 +168,28 @@ export default class SettingsModal extends React.PureComponent {
     );
   }
 
+  Media = () => {
+    return (
+      <div>
+        <h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
+        <SettingsItem
+          settings={this.props.settings}
+          item={['media', 'letterbox']}
+          id='mastodon-settings--media-letterbox'
+          onChange={this.props.toggleSetting}
+        >
+          <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
+        </SettingsItem>
+      </div>
+    );
+  }
+
   navigateTo = (e) =>
     this.setState({ currentIndex: +e.currentTarget.getAttribute('data-mastodon-navigation_index') });
 
   render () {
 
-    const { General, CollapsedStatuses, navigateTo } = this;
+    const { General, CollapsedStatuses, Media, navigateTo } = this;
     const { onClose } = this.props;
     const { currentIndex } = this.state;
 
@@ -187,8 +203,11 @@ export default class SettingsModal extends React.PureComponent {
           <a onClick={navigateTo} role='button' data-mastodon-navigation_index='1' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 1 ? ' active' : ''}`}>
             <FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' />
           </a>
+          <a onClick={navigateTo} role='button' data-mastodon-navigation_index='2' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 2 ? ' active' : ''}`}>
+            <FormattedMessage id='settings.media' defaultMessage='Media' />
+          </a>
           <a href='/settings/preferences' className='settings-modal__navigation-item'>
-            <i className='fa fa-fw fa-cogs' /> <FormattedMessage id='settings.preferences' defaultMessage='User preferences' />
+            <i className='fa fa-fw fa-cog' /> <FormattedMessage id='settings.preferences' defaultMessage='User preferences' />
           </a>
           <a onClick={onClose} role='button' tabIndex='0' className='settings-modal__navigation-close'>
             <FormattedMessage id='settings.close' defaultMessage='Close' />
@@ -201,6 +220,7 @@ export default class SettingsModal extends React.PureComponent {
             [
               <General />,
               <CollapsedStatuses />,
+              <Media />,
             ][currentIndex] || <General />
           }
         </div>