From dba34fc8fcdd519c6608fe7f2ab17e3d993f1eaa Mon Sep 17 00:00:00 2001
From: donaldkicksyourass <mzhlovefama@gmail.com>
Date: Fri, 25 Oct 2024 12:33:59 +0800
Subject: [PATCH] feat: display translations that are not the same as i18n
 locale (#73)

* feat: display translations that are not the same as i18n locale

* feat: add separate prop `translationLocale`

* feat: display translations that are not the same as i18n locale

* chore: lint

---------

Co-authored-by: Anthony Fu <github@antfu.me>
---
 app/components/LyricsLine.vue          |  2 +-
 app/components/SettingsDialog.vue      |  7 ++--
 app/components/SettingsFloat.vue       | 16 ++++-----
 app/components/SongPlay.vue            |  2 +-
 app/components/TranslationSelector.vue | 49 ++++++++++++++++++++++++++
 app/components/atomic/ActionButton.vue |  7 +++-
 app/components/editors/SongEditor.vue  |  3 +-
 app/composables/settings.ts            | 44 +++++++++++++++++++++++
 app/locales/en.json                    |  3 +-
 app/locales/ja.json                    |  3 +-
 app/locales/zh-Hans.json               |  3 +-
 app/locales/zh-Hant.json               |  3 +-
 app/state/local-storage.ts             |  1 +
 app/types/settings.ts                  |  1 +
 14 files changed, 124 insertions(+), 20 deletions(-)
 create mode 100644 app/components/TranslationSelector.vue

diff --git a/app/components/LyricsLine.vue b/app/components/LyricsLine.vue
index ba47e4a4..52027a7a 100644
--- a/app/components/LyricsLine.vue
+++ b/app/components/LyricsLine.vue
@@ -26,7 +26,7 @@ watchEffect(async () => {
     translation.value = ''
     return
   }
-  const matched = props.line.trans?.[locale.value]
+  const matched = props.line.trans?.[settings.value.translationLocale || locale.value]
   if (matched) {
     translation.value = matched
     return
diff --git a/app/components/SettingsDialog.vue b/app/components/SettingsDialog.vue
index 6561ce14..d809e171 100644
--- a/app/components/SettingsDialog.vue
+++ b/app/components/SettingsDialog.vue
@@ -45,10 +45,9 @@ const { t, locale, locales, setLocale } = useI18n()
             icon="i-uil-letter-english-a"
             :title="t('settings.displayRomaji')"
           />
-          <ToggleButton
-            v-model="settings.translation"
-            icon="i-uil-english-to-chinese"
-            :title="t('settings.displayTranslation')"
+          <TranslationSelector
+            type="toggle-button"
+            :song
           />
           <ToggleButton
             v-model="settings.follow"
diff --git a/app/components/SettingsFloat.vue b/app/components/SettingsFloat.vue
index ab3ee30a..702bc78a 100644
--- a/app/components/SettingsFloat.vue
+++ b/app/components/SettingsFloat.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import type { MaruSongDataParsed } from '@marure/schema'
 import { Menu, Tooltip } from 'floating-vue'
 import { useSettings } from '~/composables/settings'
 
+defineProps<{
+  song: MaruSongDataParsed
+}>()
 const settings = useSettings()
 </script>
 
@@ -58,14 +62,10 @@ const settings = useSettings()
         </div>
       </template>
     </Tooltip>
-    <Tooltip placement="top">
-      <IconToggle v-model="settings.translation" icon="i-uil-english-to-chinese" />
-      <template #popper>
-        <div>
-          {{ $t("settings.displayTranslation") }}
-        </div>
-      </template>
-    </Tooltip>
+    <TranslationSelector
+      type="toggle"
+      :song
+    />
     <Menu placement="top">
       <IconButton
         :class="settings.fontSize.toString() === '1' ? 'op40 @hover:color-base! @hover:op100' : 'color-primary'"
diff --git a/app/components/SongPlay.vue b/app/components/SongPlay.vue
index 9017f515..c5ab76f0 100644
--- a/app/components/SongPlay.vue
+++ b/app/components/SongPlay.vue
@@ -151,7 +151,7 @@ onMounted(() => {
       </div>
 
       <div pointer-events-auto absolute left-3 right-3 top-3 z-floating flex>
-        <SettingsFloat mxa lt-lg="hidden" />
+        <SettingsFloat mxa lt-lg="hidden" :song="song" />
       </div>
     </LyricsTrack>
     <ModalPopup v-model="showInfoModal" dialog-class="max-h-90vh! p4">
diff --git a/app/components/TranslationSelector.vue b/app/components/TranslationSelector.vue
new file mode 100644
index 00000000..266c7ff0
--- /dev/null
+++ b/app/components/TranslationSelector.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { MaruSongDataParsed } from '@marure/schema'
+import { Menu } from 'floating-vue'
+
+const props = defineProps<{
+  type: 'toggle-button' | 'toggle'
+  song?: MaruSongDataParsed
+}>()
+
+const settings = useSettings()
+const { locales } = useI18n()
+
+const {
+  translations,
+  translationsEnabled,
+  setTranslationLocale,
+  toggleTranslation,
+} = useTranslationSettings(() => props.song)
+</script>
+
+<template>
+  <Menu placement="bottom">
+    <ActionButton
+      icon="i-uil-english-to-chinese"
+      :type="type"
+      :active="translationsEnabled"
+      :title="type === 'toggle-button' ? $t('settings.displayTranslation') : undefined"
+      @click="toggleTranslation"
+    />
+    <template #popper>
+      <div px4 py3 flex="~ col gap-2">
+        <div v-if="!translations.length" op75>
+          {{ $t('messages.noTranslations') }}
+        </div>
+        <template v-else>
+          <div>
+            {{ $t('settings.displayTranslation') }}
+          </div>
+          <ToggleButton
+            v-for="trans in translations" :key="trans"
+            :model-value="settings.translationLocale === trans && settings.translation"
+            :title="locales.find(l => l.code === trans)?.name || trans"
+            @click="setTranslationLocale(trans)"
+          />
+        </template>
+      </div>
+    </template>
+  </Menu>
+</template>
diff --git a/app/components/atomic/ActionButton.vue b/app/components/atomic/ActionButton.vue
index 3d419be9..e67bf293 100644
--- a/app/components/atomic/ActionButton.vue
+++ b/app/components/atomic/ActionButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    type?: 'icon' | 'button' | 'toggle'
+    type?: 'icon' | 'button' | 'toggle' | 'toggle-button'
     title?: string
     icon: string
   }>(),
@@ -27,4 +27,9 @@ const toggleActive = defineModel<boolean>('active')
     v-bind="props"
     v-model="toggleActive"
   />
+  <ToggleButton
+    v-else-if="props.type === 'toggle-button'"
+    v-bind="props"
+    v-model="toggleActive"
+  />
 </template>
diff --git a/app/components/editors/SongEditor.vue b/app/components/editors/SongEditor.vue
index 80196fa9..c368cac7 100644
--- a/app/components/editors/SongEditor.vue
+++ b/app/components/editors/SongEditor.vue
@@ -87,7 +87,8 @@ function syncLrc() {
     stateRef.value.lrc = serializeToLrc({ lyrics: stateRef.value.lyrics, meta: {} })
   }
   else if (dirtyLyrics.value === 'lyrics') {
-    stateRef.value.lyrics = parseLrc(stateRef.value.lrc).lyrics
+    const parsed = parseLrc(stateRef.value.lrc)
+    stateRef.value.lyrics = parsed.lyrics
   }
   dirtyLyrics.value = 'none'
   nextTick(() => resume())
diff --git a/app/composables/settings.ts b/app/composables/settings.ts
index 5645a2cc..426cb146 100644
--- a/app/composables/settings.ts
+++ b/app/composables/settings.ts
@@ -1,5 +1,49 @@
+import type { MaruSongDataParsed } from '@marure/schema'
 import { _settings } from '~/state/local-storage'
 
 export function useSettings() {
   return _settings
 }
+
+export function useTranslationSettings(song: MaybeRefOrGetter<MaruSongDataParsed | undefined>) {
+  const settings = useSettings()
+
+  const translations = computed(() => {
+    const _song = toValue(song)
+    if (!_song)
+      return []
+
+    const locales = new Set<string>()
+    for (const line of _song.lyrics) {
+      for (const [key, value] of Object.entries(line.trans ?? {})) {
+        if (value?.trim())
+          locales.add(key)
+      }
+    }
+
+    return Array.from(locales)
+  })
+
+  const translationsEnabled = computed(() => settings.value.translation && translations.value.includes(settings.value.translationLocale))
+
+  function toggleTranslation() {
+    settings.value.translation = !settings.value.translation
+  }
+
+  function setTranslationLocale(localeCode: string) {
+    if (settings.value.translationLocale === localeCode && settings.value.translation) {
+      settings.value.translation = false
+    }
+    else {
+      settings.value.translationLocale = localeCode
+      settings.value.translation = true
+    }
+  }
+
+  return {
+    translations,
+    translationsEnabled,
+    toggleTranslation,
+    setTranslationLocale,
+  }
+}
diff --git a/app/locales/en.json b/app/locales/en.json
index 0f93edc0..42aee7ae 100644
--- a/app/locales/en.json
+++ b/app/locales/en.json
@@ -139,7 +139,8 @@
   "messages": {
     "wip": "The website is under development, and many features are not yet complete. Welcome to report issues via Discord",
     "fromShare": "from share link",
-    "contentMissingTranslations": "There is currently no corresponding translation for this content, please consider using machine translation."
+    "contentMissingTranslations": "There is currently no corresponding translation for this content, please consider using machine translation.",
+    "noTranslations": "Lyrics not yet translated"
   },
   "appname": "二重丸",
   "errors": {
diff --git a/app/locales/ja.json b/app/locales/ja.json
index 620db2ac..2bd7ecc0 100644
--- a/app/locales/ja.json
+++ b/app/locales/ja.json
@@ -127,7 +127,8 @@
   "messages": {
     "fromShare": "共有リンクから",
     "wip": "ウェブサイトは開発中で、多くの機能がまだ完成していません。問題があったらDiscordで報告してください",
-    "contentMissingTranslations": "このドキュメントにはまだ対応する翻訳がありません。機械翻訳の使用をご検討ください。"
+    "contentMissingTranslations": "このドキュメントにはまだ対応する翻訳がありません。機械翻訳の使用をご検討ください。",
+    "noTranslations": "歌詞はまだ翻訳されていません"
   },
   "actions": {
     "favorite": "お気に入りに追加",
diff --git a/app/locales/zh-Hans.json b/app/locales/zh-Hans.json
index b89246b5..db7370f3 100644
--- a/app/locales/zh-Hans.json
+++ b/app/locales/zh-Hans.json
@@ -139,7 +139,8 @@
   "messages": {
     "wip": "网站开发中、许多功能尚未完善。欢迎通过 Discord 回报问题",
     "fromShare": "来自分享连结",
-    "contentMissingTranslations": "这个文档暂时没有对应的翻译，请考虑使用机器翻译。"
+    "contentMissingTranslations": "这个文档暂时没有对应的翻译，请考虑使用机器翻译。",
+    "noTranslations": "歌词暂无翻译"
   },
   "appname": "二重丸",
   "errors": {
diff --git a/app/locales/zh-Hant.json b/app/locales/zh-Hant.json
index 1fccd2fb..cf9036d9 100644
--- a/app/locales/zh-Hant.json
+++ b/app/locales/zh-Hant.json
@@ -127,7 +127,8 @@
   "messages": {
     "fromShare": "來自分享連結",
     "wip": "網站開發中、許多功能尚未完善。歡迎透過 Discord 回報問題",
-    "contentMissingTranslations": "這個文檔暫時沒有對應的翻譯，請考慮使用機器翻譯。"
+    "contentMissingTranslations": "這個文檔暫時沒有對應的翻譯，請考慮使用機器翻譯。",
+    "noTranslations": "歌詞暫無翻譯"
   },
   "actions": {
     "favorite": "收藏歌曲",
diff --git a/app/state/local-storage.ts b/app/state/local-storage.ts
index b43bb74c..58fe247f 100644
--- a/app/state/local-storage.ts
+++ b/app/state/local-storage.ts
@@ -8,6 +8,7 @@ export const _settings = useLocalStorage<UiSettings>(
     kanji: true,
     furigana: true,
     translation: true,
+    translationLocale: '',
     follow: true,
     autoPause: false,
     speed: 1,
diff --git a/app/types/settings.ts b/app/types/settings.ts
index c945f8ea..6154071a 100644
--- a/app/types/settings.ts
+++ b/app/types/settings.ts
@@ -3,6 +3,7 @@ export interface UiSettings {
   kanji: boolean
   furigana: boolean
   translation: boolean
+  translationLocale: string
   follow: boolean
   autoPause: boolean
   speed: number