wip: 修改侧边栏素材瀑布流布局

wangrongding · Apr 20, 2024 · fd67c7f · fd67c7f
1 parent 24a9481
commit fd67c7f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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