style: 样式修改 (#2202)

* refactor: 优化流媒体,直播视频关闭IO隐藏缓冲区等

* refactor: 优化流媒体,直播视频关闭IO隐藏缓冲

* style: 样式修改

Co-authored-by: wangjiahao <1522128093@qq.com>
Co-authored-by: 王嘉豪 <42510293+ziyujiahao@users.noreply.github.com>

frontend/src/components/canvas/custom-component/DeStreamMedia.vue

@@ -1,8 +1,13 @@
 <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" :loop="pOption.loop" controls muted />
-      <div v-if="editMode==='edit'" class="stream-mask" />
+      <video :ref="'player-'+element.id" class="centered-video" name="centeredVideo" :loop="pOption.loop" controls muted />
+      <div v-if="editMode==='edit'" class="stream-mask edit-mask" />
+      <div v-if="mobileLayoutStatus" class="stream-mask mobile-layout-mask">
+        <span style="opacity: 0.7;">
+          <span style="color: lightgray;">{{ $t('panel.stream_mobile_tips') }}</span>
+        </span>
+      </div>
     </div>
     <div v-else class="info-stream-class">
       {{ $t('panel.stream_media_add_tips') }}
@@ -14,6 +19,7 @@
 import flvjs from 'flv.js'
 import '@/custom-theme.css'
 import bus from '@/utils/bus'
+import { mapState } from 'vuex'
 
 export default {
   props: {
@@ -56,7 +62,10 @@ export default {
     },
     player() {
       return this.$refs.videoPlayer.player
-    }
+    },
+    ...mapState([
+      'mobileLayoutStatus'
+    ])
   },
   watch: {
     pOption: {
@@ -87,7 +96,7 @@ export default {
     initOption() {
       if (flvjs.isSupported() && this.pOption.url) {
         this.destroyPlayer()
-        const video = this.$refs.player
+        const video = this.$refs['player-' + this.element.id]
         if (video) {
           try {
             this.flvPlayer = flvjs.createPlayer(this.pOption,
@@ -154,8 +163,6 @@ export default {
     display: flex;
     height: calc(100% - 60px) !important;
     width: 100% !important;
-    background-color: #5c5e61;
-    opacity: 0;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -164,5 +171,13 @@ export default {
     align-items: center;
     justify-content: center;
   }
+
+  .edit-mask{
+    opacity: 0;
+  }
+
+  .mobile-layout-mask{
+  }
+
 </style>
 

frontend/src/lang/en.js

@@ -1430,6 +1430,7 @@ export default {
     no: 'No',
     live_tips: 'User Https First',
     stream_media_add_tips: 'Please Add Stream Media Info...',
+    stream_mobile_tips: 'IOS terminal may not display',
     json_params_error: 'Third Party Parameters Parsing Failed. Please Check Whether The Parameters Format Is Correct',
     inner_padding: 'Inner Padding',
     board_radio: 'Board Radio',

frontend/src/lang/tw.js

@@ -1431,6 +1431,7 @@ export default {
     no: '否',
     live_tips: '優先HTTPS鏈接',
     stream_media_add_tips: '請點擊添加配置流媒體信息...',
+    stream_mobile_tips: 'IOS终端可能无法显示',
     json_params_error: '第三方參數解析失敗，請檢查參數格式是否正確',
     inner_padding: '內邊距',
     board_radio: '邊框半徑',

frontend/src/lang/zh.js

@@ -1438,6 +1438,7 @@ export default {
     no: '否',
     live_tips: '优先HTTPS链接',
     stream_media_add_tips: '请点击添加配置流媒体信息...',
+    stream_mobile_tips: 'IOS终端可能无法显示',
     json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
     inner_padding: '内边距',
     board_radio: '边框半径',