From 81ef21a0c802f1d905f37a2a818544a8b400793c Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Sat, 25 Feb 2023 14:34:32 +0100 Subject: [Glitch] Rename JSX files with proper `.jsx` extension Port 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/media_gallery.jsx | 404 +++++++++++++++++++++ 1 file changed, 404 insertions(+) create mode 100644 app/javascript/flavours/glitch/components/media_gallery.jsx (limited to 'app/javascript/flavours/glitch/components/media_gallery.jsx') diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx new file mode 100644 index 000000000..c11ac46c2 --- /dev/null +++ b/app/javascript/flavours/glitch/components/media_gallery.jsx @@ -0,0 +1,404 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import { is } from 'immutable'; +import IconButton from './icon_button'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; +import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state'; +import { debounce } from 'lodash'; +import Blurhash from 'flavours/glitch/components/blurhash'; + +const messages = defineMessages({ + hidden: { + defaultMessage: 'Media hidden', + id: 'status.media_hidden', + }, + sensitive: { + defaultMessage: 'Sensitive', + id: 'media_gallery.sensitive', + }, + toggle: { + defaultMessage: 'Click to view', + id: 'status.sensitive_toggle', + }, + toggle_visible: { + defaultMessage: '{number, plural, one {Hide image} other {Hide images}}', + id: 'media_gallery.toggle_visible', + }, + warning: { + defaultMessage: 'Sensitive content', + id: 'status.sensitive_warning', + }, +}); + +class Item extends React.PureComponent { + + static propTypes = { + attachment: ImmutablePropTypes.map.isRequired, + standalone: PropTypes.bool, + index: PropTypes.number.isRequired, + size: PropTypes.number.isRequired, + letterbox: PropTypes.bool, + onClick: PropTypes.func.isRequired, + displayWidth: PropTypes.number, + visible: PropTypes.bool.isRequired, + autoplay: PropTypes.bool, + }; + + static defaultProps = { + standalone: false, + index: 0, + size: 1, + }; + + state = { + loaded: false, + }; + + handleMouseEnter = (e) => { + if (this.hoverToPlay()) { + e.target.play(); + } + }; + + handleMouseLeave = (e) => { + if (this.hoverToPlay()) { + e.target.pause(); + e.target.currentTime = 0; + } + }; + + getAutoPlay() { + return this.props.autoplay || autoPlayGif; + } + + hoverToPlay () { + const { attachment } = this.props; + return !this.getAutoPlay() && attachment.get('type') === 'gifv'; + } + + handleClick = (e) => { + const { index, onClick } = this.props; + + if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { + if (this.hoverToPlay()) { + e.target.pause(); + e.target.currentTime = 0; + } + e.preventDefault(); + onClick(index); + } + + e.stopPropagation(); + }; + + handleImageLoad = () => { + this.setState({ loaded: true }); + }; + + render () { + const { attachment, index, size, standalone, letterbox, displayWidth, visible } = this.props; + + let width = 50; + let height = 100; + let top = 'auto'; + let left = 'auto'; + let bottom = 'auto'; + let right = 'auto'; + + if (size === 1) { + width = 100; + } + + if (size === 4 || (size === 3 && index > 0)) { + height = 50; + } + + if (size === 2) { + if (index === 0) { + right = '2px'; + } else { + left = '2px'; + } + } else if (size === 3) { + if (index === 0) { + right = '2px'; + } else if (index > 0) { + left = '2px'; + } + + if (index === 1) { + bottom = '2px'; + } else if (index > 1) { + top = '2px'; + } + } else if (size === 4) { + if (index === 0 || index === 2) { + right = '2px'; + } + + if (index === 1 || index === 3) { + left = '2px'; + } + + if (index < 2) { + bottom = '2px'; + } else { + top = '2px'; + } + } + + let thumbnail = ''; + + if (attachment.get('type') === 'unknown') { + return ( +
+ + + +
+ ); + } else if (attachment.get('type') === 'image') { + const previewUrl = attachment.get('preview_url'); + const previewWidth = attachment.getIn(['meta', 'small', 'width']); + + 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 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; + + thumbnail = ( + + {attachment.get('description')} + + ); + } else if (attachment.get('type') === 'gifv') { + const autoPlay = this.getAutoPlay(); + + thumbnail = ( +
+
+ ); + } + + return ( +
+ + {visible && thumbnail} +
+ ); + } + +} + +export default @injectIntl +class MediaGallery extends React.PureComponent { + + static propTypes = { + sensitive: PropTypes.bool, + standalone: PropTypes.bool, + letterbox: PropTypes.bool, + fullwidth: PropTypes.bool, + hidden: PropTypes.bool, + media: ImmutablePropTypes.list.isRequired, + size: PropTypes.object, + onOpenMedia: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + defaultWidth: PropTypes.number, + cacheWidth: PropTypes.func, + visible: PropTypes.bool, + autoplay: PropTypes.bool, + 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, + }; + + componentDidMount () { + window.addEventListener('resize', this.handleResize, { passive: true }); + } + + componentWillUnmount () { + window.removeEventListener('resize', this.handleResize); + } + + 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) { + this.setState({ visible: nextProps.visible }); + } + } + + componentDidUpdate (prevProps) { + if (this.node) { + this.handleResize(); + } + } + + handleResize = debounce(() => { + if (this.node) { + this._setDimensions(); + } + }, 250, { + leading: true, + trailing: true, + }); + + handleOpen = () => { + if (this.props.onToggleVisibility) { + this.props.onToggleVisibility(); + } else { + this.setState({ visible: !this.state.visible }); + } + }; + + handleClick = (index) => { + this.props.onOpenMedia(this.props.media, index); + }; + + handleRef = (node) => { + this.node = node; + + if (this.node) { + this._setDimensions(); + } + }; + + _setDimensions () { + const width = this.node.offsetWidth; + + if (width && width != this.state.width) { + // offsetWidth triggers a layout, so only calculate when we need to + if (this.props.cacheWidth) { + this.props.cacheWidth(width); + } + + this.setState({ + width: width, + }); + } + } + + isStandaloneEligible() { + const { media, standalone } = this.props; + return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); + } + + render () { + const { media, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props; + const { visible } = this.state; + const size = media.take(4).size; + const uncached = media.every(attachment => attachment.get('type') === 'unknown'); + + const width = this.state.width || defaultWidth; + + let children, spoilerButton; + + const style = {}; + + const computedClass = classNames('media-gallery', { 'full-width': fullwidth }); + + if (this.isStandaloneEligible() && width) { + style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); + } else if (width) { + style.height = width / (16/9); + } else { + return (
); + } + + if (this.isStandaloneEligible()) { + children = ; + } else { + children = media.take(4).map((attachment, i) => ); + } + + if (uncached) { + spoilerButton = ( + + ); + } else if (visible) { + spoilerButton = ; + } else { + spoilerButton = ( + + ); + } + + return ( +
+
+ {spoilerButton} + {visible && sensitive && ( + + + + )} +
+ + {children} +
+ ); + } + +} -- cgit From 0e476f3c4fbbcab9b4895b8abff93075dfd2bf0c Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Sun, 26 Feb 2023 20:13:27 +0100 Subject: [Glitch] Add `lang` attribute to media and poll options Port d3eefead3014175b264cb56f6f4cb552cbaaeac6 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/gifv.jsx | 5 ++++- .../flavours/glitch/components/media_attachments.jsx | 6 +++++- .../flavours/glitch/components/media_gallery.jsx | 14 +++++++++----- app/javascript/flavours/glitch/components/poll.jsx | 5 ++++- app/javascript/flavours/glitch/components/status.jsx | 5 ++++- .../features/account_gallery/components/media_item.jsx | 3 +++ app/javascript/flavours/glitch/features/audio/index.jsx | 4 +++- .../glitch/features/status/components/detailed_status.jsx | 5 ++++- .../flavours/glitch/features/ui/components/audio_modal.jsx | 7 +++++-- .../features/ui/components/compare_history_modal.jsx | 11 +++++++---- .../glitch/features/ui/components/image_loader.jsx | 5 ++++- .../flavours/glitch/features/ui/components/media_modal.jsx | 13 +++++++++++-- .../flavours/glitch/features/ui/components/video_modal.jsx | 12 ++++++++++-- .../glitch/features/ui/components/zoomable_image.jsx | 5 ++++- app/javascript/flavours/glitch/features/video/index.jsx | 4 +++- 15 files changed, 80 insertions(+), 24 deletions(-) (limited to 'app/javascript/flavours/glitch/components/media_gallery.jsx') diff --git a/app/javascript/flavours/glitch/components/gifv.jsx b/app/javascript/flavours/glitch/components/gifv.jsx index 1f0f99b46..9ec201c6c 100644 --- a/app/javascript/flavours/glitch/components/gifv.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/media_attachments.jsx b/app/javascript/flavours/glitch/components/media_attachments.jsx index 33f01bb5a..b11d3526f 100644 --- a/app/javascript/flavours/glitch/components/media_attachments.jsx +++ b/app/javascript/flavours/glitch/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, revealed: PropTypes.bool, @@ -49,7 +50,7 @@ export default class MediaAttachments extends ImmutablePureComponent { }; render () { - const { status, width, height, revealed } = this.props; + const { status, lang, width, height, revealed } = this.props; const mediaAttachments = status.get('media_attachments'); if (mediaAttachments.size === 0) { @@ -65,6 +66,7 @@ export default class MediaAttachments extends ImmutablePureComponent { ( - + @@ -209,6 +211,7 @@ class Item extends React.PureComponent { className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`} aria-label={attachment.get('description')} title={attachment.get('description')} + lang={lang} role='application' src={attachment.get('url')} onClick={this.handleClick} @@ -251,6 +254,7 @@ class MediaGallery extends React.PureComponent { fullwidth: PropTypes.bool, hidden: PropTypes.bool, media: ImmutablePropTypes.list.isRequired, + lang: PropTypes.string, size: PropTypes.object, onOpenMedia: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -342,7 +346,7 @@ class MediaGallery extends React.PureComponent { } render () { - const { media, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props; + const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props; const { visible } = this.state; const size = media.take(4).size; const uncached = media.every(attachment => attachment.get('type') === 'unknown'); @@ -364,9 +368,9 @@ class MediaGallery extends React.PureComponent { } if (this.isStandaloneEligible()) { - children = ; + children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } if (uncached) { diff --git a/app/javascript/flavours/glitch/components/poll.jsx b/app/javascript/flavours/glitch/components/poll.jsx index 53ece560e..8b799309b 100644 --- a/app/javascript/flavours/glitch/components/poll.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 34880efe4..2f919176c 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -630,6 +630,7 @@ class Status extends ImmutablePureComponent { ( ); + contentMedia.push(); contentMediaIcons.push('tasks'); } diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx index d169875b0..5fd84996b 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx index c4aa98962..05c3beef9 100644 --- a/app/javascript/flavours/glitch/features/audio/index.jsx +++ b/app/javascript/flavours/glitch/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, @@ -464,7 +465,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); @@ -509,6 +510,7 @@ class Audio extends React.PureComponent { onKeyDown={this.handleAudioKeyDown} title={alt} aria-label={alt} + lang={lang} />
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx index 644881fa5..a94572855 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx @@ -169,6 +169,7 @@ class DetailedStatus extends ImmutablePureComponent {