From a7d9d93615264041403371e82e1d100cc250e3e4 Mon Sep 17 00:00:00 2001
From: RSamaium <sam@newbot.io>
Date: Mon, 6 Jan 2025 09:36:10 +0100
Subject: [PATCH] refactor: Update Video component and documentation

---
 README.md                             |  4 ----
 docs/.vitepress/config.ts             |  4 ++++
 docs/components/video.md              | 25 +++++++++++++++++++++++++
 packages/core/src/components/Video.ts |  4 ++--
 4 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 docs/components/video.md

diff --git a/README.md b/README.md
index 4639a9b..89a380c 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,6 @@ Features:
 - Particle Emitter
 - Audio System
 
-## Note: Performance Comparison with Pixi React
-
-CanvasEngine offers significant performance advantages over Pixi React. While Pixi React relies on React's detection cycles in addition to Pixi's traversal, which can be resource-intensive, CanvasEngine takes a more granular approach. It only updates the specific elements that have changed, resulting in more efficient rendering and better overall performance.
-
 ## Installation
 
 ```bash
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5e10bea..bb9fa79 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -81,6 +81,10 @@ const guideMenu = [
         text: "TilingSprite",
         link: "/components/tilling-sprite",
       },
+      {
+        text: "Video",
+        link: "/components/video",
+      },
     ],
   },
   {
diff --git a/docs/components/video.md b/docs/components/video.md
new file mode 100644
index 0000000..48d7a04
--- /dev/null
+++ b/docs/components/video.md
@@ -0,0 +1,25 @@
+# Use Video component
+
+```html
+<Video src="myvideo.mp4" play={true} />
+```
+
+## Props
+
+- `src`: string
+- `paused`: boolean
+- `loop`: boolean
+- `muted`: boolean
+
+- `loader`: {
+    - `onComplete`: (texture: Texture) => void;
+    - `onProgress`: (progress: number) => void;
+}
+
+
+## Events
+
+- `play`: () => void;
+- `pause`: () => void;
+- `ended`: () => void;
+- `progress`: (progress: number) => void;
diff --git a/packages/core/src/components/Video.ts b/packages/core/src/components/Video.ts
index f7bf317..875aede 100644
--- a/packages/core/src/components/Video.ts
+++ b/packages/core/src/components/Video.ts
@@ -5,7 +5,7 @@ import { Sprite } from "./Sprite";
 import { effect, Signal, signal } from "@signe/reactive";
 
 interface VideoProps {
-    source: string;
+    src: string;
     paused?: boolean;
     loop?: boolean;
     muted?: boolean;
@@ -87,7 +87,7 @@ export function Video(props: VideoProps) {
 
     return h(Sprite, {
         ...props,
-        image: props.source,
+        image: props.src,
         loader: {
             onComplete: (texture) => {
                 const source = texture.source.resource