From 6e4fc1e79b7b4b91d6eb36f6b5638fa902665a50 Mon Sep 17 00:00:00 2001
From: xiaoxie <hotcoffie@163.com>
Date: Sat, 23 Apr 2022 23:34:36 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=AD=A3=E4=BA=86=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E8=A7=86=E9=A2=91=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E5=8C=85=E5=90=AB=E4=B8=A4=E4=B8=AA=E9=94=99=E8=AF=AF=EF=BC=9A?=
 =?UTF-8?q?=201.1=E4=BF=AE=E6=AD=A3=E6=92=AD=E6=94=BE=E5=99=A8=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E8=B7=AF=E7=94=B1=EF=BC=88=E6=AD=A4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=8D=E9=9C=80=E8=A6=81layout=E8=BE=B9=E6=A1=86=EF=BC=8C?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E5=B7=B2=E7=BB=8F=E4=BF=AE=E5=A4=8D=E4=BD=86?=
 =?UTF-8?q?=E5=9C=A8=E5=9C=B0=E5=9B=BE=E4=BB=A3=E7=A0=81=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E6=97=B6=E5=8F=88=E8=A2=AB=E9=94=99=E8=AF=AF=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=EF=BC=89=201.2=E4=BF=AE=E6=AD=A3=E6=92=AD=E6=94=BE=E5=99=A8id?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=EF=BC=8C=E6=AD=A4=E5=B1=9E=E6=80=A7=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=A8=E4=B8=8D=E9=9C=80=E8=A6=81=E7=88=B6=E7=BA=A7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BC=A0=E5=85=A5=EF=BC=88=E8=BF=99=E6=98=AF=E4=B9=8B?=
 =?UTF-8?q?=E5=89=8D=E5=AF=BC=E8=87=B4=E7=8B=AC=E7=AB=8B=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A4=B1=E6=95=88=E7=9A=84=E4=B8=BB=E8=A6=81?=
 =?UTF-8?q?=E5=8E=9F=E5=9B=A0=EF=BC=89=202.=E8=B0=83=E6=95=B4=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E7=BE=8E=E5=8C=96=E6=A0=B7=E5=BC=8F=E5=88=B0?=
 =?UTF-8?q?app.vue=E4=B8=AD=EF=BC=8C=E4=BD=BF=E5=85=B6=E7=9C=9F=E6=AD=A3?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_src/src/App.vue                           | 20 ++++++++++++++++
 web_src/src/components/common/jessibuca.vue   | 23 ++++--------------
 .../src/components/dialog/devicePlayer.vue    |  2 +-
 web_src/src/layout/index.vue                  | 24 -------------------
 web_src/src/router/index.js                   | 20 ++++++++--------
 5 files changed, 36 insertions(+), 53 deletions(-)

diff --git a/web_src/src/App.vue b/web_src/src/App.vue
index e1145454..3590f737 100644
--- a/web_src/src/App.vue
+++ b/web_src/src/App.vue
@@ -81,4 +81,24 @@ body,
   text-align: center;
   padding-top: 0px !important;
 }
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  border-radius: 4px;
+  background-color: #F5F5F5;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #c8c8c8;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+}
 </style>
diff --git a/web_src/src/components/common/jessibuca.vue b/web_src/src/components/common/jessibuca.vue
index d0711854..d05890ba 100644
--- a/web_src/src/components/common/jessibuca.vue
+++ b/web_src/src/components/common/jessibuca.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich">
+  <div id="container" ref="containerId" @dblclick="fullscreenSwich" style="width: 100%">
     <div class="buttons-box" id="buttonsBox">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -44,7 +44,7 @@ export default {
       forceNoOffscreen: false,
     };
   },
-  props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
+  props: ['videoUrl', 'error', 'hasAudio', 'height'],
   mounted() {
     window.onerror = (msg) => {
       // console.error(msg)
@@ -71,19 +71,19 @@ export default {
   },
   methods: {
     updatePlayerDomSize() {
-      let dom = document.getElementById(this.containerId);
+      let dom = document.getElementById('container');
       const width = dom.parentNode.clientWidth
       dom.style.width = width + 'px';
       dom.style.height = (9 / 16) * width + "px";
     },
     create() {
       let options = {};
-      console.log(this.$refs[this.containerId])
+      console.log(this.$refs.containerId)
       console.log("hasAudio  " + this.hasAudio)
 
       this.jessibuca = new window.Jessibuca(Object.assign(
         {
-          container: this.$refs[this.containerId],
+          container: this.$refs.containerId,
           videoBuffer: 0.2, // 最大缓冲时长，单位秒
           isResize: true,
           decoder: "static/js/jessibuca/decoder.js",
@@ -204,19 +204,6 @@ export default {
 
       });
     },
-    resize() {
-      if (this.jessibuca) {
-        this.jessibuca.resize()
-        this.$nextTick(() => {
-          let dom = document.getElementById(this.containerId);
-          if (dom.parentNode.clientHeight == 0) {
-            dom.style.height = (9 / 16) * dom.clientWidth + "px"
-          }
-          dom.style.height = dom.parentNode.clientHeight + "px";
-          dom.style.width = dom.parentNode.clientWidth + "px";
-        })
-      }
-    },
     playBtnClick: function (event) {
       this.play(this.videoUrl)
     },
diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue
index d3056ce3..f0b45125 100644
--- a/web_src/src/components/dialog/devicePlayer.vue
+++ b/web_src/src/components/dialog/devicePlayer.vue
@@ -4,7 +4,7 @@
     <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
         <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> -->
       <div style="width: 100%; height: 100%">
-        <player containerId="container" ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
+        <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
       </div>
         <div id="shared" style="text-align: right; margin-top: 1rem;">
             <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
diff --git a/web_src/src/layout/index.vue b/web_src/src/layout/index.vue
index 4fdbc72e..dccf6627 100644
--- a/web_src/src/layout/index.vue
+++ b/web_src/src/layout/index.vue
@@ -24,26 +24,6 @@ export default {
 }
 </script>
 <style>
-/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-/*定义滚动条轨道 内阴影+圆角*/
-::-webkit-scrollbar-track {
-  border-radius: 4px;
-  background-color: #F5F5F5;
-}
-
-/*定义滑块 内阴影+圆角*/
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: #c8c8c8;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-}
-
 /*定义标题栏*/
 .page-header {
   background-color: #FFFFFF;
@@ -64,10 +44,6 @@ export default {
 }
 </style>
 <style scoped>
-.el-main {
-  margin: 0;
-}
-
 .fade-enter {
   visibility: hidden;
   opacity: 0;
diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js
index 5a1d9648..88448621 100644
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -98,16 +98,6 @@ export default new VueRouter({
           name: 'media',
           component: media,
         },
-        {
-          path: '/play/wasm/:url',
-          name: 'wasmPlayer',
-          component: wasmPlayer,
-        },
-        {
-          path: '/play/rtc/:url',
-          name: 'rtcPlayer',
-          component: rtcPlayer,
-        },
         {
           path: '/map',
           name: 'devicePosition',
@@ -125,5 +115,15 @@ export default new VueRouter({
       name: 'deviceTree',
       component: deviceTree,
     },
+    {
+      path: '/play/wasm/:url',
+      name: 'wasmPlayer',
+      component: wasmPlayer,
+    },
+    {
+      path: '/play/rtc/:url',
+      name: 'rtcPlayer',
+      component: rtcPlayer,
+    },
   ]
 })