69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<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 } from 'vue'
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { listen } from '@tauri-apps/api/event';
|
|
|
|
const q = ref('')
|
|
const videoSrc = ref('')
|
|
const videoEl = useTemplateRef('video')
|
|
|
|
function onSubmit(ev: SubmitEvent) {
|
|
ev.preventDefault()
|
|
|
|
if (!q.value) return
|
|
|
|
videoSrc.value = '/' + q.value
|
|
}
|
|
|
|
interface SeekQEvent {
|
|
t: number
|
|
}
|
|
|
|
function onVideoLoad() {
|
|
invoke('download_q', { q: q.value.replace(/\.[a-z0-9]+$/, '') })
|
|
|
|
listen<SeekQEvent>('seek_q', (ev) => {
|
|
videoEl.value!.currentTime = ev.payload.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);
|
|
|
|
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;
|
|
}
|
|
|
|
form * {
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
button {
|
|
margin-left: 0.5em;
|
|
cursor: pointer;
|
|
padding: 0 0.5em;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
</style> |