From fa2efef91ce58bf8070d839eaa0b0e92923d7522 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 16 Nov 2021 16:49:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E4=BC=98=E5=8C=96=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/VideoLinks.vue   | 15 +++++++-
 .../canvas/custom-component/DeVideo.vue       | 35 +++++++------------
 .../canvas/custom-component/component-list.js |  5 +++
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
index 1be5b099ee..d0dc3de5e7 100644
--- a/frontend/src/components/canvas/components/Editor/VideoLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
@@ -61,8 +61,18 @@ export default {
       ]
     }
   },
+  watch: {
+    linkInfo: {
+      handler: function() {
+        this.init()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.init()
+  },
   mounted() {
-    this.linkInfoTemp = deepCopy(this.linkInfo)
   },
   computed: {
     ...mapState([
@@ -70,6 +80,9 @@ export default {
     ])
   },
   methods: {
+    init() {
+      this.linkInfoTemp = deepCopy(this.linkInfo)
+    },
     onSubmit() {
       this.curComponent.videoLinks = this.linkInfoTemp
       this.$store.state.styleChangeTimes++
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 252fc79897..41cd8b33f2 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -1,7 +1,8 @@
 <template>
   <el-row ref="mainPlayer">
-    <div v-if="this.element.videoLinks[this.element.videoLinks.videoType].sources[0].src" class="player">
+    <div v-if="this.element.videoLinks[this.element.videoLinks.videoType].sources[0].src" :class="{'move-bg':moveFlag}" class="player">
       <video-player
+        v-if="!moveFlag"
         ref="videoPlayer"
         class="vjs-custom-skin"
         :options="playerOptions"
@@ -62,13 +63,16 @@ export default {
     }
   },
   computed: {
+    moveFlag() {
+      return (this.element.optStatus.dragging || this.element.optStatus.resizing)
+    },
     player() {
       return this.$refs.videoPlayer.player
     },
     playerOptions() {
       const videoPlayerOptions = this.element.videoLinks[this.element.videoLinks.videoType]
       let playHeight = this.h
-      if (this.canvasStyleData.panel.gap) {
+      if (this.canvasStyleData.panel.gap === 'yes') {
         playHeight = this.h - (this.componentGap * 2)
       }
       videoPlayerOptions.height = playHeight
@@ -82,26 +86,6 @@ export default {
     ])
   },
   mounted() {
-    // console.log('this is current player instance object', this.player)
-    setTimeout(() => {
-      console.log('dynamic change options', this.player)
-
-      // change src
-      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
-
-      // change item
-      // this.$set(this.playerOptions.sources, 0, {
-      //   type: "video/mp4",
-      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
-      // })
-
-      // change array
-      // this.playerOptions.sources = [{
-      //   type: "video/mp4",
-      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
-      // }]
-      this.player.muted(false)
-    }, 5000)
   },
   methods: {
     // listen event
@@ -142,7 +126,7 @@ export default {
     // player is ready
     playerReadied(player) {
       // seek to 10s
-      console.log('example player 1 readied', player)
+      // console.log('example player 1 readied', player)
       // player.currentTime(10): the player is readied', player)
     }
   }
@@ -160,5 +144,10 @@ export default {
     font-size: 12px;
     color: #9ea6b2;
   }
+  .move-bg {
+    height: 100%;
+    width: 100%;
+    background-color: #000000;
+  }
 </style>
 
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index fc972229e1..47c8bfec47 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -29,6 +29,11 @@ export const VIDEOLINKS = {
     muted: true,
     loop: true,
     controlBar: {
+      timeDivider: false,
+      durationDisplay: false,
+      remainingTimeDisplay: false,
+      currentTimeDisplay: false, // 当前时间
+      volumeControl: false, // 声音控制键
       fullscreenToggle: false
     },
     sources: [{