From 3950349308b052a4f4f04c03c52ac0b608e63b1b Mon Sep 17 00:00:00 2001
From: fit2cloudrd <reaperww@gmail.com>
Date: Tue, 5 Apr 2022 19:00:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E8=A7=86=E9=A2=91=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AC=A1=E9=94=99=E8=AF=AF=E5=90=8E=E5=86=8D?=
 =?UTF-8?q?=E5=A1=AB=E5=86=99=E9=93=BE=E6=8E=A5=E6=97=A0=E6=B3=95=E7=AB=8B?=
 =?UTF-8?q?=E5=8D=B3=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: wangjiahao <1522128093@qq.com>
---
 .../canvas/components/Editor/VideoLinks.vue   |  2 ++
 .../canvas/custom-component/DeStreamMedia.vue | 11 ++++++++--
 .../canvas/custom-component/DeVideo.vue       | 22 ++++++++++++-------
 .../canvas/custom-component/component-list.js |  3 ++-
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
index 616cead784..c839335f03 100644
--- a/frontend/src/components/canvas/components/Editor/VideoLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
@@ -43,6 +43,7 @@
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { checkAddHttp } from '@/utils/urlUtils'
+import bus from "@/utils/bus";
 
 export default {
   props: {
@@ -88,6 +89,7 @@ export default {
       this.linkInfoTemp[this.linkInfoTemp.videoType].sources[0].src = checkAddHttp(this.linkInfoTemp[this.linkInfoTemp.videoType].sources[0].src)
       this.curComponent.videoLinks = this.linkInfoTemp
       this.$store.state.styleChangeTimes++
+      bus.$emit('videoLinksChange-' + this.curComponent.id)
       this.popoverClose()
     },
     onClose() {
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index 8488ed4668..af831b6de1 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -42,7 +42,8 @@ export default {
   data() {
     return {
       pOption: this.element.streamMediaLinks[this.element.streamMediaLinks.videoType],
-      flvPlayer: null
+      flvPlayer: null,
+      videoShow: true
     }
   },
 
@@ -70,7 +71,13 @@ export default {
   mounted() {
     this.initOption()
     bus.$on('streamMediaLinksChange-' + this.element.id, () => {
-      this.initOption()
+      this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType],
+      this.flvPlayer = null,
+      this.videoShow = false
+      this.$nextTick(() => {
+        this.videoShow = true
+        this.initOption()
+      })
     })
   },
   methods: {
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index e9af0c4029..8dc5788c3d 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -2,12 +2,12 @@
   <el-row ref="mainPlayer">
     <div v-if="element.videoLinks[element.videoLinks.videoType].sources[0].src" class="player">
       <video-player
+        v-if="showVideo"
         ref="videoPlayer"
         class="vjs-custom-skin"
         :options="editMode==='preview'?pOption:playerOptions"
         :playsinline="true"
         @play="onPlayerPlay($event)"
-        @pause="onPlayerPause($event)"
         @ended="onPlayerEnded($event)"
         @loadeddata="onPlayerLoadeddata($event)"
         @waiting="onPlayerWaiting($event)"
@@ -29,6 +29,7 @@
 // custom skin css
 import '@/custom-theme.css'
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 // import SWF_URL from 'videojs-swf/dist/video-js.swf'
 
 export default {
@@ -59,7 +60,8 @@ export default {
   },
   data() {
     return {
-      pOption: {}
+      pOption: {},
+      showVideo: true
     }
   },
 
@@ -83,15 +85,22 @@ export default {
       'canvasStyleData'
     ])
   },
-  created() {
-    this.initOption()
-  },
   watch: {
     h(newVal, oldVla) {
       this.initOption()
     }
   },
+  created() {
+    this.initOption()
+  },
   mounted() {
+    bus.$on('videoLinksChange-' + this.element.id, () => {
+      this.showVideo = false
+      this.$nextTick(() => {
+        this.showVideo = true
+        this.initOption()
+      })
+    })
   },
   methods: {
     initOption() {
@@ -102,9 +111,6 @@ export default {
     onPlayerPlay(player) {
       // console.log('player play!', player)
     },
-    onPlayerPause(player) {
-      // console.log('player pause!', player)
-    },
     onPlayerEnded(player) {
       // console.log('player ended!', player)
     },
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index b05b616d1c..b674eaba5f 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -77,7 +77,8 @@ export const VIDEOLINKS = {
       remainingTimeDisplay: false,
       currentTimeDisplay: false, // 当前时间
       volumeControl: false, // 声音控制键
-      fullscreenToggle: false
+      fullscreenToggle: false,
+      pause: false
     },
     sources: [{
     }]

From 076c3b7fa202b306f5e5787406771f90c312ebf4 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 5 Apr 2022 19:28:58 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E7=BC=96=E8=BE=91=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=BD=91=E9=A1=B5=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=8D=A2=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E6=97=A0=E6=B3=95=E7=AB=8B=E5=8D=B3=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/FrameLinks.vue         |  2 ++
 .../components/canvas/custom-component/DeFrame.vue  | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/FrameLinks.vue b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
index 351728af6a..c0e3b21497 100644
--- a/frontend/src/components/canvas/components/Editor/FrameLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
@@ -28,6 +28,7 @@
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { checkAddHttp } from '@/utils/urlUtils'
+import bus from '@/utils/bus'
 
 export default {
   props: {
@@ -73,6 +74,7 @@ export default {
       this.linkInfoTemp.src = checkAddHttp(this.linkInfoTemp.src)
       this.curComponent.frameLinks = this.linkInfoTemp
       this.$store.state.styleChangeTimes++
+      bus.$emit('frameLinksChange-' + this.curComponent.id)
       this.popoverClose()
     },
     onClose() {
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index 44f412cf75..dc27903414 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="main-frame">
     <div v-if="element.frameLinks.src" class="main-frame">
-      <iframe id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
+      <iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
       <div v-if="editMode==='edit'" class="frame-mask">
         <span style="opacity: 1;">
           <span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
@@ -17,7 +17,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import NProgress from 'nprogress'
+import bus from '@/utils/bus'
 export default {
   name: 'DeFrame',
   props: {
@@ -45,7 +45,8 @@ export default {
   },
   data() {
     return {
-      pOption: {}
+      pOption: {},
+      frameShow: true
     }
   },
 
@@ -62,6 +63,12 @@ export default {
   created() {
   },
   mounted() {
+    bus.$on('frameLinksChange-' + this.element.id, () => {
+      this.frameShow = false
+      this.$nextTick(() => {
+        this.frameShow = true
+      })
+    })
   },
   methods: {
     loaded(e) {