Merge pull request #4404 from IgorA100/patch-512860

Information block "<div class="info">" use for all players on Montage & Watch pages

Author: connortechnology

web/includes/Monitor.php

@@ -1199,6 +1199,12 @@ class="monitorStream imageFeed"
 ';
     } # end if showZones
     $html .= PHP_EOL.'</div><!--.zoompan--></div><!--monitorStream-->'.PHP_EOL;
+    $html .= '
+      <div class="stream-info">
+          <div class="stream-info-status"></div>
+          <div class="stream-info-mode"></div>
+      </div>
+      '.PHP_EOL;;
     if (isset($options['state']) and $options['state']) {
     //if ((!ZM_WEB_COMPACT_MONTAGE) && ($this->Type() != 'WebSite')) {
       $html .= $this->getMonitorStateHTML();

web/js/MonitorStream.js

@@ -317,6 +317,13 @@ function MonitorStream(monitorData) {
     }
   }; // setStreamScale
 
+  this.updateStreamInfo = function(info) {
+    const modeEl = document.querySelector('#monitor' + this.id + ' .stream-info-mode');
+    const statusEl = document.querySelector('#monitor' + this.id + ' .stream-info-status');
+    if (modeEl) modeEl.innerText = info;
+    if (statusEl) statusEl.innerText = '';
+  };
+
   /*
   * streamChannel = 0 || Primary; 1 || Secondary.
   */
@@ -395,6 +402,7 @@ function MonitorStream(monitorData) {
       this.started = true;
       this.streamListenerBind();
       this.activePlayer = 'janus';
+      this.updateStreamInfo('Janus');
       return;
     }
 
@@ -458,6 +466,7 @@ function MonitorStream(monitorData) {
         this.started = true;
         this.streamListenerBind();
         $j('#volumeControls').show();
+        this.updateStreamInfo('RTSP2Web ' + this.RTSP2WebType);
         return;
       } else {
         console.log("ZM_RTSP2WEB_PATH is empty. Go to Options->System and set ZM_RTSP2WEB_PATH accordingly.");
@@ -502,6 +511,7 @@ function MonitorStream(monitorData) {
     this.started = true;
     this.streamListenerBind();
     this.activePlayer = 'zms';
+    this.updateStreamInfo('MJPEG');
   }; // this.start
 
   this.stop = function() {

web/js/video-stream.js

@@ -6,15 +6,25 @@ import {VideoRTC} from './video-rtc.js';
  */
 class VideoStream extends VideoRTC {
     set divMode(value) {
-        this.querySelector('.mode').innerText = value;
-        this.querySelector('.status').innerText = '';
+        const modeEl = this.closest('[id ^= "monitor"]').querySelector('.stream-info-mode');
+        const statusEl = this.closest('[id ^= "monitor"]').querySelector('.stream-info-status');
+        if (modeEl) modeEl.innerText = 'Go2RTC ' + value;
+        if (statusEl) statusEl.innerText = '';
+        this.setAttribute('current-mode', value.toUpperCase());
+        this.currentMode = value.toUpperCase();
     }
 
     set divError(value) {
-        const state = this.querySelector('.mode').innerText;
-        if (state !== 'loading') return;
-        this.querySelector('.mode').innerText = 'error';
-        this.querySelector('.status').innerText = value;
+        const modeEl = this.closest('[id ^= "monitor"]').querySelector('.stream-info-mode');
+        const statusEl = this.closest('[id ^= "monitor"]').querySelector('.stream-info-status');
+        if (modeEl) {
+          const state = modeEl.innerText;
+          if (state !== 'Go2RTC loading') return;
+          modeEl.innerText = 'Go2RTC ' + 'error';
+        }
+        if (statusEl) statusEl.innerText = 'Go2RTC ' + value;
+        this.setAttribute('current-mode', 'ERROR');
+        this.currentMode = 'ERROR';
     }
 
     /**
@@ -23,32 +33,6 @@ class VideoStream extends VideoRTC {
     oninit() {
         console.debug('stream.oninit');
         super.oninit();
-
-        this.innerHTML = `
-        <style>
-        video-stream {
-            position: relative;
-        }
-        .info {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            padding: 12px;
-            color: white;
-            display: flex;
-            justify-content: space-between;
-            pointer-events: none;
-        }
-        </style>
-        <div class="info">
-            <div class="status"></div>
-            <div class="mode"></div>
-        </div>
-        `;
-
-        const info = this.querySelector('.info');
-        this.insertBefore(this.video, info);
     }
 
     onconnect() {

web/skins/classic/css/base/skin.css

@@ -1349,6 +1349,30 @@ button.btn.btn-view-watch:hover {
 }
 /* --- Style for <input> --- */
 
+video-stream {
+  position: relative;
+}
+.stream-info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.stream-info-status:empty, .stream-info-mode:empty {
+  padding:0;
+}
+
+.stream-info-status, .stream-info-mode {
+  background-color: rgba(0,0,0,0.3);
+  color: #dddddd;
+  padding: 0.3em;
+}
+
 /* +++ This block should always be located at the end! */
 .hidden {
     display: none;