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);

docs/index.md

@@ -5,22 +5,8 @@ layout: home
 hero:
   name: "yt2press"
   text: "video to vitepress"
-  tagline: My great project tagline
-  actions:
-    - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
-    - theme: alt
-      text: API Examples
-      link: /api-examples
-
-features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
 
 <Downloader />
+
+[qVVhBGT0K7Y.webm](/qVVhBGT0K7Y)

docs/qVVhBGT0K7Y.md

@@ -1,4 +1,6 @@
-
+---
+video: /qVVhBGT0K7Y.webm
+---
 
 ![0:14](./qVVhBGT0K7Y/0_14.png)