Merge pull request #192 from cheeaun/main

Update from main

src/components/status.jsx

@@ -251,26 +251,37 @@ function Status({
   const targetLanguage = getTranslateTargetLanguage(true);
   const contentTranslationHideLanguages =
     snapStates.settings.contentTranslationHideLanguages || [];
-  if (!snapStates.settings.contentTranslation) enableTranslate = false;
+  const { contentTranslation, contentTranslationAutoInline } =
+    snapStates.settings;
+  if (!contentTranslation) enableTranslate = false;
   const inlineTranslate = useMemo(() => {
+    if (
+      !contentTranslation ||
+      !contentTranslationAutoInline ||
+      readOnly ||
+      (withinContext && !isSizeLarge) ||
+      previewMode ||
+      spoilerText ||
+      sensitive ||
+      poll ||
+      card ||
+      mediaAttachments?.length
+    ) {
+      return false;
+    }
     const contentLength = htmlContentLength(content);
-    return (
-      !readOnly &&
-      (!withinContext || isSizeLarge) &&
-      !previewMode &&
-      !spoilerText &&
-      !poll &&
-      !mediaAttachments?.length &&
-      contentLength > 0 &&
-      contentLength <= INLINE_TRANSLATE_LIMIT
-    );
+    return contentLength > 0 && contentLength <= INLINE_TRANSLATE_LIMIT;
   }, [
+    contentTranslation,
+    contentTranslationAutoInline,
     readOnly,
     withinContext,
     isSizeLarge,
     previewMode,
     spoilerText,
+    sensitive,
     poll,
+    card,
     mediaAttachments,
     content,
   ]);
@@ -1116,9 +1127,8 @@ function Status({
               }}
             />
           )}
-          {((enableTranslate && !!content.trim() && differentLanguage) ||
-            forceTranslate ||
-            inlineTranslate) && (
+          {(((enableTranslate || inlineTranslate) && !!content.trim() && differentLanguage) ||
+            forceTranslate) && (
             <TranslationBlock
               forceTranslate={forceTranslate || inlineTranslate}
               mini={!isSizeLarge && !withinContext}

src/components/translation-block.jsx

@@ -81,7 +81,7 @@ function TranslationBlock({
         }
         setTranslatedContent(content);
         setUIState('default');
-        if (!mini) {
+        if (!mini && content.trim() !== text.trim()) {
           detailsRef.current.open = true;
           detailsRef.current.scrollIntoView({
             behavior: 'smooth',
@@ -105,14 +105,22 @@ function TranslationBlock({
   }, [forceTranslate]);
 
   if (mini) {
-    if (!!translatedContent && detectedLang !== targetLangText) {
+    if (
+      !!translatedContent &&
+      translatedContent.trim() !== text.trim() &&
+      detectedLang !== targetLangText
+    ) {
       return (
         <div class="status-translation-block-mini">
           <Icon
             icon="translate"
             alt={`Auto-translated from ${sourceLangText}`}
           />
-          <output lang={targetLang} dir="auto">
+          <output
+            lang={targetLang}
+            dir="auto"
+            title={pronunciationContent || ''}
+          >
             {translatedContent}
           </output>
         </div>

src/pages/settings.css

@@ -59,6 +59,9 @@
 #settings-container div {
   vertical-align: middle;
 }
+#settings-container section > ul > li .sub-section hr {
+  margin: 8px 0;
+}
 
 #settings-container section select {
   padding: 4px;

src/pages/settings.jsx

@@ -255,42 +255,43 @@ function Settings({ onClose }) {
                     : ''
                 }`}
               >
-                <label>
-                  Translate to{' '}
-                  <select
-                    value={targetLanguage || ''}
-                    disabled={!snapStates.settings.contentTranslation}
-                    onChange={(e) => {
-                      states.settings.contentTranslationTargetLanguage =
-                        e.target.value || null;
-                    }}
-                  >
-                    <option value="">
-                      System language ({systemTargetLanguageText})
-                    </option>
-                    <option disabled>──────────</option>
-                    {targetLanguages.map((lang) => (
-                      <option value={lang.code}>{lang.name}</option>
-                    ))}
-                  </select>
-                </label>
+                <div>
+                  <label>
+                    Translate to{' '}
+                    <select
+                      value={targetLanguage || ''}
+                      disabled={!snapStates.settings.contentTranslation}
+                      onChange={(e) => {
+                        states.settings.contentTranslationTargetLanguage =
+                          e.target.value || null;
+                      }}
+                    >
+                      <option value="">
+                        System language ({systemTargetLanguageText})
+                      </option>
+                      <option disabled>──────────</option>
+                      {targetLanguages.map((lang) => (
+                        <option value={lang.code}>{lang.name}</option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
+                <hr />
                 <p class="checkbox-fieldset">
-                  <small>
-                    Hide "Translate" button for
-                    {snapStates.settings.contentTranslationHideLanguages
-                      .length > 0 && (
-                      <>
-                        {' '}
-                        (
-                        {
-                          snapStates.settings.contentTranslationHideLanguages
-                            .length
-                        }
-                        )
-                      </>
-                    )}
-                    :
-                  </small>
+                  Hide "Translate" button for
+                  {snapStates.settings.contentTranslationHideLanguages.length >
+                    0 && (
+                    <>
+                      {' '}
+                      (
+                      {
+                        snapStates.settings.contentTranslationHideLanguages
+                          .length
+                      }
+                      )
+                    </>
+                  )}
+                  :
                   <div class="checkbox-fields">
                     {targetLanguages.map((lang) => (
                       <label>
@@ -318,7 +319,7 @@ function Settings({ onClose }) {
                     ))}
                   </div>
                 </p>
-                <p>
+                <p class="insignificant">
                   <small>
                     Note: This feature uses an external API to translate,
                     powered by{' '}
@@ -331,6 +332,28 @@ function Settings({ onClose }) {
                     .
                   </small>
                 </p>
+                <hr />
+                <div>
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={snapStates.settings.contentTranslationAutoInline}
+                      disabled={!snapStates.settings.contentTranslation}
+                      onChange={(e) => {
+                        states.settings.contentTranslationAutoInline =
+                          e.target.checked;
+                      }}
+                    />{' '}
+                    Auto inline translation
+                  </label>
+                  <p class="insignificant">
+                    <small>
+                      Automatically show translation for posts in timeline. Only
+                      works for <b>short</b> posts without content warning,
+                      media and poll.
+                    </small>
+                  </p>
+                </div>
               </div>
             </li>
             <li>

src/utils/states.js

@@ -52,6 +52,8 @@ const states = proxy({
       store.account.get('settings-contentTranslationTargetLanguage') || null,
     contentTranslationHideLanguages:
       store.account.get('settings-contentTranslationHideLanguages') || [],
+    contentTranslationAutoInline:
+      store.account.get('settings-contentTranslationAutoInline') ?? false,
     cloakMode: store.account.get('settings-cloakMode') ?? false,
   },
 });
@@ -80,6 +82,9 @@ subscribe(states, (changes) => {
     if (path.join('.') === 'settings.contentTranslation') {
       store.account.set('settings-contentTranslation', !!value);
     }
+    if (path.join('.') === 'settings.contentTranslationAutoInline') {
+      store.account.set('settings-contentTranslationAutoInline', !!value);
+    }
     if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
       console.log('SET', value);
       store.account.set('settings-contentTranslationTargetLanguage', value);