[WIP] Translate chat messages with Google

.gitignore

@@ -28,3 +28,4 @@ pnpm-debug.log*
 *.pub
 *.zip
 artifacts
+.eslintcache

package.json

@@ -31,6 +31,7 @@
     "eslint-plugin-promise": "4",
     "eslint-plugin-svelte3": "^3.2.0",
     "express": "4.17.1",
+    "iframe-translator": "^0.2.2",
     "postcss": "^8.3.6",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^14.0.2",

src/components/Hyperchat.svelte

@@ -20,7 +20,8 @@
     showProfileIcons,
     showUsernames,
     showTimestamps,
-    showUserBadges
+    showUserBadges,
+    refreshScroll
   } from '../ts/storage';
 
   const welcome = { welcome: true, message: { messageId: 'welcome' } };
@@ -174,12 +175,19 @@
     });
   };
 
-  afterUpdate(() => {
+  const onRefresh = () => {
     if (isAtBottom) {
       scrollToBottom();
     }
     tick().then(checkAtBottom);
-  });
+  };
+
+  $: if ($refreshScroll) {
+    onRefresh();
+    $refreshScroll = false;
+  }
+
+  afterUpdate(onRefresh);
 
   onDestroy(() => {
     port.disconnect();
@@ -193,7 +201,7 @@
   );
 
   const containerClass = 'h-screen w-screen text-black dark:text-white dark:bg-black dark:bg-opacity-25';
-  const contentClass = 'content absolute overflow-y-scroll w-full h-full flex-1 px-2';
+  const contentClass = 'content absolute overflow-y-scroll w-full h-full flex-1';
   const pinnedClass = 'absolute top-2 inset-x-2';
 </script>
 
@@ -202,7 +210,7 @@
 <div class={containerClass} style="font-size: 13px">
   <div class={contentClass} bind:this={div} on:scroll={checkAtBottom}>
     {#each messageActions as action (action.message.messageId)}
-      <div class="my-2">
+      <div class={isWelcome(action) ? 'm-2' : 'p-1 m-1 hover-highlight flex rounded'}>
         {#if isWelcome(action)}
           <WelcomeMessage />
         {:else if (action.message.superChat || action.message.superSticker)}
@@ -247,4 +255,11 @@
   .content::-webkit-scrollbar-thumb:hover {
     background: #555;
   }
+  .hover-highlight {
+    transition: 0.1s;
+    background-color: transparent;
+  }
+  .hover-highlight:hover {
+    background-color: #80808040;
+  }
 </style>

src/components/Message.svelte

@@ -54,11 +54,14 @@
     ($showUserBadges && (moderator || verified || member));
 </script>
 
-<div on:click|stopPropagation class="inline-flex flex-row gap-2">
-  {#if !hideName}
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div 
+  class="inline-flex flex-row gap-2 break-words overflow-hidden w-full"
+  on:click|stopPropagation
+>
+  {#if !hideName && $showProfileIcons}
     <img
       class="h-5 w-5 inline align-middle rounded-full cursor-auto flex-none"
-      class:hidden={!$showProfileIcons}
       src={message.author.profileIcon.src}
       alt={message.author.profileIcon.alt}
     />
@@ -82,7 +85,7 @@
           <Icon class="inline align-middle" small>build</Icon>
         {:else if verified}
           <Icon
-            class="inline align-middle text-gray-700 dark:text-gray-500"
+            class="inline align-middle text-gray-500"
             small
           >
             verified

src/components/MessageRuns.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import TranslatedMessage from './TranslatedMessage.svelte';
+
   export let runs: Ytc.ParsedRun[];
   export let forceDark = false;
   export let deleted = false;
@@ -21,7 +23,11 @@
 >
   {#each runs as run}
     {#if run.type === 'text'}
-      {run.text}
+      {#if deleted}
+        <span>{run.text}</span>
+      {:else}
+        <TranslatedMessage text={run.text} {forceDark} />
+      {/if}
     {:else if run.type === 'link'}
       <a
         class="inline underline align-middle"

src/components/TranslatedMessage.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { refreshScroll, translatorClient, translateTargetLanguage } from '../ts/storage';
+  import Icon from './common/Icon.svelte';
+  import { fade } from 'svelte/transition';
+
+  export let forceDark = false;
+
+  export let text: string;
+  let translatedMessage = '';
+  let translatedLanguage = '';
+  let showOriginal = false;
+
+  $: if ($translateTargetLanguage && $translatorClient) {
+    $translatorClient.translate(text, $translateTargetLanguage).then(result => {
+      if (result !== text) {
+        translatedLanguage = $translateTargetLanguage;
+        translatedMessage = result;
+        $refreshScroll = true;
+      }
+    });
+  }
+
+  $: showTL = Boolean(translatedMessage && !showOriginal);
+
+  $: if ($translateTargetLanguage !== translatedLanguage) {
+    translatedMessage = '';
+    translatedLanguage = '';
+  }
+
+  const duration = 100;
+
+  $: translatedColor = forceDark ? 'text-translated-dark' : 'dark:text-translated-dark text-translated-light';
+  $: stockTextColor = forceDark ? 'text-white' : 'dark:text-white text-black';
+</script>
+
+<span 
+  class={
+    showTL ? translatedColor : stockTextColor
+  }
+  class:cursor-pointer={translatedMessage}
+  class:entrance-animation={translatedMessage}
+  on:click={() => {
+    if (translatedMessage) {
+      showOriginal = !showOriginal;
+      $refreshScroll = true;
+    }
+  }}
+>
+  {#if !showTL}
+    <span in:fade={{ duration: translatedMessage ? duration : 0 }}>
+      {text}
+    </span>
+  {/if}
+  {#if showTL}
+    <span in:fade={{ duration }}>
+      {translatedMessage}
+    </span>
+  {/if}
+  {#if translatedMessage}
+    <span class="shifted-icon">
+      <Icon xs={true} block={false}>
+        translate
+      </Icon>
+    </span>
+  {/if}
+</span>
+
+<style>
+  .shifted-icon  :global(.material-icons) {
+    transform: translateY(1px);
+  }  
+</style>

src/components/common/DropdownStore.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+  import Select from 'smelte/src/components/Select';
+  import { getDropdownOffsetY } from '../../ts/component-utils';
+  type DropdownItem = { value: string, text: string } | string;
+  /** Dropdown label. */
+  export let name = '';
+  /** Writable store for value updates. */
+  export let store: Writable<string>;
+  /** Dropdown items. */
+  export let items: DropdownItem[] = [];
+  /** Dense variant. */
+  export let dense = false;
+  /** Parent div used to determine top/bottom */
+  export let boundingDiv: HTMLElement | null = null;
+  $: value = $store;
+  $: store.set(value);
+  let showList = false;
+  let div: HTMLElement;
+  let offsetY = '';
+  const onShowListChange = async (showList: boolean) => {
+    if (!showList || !boundingDiv) return;
+    offsetY = await getDropdownOffsetY(div, boundingDiv);
+  };
+  $: onShowListChange(showList);
+  const classes = 'dropdown-wrapper cursor-pointer relative';
+  $: optionsClasses = 'dropdown-options absolute left-0 bg-white rounded ' +
+    'shadow w-full z-20 dark:bg-dark-500 max-h-60 overflow-auto ' + offsetY;
+</script>
+
+<div bind:this={div} class={$$props.class ? $$props.class : ''}>
+  <Select
+    bind:value
+    bind:showList
+    label={name}
+    {items}
+    {classes}
+    {dense}
+    {optionsClasses}
+  />
+</div>

src/components/settings/InterfaceSettings.svelte

@@ -11,6 +11,7 @@
   import Radio from '../common/RadioGroupStore.svelte';
   import Checkbox from '../common/CheckboxStore.svelte';
   import dark from 'smelte/src/dark';
+  import MessageTranslationSettings from './MessageTranslationSettings.svelte';
 
   const darkStore = dark();
   $: switch ($theme) {
@@ -49,3 +50,5 @@
   <Checkbox name="Show usernames" store={showUsernames} />
   <Checkbox name="Show user badges" store={showUserBadges} />
 </Card>
+
+<MessageTranslationSettings />

src/components/settings/MessageTranslationSettings.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {
+    translateTargetLanguage
+  } from '../../ts/storage';
+  import DropdownStore from '../common/DropdownStore.svelte';
+  import Card from '../common/Card.svelte';
+  import Checkbox from '../common/CheckboxStore.svelte';
+  import { AvailableLanguages } from 'iframe-translator';
+  import { writable } from 'svelte/store';
+  import { onMount, tick } from 'svelte';
+  const enabled = writable(true);
+  $: if (!$enabled) {
+    $translateTargetLanguage = '';
+  }
+  onMount(() => {
+    const unsub = translateTargetLanguage.subscribe(value => {
+      $enabled = Boolean(value);
+      setTimeout(() => unsub(), 0);
+    });
+  });
+  const priority = [
+    'English',
+    'Japanese',
+    'Indonesian',
+    'Korean',
+    'Spanish',
+    'Russian',
+    'French',
+    'Chinese (Traditional)',
+    'Chinese (Simplified)'
+  ];
+
+  async function scrollToBottom() {
+    await tick();
+    window.scrollTo(0, document.body.scrollHeight);
+  }
+</script>
+
+<Card title="Additional Options" icon="tune">
+  <span on:click={scrollToBottom}>
+    <Checkbox name="Translate chat messages with Google Translate" store={enabled} />
+    {#if $enabled}
+      <DropdownStore name="Target language"
+      store={translateTargetLanguage}
+      items={[
+        ...priority,
+        ...AvailableLanguages.filter(e => !priority.includes(e))
+      ]} />
+    {/if}
+  </span>
+</Card>

src/scripts/chat-background.ts

@@ -318,8 +318,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     chrome.windows.create({
       url: request.url,
       type: 'popup',
-      height: 300,
-      width: 600
+      height: 420,
+      width: 690
     }, () => {});
   }
 });

src/ts/chat-constants.ts

@@ -35,6 +35,6 @@ export const enum Theme {
 
 export const themeItems = [
   { value: Theme.YOUTUBE, label: 'Use YouTube theme' },
-  { value: Theme.LIGHT, label: 'Force light theme' },
-  { value: Theme.DARK, label: 'Force dark theme' }
+  { value: Theme.LIGHT, label: 'Light theme' },
+  { value: Theme.DARK, label: 'Dark theme' }
 ];

src/ts/component-utils.ts

@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+
+interface Rect { top: number, right: number, bottom: number, left: number }
+
+export const getRelativeRect = (element: HTMLElement, boundingElement: HTMLElement): Rect => {
+  const rect = element.getBoundingClientRect();
+  const boundingRect = boundingElement.getBoundingClientRect();
+  return {
+    top: rect.top - boundingRect.top,
+    right: boundingElement.clientWidth - (boundingRect.right - rect.right),
+    bottom: boundingElement.clientHeight - (boundingRect.bottom - rect.bottom),
+    left: rect.left - boundingRect.left
+  };
+};
+
+export const getDropdownOffsetY = async (div: HTMLElement, boundingDiv: HTMLElement): Promise<string> => {
+  await tick();
+
+  const wrapper = div.querySelector('.dropdown-wrapper');
+  const options = wrapper?.querySelector('.dropdown-options');
+  if (wrapper == null || options == null) {
+    console.error('Dropdown wrapper or options not found');
+    return '';
+  }
+
+  const relativeRect = getRelativeRect(wrapper as HTMLElement, boundingDiv);
+  if (relativeRect.bottom + options.clientHeight > boundingDiv.clientHeight) {
+    return 'bottom-12';
+  } else {
+    return 'top-12';
+  }
+};

src/ts/storage.ts

@@ -1,11 +1,39 @@
 import { webExtStores } from 'svelte-webext-stores';
+import { readable, writable } from 'svelte/store';
+import { getClient } from 'iframe-translator';
+import type { IframeTranslatorClient } from 'iframe-translator';
 import { Theme } from './chat-constants';
 
 export const stores = webExtStores();
 
 export const hcEnabled = stores.addSyncStore('hc.enabled', true);
+export const translateTargetLanguage = stores.addSyncStore('hc.translateTargetLanguage', '');
+export const translatorClient = readable(null as (null | IframeTranslatorClient), (set) => {
+  let client: IframeTranslatorClient | null = null;
+  const destroyIf = (): void => {
+    if (client !== null) {
+      client.destroy();
+      client = null;
+    }
+    set(null);
+  };
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  const unsub = translateTargetLanguage.subscribe(async ($translateTargetLanguage) => {
+    if (!$translateTargetLanguage) {
+      destroyIf();
+      return;
+    }
+    if (client) return;
+    client = await getClient();
+    set(client);
+  });
+  return () => {
+    unsub();
+    destroyIf();
+  };
+});
+export const refreshScroll = writable(false);
 export const theme = stores.addSyncStore('hc.theme', Theme.YOUTUBE);
-
 export const showProfileIcons = stores.addSyncStore('hc.messages.showProfileIcons', false);
 export const showUsernames = stores.addSyncStore('hc.messages.showUsernames', true);
 export const showTimestamps = stores.addSyncStore('hc.messages.showTimestamps', false);