Add "Mark" button to quickly label a video

Add button and Keyboard command in LiveGrid. Press "Enter" in liveGrid to trigger all monitors that are in view.

definitions/base.js

@@ -7449,6 +7449,7 @@ module.exports = function(s,config,lang){
            streamBlockHudControlsHtml: `<span title="${lang['Currently viewing']}" class="label label-default">
                 <span class="viewers"></span>
            </span>
+           <a class="btn btn-sm badge btn-primary run-monitor-detection-trigger-marker">${lang['Add Marker']}</a>
            <a class="btn btn-sm badge btn-warning run-monitor-detection-trigger-test">${lang['Test Object Event']}</a>
            <a class="btn btn-sm badge btn-warning run-monitor-detection-trigger-test-motion">${lang['Test Motion Event']}</a>
            `,

languages/en_CA.json

@@ -748,6 +748,7 @@
    "Rotate": "Rotate",
    "Trigger Event": "Trigger Event",
    "Test": "Test",
+   "Add Marker": "Add Marker",
    "Test Object Event": "Test Object Event",
    "Test Motion Event": "Test Motion Event",
    "Primary Engine": "Primary Engine",

web/assets/js/bs5.liveGrid.js

@@ -963,6 +963,30 @@ function openAllLiveGridPlayers(){
         openLiveGrid()
     })
 }
+function addMarkAsEvent(monitorId){
+    runTestDetectionTrigger(monitorId,{
+        "name":"Marker",
+        "reason":"marker",
+        "matrices": [
+            {
+                x: 0,
+                y: 0,
+                width: 1,
+                height: 1,
+                tag: 'Marked',
+                confidence: 100,
+            }
+        ]
+    });
+}
+function addMarkAsEventToAllOpenMonitors(){
+    $.each(loadedMonitors,function(n,monitor){
+        var monitorId = monitor.mid
+        if(liveGridPlayingNow[monitorId]){
+            addMarkAsEvent(monitorId)
+        }
+    })
+}
 $(document).ready(function(e){
     liveGrid
     .on('dblclick','.stream-block',function(){
@@ -1086,6 +1110,11 @@ $(document).ready(function(e){
         var monitorId = el.parents('[data-mid]').attr('data-mid')
         runTestDetectionTrigger(monitorId)
     })
+    .on('click','.run-monitor-detection-trigger-marker',function(){
+        var el = $(this)
+        var monitorId = el.parents('[data-mid]').attr('data-mid')
+        addMarkAsEvent(monitorId)
+    })
     .on('click','.run-monitor-detection-trigger-test-motion',function(){
         var el = $(this)
         var monitorId = el.parents('[data-mid]').attr('data-mid')

web/assets/js/bs5.liveGrid.keyboard.js

@@ -0,0 +1,41 @@
+function keyShortcutsForLiveGridUtils(enable) {
+    function cleanup(){
+        document.removeEventListener('keydown', keyShortcuts['liveGridUtils'].keydown);
+        document.removeEventListener('keyup', keyShortcuts['liveGridUtils'].keyup);
+        delete(keyShortcuts['liveGridUtils'])
+    }
+    if(enable){
+        let isKeyPressed = false;
+        function handleKeyboard(event){
+            if (isKeyPressed) {
+                return;
+            }
+            event.preventDefault();
+            switch(event.code){
+                case 'Enter':
+                    addMarkAsEventToAllOpenMonitors()
+                break;
+            }
+        }
+        function handleKeyup(event) {
+            isKeyPressed = false;
+        }
+        keyShortcuts['liveGridUtils'] = {
+            keydown: handleKeyboard,
+            keyup: handleKeyup,
+        }
+        document.addEventListener('keydown', keyShortcuts['liveGridUtils'].keydown);
+        document.addEventListener('keyup', keyShortcuts['liveGridUtils'].keyup);
+    }else{
+        cleanup()
+    }
+}
+addOnTabOpen('liveGrid', function () {
+    keyShortcutsForLiveGridUtils(true)
+})
+addOnTabReopen('liveGrid', function () {
+    keyShortcutsForLiveGridUtils(true)
+})
+addOnTabAway('liveGrid', function () {
+    keyShortcutsForLiveGridUtils(false)
+})

web/pages/blocks/footer.ejs

@@ -33,6 +33,7 @@
 <script src="<%-window.libURL%>assets/js/bs5.schedules.js"></script>
 <script src="<%-window.libURL%>assets/js/bs5.liveGrid.js"></script>
 <script src="<%-window.libURL%>assets/js/bs5.liveGrid.cycle.js"></script>
+<script src="<%-window.libURL%>assets/js/bs5.liveGrid.keyboard.js"></script>
 <script src="<%-window.libURL%>assets/js/bs5.regionEditor.js"></script>
 <script src="<%-window.libURL%>assets/js/bs5.timelapseViewer.js"></script>
 <script src="<%-window.libURL%>assets/js/bs5.eventFilters.js"></script>