From 0bca309fa039fe22cb8e17e84c83b5c708871d97 Mon Sep 17 00:00:00 2001
From: William Yang <williamyang2017@gmail.com>
Date: Thu, 25 Jul 2024 19:30:36 +1000
Subject: [PATCH] Start progress request and metadata search without delay

---
 static/index.html |  2 +-
 static/index.js   | 42 +++++++++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/static/index.html b/static/index.html
index 62490e0..6a5e682 100644
--- a/static/index.html
+++ b/static/index.html
@@ -20,7 +20,7 @@ <h2 class="my-auto">Transcode request</h2>
             type="text" class="flex-grow-1" 
             v-model="transcode_request.url" 
             placeholder="Youtube URL"
-            @blur="update_request_id()"
+            @input="(ev) => update_request_id()"
             :class="{ 'form-input-invalid': transcode_request.url_error !== null }"
           />
           <select v-model="transcode_request.format">
diff --git a/static/index.js b/static/index.js
index b2a00b0..1cc57e0 100644
--- a/static/index.js
+++ b/static/index.js
@@ -129,11 +129,12 @@ export let create_app = () => createApp({
         download_key: video_id,
         transcode_key: get_cache_key(video_id, audio_ext),
       };
-      this.subscribe_to_download(video_id);
-      this.subscribe_to_transcode(video_id, audio_ext);
-      // select entry from list
       this.download_focus_key = video_id;
       this.transcode_focus_key = get_cache_key(video_id, audio_ext);
+      await Promise.all([
+        this.subscribe_to_download(video_id), 
+        this.subscribe_to_transcode(video_id, audio_ext),
+      ]);
     },
     async refresh_downloads() {
       let res = await TranscodeApi.get_downloads();
@@ -179,14 +180,14 @@ export let create_app = () => createApp({
         }
       }
     },
-    subscribe_to_download(video_id) {
+    async subscribe_to_download(video_id) {
       let key = video_id;
       let timers = this.subscribed_download_progress_timers;
       if (timers[key] !== undefined) return false;
       const is_worker_finished = (status) => {
         return (status == WorkerStatus.Failed) || (status == WorkerStatus.Finished);
       };
-      let timer_handle = setInterval(async () => {
+      const request_progress = async () => {
         let is_finished = false;
         try {
           let progress = await TranscodeApi.get_download_progress(video_id);
@@ -200,22 +201,28 @@ export let create_app = () => createApp({
         } catch {
           is_finished = true;
         }
-        if (is_finished) {
-          clearInterval(timer_handle);
+        if (is_finished && timers[key] !== null) {
+          clearInterval(timers[key]);
           timers[key] = undefined;
         }
-      }, 1000);
-      timers[key] = timer_handle;
+        return is_finished;
+      };
+      if (!await request_progress()) {
+        timers[key] = setInterval(request_progress, 1000);
+      } else {
+        timers[key] = undefined;
+      }
       return true;
     },
-    subscribe_to_transcode(video_id, audio_ext) {
+    async subscribe_to_transcode(video_id, audio_ext) {
       let key = get_cache_key(video_id, audio_ext);
       let timers = this.subscribed_transcode_progress_timers;
       if (timers[key] !== undefined) return false;
       const is_worker_finished = (status) => {
         return (status == WorkerStatus.Failed) || (status == WorkerStatus.Finished);
       };
-      let timer_handle = setInterval(async () => {
+      timers[key] = null;
+      const request_progress = async () => {
         let is_finished = false;
         try {
           let progress = await TranscodeApi.get_transcode_progress(video_id, audio_ext);
@@ -229,12 +236,17 @@ export let create_app = () => createApp({
         } catch {
           is_finished = true;
         }
-        if (is_finished) {
-          clearInterval(timer_handle);
+        if (is_finished && timers[key] !== null) {
+          clearInterval(timers[key]);
           timers[key] = undefined;
         }
-      }, 1000);
-      timers[key] = timer_handle;
+        return is_finished;
+      };
+      if (!await request_progress()) {
+        timers[key] = setInterval(request_progress, 1000);
+      } else {
+        timers[key] = undefined;
+      }
       return true;
     },
     async download_file() {