ws that starts to work

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

@@ -1,69 +1,97 @@
 <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
+      controls
+      ref="video"
+      :src="videoSrc"
+      @loadeddata="onVideoLoad"
+      @seeked="onSeeked"
+    ></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");
+const wsRef = ref<WebSocket>();
 
 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");
+  wsRef.value = ws;
+  ws.onmessage = (ev) => {
+    console.log(ev.data)
+    const { name, t } = JSON.parse(ev.data);
+    switch (name) {
+      case "seek_q":
+        {
+          videoEl.value!.currentTime = t;
+        }
+        break;
+    }
+  };
 
-    listen<SeekQEvent>('seek_q', (ev) => {
-        videoEl.value!.currentTime = ev.payload.t;
-    })
+  ws.onopen = async () => {
+    ws.send(
+      JSON.stringify({
+        name: "download_q",
+        q: q.value.replace(/\.[a-z0-9]+$/, ""),
+      }),
+    );
+  };
+
+  ws.onclose = () => {
+    wsRef.value = undefined;
+  };
 }
 
 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);
+  const ws = wsRef.value;
+  if (!ws) return;
 
-    invoke('timed_q', { q: q.value.replace(/\.[a-z0-9]+$/, ''), t: videoEl.value!.currentTime, data: c.toDataURL('image/png') })
+  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>
-
 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>