make Live Grid remember logs open, clean up Live Grid html and css

definitions/base.js

@@ -7447,12 +7447,6 @@ module.exports = function(s,config,lang){
                   </div>
                    <div><span class="monitor_name">$MONITOR_NAME</span></div>
                </div>
-           </div>
-           <div class="mdl-data_window pull-right">
-               <div class="d-flex flex-row" style="height: 100%;">
-                   <div class="data-menu col-md-6 p-2 videos-mini scrollable"></div>
-                   <div class="data-menu col-md-6 p-2 logs scrollable"></div>
-               </div>
            </div>`,
            quickLinks: {
                "Options": {

web/assets/js/bs5.liveGrid.js

@@ -160,6 +160,7 @@ function buildLiveGridBlock(monitor){
     var streamType = subStreamChannel ? monitorDetails.substream ? monitorDetails.substream.output.stream_type : 'hls' : monitorDetails.stream_type
     var streamElement = buildStreamElementHtml(streamType)
     var streamBlockInfo = definitions['Monitor Stream Window']
+    var wasLiveGridLogStreamOpenBefore = isLiveGridLogStreamOpenBefore(monitorId)
     if(!loadedLiveGrids[monitor.mid])loadedLiveGrids[monitor.mid] = {}
     var quickLinkHtml = ''
     $.each(streamBlockInfo.quickLinks,function(n,button){
@@ -171,9 +172,10 @@ function buildLiveGridBlock(monitor){
         data-ke="${monitor.ke}"
         data-mid="${monitor.mid}"
         data-mode="${monitor.mode}"
-        class="monitor_item glM${monitor.mid} ${streamBlockInfo.gridBlockClass || ''}"
+        class="monitor_item ${wasLiveGridLogStreamOpenBefore ? 'show_data' : ''} glM${monitor.mid} ${streamBlockInfo.gridBlockClass || ''}"
     >
-        <div class="stream-block no-padding mdl-card__media mdl-color-text--grey-50">
+        <div style="height:100%" class="d-flex">
+            <div class="stream-block no-padding mdl-card__media mdl-color-text--grey-50 ${wasLiveGridLogStreamOpenBefore ? 'col-md-6' : 'col-md-12'}">
                 ${streamBlockInfo.streamBlockPreHtml || ''}
                 <div class="stream-objects"></div>
                 <div class="stream-hud">
@@ -184,6 +186,13 @@ function buildLiveGridBlock(monitor){
                 </div>
                 ${streamElement}
             </div>
+            <div class="mdl-data_window ${wasLiveGridLogStreamOpenBefore ? 'col-md-6' : 'col-md-12'}">
+                <div class="d-flex flex-row" style="height: 100%;">
+                    <div class="data-menu col-md-6 p-2 videos-mini scrollable"></div>
+                    <div class="data-menu col-md-6 p-2 logs scrollable"></div>
+                </div>
+            </div>
+        </div>
         ${(streamBlockInfo.gridBlockAfterContentHtml || '').replace(`$QUICKLINKS`,quickLinkHtml)}
         <div class="mdl-overlay-menu-backdrop hidden">
             <ul class="mdl-overlay-menu list-group">`
@@ -260,6 +269,15 @@ function updateAllLiveGridElementsHeightWidth(monitorId){
         updateLiveGridElementHeightWidth(monitorId)
     })
 }
