Add uiVisibilityConditions for niche field visibility requirements

+ fixes the missing settings for Stream Types that require encoding but did not swap the Video Codec when it was visible before selecting.

definitions/base.js

@@ -977,8 +977,7 @@ module.exports = function(s,config,lang){
                       "description": lang["fieldTextStreamQuality"],
                       "default": "15",
                       "example": "1",
-                      "form-group-class-pre-layer": "h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no",
-                      "form-group-class": "h_st_input h_st_mjpeg h_st_b64 h_st_hls h_st_gif h_st_flv h_st_mp4",
+                      uiVisibilityConditions: 'streamSectionCopyModeVisibilities',
                       "possible": "1-23"
                    },
                    {
@@ -987,8 +986,7 @@ module.exports = function(s,config,lang){
                       "description": lang["fieldTextStreamFps"],
                       "default": "",
                       "example": "1",
-                      "form-group-class-pre-layer": "h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no",
-                      "form-group-class": "h_st_input h_st_mjpeg h_st_b64 h_st_hls h_st_gif h_st_flv h_st_mp4",
+                      uiVisibilityConditions: 'streamSectionCopyModeVisibilities',
                       "possible": ""
                    },
                    {
@@ -999,8 +997,7 @@ module.exports = function(s,config,lang){
                       "fieldType": "number",
                       "numberMin": "1",
                       "example": "640",
-                      "form-group-class-pre-layer": "h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no",
-                      "form-group-class": "h_st_input h_st_mjpeg h_st_b64 h_st_hls h_st_gif h_st_flv h_st_mp4",
+                      uiVisibilityConditions: 'streamSectionCopyModeVisibilities',
                       "possible": ""
                    },
                    {
@@ -1011,8 +1008,7 @@ module.exports = function(s,config,lang){
                       "fieldType": "number",
                       "numberMin": "1",
                       "example": "480",
-                      "form-group-class-pre-layer": "h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no",
-                      "form-group-class": "h_st_input h_st_mjpeg h_st_b64 h_st_hls h_st_gif h_st_flv h_st_mp4",
+                      uiVisibilityConditions: 'streamSectionCopyModeVisibilities',
                       "possible": ""
                    },
                    {
@@ -1022,8 +1018,7 @@ module.exports = function(s,config,lang){
                       "default": "",
                       "example": "",
                       "fieldType": "select",
-                      "form-group-class-pre-layer": "h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no",
-                      "form-group-class": "h_st_input h_st_mjpeg h_st_b64 h_st_hls h_st_gif h_st_flv h_st_mp4",
+                      uiVisibilityConditions: 'streamSectionCopyModeVisibilities',
                       "possible": [
                            {
                               "name": lang["No Rotation"],
@@ -1086,8 +1081,7 @@ module.exports = function(s,config,lang){
                       "description": lang["fieldTextStreamVf"],
                       "default": "",
                       "example": "",
-                      "form-group-class-pre-layer": "h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no",
-                      "form-group-class": "h_st_input h_st_mjpeg h_st_b64 h_st_hls h_st_gif h_st_flv h_st_mp4",
+                      uiVisibilityConditions: 'streamSectionCopyModeVisibilities',
                       "possible": ""
                    },
                    {
@@ -1298,13 +1292,13 @@ module.exports = function(s,config,lang){
             "Substream": {
                "name": lang['Substream'],
                "color": "blue",
-               isAdvanced: true,
                "isSection": true,
                "id": "monSectionSubstream",
                "blockquote": lang.substreamText,
                "blockquoteClass": 'global_tip',
                "info": [
                    {
+                       isAdvanced: true,
                        "name": lang['Connection'],
                        "color": "orange",
                        id: "monSectionSubstreamInput",

web/assets/js/bs5.monitorSettings.js

@@ -436,12 +436,12 @@ function getAdditionalStreamChannelFields(tempID,channelId){
 }
 
 addOnTabOpen('monitorSettings', function () {
-    triggerSecondaryHideCheckOnAll()
+    setFieldVisibility()
     drawMonitorSettingsSubMenu()
 })
 
 addOnTabReopen('monitorSettings', function () {
-    triggerSecondaryHideCheckOnAll()
+    setFieldVisibility()
     drawMonitorSettingsSubMenu()
 })
 function drawInputMapHtml(options){
@@ -674,7 +674,7 @@ function importIntoMonitorEditor(options){
         }
     })
     monitorsForCopy.find('optgroup').html(tmp)
-    triggerSecondaryHideCheckOnAll()
+    setFieldVisibility()
     drawMonitorSettingsSubMenu()
 }
 //parse "Automatic" field in "Input" Section
@@ -896,27 +896,65 @@ var showInputMappingFields = function(showMaps){
     }else{
         el.hide()
     }
-    triggerSecondaryHideCheckOnAll()
+    setFieldVisibility()
     drawMonitorSettingsSubMenu()
 }
-var triggerSecondaryHideCheck = function(el){
-    var key = el.attr('selector')
-    var value = el.val();
-    var triggerChange = el.attr('triggerchange')
-    var triggerChangeIgnore = el.attr('triggerChangeIgnore')
-    editorForm.find('.' + key + '_input').hide()
-    editorForm.find('.' + key + '_' + value).show();
-    editorForm.find('.' + key + '_text').text($(this).find('option:selected').text())
-    if(triggerChange && triggerChange !== '' && !triggerChangeIgnore || (triggerChangeIgnore && triggerChangeIgnore.split(',').indexOf(value) === -1)){
-        console.log(triggerChange)
-        $(triggerChange).trigger('change')
+function setFieldVisibilityNewWay(){
+    var validation = getMonitorEditFormFields()
+    if(!validation.ok){
+        return console.log('Failed setFieldVisibilityNewWay',new Error())
+    }
+    var monitorConfig = validation.monitorConfig
+    var monitorDetails = safeJsonParse(monitorConfig.details)
+    var commonChecks = {
+        streamSectionCopyModeVisibilities: `monitorDetails.stream_vcodec === 'libx264' ||
+        monitorDetails.stream_vcodec === 'libx265' ||
+        monitorDetails.stream_vcodec === 'h264_nvenc' ||
+        monitorDetails.stream_vcodec === 'hevc_nvenc' ||
+        monitorDetails.stream_vcodec === 'no' ||
+
+        monitorDetails.stream_type === 'mjpeg' ||
+        monitorDetails.stream_type === 'b64' ||
+        ((monitorDetails.stream_type === 'hls' || monitorDetails.stream_type === 'mp4') && monitorDetails.stream_vcodec !== 'copy') ||
+        monitorDetails.stream_type === 'gif' ||
+        monitorDetails.stream_type === 'flv'`
+    }
+    editorForm.find('[visibility-conditions]').each(function(n,v){
+        var el = $(v)
+        var visibilityConditions = el.attr('visibility-conditions')
+        var response = true
+        var commonCheck = commonChecks[visibilityConditions]
+        if(commonCheck){
+            response = eval(commonCheck)
+        }else{
+            response = eval(visibilityConditions)
+        }
+        if(response){
+            el.show()
+        }else{
+            el.hide()
+        }
+    })
+}
+function setFieldVisibilityOldWay(formElement){
+    var listToShow = []
+    formElement.find('[selector]').each(function(n,v){
+        var el = $(this)
+        var keyName = el.attr('selector')
+        var value = el.val()
+        var toShow = `${keyName}_${value}`
+        listToShow.push(toShow)
+        formElement.find(`.${keyName}_input`).hide()
+    })
+    for (let i = 0; i < listToShow.length; i++) {
+        var item = listToShow[i];
+        var elements = formElement.find(`[class*="${item}"]`)
+        elements.show()
     }
 }
-var triggerSecondaryHideCheckOnAll = function(){
-    monitorEditorWindow.find('[selector]').each(function(){
-        var el = $(this);
-        triggerSecondaryHideCheck(el)
-    })
+function setFieldVisibility(){
+    setFieldVisibilityOldWay(editorForm)
+    setFieldVisibilityNewWay()
 }
 monitorStreamChannels.on('click','.delete',function(){
     $(this).parents('.stream-channel').remove()
@@ -1034,7 +1072,8 @@ editorForm.find('[detail]').change(function(){
 })
 editorForm.on('change','[selector]',function(){
     var el = $(this);
-    triggerSecondaryHideCheck(el)
+    onSelectorChange(el,editorForm)
+    setFieldVisibilityNewWay()
     drawMonitorSettingsSubMenu()
 });
 editorForm.find('[name="type"]').change(function(e){
@@ -1072,7 +1111,7 @@ editorForm.find('[name="type"]').change(function(e){
             $('.shinobi-detector_name').empty()
             $('.shinobi-detector_plug').hide()
             $('.shinobi-detector-invert').show()
-            triggerSecondaryHideCheckOnAll()
+            setFieldVisibility()
             drawMonitorSettingsSubMenu()
         }else{
             var pluginTitle = []
@@ -1088,7 +1127,7 @@ editorForm.find('[name="type"]').change(function(e){
             $('.shinobi-detector-invert').hide()
             $('.shinobi-detector_name').text(pluginTitle.join(', '))
             if(pluginNotice.length > 0)$('.shinobi-detector-msg').text(pluginNotice.join('<br>'))
-            triggerSecondaryHideCheckOnAll()
+            setFieldVisibility()
             drawMonitorSettingsSubMenu()
         }
     }

web/pages/blocks/home/fieldBuilders.ejs

@@ -294,7 +294,7 @@ drawBlock = function(monitorSettings){
                  <% }
              %>
          <% }else{ %>
-             <div <%- hidden %> class="form-group <%- field['form-group-class'] || '' %>" <%- field['form-group-attribute'] || '' %>>
+             <div <%- hidden %> <%- field.uiVisibilityConditions ? `visibility-conditions="${field.uiVisibilityConditions}"` : `` %> class="form-group <%- field['form-group-class'] || '' %>" <%- field['form-group-attribute'] || '' %>>
                  <div>
                      <label><%- field.field %></label>
                  </div>