From fd67c7fdf899da7f207184b9079572271558b4da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=A3=E9=A1=B6?= <wangrongding@qq.com>
Date: Sun, 21 Apr 2024 04:18:54 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=BF=AE=E6=94=B9=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E7=B4=A0=E6=9D=90=E7=80=91=E5=B8=83=E6=B5=81=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/left-panel/ImageList.vue |  4 ++--
 src/components/left-panel/VideoList.vue | 25 +++++++++++++++++++------
 src/components/player/CanvasPlayer.vue  |  1 +
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/left-panel/ImageList.vue b/src/components/left-panel/ImageList.vue
index ea6a8c2..e9210aa 100644
--- a/src/components/left-panel/ImageList.vue
+++ b/src/components/left-panel/ImageList.vue
@@ -41,10 +41,10 @@ const imgList = [
       @change="onFileChange"
     />
     <p>图片素材：（开发中）</p>
-    <div class="grid max-h-[calc(100vh-200px)] grid-cols-2 gap-2 overflow-y-auto">
+    <div class="max-h-[calc(100vh-200px)] columns-2 gap-2 overflow-y-auto">
       <img
         :src="item"
-        class="image-item relative cursor-pointer rounded-md"
+        class="image-item relative mb-2 cursor-pointer rounded-md"
         alt=""
         v-for="(item, index) in imgList"
         :key="index"
diff --git a/src/components/left-panel/VideoList.vue b/src/components/left-panel/VideoList.vue
index c54ba72..9ee8824 100644
--- a/src/components/left-panel/VideoList.vue
+++ b/src/components/left-panel/VideoList.vue
@@ -29,6 +29,19 @@ const pause = (e: MouseEvent) => {
   target.currentTime = 0
   target.pause()
 }
+
+// TODO 后续通过请求获取
+const videoList = [
+  movie,
+  'https://video.qiantucdn.com/58pic/00/20/21/09958PIC6FViKhIpXZgUj.mp4?e=1713729837&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:g-ONc7Uje6p1939AOm0wRDYeiF8=',
+  'https://video.qiantucdn.com/58pic/00/20/23/02558PICNTpFqK4ncBJnV.mp4?e=1713729429&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:D94qjqaQseKIaqFePl36W3tIC-M=',
+  'https://video.qiantucdn.com/58pic/00/20/23/06658PICsC8W4kNsdPzcI.mp4?e=1713729432&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:QXmhagSADXtwS87wrf2XiptAsBw=',
+  'https://video.qiantucdn.com/58pic/00/20/23/11658PICbQzU5x2Y6ADcv.mp4?e=1713730089&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:Ja6iObmjMEe4tp7HGtkf0tNg2GU=',
+  'https://video.qiantucdn.com/58pic/00/20/24/04658PICWYteCdFtdPPny.mp4?e=1713730149&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:FMPXA6eKGdR1_SqzD0c3YOfXBu0=',
+  'https://video.qiantucdn.com/58pic/00/20/23/06g58PICCvcu5xjRX2558PICT.mp4?e=1713730152&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:wsPzjgOkr2yC64gl30pTGesc5pg=',
+  'https://video.qiantucdn.com/58pic/00/20/22/11q58PICTnUEjWVj2D6yb.mp4?e=1713730156&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:hHaECUSzDGWAdYmXEztiYdvYKwY=',
+  'https://video.qiantucdn.com/58pic/00/20/22/05x58PICKJHMvIwecZ7ph.mp4?e=1713728624&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:PPCmMoKn42iTu-3LFm-PrIU8NcM='
+]
 </script>
 <template>
   <div class="video-list flex flex-col gap-4">
@@ -40,14 +53,14 @@ const pause = (e: MouseEvent) => {
       @change="onFileChange"
     />
     <p>视频素材：（开发中）</p>
-    <div class="grid grid-cols-2 gap-2">
+    <div class="columns-2 gap-2">
       <div
-        class="video-item relative cursor-pointer rounded-md"
-        v-for="item in 10"
-        :key="item"
-        @click="addVideo(movie)"
+        class="video-item relative mb-2 cursor-pointer rounded-md"
+        v-for="(item, index) in videoList"
+        :key="index"
+        @click="addVideo(item)"
       >
-        <video :src="movie" class="rounded-md" muted loop @mouseenter="play" @mouseleave="pause" />
+        <video :src="item" class="rounded-md" muted loop @mouseenter="play" @mouseleave="pause" />
       </div>
     </div>
   </div>
diff --git a/src/components/player/CanvasPlayer.vue b/src/components/player/CanvasPlayer.vue
index 920ca04..3fc5d00 100644
--- a/src/components/player/CanvasPlayer.vue
+++ b/src/components/player/CanvasPlayer.vue
@@ -191,6 +191,7 @@ async function drawVideo(url: string) {
   canvas.add(videoElement)
   continuouslyRepaint()
   duration.value = videoRef.duration
+  canvas.setActiveObject(videoElement)
 
   videoRef.addEventListener('timeupdate', () => {
     currentTime.value = videoRef.currentTime