From aed4d5a57837adfee6907c9b48522d3ec32ad788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 3 Oct 2023 18:29:19 +0200 Subject: [PATCH] Display translated text next to original text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/status-content.tsx | 71 +++++++++++++++++++++++------ src/components/translate-button.tsx | 2 +- src/locales/cy.json | 1 - src/locales/el.json | 1 - src/locales/en-Shaw.json | 1 - src/locales/en.json | 2 +- src/locales/es-AR.json | 1 - src/locales/es.json | 1 - src/locales/fa.json | 1 - src/locales/fr.json | 1 - src/locales/ga.json | 1 - src/locales/he.json | 1 - src/locales/hi.json | 1 - src/locales/hr.json | 1 - src/locales/hu.json | 1 - src/locales/id.json | 1 - src/locales/io.json | 1 - src/locales/is.json | 1 - src/locales/ja.json | 1 - src/locales/kk.json | 1 - src/locales/ko.json | 1 - src/locales/lt.json | 1 - src/locales/lv.json | 1 - src/locales/mk.json | 1 - src/locales/ms.json | 1 - src/locales/nn.json | 1 - src/locales/oc.json | 1 - src/locales/pt-BR.json | 1 - src/locales/pt.json | 1 - src/locales/ro.json | 1 - src/locales/ru.json | 1 - src/locales/sk.json | 1 - src/locales/sl.json | 1 - src/locales/sr-Latn.json | 1 - src/locales/sr.json | 1 - src/locales/sv.json | 1 - src/locales/ta.json | 1 - src/locales/te.json | 1 - src/locales/th.json | 1 - src/locales/uk.json | 1 - 40 files changed, 59 insertions(+), 53 deletions(-) diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx index 3a2f4aadc..a5f2d85e9 100644 --- a/src/components/status-content.tsx +++ b/src/components/status-content.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React, { useState, useRef, useLayoutEffect, useMemo } from 'react'; +import React, { useState, useRef, useLayoutEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { useHistory } from 'react-router-dom'; @@ -141,19 +141,16 @@ const StatusContent: React.FC = ({ updateStatusLinks(); }); - const parsedHtml = useMemo((): string => { - return translatable && status.translation ? status.translation.get('content')! : status.contentHtml; - }, [status.contentHtml, status.translation]); - if (status.content.length === 0) { return null; } + translatable = translatable && !visibleElementsHeight; + const withSpoiler = status.spoiler_text.length > 0; const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative focus:outline-none'; - const content = { __html: parsedHtml }; const direction = isRtl(status.search_index) ? 'rtl' : 'ltr'; const className = clsx(baseClassName, { 'cursor-pointer': onClick, @@ -173,21 +170,44 @@ const StatusContent: React.FC = ({ } if (onClick) { - output.push([ + const body = ( , - ]); + /> + ); + + if (translatable && status.translation) { + output.push( +
+
+ {body} +
+
+ +
+
, + ); + } else { + output.push(body); + } if (visibleElementsHeight) { output.push(); @@ -200,7 +220,7 @@ const StatusContent: React.FC = ({ return
{output}
; } else { - output.push([ + const body = ( = ({ 'leading-normal big-emoji': onlyEmoji, })} direction={direction} - dangerouslySetInnerHTML={content} + dangerouslySetInnerHTML={{ __html: status.contentHtml }} lang={status.language || undefined} size={textSize} - />, - ]); + /> + ); + if (translatable && status.translation) { + output.push( +
+
+ {body} +
+
+ +
+
, + ); + } else { + output.push(body); + } if (status.poll && typeof status.poll === 'string') { output.push(); } diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx index 68358ff60..de7fc8ad7 100644 --- a/src/components/translate-button.tsx +++ b/src/components/translate-button.tsx @@ -53,7 +53,7 @@ const TranslateButton: React.FC = ({ status }) => {