Merge branch 'dev' of github.com:dataease/dataease into dev

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-row v-if="streamMediaInfoTemp.videoType==='flv'">
-          <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
+          <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.videoType==='flv'" :label="$t('panel.play_frequency')">
+          <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 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>
         <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() {

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>