Add setting for whether to crop images in unexpanded toots (#12126)

This commit is contained in:
Faye Duxovni 2019-10-24 16:51:41 -04:00 committed by Eugen Rochko
parent a6269b2f83
commit 48f75b86ae
10 changed files with 26 additions and 9 deletions

View file

@ -57,6 +57,7 @@ class Settings::PreferencesController < Settings::BaseController
:setting_use_blurhash, :setting_use_blurhash,
:setting_use_pending_items, :setting_use_pending_items,
:setting_trends, :setting_trends,
:setting_crop_images,
notification_emails: %i(follow follow_request reblog favourite mention digest report pending_account trending_tag), notification_emails: %i(follow follow_request reblog favourite mention digest report pending_account trending_tag),
interactions: %i(must_be_follower must_be_following must_be_following_dm) interactions: %i(must_be_follower must_be_following must_be_following_dm)
) )

View file

@ -6,7 +6,7 @@ import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
import classNames from 'classnames'; import classNames from 'classnames';
import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state'; import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
const messages = defineMessages({ const messages = defineMessages({
@ -281,7 +281,7 @@ class MediaGallery extends React.PureComponent {
} }
handleRef = (node) => { handleRef = (node) => {
if (node /*&& this.isStandaloneEligible()*/) { if (node) {
// offsetWidth triggers a layout, so only calculate when we need to // offsetWidth triggers a layout, so only calculate when we need to
if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth); if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
@ -291,13 +291,13 @@ class MediaGallery extends React.PureComponent {
} }
} }
isStandaloneEligible() { isFullSizeEligible() {
const { media, standalone } = this.props; const { media } = this.props;
return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
} }
render () { render () {
const { media, intl, sensitive, height, defaultWidth } = this.props; const { media, intl, sensitive, height, defaultWidth, standalone } = this.props;
const { visible } = this.state; const { visible } = this.state;
const width = this.state.width || defaultWidth; const width = this.state.width || defaultWidth;
@ -306,7 +306,7 @@ class MediaGallery extends React.PureComponent {
const style = {}; const style = {};
if (this.isStandaloneEligible()) { if (this.isFullSizeEligible() && (standalone || !cropImages)) {
if (width) { if (width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} }
@ -319,7 +319,7 @@ class MediaGallery extends React.PureComponent {
const size = media.take(4).size; const size = media.take(4).size;
const uncached = media.every(attachment => attachment.get('type') === 'unknown'); const uncached = media.every(attachment => attachment.get('type') === 'unknown');
if (this.isStandaloneEligible()) { if (standalone && this.isFullSizeEligible()) {
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />; children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
} else { } else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />); children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />);

View file

@ -24,5 +24,6 @@ export const useBlurhash = getMeta('use_blurhash');
export const usePendingItems = getMeta('use_pending_items'); export const usePendingItems = getMeta('use_pending_items');
export const showTrends = getMeta('trends'); export const showTrends = getMeta('trends');
export const title = getMeta('title'); export const title = getMeta('title');
export const cropImages = getMeta('crop_images');
export default initialState; export default initialState;

View file

@ -37,6 +37,7 @@ class UserSettingsDecorator
user.settings['use_blurhash'] = use_blurhash_preference if change?('setting_use_blurhash') user.settings['use_blurhash'] = use_blurhash_preference if change?('setting_use_blurhash')
user.settings['use_pending_items'] = use_pending_items_preference if change?('setting_use_pending_items') user.settings['use_pending_items'] = use_pending_items_preference if change?('setting_use_pending_items')
user.settings['trends'] = trends_preference if change?('setting_trends') user.settings['trends'] = trends_preference if change?('setting_trends')
user.settings['crop_images'] = crop_images_preference if change?('setting_crop_images')
end end
def merged_notification_emails def merged_notification_emails
@ -127,6 +128,10 @@ class UserSettingsDecorator
boolean_cast_setting 'setting_trends' boolean_cast_setting 'setting_trends'
end end
def crop_images_preference
boolean_cast_setting 'setting_crop_images'
end
def boolean_cast_setting(key) def boolean_cast_setting(key)
ActiveModel::Type::Boolean.new.cast(settings[key]) ActiveModel::Type::Boolean.new.cast(settings[key])
end end

View file

@ -108,7 +108,7 @@ class User < ApplicationRecord
delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :delete_modal, delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :delete_modal,
:reduce_motion, :system_font_ui, :noindex, :theme, :display_media, :hide_network, :reduce_motion, :system_font_ui, :noindex, :theme, :display_media, :hide_network,
:expand_spoilers, :default_language, :aggregate_reblogs, :show_application, :expand_spoilers, :default_language, :aggregate_reblogs, :show_application,
:advanced_layout, :use_blurhash, :use_pending_items, :trends, :advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images,
to: :settings, prefix: :setting, allow_nil: false to: :settings, prefix: :setting, allow_nil: false
attr_reader :invite_code attr_reader :invite_code

View file

@ -38,11 +38,13 @@ class InitialStateSerializer < ActiveModel::Serializer
store[:use_pending_items] = object.current_account.user.setting_use_pending_items store[:use_pending_items] = object.current_account.user.setting_use_pending_items
store[:is_staff] = object.current_account.user.staff? store[:is_staff] = object.current_account.user.staff?
store[:trends] = Setting.trends && object.current_account.user.setting_trends store[:trends] = Setting.trends && object.current_account.user.setting_trends
store[:crop_images] = object.current_account.user.setting_crop_images
else else
store[:auto_play_gif] = Setting.auto_play_gif store[:auto_play_gif] = Setting.auto_play_gif
store[:display_media] = Setting.display_media store[:display_media] = Setting.display_media
store[:reduce_motion] = Setting.reduce_motion store[:reduce_motion] = Setting.reduce_motion
store[:use_blurhash] = Setting.use_blurhash store[:use_blurhash] = Setting.use_blurhash
store[:crop_images] = Setting.crop_images
end end
store store

View file

@ -25,6 +25,11 @@
= f.input :setting_reduce_motion, as: :boolean, wrapper: :with_label = f.input :setting_reduce_motion, as: :boolean, wrapper: :with_label
= f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label = f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label
%h4= t 'appearance.toot_layout'
.fields-group
= f.input :setting_crop_images, as: :boolean, wrapper: :with_label
%h4= t 'appearance.discovery' %h4= t 'appearance.discovery'
.fields-group .fields-group

View file

@ -576,6 +576,7 @@ en:
confirmation_dialogs: Confirmation dialogs confirmation_dialogs: Confirmation dialogs
discovery: Discovery discovery: Discovery
sensitive_content: Sensitive content sensitive_content: Sensitive content
toot_layout: Toot layout
application_mailer: application_mailer:
notification_preferences: Change e-mail preferences notification_preferences: Change e-mail preferences
salutation: "%{name}," salutation: "%{name},"

View file

@ -113,6 +113,7 @@ en:
setting_aggregate_reblogs: Group boosts in timelines setting_aggregate_reblogs: Group boosts in timelines
setting_auto_play_gif: Auto-play animated GIFs setting_auto_play_gif: Auto-play animated GIFs
setting_boost_modal: Show confirmation dialog before boosting setting_boost_modal: Show confirmation dialog before boosting
setting_crop_images: Crop images in non-expanded toots to 16x9
setting_default_language: Posting language setting_default_language: Posting language
setting_default_privacy: Posting privacy setting_default_privacy: Posting privacy
setting_default_sensitive: Always mark media as sensitive setting_default_sensitive: Always mark media as sensitive

View file

@ -36,6 +36,7 @@ defaults: &defaults
use_pending_items: false use_pending_items: false
trends: true trends: true
trendable_by_default: false trendable_by_default: false
crop_images: true
notification_emails: notification_emails:
follow: false follow: false
reblog: false reblog: false