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

app/javascript/flavours/glitch/features/status/components/detailed_status.jsx

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

app/javascript/flavours/glitch/features/status/index.jsx

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

app/javascript/flavours/glitch/features/ui/components/audio_modal.jsx

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

app/javascript/flavours/glitch/features/ui/components/media_modal.jsx

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

app/javascript/flavours/glitch/features/ui/components/video_modal.jsx

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