minor post translation improvements, fix version number

im-in-space · Jan 7, 2024 · a89b08a · a89b08a
1 parent 74e31f9
commit a89b08a
Show file tree

Hide file tree

Showing 11 changed files with 285 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -55,7 +55,6 @@
     "format-message-parse": "^6.2.4",
     "katex": "^0.16.9",
     "li": "^1.3.0",
-    "lingva-scraper": "^1.1.0",
     "localstorage-memory": "^1.0.3",
     "lodash-es": "^4.17.21",
     "lodash.noop": "^3.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/intl/en-US.js b/src/intl/en-US.js
@@ -289,6 +289,13 @@ export default {
   deleteAndRedraft: 'Delete and redraft',
   reportStatus: 'Report post',
   translateStatus: 'Translate post',
+  translated: `Translated post from {from}{detected, select,
+    true { - Detected}
+    other {}
+  }`,
+  translateError: 'There was an error translating this post',
+  translating: 'Translating...',
+  hideTranslation: 'Hide translation',
   reactToStatus: 'React to post',
   quoteStatus: 'Quote post',
   shareStatus: 'Share post',
@@ -354,7 +361,11 @@ export default {
   </p>
 
   <p>
-    Approximately once per day Enafore will send a request proxied through your instance so I can collect some general statistics. None of your personal information is sent. Unless you're on a single user instance.
+    Approximately once per day Enafore will send a request proxied through your instance so I can collect some general statistics. No personal information is sent, only your instance domain is visible.
+  </p>
+
+  <p>
+    Post translation is powered by Google Translate via <a href="https://simplytranslate.org">SimplyTranslate.org</a>.
   </p>
 
   <h2>Credits</h2>

diff --git a/src/routes/_actions/translate.js b/src/routes/_actions/translate.js
@@ -3,8 +3,8 @@ import { store } from '../_store/store.js'
 import escapeHtml from 'escape-html'
 import { renderPostHTML } from '../_utils/renderPostHTML.ts'
 async function translate (html, to, from) {
-  const { languageNames, translate } = await importGoogleTranslate()
-  return { content: await translate(html, to, from), languageNames }
+  const { sourceLanguageNames, translate } = await importGoogleTranslate()
+  return { content: await translate(html, to, from), sourceLanguageNames }
 }
 const defaultLanguage = process.env.LOCALE.split('-')[0]
 export function translateStatus (
@@ -25,12 +25,14 @@ export function translateStatus (
     !(
       statusTranslations[id].loading ||
       (statusTranslationContents[id] &&
-        statusTranslationContents[id].to === to &&
-        statusTranslationContents[id].from === from)
+        statusTranslations[id].to === to &&
+        statusTranslations[id].from === from)
     )
   ) {
     statusTranslations[id].loading = true
     statusTranslations[id].error = false
+    statusTranslations[id].to = to
+    statusTranslations[id].from = from
     const emojis = new Map()
     if (status.emojis) {
       for (const emoji of status.emojis) {
@@ -52,10 +54,10 @@ export function translateStatus (
       to,
       from
     )
-      .then(({ content, languageNames }) => {
+      .then(({ content, sourceLanguageNames }) => {
         const { statusTranslations, statusTranslationContents } = store.get()
         statusTranslations[id].loading = false
-        statusTranslations[id].languageNames = languageNames
+        statusTranslations[id].sourceLanguageNames = sourceLanguageNames
         statusTranslationContents[id] = content
         store.set({ statusTranslations, statusTranslationContents })
       })

diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
@@ -20,13 +20,16 @@
   {/if}
   <StatusSidebar {...params} />
   {#if computedSpoilerText}
-    <StatusSpoiler {...params} {spoilerShown} on:recalculateHeight />
+    <StatusSpoiler {...params} {spoilerShown} {translateContent} {showTranslate} on:recalculateHeight />
   {/if}
   {#if !showContent}
     <StatusMentions {...params} />
   {/if}
   {#if content && (showContent || preloadHiddenContent)}
-    <StatusContent {...params} shown={showContent} {plainTextContent} on:recalculateHeight />
+    <StatusContent {...params} shown={showContent} {plainTextContent} {translateContent} {showTranslate} on:recalculateHeight />
+  {/if}
+  {#if showTranslate}
+    <StatusTranslateToolbar {translateContent} {translateState}/>
   {/if}
   <!-- Apparently it's possible for spoilered content to sometimes have embeds, but I can't figure out how.
        Don't bother optimizing this with the preloadHiddenContent. -->
@@ -75,6 +78,7 @@
         "sidebar spoiler-btn  spoiler-btn   spoiler-btn"
         "sidebar mentions     mentions      mentions"
         "sidebar content      content       content"
+        "sidebar translate    translate     translate"
         "sidebar card         card          card"
         "sidebar media        media         media"
         "sidebar poll         poll          poll"
@@ -107,6 +111,7 @@
       "spoiler-btn spoiler-btn"
       "mentions    mentions"
       "content     content"
+      "translate   translate"
       "card        card"
       "media       media"
       "poll        poll"
@@ -163,6 +168,7 @@
   import StatusReactions from './StatusReactions.html'
   import StatusTags from './StatusTags.html'
   import StatusPoll from './StatusPoll.html'
+  import StatusTranslateToolbar from './StatusTranslateToolbar.html'
   import Shortcut from '../shortcut/Shortcut.html'
   import { store } from '../../_store/store.js'
   import { goto } from '../../../../__sapper__/client.js'
@@ -234,6 +240,7 @@
       StatusMentions,
       StatusReactions,
       StatusTags,
+      StatusTranslateToolbar,
       Shortcut
     },
     data: () => ({
@@ -440,6 +447,17 @@
       style: ({ treeMetadata }) => `--status-depth:${treeMetadata ? Math.min(8, treeMetadata.depth || 0) : 0}`,
       hashtagsInBar: ({ originalStatus }) => originalStatus.hashtagsInBar || [],
       showHashtagsInBar: ({ hashtagsInBar, showContent }) => showContent && (hashtagsInBar.length > 0),
+      translateKey: ({ $currentInstance, originalStatusId }) => $currentInstance + '-' + originalStatusId,
+      translateState: ({ translateKey, $statusTranslations }) => {
+        if (!$statusTranslations || !$statusTranslations[translateKey]) return null
+        return $statusTranslations[translateKey]
+      },
+      showTranslate: ({ translateState }) => !!(translateState && translateState.show),
+      translateContent: ({ $statusTranslationContents, translateKey }) => {
+        const tc = $statusTranslationContents[translateKey]
+        if (!tc) return null
+        return tc
+      },
       // This params list deliberately does *not* include `spoilersShown` or `replyShown`, because these
       // change frequently and would therefore cause costly recomputes if included here.
       // The main goal here is to avoid typing by passing as many params as possible to child components.

diff --git a/src/routes/_components/status/StatusContent.html b/src/routes/_components/status/StatusContent.html
@@ -2,26 +2,6 @@
   <div class={computedClass} ref:node>
     {@html massagedContent}
   </div>
-  {#if showTranslate}
-    <div class="status-translate-toolbar">
-      <div class="status-translate-toolbar-label">
-        {#if translating}
-          Translating...
-        {:else}
-          {#if translateError}
-            There was an error translating this post
-          {:else}
-            Translated post from {translatedFrom}
-          {/if}
-        {/if}
-      </div>
-      <IconButton
-        label="Hide tranlation"
-        href="#fa-times"
-        on:click="onHideTranslateClick()"
-      />
-    </div>
-  {/if}
 </div>
 <style>
   .status-content {
@@ -48,26 +28,6 @@
     display: block;
   }
 
-  .status-translate-toolbar {
-    font-size: 1.17em;
-    margin: 10px 10px 10px 5px;
-    border-radius: 3px;
-    padding: 0.25rem 1rem;
-    padding-right: 1rem;
-    background: var(--toast-bg);
-    color: var(--toast-text);
-    border: 1px solid var(--toast-border);
-    display: flex;
-    align-items: center;
-    padding-right: 0;
-  }
-
-  .status-translate-toolbar-label {
-    flex-grow: 1;
-    word-wrap: break-word;
-    width: 0;
-  }
-
   :global(
       .status-content p,
       .status-content blockquote,
@@ -130,59 +90,30 @@
   import { store } from '../../_store/store.js'
   import { classname } from '../../_utils/classname.js'
   import { katexify } from '../../_utils/katexify.js'
-  import IconButton from '../IconButton.html'
 
   export default {
-    components: {
-      IconButton
-    },
     onupdate ({ changed }) {
-      if (changed.massagedContent || changed.translateState) {
+      if (changed.massagedContent) {
         if (this.refs.node) this.katexify()
         this.fire('recalculateHeight')
       }
     },
     store: () => store,
     computed: {
-      computedClass: ({ isStatusInOwnThread, isStatusInNotification, shown, translating }) => {
+      computedClass: ({ isStatusInOwnThread, isStatusInNotification, shown }) => {
         return classname(
           'status-content',
           isStatusInOwnThread && 'status-in-own-thread',
           isStatusInNotification && 'status-in-notification',
-          shown && 'shown',
-          translating && 'translating'
+          shown && 'shown'
         )
       },
       content: ({ originalStatus }) => (originalStatus.content || ''),
       mentions: ({ originalStatus }) => originalStatus.mentions,
       massagedContent: ({ content, translateContent, showTranslate }) =>
         (showTranslate && translateContent)
-          ? translateContent
-          : content,
-      computedTranslateClass: ({ isStatusInOwnThread, isStatusInNotification, shown }) => {
-        return classname(
-          'status-translate',
-          isStatusInOwnThread && 'status-in-own-thread',
-          isStatusInNotification && 'status-in-notification',
-          shown && 'shown'
-        )
-      },
-      translateKey: ({ $currentInstance, originalStatusId }) => $currentInstance + '-' + originalStatusId,
-      translateState: ({ translateKey, $statusTranslations }) => {
-        if (!$statusTranslations || !$statusTranslations[translateKey]) return null
-        return $statusTranslations[translateKey]
-      },
-      showTranslate: ({ translateState }) => !!(translateState && translateState.show),
-      translating: ({ translateState }) => !!(translateState && translateState.loading),
-      translateError: ({ translateState }) => !!(translateState && translateState.error),
-      translateContent_: ({ $statusTranslationContents, translateKey }) => {
-        const tc = $statusTranslationContents[translateKey]
-        if (!tc) return {}
-        if (typeof tc === 'string') return { html: tc, detected: 'unknown' }
-        return tc
-      },
-      translateContent: ({ translateContent_ }) => translateContent_.html,
-      translatedFrom: ({ translateContent_, translateState }) => translateState && translateState.languageNames && (translateState.languageNames[translateContent_.detected] ? translateState.languageNames[translateContent_.detected] + ' (Detected)' : (translateState.languageNames[translateContent_.from] || translateContent_.detected))
+          ? translateContent.html
+          : content
     },
     methods: {
       katexify () {