From 697e9a2300f31dbc84a7e765bb75065a98b99900 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Tue, 10 Oct 2023 21:23:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE=E9=85=8D=E7=BD=AE=EF=BC=88?=
 =?UTF-8?q?#223=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCreateElement.ts                   |  1 +
 src/types/slides.ts                             |  3 +++
 .../ElementStylePanel/VideoStylePanel.vue       | 17 +++++++++++++++++
 .../element/VideoElement/ScreenVideoElement.vue |  1 +
 .../element/VideoElement/VideoPlayer/index.vue  |  5 ++++-
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts
index e22e012a..99a5e225 100644
--- a/src/hooks/useCreateElement.ts
+++ b/src/hooks/useCreateElement.ts
@@ -305,6 +305,7 @@ export default () => {
       left: (VIEWPORT_SIZE - 500) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2,
       src,
+      autoplay: false,
     })
   }
   
diff --git a/src/types/slides.ts b/src/types/slides.ts
index 29b50488..a5a8c7a5 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -555,6 +555,8 @@ export interface PPTLatexElement extends PPTBaseElement {
  * 
  * src: 视频地址
  * 
+ * autoplay: 自动播放
+ * 
  * poster: 预览封面
  * 
  * ext: 视频后缀，当资源链接缺少后缀时用该字段确认资源类型
@@ -562,6 +564,7 @@ export interface PPTLatexElement extends PPTBaseElement {
 export interface PPTVideoElement extends PPTBaseElement {
   type: 'video'
   src: string
+  autoplay: boolean
   poster?: string
   ext?: string
 }
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
index bb540e94..e4df79a0 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
@@ -13,6 +13,16 @@
     <div class="row">
       <Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button>
     </div>
+
+    <div class="row switch-row">
+      <div style="width: 40%;">自动播放：</div>
+      <div class="switch-wrapper" style="width: 60%;">
+        <Switch 
+          :value="handleVideoElement.autoplay" 
+          @update:value="value => updateVideo({ autoplay: value })" 
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +36,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import FileInput from '@/components/FileInput.vue'
 import Button from '@/components/Button.vue'
+import Switch from '@/components/Switch.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
@@ -86,4 +97,10 @@ const setVideoPoster = (files: FileList) => {
     cursor: pointer;
   }
 }
+.switch-row {
+  height: 32px;
+}
+.switch-wrapper {
+  text-align: right;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/components/element/VideoElement/ScreenVideoElement.vue b/src/views/components/element/VideoElement/ScreenVideoElement.vue
index f7f00f75..7ebf289c 100644
--- a/src/views/components/element/VideoElement/ScreenVideoElement.vue
+++ b/src/views/components/element/VideoElement/ScreenVideoElement.vue
@@ -18,6 +18,7 @@
           :height="elementInfo.height"
           :src="elementInfo.src" 
           :poster="elementInfo.poster"  
+          :autoplay="elementInfo.autoplay"
           :scale="scale" 
         />
       </div>
diff --git a/src/views/components/element/VideoElement/VideoPlayer/index.vue b/src/views/components/element/VideoElement/VideoPlayer/index.vue
index 5588d5e7..51d7febc 100644
--- a/src/views/components/element/VideoElement/VideoPlayer/index.vue
+++ b/src/views/components/element/VideoElement/VideoPlayer/index.vue
@@ -17,6 +17,7 @@
         class="video"
         ref="videoRef"
         :src="src"
+        :autoplay="autoplay"
         :poster="poster"
         webkit-playsinline
         playsinline
@@ -24,7 +25,7 @@
         @timeupdate="handleTimeupdate()"
         @ended="handleEnded()"
         @progress="handleProgress()"
-        @play="autoHideController()"
+        @play="autoHideController(); paused = false"
         @pause="autoHideController()"
         @error="handleError()"
       ></video>
@@ -123,9 +124,11 @@ const props = withDefaults(defineProps<{
   height: number
   src: string
   poster?: string
+  autoplay?: boolean
   scale?: number
 }>(), {
   poster: '',
+  autoplay: false,
   scale: 1,
 })