diff options
author | Ondřej Hruška <ondra@ondrovo.com> | 2017-07-08 11:01:56 +0200 |
---|---|---|
committer | beatrix <beatrix.bitrot@gmail.com> | 2017-07-08 06:46:12 -0400 |
commit | dc2b8bdecd4cc84b64ac069406a8d6554e4f8cd4 (patch) | |
tree | f13ba1a1d2afd8eae4fd0a07598c3ff50b601d45 | |
parent | e3c2183c12b5598ae891e148b5f32e066832e053 (diff) |
Added a toggle for full-width media previews
-rw-r--r-- | app/javascript/mastodon/components/media_gallery.js | 5 | ||||
-rw-r--r-- | app/javascript/mastodon/components/status.js | 2 | ||||
-rw-r--r-- | app/javascript/mastodon/components/video_player.js | 7 | ||||
-rw-r--r-- | app/javascript/mastodon/features/ui/components/settings_modal.js | 8 | ||||
-rw-r--r-- | app/javascript/mastodon/locales/en.json | 1 | ||||
-rw-r--r-- | app/javascript/mastodon/reducers/local_settings.js | 1 | ||||
-rw-r--r-- | 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 fe462d245..a71c94ef2 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 816bc6533..f899c7c64 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 55e2d09e3..7722f8296 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 2049b05fe..9ed2acbc7 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 20bbb24db..b286ed2d3 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 0e08f8e2a..0b5354797 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 634c1b811..6b766bf14 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 { |