report info update

static/styles/main.css

@@ -1917,7 +1917,8 @@ input[type="datetime-local"] {
 }
 
 .video-container div,
-.video-container-right div {
+.video-container-right div,
+.report-video-container div {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1928,18 +1929,21 @@ input[type="datetime-local"] {
 }
 
 .video-container div:hover,
-.video-container-right div:hover {
+.video-container-right div:hover,
+.report-video-container div:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
 .video-container div img,
-.video-container-right div img {
+.video-container-right div img,
+.report-video-container div img {
   height: 32px;
   width: 32px;
 }
 
 .video-container div span,
-.video-container-right div span {
+.video-container-right div span,
+.report-video-container div span {
   font-size: 16px;
   font-weight: 500;
   margin-top: 15px;
@@ -1963,6 +1967,31 @@ input[type="datetime-local"] {
   
 }
 
+.report-video-container {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 510px;
+  border-right: 2px solid rgba(245, 245, 250, 1);
+  display: flex;
+  height: calc(100% - 266px - 198px - 62px);
+  flex-wrap: wrap;
+}
+
+.report-video-container div {
+  height: auto;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  height: 50%;
+  border: 1px solid rgba(245, 245, 250, 1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+}
+
 .report video {
   width: 450px;
   border-right: 2px solid rgba(245, 245, 250, 1);

static/templates/devices/update.html

@@ -50,7 +50,7 @@
 
     <section class="main">
         <div class="name">
-            <span>Устройства</span>
+            <span style="color: rgb(255, 69, 58);">В разработке</span>
         </div>
         <nav>
             <a href="/devices">Список устройств</a>

static/templates/live.html

@@ -301,7 +301,7 @@
             type: 'flv',
             isLive: true,
             cors: true,
-            url: `${baseURL}?serial=${serial}&channel=${i}&quality=0`,
+            url: `${baseURL}?serial=${serial}&channel=${i}&quality=1`,
           }, {
             enableWorker: true,
             enableStashBuffer: false,
@@ -359,24 +359,6 @@
       });
     </script>
 
-<script>
-  window.addEventListener('DOMContentLoaded', function() {
-    var mapContainer = document.querySelector('.map');
-    var mapArea = document.getElementById('map');
-
-    mapArea.style.height = (mapContainer.clientHeight) + 'px';
-    mapArea.style.width = (mapContainer.clientWidth) + 'px';
-  });
-
-  window.addEventListener("resize", function (event) {
-        var mapContainer = document.querySelector('.map');
-        var mapArea = document.getElementById('map');
-
-        mapArea.style.height = (mapContainer.clientHeight) + 'px';
-        mapArea.style.width = (mapContainer.clientWidth) + 'px';
-      });
-</script>
-
     <script>
 
       var checkboxes = document.querySelectorAll('.checkbox-input');

static/templates/reports/report.html

@@ -145,7 +145,7 @@
                         </div>
                       </div>
 
-                      <div class="video-controls">
+                      <!-- <div class="video-controls">
                         <div class="controls">
                           <span id="current-time">00:00</span>
                           <button id="play-pause-btn">
@@ -161,11 +161,22 @@
                           <div id="progress-bar">
                             <div id="progress"></div>
                           </div>
-                      </div>
+                      </div> -->
 
                     </div>
 
-                      <video id="my-video" src="../test_video.MP4"></video>
+                      <!-- <video id="my-video" src="../test_video.MP4"></video> -->
+
+                      <div class="report-video-container">
+                        <div id="camera-1" onclick="playVideo(10);">
+                          <img src="../../img/play-circle.svg">
+                          <span>Запустить камеру водителя</span>
+                        </div>
+                        <div id="camera-2" onclick="playVideo(3);">
+                          <img src="../../img/play-circle.svg">
+                          <span>Запустить камеру из салона</span>
+                        </div>
+                      </div>
 
                       <div class="stream-map">
                         <div id="map"></div>
@@ -177,7 +188,7 @@
 
   <style>
     .stream-map {
-      width: calc(100% - 450px - 514px);
+      width: calc(100% - 512px);
       height: calc(100% - 62px);
       float: right;
     }
@@ -225,21 +236,10 @@
 
 
 <script>
-
-  function sizeMap() {
-    var mapContainer = document.querySelector('.map');
-    var mapArea = document.getElementById('map');
-    mapArea.style.height = (mapContainer.clientHeight) + 'px';
-    mapArea.style.width = (mapContainer.clientWidth) + 'px';
+  function playVideo(channel) {
+    const url = `http://localhost:8081/playback?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fplayback.flv%3Fserial%3D{{Serial}}%26channel%3D${channel}%26quality%3D1%26queryTime%3D{{QueryTime}}%26startTime%3D{{StartTime}}%26endTime%3D{{EndTime}}`;
+    window.open(url, '_blank');
   }
-
-  // window.addEventListener('DOMContentLoaded', function() {
-  //   sizeMap();
-  // });
-
-  window.addEventListener("resize", function (event) {
-    sizeMap();
-  });
 </script>