Merge pull request #1213 from dataease/pr@dev@refactor_panel-video

refactor:优化视频拖拽效果

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++

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>
 

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: [{