From 383ed3955e74d3c7d323d9e19c7b08a85e5e5447 Mon Sep 17 00:00:00 2001
From: hughfenghen <hughfenghen@gmail.com>
Date: Thu, 23 Jan 2025 10:06:26 +0800
Subject: [PATCH] docs(demo): spupprt adjust playbackRate

---
 doc-site/docs/demo/2_1_1-watermark.tsx | 29 ++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/doc-site/docs/demo/2_1_1-watermark.tsx b/doc-site/docs/demo/2_1_1-watermark.tsx
index e43d874b..25ef5037 100644
--- a/doc-site/docs/demo/2_1_1-watermark.tsx
+++ b/doc-site/docs/demo/2_1_1-watermark.tsx
@@ -6,15 +6,17 @@ import {
   renderTxt2ImgBitmap,
 } from '@webav/av-cliper';
 import { useState } from 'react';
+import { Slider } from 'antd';
 import { CombinatorPlay } from './combinator-player';
 import { assetsPrefix } from './utils';
 
 const resList = assetsPrefix(['video/webav1.mp4']);
 
-async function start() {
+async function start(playbackRate: number) {
   const spr1 = new OffscreenSprite(
     new MP4Clip((await fetch(resList[0])).body!),
   );
+  spr1.time.playbackRate = playbackRate;
 
   const spr2 = new OffscreenSprite(
     new ImgClip(
@@ -51,11 +53,26 @@ async function start() {
 
 export default function UI() {
   const [com, setCom] = useState<null | Combinator>(null);
+  const [playbackRate, setPlaybackRate] = useState(1);
   return (
-    <CombinatorPlay
-      list={resList}
-      onStart={async () => setCom(await start())}
-      com={com}
-    ></CombinatorPlay>
+    <>
+      <div className="flex gap-4 items-center">
+        <div>Playback rate:</div>
+        <div className="flex-1">
+          <Slider
+            min={0}
+            max={3}
+            step={0.1}
+            value={playbackRate}
+            onChange={setPlaybackRate}
+          ></Slider>
+        </div>
+      </div>
+      <CombinatorPlay
+        list={resList}
+        onStart={async () => setCom(await start(playbackRate))}
+        com={com}
+      ></CombinatorPlay>
+    </>
   );
 }