Translate CW, poll options and media descriptions

app/controllers/api/v1/statuses/translations_controller.rb

@@ -11,7 +11,7 @@ class Api::V1::Statuses::TranslationsController < Api::BaseController
   rescue_from TranslationService::UnexpectedResponseError, TranslationService::QuotaExceededError, TranslationService::TooManyRequestsError, with: :service_unavailable
 
   def create
-    render json: @translation, serializer: REST::TranslationSerializer
+    render json: @status_translation, serializer: REST::StatusTranslationSerializer
   end
 
   private
@@ -24,6 +24,6 @@ def set_status
   end
 
   def set_translation
-    @translation = TranslateStatusService.new.call(@status, content_locale)
+    @status_translation = TranslateStatusService.new.call(@status, content_locale)
   end
 end

app/javascript/mastodon/actions/importer/normalizer.js

@@ -5,7 +5,7 @@ import { expandSpoilers } from '../../initial_state';
 
 const domParser = new DOMParser();
 
-const makeEmojiMap = record => record.emojis.reduce((obj, emoji) => {
+const makeEmojiMap = emojis => emojis.reduce((obj, emoji) => {
   obj[`:${emoji.shortcode}:`] = emoji;
   return obj;
 }, {});
@@ -19,7 +19,7 @@ export function searchTextFromRawStatus (status) {
 export function normalizeAccount(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;
 
   account.display_name_html = emojify(escapeTextContentForBrowser(displayName), emojiMap);
@@ -85,7 +85,7 @@ export function normalizeStatus(status, normalOldStatus) {
 
     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 emojiMap      = makeEmojiMap(normalStatus);
+    const emojiMap      = makeEmojiMap(normalStatus.emojis);
 
     normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent;
     normalStatus.contentHtml  = emojify(normalStatus.content, emojiMap);
@@ -96,22 +96,48 @@ export function normalizeStatus(status, normalOldStatus) {
   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) {
   const normalPoll = { ...poll };
-  const emojiMap = makeEmojiMap(normalPoll);
+  const emojiMap = makeEmojiMap(poll.emojis);
 
   normalPoll.options = poll.options.map((option, index) => ({
     ...option,
     voted: poll.own_votes && poll.own_votes.includes(index),
-    title_emojified: emojify(escapeTextContentForBrowser(option.title), emojiMap),
+    titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
   }));
 
   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) {
   const normalAnnouncement = { ...announcement };
-  const emojiMap = makeEmojiMap(normalAnnouncement);
+  const emojiMap = makeEmojiMap.emojis(normalAnnouncement);
 
   normalAnnouncement.contentHtml = emojify(normalAnnouncement.content, emojiMap);
 

app/javascript/mastodon/actions/statuses.js

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

app/javascript/mastodon/components/media_attachments.jsx

@@ -49,23 +49,26 @@ export default class MediaAttachments extends ImmutablePureComponent {
   };
 
   render () {
-    const { status, lang, width, height } = this.props;
+    const { status, width, height } = this.props;
     const mediaAttachments = status.get('media_attachments');
+    const translation = status.get('translation');
+    const language = translation ? translation.get('language') : (status.get('language') || this.props.lang);
 
     if (mediaAttachments.size === 0) {
       return null;
     }
 
     if (mediaAttachments.getIn([0, 'type']) === 'audio') {
       const audio = mediaAttachments.get(0);
+      const description = translation ? audio.getIn(['translation', 'description']) : audio.get('description');
 
       return (
         <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
           {Component => (
             <Component
               src={audio.get('url')}
-              alt={audio.get('description')}
-              lang={lang || status.get('language')}
+              alt={description}
+              lang={language}
               width={width}
               height={height}
               poster={audio.get('preview_url') || status.getIn(['account', 'avatar_static'])}
@@ -79,6 +82,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
       );
     } else if (mediaAttachments.getIn([0, 'type']) === 'video') {
       const video = mediaAttachments.get(0);
+      const description = translation ? video.getIn(['translation', 'description']) : video.get('description');
 
       return (
         <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
@@ -88,8 +92,8 @@ export default class MediaAttachments extends ImmutablePureComponent {
               frameRate={video.getIn(['meta', 'original', 'frame_rate'])}
               blurhash={video.get('blurhash')}
               src={video.get('url')}
-              alt={video.get('description')}
-              lang={lang || status.get('language')}
+              alt={description}
+              lang={language}
               width={width}
               height={height}
               inline
@@ -105,7 +109,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
           {Component => (
             <Component
               media={mediaAttachments}
-              lang={lang || status.get('language')}
+              lang={language}
               sensitive={status.get('sensitive')}
               defaultWidth={width}
               height={height}

app/javascript/mastodon/components/media_gallery.jsx

@@ -18,6 +18,7 @@ class Item extends React.PureComponent {
   static propTypes = {
     attachment: ImmutablePropTypes.map.isRequired,
     lang: PropTypes.string,
+    translation: ImmutablePropTypes.map,
     standalone: PropTypes.bool,
     index: PropTypes.number.isRequired,
     size: PropTypes.number.isRequired,
@@ -79,7 +80,7 @@ class Item extends React.PureComponent {
   };
 
   render () {
-    const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
+    const { attachment, lang, translation, index, size, standalone, displayWidth, visible } = this.props;
 
     let width  = 50;
     let height = 100;
@@ -132,10 +133,12 @@ class Item extends React.PureComponent {
 
     let thumbnail = '';
 
+    const description = translation ? attachment.getIn(['translation', 'description']) : attachment.get('description');
+
     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')} 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
               hash={attachment.get('blurhash')}
               className='media-gallery__preview'
@@ -173,8 +176,8 @@ class Item extends React.PureComponent {
             src={previewUrl}
             srcSet={srcSet}
             sizes={sizes}
-            alt={attachment.get('description')}
-            title={attachment.get('description')}
+            alt={description}
+            title={description}
             lang={lang}
             style={{ objectPosition: `${x}% ${y}%` }}
             onLoad={this.handleImageLoad}
@@ -188,8 +191,8 @@ class Item extends React.PureComponent {
         <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
           <video
             className='media-gallery__item-gifv-thumbnail'
-            aria-label={attachment.get('description')}
-            title={attachment.get('description')}
+            aria-label={description}
+            title={description}
             lang={lang}
             role='application'
             src={attachment.get('url')}
@@ -231,6 +234,7 @@ class MediaGallery extends React.PureComponent {
     standalone: PropTypes.bool,
     media: ImmutablePropTypes.list.isRequired,
     lang: PropTypes.string,
+    translation: ImmutablePropTypes.map,
     size: PropTypes.object,
     height: PropTypes.number.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
@@ -314,7 +318,7 @@ class MediaGallery extends React.PureComponent {
   }
 
   render () {
-    const { media, lang, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props;
+    const { media, lang, translation, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props;
     const { visible } = this.state;
     const width = this.state.width || defaultWidth;
 
@@ -336,9 +340,9 @@ class MediaGallery extends React.PureComponent {
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
 
     if (standalone && this.isFullSizeEligible()) {
-      children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />;
+      children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} translation={translation} 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} lang={lang} size={size} 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} translation={translation} size={size} displayWidth={width} visible={visible || uncached} />);
     }
 
     if (uncached) {

app/javascript/mastodon/components/poll.jsx

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

app/javascript/mastodon/components/status.jsx

@@ -22,12 +22,19 @@ import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
 
+const domParser = new DOMParser();
+
 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   const displayName = status.getIn(['account', 'display_name']);
 
+  const translation = status.get('translation');
+  const spoilerText = translation ? translation.get('spoiler_text') : status.get('spoiler_text');
+  const contentHtml = translation ? translation.get('contentHtml') : status.get('contentHtml');
+  const contentText = domParser.parseFromString(contentHtml, 'text/html').documentElement.textContent;
+
   const values = [
     displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
-    status.get('spoiler_text') && status.get('hidden') ? status.get('spoiler_text') : status.get('search_index').slice(status.get('spoiler_text').length),
+    spoilerText && status.get('hidden') ? spoilerText : contentText,
     intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
     status.getIn(['account', 'acct']),
   ];
@@ -401,6 +408,9 @@ class Status extends ImmutablePureComponent {
     if (pictureInPicture.get('inUse')) {
       media = <PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />;
     } else if (status.get('media_attachments').size > 0) {
+      const translation = status.get('translation');
+      const language = translation ? translation.get('language') : status.get('language');
+
       if (this.props.muted) {
         media = (
           <AttachmentList
@@ -410,14 +420,15 @@ class Status extends ImmutablePureComponent {
         );
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
         const attachment = status.getIn(['media_attachments', 0]);
+        const description = translation ? attachment.getIn(['translation', 'description']) : attachment.get('description');
 
         media = (
           <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
             {Component => (
               <Component
                 src={attachment.get('url')}
-                alt={attachment.get('description')}
-                lang={status.get('language')}
+                alt={description}
+                lang={language}
                 poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
                 backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
                 foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
@@ -437,6 +448,7 @@ class Status extends ImmutablePureComponent {
         );
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const attachment = status.getIn(['media_attachments', 0]);
+        const description = translation ? attachment.getIn(['translation', 'description']) : attachment.get('description');
 
         media = (
           <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
@@ -446,8 +458,8 @@ class Status extends ImmutablePureComponent {
                 frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
                 blurhash={attachment.get('blurhash')}
                 src={attachment.get('url')}
-                alt={attachment.get('description')}
-                lang={status.get('language')}
+                alt={description}
+                lang={language}
                 width={this.props.cachedMediaWidth}
                 height={110}
                 inline
@@ -467,7 +479,8 @@ class Status extends ImmutablePureComponent {
             {Component => (
               <Component
                 media={status.get('media_attachments')}
-                lang={status.get('language')}
+                lang={language}
+                translation={translation}
                 sensitive={status.get('sensitive')}
                 height={110}
                 onOpenMedia={this.handleOpenMedia}