From dc2b8bdecd4cc84b64ac069406a8d6554e4f8cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sat, 8 Jul 2017 11:01:56 +0200
Subject: [PATCH] Added a toggle for full-width media previews

---
 .../mastodon/components/media_gallery.js      |  5 ++--
 app/javascript/mastodon/components/status.js  |  2 ++
 .../mastodon/components/video_player.js       |  7 +++--
 .../features/ui/components/settings_modal.js  |  8 +++++
 app/javascript/mastodon/locales/en.json       |  1 +
 .../mastodon/reducers/local_settings.js       |  1 +
 app/javascript/styles/components.scss         | 29 +++++++++++++++----
 7 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index fe462d2453..a71c94ef2a 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/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>
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 816bc6533d..f899c7c64b 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/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}
diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js
index 55e2d09e35..7722f82960 100644
--- a/app/javascript/mastodon/components/video_player.js
+++ b/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}
diff --git a/app/javascript/mastodon/features/ui/components/settings_modal.js b/app/javascript/mastodon/features/ui/components/settings_modal.js
index 2049b05fe9..9ed2acbc7d 100644
--- a/app/javascript/mastodon/features/ui/components/settings_modal.js
+++ b/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>
     );
   }
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 20bbb24db9..b286ed2d3e 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/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",
diff --git a/app/javascript/mastodon/reducers/local_settings.js b/app/javascript/mastodon/reducers/local_settings.js
index 0e08f8e2a1..0b53547974 100644
--- a/app/javascript/mastodon/reducers/local_settings.js
+++ b/app/javascript/mastodon/reducers/local_settings.js
@@ -21,6 +21,7 @@ const initialState = Immutable.fromJS({
   },
   media     : {
     letterbox   : true,
+    fullwidth   : true,
   },
 });
 
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 634c1b811c..6b766bf141 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2318,6 +2318,11 @@ button.icon-button.active i.fa-retweet {
   position: relative;
   text-align: center;
   z-index: 100;
+
+  margin-top: 15px; // Add margin when used bare for NSFW video player
+  .media-gallery & {
+    margin-top: 0;
+  }
 }
 
 .media-spoiler__warning {
@@ -3707,11 +3712,15 @@ button.icon-button.active i.fa-retweet {
 .media-gallery {
   box-sizing: border-box;
   margin-top: 15px;
-  margin-left: -68px;
   overflow: hidden;
   position: relative;
-  width: calc(100% + 80px);
   background: $base-shadow-color;
+  width: 100%;
+
+  &.full-width {
+    margin-left: -68px;
+    width: calc(100% + 80px);
+  }
 
   .detailed-status & {
     margin-left:-10px;
@@ -3780,10 +3789,14 @@ button.icon-button.active i.fa-retweet {
   box-sizing: border-box;
   cursor: default; /* May not be needed */
   margin-top: 15px;
-  margin-left:-68px;
-  width: calc(100% + 80px);
   overflow: hidden;
   position: relative;
+  width: 100%;
+
+  &.full-width {
+    margin-left: -68px;
+    width: calc(100% + 80px);
+  }
 }
 
 .status__video-player-video {
@@ -3836,9 +3849,13 @@ button.icon-button.active i.fa-retweet {
   background-position: center;
   cursor: pointer;
   margin-top: 15px;
-  margin-left: -68px;
-  width: calc(100% + 80px);
   position: relative;
+  width: 100%;
+
+  &.full-width {
+    margin-left: -68px;
+    width: calc(100% + 80px);
+  }
 }
 
 .media-spoiler-video-play-icon {