monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Translate CW, poll options and media descriptions 

Port 69057467cb to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Christian Schmidt 2023-06-01 00:10:21 +02:00 committed by Claire
parent 93c714417f
commit 7e25fd9b0c
15 changed files with 173 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/javascript/flavours/glitch/actions/importer/normalizer.js
View File

@ -6,7 +6,7 @@ import { unescapeHTML } from 'flavours/glitch/utils/html';
const domParser = new DOMParser(); const domParser = new DOMParser();
const makeEmojiMap = record => record.emojis.reduce((obj, emoji) => { const makeEmojiMap = emojis => emojis.reduce((obj, emoji) => {
obj[`:${emoji.shortcode}:`] = emoji; obj[`:${emoji.shortcode}:`] = emoji;
return obj; return obj;
}, {}); }, {});
@ -20,7 +20,7 @@ export function searchTextFromRawStatus (status) {
export function normalizeAccount(account) { export function normalizeAccount(account) {
account = { ...account }; account = { ...account };
const emojiMap = makeEmojiMap(account); const emojiMap = makeEmojiMap(account.emojis);
const displayName = account.display_name.trim().length === 0 ? account.username : account.display_name; const displayName = account.display_name.trim().length === 0 ? account.username : account.display_name;
account.display_name_html = emojify(escapeTextContentForBrowser(displayName), emojiMap); account.display_name_html = emojify(escapeTextContentForBrowser(displayName), emojiMap);
@ -78,7 +78,7 @@ export function normalizeStatus(status, normalOldStatus, settings) {
} else { } else {
const spoilerText = normalStatus.spoiler_text || ''; const spoilerText = normalStatus.spoiler_text || '';
const searchContent = ([spoilerText, status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n'); const searchContent = ([spoilerText, status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
const emojiMap = makeEmojiMap(normalStatus); const emojiMap = makeEmojiMap(normalStatus.emojis);
normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent; normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent;
normalStatus.contentHtml = emojify(normalStatus.content, emojiMap); normalStatus.contentHtml = emojify(normalStatus.content, emojiMap);
@ -89,22 +89,48 @@ export function normalizeStatus(status, normalOldStatus, settings) {
return normalStatus; return normalStatus;
} }
export function normalizeStatusTranslation(translation, status) {
const emojiMap = makeEmojiMap(status.get('emojis').toJS());
const normalTranslation = {
detected_source_language: translation.detected_source_language,
language: translation.language,
provider: translation.provider,
contentHtml: emojify(translation.content, emojiMap),
spoilerHtml: emojify(escapeTextContentForBrowser(translation.spoiler_text), emojiMap),
spoiler_text: translation.spoiler_text,
};
return normalTranslation;
}
export function normalizePoll(poll) { export function normalizePoll(poll) {
const normalPoll = { ...poll }; const normalPoll = { ...poll };
const emojiMap = makeEmojiMap(normalPoll); const emojiMap = makeEmojiMap(poll.emojis);
normalPoll.options = poll.options.map((option, index) => ({ normalPoll.options = poll.options.map((option, index) => ({
...option, ...option,
voted: poll.own_votes && poll.own_votes.includes(index), voted: poll.own_votes && poll.own_votes.includes(index),
title_emojified: emojify(escapeTextContentForBrowser(option.title), emojiMap), titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
})); }));
return normalPoll; return normalPoll;
} }
export function normalizePollOptionTranslation(translation, poll) {
const emojiMap = makeEmojiMap(poll.get('emojis').toJS());
const normalTranslation = {
...translation,
titleHtml: emojify(escapeTextContentForBrowser(translation.title), emojiMap),
};
return normalTranslation;
}
export function normalizeAnnouncement(announcement) { export function normalizeAnnouncement(announcement) {
const normalAnnouncement = { ...announcement }; const normalAnnouncement = { ...announcement };
const emojiMap = makeEmojiMap(normalAnnouncement); const emojiMap = makeEmojiMap.emojis(normalAnnouncement);
normalAnnouncement.contentHtml = emojify(normalAnnouncement.content, emojiMap); normalAnnouncement.contentHtml = emojify(normalAnnouncement.content, emojiMap);

3
app/javascript/flavours/glitch/actions/statuses.js
View File

@ -344,7 +344,8 @@ export const translateStatusFail = (id, error) => ({
error, error,
}); });
export const undoStatusTranslation = id => ({ export const undoStatusTranslation = (id, pollId) => ({
type: STATUS_TRANSLATE_UNDO, type: STATUS_TRANSLATE_UNDO,
id, id,
pollId,
}); });

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

@ -52,8 +52,9 @@ export default class MediaAttachments extends ImmutablePureComponent {
}; };
render () { render () {
const { status, lang, width, height, revealed } = this.props; const { status, width, height, revealed } = this.props;
const mediaAttachments = status.get('media_attachments'); const mediaAttachments = status.get('media_attachments');
const language = status.getIn(['language', 'translation']) || status.get('language') || this.props.lang;
if (mediaAttachments.size === 0) { if (mediaAttachments.size === 0) {
return null; return null;
@ -61,14 +62,15 @@ export default class MediaAttachments extends ImmutablePureComponent {
if (mediaAttachments.getIn([0, 'type']) === 'audio') { if (mediaAttachments.getIn([0, 'type']) === 'audio') {
const audio = mediaAttachments.get(0); const audio = mediaAttachments.get(0);
const description = audio.getIn(['translation', 'description']) || audio.get('description');
return ( return (
<Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} > <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
{Component => ( {Component => (
<Component <Component
src={audio.get('url')} src={audio.get('url')}
alt={audio.get('description')} alt={description}
lang={lang || status.get('language')} lang={language}
width={width} width={width}
height={height} height={height}
poster={audio.get('preview_url') || status.getIn(['account', 'avatar_static'])} poster={audio.get('preview_url') || status.getIn(['account', 'avatar_static'])}
@ -82,6 +84,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
); );
} else if (mediaAttachments.getIn([0, 'type']) === 'video') { } else if (mediaAttachments.getIn([0, 'type']) === 'video') {
const video = mediaAttachments.get(0); const video = mediaAttachments.get(0);
const description = video.getIn(['translation', 'description']) || video.get('description');
return ( return (
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
@ -91,8 +94,8 @@ export default class MediaAttachments extends ImmutablePureComponent {
frameRate={video.getIn(['meta', 'original', 'frame_rate'])} frameRate={video.getIn(['meta', 'original', 'frame_rate'])}
blurhash={video.get('blurhash')} blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={description}
lang={lang || status.get('language')} lang={language}
width={width} width={width}
height={height} height={height}
inline inline
@ -109,7 +112,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
{Component => ( {Component => (
<Component <Component
media={mediaAttachments} media={mediaAttachments}
lang={lang || status.get('language')} lang={language}
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
defaultWidth={width} defaultWidth={width}
revealed={revealed} revealed={revealed}

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

@ -124,10 +124,12 @@ class Item extends PureComponent {
badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>); badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>);
} }
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
if (attachment.get('type') === 'unknown') { if (attachment.get('type') === 'unknown') {
return ( return (
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}> <div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<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'> <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={description} lang={lang} target='_blank' rel='noopener noreferrer'>
<Blurhash <Blurhash
hash={attachment.get('blurhash')} hash={attachment.get('blurhash')}
className='media-gallery__preview' className='media-gallery__preview'
@ -166,8 +168,8 @@ class Item extends PureComponent {
src={previewUrl} src={previewUrl}
srcSet={srcSet} srcSet={srcSet}
sizes={sizes} sizes={sizes}
alt={attachment.get('description')} alt={description}
title={attachment.get('description')} title={description}
lang={lang} lang={lang}
style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }} style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
onLoad={this.handleImageLoad} onLoad={this.handleImageLoad}
@ -183,8 +185,8 @@ class Item extends PureComponent {
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<video <video
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`} className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
aria-label={attachment.get('description')} aria-label={description}
title={attachment.get('description')} title={description}
lang={lang} lang={lang}
role='application' role='application'
src={attachment.get('url')} src={attachment.get('url')}

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

@ -139,10 +139,12 @@ class Poll extends ImmutablePureComponent {
const active = !!this.state.selected[`${optionIndex}`]; const active = !!this.state.selected[`${optionIndex}`];
const voted = option.get('voted') || (poll.get('own_votes') && poll.get('own_votes').includes(optionIndex)); const voted = option.get('voted') || (poll.get('own_votes') && poll.get('own_votes').includes(optionIndex));
let titleEmojified = option.get('title_emojified'); const title = option.getIn(['translation', 'title']) || option.get('title');
if (!titleEmojified) { let titleHtml = option.getIn(['translation', 'titleHtml']) || option.get('titleHtml');
if (!titleHtml) {
const emojiMap = makeEmojiMap(poll); const emojiMap = makeEmojiMap(poll);
titleEmojified = emojify(escapeTextContentForBrowser(option.get('title')), emojiMap); titleHtml = emojify(escapeTextContentForBrowser(title), emojiMap);
} }
return ( return (
@ -164,7 +166,7 @@ class Poll extends ImmutablePureComponent {
role={poll.get('multiple') ? 'checkbox' : 'radio'} role={poll.get('multiple') ? 'checkbox' : 'radio'}
onKeyPress={this.handleOptionKeyPress} onKeyPress={this.handleOptionKeyPress}
aria-checked={active} aria-checked={active}
aria-label={option.get('title')} aria-label={title}
lang={lang} lang={lang}
data-index={optionIndex} data-index={optionIndex}
/> />
@ -183,7 +185,7 @@ class Poll extends ImmutablePureComponent {
<span <span
className='poll__option__text translate' className='poll__option__text translate'
lang={lang} lang={lang}
dangerouslySetInnerHTML={{ __html: titleEmojified }} dangerouslySetInnerHTML={{ __html: titleHtml }}
/> />
{!!voted && <span className='poll__voted'> {!!voted && <span className='poll__voted'>

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

@ -26,12 +26,18 @@ import StatusHeader from './status_header';
import StatusIcons from './status_icons'; import StatusIcons from './status_icons';
import StatusPrepend from './status_prepend'; import StatusPrepend from './status_prepend';
const domParser = new DOMParser();
export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => { export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => {
const displayName = status.getIn(['account', 'display_name']); const displayName = status.getIn(['account', 'display_name']);
const spoilerText = status.getIn(['translation', 'spoiler_text']) || status.get('spoiler_text');
const contentHtml = status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
const contentText = domParser.parseFromString(contentHtml, 'text/html').documentElement.textContent;
const values = [ const values = [
displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName, displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
status.get('spoiler_text') && !expanded ? status.get('spoiler_text') : status.get('search_index').slice(status.get('spoiler_text').length), spoilerText && !expanded ? spoilerText : contentText,
intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }), intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
status.getIn(['account', 'acct']), status.getIn(['account', 'acct']),
]; ];
@ -391,12 +397,14 @@ class Status extends ImmutablePureComponent {
handleOpenVideo = (options) => { handleOpenVideo = (options) => {
const { status } = this.props; const { status } = this.props;
this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), status.get('language'), options); const lang = status.getIn(['translation', 'language']) || status.get('language');
this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), lang, options);
}; };
handleOpenMedia = (media, index) => { handleOpenMedia = (media, index) => {
const { status } = this.props; const { status } = this.props;
this.props.onOpenMedia(status.get('id'), media, index, status.get('language')); const lang = status.getIn(['translation', 'language']) || status.get('language');
this.props.onOpenMedia(status.get('id'), media, index, lang);
}; };
handleHotkeyOpenMedia = e => { handleHotkeyOpenMedia = e => {
@ -406,10 +414,11 @@ class Status extends ImmutablePureComponent {
e.preventDefault(); e.preventDefault();
if (status.get('media_attachments').size > 0) { if (status.get('media_attachments').size > 0) {
const lang = status.getIn(['translation', 'language']) || status.get('language');
if (status.getIn(['media_attachments', 0, 'type']) === 'video') { if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
onOpenVideo(statusId, status.getIn(['media_attachments', 0]), { startTime: 0 }); onOpenVideo(statusId, status.getIn(['media_attachments', 0]), lang, { startTime: 0 });
} else { } else {
onOpenMedia(statusId, status.get('media_attachments'), 0); onOpenMedia(statusId, status.get('media_attachments'), 0, lang);
} }
} }
}; };
@ -625,6 +634,8 @@ class Status extends ImmutablePureComponent {
media.push(<PictureInPicturePlaceholder />); media.push(<PictureInPicturePlaceholder />);
mediaIcons.push('video-camera'); mediaIcons.push('video-camera');
} else if (attachments.size > 0) { } else if (attachments.size > 0) {
const language = status.getIn(['translation', 'language']) || status.get('language');
if (muted || attachments.some(item => item.get('type') === 'unknown')) { if (muted || attachments.some(item => item.get('type') === 'unknown')) {
media.push( media.push(
<AttachmentList <AttachmentList
@ -634,14 +645,15 @@ class Status extends ImmutablePureComponent {
); );
} else if (attachments.getIn([0, 'type']) === 'audio') { } else if (attachments.getIn([0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
media.push( media.push(
<Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} > <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
{Component => ( {Component => (
<Component <Component
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={description}
lang={status.get('language')} lang={language}
poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])} poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
backgroundColor={attachment.getIn(['meta', 'colors', 'background'])} backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])} foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
@ -662,6 +674,7 @@ class Status extends ImmutablePureComponent {
mediaIcons.push('music'); mediaIcons.push('music');
} else if (attachments.getIn([0, 'type']) === 'video') { } else if (attachments.getIn([0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
media.push( media.push(
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
@ -670,8 +683,8 @@ class Status extends ImmutablePureComponent {
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])} frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
blurhash={attachment.get('blurhash')} blurhash={attachment.get('blurhash')}
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={description}
lang={status.get('language')} lang={language}
inline inline
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
@ -691,7 +704,7 @@ class Status extends ImmutablePureComponent {
{Component => ( {Component => (
<Component <Component
media={attachments} media={attachments}
lang={status.get('language')} lang={language}
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={!rootId && settings.getIn(['media', 'fullwidth'])} fullwidth={!rootId && settings.getIn(['media', 'fullwidth'])}
@ -724,7 +737,8 @@ class Status extends ImmutablePureComponent {
} }
if (status.get('poll')) { if (status.get('poll')) {
contentMedia.push(<PollContainer pollId={status.get('poll')} lang={status.get('language')} />); const language = status.getIn(['translation', 'language']) || status.get('language');
contentMedia.push(<PollContainer pollId={status.get('poll')} lang={language} />);
contentMediaIcons.push('tasks'); contentMediaIcons.push('tasks');
} }

16
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -327,11 +327,11 @@ class StatusContent extends PureComponent {
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
const contentLocale = intl.locale.replace(/[_-].*/, ''); const contentLocale = intl.locale.replace(/[_-].*/, '');
const targetLanguages = this.props.languages?.get(status.get('language') || 'und'); const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
const renderTranslate = this.props.onTranslate && this.context.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && targetLanguages?.includes(contentLocale); const renderTranslate = this.props.onTranslate && this.context.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') }; const content = { __html: status.getIn(['translation', 'contentHtml']) || status.get('contentHtml') };
const spoilerContent = { __html: status.get('spoilerHtml') }; const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
const lang = status.get('translation') ? intl.locale : status.get('language'); const language = status.getIn(['translation', 'language']) || status.get('language');
const classNames = classnames('status__content', { const classNames = classnames('status__content', {
'status__content--with-action': parseClick && !disabled, 'status__content--with-action': parseClick && !disabled,
'status__content--with-spoiler': status.get('spoiler_text').length > 0, 'status__content--with-spoiler': status.get('spoiler_text').length > 0,
@ -396,7 +396,7 @@ class StatusContent extends PureComponent {
<p <p
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
> >
<span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={lang} /> <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
{' '} {' '}
<button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}> <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
{toggleText} {toggleText}
@ -414,7 +414,7 @@ class StatusContent extends PureComponent {
className='status__content__text translate' className='status__content__text translate'
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
lang={lang} lang={language}
/> />
{!hidden && translateButton} {!hidden && translateButton}
{media} {media}
@ -439,7 +439,7 @@ class StatusContent extends PureComponent {
tabIndex={0} tabIndex={0}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
lang={lang} lang={language}
/> />
{translateButton} {translateButton}
{media} {media}
@ -460,7 +460,7 @@ class StatusContent extends PureComponent {
tabIndex={0} tabIndex={0}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
lang={lang} lang={language}
/> />
{translateButton} {translateButton}
{media} {media}

2
app/javascript/flavours/glitch/containers/status_container.js
View File

@ -218,7 +218,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
onTranslate (status) { onTranslate (status) {
if (status.get('translation')) { if (status.get('translation')) {
dispatch(undoStatusTranslation(status.get('id'))); dispatch(undoStatusTranslation(status.get('id'), status.get('poll')));
} else { } else {
dispatch(translateStatus(status.get('id'))); dispatch(translateStatus(status.get('id')));
} }

15
app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
View File

@ -158,6 +158,8 @@ class DetailedStatus extends ImmutablePureComponent {
outerStyle.height = `${this.state.height}px`; outerStyle.height = `${this.state.height}px`;
} }
const language = status.getIn(['translation', 'language']) || status.get('language');
if (pictureInPicture.get('inUse')) { if (pictureInPicture.get('inUse')) {
media.push(<PictureInPicturePlaceholder />); media.push(<PictureInPicturePlaceholder />);
mediaIcons.push('video-camera'); mediaIcons.push('video-camera');
@ -166,12 +168,13 @@ class DetailedStatus extends ImmutablePureComponent {
media.push(<AttachmentList media={status.get('media_attachments')} />); media.push(<AttachmentList media={status.get('media_attachments')} />);
} else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
media.push( media.push(
<Audio <Audio
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={description}
lang={status.get('language')} lang={language}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)} duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])} poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
backgroundColor={attachment.getIn(['meta', 'colors', 'background'])} backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
@ -187,14 +190,16 @@ class DetailedStatus extends ImmutablePureComponent {
mediaIcons.push('music'); mediaIcons.push('music');
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
media.push( media.push(
<Video <Video
preview={attachment.get('preview_url')} preview={attachment.get('preview_url')}
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])} frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
blurhash={attachment.get('blurhash')} blurhash={attachment.get('blurhash')}
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={description}
lang={status.get('language')} lang={language}
inline inline
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
@ -213,7 +218,7 @@ class DetailedStatus extends ImmutablePureComponent {
standalone standalone
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
media={status.get('media_attachments')} media={status.get('media_attachments')}
lang={status.get('language')} lang={language}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])} fullwidth={settings.getIn(['media', 'fullwidth'])}
hidden={!expanded} hidden={!expanded}

2
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -481,7 +481,7 @@ class Status extends ImmutablePureComponent {
const { dispatch } = this.props; const { dispatch } = this.props;
if (status.get('translation')) { if (status.get('translation')) {
dispatch(undoStatusTranslation(status.get('id'))); dispatch(undoStatusTranslation(status.get('id'), status.get('poll')));
} else { } else {
dispatch(translateStatus(status.get('id'))); dispatch(translateStatus(status.get('id')));
} }

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

@ -8,7 +8,7 @@ import Audio from 'flavours/glitch/features/audio';
import Footer from 'flavours/glitch/features/picture_in_picture/components/footer'; import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
const mapStateToProps = (state, { statusId }) => ({ const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']), status: state.getIn(['statuses', statusId]),
accountStaticAvatar: state.getIn(['accounts', state.getIn(['statuses', statusId, 'account']), 'avatar_static']), accountStaticAvatar: state.getIn(['accounts', state.getIn(['statuses', statusId, 'account']), 'avatar_static']),
}); });
@ -17,7 +17,7 @@ class AudioModal extends ImmutablePureComponent {
static propTypes = { static propTypes = {
media: ImmutablePropTypes.map.isRequired, media: ImmutablePropTypes.map.isRequired,
statusId: PropTypes.string.isRequired, statusId: PropTypes.string.isRequired,
language: PropTypes.string, status: ImmutablePropTypes.map.isRequired,
accountStaticAvatar: PropTypes.string.isRequired, accountStaticAvatar: PropTypes.string.isRequired,
options: PropTypes.shape({ options: PropTypes.shape({
autoPlay: PropTypes.bool, autoPlay: PropTypes.bool,
@ -31,15 +31,17 @@ class AudioModal extends ImmutablePureComponent {
}; };
render () { render () {
const { media, language, accountStaticAvatar, statusId, onClose } = this.props; const { media, status, accountStaticAvatar, onClose } = this.props;
const options = this.props.options || {}; const options = this.props.options || {};
const language = status.getIn(['translation', 'language']) || status.get('language');
const description = media.getIn(['translation', 'description']) || media.get('description');
return ( return (
<div className='modal-root__modal audio-modal'> <div className='modal-root__modal audio-modal'>
<div className='audio-modal__container'> <div className='audio-modal__container'>
<Audio <Audio
src={media.get('url')} src={media.get('url')}
alt={media.get('description')} alt={description}
lang={language} lang={language}
duration={media.getIn(['meta', 'original', 'duration'], 0)} duration={media.getIn(['meta', 'original', 'duration'], 0)}
height={150} height={150}
@ -52,7 +54,7 @@ class AudioModal extends ImmutablePureComponent {
</div> </div>
<div className='media-modal__overlay'> <div className='media-modal__overlay'>
{statusId && <Footer statusId={statusId} withOpenButton onClose={onClose} />} {status && <Footer statusId={status.get('id')} withOpenButton onClose={onClose} />}
</div> </div>
</div> </div>
); );

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

@ -147,6 +147,7 @@ class MediaModal extends ImmutablePureComponent {
const content = media.map((image) => { const content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null; const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null; const height = image.getIn(['meta', 'original', 'height']) || null;
const description = image.getIn(['translation', 'description']) || image.get('description');
if (image.get('type') === 'image') { if (image.get('type') === 'image') {
return ( return (
@ -155,7 +156,7 @@ class MediaModal extends ImmutablePureComponent {
src={image.get('url')} src={image.get('url')}
width={width} width={width}
height={height} height={height}
alt={image.get('description')} alt={description}
lang={lang} lang={lang}
key={image.get('url')} key={image.get('url')}
onClick={this.toggleNavigation} onClick={this.toggleNavigation}
@ -178,7 +179,7 @@ class MediaModal extends ImmutablePureComponent {
volume={volume || 1} volume={volume || 1}
onCloseVideo={onClose} onCloseVideo={onClose}
detailed detailed
alt={image.get('description')} alt={description}
lang={lang} lang={lang}
key={image.get('url')} key={image.get('url')}
/> />
@ -190,7 +191,7 @@ class MediaModal extends ImmutablePureComponent {
width={width} width={width}
height={height} height={height}
key={image.get('url')} key={image.get('url')}
alt={image.get('description')} alt={description}
lang={lang} lang={lang}
onClick={this.toggleNavigation} onClick={this.toggleNavigation}
/> />

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

@ -9,7 +9,7 @@ import Footer from 'flavours/glitch/features/picture_in_picture/components/foote
import Video from 'flavours/glitch/features/video'; import Video from 'flavours/glitch/features/video';
const mapStateToProps = (state, { statusId }) => ({ const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']), status: state.getIn(['statuses', statusId]),
}); });
class VideoModal extends ImmutablePureComponent { class VideoModal extends ImmutablePureComponent {
@ -17,7 +17,7 @@ class VideoModal extends ImmutablePureComponent {
static propTypes = { static propTypes = {
media: ImmutablePropTypes.map.isRequired, media: ImmutablePropTypes.map.isRequired,
statusId: PropTypes.string, statusId: PropTypes.string,
language: PropTypes.string, status: ImmutablePropTypes.map,
options: PropTypes.shape({ options: PropTypes.shape({
startTime: PropTypes.number, startTime: PropTypes.number,
autoPlay: PropTypes.bool, autoPlay: PropTypes.bool,
@ -38,8 +38,10 @@ class VideoModal extends ImmutablePureComponent {
} }
render () { render () {
const { media, statusId, language, onClose } = this.props; const { media, status, onClose } = this.props;
const options = this.props.options || {}; const options = this.props.options || {};
const language = status.getIn(['translation', 'language']) || status.get('language');
const description = media.getIn(['translation', 'description']) || media.get('description');
return ( return (
<div className='modal-root__modal video-modal'> <div className='modal-root__modal video-modal'>
@ -55,13 +57,13 @@ class VideoModal extends ImmutablePureComponent {
onCloseVideo={onClose} onCloseVideo={onClose}
autoFocus autoFocus
detailed detailed
alt={media.get('description')} alt={description}
lang={language} lang={language}
/> />
</div> </div>
<div className='media-modal__overlay'> <div className='media-modal__overlay'>
{statusId && <Footer statusId={statusId} withOpenButton onClose={onClose} />} {status && <Footer statusId={status.get('id')} withOpenButton onClose={onClose} />}
</div> </div>
</div> </div>
); );

29
app/javascript/flavours/glitch/reducers/polls.js
View File

@ -2,14 +2,43 @@ import { Map as ImmutableMap, fromJS } from 'immutable';
import { POLLS_IMPORT } from 'flavours/glitch/actions/importer'; import { POLLS_IMPORT } from 'flavours/glitch/actions/importer';
import { normalizePollOptionTranslation } from '../actions/importer/normalizer';
import { STATUS_TRANSLATE_SUCCESS, STATUS_TRANSLATE_UNDO } from '../actions/statuses';
const importPolls = (state, polls) => state.withMutations(map => polls.forEach(poll => map.set(poll.id, fromJS(poll)))); const importPolls = (state, polls) => state.withMutations(map => polls.forEach(poll => map.set(poll.id, fromJS(poll))));
const statusTranslateSuccess = (state, pollTranslation) => {
return state.withMutations(map => {
if (pollTranslation) {
const poll = state.get(pollTranslation.id);
pollTranslation.options.forEach((item, index) => {
map.setIn([pollTranslation.id, 'options', index, 'translation'], fromJS(normalizePollOptionTranslation(item, poll)));
});
}
});
};
const statusTranslateUndo = (state, id) => {
return state.withMutations(map => {
const options = map.getIn([id, 'options']);
if (options) {
options.forEach((item, index) => map.deleteIn([id, 'options', index, 'translation']));
}
});
};
const initialState = ImmutableMap(); const initialState = ImmutableMap();
export default function polls(state = initialState, action) { export default function polls(state = initialState, action) {
switch(action.type) { switch(action.type) {
case POLLS_IMPORT: case POLLS_IMPORT:
return importPolls(state, action.polls); return importPolls(state, action.polls);
case STATUS_TRANSLATE_SUCCESS:
return statusTranslateSuccess(state, action.translation.poll);
case STATUS_TRANSLATE_UNDO:
return statusTranslateUndo(state, action.pollId);
default: default:
return state; return state;
} }

26
app/javascript/flavours/glitch/reducers/statuses.js
View File

@ -25,6 +25,7 @@ import {
} from 'flavours/glitch/actions/timelines'; } from 'flavours/glitch/actions/timelines';
import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer'; import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer';
import { normalizeStatusTranslation } from '../actions/importer/normalizer';
const importStatus = (state, status) => state.set(status.id, fromJS(status)); const importStatus = (state, status) => state.set(status.id, fromJS(status));
@ -39,6 +40,27 @@ const deleteStatus = (state, id, references) => {
return state.delete(id); return state.delete(id);
}; };
const statusTranslateSuccess = (state, id, translation) => {
return state.withMutations(map => {
map.setIn([id, 'translation'], fromJS(normalizeStatusTranslation(translation, map.get(id))));
const list = map.getIn([id, 'media_attachments']);
if (translation.media_attachments && list) {
translation.media_attachments.forEach(item => {
const index = list.findIndex(i => i.get('id') === item.id);
map.setIn([id, 'media_attachments', index, 'translation'], fromJS({ description: item.description }));
});
}
});
};
const statusTranslateUndo = (state, id) => {
return state.withMutations(map => {
map.deleteIn([id, 'translation']);
map.getIn([id, 'media_attachments']).forEach((item, index) => map.deleteIn([id, 'media_attachments', index, 'translation']));
});
};
const initialState = ImmutableMap(); const initialState = ImmutableMap();
export default function statuses(state = initialState, action) { export default function statuses(state = initialState, action) {
@ -90,9 +112,9 @@ export default function statuses(state = initialState, action) {
case TIMELINE_DELETE: case TIMELINE_DELETE:
return deleteStatus(state, action.id, action.references); return deleteStatus(state, action.id, action.references);
case STATUS_TRANSLATE_SUCCESS: case STATUS_TRANSLATE_SUCCESS:
return state.setIn([action.id, 'translation'], fromJS(action.translation)); return statusTranslateSuccess(state, action.id, action.translation);
case STATUS_TRANSLATE_UNDO: case STATUS_TRANSLATE_UNDO:
return state.deleteIn([action.id, 'translation']); return statusTranslateUndo(state, action.id);
default: default:
return state; return state;
} }