From dc2b8bdecd4cc84b64ac069406a8d6554e4f8cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= 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 ( -
+
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 ( -
+
{spoilerButton}
@@ -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 {