click to time

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

@@ -18,7 +18,6 @@ import { ref, useTemplateRef } from "vue";
 const q = ref("");
 const videoSrc = ref("");
 const videoEl = useTemplateRef("video");
-const wsRef = ref<WebSocket>();
 
 function onSubmit(ev: SubmitEvent) {
   ev.preventDefault();
@@ -29,7 +28,6 @@ function onSubmit(ev: SubmitEvent) {
 
 function onVideoLoad() {
   const ws = new WebSocket("ws://localhost:8080");
-  wsRef.value = ws;
 
   const vid = videoEl.value!;
 
@@ -81,7 +79,6 @@ function onVideoLoad() {
   };
 
   ws.onclose = () => {
-    wsRef.value = undefined;
   };
 }
 </script>

docs/.vitepress/theme/components/Video.vue

@@ -0,0 +1,50 @@
+<template>
+  <Teleport to="body">
+    <video v-if="videoURL" controls :src="videoURL" ref="video">
+        Hello
+    </video>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed, useTemplateRef, watch } from 'vue'
+
+const { frontmatter } = useData<{ video?: string }>()
+const videoURL = computed(() => frontmatter.value?.video)
+const videoEl = useTemplateRef("video");
+
+function setImgClick(){
+  const v = videoEl.value;
+  if (!v) {
+    return;
+  }
+
+  document.querySelectorAll('img').forEach((img) => {
+    const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || []
+    const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null
+    if (!t) return;
+
+    img.onclick = () => {
+        v.currentTime = t
+    }
+  })
+}
+
+watch(videoURL, () => {
+  setImgClick()
+})
+
+setTimeout(() => setImgClick(), 500)
+</script>
+
+<style scoped>
+video {
+  width: 750px;
+  overflow: visible;
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  z-index: 100;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,9 +1,17 @@
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
+import { h } from 'vue'
+
 import Downloader from "./components/Downloader.vue";
+import Video from './components/Video.vue'
 
 export default {
   extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'sidebar-nav-after': () => h(Video)
+    })
+  },
   enhanceApp({ app }) {
     // register your custom global components
     app.component("Downloader", Downloader);