From addb6c04593129ce8257c6ffd675238f4be0030d Mon Sep 17 00:00:00 2001
From: shangxingyu <harston@qq.com>
Date: Sat, 3 Feb 2024 11:42:41 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=92=AD=E6=94=BE=E5=99=A8=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=202.=E5=A4=9A=E5=B1=8F=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E5=A4=9A=E7=AA=97=E5=8F=A3,=E7=AA=97=E5=8F=A3=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E5=8F=AA=E6=9C=89=E6=9C=80=E5=90=8E=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E6=9C=89=E6=97=B6=E9=97=B4=E7=9B=91=E5=90=AC=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=203.=E5=9B=9E=E6=94=BE=E7=AA=97=E5=8F=A3=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E6=97=B6=E8=B0=83=E6=95=B4=E4=B8=8B=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_src/src/components/GBRecordDetail.vue   | 24 ++++++---
 web_src/src/components/common/jessibuca.vue | 57 +++++++++++----------
 2 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/web_src/src/components/GBRecordDetail.vue b/web_src/src/components/GBRecordDetail.vue
index 37ec377f5..b800e0c1a 100755
--- a/web_src/src/components/GBRecordDetail.vue
+++ b/web_src/src/components/GBRecordDetail.vue
@@ -36,7 +36,6 @@
                   :error="videoError"
                   :message="videoError"
                   :hasAudio="hasAudio"
-                  style="max-height: 100%"
                   fluent autoplay live ></player>
         </div>
         <div class="player-option-box">
@@ -137,8 +136,11 @@
           margin: "10px auto 10px auto"
         },
         playerStyle: {
+          "display": "flex",
+          "justify-content": "center",
+          "align-items": "center",
 			    "margin": "0 auto 20px auto",
-          "height": this.winHeight + "px",
+          "height": this.winHeight + "px"
         },
         winHeight: window.innerHeight - 240,
         playTime: null,
@@ -178,17 +180,25 @@
 
 		},
 		mounted() {
-      this.recordListStyle.height = this.winHeight + "px";
-      this.playerStyle["height"] = this.winHeight + "px";
-      this.chooseDate = moment().format('YYYY-MM-DD')
-      this.dateChange();
-      window.addEventListener('beforeunload', this.stopPlayRecord)
+      this.$nextTick(() => {
+        this.updateWinHeight();
+        this.chooseDate = moment().format('YYYY-MM-DD')
+        this.dateChange();
+        window.addEventListener('resize',this.updateWinHeight)
+        window.addEventListener('beforeunload', this.stopPlayRecord)
+      })
 		},
 		destroyed() {
 			this.$destroy('recordVideoPlayer');
       window.removeEventListener('beforeunload', this.stopPlayRecord)
+      window.removeEventListener('resize',this.updateWinHeight)
 		},
 		methods: {
+      updateWinHeight(){
+        this.winHeight=window.innerHeight - 240;
+        this.recordListStyle.height = this.winHeight + "px";
+        this.playerStyle.height = this.winHeight + "px";
+      },
       dateChange(){
         if (!this.chooseDate) {
           return;
diff --git a/web_src/src/components/common/jessibuca.vue b/web_src/src/components/common/jessibuca.vue
index 3419bb590..ef79bab76 100755
--- a/web_src/src/components/common/jessibuca.vue
+++ b/web_src/src/components/common/jessibuca.vue
@@ -1,23 +1,25 @@
 <template>
-  <div ref="container" @dblclick="fullscreenSwich"
-       style="width:100%;height:518px; min-height: 200px;background-color: #000000;margin:0 auto;position: relative;">
-    <div class="buttons-box" id="buttonsBox">
-      <div class="buttons-box-left">
-        <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
-        <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
-        <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
-        <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i>
-        <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i>
-      </div>
-      <div class="buttons-box-right">
-        <span class="jessibuca-btn">{{ kBps }} kb/s</span>
-        <!--          <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
-        <!--          <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
-        <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot"
-           style="font-size: 1rem !important"></i>
-        <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
-        <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
-        <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
+  <div ref="container">
+    <div ref="playerContainer" @dblclick="fullscreenSwich"
+         style="width:100%;height:100%;background-color: #000000;margin:0 auto;position: relative;">
+      <div class="buttons-box" id="buttonsBox">
+        <div class="buttons-box-left">
+          <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
+          <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
+          <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
+          <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i>
+          <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i>
+        </div>
+        <div class="buttons-box-right">
+          <span class="jessibuca-btn">{{ kBps }} kb/s</span>
+          <!--          <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
+          <!--          <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
+          <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot"
+             style="font-size: 1rem !important"></i>
+          <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
+          <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
+          <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
+        </div>
       </div>
     </div>
   </div>
@@ -46,13 +48,11 @@ export default {
     };
   },
   props: ['videoUrl', 'error', 'hasAudio', 'height'],
-  created() {
+  mounted() {
     let paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
       this.updatePlayerDomSize()
-      window.onresize = () => {
-        this.updatePlayerDomSize()
-      }
+      window.addEventListener('resize',this.updatePlayerDomSize)
       if (typeof (this.videoUrl) == "undefined") {
         this.videoUrl = paramUrl;
       }
@@ -63,7 +63,10 @@ export default {
     videoUrl: {
       handler(val, _) {
         this.$nextTick(() => {
-          this.play(val);
+          if(val) {
+            this.play(val);
+          }
+          this.updatePlayerDomSize()
         })
       },
       immediate: true
@@ -74,8 +77,7 @@ export default {
       let dom = this.$refs.container;
       let width = dom.parentNode.clientWidth
       let height = (9 / 16) * width
-
-      const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
+      const clientHeight = Math.min(dom.parentNode.clientHeight?dom.parentNode.clientHeight:document.body.clientHeight, document.documentElement.clientHeight)
       if (height > clientHeight) {
         height = clientHeight
         width = (16 / 9) * height
@@ -87,7 +89,7 @@ export default {
     },
     create() {
       let options = {
-        container: this.$refs.container,
+        container: this.$refs.playerContainer,
         autoWasm: true,
         background: "",
         controlAutoHide: false,
@@ -257,6 +259,7 @@ export default {
     this.playing = false;
     this.loaded = false;
     this.performance = "";
+    window.removeEventListener('resize',this.updatePlayerDomSize);
   },
 }
 </script>