remove power viewer files
Moe
parent
4579a5ba18
commit
7d585522e0
|
|
@ -7778,11 +7778,6 @@ module.exports = function(s,config,lang){
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// icon: 'barcode',
|
|
||||||
// label: `${lang['Power Viewer']}`,
|
|
||||||
// pageOpen: 'powerVideo',
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
icon: 'calendar',
|
icon: 'calendar',
|
||||||
label: `${lang['Calendar']}`,
|
label: `${lang['Calendar']}`,
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,6 @@ module.exports = function(s,config,lang,io){
|
||||||
'home/timelapseViewer',
|
'home/timelapseViewer',
|
||||||
'home/eventFilters',
|
'home/eventFilters',
|
||||||
'home/cameraProbe',
|
'home/cameraProbe',
|
||||||
// 'home/powerVideo',
|
|
||||||
'home/onvifScanner',
|
'home/onvifScanner',
|
||||||
'home/onvifDeviceManager',
|
'home/onvifDeviceManager',
|
||||||
'home/configFinder',
|
'home/configFinder',
|
||||||
|
|
@ -87,9 +86,6 @@ module.exports = function(s,config,lang,io){
|
||||||
'confirm',
|
'confirm',
|
||||||
'home/help',
|
'home/help',
|
||||||
]
|
]
|
||||||
if(config.powerVideo === true && (config.webBlocksPreloaded.indexOf('home/powerVideo') === -1)){
|
|
||||||
config.webBlocksPreloaded.push('home/powerVideo')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
//SSL options
|
//SSL options
|
||||||
var wellKnownDirectory = s.mainDirectory + '/web/.well-known'
|
var wellKnownDirectory = s.mainDirectory + '/web/.well-known'
|
||||||
|
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
#powerVideo .videoPlayer {
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#powerVideo .videoPlayer video{
|
|
||||||
max-width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
object-fit: fill;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer:fullscreen video{
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideoMonitorControls{
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
padding: 5px;
|
|
||||||
background: #222;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideoMonitorsList{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideoMonitorsList .list-item{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideoMonitorViews {
|
|
||||||
text-align: center;
|
|
||||||
min-height: 300px;
|
|
||||||
background: #444;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer .videoPlayer-detection-info {
|
|
||||||
position: absolute;
|
|
||||||
padding: 20px 10px 20px 10px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: auto;
|
|
||||||
z-index: 11;
|
|
||||||
opacity: 0;
|
|
||||||
background: rgba(0,0,0,0.7);
|
|
||||||
color: #fff;
|
|
||||||
font-family: monospace;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer:hover .videoPlayer-detection-info,
|
|
||||||
#powerVideo .videoPlayer.show-detection-info .videoPlayer-detection-info {
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer .videoPlayer-stream-objects {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer .videoPlayer-detection-info-object div {
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer .videoPlayer-detection-info-object {
|
|
||||||
text-align: left
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoPlayer-stream-objects .tag {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100%;
|
|
||||||
left: 0;
|
|
||||||
background: red;
|
|
||||||
color: #fff;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 80%;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
padding: 3px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoPlayer-stream-objects .stream-detected-object {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border: 3px solid red;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoPlayer-stream-objects .stream-detected-point {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border: 3px solid yellow;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoPlayer-stream-objects .point {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border: 3px solid red;
|
|
||||||
border-radius: 50%
|
|
||||||
}
|
|
||||||
|
|
||||||
/* loading */
|
|
||||||
#powerVideo .loading {
|
|
||||||
font-size: 20pt;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#powerVideo .loading > div {
|
|
||||||
margin-top: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
/* VIS.js */
|
|
||||||
|
|
||||||
#powerVideo video {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px 0 0 0
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoAfter,
|
|
||||||
#powerVideo .videoBefore {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .vis-timeline {
|
|
||||||
font-family: monospace;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-color: #172b4d;
|
|
||||||
}
|
|
||||||
#powerVideo .vis-item {
|
|
||||||
border-color: #347af1;
|
|
||||||
background-color: #4d87d0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
#powerVideo .vis-item.vis-selected {
|
|
||||||
border-color: #f5365c;
|
|
||||||
background-color: #f5365c;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
#powerVideo .vis-panel.vis-bottom {
|
|
||||||
border: 1px #17294b;
|
|
||||||
}
|
|
||||||
#powerVideo .vis-time-axis .vis-grid.vis-minor{
|
|
||||||
border-color: #1a539a;
|
|
||||||
}
|
|
||||||
#powerVideo .vis-time-axis .vis-grid.vis-major {
|
|
||||||
border-color: #4d87d0;
|
|
||||||
}
|
|
||||||
#powerVideo .vis-time-axis .vis-text {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
[timeline-video-file] .progress{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.vis-selected [timeline-video-file] .progress{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .vis-item.vis-box {
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .vis-labelset .vis-label {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#powerVideo .videoPlayer-detection-info-buttons {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,798 +0,0 @@
|
||||||
$(document).ready(function(e){
|
|
||||||
var powerVideoWindow = $('#powerVideo')
|
|
||||||
var powerVideoMonitorsListElement = $('#powerVideoMonitorsList')
|
|
||||||
var powerVideoMonitorViewsElement = $('#powerVideoMonitorViews')
|
|
||||||
var powerVideoTimelineStripsContainer = $('#powerVideoTimelineStrips')
|
|
||||||
var dateSelector = $('#powerVideoDateRange')
|
|
||||||
var powerVideoVideoLimitElement = $('#powerVideoVideoLimit')
|
|
||||||
var powerVideoEventLimitElement = $('#powerVideoEventLimit')
|
|
||||||
var powerVideoSet = $('#powerVideoSet')
|
|
||||||
var powerVideoMuteIcon = powerVideoWindow.find('[powerVideo-control="toggleMute"] i')
|
|
||||||
var objectTagSearchField = $('#powerVideo_tag_search')
|
|
||||||
var powerVideoLoadedVideos = {}
|
|
||||||
var powerVideoLoadedEvents = {}
|
|
||||||
var powerVideoLoadedChartData = {}
|
|
||||||
var loadedTableGroupIds = {}
|
|
||||||
var eventsLabeledByTime = {}
|
|
||||||
var monitorSlotPlaySpeeds = {}
|
|
||||||
var currentlyPlayingVideos = {}
|
|
||||||
var powerVideoMute = true
|
|
||||||
var powerVideoCanAutoPlay = true
|
|
||||||
var lastPowerVideoSelectedMonitors = []
|
|
||||||
var extenders = {
|
|
||||||
onVideoPlayerTimeUpdateExtensions: [],
|
|
||||||
onVideoPlayerTimeUpdate: function(extender){
|
|
||||||
extenders.onVideoPlayerTimeUpdateExtensions.push(extender)
|
|
||||||
},
|
|
||||||
onVideoPlayerCreateExtensions: [],
|
|
||||||
onVideoPlayerCreate: function(extender){
|
|
||||||
extenders.onVideoPlayerCreateExtensions.push(extender)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
var activeTimeline = null
|
|
||||||
// fix utc/localtime translation (use timelapseJpeg as guide, it works as expected) >
|
|
||||||
loadDateRangePicker(dateSelector,{
|
|
||||||
startDate: moment().subtract(moment.duration("24:00:00")),
|
|
||||||
endDate: moment().add(moment.duration("24:00:00")),
|
|
||||||
timePicker24Hour: true,
|
|
||||||
timePickerSeconds: true,
|
|
||||||
onChange: function(start, end, label) {
|
|
||||||
dateSelector.focus()
|
|
||||||
$.each(lastPowerVideoSelectedMonitors,async function(n,monitorId){
|
|
||||||
await requestTableData(monitorId)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// fix utc/localtime translation (use timelapseJpeg as guide, it works as expected) />
|
|
||||||
function loadVideosToTimeLineMemory(monitorId,videos,events){
|
|
||||||
videos.forEach((video) => {
|
|
||||||
createVideoLinks(video,{
|
|
||||||
hideRemote: true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
powerVideoLoadedVideos[monitorId] = videos
|
|
||||||
powerVideoLoadedEvents[monitorId] = events
|
|
||||||
}
|
|
||||||
function drawMonitorsList(){
|
|
||||||
// var monitorList = Object.values(loadedMonitors).map(function(item){
|
|
||||||
// return {
|
|
||||||
// value: item.mid,
|
|
||||||
// label: item.name,
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
var html = ``
|
|
||||||
$.each(getLoadedMonitorsAlphabetically(),function(n,monitor){
|
|
||||||
html += `<div class="flex-row d-flex">
|
|
||||||
<div class="flex-grow-1 p-2">${monitor.name}</div>
|
|
||||||
<div class="p-2 text-right"><small>${monitor.host}</small></div>
|
|
||||||
<div class="p-2"><input name="${monitor.mid}" value="1" type="checkbox" class="form-check-input position-initial ml-0"></div>
|
|
||||||
</div>`
|
|
||||||
})
|
|
||||||
powerVideoMonitorsListElement.html(html)
|
|
||||||
}
|
|
||||||
function getVideoSetSelected(){
|
|
||||||
return powerVideoSet.val()
|
|
||||||
}
|
|
||||||
async function requestTableData(monitorId){
|
|
||||||
var dateRange = getSelectedTime(dateSelector)
|
|
||||||
var searchQuery = objectTagSearchField.val() || null
|
|
||||||
var startDate = dateRange.startDate
|
|
||||||
var endDate = dateRange.endDate
|
|
||||||
var wantsCloudVideo = getVideoSetSelected() === 'cloud'
|
|
||||||
var wantsArchivedVideo = getVideoSetSelected() === 'archive'
|
|
||||||
var videos = (await getVideos({
|
|
||||||
monitorId,
|
|
||||||
startDate,
|
|
||||||
endDate,
|
|
||||||
searchQuery,
|
|
||||||
archived: wantsArchivedVideo,
|
|
||||||
customVideoSet: wantsCloudVideo ? 'cloudVideos' : 'videos',
|
|
||||||
})).videos;
|
|
||||||
var events = ([]).concat(...videos.map(row => row.events || []));
|
|
||||||
loadVideosToTimeLineMemory(monitorId,videos,events)
|
|
||||||
drawLoadedTableData()
|
|
||||||
}
|
|
||||||
function unloadTableData(monitorId,user){
|
|
||||||
if(!user)user = $user
|
|
||||||
delete(powerVideoLoadedVideos[monitorId])
|
|
||||||
delete(powerVideoLoadedEvents[monitorId])
|
|
||||||
delete(loadedTableGroupIds[monitorId])
|
|
||||||
delete(loadedTableGroupIds[monitorId + '_events'])
|
|
||||||
powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid="${monitorId}"]`).remove()
|
|
||||||
drawLoadedTableData()
|
|
||||||
}
|
|
||||||
function checkEventsAgainstVideo(video,events){
|
|
||||||
var videoStartTime = new Date(video.time)
|
|
||||||
var videoEndTime = new Date(video.end)
|
|
||||||
var eventsToCheck = events
|
|
||||||
video.detections = {}
|
|
||||||
var newSetOfEventsWithoutChecked = {}
|
|
||||||
$.each(eventsToCheck,function(n,event){
|
|
||||||
var eventTime = new Date(event.time)
|
|
||||||
var seekPosition = (eventTime - videoStartTime) / 1000
|
|
||||||
if (videoStartTime <= eventTime && eventTime <= videoEndTime) {
|
|
||||||
if(!video.details.confidence)video.details.confidence = 0
|
|
||||||
video.detections[seekPosition] = event
|
|
||||||
eventsLabeledByTime[video.mid][video.time][seekPosition] = event
|
|
||||||
}else{
|
|
||||||
newSetOfEventsWithoutChecked[n] = video
|
|
||||||
}
|
|
||||||
})
|
|
||||||
eventsToCheck = newSetOfEventsWithoutChecked
|
|
||||||
}
|
|
||||||
function prepareVideosAndEventsForTable(monitorId,videos,events){
|
|
||||||
var chartData = []
|
|
||||||
eventsLabeledByTime[monitorId] = {}
|
|
||||||
$.each(videos,function(n,video){
|
|
||||||
eventsLabeledByTime[monitorId][video.time] = {}
|
|
||||||
if(videos[n - 1])video.videoAfter = videos[n - 1]
|
|
||||||
if(videos[n + 1])video.videoBefore = videos[n + 1]
|
|
||||||
checkEventsAgainstVideo(video,events)
|
|
||||||
chartData.push({
|
|
||||||
group: loadedTableGroupIds[monitorId],
|
|
||||||
content: `<div timeline-video-file="${video.mid}${video.time}">
|
|
||||||
${formattedTime(video.time, 'hh:mm:ss AA, DD-MM-YYYY')}
|
|
||||||
<div class="progress">
|
|
||||||
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:0%;"><span></span></div>
|
|
||||||
</div>
|
|
||||||
</div>`,
|
|
||||||
start: video.time,
|
|
||||||
end: video.end,
|
|
||||||
videoInfo: video
|
|
||||||
})
|
|
||||||
})
|
|
||||||
$.each(events,function(n,event){
|
|
||||||
var eventReason = event.details && event.details.reason ? event.details.reason.toUpperCase() : "UNKNOWN"
|
|
||||||
var eventSlotTag = eventReason
|
|
||||||
if(eventReason === 'OBJECT' && event.details.matrices && event.details.matrices[0]){
|
|
||||||
eventSlotTag = []
|
|
||||||
event.details.matrices.forEach(function(matrix){
|
|
||||||
eventSlotTag.push(matrix.tag)
|
|
||||||
})
|
|
||||||
eventSlotTag = eventSlotTag.join(', ')
|
|
||||||
}
|
|
||||||
chartData.push({
|
|
||||||
group: loadedTableGroupIds[monitorId + '_events'],
|
|
||||||
content: `<div timeline-event="${event.time}">${eventSlotTag}</div>`,
|
|
||||||
start: event.time,
|
|
||||||
eventInfo: event
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return chartData
|
|
||||||
}
|
|
||||||
function getMiniEventsChartConfig(video){
|
|
||||||
var monitorId = video.mid
|
|
||||||
var labels = []
|
|
||||||
var chartData = []
|
|
||||||
var events = video.detections || video.events
|
|
||||||
$.each(events,function(n,v){
|
|
||||||
if(!v.details.confidence){v.details.confidence=0}
|
|
||||||
var time = moment(v.time).format('MM/DD/YYYY HH:mm:ss')
|
|
||||||
labels.push(time)
|
|
||||||
chartData.push(v.details.confidence)
|
|
||||||
})
|
|
||||||
var timeFormat = 'MM/DD/YYYY HH:mm:ss';
|
|
||||||
Chart.defaults.global.defaultFontColor = '#fff';
|
|
||||||
var config = {
|
|
||||||
type: 'bar',
|
|
||||||
data: {
|
|
||||||
labels: labels,
|
|
||||||
datasets: [{
|
|
||||||
type: 'line',
|
|
||||||
label: 'Motion Confidence',
|
|
||||||
backgroundColor: window.chartColors.blue,
|
|
||||||
borderColor: window.chartColors.red,
|
|
||||||
data: chartData,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
title: {
|
|
||||||
fontColor: "white",
|
|
||||||
text:"Events in this video"
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
type: "time",
|
|
||||||
display: true,
|
|
||||||
time: {
|
|
||||||
format: timeFormat,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
function drawMiniEventsChart(video,chartConfig){
|
|
||||||
var videoContainer = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${video.mid}]`)
|
|
||||||
var canvas = videoContainer.find('canvas')
|
|
||||||
var ctx = canvas[0].getContext("2d")
|
|
||||||
var miniChart = new Chart(ctx, chartConfig)
|
|
||||||
canvas.click(function(f) {
|
|
||||||
var target = miniChart.getElementsAtEvent(f)[0];
|
|
||||||
if(!target){return false}
|
|
||||||
var event = video.detections[target._index]
|
|
||||||
var video1 = videoContainer.find('video')[0]
|
|
||||||
video1.currentTime = moment(event.time).diff(moment(video.time),'seconds')
|
|
||||||
video1.play()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function getAllChartDataForLoadedVideos(){
|
|
||||||
var chartData = []
|
|
||||||
Object.keys(powerVideoLoadedVideos).forEach(function(monitorId,n){
|
|
||||||
var videos = powerVideoLoadedVideos[monitorId]
|
|
||||||
var events = powerVideoLoadedEvents[monitorId]
|
|
||||||
var parsedVideos = prepareVideosAndEventsForTable(monitorId,videos,events)
|
|
||||||
powerVideoLoadedChartData[monitorId] = parsedVideos
|
|
||||||
chartData = chartData.concat(parsedVideos)
|
|
||||||
})
|
|
||||||
return chartData
|
|
||||||
}
|
|
||||||
function visuallySelectItemInRow(video){
|
|
||||||
powerVideoTimelineStripsContainer.find(`[timeline-video-file="${video.mid}${video.time}"]`).parents('.vis-item').addClass('vis-selected')
|
|
||||||
}
|
|
||||||
function visuallyDeselectItemInRow(video){
|
|
||||||
powerVideoTimelineStripsContainer.find(`[timeline-video-file="${video.mid}${video.time}"]`).parents('.vis-item').removeClass('vis-selected')
|
|
||||||
}
|
|
||||||
var drawTableTimeout = null
|
|
||||||
function drawLoadedTableData(){
|
|
||||||
// destroy old
|
|
||||||
try{
|
|
||||||
if(activeTimeline && activeTimeline.destroy){
|
|
||||||
activeTimeline.destroy()
|
|
||||||
}
|
|
||||||
}catch(err){
|
|
||||||
|
|
||||||
}
|
|
||||||
//
|
|
||||||
powerVideoTimelineStripsContainer.html(`<div class="loading"><i class="fa fa-spinner fa-pulse"></i><div class="epic-text">${lang['Please Wait...']}</div></div>`)
|
|
||||||
clearTimeout(drawTableTimeout)
|
|
||||||
drawTableTimeout = setTimeout(function(){
|
|
||||||
var container = powerVideoTimelineStripsContainer[0]
|
|
||||||
var groupsDataSet = new vis.DataSet()
|
|
||||||
var groups = []
|
|
||||||
var groupId = 1
|
|
||||||
Object.keys(powerVideoLoadedVideos).forEach(function(monitorId,n){
|
|
||||||
var mon = Object.values(loadedMonitors).find(m => { return m.mid === monitorId });
|
|
||||||
var name = mon.name;
|
|
||||||
groups.push({
|
|
||||||
id: groupId,
|
|
||||||
content: name + " | " + lang.Videos
|
|
||||||
})
|
|
||||||
groupId += 1
|
|
||||||
groups.push({
|
|
||||||
id: groupId,
|
|
||||||
content: name + " | " + lang.Events
|
|
||||||
})
|
|
||||||
groupId += 1
|
|
||||||
loadedTableGroupIds[monitorId] = groupId - 2
|
|
||||||
loadedTableGroupIds[monitorId + '_events'] = groupId - 1
|
|
||||||
})
|
|
||||||
groupsDataSet.add(groups)
|
|
||||||
var chartData = getAllChartDataForLoadedVideos()
|
|
||||||
if(chartData.length > 0){
|
|
||||||
var items = new vis.DataSet(chartData)
|
|
||||||
var options = {
|
|
||||||
selectable: false,
|
|
||||||
stack: false,
|
|
||||||
showCurrentTime: false,
|
|
||||||
}
|
|
||||||
// Create a Timeline
|
|
||||||
var timeline = new vis.Timeline(container, items, groupsDataSet, options)
|
|
||||||
powerVideoTimelineStripsContainer.find('.loading').remove()
|
|
||||||
var timeChanging = false
|
|
||||||
timeline.on('rangechange', function(properties){
|
|
||||||
timeChanging = true
|
|
||||||
})
|
|
||||||
timeline.on('rangechanged', function(properties){
|
|
||||||
setTimeout(function(){
|
|
||||||
timeChanging = false
|
|
||||||
},300)
|
|
||||||
})
|
|
||||||
timeline.on('click', function(properties){
|
|
||||||
if(!timeChanging){
|
|
||||||
var selectedTime = properties.time
|
|
||||||
var videosAtSameTime = findAllVideosAtTime(selectedTime)
|
|
||||||
powerVideoTimelineStripsContainer.find('.vis-item').removeClass('vis-selected')
|
|
||||||
$.each(videosAtSameTime,function(monitorId,videos){
|
|
||||||
var selectedVideo = videos[0]
|
|
||||||
if(selectedVideo){
|
|
||||||
loadVideoIntoMonitorSlot(selectedVideo,selectedTime)
|
|
||||||
visuallySelectItemInRow(selectedVideo)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
activeTimeline = timeline
|
|
||||||
}else{
|
|
||||||
powerVideoTimelineStripsContainer.html(`<div class="loading"><i class="fa fa-exclamation-circle"></i><div class="epic-text">${lang['No Data']}</div></div>`)
|
|
||||||
}
|
|
||||||
},1000)
|
|
||||||
}
|
|
||||||
function drawMatrices(event,options){
|
|
||||||
var streamObjectsContainer = options.streamObjectsContainer
|
|
||||||
var height = options.height
|
|
||||||
var width = options.width
|
|
||||||
var monitorId = options.mid
|
|
||||||
var widthRatio = width / event.details.imgWidth
|
|
||||||
var heightRatio = height / event.details.imgHeight
|
|
||||||
|
|
||||||
streamObjectsContainer.find('.stream-detected-object[name="'+event.details.name+'"]').remove()
|
|
||||||
var html = ''
|
|
||||||
$.each(event.details.matrices,function(n,matrix){
|
|
||||||
html += `<div class="stream-detected-object" name="${event.details.name}" style="height:${heightRatio * matrix.height}px;width:${widthRatio * matrix.width}px;top:${heightRatio * matrix.y}px;left:${widthRatio * matrix.x}px;">`
|
|
||||||
if(matrix.tag)html += `<span class="tag">${matrix.tag}${!isNaN(matrix.id) ? ` <small class="label label-default">${matrix.id}</small>`: ''}</span>`
|
|
||||||
html += '</div>'
|
|
||||||
})
|
|
||||||
streamObjectsContainer.append(html)
|
|
||||||
}
|
|
||||||
function attachEventsToVideoActiveElement(video){
|
|
||||||
var monitorId = video.mid
|
|
||||||
var videoPlayerContainer = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${monitorId}]`)
|
|
||||||
var videoElement = videoPlayerContainer.find(`video.videoNow`)
|
|
||||||
var streamObjectsContainer = videoPlayerContainer.find(`.videoPlayer-stream-objects`)
|
|
||||||
var detectionInfoContainerMotion = videoPlayerContainer.find(`.videoPlayer-detection-info-motion`)
|
|
||||||
var detectionInfoContainerObject = videoPlayerContainer.find(`.videoPlayer-detection-info-object`)
|
|
||||||
var detectionInfoContainerRaw = videoPlayerContainer.find(`.videoPlayer-detection-info-raw`)
|
|
||||||
var motionMeterProgressBar = videoPlayerContainer.find(`.videoPlayer-motion-meter .progress-bar`)
|
|
||||||
var motionMeterProgressBarTextBox = videoPlayerContainer.find(`.videoPlayer-motion-meter .progress-bar span`)
|
|
||||||
var videoCurrentTimeProgressBar = powerVideoTimelineStripsContainer.find(`[timeline-video-file="${video.mid}${video.time}"] .progress-bar`)[0]
|
|
||||||
var preloadedNext = false
|
|
||||||
var reinitializeStreamObjectsContainer = function(){
|
|
||||||
height = videoElement.height()
|
|
||||||
width = videoElement.width()
|
|
||||||
}
|
|
||||||
reinitializeStreamObjectsContainer()
|
|
||||||
$(videoElement)
|
|
||||||
.resize(reinitializeStreamObjectsContainer)
|
|
||||||
// .off('loadeddata').on('loadeddata', function() {
|
|
||||||
// reinitializeStreamObjectsContainer()
|
|
||||||
// var allLoaded = true
|
|
||||||
// getAllActiveVideosInSlots().each(function(n,videoElement){
|
|
||||||
// if(!videoElement.readyState === 4)allLoaded = false
|
|
||||||
// })
|
|
||||||
// setTimeout(function(){
|
|
||||||
// if(allLoaded){
|
|
||||||
// playAllSlots()
|
|
||||||
// }
|
|
||||||
// },1500)
|
|
||||||
// })
|
|
||||||
// .off("pause").on("pause",function(){
|
|
||||||
// console.log(monitorId,'pause')
|
|
||||||
// })
|
|
||||||
// .off("play").on("play",function(){
|
|
||||||
// console.log(monitorId,'play')
|
|
||||||
// })
|
|
||||||
.off("loadedmetadata").on("loadedmetadata",function(){
|
|
||||||
resetWidthForActiveVideoPlayers()
|
|
||||||
})
|
|
||||||
.off("pause").on("pause",function(){
|
|
||||||
resetWidthForActiveVideoPlayers()
|
|
||||||
})
|
|
||||||
.off("play").on("play",function(){
|
|
||||||
resetWidthForActiveVideoPlayers()
|
|
||||||
})
|
|
||||||
.off("timeupdate").on("timeupdate",function(){
|
|
||||||
try{
|
|
||||||
var event = eventsLabeledByTime[monitorId][video.time][parseInt(this.currentTime)]
|
|
||||||
if(event){
|
|
||||||
if(event.details.matrices){
|
|
||||||
drawMatrices(event,{
|
|
||||||
streamObjectsContainer: streamObjectsContainer,
|
|
||||||
monitorId: monitorId,
|
|
||||||
height: height,
|
|
||||||
width: width,
|
|
||||||
})
|
|
||||||
detectionInfoContainerObject.html(jsonToHtmlBlock(event.details.matrices))
|
|
||||||
}
|
|
||||||
if(event.details.confidence){
|
|
||||||
motionMeterProgressBar.css('width',event.details.confidence+'%')
|
|
||||||
motionMeterProgressBarTextBox.text(event.details.confidence)
|
|
||||||
var html = `<div>${lang['Region']} : ${event.details.name}</div>
|
|
||||||
<div>${lang['Confidence']} : ${event.details.confidence}</div>
|
|
||||||
<div>${lang['Plugin']} : ${event.details.plug}</div>`
|
|
||||||
detectionInfoContainerMotion.html(html)
|
|
||||||
// detectionInfoContainerRaw.html(jsonToHtmlBlock({`${lang['Plug']}`:event.details.plug}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var currentTime = this.currentTime;
|
|
||||||
var watchPoint = Math.floor((currentTime/this.duration) * 100)
|
|
||||||
if(!preloadedNext && watchPoint >= 75){
|
|
||||||
preloadedNext = true
|
|
||||||
var videoAfter = videoPlayerContainer.find(`video.videoAfter`)[0]
|
|
||||||
videoAfter.setAttribute('preload',true)
|
|
||||||
}
|
|
||||||
if(videoCurrentTimeProgressBar)videoCurrentTimeProgressBar.style.width = `${watchPoint}%`
|
|
||||||
extenders.onVideoPlayerTimeUpdateExtensions.forEach(function(extender){
|
|
||||||
extender(videoElement,watchPoint)
|
|
||||||
})
|
|
||||||
}catch(err){
|
|
||||||
console.log(err)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
var onEnded = function() {
|
|
||||||
visuallyDeselectItemInRow(video)
|
|
||||||
if(video.videoAfter){
|
|
||||||
visuallySelectItemInRow(video.videoAfter)
|
|
||||||
loadVideoIntoMonitorSlot(video.videoAfter)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
videoElement[0].onended = onEnded
|
|
||||||
videoElement[0].onerror = onEnded
|
|
||||||
}
|
|
||||||
function dettachEventsToVideoActiveElement(monitorId){
|
|
||||||
var videoElement = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${monitorId}] video.videoNow`)
|
|
||||||
$(videoElement)
|
|
||||||
// .off('loadeddata')
|
|
||||||
.off("pause")
|
|
||||||
.off("play")
|
|
||||||
.off("timeupdate")
|
|
||||||
}
|
|
||||||
function findAllVideosAtTime(selectedTime){
|
|
||||||
var time = new Date(selectedTime)
|
|
||||||
var parsedVideos = {}
|
|
||||||
$.each(powerVideoLoadedVideos,function(monitorId,videos){
|
|
||||||
var videosFilteredByTime = videos.filter(function(video){
|
|
||||||
return (
|
|
||||||
(new Date(video.time)) <= time && time < (new Date(video.end))
|
|
||||||
)
|
|
||||||
});
|
|
||||||
parsedVideos[monitorId] = videosFilteredByTime
|
|
||||||
})
|
|
||||||
return parsedVideos
|
|
||||||
}
|
|
||||||
function resetVisualDetectionDataForMonitorSlot(monitorId){
|
|
||||||
var videoPlayerContainer = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${monitorId}]`)
|
|
||||||
var streamObjectsContainer = videoPlayerContainer.find(`.videoPlayer-stream-objects`)
|
|
||||||
var detectionInfoContainerObject = videoPlayerContainer.find(`.videoPlayer-detection-info-object`)
|
|
||||||
var detectionInfoContainerMotion = videoPlayerContainer.find(`.videoPlayer-detection-info-motion`)
|
|
||||||
var motionMeterProgressBar = videoPlayerContainer.find(`.videoPlayer-motion-meter .progress-bar`)
|
|
||||||
var motionMeterProgressBarTextBox = videoPlayerContainer.find(`.videoPlayer-motion-meter .progress-bar span`)
|
|
||||||
detectionInfoContainerObject.empty()
|
|
||||||
detectionInfoContainerMotion.empty()
|
|
||||||
streamObjectsContainer.empty()
|
|
||||||
motionMeterProgressBar.css('width','0')
|
|
||||||
motionMeterProgressBarTextBox.text('0')
|
|
||||||
}
|
|
||||||
function resetWidthForActiveVideoPlayers(){
|
|
||||||
powerVideoMonitorViewsElement.find('.videoPlayer').css('width',`49.8%`)
|
|
||||||
}
|
|
||||||
function loadVideoIntoMonitorSlot(video,selectedTime){
|
|
||||||
if(!video)return
|
|
||||||
resetVisualDetectionDataForMonitorSlot(video.mid)
|
|
||||||
currentlyPlayingVideos[video.mid] = video
|
|
||||||
var timeToStartAt = selectedTime - new Date(video.time)
|
|
||||||
var numberOfMonitors = Object.keys(powerVideoLoadedVideos).length
|
|
||||||
// if(numberOfMonitors > 3)numberOfMonitors = 3 //start new row after 3
|
|
||||||
if(numberOfMonitors == 1)numberOfMonitors = 2 //make single monitor not look like a doofus
|
|
||||||
if(timeToStartAt < 0)timeToStartAt = 0
|
|
||||||
var videoContainer = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${video.mid}] .videoPlayer-buffers`)
|
|
||||||
if(videoContainer.length === 0){
|
|
||||||
if(!monitorSlotPlaySpeeds)monitorSlotPlaySpeeds[video.mid] = {}
|
|
||||||
powerVideoMonitorViewsElement.append(`<div class="videoPlayer" style="width:49.8%;max-width:500px;min-width:250px;" data-mid="${video.mid}">
|
|
||||||
<div class="videoPlayer-detection-info">
|
|
||||||
<div class="videoPlayer-detection-info-buttons btn-group">
|
|
||||||
<a powerVideo-control="downloadVideo" class="btn btn-sm btn-success"><i class="fa fa-download"></i></a>
|
|
||||||
<a powerVideo-control="openVideoPlayer" class="btn btn-sm btn-default"><i class="fa fa-external-link"></i></a>
|
|
||||||
</div>
|
|
||||||
<canvas style="height:400px"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="videoPlayer-stream-objects"></div>
|
|
||||||
<div class="videoPlayer-buffers"></div>
|
|
||||||
<div class="videoPlayer-motion-meter progress" title="${lang['Motion Meter']}">
|
|
||||||
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:0%;"><span></span></div>
|
|
||||||
</div>
|
|
||||||
</div>`)
|
|
||||||
videoContainer = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${video.mid}] .videoPlayer-buffers`)
|
|
||||||
}else{
|
|
||||||
powerVideoMonitorViewsElement.find('.videoPlayer').css('width',`49.8%`)
|
|
||||||
}
|
|
||||||
var videoCurrentNow = videoContainer.find('.videoNow')
|
|
||||||
var videoCurrentAfter = videoContainer.find('.videoAfter')
|
|
||||||
// var videoCurrentBefore = videoContainer.find('.videoBefore')
|
|
||||||
dettachEventsToVideoActiveElement(video.mid)
|
|
||||||
videoContainer.find('video').each(function(n,v){
|
|
||||||
v.pause()
|
|
||||||
})
|
|
||||||
var videoIsSame = (video.href == videoCurrentNow.attr('video'))
|
|
||||||
var videoIsAfter = (video.href == videoCurrentAfter.attr('video'))
|
|
||||||
// var videoIsBefore = (video.href == videoCurrentBefore.attr('video'))
|
|
||||||
var drawVideoHTML = function(position){
|
|
||||||
var videoData
|
|
||||||
var exisitingElement = videoContainer.find('.' + position)
|
|
||||||
if(position){
|
|
||||||
videoData = video[position]
|
|
||||||
}else{
|
|
||||||
position = 'videoNow'
|
|
||||||
videoData = video
|
|
||||||
}
|
|
||||||
if(videoData){
|
|
||||||
videoContainer.append('<video class="video_video '+position+'" video="'+videoData.href+'" playsinline><source src="'+videoData.href+'" type="video/'+videoData.ext+'"></video>')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(
|
|
||||||
videoIsSame ||
|
|
||||||
videoIsAfter
|
|
||||||
// || videoIsBefore
|
|
||||||
){
|
|
||||||
switch(true){
|
|
||||||
case videoIsSame:
|
|
||||||
var videoNow = videoContainer.find('video.videoNow')[0]
|
|
||||||
if(!videoNow.paused)videoNow.pause()
|
|
||||||
videoNow.currentTime = timeToStartAt / 1000
|
|
||||||
if(videoNow.paused)videoNow.play()
|
|
||||||
attachEventsToVideoActiveElement(video)
|
|
||||||
return
|
|
||||||
break;
|
|
||||||
case videoIsAfter:
|
|
||||||
// videoCurrentBefore.remove()
|
|
||||||
videoCurrentNow.remove()
|
|
||||||
videoCurrentAfter.removeClass('videoAfter').addClass('videoNow')
|
|
||||||
// videoCurrentNow.removeClass('videoNow').addClass('videoBefore')
|
|
||||||
drawVideoHTML('videoAfter')
|
|
||||||
break;
|
|
||||||
// case videoIsBefore:
|
|
||||||
// videoCurrentAfter.remove()
|
|
||||||
// videoCurrentBefore.removeClass('videoBefore').addClass('videoNow')
|
|
||||||
// videoCurrentNow.removeClass('videoNow').addClass('videoAfter')
|
|
||||||
// drawVideoHTML('videoBefore')
|
|
||||||
// break;
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
videoContainer.empty()
|
|
||||||
drawVideoHTML()//videoNow
|
|
||||||
// drawVideoHTML('videoBefore')
|
|
||||||
drawVideoHTML('videoAfter')
|
|
||||||
}
|
|
||||||
var videoNow = videoContainer.find('video.videoNow')[0]
|
|
||||||
attachEventsToVideoActiveElement(video)
|
|
||||||
//
|
|
||||||
videoNow.setAttribute('preload',true)
|
|
||||||
videoNow.muted = true
|
|
||||||
videoNow.playbackRate = monitorSlotPlaySpeeds[video.mid] || 1
|
|
||||||
try{
|
|
||||||
videoNow.currentTime = timeToStartAt / 1000
|
|
||||||
}catch(err){
|
|
||||||
console.log(err)
|
|
||||||
}
|
|
||||||
videoNow.play()
|
|
||||||
setTimeout(function(){
|
|
||||||
resetWidthForActiveVideoPlayers()
|
|
||||||
},1400)
|
|
||||||
extenders.onVideoPlayerCreateExtensions.forEach(function(extender){
|
|
||||||
extender(videoElement,watchPoint)
|
|
||||||
})
|
|
||||||
drawMiniEventsChart(video,getMiniEventsChartConfig(video))
|
|
||||||
}
|
|
||||||
function getSelectedMonitors(){
|
|
||||||
var form = powerVideoMonitorsListElement.serializeObject()
|
|
||||||
var selectedMonitors = Object.keys(form).filter(key => form[key] == '1')
|
|
||||||
return selectedMonitors
|
|
||||||
}
|
|
||||||
function getActiveVideoInSlot(monitorId){
|
|
||||||
return powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid="${monitorId}"] video.videoNow`)[0]
|
|
||||||
}
|
|
||||||
function getAllActiveVideosInSlots(){
|
|
||||||
return powerVideoMonitorViewsElement.find('video.videoNow')
|
|
||||||
}
|
|
||||||
function getActiveVideoRow(monitorId){
|
|
||||||
return currentlyPlayingVideos[monitorId]
|
|
||||||
}
|
|
||||||
function pauseAllSlots(){
|
|
||||||
getAllActiveVideosInSlots().each(function(n,video){
|
|
||||||
if(!video.paused)video.pause()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function toggleZoomAllSlots(){
|
|
||||||
powerVideoMonitorViewsElement.find(`.videoPlayer`).each(function(n,videoContainer){
|
|
||||||
var streamWindow = $(videoContainer)
|
|
||||||
var monitorId = streamWindow.attr('data-mid')
|
|
||||||
var enabled = streamWindow.attr('zoomEnabled')
|
|
||||||
if(enabled === '1'){
|
|
||||||
streamWindow
|
|
||||||
.attr('zoomEnabled','0')
|
|
||||||
.off('mouseover')
|
|
||||||
.off('mouseout')
|
|
||||||
.off('mousemove')
|
|
||||||
.off('touchmove')
|
|
||||||
.find('.zoomGlass').remove()
|
|
||||||
}else{
|
|
||||||
const magnifyStream = function(e){
|
|
||||||
var videoElement = streamWindow.find('video.videoNow')
|
|
||||||
console.log(videoElement[0].currentTime)
|
|
||||||
magnifyStream({
|
|
||||||
p: streamWindow,
|
|
||||||
videoUrl: streamWindow.find('video.videoNow').find('source').attr('src'),
|
|
||||||
setTime: videoElement[0].currentTime,
|
|
||||||
monitor: loadedMonitors[monitorId],
|
|
||||||
targetForZoom: 'video.videoNow',
|
|
||||||
magnifyOffsetElement: '.videoPlayer-buffers',
|
|
||||||
zoomAmount: 1,
|
|
||||||
auto: false,
|
|
||||||
animate: false,
|
|
||||||
pageX: e.pageX,
|
|
||||||
pageY: e.pageY
|
|
||||||
},$user)
|
|
||||||
}
|
|
||||||
streamWindow
|
|
||||||
.attr('zoomEnabled','1')
|
|
||||||
.on('mouseover', function(){
|
|
||||||
streamWindow.find(".zoomGlass").show()
|
|
||||||
})
|
|
||||||
.on('mouseout', function(){
|
|
||||||
streamWindow.find(".zoomGlass").hide()
|
|
||||||
})
|
|
||||||
.on('mousemove', magnifyStream)
|
|
||||||
.on('touchmove', magnifyStream)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function playAllSlots(){
|
|
||||||
getAllActiveVideosInSlots().each(function(n,video){
|
|
||||||
if(video.paused)video.play()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function toggleMute(){
|
|
||||||
powerVideoMute = !powerVideoMute
|
|
||||||
getAllActiveVideosInSlots().each(function(n,video){
|
|
||||||
if(powerVideoMute){
|
|
||||||
powerVideoMuteIcon.removeClass('fa-volume-up').addClass('fa-volume-off')
|
|
||||||
video.muted = true
|
|
||||||
}else{
|
|
||||||
powerVideoMuteIcon.removeClass('fa-volume-off').addClass('fa-volume-up')
|
|
||||||
video.muted = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function setPlaySpeedOnAllSlots(playSpeed){
|
|
||||||
Object.keys(powerVideoLoadedVideos).forEach(function(monitorId){
|
|
||||||
monitorSlotPlaySpeeds[monitorId] = playSpeed
|
|
||||||
})
|
|
||||||
getAllActiveVideosInSlots().each(function(n,video){
|
|
||||||
video.playbackRate = playSpeed
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function nextVideoAllSlots(){
|
|
||||||
Object.keys(currentlyPlayingVideos).forEach(function(monitorId){
|
|
||||||
var video = currentlyPlayingVideos[monitorId]
|
|
||||||
visuallyDeselectItemInRow(video)
|
|
||||||
visuallySelectItemInRow(video.videoAfter)
|
|
||||||
loadVideoIntoMonitorSlot(video.videoAfter,0)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function previousVideoAllSlots(){
|
|
||||||
Object.keys(currentlyPlayingVideos).forEach(function(monitorId){
|
|
||||||
var video = currentlyPlayingVideos[monitorId]
|
|
||||||
visuallyDeselectItemInRow(video)
|
|
||||||
visuallySelectItemInRow(video.videoBefore)
|
|
||||||
loadVideoIntoMonitorSlot(video.videoBefore,0)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function onPowerVideoSettingsChange(){
|
|
||||||
var monitorIdsSelectedNow = getSelectedMonitors()
|
|
||||||
lastPowerVideoSelectedMonitors.forEach((monitorId) => {
|
|
||||||
unloadTableData(monitorId)
|
|
||||||
})
|
|
||||||
monitorIdsSelectedNow.forEach(async (monitorId) => {
|
|
||||||
await requestTableData(monitorId)
|
|
||||||
})
|
|
||||||
lastPowerVideoSelectedMonitors = ([]).concat(monitorIdsSelectedNow || [])
|
|
||||||
}
|
|
||||||
function downloadPlayingVideo(video){
|
|
||||||
if(video.currentSrc){
|
|
||||||
var filename = getFilenameFromUrl(video.currentSrc)
|
|
||||||
downloadFile(video.currentSrc,filename)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function downloadAllPlayingVideos(){
|
|
||||||
getAllActiveVideosInSlots().each(function(n,video){
|
|
||||||
downloadPlayingVideo(video)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function openVideoPlayerTabFromViewer(el){
|
|
||||||
var monitorId = el.attr('data-mid') || el.parents('[data-mid]').attr('data-mid')
|
|
||||||
var video = getActiveVideoRow(monitorId)
|
|
||||||
createVideoPlayerTab(video)
|
|
||||||
}
|
|
||||||
function downloadPlayingVideoTabFromViewer(el){
|
|
||||||
var monitorId = el.attr('data-mid') || el.parents('[data-mid]').attr('data-mid')
|
|
||||||
var video = getActiveVideoInSlot(monitorId)
|
|
||||||
downloadPlayingVideo(video)
|
|
||||||
}
|
|
||||||
powerVideoMonitorsListElement.on('change','input',onPowerVideoSettingsChange);
|
|
||||||
powerVideoVideoLimitElement.change(onPowerVideoSettingsChange);
|
|
||||||
powerVideoEventLimitElement.change(onPowerVideoSettingsChange);
|
|
||||||
powerVideoSet.change(onPowerVideoSettingsChange);
|
|
||||||
powerVideoWindow
|
|
||||||
.on('dblclick','.videoPlayer',function(){
|
|
||||||
var el = $(this)
|
|
||||||
$('.videoPlayer-detection-info').addClass('hide')
|
|
||||||
fullScreenInit(this)
|
|
||||||
})
|
|
||||||
.on('click','[powerVideo-control]',function(){
|
|
||||||
var el = $(this)
|
|
||||||
var controlType = el.attr('powerVideo-control')
|
|
||||||
switch(controlType){
|
|
||||||
// single video affected
|
|
||||||
case'downloadVideo':
|
|
||||||
downloadPlayingVideoTabFromViewer(el)
|
|
||||||
break;
|
|
||||||
case'openVideoPlayer':
|
|
||||||
openVideoPlayerTabFromViewer(el)
|
|
||||||
break;
|
|
||||||
// all videos affected
|
|
||||||
case'downloadPlaying':
|
|
||||||
downloadAllPlayingVideos()
|
|
||||||
break;
|
|
||||||
case'toggleMute':
|
|
||||||
toggleMute()
|
|
||||||
break;
|
|
||||||
case'toggleZoom':
|
|
||||||
toggleZoomAllSlots()
|
|
||||||
break;
|
|
||||||
case'playAll':
|
|
||||||
powerVideoCanAutoPlay = true
|
|
||||||
playAllSlots()
|
|
||||||
break;
|
|
||||||
case'pauseAll':
|
|
||||||
powerVideoCanAutoPlay = false
|
|
||||||
pauseAllSlots()
|
|
||||||
break;
|
|
||||||
case'playSpeedAll':
|
|
||||||
var playSpeed = el.attr('data-speed')
|
|
||||||
setPlaySpeedOnAllSlots(playSpeed)
|
|
||||||
break;
|
|
||||||
case'previousVideoAll':
|
|
||||||
playAllSlots()
|
|
||||||
previousVideoAllSlots()
|
|
||||||
break;
|
|
||||||
case'nextVideoAll':
|
|
||||||
playAllSlots()
|
|
||||||
nextVideoAllSlots()
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
addOnTabOpen('powerVideo', function () {
|
|
||||||
drawMonitorsList()
|
|
||||||
})
|
|
||||||
addOnTabReopen('powerVideo', function () {
|
|
||||||
if(powerVideoCanAutoPlay){
|
|
||||||
powerVideoWindow.find('video').each(function(n,video){
|
|
||||||
try{
|
|
||||||
video.play()
|
|
||||||
}catch(err){
|
|
||||||
console.log(err)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
addOnTabAway('powerVideo', function () {
|
|
||||||
powerVideoWindow.find('video').each(function(n,video){
|
|
||||||
console.log(video)
|
|
||||||
try{
|
|
||||||
video.pause()
|
|
||||||
}catch(err){
|
|
||||||
console.log(err)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// addOnTabReopen('powerVideo', function () {
|
|
||||||
// drawMonitorsList()
|
|
||||||
// })
|
|
||||||
$.powerVideoViewer = {
|
|
||||||
window: powerVideoWindow,
|
|
||||||
drawMonitorsList: drawMonitorsList,
|
|
||||||
activeTimeline: activeTimeline,
|
|
||||||
monitorListElement: powerVideoMonitorsListElement,
|
|
||||||
monitorViewsElement: powerVideoMonitorViewsElement,
|
|
||||||
timelineStripsElement: powerVideoTimelineStripsContainer,
|
|
||||||
dateRangeElement: dateSelector,
|
|
||||||
loadedVideos: powerVideoLoadedVideos,
|
|
||||||
loadedEvents: powerVideoLoadedEvents,
|
|
||||||
loadedChartData: powerVideoLoadedChartData,
|
|
||||||
loadedTableGroupIds: loadedTableGroupIds,
|
|
||||||
extenders: extenders
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<main class="page-tab pt-3" id="tab-powerVideo">
|
|
||||||
<div class="row <%- define.Theme.isDark ? `dark` : '' %>" id="powerVideo">
|
|
||||||
<%
|
|
||||||
var drawBlock
|
|
||||||
var buildOptions
|
|
||||||
%>
|
|
||||||
<%
|
|
||||||
include fieldBuilders.ejs
|
|
||||||
%>
|
|
||||||
<% Object.keys(define['Power Viewer'].blocks).forEach(function(blockKey){
|
|
||||||
var theBlock = define['Power Viewer'].blocks[blockKey]
|
|
||||||
drawBlock(theBlock)
|
|
||||||
}) %>
|
|
||||||
</div>
|
|
||||||
<link rel="stylesheet" href="<%-window.libURL%>assets/css/bs5.powerVideo.css">
|
|
||||||
<script src="<%-window.libURL%>assets/js/bs5.powerVideo.js"></script>
|
|
||||||
</main>
|
|
||||||
Loading…
Reference in New Issue