update

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

@@ -0,0 +1,65 @@
+<template>
+    <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>
+</template>
+
+<script setup lang="ts">
+import { ref, useTemplateRef, VNodeRef } from 'vue'
+
+const q = ref('')
+const videoSrc = ref('')
+const videoEl = useTemplateRef('video')
+
+function onSubmit(ev: SubmitEvent) {
+    ev.preventDefault()
+
+    if (!q.value) return
+
+    videoSrc.value = '/public/' + q.value
+}
+
+function onVideoLoad() {
+    const { hot } = import.meta as any
+    hot.send('download-q', { q: q.value.replace(/\.[a-z0-9]+$/, '') })
+
+    hot.on('seek-q', ({ t }: { t: number }) => {
+        videoEl.value!.currentTime = t;
+    })
+}
+
+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 { hot } = import.meta as any
+    hot.send('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;
+}
+
+form * {
+    border: 1px solid gray;
+}
+
+button {
+    margin-left: 0.5em;
+    cursor: pointer;
+    padding: 0 0.5em;
+    border-radius: 5px;
+}
+
+</style>