Poll AI sidecars without refreshing catalog

Author: Adrian Tompkins

src/lib/catalog/index.ts

@@ -7,9 +7,11 @@ import { unifiedCloudManager } from '$lib/util/sync/unified-cloud-manager';
 import { generatePlaceholders } from '$lib/catalog/placeholders';
 import { routeParams } from '$lib/util/hash-router';
 import { getLegacyImageOnlyVolumeUuid } from '$lib/util/download-volume-repair';
+import type { CloudFileMetadata } from '$lib/util/sync/provider-interface';
 
 const AI_REFRESH_INTERVAL_MS = 15_000;
 const AI_DOWNLOAD_ATTEMPTS = 3;
+const discoveredAiFiles = new Map<string, CloudFileMetadata>();
 
 function delay(milliseconds: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, milliseconds));
@@ -47,18 +49,28 @@ async function downloadAiSidecar(
   throw lastError;
 }
 
-async function loadCurrentVolumeData(volume: VolumeMetadata): Promise<VolumeData | undefined> {
+async function loadCurrentVolumeData(
+  volume: VolumeMetadata,
+  pollAi = false
+): Promise<VolumeData | undefined> {
   const provider = unifiedCloudManager.getActiveProvider();
   if (provider) {
     const cloudPath = volume.cloudPath || `${volume.series_title}/${volume.volume_title}.cbz`;
     const aiPath = cloudPath.replace(/\.(cbz|zip|cbr|rar|7z)$/i, '.mokuro-ai.json').toLowerCase();
-    const remoteAi = unifiedCloudManager
-      .getAllCloudVolumes()
-      .find((file) => file.path.toLowerCase() === aiPath);
+    const discoveryKey = `${provider.type}:${aiPath}`;
+    let remoteAi =
+      unifiedCloudManager.getAllCloudVolumes().find((file) => file.path.toLowerCase() === aiPath) ||
+      discoveredAiFiles.get(discoveryKey);
+    if (!remoteAi && pollAi) {
+      remoteAi = (await provider.listCloudVolumes()).find(
+        (file) => file.path.toLowerCase() === aiPath
+      );
+      if (remoteAi) discoveredAiFiles.set(discoveryKey, remoteAi);
+    }
     if (remoteAi) {
       const existingAi = await db.volume_ai.get(volume.volume_uuid);
       const remoteModified = Date.parse(remoteAi.modifiedTime || '') || 0;
-      if (!existingAi || existingAi.updated_at * 1000 < remoteModified) {
+      if (pollAi || !existingAi || existingAi.updated_at * 1000 < remoteModified) {
         try {
           await downloadAiSidecar(provider, remoteAi, volume, existingAi);
         } catch (error) {
@@ -206,10 +218,9 @@ export const currentVolumeData: Readable<VolumeData | undefined> = derived(
     }
 
     if ($currentVolume) {
-      const refresh = async (refreshCloudFiles = false) => {
+      const refresh = async (pollAi = false) => {
         try {
-          if (refreshCloudFiles) await unifiedCloudManager.fetchAllCloudVolumes();
-          const volumeData = await loadCurrentVolumeData($currentVolume);
+          const volumeData = await loadCurrentVolumeData($currentVolume, pollAi);
           if (!cancelled && volumeData) {
             set(volumeData);
             if (

src/lib/components/Reader/TextBoxes.svelte

@@ -708,18 +708,20 @@
                     openAiWord = openAiWord === wordIndex ? null : wordIndex;
                   }}>{word.surface}</button
                 >
-                {#if openAiWord === wordIndex}
-                  <div class="aiWordDetail">
-                    <strong>{word.surface}</strong>{word.reading && word.reading !== word.surface
-                      ? ` (${word.reading})`
-                      : ''}<br />
-                    {#if word.dictionary_form && word.dictionary_form !== word.surface}{word.dictionary_form}{word.dictionary_reading
-                        ? ` (${word.dictionary_reading})`
-                        : ''}<br />{/if}
-                    {word.meaning}{word.grammar ? ` · ${word.grammar}` : ''}
-                  </div>
-                {/if}
               {/each}
+              {#if openAiWord !== null && ai.words[openAiWord]}
+                {@const selectedWord = ai.words[openAiWord]}
+                <div class="aiWordDetail">
+                  <strong>{selectedWord.surface}</strong>{selectedWord.reading &&
+                  selectedWord.reading !== selectedWord.surface
+                    ? ` (${selectedWord.reading})`
+                    : ''}<br />
+                  {#if selectedWord.dictionary_form && selectedWord.dictionary_form !== selectedWord.surface}{selectedWord.dictionary_form}{selectedWord.dictionary_reading
+                      ? ` (${selectedWord.dictionary_reading})`
+                      : ''}<br />{/if}
+                  {selectedWord.meaning}{selectedWord.grammar ? ` · ${selectedWord.grammar}` : ''}
+                </div>
+              {/if}
             </div>
           {/if}
         </div>

src/lib/components/Reader/__tests__/TextBoxes.test.ts

@@ -102,6 +102,14 @@ describe('TextBoxes auto mode with lines_coords', () => {
                 dictionary_reading: 'かのう',
                 meaning: 'possible',
                 grammar: 'na-adjective'
+              },
+              {
+                surface: '結界',
+                reading: 'けっかい',
+                dictionary_form: '結界',
+                dictionary_reading: 'けっかい',
+                meaning: 'barrier',
+                grammar: 'noun'
               }
             ]
           }
@@ -118,6 +126,13 @@ describe('TextBoxes auto mode with lines_coords', () => {
     expect(queryByText('Copy EN')).toBeNull();
     await fireEvent.click(getByText('可能'));
     expect(container.querySelector('.aiWordDetail')?.textContent).toContain('possible');
+    const aiWords = container.querySelector('.aiWords');
+    expect(aiWords?.lastElementChild?.classList.contains('aiWordDetail')).toBe(true);
+    expect(
+      Array.from(aiWords?.querySelectorAll('button') || []).map((button) => button.textContent)
+    ).toEqual(['可能', '結界']);
+    await fireEvent.click(getByText('結界'));
+    expect(aiWords?.lastElementChild?.textContent).toContain('barrier');
     await fireEvent.pointerDown(document.body);
     expect(queryByText('It makes entering and leaving the barrier possible.')).toBeNull();
   });