Add Open Next dropdown for WallView

languages/en_CA.json

@@ -235,6 +235,7 @@
    "Hide List": "Hide List",
    "Motion GUI": "Motion GUI",
    "Motion": "Motion",
+   "Open Next": "Open Next",
    "Over by": "Over by",
    "Under by": "Under by",
    "Global Detector Settings": "Global Detector Settings",

web/assets/css/bs5.wallview.css

@@ -16,8 +16,8 @@
 
 #wallview-controls{
     position: absolute;
-    width: 100%;
     top: 0;
+    right: 0;
     padding: 5px;
     opacity: 0;
     transition: 0.2s;

web/assets/js/bs5.wallview.js

@@ -1,6 +1,5 @@
 var loadedMonitors = {}
 var selectedMonitors = {}
-var selectedMonitorsCount = 0
 $(document).ready(function(){
     PNotify.prototype.options.styling = "fontawesome";
     var wallViewMonitorList = $('#wallview-monitorList')
@@ -76,7 +75,6 @@ $(document).ready(function(){
         if(numberOfSelected > 3 && !featureIsActivated(true)){
             return
         }
-        ++selectedMonitorsCount
         selectedMonitors[monitorId] = Object.assign({}, loadedMonitors[monitorId]);
         wallViewCanvas.append(`<div class="wallview-video p-0 m-0" live-stream="${monitorId}" style="left:${css.left || 0}px;top:${css.top || 0}px;width:${css.width ? css.width + 'px' : '50vw'};height:${css.height ? css.height + 'px' : '50vh'};"><div class="overlay"><div class="wallview-item-controls text-end"><a class="btn btn-sm btn-outline-danger wallview-item-close"><i class="fa fa-times"></i></a></div></div><iframe src="${getApiPrefix('embed')}/${monitorId}/fullscreen%7Cjquery%7Crelative?host=${embedHost}"></iframe></div>`)
         wallViewCanvas.find(`[live-stream="${monitorId}"]`)
@@ -98,7 +96,6 @@ $(document).ready(function(){
         getMonitorListItem(monitorId).addClass('active')
     }
     function deselectMonitor(monitorId){
-        --selectedMonitorsCount
         delete(selectedMonitors[monitorId])
         var monitorItem = wallViewCanvas.find(`[live-stream="${monitorId}"]`);
         monitorItem.find('iframe').attr('src','about:blank')
@@ -171,7 +168,7 @@ $(document).ready(function(){
     }
 
     function displayInfoScreen(){
-        if(selectedMonitorsCount === 0){
+        if(getCurrentLayout().length === 0){
             wallViewInfoScreen.css('display','flex')
         }else{
             wallViewInfoScreen.hide()
@@ -239,13 +236,38 @@ $(document).ready(function(){
 
     function openAllMonitors(){
         $.each(loadedMonitors,function(monitorId, monitor){
-            selectMonitor(monitorId)
+            var modeAccepted = monitor.mode !== 'stop' && monitor.mode !== 'idle'
+            if(modeAccepted)selectMonitor(monitorId)
         })
         autoPlaceCurrentMonitorItems()
         displayInfoScreen()
         saveLayout()
     }
 
+    function openNextMonitors(numberOf){
+        var allLayouts = getAllLayouts()
+        var ignoreMonitors = []
+        var availableMonitors = []
+        var numberToOpen = parseInt(numberOf) || 4;
+        $.each(allLayouts,function(windowName, { layout }){
+            $.each(layout,function(n, { monitorId }){
+                ignoreMonitors.push(monitorId)
+            })
+        });
+        $.each(loadedMonitors,function(monitorId, monitor){
+            if(ignoreMonitors.indexOf(monitor.mid) === -1){
+                var modeAccepted = monitor.mode !== 'stop' && monitor.mode !== 'idle'
+                if(modeAccepted)availableMonitors.push(monitorId)
+            }
+        });
+        for (let i = 0; i < numberToOpen; i++) {
+            selectMonitor(availableMonitors[i])
+        }
+        autoPlaceCurrentMonitorItems()
+        displayInfoScreen()
+        saveLayout()
+    }
+
     function closeAllMonitors(){
         $.each(loadedMonitors,function(monitorId, monitor){
             deselectMonitor(monitorId)
@@ -301,6 +323,11 @@ $(document).ready(function(){
         e.preventDefault()
         openAllMonitors()
     })
+    .on('click', '.wallview-open-next', function(e){
+        e.preventDefault()
+        var numberOf = $(this).attr('number-of')
+        openNextMonitors(numberOf)
+    })
     .on('click', '.wallview-close-all', function(e){
         e.preventDefault()
         closeAllMonitors()

web/pages/wallview.ejs

@@ -63,6 +63,16 @@
         <a class="btn btn-danger wallview-close-all" href="#"><%- lang['Close All'] %></a>
         <a class="btn btn-success wallview-autoplace" href="#"><%- lang['Auto Placement'] %></a>
         <a class="btn btn-primary open-wallview" href="#"><%- lang['New Wall Display'] %></a>
+        <div class="dropdown d-inline-block">
+          <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="monitorListButton2" data-bs-toggle="dropdown" aria-expanded="false">
+            <%- lang['Open Next'] %>
+          </a>
+          <ul class="dropdown-menu text-center pb-0" aria-labelledby="monitorListButton2">
+              <% [2,4,6,9,12,16,32].forEach((numberOf) => { %>
+                  <a class="btn btn-primary mb-2 wallview-open-next" number-of="<%- numberOf %>" href="#"><%- numberOf %></a>
+              <% }) %>
+          </ul>
+        </div>
         <div class="dropdown d-inline-block">
           <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="monitorListButton" data-bs-toggle="dropdown" aria-expanded="false">
             <%- lang.Monitors %>