tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add lang attribute to media and poll options

Browse Source 
Port d3eefead30 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Christian Schmidt
2023-02-26 20:13:27 +01:00
committed by Claire
parent 276c1d32d6
commit 0e476f3c4f
15 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/flavours/glitch/features/ui/components/audio_modal.jsx
View File

@@ -7,15 +7,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']),
accountStaticAvatar: state.getIn(['accounts', state.getIn(['statuses', statusId, 'account']), 'avatar_static']),
});
export default @connect(mapStateToProps)
export default @connect(mapStateToProps, null, null, { forwardRef: true })
class AudioModal extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
statusId: PropTypes.string.isRequired,
language: PropTypes.string,
accountStaticAvatar: PropTypes.string.isRequired,
options: PropTypes.shape({
autoPlay: PropTypes.bool,
@@ -29,7 +31,7 @@ class AudioModal extends ImmutablePureComponent {
};
render () {
const { media, accountStaticAvatar, statusId, onClose } = this.props;
const { media, language, accountStaticAvatar, statusId, onClose } = this.props;
const options = this.props.options || {};
return (
@@ -38,6 +40,7 @@ class AudioModal extends ImmutablePureComponent {
<Audio
src={media.get('url')}
alt={media.get('description')}
lang={language}
duration={media.getIn(['meta', 'original', 'duration'], 0)}
height={150}
poster={media.get('preview_url') || accountStaticAvatar}

11
app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
View File

@@ -12,6 +12,7 @@ import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
import MediaAttachments from 'flavours/glitch/components/media_attachments';
const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']),
versions: state.getIn(['history', statusId, 'items']),
});
@@ -30,11 +31,12 @@ class CompareHistoryModal extends React.PureComponent {
onClose: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
statusId: PropTypes.string.isRequired,
language: PropTypes.string.isRequired,
versions: ImmutablePropTypes.list.isRequired,
};
render () {
const { index, versions, onClose } = this.props;
const { index, versions, language, onClose } = this.props;
const currentVersion = versions.get(index);
const emojiMap = currentVersion.get('emojis').reduce((obj, emoji) => {
@@ -65,12 +67,12 @@ class CompareHistoryModal extends React.PureComponent {
<div className='status__content'>
{currentVersion.get('spoiler_text').length > 0 && (
<React.Fragment>
<div className='translate' dangerouslySetInnerHTML={spoilerContent} />
<div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} />
<hr />
</React.Fragment>
)}
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} />
{!!currentVersion.get('poll') && (
<div className='poll'>
@@ -82,6 +84,7 @@ class CompareHistoryModal extends React.PureComponent {
<span
className='poll__option__text translate'
dangerouslySetInnerHTML={{ __html: emojify(escapeTextContentForBrowser(option.get('title')), emojiMap) }}
lang={language}
/>
</li>
))}
@@ -89,7 +92,7 @@ class CompareHistoryModal extends React.PureComponent {
</div>
)}
<MediaAttachments status={currentVersion} />
<MediaAttachments status={currentVersion} lang={language} />
</div>
</div>
</div>

5
app/javascript/flavours/glitch/features/ui/components/image_loader.jsx
View File

@@ -8,6 +8,7 @@ export default class ImageLoader extends PureComponent {
static propTypes = {
alt: PropTypes.string,
lang: PropTypes.string,
src: PropTypes.string.isRequired,
previewSrc: PropTypes.string,
width: PropTypes.number,
@@ -18,6 +19,7 @@ export default class ImageLoader extends PureComponent {
static defaultProps = {
alt: '',
lang: '',
width: null,
height: null,
};
@@ -129,7 +131,7 @@ export default class ImageLoader extends PureComponent {
};
render () {
const { alt, src, width, height, onClick } = this.props;
const { alt, lang, src, width, height, onClick } = this.props;
const { loading } = this.state;
const className = classNames('image-loader', {
@@ -154,6 +156,7 @@ export default class ImageLoader extends PureComponent {
) : (
<ZoomableImage
alt={alt}
lang={lang}
src={src}
onClick={onClick}
width={width}

13
app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
View File

@@ -3,6 +3,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Video from 'flavours/glitch/features/video';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { defineMessages, injectIntl } from 'react-intl';
import IconButton from 'flavours/glitch/components/icon_button';
@@ -20,7 +21,12 @@ const messages = defineMessages({
next: { id: 'lightbox.next', defaultMessage: 'Next' },
});
export default @injectIntl
const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']),
});
export default @connect(mapStateToProps, null, null, { forwardRef: true })
@injectIntl
class MediaModal extends ImmutablePureComponent {
static contextTypes = {
@@ -131,7 +137,7 @@ class MediaModal extends ImmutablePureComponent {
}
render () {
const { media, statusId, intl, onClose } = this.props;
const { media, language, statusId, intl, onClose } = this.props;
const { navigationHidden } = this.state;
const index = this.getIndex();
@@ -151,6 +157,7 @@ class MediaModal extends ImmutablePureComponent {
width={width}
height={height}
alt={image.get('description')}
lang={language}
key={image.get('url')}
onClick={this.toggleNavigation}
zoomButtonHidden={this.state.zoomButtonHidden}
@@ -173,6 +180,7 @@ class MediaModal extends ImmutablePureComponent {
onCloseVideo={onClose}
detailed
alt={image.get('description')}
lang={language}
key={image.get('url')}
/>
);
@@ -184,6 +192,7 @@ class MediaModal extends ImmutablePureComponent {
height={height}
key={image.get('preview_url')}
alt={image.get('description')}
lang={language}
onClick={this.toggleNavigation}
/>
);

12
app/javascript/flavours/glitch/features/ui/components/video_modal.jsx
View File

@@ -2,11 +2,17 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Video from 'flavours/glitch/features/video';
import { connect } from 'react-redux';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
import { getAverageFromBlurhash } from 'flavours/glitch/blurhash';
export default class VideoModal extends ImmutablePureComponent {
const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']),
});
export default @connect(mapStateToProps, null, null, { forwardRef: true })
class VideoModal extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
@@ -15,6 +21,7 @@ export default class VideoModal extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
statusId: PropTypes.string,
language: PropTypes.string,
options: PropTypes.shape({
startTime: PropTypes.number,
autoPlay: PropTypes.bool,
@@ -35,7 +42,7 @@ export default class VideoModal extends ImmutablePureComponent {
}
render () {
const { media, statusId, onClose } = this.props;
const { media, statusId, language, onClose } = this.props;
const options = this.props.options || {};
return (
@@ -53,6 +60,7 @@ export default class VideoModal extends ImmutablePureComponent {
autoFocus
detailed
alt={media.get('description')}
lang={language}
/>
</div>

5
app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
View File

@@ -96,6 +96,7 @@ class ZoomableImage extends React.PureComponent {
static propTypes = {
alt: PropTypes.string,
lang: PropTypes.string,
src: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
@@ -106,6 +107,7 @@ class ZoomableImage extends React.PureComponent {
static defaultProps = {
alt: '',
lang: '',
width: null,
height: null,
};
@@ -403,7 +405,7 @@ class ZoomableImage extends React.PureComponent {
};
render () {
const { alt, src, width, height, intl } = this.props;
const { alt, lang, src, width, height, intl } = this.props;
const { scale, lockTranslate } = this.state;
const overflow = scale === MIN_SCALE ? 'hidden' : 'scroll';
const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? 'media-modal__zoom-button--hidden' : '';
@@ -431,6 +433,7 @@ class ZoomableImage extends React.PureComponent {
ref={this.setImageRef}
alt={alt}
title={alt}
lang={lang}
src={src}
width={width}
height={height}