update

assets/api.ts

@@ -19,7 +19,7 @@ export interface IUserSettings extends IUserLocalSettings {
   level: number
 }
 
-export interface IEntry {
+export interface IDictionaryLookup {
   id: string
   list: string[]
   reading: string[]
@@ -31,6 +31,25 @@ export interface IEntry {
   type: IType
   description: string
   tag: string[]
+  level?: number
+}
+
+export interface IEntryLookup {
+  entry: string
+  sub: string[]
+  sup: string[]
+  variant: string[]
+  visual: {
+    entry: string
+  }[]
+  amalgamation: {
+    entry: string
+    type?: IType
+  }[]
+  component: {
+    entry: string
+    type?: IType
+  }[]
 }
 
 export interface ILibrary {
@@ -197,16 +216,16 @@ class Api {
 
     return await this.axios
       .get('/api/extra/q', { params })
-      .then((r) => r.data as ILookupResult<IEntry>)
+      .then((r) => r.data as ILookupResult<IDictionaryLookup>)
   }
 
-  async extra_create(payload: Omit<IEntry, 'id'>) {
+  async extra_create(payload: Omit<IDictionaryLookup, 'id'>) {
     return await this.axios
       .put('/api/extra', payload)
       .then((r) => r.data as { id: string })
   }
 
-  async extra_update(payload: IEntry) {
+  async extra_update(payload: IDictionaryLookup) {
     return await this.axios.patch('/api/extra', payload, {
       params: { id: payload.id },
     })
@@ -226,7 +245,7 @@ class Api {
 
     return await this.axios
       .get('/api/character/vocabulary', { params })
-      .then((r) => r.data as ILookupResult<IEntry>)
+      .then((r) => r.data as ILookupResult<IDictionaryLookup>)
   }
 
   async character_getSentence(
@@ -237,7 +256,18 @@ class Api {
 
     return await this.axios
       .get('/api/character/sentence', { params })
-      .then((r) => r.data as ILookupResult<IEntry>)
+      .then((r) => r.data as ILookupResult<IDictionaryLookup>)
+  }
+
+  async vocabulary_getVocabulary(
+    params: ILookup<{ entry: string; distinct?: 'id' }>
+  ) {
+    params.offset = params.offset || 0
+    params.limit = params.limit || 5
+
+    return await this.axios
+      .get('/api/vocabulary/vocabulary', { params })
+      .then((r) => r.data as ILookupResult<IDictionaryLookup>)
   }
 
   async vocabulary_getSentence(
@@ -248,7 +278,7 @@ class Api {
 
     return await this.axios
       .get('/api/vocabulary/sentence', { params })
-      .then((r) => r.data as ILookupResult<IEntry>)
+      .then((r) => r.data as ILookupResult<IDictionaryLookup>)
   }
 
   async all_getRandom(params: { type: IType }) {
@@ -261,7 +291,9 @@ class Api {
     )
   }
 
-  async all_getQuery(params: ILookup<{ q: string }>) {
+  async all_getQuery(
+    params: ILookup<{ q: string; type?: IType; distinct?: 'id' }>
+  ) {
     params.offset = params.offset || 0
     params.limit = params.limit || 5
 
@@ -284,38 +316,13 @@ class Api {
       .get('/api/all', {
         params,
       })
-      .then(
-        (r) =>
-          r.data as ILookupResult<
-            IEntry & {
-              level?: number
-            }
-          >
-      )
+      .then((r) => r.data as ILookupResult<IDictionaryLookup>)
   }
 
   async all_getComponent(params: { entry: string; type: IType }) {
     return await this.axios
       .get('/api/all/components', { params })
-      .then(
-        (r) =>
-          r.data as {
-            sub: string[]
-            sup: string[]
-            variant: string[]
-            visual: {
-              entry: string
-            }[]
-            amalgamation: {
-              entry: string
-              type?: IType
-            }[]
-            component: {
-              entry: string
-              type?: IType
-            }[]
-          }
-      )
+      .then((r) => r.data as IEntryLookup)
       .catch(() => null)
   }
 

assets/speak.ts

@@ -17,10 +17,12 @@ export async function speak(
   opts: {
     lang?: string
     forceOffline?: boolean
+    url?: string
   } = {}
 ) {
   if (!opts.forceOffline) {
     const audio = new Audio(
+      opts.url ||
         `/api/tts?q=${encodeURIComponent(s)}&lang=${encodeURIComponent(
           opts.lang || 'ja'
         )}`
@@ -73,7 +75,6 @@ window.addEventListener('keydown', (ev) => {
   }
 
   if (ev.key === 's') {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const s = window.getSelection()!.toString()
     if (s) {
       speak(s)

components/ContextMenu.vue

@@ -102,6 +102,10 @@ import { api, IType } from '~/assets/api'
 export default class ContextMenu extends Vue {
   @Prop() id?: string
   @Prop() entry?: string
+  @Prop() audio?: {
+    mimetype?: string
+    url: string
+  }[]
   @Prop() list?: string[]
   @Prop() type?: IType
   @Prop() source?: string
@@ -176,7 +180,7 @@ export default class ContextMenu extends Vue {
 
   async doSpeak() {
     if (this.entry) {
-      await speak(this.entry)
+      await speak(this.entry, { url: this.audio?.[0]?.url })
     }
   }
 

components/cards/LibraryCard.vue

@@ -149,11 +149,11 @@
 
 <script lang="ts">
 import { Vue, Component, Ref, Prop } from 'nuxt-property-decorator'
-import { api, IEntry, IType } from '~/assets/api'
+import { api, IDictionaryLookup, IType } from '~/assets/api'
 import ContextMenu from '../ContextMenu.vue'
 
 type ILibraryEntry = Pick<
-  IEntry,
+  IDictionaryLookup,
   'list' | 'reading' | 'translation' | 'type'
 > & {
   entry: string
@@ -263,7 +263,7 @@ export default class LibraryCard extends Vue {
         }
       })
 
-    await Promise.all(
+    await Promise.allSettled(
       [...listMap].map(([k, v]) =>
         api
           .all_getLookup({
@@ -288,7 +288,7 @@ export default class LibraryCard extends Vue {
     await this.reload([...listMap].flatMap(([, { entry }]) => entry))
   }
 
-  getTagClass(it: IEntry) {
+  getTagClass(it: IDictionaryLookup) {
     const srsLevel = Math.min(
       ...it.list.map((el) => this.srsLevel[el] || -Infinity)
     )

components/cards/QuizCard.vue

@@ -332,7 +332,7 @@
 
 <script lang="ts">
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
-import { api, IEntry, IQuiz } from '~/assets/api'
+import { api, IDictionaryLookup, IQuiz } from '~/assets/api'
 import { shuffle } from '~/assets/util'
 import ContextMenu from '../ContextMenu.vue'
 
@@ -358,17 +358,17 @@ export default class QuizCard extends Vue {
   } = {}
 
   dictionaryData = {
-    character: {} as Record<string, IEntry>,
+    character: {} as Record<string, IDictionaryLookup>,
     vocabulary: {} as Record<
       string,
-      IEntry & {
-        sentence_set: Record<string, boolean>
+      IDictionaryLookup & {
+        sentence_set: string[]
       }
     >,
     sentence: {} as Record<
       string,
-      IEntry & {
-        vocabulary_set: Record<string, boolean>
+      IDictionaryLookup & {
+        vocabulary_set: string[]
       }
     >,
   }
@@ -572,7 +572,7 @@ export default class QuizCard extends Vue {
 
               this.dictionaryData[subtype][r.list[0]!] = {
                 ...r,
-                sentence_set: {},
+                sentence_set: [],
               }
             })
 
@@ -595,7 +595,7 @@ export default class QuizCard extends Vue {
 
               this.dictionaryData[subtype][r.list[0]!] = {
                 ...r,
-                vocabulary_set: {},
+                vocabulary_set: [],
               }
             })
 
@@ -614,23 +614,18 @@ export default class QuizCard extends Vue {
         const subtype = 'sentence'
 
         const { result } = await api.vocabulary_getSentence({ entry })
-        result.map((r) => {
+        this.dictionaryData[type][entry]!.sentence_set = result.map((r) => {
           if (this.dictionaryData[subtype][r.list[0]!]) {
-            return
+            return r.id
           }
 
           this.dictionaryData[subtype][r.list[0]!] = {
             ...r,
-            vocabulary_set: {},
+            vocabulary_set: [],
           }
+
+          return r.id
         })
-        this.dictionaryData[type][entry]!.sentence_set = result.reduce(
-          (prev, c) => ({
-            ...prev,
-            [c.list[0]!]: true,
-          }),
-          {} as Record<string, boolean>
-        )
 
         this.$set(this.dictionaryData, type, this.dictionaryData[type])
         this.$set(this.dictionaryData, subtype, this.dictionaryData[subtype])
@@ -660,7 +655,7 @@ export default class QuizCard extends Vue {
 
             this.dictionaryData[subtype][entry] = {
               ...r!,
-              sentence_set: {},
+              sentence_set: [],
             }
             this.$set(
               this.dictionaryData,

components/tabs/BrowseTab.vue

@@ -180,6 +180,7 @@
       :id="selected.id"
       ref="context"
       :entry="selected.entry"
+      :audio="selected.audio"
       :list="selected.list"
       :type="selected.type || 'vocabulary'"
       :description="selected.description"
@@ -193,7 +194,7 @@
 <script lang="ts">
 import { Component, Ref, Vue, Watch } from 'nuxt-property-decorator'
 import ContextMenu from '@/components/ContextMenu.vue'
-import { api, IEntry } from '~/assets/api'
+import { api, IDictionaryLookup } from '~/assets/api'
 import { jsonClone } from '~/assets/util'
 
 @Component<BrowseTab>({
@@ -213,7 +214,7 @@ export default class BrowseTab extends Vue {
   count = 0
   perPage = 10
   page = 1
-  tableData: IEntry[] = []
+  tableData: IDictionaryLookup[] = []
 
   isEditModal = false
 
@@ -222,7 +223,7 @@ export default class BrowseTab extends Vue {
     type: 'desc',
   }
 
-  selected: IEntry & {
+  selected: IDictionaryLookup & {
     entry: string
   } = {
     id: '',
@@ -351,7 +352,10 @@ export default class BrowseTab extends Vue {
     this.isEditModal = true
   }
 
-  async onTableContextmenu(row: IEntry & { entry: string }, evt: MouseEvent) {
+  async onTableContextmenu(
+    row: IDictionaryLookup & { entry: string },
+    evt: MouseEvent
+  ) {
     evt.preventDefault()
 
     this.selected = jsonClone(row)

components/tabs/LookupTab.vue

@@ -267,6 +267,7 @@
     <ContextMenu
       ref="context"
       :entry="selected.entry"
+      :audio="selected.audio"
       :type="selected.type"
       :additional="additionalContext"
     />
@@ -276,9 +277,11 @@
 <script lang="ts">
 import { Component, Prop, Ref, Vue, Watch } from 'nuxt-property-decorator'
 import ContextMenu from '@/components/ContextMenu.vue'
-import { api, IEntry, IType } from '~/assets/api'
+import { api, IDictionaryLookup, IEntryLookup, IType } from '~/assets/api'
 import { capitalize } from '~/assets/util'
 
+type ILookupEntry = Omit<IDictionaryLookup, 'id'> & IEntryLookup
+
 @Component<LookupTab>({
   components: {
     ContextMenu,
@@ -305,36 +308,15 @@ export default class LookupTab extends Vue {
 
   title = this.type === 'character' ? 'Kanji' : capitalize(this.type)
 
-  entries: string[] = []
+  entries: ILookupEntry[] = []
   i = 0
 
-  sub: string[] = []
-  sup: string[] = []
-  variant: string[] = []
-
-  visual: {
-    entry: string
-  }[] = []
-  amalgamation: {
-    entry: string
-    type?: IType
-  }[] = []
-  component: {
-    entry: string
-    type?: IType
-  }[] = []
-
-  lookup: Record<IType, IEntry[]> = {
+  lookup: Record<IType, IDictionaryLookup[]> = {
     character: [],
     vocabulary: [],
     sentence: [],
   }
 
-  reading: string[] = []
-  translation: string[] = []
-  tag: string[] = []
-  level = 0
-
   selected: {
     entry: string
     type: string
@@ -347,7 +329,7 @@ export default class LookupTab extends Vue {
   q0 = ''
 
   get current() {
-    return this.entries[this.i] || ' '
+    return this.entries[this.i]?.entry || ''
   }
 
   get additionalContext() {
@@ -356,7 +338,7 @@ export default class LookupTab extends Vue {
         {
           name: 'Reload',
           handler: async () => {
-            const { result } = await api.all_getRandom({ type: 'character' })
+            const { result } = await api.all_getRandom({ type: this.type })
             this.q0 = result
           },
         },
@@ -378,21 +360,66 @@ export default class LookupTab extends Vue {
   @Watch('q')
   async onQChange(q: string) {
     this.$emit('title', (q ? q + ' - ' : '') + this.title)
+    this.entries = []
 
+    if (this.type === 'character') {
       if (/\p{sc=Han}/u.test(q)) {
-      const qs = q.split('').filter((h) => /\p{sc=Han}/u.test(h))
-      this.entries = qs.filter((h, i) => qs.indexOf(h) === i)
+        let qs = q.split('').filter((h) => /\p{sc=Han}/u.test(h))
+        qs = qs.filter((h, i) => qs.indexOf(h) === i)
+
+        this.entries = qs.map(
+          (entry) =>
+            ({
+              entry,
+              list: [],
+              type: this.type,
+              reading: [],
+              translation: [],
+              audio: [],
+              description: '',
+              tag: [],
+              sub: [],
+              sup: [],
+              variant: [],
+              visual: [],
+              amalgamation: [],
+              component: [],
+            } as ILookupEntry)
+        )
       } else {
         if (!q.trim()) {
-        const { result } = await api.all_getRandom({ type: 'character' })
+          const { result } = await api.all_getRandom({ type: this.type })
 
           this.q0 = result
           this.q = result
           return
+        } else {
+          const r = await api.all_getQuery({
+            q,
+            type: this.type,
+            distinct: 'id',
+          })
+          this.entries = r.result.map(
+            ({ entry }) =>
+              ({
+                entry,
+                list: [],
+                type: this.type,
+                reading: [],
+                translation: [],
+                audio: [],
+                description: '',
+                tag: [],
+                sub: [],
+                sup: [],
+                variant: [],
+                visual: [],
+                amalgamation: [],
+                component: [],
+              } as ILookupEntry)
+          )
+        }
       }
-
-      const r = await api.all_getQuery({ q })
-      this.entries = r.result.map((r) => r.entry)
     }
 
     this.i = 0
@@ -401,118 +428,101 @@ export default class LookupTab extends Vue {
   @Watch('current')
   load() {
     if (this.current) {
-      this.loadCharacter()
-      this.loadVocab()
+      this.loadComponents()
+      this.loadVocabularies()
       this.loadSentences()
     } else {
-      this.sub = []
-      this.sup = []
-      this.variant = []
-
-      this.visual = []
-      this.amalgamation = []
-      this.component = []
-
       this.lookup = {
         character: [],
         vocabulary: [],
         sentence: [],
       }
-
-      this.reading = []
-      this.translation = []
-      this.tag = []
-      this.level = 0
     }
   }
 
-  async loadCharacter() {
-    if (!/^\p{sc=Han}$/u.test(this.current)) {
-      this.sub = []
-      this.sup = []
-      this.variant = []
-      this.visual = []
+  async loadComponents() {
+    if (!this.current.trim()) return
 
-      this.translation = []
-      this.tag = []
-      this.level = 0
-      return
-    }
-
-    await Promise.all([
-      (async () => {
-        const r = await api.all_getComponent({
+    const [comp, dict] = await Promise.all([
+      api.all_getComponent({
         entry: this.current,
         type: this.type,
-        })
-
-        this.sub = r?.sub || []
-        this.sup = r?.sup || []
-        this.variant = r?.variant || []
-
-        this.visual = r?.visual || []
-        this.amalgamation = r?.amalgamation || []
-        this.component = r?.component || []
-      })(),
-      (async () => {
-        const {
-          result: [r],
-        } = await api.all_getLookup({
+      }),
+      api
+        .all_getLookup({
           entry: this.current,
           type: this.type,
           limit: 1,
         })
-
-        this.reading = r?.reading || []
-        this.translation = r?.translation || []
-        this.tag = r?.tag || []
-        this.level = r?.level || 0
-      })(),
+        .then(({ result: [r] }) => r),
     ])
+
+    this.$set(this.entries, this.i, {
+      ...(dict || {
+        entry: this.current,
+        list: [],
+        type: this.type,
+        reading: [],
+        translation: [],
+        audio: [],
+        description: '',
+        tag: [],
+      }),
+      ...(comp || {
+        sub: [],
+        sup: [],
+        variant: [],
+        visual: [],
+        amalgamation: [],
+        component: [],
+      }),
+    } as ILookupEntry)
   }
 
-  async loadVocab() {
-    if (this.type === 'character' && !/^\p{sc=Han}$/u.test(this.current)) {
+  async loadVocabularies() {
+    if (this.type === 'character') {
+      if (!/^\p{sc=Han}$/u.test(this.current)) {
         this.lookup.vocabulary = []
         return
       }
 
-    const { result } = await api.character_getVocabulary({
+      this.lookup.vocabulary = await api
+        .character_getVocabulary({
           entry: this.current,
           distinct: 'id',
         })
-
-    this.lookup.vocabulary = await Promise.all(
-      result
-        .map((r) =>
-          api
-            .all_getLookup({ entry: r.list[0]!, type: 'vocabulary', limit: 1 })
-            .then((r) => r.result[0]!)
-        )
-        .filter((r) => r)
-    )
+        .then((r) => r.result)
+    } else {
+      this.lookup.vocabulary = await api
+        .vocabulary_getVocabulary({
+          entry: this.current,
+          distinct: 'id',
+        })
+        .then((r) => r.result)
+    }
   }
 
   async loadSentences() {
-    if (this.type === 'character' && !/^\p{sc=Han}$/u.test(this.current)) {
+    if (this.type === 'character') {
+      if (!/^\p{sc=Han}$/u.test(this.current)) {
         this.lookup.sentence = []
         return
       }
 
-    const { result } = await api.character_getSentence({
+      this.lookup.sentence = await api
+        .character_getSentence({
           entry: this.current,
           distinct: 'id',
         })
-
-    this.lookup.vocabulary = await Promise.all(
-      result
-        .map((r) =>
-          api
-            .all_getLookup({ entry: r.list[0]!, type: 'sentence', limit: 1 })
-            .then((r) => r.result[0]!)
-        )
-        .filter((r) => r)
-    )
+        .then((r) => r.result)
+    } else {
+      this.lookup.sentence = await api
+        .vocabulary_getSentence({
+          entry: this.current,
+          distinct: 'id',
+        })
+        .then((r) => r.result)
+    }
   }
 }
 </script>