Feat: Added <select> to control enabling players on Monitor page

web/includes/Monitor.php

@@ -230,6 +230,7 @@ public static function getRTSP2WebStreamOptions() {
     'DefaultPlayer' => '',
     'RTSP2WebStream'   => 'Primary',
     'Go2RTCEnabled'   => array('type'=>'integer','default'=>0),
+    //'ZMSEnabled'   => array('type'=>'integer','default'=>1),
     'JanusEnabled'   => array('type'=>'boolean','default'=>0),
     'JanusAudioEnabled'   => array('type'=>'boolean','default'=>0),
     'Janus_Profile_Override'   => '',

web/includes/actions/monitor.php

@@ -98,6 +98,7 @@
       'Enabled' => 0,
       'Deleted' => 0,
       'DecodingEnabled' => 0,
+      'ZMSEnabled' => 0,
       'RTSP2WebEnabled' => 0,
       'Go2RTCEnabled' => 0,
       'JanusEnabled' => 0,

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

@@ -1261,22 +1261,29 @@ button.btn.btn-view-watch:hover {
     --d-t: 0.6s;
     --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
   }
-  input[type='checkbox']:disabled, input[type='radio']:disabled {
+  input[type='checkbox'].disabled:not(.input-switch):after {
+    border-color: var(--active);
+  }
+  input[type='checkbox']:disabled, input[type='radio']:disabled,
+  input[type='checkbox'].disabled, input[type='radio'].disabled {
     --b: var(--disabled);
     cursor: not-allowed;
     opacity: 0.9;
   }
-  input[type='checkbox']:disabled:checked, input[type='radio']:disabled:checked {
+  input[type='checkbox']:disabled:checked, input[type='radio']:disabled:checked,
+  input[type='checkbox'].disabled:checked, input[type='radio'].disabled:checked {
     --b: var(--disabled-inner);
     --bc: var(--border);
   }
-  input[type='checkbox']:disabled + label, input[type='radio']:disabled + label {
+  input[type='checkbox']:disabled + label, input[type='radio']:disabled + label,
+  input[type='checkbox'].disabled + label, input[type='radio'].disabled + label {
     cursor: not-allowed;
   }
-  input[type='checkbox']:hover:not(:checked):not(:disabled), input[type='radio']:hover:not(:checked):not(:disabled) {
+  input[type='checkbox']:hover:not(:checked):not(:disabled), input[type='radio']:hover:not(:checked):not(:disabled),
+  input[type='checkbox']:hover:not(:checked):not(.disabled), input[type='radio']:hover:not(:checked):not(.disabled) {
     --bc: var(--border-hover);
   }
-  input[type='checkbox']:focus, input[type='radio']:focus {
+  input[type='checkbox']:not(.disabled):focus, input[type='radio']:not(.disabled):focus {
     box-shadow: 0 0 0 var(--focus);
   }
   input[type='checkbox']:not(.input-switch), input[type='radio']:not(.input-switch) {
@@ -1332,7 +1339,8 @@ button.btn.btn-view-watch:hover {
     --ab: var(--active-inner);
     --x: 17px;
   }
-  input[type='checkbox'].input-switch:disabled:not(:checked):after {
+  input[type='checkbox'].input-switch:disabled:not(:checked):after,
+  input[type='checkbox'].input-switch.disabled:not(:checked):after {
     opacity: 0.6;
   }
   input[type='radio'] {

web/skins/classic/js/skin.js

@@ -2122,6 +2122,13 @@ function initPageGeneral() {
       }
     });
   });
+
+  document.querySelectorAll('input.disabled').forEach(function(el) {
+    el.addEventListener("click", function clickInputDisabled(event) {
+      event.preventDefault();
+      return;
+    });
+  });
 }
 
 $j( window ).on("load", initPageGeneral);

web/skins/classic/views/js/monitor.js

@@ -471,6 +471,7 @@ function initPage() {
   if (!isMobile()) initThumbAnimation();
 
   manageChannelStream();
+  disableCheckboxesPlayerSelection();
 } // end function initPage()
 
 function saveMonitorData(href = '') {
@@ -840,4 +841,90 @@ function ControlList_onClick() {
   window.location = '?view=options&tab=control';
 }
 
+function selectPlayersSetZMS(select) {
+  for (var i = 0; i < select.length; i++) {
+    var option_ = select.options[i];
+    if (option_.value == 'zms') {
+      option_.selected = true;
+      break;
+    }
+  }
+  selectPlayersChangeCheckBox('zms', 'set');
+}
+
+function disableCheckboxesPlayerSelection() {
+  // Now all control is via multi selector #SelectPlayers
+  let checkBox;
+  checkBox = document.querySelector('input[name="newMonitor[ZMSEnabled]"]');
+  if (checkBox) checkBox.classList.add('disabled');
+
+  checkBox = document.querySelector('input[name="newMonitor[Go2RTCEnabled]"]');
+  if (checkBox) checkBox.classList.add('disabled');
+
+  checkBox = document.querySelector('input[name="newMonitor[RTSP2WebEnabled]"]');
+  if (checkBox) checkBox.classList.add('disabled');
+
+  checkBox = document.querySelector('input[name="newMonitor[JanusEnabled]"]');
+  if (checkBox) checkBox.classList.add('disabled');
+
+  const sel = document.querySelector('select[name="SelectPlayers"]');
+  if (sel) sel.noneExists = sel.getAttribute('none-exists');
+}
+
+function selectPlayersChangeCheckBox(selectedPlayer, action) {
+  let checkBox;
+  if (selectedPlayer == 'zms') {
+    checkBox = document.querySelector('input[name="newMonitor[ZMSEnabled]"]');
+  } else if (selectedPlayer == 'go2rtc') {
+    checkBox = document.querySelector('input[name="newMonitor[Go2RTCEnabled]"]');
+  } else if (selectedPlayer == 'rtsp2web') {
+    checkBox = document.querySelector('input[name="newMonitor[RTSP2WebEnabled]"]');
+  } else if (selectedPlayer == 'janus') {
+    checkBox = document.querySelector('input[name="newMonitor[JanusEnabled]"]');
+  }
+  if (checkBox) {
+    checkBox.checked = (action == 'set') ? true : false;
+    // Need to call the "change" event trigger
+    const event = new Event("change");
+    checkBox.dispatchEvent(event);
+  }
+}
+
+function selectPlayers(e) {
+  var select = e.target;
+  var count = 0;
+  for (var i = 0; i < select.length; i++) {
+    var option = select.options[i];
+    if (option.selected) {
+      count++;
+      if (option.value == 'none') {
+        if (select.noneExists) { //Previously 'none' was already added, and now we are changing something
+          select.noneExists = false;
+          option.selected = false;
+          selectPlayersSetZMS(select);
+        } else { //Adding for the first time
+          select.noneExists = true;
+          for (var i = 0; i < select.length; i++) {
+            var option_ = select.options[i];
+            if (option_.value != 'none') {
+              option_.selected = false;
+              selectPlayersChangeCheckBox(option_.value, 'remove');
+              //option_.removeAttribute('selected');
+            }
+          }
+        }
+      } else { //Let's set a checkbox for the corresponding player
+        selectPlayersChangeCheckBox(option.value, 'set');
+      }
+    } else { //Let's reset the checkbox for the corresponding player
+      selectPlayersChangeCheckBox(option.value, 'remove');
+    }
+  }
+  if (count === 0) {
+    select.noneExists = false;
+    selectPlayersSetZMS(select);
+  }
+  applyChosen();
+}
+
 window.addEventListener('DOMContentLoaded', initPage);

web/skins/classic/views/monitor.php

@@ -1236,6 +1236,25 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
       break;
     }
   case 'viewing' :
+    $selectPlayers = array(
+      'go2rtc' => 'Go2RTC',
+      'rtsp2web' => 'RTSP2Web',
+      'janus' => 'Janus',
+      'zms' => ['Name' => 'ZMS MJPEG', 'disabled' => 'disabled'],
+      //'none' => 'None',
+    );
+    $selectedPlayers = ['zms'];
+    //$selectedPlayers = [];
+    $noneExists = false;
+    //if ((!$monitor->ZMSEnabled()) && (!$monitor->Go2RTCEnabled()) && (!$monitor->RTSP2WebEnabled()) && (!$monitor->JanusEnabled())) {
+      //$selectedPlayers[] = 'none';
+      //$noneExists = true;
+    //} else {
+      //if ($monitor->ZMSEnabled()) $selectedPlayers[] = 'zms';
+      if ($monitor->Go2RTCEnabled()) $selectedPlayers[] = 'go2rtc';
+      if ($monitor->RTSP2WebEnabled()) $selectedPlayers[] = 'rtsp2web';
+      if ($monitor->JanusEnabled()) $selectedPlayers[] = 'janus';
+    //}
 ?>
             <li class="RTSPServer">
               <label><?php echo translate('RTSPServer'); echo makeHelpLink('OPTIONS_RTSPSERVER') ?></label>
@@ -1245,6 +1264,14 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
               <label><?php echo translate('RTSPStreamName'); echo makeHelpLink('OPTIONS_RTSPSTREAMNAME') ?></label>
               <input type="text" name="newMonitor[RTSPStreamName]" value="<?php echo validHtmlStr($monitor->RTSPStreamName()) ?>"/>
             </li>
+            <li id="SelectPlayers" class="SelectPlayers">
+              <label><?php echo translate('Select players'); echo makeHelpLink('OPTIONS_SELECTPLAYERS') ?> </label>
+              <?php echo htmlSelect('SelectPlayers', $selectPlayers, $selectedPlayers, ['class'=>'chosen chosen-full-width', 'multiple'=>'', 'data-on-change'=>'selectPlayers', 'none-exists'=>$noneExists]); ?>
+            </li>
+            <!--<li id="FunctionZMSEnabled" class='hidden-shift'>
+              <label><?php //echo translate('ZMS MJPEG') ?></label>
+              <input type="checkbox" name="newMonitor[ZMSEnabled]" value="1"<?php //echo $monitor->ZMSEnabled() ? ' checked="checked"' : '' ?> class="hidden-shift0"/>
+            </li>-->
             <li id="FunctionGo2RTCEnabled">
               <label><?php echo translate('Go2RTC Live Stream') ?></label>
               <input type="checkbox" name="newMonitor[Go2RTCEnabled]" value="1"<?php echo $monitor->Go2RTCEnabled() ? ' checked="checked"' : '' ?> on_click="update_players"/>