From 763ec735d00803376472ce40030cad2bbd37bcb5 Mon Sep 17 00:00:00 2001
From: MitarashiDango <mitarashi_dango@mail.matcha-soft.com>
Date: Tue, 22 Oct 2024 01:43:57 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E4=B8=8A=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E6=B7=BB=E4=BB=98=E3=83=A1=E3=83=87=E3=82=A3=E3=82=A2?=
 =?UTF-8?q?=E3=81=AE=E3=82=B5=E3=83=A0=E3=83=8D=E3=82=A4=E3=83=AB=E7=94=BB?=
 =?UTF-8?q?=E5=83=8F=E3=82=92=E3=82=AF=E3=83=AD=E3=83=83=E3=83=97=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B=E8=A8=AD=E5=AE=9A=E9=A0=85=E7=9B=AE?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mastodon/components/media_gallery.jsx     | 44 ++++++++++++-------
 app/javascript/mastodon/components/status.jsx |  6 +--
 app/javascript/mastodon/initial_state.js      |  2 +
 app/models/concerns/user/has_settings.rb      |  4 ++
 app/models/user_settings.rb                   |  1 +
 app/serializers/initial_state_serializer.rb   |  1 +
 .../preferences/appearance/show.html.haml     |  3 ++
 config/locales/simple_form.en.yml             |  2 +
 config/locales/simple_form.ja.yml             |  2 +
 9 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index e059978442a131..cd8227c2b09515 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -14,7 +14,7 @@ import { AltTextBadge } from 'mastodon/components/alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { formatTime } from 'mastodon/features/video';
 
