Added a toggle for full-width media previews

app/javascript/mastodon/components/media_gallery.js

@@ -141,6 +141,7 @@ export default class MediaGallery extends React.PureComponent {
     sensitive: PropTypes.bool,
     media: ImmutablePropTypes.list.isRequired,
     letterbox: PropTypes.bool,
+    fullwidth: PropTypes.bool,
     height: PropTypes.number.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -160,7 +161,7 @@ export default class MediaGallery extends React.PureComponent {
   }
 
   render () {
-    const { media, intl, sensitive, letterbox } = this.props;
+    const { media, intl, sensitive, letterbox, fullwidth } = this.props;
 
     let children;
 
@@ -185,7 +186,7 @@ export default class MediaGallery extends React.PureComponent {
     }
 
     return (
-      <div className='media-gallery' style={{ height: `${this.props.height}px` }}>
+      <div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
         <div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
           <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
         </div>

app/javascript/mastodon/components/status.js

@@ -626,6 +626,7 @@ backgrounds for collapsed statuses are enabled.
             media={attachments.get(0)}
             sensitive={status.get('sensitive')}
             letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
             height={250}
             onOpenVideo={onOpenVideo}
           />
@@ -637,6 +638,7 @@ backgrounds for collapsed statuses are enabled.
             media={attachments}
             sensitive={status.get('sensitive')}
             letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
             height={250}
             onOpenMedia={onOpenMedia}
             autoPlayGif={autoPlayGif}

app/javascript/mastodon/components/video_player.js

@@ -17,6 +17,7 @@ export default class VideoPlayer extends React.PureComponent {
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
     letterbox: PropTypes.bool,
+    fullwidth: PropTypes.bool,
     height: PropTypes.number,
     sensitive: PropTypes.bool,
     intl: PropTypes.object.isRequired,
@@ -110,7 +111,7 @@ export default class VideoPlayer extends React.PureComponent {
   }
 
   render () {
-    const { media, intl, letterbox, height, sensitive, autoplay } = this.props;
+    const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
 
     let spoilerButton = (
       <div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
@@ -156,7 +157,7 @@ export default class VideoPlayer extends React.PureComponent {
 
     if (this.state.preview && !autoplay) {
       return (
-        <div role='button' tabIndex='0' className='media-spoiler-video' style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
+        <div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
           {spoilerButton}
           <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
         </div>
@@ -172,7 +173,7 @@ export default class VideoPlayer extends React.PureComponent {
     }
 
     return (
-      <div className='status__video-player' style={{ height: `${height}px` }}>
+      <div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
         {spoilerButton}
         {muteButton}
         {expandButton}

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

@@ -231,6 +231,14 @@ export default class SettingsModal extends React.PureComponent {
         >
           <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
         </SettingsItem>
+        <SettingsItem
+          settings={this.props.settings}
+          item={['media', 'fullwidth']}
+          id='mastodon-settings--media-fullwidth'
+          onChange={this.props.toggleSetting}
+        >
+          <FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
+        </SettingsItem>
       </div>
     );
   }

app/javascript/mastodon/locales/en.json

@@ -162,6 +162,7 @@
   "settings.image_backgrounds_users": "Give collapsed toots an image background",
   "settings.media": "Media",
   "settings.media_letterbox": "Letterbox media",
+  "settings.media_fullwidth": "Full-width media previews",
   "settings.preferences": "User preferences",
   "settings.wide_view": "Wide view (Desktop mode only)",
   "status.cannot_reblog": "This post cannot be boosted",

app/javascript/mastodon/reducers/local_settings.js

@@ -21,6 +21,7 @@ const initialState = Immutable.fromJS({
   },
   media     : {
     letterbox   : true,
+    fullwidth   : true,
   },
 });