make Live Grid remember logs open, clean up Live Grid html and css
Moe
parent
9db0b0f72d
commit
807c0c10cb
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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="flex-grow-1 ${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
${loadedMonitors[row.mid] ? loadedMonitors[row.mid].name : row.mid}
|
||||
<div class="card-header">
|
||||
<div class="${definitions.Theme.isDark ? 'text-white' : ''}">
|
||||
${moment(row.time).fromNow()}
|
||||
</div>
|
||||
<div>
|
||||
<a class="badge btn btn-primary open-video mr-1" title="${lang['Watch']}"><i class="fa fa-play-circle"></i></a>
|
||||
<small class="text-muted">~${durationBetweenTimes(row.time,row.end)} ${lang.Minutes}</small>
|
||||
</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 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 title="${row.time}" class="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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue