65 lines
1.4 KiB
Vue
65 lines
1.4 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, 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> |