From 4d01d1a1eeef7a851b77def9c5bfc2ce4d7a271c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 24 Jul 2023 13:46:55 +0200 Subject: [PATCH] Remove 16:9 cropping from web UI (#26132) --- .../mastodon/components/media_gallery.jsx | 15 +- .../picture_in_picture_placeholder.jsx | 5 +- app/javascript/mastodon/components/status.jsx | 50 +++-- .../status/components/detailed_status.jsx | 28 ++- .../features/ui/components/media_modal.jsx | 1 + .../features/ui/components/video_modal.jsx | 1 + .../mastodon/features/video/index.jsx | 172 +++++++++--------- app/javascript/mastodon/initial_state.js | 2 - .../styles/mastodon/components.scss | 23 +-- app/models/concerns/has_user_settings.rb | 4 - app/models/user_settings.rb | 1 - app/serializers/initial_state_serializer.rb | 2 - .../preferences/appearance/show.html.haml | 5 - config/locales/an.yml | 1 - config/locales/ar.yml | 1 - config/locales/ast.yml | 1 - config/locales/be.yml | 1 - config/locales/bg.yml | 1 - config/locales/ca.yml | 1 - config/locales/ckb.yml | 1 - config/locales/co.yml | 1 - config/locales/cs.yml | 1 - config/locales/cy.yml | 1 - config/locales/da.yml | 1 - config/locales/de.yml | 1 - config/locales/el.yml | 1 - config/locales/en-GB.yml | 1 - config/locales/en.yml | 1 - config/locales/eo.yml | 1 - config/locales/es-AR.yml | 1 - config/locales/es-MX.yml | 1 - config/locales/es.yml | 1 - config/locales/et.yml | 1 - config/locales/eu.yml | 1 - config/locales/fa.yml | 1 - config/locales/fi.yml | 1 - config/locales/fo.yml | 1 - config/locales/fr-QC.yml | 1 - config/locales/fr.yml | 1 - config/locales/fy.yml | 1 - config/locales/gd.yml | 1 - config/locales/gl.yml | 1 - config/locales/he.yml | 1 - config/locales/hu.yml | 1 - config/locales/id.yml | 1 - config/locales/io.yml | 1 - config/locales/is.yml | 1 - config/locales/it.yml | 1 - config/locales/ja.yml | 1 - config/locales/kk.yml | 1 - config/locales/ko.yml | 1 - config/locales/ku.yml | 1 - config/locales/lv.yml | 1 - config/locales/my.yml | 1 - config/locales/nl.yml | 1 - config/locales/nn.yml | 1 - config/locales/no.yml | 1 - config/locales/oc.yml | 1 - config/locales/pl.yml | 1 - config/locales/pt-BR.yml | 1 - config/locales/pt-PT.yml | 1 - config/locales/ro.yml | 1 - config/locales/ru.yml | 1 - config/locales/sc.yml | 1 - config/locales/sco.yml | 1 - config/locales/si.yml | 1 - config/locales/simple_form.an.yml | 1 - config/locales/simple_form.ar.yml | 1 - config/locales/simple_form.ast.yml | 1 - config/locales/simple_form.be.yml | 1 - config/locales/simple_form.bg.yml | 1 - config/locales/simple_form.ca.yml | 1 - config/locales/simple_form.ckb.yml | 1 - config/locales/simple_form.co.yml | 1 - config/locales/simple_form.cs.yml | 1 - config/locales/simple_form.cy.yml | 1 - config/locales/simple_form.da.yml | 1 - config/locales/simple_form.de.yml | 1 - config/locales/simple_form.el.yml | 1 - config/locales/simple_form.en-GB.yml | 1 - config/locales/simple_form.en.yml | 1 - config/locales/simple_form.eo.yml | 1 - config/locales/simple_form.es-AR.yml | 1 - config/locales/simple_form.es-MX.yml | 1 - config/locales/simple_form.es.yml | 1 - config/locales/simple_form.et.yml | 1 - config/locales/simple_form.eu.yml | 1 - config/locales/simple_form.fa.yml | 1 - config/locales/simple_form.fi.yml | 1 - config/locales/simple_form.fo.yml | 1 - config/locales/simple_form.fr-QC.yml | 1 - config/locales/simple_form.fr.yml | 1 - config/locales/simple_form.fy.yml | 1 - config/locales/simple_form.gd.yml | 1 - config/locales/simple_form.gl.yml | 1 - config/locales/simple_form.he.yml | 1 - config/locales/simple_form.hu.yml | 1 - config/locales/simple_form.hy.yml | 1 - config/locales/simple_form.id.yml | 1 - config/locales/simple_form.io.yml | 1 - config/locales/simple_form.is.yml | 1 - config/locales/simple_form.it.yml | 1 - config/locales/simple_form.ja.yml | 1 - config/locales/simple_form.kk.yml | 1 - config/locales/simple_form.ko.yml | 1 - config/locales/simple_form.ku.yml | 1 - config/locales/simple_form.lv.yml | 1 - config/locales/simple_form.my.yml | 1 - config/locales/simple_form.nl.yml | 1 - config/locales/simple_form.nn.yml | 1 - config/locales/simple_form.no.yml | 1 - config/locales/simple_form.oc.yml | 1 - config/locales/simple_form.pl.yml | 1 - config/locales/simple_form.pt-BR.yml | 1 - config/locales/simple_form.pt-PT.yml | 1 - config/locales/simple_form.ro.yml | 1 - config/locales/simple_form.ru.yml | 1 - config/locales/simple_form.sc.yml | 1 - config/locales/simple_form.sco.yml | 1 - config/locales/simple_form.si.yml | 1 - config/locales/simple_form.sk.yml | 1 - config/locales/simple_form.sl.yml | 1 - config/locales/simple_form.sq.yml | 1 - config/locales/simple_form.sr-Latn.yml | 1 - config/locales/simple_form.sr.yml | 1 - config/locales/simple_form.sv.yml | 1 - config/locales/simple_form.th.yml | 1 - config/locales/simple_form.tr.yml | 1 - config/locales/simple_form.uk.yml | 1 - config/locales/simple_form.vi.yml | 1 - config/locales/simple_form.zh-CN.yml | 1 - config/locales/simple_form.zh-HK.yml | 1 - config/locales/simple_form.zh-TW.yml | 1 - config/locales/sk.yml | 1 - config/locales/sl.yml | 1 - config/locales/sq.yml | 1 - config/locales/sr-Latn.yml | 1 - config/locales/sr.yml | 1 - config/locales/sv.yml | 1 - config/locales/th.yml | 1 - config/locales/tr.yml | 1 - config/locales/uk.yml | 1 - config/locales/vi.yml | 1 - config/locales/zh-CN.yml | 1 - config/locales/zh-HK.yml | 1 - config/locales/zh-TW.yml | 1 - 146 files changed, 158 insertions(+), 284 deletions(-) diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx index e3c0065c95..0b633a5b40 100644 --- a/app/javascript/mastodon/components/media_gallery.jsx +++ b/app/javascript/mastodon/components/media_gallery.jsx @@ -12,7 +12,7 @@ import { debounce } from 'lodash'; import { Blurhash } from 'mastodon/components/blurhash'; -import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state'; +import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state'; import { IconButton } from './icon_button'; @@ -209,7 +209,6 @@ class MediaGallery extends PureComponent { static propTypes = { sensitive: PropTypes.bool, - standalone: PropTypes.bool, media: ImmutablePropTypes.list.isRequired, lang: PropTypes.string, size: PropTypes.object, @@ -223,10 +222,6 @@ class MediaGallery extends PureComponent { onToggleVisibility: PropTypes.func, }; - static defaultProps = { - standalone: false, - }; - state = { visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'), width: this.props.defaultWidth, @@ -295,7 +290,7 @@ class MediaGallery extends PureComponent { } render () { - const { media, lang, intl, sensitive, defaultWidth, standalone, autoplay } = this.props; + const { media, lang, intl, sensitive, defaultWidth, autoplay } = this.props; const { visible } = this.state; const width = this.state.width || defaultWidth; @@ -303,16 +298,16 @@ class MediaGallery extends PureComponent { const style = {}; - if (this.isFullSizeEligible() && (standalone || !cropImages)) { + if (this.isFullSizeEligible()) { style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`; } else { - style.aspectRatio = '16 / 9'; + style.aspectRatio = '3 / 2'; } const size = media.take(4).size; const uncached = media.every(attachment => attachment.get('type') === 'unknown'); - if (standalone && this.isFullSizeEligible()) { + if (this.isFullSizeEligible()) { children = ; } else { children = media.take(4).map((attachment, i) => ); diff --git a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx index 756a977224..c65bd494f3 100644 --- a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx +++ b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx @@ -12,6 +12,7 @@ class PictureInPicturePlaceholder extends PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, + aspectRatio: PropTypes.string, }; handleClick = () => { @@ -20,8 +21,10 @@ class PictureInPicturePlaceholder extends PureComponent { }; render () { + const { aspectRatio } = this.props; + return ( -
+
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index 8f188a638c..37951d5782 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -19,7 +19,6 @@ import Bundle from '../features/ui/components/bundle'; import { MediaGallery, Video, Audio } from '../features/ui/util/async-components'; import { displayMedia } from '../initial_state'; -import AttachmentList from './attachment_list'; import { Avatar } from './avatar'; import { AvatarOverlay } from './avatar_overlay'; import { DisplayName } from './display_name'; @@ -191,17 +190,35 @@ class Status extends ImmutablePureComponent { this.props.onTranslate(this._properStatus()); }; - renderLoadingMediaGallery () { - return
; + getAttachmentAspectRatio () { + 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'])}`; + } else if (attachments.getIn([0, 'type']) === 'audio') { + return '16 / 9'; + } else { + return (attachments.size === 1 && attachments.getIn([0, 'meta', 'small', 'aspect'])) ? attachments.getIn([0, 'meta', 'small', 'aspect']) : '3 / 2' + } } - renderLoadingVideoPlayer () { - return
; - } + renderLoadingMediaGallery = () => { + return ( +
+ ); + }; - renderLoadingAudioPlayer () { - return
; - } + renderLoadingVideoPlayer = () => { + return ( +
+ ); + }; + + renderLoadingAudioPlayer = () => { + return ( +
+ ); + }; handleOpenVideo = (options) => { const status = this._properStatus(); @@ -426,18 +443,11 @@ class Status extends ImmutablePureComponent { } if (pictureInPicture.get('inUse')) { - media = ; + media = ; } else if (status.get('media_attachments').size > 0) { const language = status.getIn(['translation', 'language']) || status.get('language'); - if (this.props.muted) { - media = ( - - ); - } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { + if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { const attachment = status.getIn(['media_attachments', 0]); const description = attachment.getIn(['translation', 'description']) || attachment.get('description'); @@ -475,11 +485,11 @@ class Status extends ImmutablePureComponent { ); } - } else if (status.get('spoiler_text').length === 0 && status.get('card') && !this.props.muted) { + } else if (status.get('spoiler_text').length === 0 && status.get('card')) { media = ( ; + media = ; } else if (status.get('media_attachments').size > 0) { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { const attachment = status.getIn(['media_attachments', 0]); @@ -167,13 +189,13 @@ class DetailedStatus extends ImmutablePureComponent {