Display translated text next to original text
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
48becac6be
commit
aed4d5a578
40 changed files with 59 additions and 53 deletions
|
@ -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} />);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue