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

5
app/javascript/flavours/glitch/components/gifv.jsx
View File

@ -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

6
app/javascript/flavours/glitch/components/media_attachments.jsx
View File

@ -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 {
<Component
src={audio.get('url')}
alt={audio.get('description')}
lang={lang || status.get('language')}
width={width}
height={height}
poster={audio.get('preview_url') || status.getIn(['account', 'avatar_static'])}
@ -88,6 +90,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
blurhash={video.get('blurhash')}
src={video.get('url')}
alt={video.get('description')}
lang={lang || status.get('language')}
width={width}
height={height}
inline
@ -104,6 +107,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
{Component => (
<Component
media={mediaAttachments}
lang={lang || status.get('language')}
sensitive={status.get('sensitive')}
defaultWidth={width}
revealed={revealed}

14
app/javascript/flavours/glitch/components/media_gallery.jsx
View File

@ -36,6 +36,7 @@ class Item extends React.PureComponent {
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
lang: PropTypes.string,
standalone: PropTypes.bool,
index: PropTypes.number.isRequired,
size: PropTypes.number.isRequired,
@ -98,7 +99,7 @@ class Item extends React.PureComponent {
};
render () {
const { attachment, index, size, standalone, letterbox, displayWidth, visible } = this.props;
const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props;
let width = 50;
let height = 100;
@ -154,7 +155,7 @@ class Item extends React.PureComponent {
if (attachment.get('type') === 'unknown') {
return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} target='_blank' rel='noopener noreferrer'>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} lang={lang} target='_blank' rel='noopener noreferrer'>
<Blurhash
hash={attachment.get('blurhash')}
className='media-gallery__preview'
@ -195,6 +196,7 @@ class Item extends React.PureComponent {
sizes={sizes}
alt={attachment.get('description')}
title={attachment.get('description')}
lang={lang}
style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
/>
@ -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 = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />;
} else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />);
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />);
}
if (uncached) {

5
app/javascript/flavours/glitch/components/poll.jsx
View File

@ -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 {
<span
className='poll__option__text translate'
lang={lang}
dangerouslySetInnerHTML={{ __html: titleEmojified }}
/>

5
app/javascript/flavours/glitch/components/status.jsx
View File

@ -630,6 +630,7 @@ class Status extends ImmutablePureComponent {
<Component
src={attachment.get('url')}
alt={attachment.get('description')}
lang={status.get('language')}
poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
@ -659,6 +660,7 @@ class Status extends ImmutablePureComponent {
blurhash={attachment.get('blurhash')}
src={attachment.get('url')}
alt={attachment.get('description')}
lang={status.get('language')}
inline
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
@ -680,6 +682,7 @@ class Status extends ImmutablePureComponent {
{Component => (
<Component
media={attachments}
lang={status.get('language')}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
@ -714,7 +717,7 @@ class Status extends ImmutablePureComponent {
}
if (status.get('poll')) {
contentMedia.push(<PollContainer pollId={status.get('poll')} />);
contentMedia.push(<PollContainer pollId={status.get('poll')} lang={status.get('language')} />);
contentMediaIcons.push('tasks');
}