Merge branch 'master' of https://github.com/Bug-Duck/vuemotion into u…

…pstream

README.md

@@ -96,3 +96,6 @@ vue-motion is licensed under the Apache-2.0 License. See the [LICENSE](./LICENSE
 - [X(Twitter)](https://x.com/bugduckteam)
 - [Discord](https://discord.gg/PUVcpkv8)
 - [Bilibili (For 🇨🇳 Users)](https://space.bilibili.com/1959824394)
+
+✨ Star History
+[![Star History Chart](https://api.star-history.com/svg?repos=bug-duck/vuemotion&type=Date)](https://star-history.com/#bug-duck/vuemotion&Date)

packages/lib/src/widgets/video.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, onMounted } from "vue";
 import { defineWidget, usePlayer } from "@vue-motion/core";
 import { ref, watch } from "vue";
 import { type WidgetOptions, widget } from "./widget";
@@ -19,23 +19,47 @@ const options = defineWidget<VideoOptions>(props);
 const video = document.createElement("video");
 video.src = props.href;
 video.loop = props.loop ?? false;
-video.autoplay = props.autoPlay ?? false;
+video.autoplay = props.autoPlay ?? true;
+video.controls = true;
 video.load();
+document.body.appendChild(video);
 
-const canvas = new OffscreenCanvas(video.width, video.height); // Initial size
-const ctx = canvas.getContext("2d");
+const canvas = ref<HTMLCanvasElement | null>(null);
+let ctx: CanvasRenderingContext2D | null = null;
 
-const url = ref("");
+onMounted(() => {
+  video.play();
+  if (canvas.value) {
+    ctx = canvas.value.getContext("2d");
+    canvas.value.width = 1000;
+    canvas.value.height = 600;
+  }
+});
+
+let render_lock: boolean = false;
+
+async function canvas_render() {
+  if (ctx && canvas.value) {
+    ctx.drawImage(video, 0, 0, canvas.value.width, canvas.value.height);
+  }
+}
 
 async function updateFrame(newVal: number) {
-  video.currentTime = Math.floor(newVal);
-  console.log(newVal);
+  console.log("updateFrame", newVal, video.currentTime);
 
-  // console.log(newVal / (options.fps ?? 60))
-  canvas.width = 1000;
-  canvas.height = 600;
-  ctx?.drawImage(video, 0, 0, canvas.width, canvas.height); // Use video instead of image
-  url.value = window.URL.createObjectURL(await canvas.convertToBlob());
+  canvas_render();
+
+  if (render_lock) return;
+
+  if (Math.abs(video.currentTime - newVal) < 0.5) return;
+  render_lock = true;
+
+  video.currentTime = newVal;
+  video.play();
+  video.muted = true;
+  console.log(newVal);
+  canvas_render();
+  render_lock = false;
 }
 
 const { elapsed } = usePlayer();
@@ -45,7 +69,9 @@ updateFrame(elapsed.value);
 </script>
 
 <template>
-  <g v-bind="widget(options)">
-    <image :href="url" width="1000" height="600" />
+  <g v-bind="widget(options)" style="transform: translate(-50%, -50%)">
+    <foreignObject width="1000" height="600">
+      <canvas :width="1000" :height="600" ref="canvas"></canvas>
+    </foreignObject>
   </g>
 </template>

test/src/App.vue

@@ -9,7 +9,6 @@ import {
   Line,
 } from "@vue-motion/lib";
 import { onMounted } from "vue";
-import "@vue-motion/extension-animations";
 
 const rect = useWidget<RectMixin>();
 const line = useWidget<LineMixin>();
@@ -22,9 +21,6 @@ onMounted(() => {
   // rect.rotateTo(200)
   // rect.zoomTo(3, 3)
 
-  rect.focusOn({
-    by: easeInOutCirc,
-  });
   rect.moveOnPath(
     "M 100 100 Q 100 200 200 200 Q 300 200 300 100 Q 300 0 200 0 Q 100 0 100 100 Z",
     {
@@ -42,7 +38,7 @@ onMounted(() => {
   );
   rect.parallel(
     (r) => r.discolorateFillTo("skyblue"),
-    (r) => r.discolorateBorderTo("yellow"),
+    (r) => r.discolorateBorderTo("blue"),
     (r) => r.move(-200, -200),
   );
 
@@ -53,7 +49,7 @@ onMounted(() => {
 
 <template>
   <Motion :width="1600" :height="900">
-    <Rect :widget="rect" :width="100" :height="100" fill-color="red" />
+    <Rect :widget="rect" :width="100" :height="100" />
     <Line :widget="line" :from="[0, 0]" :to="[200, 200]" />
   </Motion>
 </template>

test/src/main.ts

@@ -1,13 +1,6 @@
 import { createApp } from "vue";
 import "./style.css";
 import { createPlayer } from "@vue-motion/core";
-import { setups } from "@vue-motion/extension-animations";
 import App from "./App.vue";
 
-createApp(App)
-  .use(
-    createPlayer({
-      addition: setups,
-    }),
-  )
-  .mount("#app");
+createApp(App).use(createPlayer({})).mount("#app");