From 5e0cb887a14cf5153ce98f0b0feb24f360c2ad9a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 1 Apr 2022 10:51:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20flv=E6=B5=81=E5=AA=92=E4=BD=93?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E7=BB=84=E4=BB=B6=E6=93=8D=E4=BD=9C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Editor/StreamMediaLinks.vue    | 46 ++++++++++---------
 .../canvas/custom-component/DeStreamMedia.vue | 29 ++++++++++--
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
index d06d19b54c..a018bf61dd 100644
--- a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
@@ -14,27 +14,29 @@
             <!--                    <el-radio :label="'rtmp'">{{$t('panel.streaming_media')}}</el-radio>-->
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('panel.auto_play')">
-          <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
-          <span style="color: #909399; font-size: 8px;margin-left: 3px">
-            Tips:{{ $t('panel.live_tips') }}
-          </span>
-        </el-form-item>
-        <el-form-item v-if="streamMediaInfoTemp.videoType==='flv'" :label="$t('panel.play_frequency')">
-          <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].loop">
-            <el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
-            <el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="streamMediaInfoTemp.videoType==='flv'" :label="$t('panel.is_live')">
-          <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive">
-            <el-radio :label="true">{{ $t('panel.yes') }}</el-radio>
-            <el-radio :label="false">{{ $t('panel.no') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.video_links')">
-          <el-input v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].url" />
-        </el-form-item>
+        <el-row v-if="streamMediaInfoTemp.videoType==='flv'">
+          <el-form-item :label="$t('panel.is_live')">
+            <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive">
+              <el-radio :label="true">{{ $t('panel.yes') }}</el-radio>
+              <el-radio :label="false">{{ $t('panel.no') }}</el-radio>
+            </el-radio-group>
+            <span style="color: #909399; font-size: 8px;margin-left: 3px">
+              Tips:{{ $t('panel.live_tips') }}
+            </span>
+          </el-form-item>
+          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.auto_play')">
+            <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
+          </el-form-item>
+          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.play_frequency')">
+            <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].loop">
+              <el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
+              <el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('panel.video_links')">
+            <el-input v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].url" />
+          </el-form-item>
+        </el-row>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
           <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
@@ -48,6 +50,7 @@
 <script>
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import bus from "@/utils/bus";
 
 export default {
   props: {
@@ -92,6 +95,7 @@ export default {
     onSubmit() {
       this.curComponent.streamMediaLinks = this.streamMediaInfoTemp
       this.$store.state.styleChangeTimes++
+      bus.$emit('streamMediaLinksChange')
       this.popoverClose()
     },
     onClose() {
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index c1920f07db..2fd42b89f7 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -1,10 +1,11 @@
 <template>
   <el-row ref="mainPlayer" style="width: 100%;height: 100%">
     <div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
-      <video ref="player" class="centered-video" name="centeredVideo" :controls="editMode!=='edit'" :loop="pOption.loop" muted />
+      <video ref="player" class="centered-video" name="centeredVideo" :loop="pOption.loop" controls muted />
+      <div v-if="editMode==='edit'" class="stream-mask" />
     </div>
     <div v-else class="info-stream-class">
-      {{ $t('panel.stream_media_add_tips') }}
+      {{ $t('panel.stream_media_add_tinitOptionips') }}
     </div>
   </el-row>
 </template>
@@ -12,6 +13,7 @@
 
 import flvjs from 'flv.js'
 import '@/custom-theme.css'
+import bus from '@/utils/bus'
 
 export default {
   props: {
@@ -67,6 +69,9 @@ export default {
   },
   mounted() {
     this.initOption()
+    bus.$on('streamMediaLinksChange', () => {
+      this.initOption()
+    })
   },
   methods: {
     initOption() {
@@ -89,7 +94,7 @@ export default {
 </script>
 
 <style>
-  .info-stream-class{
+  .info-stream-class {
     text-align: center;
     height: 100%;
     display: flex;
@@ -99,16 +104,19 @@ export default {
     font-size: 12px;
     color: #000000;
   }
+
   .move-bg {
     height: 100%;
     width: 100%;
     background-color: #000000;
   }
+
   .video-container {
     width: 100%;
     height: 100%;
     background-color: #000000;
   }
+
   .centered-video {
     width: 100%;
     height: 100%;
@@ -116,5 +124,20 @@ export default {
     margin-right: auto;
     margin-bottom: auto;
   }
+
+  .stream-mask {
+    display: flex;
+    height: calc(100% - 60px) !important;
+    width: 100% !important;
+    background-color: #5c5e61;
+    opacity: 0;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>