+function setLiveGridLogStreamOpenStatus(monitorId,toggleOn){
+    var liveGridLogStreams = dashboardOptions().liveGridLogStreams || {}
+    liveGridLogStreams[monitorId] = toggleOn ? true : false
+    dashboardOptions('liveGridLogStreams',liveGridLogStreams)
+}
+function isLiveGridLogStreamOpenBefore(monitorId){
+    var liveGridLogStreams = dashboardOptions().liveGridLogStreams || {}
+    return liveGridLogStreams[monitorId]
+}
 function drawLiveGridBlock(monitorConfig,subStreamChannel){
     var monitorId = monitorConfig.mid
     if($('#monitor_live_' + monitorId).length === 0){
@@ -271,6 +289,7 @@ function drawLiveGridBlock(monitorConfig,subStreamChannel){
         var isSmallMobile = isMobile || window.innerWidth <= 812;
         var html = buildLiveGridBlock(monitorConfig)
         var monitorOrderEngaged = dashboardOptions().switches.monitorOrder === 1;
+        var wasLiveGridLogStreamOpenBefore = isLiveGridLogStreamOpenBefore(monitorId)
         if(monitorOrderEngaged && $user.details.monitorOrder && $user.details.monitorOrder[monitorConfig.ke+''+monitorId]){
             var saved = $user.details.monitorOrder[monitorConfig.ke+''+monitorId];
             x = saved.x;
@@ -312,6 +331,9 @@ function drawLiveGridBlock(monitorConfig,subStreamChannel){
     }
     initiateLiveGridPlayer(loadedMonitors[monitorId],subStreamChannel)
     attachVideoElementErrorHandler(monitorId)
+    if(wasLiveGridLogStreamOpenBefore){
+        loadVideoMiniList(monitorId)
+    }
 }
 function initiateLiveGridPlayer(monitor,subStreamChannel){
     var livePlayerElement = loadedLiveGrids[monitor.mid]
@@ -904,12 +926,14 @@ $(document).ready(function(e){
         var monitorId = monitorItem.attr('data-mid')
         monitorItem.toggleClass('show_data')
         var dataBlocks = monitorItem.find('.stream-block,.mdl-data_window')
-        if(monitorItem.hasClass('show_data')){
+        var openMonitorLogs = monitorItem.hasClass('show_data')
+        if(openMonitorLogs){
             loadVideoMiniList(monitorId)
             dataBlocks.addClass('col-md-6').removeClass('col-md-12')
         }else{
             dataBlocks.addClass('col-md-12').removeClass('col-md-6')
         }
+        setLiveGridLogStreamOpenStatus(monitorId,openMonitorLogs)
     })
     .on('click','.toggle-live-grid-monitor-ptz-controls',function(){
         var monitorItem = $(this).parents('[data-mid]').attr('data-mid')

web/assets/js/bs5.videos.js

@@ -263,7 +263,13 @@ function getPercentOfTimePositionFromVideo(video,theEvent){
     return percentChanged
 }
 function createVideoRow(row,classOverride){
+    var objectTagsHtml = ``
     var eventMatrixHtml = ``
+    if(row.objects && row.objects.length > 0){
+        $.each(row.objects.split(','),function(n,objectTag){
+            eventMatrixHtml += `<span class="badge badge-primary badge-sm">${objectTag}</span>`
+        })
+    }
     if(row.events && row.events.length > 0){
         $.each(row.events,function(n,theEvent){
             var leftPercent = getPercentOfTimePositionFromVideo(row,theEvent)
@@ -274,32 +280,29 @@ function createVideoRow(row,classOverride){
     return `
     <div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row" data-mid="${row.mid}" data-time="${row.time}" data-time-formed="${new Date(row.time)}">
         <div class="video-time-card shadow-lg px-0 btn-default">
-            <div class="card-header d-flex flex-row">
+            <div class="card-header">
-                <div class="flex-grow-1 ${definitions.Theme.isDark ? 'text-white' : ''}">
+                <div class="${definitions.Theme.isDark ? 'text-white' : ''}">
-                    ${loadedMonitors[row.mid] ? loadedMonitors[row.mid].name : row.mid}
+                    ${moment(row.time).fromNow()}
                 </div>
-                <div>
+                <small class="text-muted">~${durationBetweenTimes(row.time,row.end)} ${lang.Minutes}</small>
-                    <a class="badge btn btn-primary open-video mr-1" title="${lang['Watch']}"><i class="fa fa-play-circle"></i></a>
+            </div>
+            <div class="card-body">
+                <div class="mb-2">
+                    <a class="badge btn btn-primary open-video" title="${lang['Watch']}"><i class="fa fa-play-circle"></i></a>
                     <a class="badge btn btn-success" download href="${videoEndpoint}" title="${lang['Download']}"><i class="fa fa-download"></i></a>
                     <a class="badge btn btn-danger delete-video" title="${lang['Delete']}"><i class="fa fa-trash-o"></i></a>
                 </div>
-            </div>
+                <div title="${row.time}" class="border-bottom-dotted border-bottom-dark mb-2">
-            <div class="video-time-img">
-                <div class="card-body">
-                    <div title="${row.time}" class="d-flex flex-row">
-                        <div class="flex-grow-1">
-                            ${moment(row.time).fromNow()}
-                        </div>
-                        <div>
-                            <small class="text-muted">~${durationBetweenTimes(row.time,row.end)} ${lang.Minutes}</small>
-                        </div>
-                    </div>
-                    <div title="${row.time}" class="d-flex flex-row border-bottom-dotted border-bottom-dark mb-2">
                     <div>
                         <div title="${row.time}"><small class="text-muted">${lang.Started} : ${formattedTime(row.time,true)}</small></div>
                         <div title="${row.end}"><small class="text-muted">${lang.Ended} : ${formattedTime(row.end,true)}</small></div>
                     </div>
+                    <small>
+                        ${loadedMonitors[row.mid] ? loadedMonitors[row.mid].name : row.mid}
+                    </small>
                 </div>
+                <div class="mb-2">
+                    ${objectTagsHtml}
                 </div>
             </div>
             <div class="video-time-strip card-footer p-0">