Add simple video viewer
Moe
parent
5fea41d053
commit
7fbb0cdfcb
|
|
@ -7520,6 +7520,11 @@ module.exports = function(s,config,lang){
|
|||
<span class="badge bg-light text-dark rounded-pill align-text-bottom cameraCount"><i class="fa fa-spinner fa-pulse"></i></span>`,
|
||||
pageOpen: 'monitorsList',
|
||||
},
|
||||
{
|
||||
icon: 'film',
|
||||
label: `${lang['Videos']}`,
|
||||
pageOpen: 'videosTableView',
|
||||
},
|
||||
{
|
||||
icon: 'map-marker',
|
||||
label: `${lang['Power Viewer']}`,
|
||||
|
|
@ -8013,5 +8018,44 @@ module.exports = function(s,config,lang){
|
|||
},
|
||||
}
|
||||
},
|
||||
"Videos Table": {
|
||||
"section": "Videos Table",
|
||||
"blocks": {
|
||||
"Search Settings": {
|
||||
"name": lang["Search Settings"],
|
||||
"color": "green",
|
||||
"section-pre-class": "col-md-4",
|
||||
"info": [
|
||||
{
|
||||
"field": lang["Monitor"],
|
||||
"fieldType": "select",
|
||||
"class": "monitors_list",
|
||||
"possible": []
|
||||
},
|
||||
{
|
||||
"class": "date_selector",
|
||||
"field": lang.Date,
|
||||
},
|
||||
{
|
||||
"fieldType": "div",
|
||||
"id": "videosTable_preview_area",
|
||||
"divContent": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"theTable": {
|
||||
noHeader: true,
|
||||
"section-pre-class": "col-md-8",
|
||||
"info": [
|
||||
{
|
||||
"fieldType": "table",
|
||||
"attribute": `data-classes="table table-striped"`,
|
||||
"id": "videosTable_draw_area",
|
||||
"divContent": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
$(document).ready(function(e){
|
||||
var theEnclosure = $('#tab-videosTableView')
|
||||
var monitorsList = theEnclosure.find('.monitors_list')
|
||||
var dateSelector = theEnclosure.find('.date_selector')
|
||||
var videosTableDrawArea = $('#videosTable_draw_area')
|
||||
var videosTablePreviewArea = $('#videosTable_preview_area')
|
||||
var loadedVideosInMemory = {};
|
||||
function openVideosTableView(monitorId,startDate,endDate){
|
||||
drawVideosTableViewElements(monitorId,startDate,endDate)
|
||||
}
|
||||
function getSelectedTime(asUtc){
|
||||
var dateRange = dateSelector.data('daterangepicker')
|
||||
var startDate = dateRange.startDate.clone()
|
||||
var endDate = dateRange.endDate.clone()
|
||||
if(asUtc){
|
||||
startDate = startDate.utc()
|
||||
endDate = endDate.utc()
|
||||
}
|
||||
startDate = startDate.format('YYYY-MM-DDTHH:mm:ss')
|
||||
endDate = endDate.format('YYYY-MM-DDTHH:mm:ss')
|
||||
return {
|
||||
startDate: startDate,
|
||||
endDate: endDate
|
||||
}
|
||||
}
|
||||
|
||||
dateSelector.daterangepicker({
|
||||
startDate: moment().utc().subtract(2, 'days'),
|
||||
endDate: moment().utc(),
|
||||
timePicker: true,
|
||||
locale: {
|
||||
format: 'YYYY/MM/DD hh:mm:ss A'
|
||||
}
|
||||
}, function(start, end, label) {
|
||||
drawVideosTableViewElements()
|
||||
})
|
||||
monitorsList.change(function(){
|
||||
drawVideosTableViewElements()
|
||||
})
|
||||
function drawVideosTableViewElements(selectedMonitor,startDate,endDate){
|
||||
var dateRange = getSelectedTime(false)
|
||||
if(!startDate)startDate = dateRange.startDate
|
||||
if(!endDate)endDate = dateRange.endDate
|
||||
if(!selectedMonitor)selectedMonitor = monitorsList.val()
|
||||
var queryString = ['start=' + startDate,'end=' + endDate,'limit=0']
|
||||
var frameIconsHtml = ''
|
||||
var apiURL = getApiPrefix('videos') + '/' + selectedMonitor;
|
||||
var videosTableData = []
|
||||
loadedVideosInMemory = {}
|
||||
$.getJSON(apiURL + '?' + queryString.join('&'),function(data){
|
||||
videosTableDrawArea.bootstrapTable('destroy')
|
||||
videosTableDrawArea.bootstrapTable({
|
||||
pagination: true,
|
||||
search: true,
|
||||
columns: [
|
||||
{
|
||||
field: 'monitorName',
|
||||
title: lang['Monitor']
|
||||
},
|
||||
{
|
||||
field: 'time',
|
||||
title: lang['Time Created']
|
||||
},
|
||||
{
|
||||
field: 'size',
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
field: 'buttons',
|
||||
title: ''
|
||||
}
|
||||
],
|
||||
data: data.videos.map((file) => {
|
||||
return {
|
||||
monitorName: `<b>${loadedMonitors[file.mid]?.name || file.mid}</b>`,
|
||||
time: `
|
||||
${file.start ? `<div><b>${lang.Started}</b> ${formattedTime(file.details.start, 'DD-MM-YYYY hh:mm:ss AA')}</div>` : ''}
|
||||
${file.end ? `<div><b>${lang.Ended}</b> ${formattedTime(file.details.end, 'DD-MM-YYYY hh:mm:ss AA')}</div>` : ''}
|
||||
`,
|
||||
size: convertKbToHumanSize(file.size),
|
||||
buttons: `
|
||||
<a class="btn btn-sm btn-primary" href="${file.href}" download title="${lang.Download}"><i class="fa fa-download"></i></a>
|
||||
<a class="btn btn-sm btn-primary preview-video" href="${file.href}" title="${lang.Play}"><i class="fa fa-play"></i></a>
|
||||
`,
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
function drawPreviewVideo(href){
|
||||
videosTablePreviewArea.html(`<video class="video_video" style="width:100%" autoplay controls preload loop src="${href}"></video>`)
|
||||
}
|
||||
$('body')
|
||||
.on('click','.open-videosTable-video',function(e){
|
||||
e.preventDefault()
|
||||
var href = $(this).attr('href')
|
||||
openTab(`videosTableView`,{},null)
|
||||
drawPreviewVideo(href)
|
||||
return false;
|
||||
});
|
||||
theEnclosure
|
||||
.on('click','.preview-video',function(e){
|
||||
e.preventDefault()
|
||||
var href = $(this).attr('href')
|
||||
drawPreviewVideo(href)
|
||||
return false;
|
||||
})
|
||||
addOnTabOpen('videosTableView', function () {
|
||||
drawMonitorListToSelector(monitorsList)
|
||||
drawVideosTableViewElements()
|
||||
})
|
||||
addOnTabReopen('videosTableView', function () {
|
||||
var theSelected = `${monitorsList.val()}`
|
||||
drawMonitorListToSelector(monitorsList)
|
||||
monitorsList.val(theSelected)
|
||||
})
|
||||
addOnTabAway('videosTableView', function () {
|
||||
videosTablePreviewArea.find('video')[0].pause()
|
||||
})
|
||||
})
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
'home/calendar',
|
||||
'home/eventListWithPics',
|
||||
'home/fileBin',
|
||||
'home/videosTable',
|
||||
'confirm',
|
||||
'home/help',
|
||||
]).forEach(function(block){ %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<main class="page-tab pt-3" id="tab-videosTableView">
|
||||
<div class="row <%- define.Theme.isDark ? `dark` : '' %>">
|
||||
<%
|
||||
var drawBlock
|
||||
var buildOptions
|
||||
%>
|
||||
<%
|
||||
include fieldBuilders.ejs
|
||||
%>
|
||||
<% Object.keys(define['Videos Table'].blocks).forEach(function(blockKey){
|
||||
var theBlock = define['Videos Table'].blocks[blockKey]
|
||||
drawBlock(theBlock)
|
||||
}) %>
|
||||
</div>
|
||||
<script src="<%-window.libURL%>assets/js/bs5.videosTable.js"></script>
|
||||
</main>
|
||||
Loading…
Reference in New Issue