-import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
+import { autoPlayGif, cropAttachmentThumbnailsOnTimeline, displayMedia, useBlurhash } from '../initial_state';
 
 class Item extends PureComponent {
 
@@ -57,7 +57,7 @@ class Item extends PureComponent {
     return this.props.autoplay || autoPlayGif;
   }
 
-  hoverToPlay () {
+  hoverToPlay() {
     const { attachment } = this.props;
     return !this.getAutoPlay() && ['gifv', 'video'].includes(attachment.get('type'));
   }
@@ -81,12 +81,12 @@ class Item extends PureComponent {
     this.setState({ loaded: true });
   };
 
-  render () {
+  render() {
     const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
 
     let badges = [], thumbnail;
 
-    let width  = 50;
+    let width = 50;
     let height = 100;
 
     if (size === 1) {
@@ -116,21 +116,21 @@ class Item extends PureComponent {
         </div>
       );
     } else if (attachment.get('type') === 'image') {
-      const previewUrl   = attachment.get('preview_url');
+      const previewUrl = attachment.get('preview_url');
       const previewWidth = attachment.getIn(['meta', 'small', 'width']);
 
-      const originalUrl   = attachment.get('url');
+      const originalUrl = attachment.get('url');
       const originalWidth = attachment.getIn(['meta', 'original', 'width']);
 
       const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';
 
       const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;
-      const sizes  = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null;
+      const sizes = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null;
 
       const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
       const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
-      const x      = ((focusX /  2) + .5) * 100;
-      const y      = ((focusY / -2) + .5) * 100;
+      const x = ((focusX / 2) + .5) * 100;
+      const y = ((focusY / -2) + .5) * 100;
 
       thumbnail = (
         <a
@@ -221,6 +221,7 @@ class MediaGallery extends PureComponent {
     visible: PropTypes.bool,
     autoplay: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
+    standalone: PropTypes.bool,
   };
 
   state = {
@@ -228,15 +229,15 @@ class MediaGallery extends PureComponent {
     width: this.props.defaultWidth,
   };
 
-  componentDidMount () {
+  componentDidMount() {
     window.addEventListener('resize', this.handleResize, { passive: true });
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
       this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
     } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
@@ -272,7 +273,7 @@ class MediaGallery extends PureComponent {
     }
   };
 
-  _setDimensions () {
+  _setDimensions() {
     const width = this.node.offsetWidth;
 
     // offsetWidth triggers a layout, so only calculate when we need to
@@ -286,11 +287,20 @@ class MediaGallery extends PureComponent {
   }
 
   isFullSizeEligible() {
-    const { media } = this.props;
+    const { media, standalone } = this.props;
+    if (cropAttachmentThumbnailsOnTimeline) {
+      return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']) && standalone;
+    }
+
     return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
   }
 
-  render () {
+  isCropThumbnail() {
+    const { media, standalone } = this.props;
+    return media.size === 1 && cropAttachmentThumbnailsOnTimeline && standalone !== true;
+  }
+
+  render() {
     const { media, lang, sensitive, defaultWidth, autoplay } = this.props;
     const { visible } = this.state;
     const width = this.state.width || defaultWidth;
@@ -301,11 +311,13 @@ class MediaGallery extends PureComponent {
 
     if (this.isFullSizeEligible()) {
       style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;
+    } else if (this.isCropThumbnail()) {
+      style.aspectRatio = '16 / 9';
     } else {
       style.aspectRatio = '3 / 2';
     }
 
-    const size     = media.size;
+    const size = media.size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
 
     if (this.isFullSizeEligible()) {
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index e1ffc637bae713..c40860057a9ff1 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -24,7 +24,7 @@ import Card from '../features/status/components/card';
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
-import { displayMedia } from '../initial_state';
+import { cropAttachmentThumbnailsOnTimeline, displayMedia } from '../initial_state';
 
 import AttachmentList from './attachment_list';
 import { Avatar } from './avatar';
@@ -209,7 +209,7 @@ class Status extends ImmutablePureComponent {
     const attachments = this._properStatus().get('media_attachments');
 
     if (attachments.getIn([0, 'type']) === 'video') {
-      return `${attachments.getIn([0, 'meta', 'original', 'width'])} / ${attachments.getIn([0, 'meta', 'original', 'height'])}`;
+      return cropAttachmentThumbnailsOnTimeline ? '16 / 9' : `${attachments.getIn([0, 'meta', 'original', 'width'])} / ${attachments.getIn([0, 'meta', 'original', 'height'])}`;
     } else if (attachments.getIn([0, 'type']) === 'audio') {
       return '16 / 9';
     } else {
@@ -513,7 +513,7 @@ class Status extends ImmutablePureComponent {
               <Component
                 preview={attachment.get('preview_url')}
                 frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
-                aspectRatio={`${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
+                aspectRatio={cropAttachmentThumbnailsOnTimeline ? '16 / 9' : `${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
                 blurhash={attachment.get('blurhash')}
                 src={attachment.get('url')}
                 alt={description}
diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js
index 491fb58c637259..08639373a87d0a 100644
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@@ -13,6 +13,7 @@
  * @property {boolean} activity_api_enabled
  * @property {string} admin
  * @property {boolean=} boost_modal
+ * @property {boolean=} crop_attachment_thumbnails_on_timeline
  * @property {boolean=} delete_modal
  * @property {boolean=} disable_swiping
  * @property {boolean=} disable_hover_cards
@@ -88,6 +89,7 @@ export const activityApiEnabled = getMeta('activity_api_enabled');
 export const advancedLayout = getMeta('advanced_layout');
 export const autoPlayGif = getMeta('auto_play_gif');
 export const boostModal = getMeta('boost_modal');
+export const cropAttachmentThumbnailsOnTimeline = getMeta('crop_attachment_thumbnails_on_timeline');
 export const deleteModal = getMeta('delete_modal');
 export const disableSwiping = getMeta('disable_swiping');
 export const disableHoverCards = getMeta('disable_hover_cards');
diff --git a/app/models/concerns/user/has_settings.rb b/app/models/concerns/user/has_settings.rb
index 7e21c05d4c13e0..202fe0b096d612 100644
--- a/app/models/concerns/user/has_settings.rb
+++ b/app/models/concerns/user/has_settings.rb
@@ -154,4 +154,8 @@ def setting_reverse_nav
   def setting_hide_translate_button
     settings['web.hide_translate_button']
   end
+
+  def setting_crop_attachment_thumbnails_on_timeline
+    settings['web.crop_attachment_thumbnails_on_timeline']
+  end
 end
diff --git a/app/models/user_settings.rb b/app/models/user_settings.rb
index 9b7ce41298d611..547e5464413201 100644
--- a/app/models/user_settings.rb
+++ b/app/models/user_settings.rb
@@ -37,6 +37,7 @@ class KeyError < Error; end
     setting :mod_webui_styles, default: 'default', in: %w(default compact legacy)
     setting :mod_reverse_nav, default: false
     setting :hide_translate_button, default: false
+    setting :crop_attachment_thumbnails_on_timeline, default: false
   end
 
   namespace :notification_emails do
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index 74b729b912a2fc..3def6aa4db0a34 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -118,6 +118,7 @@ def current_account_settings
       webui_styles: object_account_user.setting_webui_styles,
       wider_column: object_account_user.setting_wider_column,
       hide_translate_button: object_account_user.setting_hide_translate_button,
+      crop_attachment_thumbnails_on_timeline: object_account_user.setting_crop_attachment_thumbnails_on_timeline,
     }
   end
 
diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml
index 2fb46a83cd7fa9..21ac0c2a28f970 100644
--- a/app/views/settings/preferences/appearance/show.html.haml
+++ b/app/views/settings/preferences/appearance/show.html.haml
@@ -48,6 +48,9 @@
 
     .fields-group
       = ff.input :'web.hide_translate_button', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_hide_translate_button')
+      
+    .fields-group
+      = ff.input :'web.crop_attachment_thumbnails_on_timeline', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.crop_attachment_thumbnails_on_timeline'), hint: I18n.t('simple_form.hints.defaults.crop_attachment_thumbnails_on_timeline')
 
     %h4= t 'appearance.advanced_web_interface'
 
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 9941c82c35d689..5dce139387f0be 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -43,6 +43,7 @@ en:
         avatar: WEBP, PNG, GIF or JPG. At most %{size}. Will be downscaled to %{dimensions}px
         bot: Signal to others that the account mainly performs automated actions and might not be monitored
         context: One or multiple contexts where the filter should apply
+        crop_attachment_thumbnails_on_timeline: Crop attachment thumbnails on timeline to 16:9
         current_password: For security purposes please enter the password of the current account
         current_username: To confirm, please enter the username of the current account
         digest: Only sent after a long period of inactivity and only if you have received any personal messages in your absence
@@ -194,6 +195,7 @@ en:
         confirm_new_password: Confirm new password
         confirm_password: Confirm password
         context: Filter contexts
+        crop_attachment_thumbnails_on_timeline: Crop attachment thumbnails
         current_password: Current password
         data: Data
         display_name: Display name
diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml
index 5acea5f57e6e3b..f636ddbf922270 100644
--- a/config/locales/simple_form.ja.yml
+++ b/config/locales/simple_form.ja.yml
@@ -43,6 +43,7 @@ ja:
         avatar: "%{size}までのWEBP、PNG、GIF、JPGが利用可能です。%{dimensions}pxまで縮小されます"
         bot: このアカウントは主に自動で動作し、人が見ていない可能性があります
         context: フィルターを適用する対象 (複数選択可)
+        crop_attachment_thumbnails_on_timeline: タイムライン上に表示されるメディアのサムネイル画像を16:9で切り抜き表示します
         current_password: 現在のアカウントのパスワードを入力してください
         current_username: 確認のため、現在のアカウントのユーザー名を入力してください
         digest: 長期間使用していない場合と不在時に返信を受けた場合のみ送信されます
@@ -194,6 +195,7 @@ ja:
         confirm_new_password: 新しいパスワード（確認用）
         confirm_password: パスワード（確認用）
         context: 除外対象
+        crop_attachment_thumbnails_on_timeline: メディアのサムネイル画像を切り抜き表示する
         current_password: 現在のパスワード
         data: データ
         display_name: 表示名