me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Translate CW, poll options and media descriptions

Browse Source 
Port 69057467cb to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-downstream
Christian Schmidt 1 year ago committed by Claire
parent 93c714417f
commit 7e25fd9b0c
15 changed files with 173 additions and 64 deletions
Show Stats Download Patch File Download Diff File

38
app/javascript/flavours/glitch/actions/importer/normalizer.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
} }

Write Preview
Loading…
Cancel
Save