first video

docs/.vitepress/theme/components/Downloader.vue

@@ -8,7 +8,6 @@
       ref="video"
       :src="videoSrc"
       @loadeddata="onVideoLoad"
-      @seeked="onSeeked"
     ></video>
   </form>
 </template>
@@ -31,15 +30,44 @@ function onSubmit(ev: SubmitEvent) {
 function onVideoLoad() {
   const ws = new WebSocket("ws://localhost:8080");
   wsRef.value = ws;
+
+  const vid = videoEl.value!;
+
+  const q_value = q.value.replace(/\.[a-z0-9]+$/, "")
+
   ws.onmessage = (ev) => {
-    console.log(ev.data)
-    const { name, t } = JSON.parse(ev.data);
+    const { name, ts } = JSON.parse(ev.data);
     switch (name) {
-      case "seek_q":
-        {
-          videoEl.value!.currentTime = t;
+      case "seek_q_ts": (async () => {
+        for (const t of ts) {
+          const b = await new Promise<Blob | null>((resolve) => {
+            vid.onseeked = () => {
+              const v = videoEl.value!;
+              let c = document.createElement("canvas");
+              c.height = v.videoHeight || parseInt(v.style.height);
+              c.width = v.videoWidth || parseInt(v.style.width);
+              const ctx = c.getContext("2d")!;
+              ctx.drawImage(v, 0, 0);
+
+              ws.send(
+                JSON.stringify({
+                  name: "timed_q",
+                  q: q_value,
+                  t,
+                }),
+              );
+
+              c.toBlob((b) => resolve(b));
+            }
+
+            const [min, sec] = t.split('_');
+            vid.currentTime = parseInt(min) * 60 + parseInt(sec) + 1;
+          })
+          if (b) ws.send(b);
+          vid.onseeked = null;
         }
-        break;
+        ws.send(JSON.stringify({ name: 'done', q: q_value }));
+      })(); break;
     }
   };
 
@@ -47,7 +75,7 @@ function onVideoLoad() {
     ws.send(
       JSON.stringify({
         name: "download_q",
-        q: q.value.replace(/\.[a-z0-9]+$/, ""),
+        q: q_value,
       }),
     );
   };
@@ -56,27 +84,6 @@ function onVideoLoad() {
     wsRef.value = undefined;
   };
 }
-
-function onSeeked() {
-  const ws = wsRef.value;
-  if (!ws) return;
-
-  const v = videoEl.value!;
-  let c = document.createElement("canvas");
-  c.height = v.videoHeight || parseInt(v.style.height);
-  c.width = v.videoWidth || parseInt(v.style.width);
-  const ctx = c.getContext("2d")!;
-  ctx.drawImage(v, 0, 0);
-
-  ws.send(
-    JSON.stringify({
-      name: "timed_q",
-      q: q.value.replace(/\.[a-z0-9]+$/, ""),
-      t: videoEl.value!.currentTime,
-      data: c.toDataURL("image/png"),
-    }),
-  );
-}
 </script>
 
 <style scoped>