make do without tauri and test vid

s 0f44589 ws that starts to work
s 6df44a1 first video
s dacb6cd click to time
s 7831ae4 remove tauri
s 2d18c9b concurrently and frontmatter
s dc43284 add new video and test
s 0dd03af fix for youtube format and markdown compat
s c30fa38 remove placeholder mds
s d8f1a54 remove images from git

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

@@ -1,69 +1,107 @@
 <template>
-    <form @submit="onSubmit">
-        <input type="text" v-model="q">
-        <button type="submit">Submit</button>
+  <form @submit="onSubmit">
+    <input type="text" v-model="q" />
+    <button type="submit">Submit</button>
 
-        <video controls ref="video" :src="videoSrc" @loadeddata="onVideoLoad" @seeked="onSeeked"></video>
-    </form>
+    <video
+      v-if="videoSrc"
+      controls
+      ref="video"
+      :src="videoSrc"
+      @loadeddata="onVideoLoad"
+    ></video>
+  </form>
 </template>
 
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from '@tauri-apps/api/event';
+import { ref, useTemplateRef } from "vue";
 
-const q = ref('')
-const videoSrc = ref('')
-const videoEl = useTemplateRef('video')
+const q = ref("");
+const videoSrc = ref("");
+const videoEl = useTemplateRef("video");
 
 function onSubmit(ev: SubmitEvent) {
-    ev.preventDefault()
+  ev.preventDefault();
+  if (!q.value) return;
 
-    if (!q.value) return
-
-    videoSrc.value = '/' + q.value
-}
-
-interface SeekQEvent {
-    t: number
+  videoSrc.value = "/" + q.value;
 }
 
 function onVideoLoad() {
-    invoke('download_q', { q: q.value.replace(/\.[a-z0-9]+$/, '') })
+  const ws = new WebSocket("ws://localhost:8080");
 
-    listen<SeekQEvent>('seek_q', (ev) => {
-        videoEl.value!.currentTime = ev.payload.t;
-    })
+  const vid = videoEl.value!;
+
+  const q_value = q.value;
+
+  ws.onmessage = (ev) => {
+    const { name, ts } = JSON.parse(ev.data);
+    switch (name) {
+      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));
+            }
+
+            if (typeof t === 'string'){
+              const [min, sec] = t.split('_');
+              vid.currentTime = parseInt(min) * 60 + parseInt(sec) + 1;
+            } else {
+              vid.currentTime = t;
+            }
+          })
+          if (b) ws.send(b);
+          vid.onseeked = null;
+        }
+        ws.send(JSON.stringify({ name: 'done', q: q_value }));
+      })(); break;
+    }
+  };
+
+  ws.onopen = async () => {
+    ws.send(
+      JSON.stringify({
+        name: "download_q",
+        q: q_value,
+        duration: vid.duration,
+      }),
+    );
+  };
+
+  ws.onclose = () => {
+  };
 }
-
-function 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);
-
-    invoke('timed_q', { q: q.value.replace(/\.[a-z0-9]+$/, ''), t: videoEl.value!.currentTime, data: c.toDataURL('image/png') })
-}
-
 </script>
 
 <style scoped>
-
 form {
-    margin: 0.5em 0;
+  margin: 0.5em 0;
 }
 
 form * {
-    border: 1px solid gray;
+  border: 1px solid gray;
 }
 
 button {
-    margin-left: 0.5em;
-    cursor: pointer;
-    padding: 0 0.5em;
-    border-radius: 5px;
+  margin-left: 0.5em;
+  cursor: pointer;
+  padding: 0 0.5em;
+  border-radius: 5px;
 }
-
-</style>
+</style>