Display translated text next to original text

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-10-03 18:29:19 +02:00
parent 48becac6be
commit aed4d5a578
40 changed files with 59 additions and 53 deletions

View file

@ -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<IStatusContent> = ({
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<IStatusContent> = ({
}
if (onClick) {
output.push([
const body = (
<Markup
ref={node}
tabIndex={0}
key='content'
className={className}
direction={direction}
dangerouslySetInnerHTML={content}
dangerouslySetInnerHTML={{ __html: status.contentHtml }}
lang={status.language || undefined}
size={textSize}
style={{
maxHeight: visibleElementsHeight,
}}
/>,
]);
/>
);
if (translatable && status.translation) {
output.push(
<div className='flex gap-2'>
<div className='grow'>
{body}
</div>
<div className='grow'>
<Markup
ref={node}
tabIndex={0}
className={className}
direction={direction}
dangerouslySetInnerHTML={{ __html: status.translation.get('content')! }}
lang={status.language || undefined}
size={textSize}
/>
</div>
</div>,
);
} else {
output.push(body);
}
if (visibleElementsHeight) {
output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
@ -200,7 +220,7 @@ const StatusContent: React.FC<IStatusContent> = ({
return <div className={clsx({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
} else {
output.push([
const body = (
<Markup
ref={node}
tabIndex={0}
@ -209,12 +229,35 @@ const StatusContent: React.FC<IStatusContent> = ({
'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(
<div className='flex gap-2'>
<div className='grow'>
{body}
</div>
<div className='grow'>
<Markup
tabIndex={0}
key='translated_content'
className={clsx(baseClassName, {
'leading-normal big-emoji': onlyEmoji,
})}
direction={direction}
dangerouslySetInnerHTML={{ __html: status.translation.get('content')! }}
size={textSize}
/>
</div>
</div>,
);
} else {
output.push(body);
}
if (status.poll && typeof status.poll === 'string') {
output.push(<Poll id={status.poll} key='poll' status={status.url} />);
}

View file

@ -53,7 +53,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
<Stack space={3} alignItems='start'>
<Button
theme='muted'
text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
text={<FormattedMessage id='status.hide_translation' defaultMessage='Hide translation' />}
icon={require('@tabler/icons/language.svg')}
onClick={handleTranslate}
/>

View file

@ -1069,7 +1069,6 @@
"status.share": "Rhannu",
"status.show_less_all": "Dangos llai i bawb",
"status.show_more_all": "Dangos mwy i bawb",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Μοιράσου",
"status.show_less_all": "Δείξε λιγότερα για όλα",
"status.show_more_all": "Δείξε περισσότερα για όλα",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "𐑖𐑺",
"status.show_less_all": "𐑖𐑴 𐑤𐑧𐑕 𐑓 𐑷𐑤",
"status.show_more_all": "𐑖𐑴 𐑥𐑹 𐑓 𐑷𐑤",
"status.show_original": "Show original",
"status.title": "𐑐𐑴𐑕𐑑",
"status.title_direct": "𐑛𐑦𐑮𐑧𐑒𐑑 𐑥𐑧𐑕𐑦𐑡",
"status.translate": "Translate",

View file

@ -1476,6 +1476,7 @@
"status.filtered": "Filtered",
"status.group": "Posted in {group}",
"status.group_mod_delete": "Delete post from group",
"status.hide_translation": "Hide translation",
"status.interactions.dislikes": "{count, plural, one {Dislike} other {Dislikes}}",
"status.interactions.favourites": "{count, plural, one {Like} other {Likes}}",
"status.interactions.quotes": "{count, plural, one {Quote} other {Quotes}}",
@ -1515,7 +1516,6 @@
"status.show_filter_reason": "Show anyway",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post Details",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1119,7 +1119,6 @@
"status.share": "Compartir",
"status.show_less_all": "Mostrar menos para todo",
"status.show_more_all": "Mostrar más para todo",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1417,7 +1417,6 @@
"status.show_filter_reason": "Mostrar de todos modos",
"status.show_less_all": "Mostrar menos para todo",
"status.show_more_all": "Mostrar más para todo",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1078,7 +1078,6 @@
"status.share": "هم‌رسانی",
"status.show_less_all": "نمایش کمتر همه",
"status.show_more_all": "نمایش بیشتر همه",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1317,7 +1317,6 @@
"status.share": "Partager",
"status.show_less_all": "Tout replier",
"status.show_more_all": "Tout déplier",
"status.show_original": "Show original",
"status.title": "Détail de la publication",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "שיתוף",
"status.show_less_all": "הצג פחות לכולם",
"status.show_more_all": "הראה יותר לכולם",
"status.show_original": "Show original",
"status.title": "פוסט",
"status.title_direct": "הודעה ישירה",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1239,7 +1239,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Prikaži više za sve",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Megosztás",
"status.show_less_all": "Kevesebbet mindenhol",
"status.show_more_all": "Többet mindenhol",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1070,7 +1070,6 @@
"status.share": "Deila",
"status.show_less_all": "Sýna minna fyrir allt",
"status.show_more_all": "Sýna meira fyrir allt",
"status.show_original": "Show original",
"status.title": "Færsla",
"status.title_direct": "Bein skilaboð",
"status.translate": "Translate",

View file

@ -1128,7 +1128,6 @@
"status.share": "共有",
"status.show_less_all": "全て隠す",
"status.show_more_all": "全て見る",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Бөлісу",
"status.show_less_all": "Бәрін аздап көрсет",
"status.show_more_all": "Бәрін толығымен",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "공유",
"status.show_less_all": "모두 접기",
"status.show_more_all": "모두 펼치기",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Share",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Partejar",
"status.show_less_all": "Los tornar plegar totes",
"status.show_more_all": "Los desplegar totes",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Compartilhar",
"status.show_less_all": "Mostrar menos para todas as mensagens",
"status.show_more_all": "Mostrar mais para todas as mensagens",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Partilhar",
"status.show_less_all": "Mostrar menos para todas",
"status.show_more_all": "Mostrar mais para todas",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Distribuie",
"status.show_less_all": "Arată mai puțin pentru toți",
"status.show_more_all": "Arată mai mult pentru toți",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1146,7 +1146,6 @@
"status.share": "Поделиться",
"status.show_less_all": "Свернуть для всех",
"status.show_more_all": "Развернуть для всех",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Zdieľaj",
"status.show_less_all": "Všetkým ukáž menej",
"status.show_more_all": "Všetkým ukáž viac",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Deli",
"status.show_less_all": "Prikaži manj za vse",
"status.show_more_all": "Prikaži več za vse",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Podeli",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Подели",
"status.show_less_all": "Прикажи мање за све",
"status.show_more_all": "Прикажи више за све",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Dela",
"status.show_less_all": "Visa mindre för alla",
"status.show_more_all": "Visa mer för alla",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "பங்கிடு",
"status.show_less_all": "அனைத்தையும் குறைவாக காட்டு",
"status.show_more_all": "அனைவருக்கும் மேலும் காட்டு",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "పంచుకోండి",
"status.show_less_all": "అన్నిటికీ తక్కువ చూపించు",
"status.show_more_all": "అన్నిటికీ ఇంకా చూపించు",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "แบ่งปัน",
"status.show_less_all": "แสดงน้อยลงทั้งหมด",
"status.show_more_all": "แสดงเพิ่มเติมทั้งหมด",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",

View file

@ -1069,7 +1069,6 @@
"status.share": "Поділитися",
"status.show_less_all": "Show less for all",
"status.show_more_all": "Show more for all",
"status.show_original": "Show original",
"status.title": "Post",
"status.title_direct": "Direct message",
"status.translate": "Translate",