From 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Mon, 20 Feb 2023 03:20:59 +0100 Subject: Rename JSX files with proper `.jsx` extension (#23733) --- .../features/ui/components/image_loader.jsx | 168 +++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 app/javascript/mastodon/features/ui/components/image_loader.jsx (limited to 'app/javascript/mastodon/features/ui/components/image_loader.jsx') diff --git a/app/javascript/mastodon/features/ui/components/image_loader.jsx b/app/javascript/mastodon/features/ui/components/image_loader.jsx new file mode 100644 index 000000000..92aeef5c4 --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/image_loader.jsx @@ -0,0 +1,168 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; +import { LoadingBar } from 'react-redux-loading-bar'; +import ZoomableImage from './zoomable_image'; + +export default class ImageLoader extends PureComponent { + + static propTypes = { + alt: PropTypes.string, + src: PropTypes.string.isRequired, + previewSrc: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + onClick: PropTypes.func, + zoomButtonHidden: PropTypes.bool, + }; + + static defaultProps = { + alt: '', + width: null, + height: null, + }; + + state = { + loading: true, + error: false, + width: null, + }; + + removers = []; + canvas = null; + + get canvasContext() { + if (!this.canvas) { + return null; + } + this._canvasContext = this._canvasContext || this.canvas.getContext('2d'); + return this._canvasContext; + } + + componentDidMount () { + this.loadImage(this.props); + } + + UNSAFE_componentWillReceiveProps (nextProps) { + if (this.props.src !== nextProps.src) { + this.loadImage(nextProps); + } + } + + componentWillUnmount () { + this.removeEventListeners(); + } + + loadImage (props) { + this.removeEventListeners(); + this.setState({ loading: true, error: false }); + Promise.all([ + props.previewSrc && this.loadPreviewCanvas(props), + this.hasSize() && this.loadOriginalImage(props), + ].filter(Boolean)) + .then(() => { + this.setState({ loading: false, error: false }); + this.clearPreviewCanvas(); + }) + .catch(() => this.setState({ loading: false, error: true })); + } + + loadPreviewCanvas = ({ previewSrc, width, height }) => new Promise((resolve, reject) => { + const image = new Image(); + const removeEventListeners = () => { + image.removeEventListener('error', handleError); + image.removeEventListener('load', handleLoad); + }; + const handleError = () => { + removeEventListeners(); + reject(); + }; + const handleLoad = () => { + removeEventListeners(); + this.canvasContext.drawImage(image, 0, 0, width, height); + resolve(); + }; + image.addEventListener('error', handleError); + image.addEventListener('load', handleLoad); + image.src = previewSrc; + this.removers.push(removeEventListeners); + }); + + clearPreviewCanvas () { + const { width, height } = this.canvas; + this.canvasContext.clearRect(0, 0, width, height); + } + + loadOriginalImage = ({ src }) => new Promise((resolve, reject) => { + const image = new Image(); + const removeEventListeners = () => { + image.removeEventListener('error', handleError); + image.removeEventListener('load', handleLoad); + }; + const handleError = () => { + removeEventListeners(); + reject(); + }; + const handleLoad = () => { + removeEventListeners(); + resolve(); + }; + image.addEventListener('error', handleError); + image.addEventListener('load', handleLoad); + image.src = src; + this.removers.push(removeEventListeners); + }); + + removeEventListeners () { + this.removers.forEach(listeners => listeners()); + this.removers = []; + } + + hasSize () { + const { width, height } = this.props; + return typeof width === 'number' && typeof height === 'number'; + } + + setCanvasRef = c => { + this.canvas = c; + if (c) this.setState({ width: c.offsetWidth }); + }; + + render () { + const { alt, src, width, height, onClick } = this.props; + const { loading } = this.state; + + const className = classNames('image-loader', { + 'image-loader--loading': loading, + 'image-loader--amorphous': !this.hasSize(), + }); + + return ( +
+ {loading ? ( + <> +
+ +
+ + + ) : ( + + )} +
+ ); + } + +} -- cgit From d3eefead3014175b264cb56f6f4cb552cbaaeac6 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Sun, 26 Feb 2023 20:13:27 +0100 Subject: Add `lang` attribute to media and poll options (#23891) --- app/javascript/mastodon/components/gifv.jsx | 5 ++++- app/javascript/mastodon/components/media_attachments.jsx | 6 +++++- app/javascript/mastodon/components/media_gallery.jsx | 15 +++++++++------ app/javascript/mastodon/components/poll.jsx | 5 ++++- app/javascript/mastodon/components/status.jsx | 3 +++ app/javascript/mastodon/components/status_content.jsx | 2 +- .../features/account_gallery/components/media_item.jsx | 3 +++ app/javascript/mastodon/features/audio/index.jsx | 4 +++- .../features/status/components/detailed_status.jsx | 3 +++ .../mastodon/features/ui/components/audio_modal.jsx | 7 +++++-- .../features/ui/components/compare_history_modal.jsx | 11 +++++++---- .../mastodon/features/ui/components/image_loader.jsx | 5 ++++- .../mastodon/features/ui/components/media_modal.jsx | 13 +++++++++++-- .../mastodon/features/ui/components/video_modal.jsx | 12 ++++++++++-- .../mastodon/features/ui/components/zoomable_image.jsx | 5 ++++- app/javascript/mastodon/features/video/index.jsx | 4 +++- 16 files changed, 79 insertions(+), 24 deletions(-) (limited to 'app/javascript/mastodon/features/ui/components/image_loader.jsx') diff --git a/app/javascript/mastodon/components/gifv.jsx b/app/javascript/mastodon/components/gifv.jsx index 1f0f99b46..9ec201c6c 100644 --- a/app/javascript/mastodon/components/gifv.jsx +++ b/app/javascript/mastodon/components/gifv.jsx @@ -6,6 +6,7 @@ export default class GIFV extends React.PureComponent { static propTypes = { src: PropTypes.string.isRequired, alt: PropTypes.string, + lang: PropTypes.string, width: PropTypes.number, height: PropTypes.number, onClick: PropTypes.func, @@ -35,7 +36,7 @@ export default class GIFV extends React.PureComponent { }; render () { - const { src, width, height, alt } = this.props; + const { src, width, height, alt, lang } = this.props; const { loading } = this.state; return ( @@ -48,6 +49,7 @@ export default class GIFV extends React.PureComponent { tabIndex='0' aria-label={alt} title={alt} + lang={lang} onClick={this.handleClick} /> )} @@ -58,6 +60,7 @@ export default class GIFV extends React.PureComponent { tabIndex='0' aria-label={alt} title={alt} + lang={lang} muted loop autoPlay diff --git a/app/javascript/mastodon/components/media_attachments.jsx b/app/javascript/mastodon/components/media_attachments.jsx index 565a30330..0e25e5973 100644 --- a/app/javascript/mastodon/components/media_attachments.jsx +++ b/app/javascript/mastodon/components/media_attachments.jsx @@ -10,6 +10,7 @@ export default class MediaAttachments extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, + lang: PropTypes.string, height: PropTypes.number, width: PropTypes.number, }; @@ -48,7 +49,7 @@ export default class MediaAttachments extends ImmutablePureComponent { }; render () { - const { status, width, height } = this.props; + const { status, lang, width, height } = this.props; const mediaAttachments = status.get('media_attachments'); if (mediaAttachments.size === 0) { @@ -64,6 +65,7 @@ export default class MediaAttachments extends ImmutablePureComponent { ( - + @@ -188,6 +190,7 @@ class Item extends React.PureComponent { className='media-gallery__item-gifv-thumbnail' aria-label={attachment.get('description')} title={attachment.get('description')} + lang={lang} role='application' src={attachment.get('url')} onClick={this.handleClick} @@ -227,6 +230,7 @@ class MediaGallery extends React.PureComponent { sensitive: PropTypes.bool, standalone: PropTypes.bool, media: ImmutablePropTypes.list.isRequired, + lang: PropTypes.string, size: PropTypes.object, height: PropTypes.number.isRequired, onOpenMedia: PropTypes.func.isRequired, @@ -310,9 +314,8 @@ class MediaGallery extends React.PureComponent { } render () { - const { media, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props; + const { media, lang, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props; const { visible } = this.state; - const width = this.state.width || defaultWidth; let children, spoilerButton; @@ -333,9 +336,9 @@ class MediaGallery extends React.PureComponent { const uncached = media.every(attachment => attachment.get('type') === 'unknown'); if (standalone && this.isFullSizeEligible()) { - children = ; + children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } if (uncached) { diff --git a/app/javascript/mastodon/components/poll.jsx b/app/javascript/mastodon/components/poll.jsx index 95a900c49..7efedfe34 100644 --- a/app/javascript/mastodon/components/poll.jsx +++ b/app/javascript/mastodon/components/poll.jsx @@ -40,6 +40,7 @@ class Poll extends ImmutablePureComponent { static propTypes = { poll: ImmutablePropTypes.map, + lang: PropTypes.string, intl: PropTypes.object.isRequired, disabled: PropTypes.bool, refresh: PropTypes.func, @@ -126,7 +127,7 @@ class Poll extends ImmutablePureComponent { }; renderOption (option, optionIndex, showResults) { - const { poll, disabled, intl } = this.props; + const { poll, lang, disabled, intl } = this.props; const pollVotesCount = poll.get('voters_count') || poll.get('votes_count'); const percent = pollVotesCount === 0 ? 0 : (option.get('votes_count') / pollVotesCount) * 100; const leading = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') >= other.get('votes_count')); @@ -159,6 +160,7 @@ class Poll extends ImmutablePureComponent { onKeyPress={this.handleOptionKeyPress} aria-checked={active} aria-label={option.get('title')} + lang={lang} data-index={optionIndex} /> )} @@ -175,6 +177,7 @@ class Poll extends ImmutablePureComponent { diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index 2e2d96634..a48230baf 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -417,6 +417,7 @@ class Status extends ImmutablePureComponent { ( + ); if (status.get('spoiler_text').length > 0) { diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx index d6d60ebda..53b04acfd 100644 --- a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx +++ b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx @@ -76,6 +76,7 @@ export default class MediaItem extends ImmutablePureComponent { {attachment.get('description')} ); @@ -95,6 +96,7 @@ export default class MediaItem extends ImmutablePureComponent { {attachment.get('description')} @@ -105,6 +107,7 @@ export default class MediaItem extends ImmutablePureComponent { className='media-gallery__item-gifv-thumbnail' aria-label={attachment.get('description')} title={attachment.get('description')} + lang={status.get('language')} role='application' src={attachment.get('url')} onMouseEnter={this.handleMouseEnter} diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx index bf954c06d..9a9de02ae 100644 --- a/app/javascript/mastodon/features/audio/index.jsx +++ b/app/javascript/mastodon/features/audio/index.jsx @@ -28,6 +28,7 @@ class Audio extends React.PureComponent { static propTypes = { src: PropTypes.string.isRequired, alt: PropTypes.string, + lang: PropTypes.string, poster: PropTypes.string, duration: PropTypes.number, width: PropTypes.number, @@ -458,7 +459,7 @@ class Audio extends React.PureComponent { }; render () { - const { src, intl, alt, editable, autoPlay, sensitive, blurhash } = this.props; + const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash } = this.props; const { paused, muted, volume, currentTime, duration, buffer, dragging, revealed } = this.state; const progress = Math.min((currentTime / duration) * 100, 100); @@ -503,6 +504,7 @@ class Audio extends React.PureComponent { onKeyDown={this.handleAudioKeyDown} title={alt} aria-label={alt} + lang={lang} />
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx index 064231ffe..f9ff57261 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.jsx +++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx @@ -139,6 +139,7 @@ class DetailedStatus extends ImmutablePureComponent {