add operate arrow

Monibuca · Nov 4, 2020 · 0982916 · 0982916
1 parent 3b6f9f3
commit 0982916
Show file tree

Hide file tree

Showing 8 changed files with 275 additions and 231 deletions.
diff --git a/ui/dist/plugin-gb28181.common.js b/ui/dist/plugin-gb28181.common.js
diff --git a/ui/dist/plugin-gb28181.common.js.map b/ui/dist/plugin-gb28181.common.js.map
diff --git a/ui/dist/plugin-gb28181.css b/ui/dist/plugin-gb28181.css
diff --git a/ui/dist/plugin-gb28181.umd.js b/ui/dist/plugin-gb28181.umd.js
diff --git a/ui/dist/plugin-gb28181.umd.js.map b/ui/dist/plugin-gb28181.umd.js.map
diff --git a/ui/dist/plugin-gb28181.umd.min.js b/ui/dist/plugin-gb28181.umd.min.js
diff --git a/ui/dist/plugin-gb28181.umd.min.js.map b/ui/dist/plugin-gb28181.umd.min.js.map
diff --git a/ui/src/components/Player.vue b/ui/src/components/Player.vue
@@ -2,6 +2,7 @@
   <Modal
     v-bind="$attrs"
     draggable
+    width="750"
     v-on="$listeners"
     :title="streamPath"
     @on-ok="onClosePreview"
@@ -10,7 +11,7 @@
     <div class="container">
       <video ref="webrtc" :srcObject.prop="stream" width="488" height="275" autoplay muted controls></video>
       <div class="control">
-        <svg @click="$emit('ptz',n)" v-for="n in 4" :class="'arrow'+n" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M682.666667 955.733333H341.333333a17.066667 17.066667 0 0 1-17.066666-17.066666V529.066667H85.333333a17.066667 17.066667 0 0 1-12.066133-29.1328l426.666667-426.666667a17.0496 17.0496 0 0 1 24.132266 0l426.666667 426.666667A17.066667 17.066667 0 0 1 938.666667 529.066667H699.733333v409.6a17.066667 17.066667 0 0 1-17.066666 17.066666z m-324.266667-34.133333h307.2V512a17.066667 17.066667 0 0 1 17.066667-17.066667h214.801066L512 109.4656 126.532267 494.933333H341.333333a17.066667 17.066667 0 0 1 17.066667 17.066667v409.6z" p-id="6849"></path></svg>
+        <svg @click="$emit('ptz',n)" v-for="n in 8" :class="'arrow'+n" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M682.666667 955.733333H341.333333a17.066667 17.066667 0 0 1-17.066666-17.066666V529.066667H85.333333a17.066667 17.066667 0 0 1-12.066133-29.1328l426.666667-426.666667a17.0496 17.0496 0 0 1 24.132266 0l426.666667 426.666667A17.066667 17.066667 0 0 1 938.666667 529.066667H699.733333v409.6a17.066667 17.066667 0 0 1-17.066666 17.066666z m-324.266667-34.133333h307.2V512a17.066667 17.066667 0 0 1 17.066667-17.066667h214.801066L512 109.4656 126.532267 494.933333H341.333333a17.066667 17.066667 0 0 1 17.066667 17.066667v409.6z" p-id="6849"></path></svg>
       </div>
     </div>
     <div slot="footer">
@@ -90,31 +91,56 @@ props:{
 };
 </script>
 <style scoped>
-.arrow1{
-  grid-column: 2;
-  grid-row: 1;
-}
-.arrow2{
-  transform: rotate(90deg);
-  grid-column: 3;
-  grid-row: 2;
-}
-.arrow3{
-  transform: rotate(180deg);
-  grid-column: 2;
-  grid-row: 3;
-}
-.arrow4{
-  transform: rotate(270deg);
-  grid-column: 1;
-  grid-row: 2;
-}
+  .arrow1{
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .arrow2{
+    transform: rotate(90deg);
+    grid-column: 3;
+    grid-row: 2;
+  }
+  .arrow3{
+    transform: rotate(180deg);
+    grid-column: 2;
+    grid-row: 3;
+  }
+  .arrow4{
+    transform: rotate(270deg);
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .arrow5{
+    transform: rotate(-45deg);
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .arrow6{
+    transform: rotate(45deg);
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .arrow7{
+    transform: rotate(-135deg);
+    grid-column: 1;
+    grid-row: 3;
+  }
+
+  .arrow8{
+    transform: rotate(135deg);
+    grid-column: 3;
+    grid-row: 3;
+  }
+
 .container {
   position: relative;
 }
 .control {
   position: absolute;
-  bottom: 0;
+  top: 20px;
   right: 0;
   display: grid;
   grid-template-columns: repeat(3, 33.33%);
@@ -125,8 +151,10 @@ props:{
 .control >* {
   cursor: pointer;
   fill: gray;
+  width: 50px;
+  height: 50px;
 }
 .control >*:hover{
   fill: cyan
 }
-</style>
+</style>