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 = (
@@ -156,7 +157,7 @@ export default class VideoPlayer extends React.PureComponent {
if (this.state.preview && !autoplay) {
return (
-
+
@@ -172,7 +173,7 @@ export default class VideoPlayer extends React.PureComponent {
}
return (
-
+
{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 {
>
+
+
+
);
}
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 {