From a0d7f7f820fc6bd916916ec2c976323dd209ad32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=A3=E9=A1=B6?= <wangrongding@qq.com>
Date: Thu, 18 Apr 2024 02:02:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E6=B7=BB=E5=8A=A0=E8=A7=86=E9=A2=91=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/left-panel/LeftPanel.vue |  3 +-
 src/components/left-panel/VideoList.vue | 73 ++++++++++++++++++++++++-
 src/components/player/CanvasPlayer.vue  | 20 +++++++
 src/utils/bus.ts                        |  5 ++
 4 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/src/components/left-panel/LeftPanel.vue b/src/components/left-panel/LeftPanel.vue
index 904cd26..efa9112 100644
--- a/src/components/left-panel/LeftPanel.vue
+++ b/src/components/left-panel/LeftPanel.vue
@@ -9,7 +9,7 @@ const setActiveType = (id: number) => {
 }
 </script>
 <template>
-  <div class="left-box min-w-[400px] flex bg-[#272836]">
+  <div class="left-box w-[400px] flex bg-[#272836]">
     <div class="w-[60px] bg-[#1c1c26] flex flex-col items-center">
       <div
         v-for="(item, index) in typeList"
@@ -23,7 +23,6 @@ const setActiveType = (id: number) => {
       </div>
     </div>
     <div class="text-white p-4 flex-1">
-      视频素材：（开发中）
       <VideoList />
     </div>
   </div>
diff --git a/src/components/left-panel/VideoList.vue b/src/components/left-panel/VideoList.vue
index cf7a0b6..e49c075 100644
--- a/src/components/left-panel/VideoList.vue
+++ b/src/components/left-panel/VideoList.vue
@@ -1,5 +1,72 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import movie from '/bird.mp4'
+import { ref } from 'vue'
+import emitter from '~/utils/bus'
+
+const onFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+  const url = URL.createObjectURL(file)
+  addVideo(url)
+}
+
+// 添加视频素材
+function addVideo(url: string) {
+  emitter.emit('element:add', {
+    type: 'video',
+    value: url
+  })
+}
+
+const play = (e: MouseEvent) => {
+  const target = e.target as HTMLVideoElement
+  target.play()
+}
+
+const pause = (e: MouseEvent) => {
+  const target = e.target as HTMLVideoElement
+  target.currentTime = 0
+  target.pause()
+}
+</script>
 <template>
-  <div class="video-list">video-list</div>
+  <div class="video-list flex flex-col gap-4">
+    <p class="">添加本地文件：（不会上传）</p>
+    <input
+      type="file"
+      accept="video/*"
+      class="file-input file-input-bordered file-input-md w-full max-w-xs"
+      @change="onFileChange"
+    />
+    <p>视频素材：（开发中）</p>
+    <div class="grid grid-cols-2 gap-2">
+      <div
+        class="cursor-pointer video-item rounded-md relative"
+        v-for="item in 10"
+        :key="item"
+        @click="addVideo(movie)"
+      >
+        <video :src="movie" class="rounded-md" muted loop @mouseenter="play" @mouseleave="pause" />
+      </div>
+    </div>
+  </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.video-item {
+  &:hover {
+    // 添加按钮
+    &::after {
+      content: '+ 添加';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+      pointer-events: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/player/CanvasPlayer.vue b/src/components/player/CanvasPlayer.vue
index dcf7fb6..bbc5f90 100644
--- a/src/components/player/CanvasPlayer.vue
+++ b/src/components/player/CanvasPlayer.vue
@@ -39,8 +39,10 @@ const menuList = [
 emitter.on('element:copy', onCopy)
 emitter.on('element:paste', onPaste)
 emitter.on('element:delete', onDelete)
+emitter.on('element:add', onAdd)
 emitter.on('canvas:fullscreen', toggleCanvasFullScreen)
 emitter.on('video:skip', (time: number) => (videoRef.currentTime += time))
+
 watch(playStatus, (v) => videoRef[v ? 'play' : 'pause']())
 
 // 初始化画布
@@ -97,6 +99,24 @@ function onDelete(obj: fabric.Object) {
   menuShow.value = false
 }
 
+// 添加元素
+// TODO 后面需要支持传入添加元素的配置
+function onAdd({ type, value }: { type: string; value: string }) {
+  switch (type) {
+    case 'video':
+      drawVideo(value)
+      break
+    case 'svg':
+      addSVG(value)
+      break
+    case 'text':
+      addText(value)
+      break
+    default:
+      break
+  }
+}
+
 // 绘制 svg
 function addSVG(url: string) {
   fabric.loadSVGFromURL(url, (objects, options) => {
diff --git a/src/utils/bus.ts b/src/utils/bus.ts
index 9ab462e..ca01a4c 100644
--- a/src/utils/bus.ts
+++ b/src/utils/bus.ts
@@ -6,6 +6,11 @@ type Events = {
   'element:copy': void // 复制元素
   'element:paste': void // 粘贴元素
   'element:delete': fabric.Object // 删除元素
+  // 添加元素
+  'element:add': {
+    value: string // 图片地址 url | 视频地址 url | 文本内容 | SVG ...
+    type: string // 元素类型
+  }
   'video:skip': number // 跳转视频
   'canvas:fullscreen'?: boolean // 全屏
 }