mirror of
https://gitlab.com/Shinobi-Systems/ShinobiCE.git
synced 2025-03-09 15:40:15 +00:00
Support Shinobi at https://licenses.shinobi.video/subscribe
This commit is contained in:
Moe
parent
ef40f3f231
commit
167603dfb0
118 changed files with 16152 additions and 5441 deletions
5
web/libs/js/bootstrap-slider.min.js
vendored
Normal file
5
web/libs/js/bootstrap-slider.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
$(document).ready(function() {
|
||||
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
|
||||
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
|
||||
var monthNames = [ lang.January, lang.February, lang.March, lang.April, lang.May, lang.June, lang.July, lang.August, lang.September, lang.October, lang.November, lang.December ];
|
||||
var dayNames= [lang.Sunday, lang.Monday, lang.Tuesday, lang.Wednesday, lang.Thursday, lang.Friday, lang.Saturday]
|
||||
|
||||
var newDate = new Date();
|
||||
newDate.setDate(newDate.getDate());
|
||||
|
|
|
|||
|
|
@ -12,6 +12,16 @@ $.ccio.permissionCheck = function(toCheck,monitorId){
|
|||
}
|
||||
return false
|
||||
}
|
||||
$.parseJSON = function(string){
|
||||
var parsed
|
||||
try{
|
||||
parsed = JSON.parse(string)
|
||||
}catch(err){
|
||||
|
||||
}
|
||||
if(!parsed)parsed = string
|
||||
return parsed
|
||||
}
|
||||
$.ccio.op = function(r,rr,rrr){
|
||||
if(!rrr){rrr={};};if(typeof rrr === 'string'){rrr={n:rrr}};if(!rrr.n){rrr.n='ShinobiOptions_'+location.host}
|
||||
ii={o:localStorage.getItem(rrr.n)};try{ii.o=JSON.parse(ii.o)}catch(e){ii.o={}}
|
||||
|
|
@ -113,25 +123,27 @@ $.ccio.base64ArrayBuffer = function(arrayBuffer) {
|
|||
|
||||
return base64
|
||||
}
|
||||
$.ccio.snapshot=function(e,cb){
|
||||
var image_data,url;
|
||||
e.details=JSON.parse(e.mon.details);
|
||||
$.ccio.snapshot = function(options,cb){
|
||||
var image_data
|
||||
var url
|
||||
var monitor = options.mon || options.monitor || options
|
||||
var details = $.parseJSON(monitor.details)
|
||||
if($.ccio.op().jpeg_on!==true){
|
||||
var extend=function(image_data,width,height){
|
||||
var len = image_data.length
|
||||
var arraybuffer = new Uint8Array( len );
|
||||
var arraybuffer = new Uint8Array( len )
|
||||
for (var i = 0; i < len; i++) {
|
||||
arraybuffer[i] = image_data.charCodeAt(i);
|
||||
arraybuffer[i] = image_data.charCodeAt(i)
|
||||
}
|
||||
try {
|
||||
var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
|
||||
var blob = new Blob([arraybuffer], {type: 'application/octet-stream'})
|
||||
} catch (e) {
|
||||
var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
|
||||
var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder)
|
||||
bb.append(arraybuffer);
|
||||
var blob = bb.getBlob('application/octet-stream');
|
||||
}
|
||||
url = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
finish(url,image_data,width,height);
|
||||
url = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
finish(url,image_data,width,height)
|
||||
try{
|
||||
setTimeout(function(){
|
||||
URL.revokeObjectURL(url)
|
||||
|
|
@ -139,142 +151,191 @@ $.ccio.snapshot=function(e,cb){
|
|||
}catch(er){}
|
||||
}
|
||||
var finish = function(url,image_data,width,height){
|
||||
cb(url,image_data,width,height);
|
||||
cb(url,image_data,width,height)
|
||||
}
|
||||
switch(JSON.parse(e.mon.details).stream_type){
|
||||
switch(details.stream_type){
|
||||
case'hls':case'flv':case'mp4':
|
||||
$.ccio.snapshotVideo($('[mid='+e.mon.mid+'].monitor_item video')[0],function(base64,video_data,width,height){
|
||||
$.ccio.snapshotVideo($('[mid='+monitor.mid+'][ke='+monitor.ke+'][auth='+monitor.user.auth_token+'].monitor_item video')[0],function(base64,video_data,width,height){
|
||||
extend(video_data,width,height)
|
||||
})
|
||||
break;
|
||||
case'mjpeg':
|
||||
$('#temp').html('<canvas></canvas>')
|
||||
var c = $('#temp canvas')[0];
|
||||
var img = $('img',$('[mid='+e.mon.mid+'].monitor_item .stream-element').contents())[0];
|
||||
c.width = img.width;
|
||||
c.height = img.height;
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.drawImage(img, 0, 0,c.width,c.height);
|
||||
var c = $('#temp canvas')[0]
|
||||
var img = $('img',$('[mid='+monitor.mid+'][ke='+monitor.ke+'][auth='+monitor.user.auth_token+'].monitor_item .stream-element').contents())[0]
|
||||
c.width = img.width
|
||||
c.height = img.height
|
||||
var ctx = c.getContext('2d')
|
||||
ctx.drawImage(img, 0, 0,c.width,c.height)
|
||||
extend(atob(c.toDataURL('image/jpeg').split(',')[1]),c.width,c.height)
|
||||
break;
|
||||
case'h265':
|
||||
var c = $('[mid='+e.mon.mid+'].monitor_item canvas')[0];
|
||||
var ctx = c.getContext('2d');
|
||||
var c = $('[mid='+monitor.mid+'][ke='+monitor.ke+'][auth='+monitor.user.auth_token+'].monitor_item canvas')[0]
|
||||
var ctx = c.getContext('2d')
|
||||
extend(atob(c.toDataURL('image/jpeg').split(',')[1]),c.width,c.height)
|
||||
break;
|
||||
case'b64':
|
||||
base64 = e.mon.last_frame.split(',')[1];
|
||||
var image_data = new Image();
|
||||
image_data.src = base64;
|
||||
base64 = monitor.last_frame.split(',')[1]
|
||||
var image_data = new Image()
|
||||
image_data.src = base64
|
||||
extend(atob(base64),image_data.width,image_data.height)
|
||||
break;
|
||||
case'jpeg':case'h265':
|
||||
url=e.p.find('.stream-element').attr('src');
|
||||
image_data = new Image();
|
||||
image_data.src = url;
|
||||
finish(url,image_data,image_data.width,image_data.height);
|
||||
case'jpeg':
|
||||
url=e.p.find('.stream-element').attr('src')
|
||||
image_data = new Image()
|
||||
image_data.src = url
|
||||
finish(url,image_data,image_data.width,image_data.height)
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
url=e.p.find('.stream-element').attr('src');
|
||||
image_data = new Image();
|
||||
image_data.src = url;
|
||||
cb(url,image_data,image_data.width,image_data.height);
|
||||
url = e.p.find('.stream-element').attr('src')
|
||||
image_data = new Image()
|
||||
image_data.src = url
|
||||
cb(url,image_data,image_data.width,image_data.height)
|
||||
}
|
||||
}
|
||||
$.ccio.snapshotVideo=function(videoElement,cb){
|
||||
var image_data;
|
||||
$.ccio.snapshotVideo = function(videoElement,cb){
|
||||
var image_data
|
||||
var base64
|
||||
$('#temp').html('<canvas></canvas>')
|
||||
var c = $('#temp canvas')[0];
|
||||
var img = videoElement;
|
||||
c.width = img.videoWidth;
|
||||
c.height = img.videoHeight;
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.drawImage(img, 0, 0,c.width,c.height);
|
||||
var c = $('#temp canvas')[0]
|
||||
var img = videoElement
|
||||
c.width = img.videoWidth
|
||||
c.height = img.videoHeight
|
||||
var ctx = c.getContext('2d')
|
||||
ctx.drawImage(img, 0, 0,c.width,c.height)
|
||||
base64=c.toDataURL('image/jpeg')
|
||||
image_data=atob(base64.split(',')[1]);
|
||||
var arraybuffer = new ArrayBuffer(image_data.length);
|
||||
var view = new Uint8Array(arraybuffer);
|
||||
image_data=atob(base64.split(',')[1])
|
||||
var arraybuffer = new ArrayBuffer(image_data.length)
|
||||
var view = new Uint8Array(arraybuffer)
|
||||
for (var i=0; i<image_data.length; i++) {
|
||||
view[i] = image_data.charCodeAt(i) & 0xff;
|
||||
view[i] = image_data.charCodeAt(i) & 0xff
|
||||
}
|
||||
try {
|
||||
var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
|
||||
var blob = new Blob([arraybuffer], {type: 'application/octet-stream'})
|
||||
} catch (e) {
|
||||
var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
|
||||
bb.append(arraybuffer);
|
||||
var blob = bb.getBlob('application/octet-stream');
|
||||
var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder)
|
||||
bb.append(arraybuffer)
|
||||
var blob = bb.getBlob('application/octet-stream')
|
||||
}
|
||||
cb(base64,image_data,c.width,c.height);
|
||||
cb(base64,image_data,c.width,c.height)
|
||||
}
|
||||
$.ccio.magnifyStream = function(e){
|
||||
if(!e.p){
|
||||
e.e=$(this),
|
||||
e.p=e.e.parents('[mid]')
|
||||
$.ccio.magnifyStream = function(options,user){
|
||||
if(!user)user = $user
|
||||
if(!options.p && !options.parent){
|
||||
var el = $(this),
|
||||
parent = el.parents('[mid]')
|
||||
}else{
|
||||
parent = options.p || options.parent
|
||||
}
|
||||
if(e.animate === true){
|
||||
if(!options.attribute){
|
||||
options.attribute = ''
|
||||
}
|
||||
if(options.animate === true){
|
||||
var zoomGlassAnimate = 'animate'
|
||||
}else{
|
||||
var zoomGlassAnimate = 'css'
|
||||
}
|
||||
if(e.auto === true){
|
||||
if(!options.magnifyOffsetElement){
|
||||
options.magnifyOffsetElement = '.stream-block'
|
||||
}
|
||||
if(!options.targetForZoom){
|
||||
options.targetForZoom = '.stream-element'
|
||||
}
|
||||
if(options.auto === true){
|
||||
var streamBlockOperator = 'position'
|
||||
}else{
|
||||
var streamBlockOperator = 'offset'
|
||||
}
|
||||
if(e.useCanvas === true){
|
||||
var magnifiedElement = 'canvas'
|
||||
var magnifiedElement
|
||||
if(!options.videoUrl){
|
||||
if(options.useCanvas === true){
|
||||
magnifiedElement = 'canvas'
|
||||
}else{
|
||||
magnifiedElement = 'iframe'
|
||||
}
|
||||
}else{
|
||||
var magnifiedElement = 'iframe'
|
||||
magnifiedElement = 'video'
|
||||
}
|
||||
e.ke=e.p.attr('ke'),//group key
|
||||
e.mid=e.p.attr('mid'),//monitor id
|
||||
e.auth=e.p.attr('auth'),//authkey
|
||||
e.mon=$.ccio.mon[e.ke+e.mid+e.auth]//monitor configuration
|
||||
if(e.zoomAmount)e.mon.zoomAmount=3;
|
||||
if(!e.mon.zoomAmount)e.mon.zoomAmount=3;
|
||||
e.height=parseFloat(e.p.attr('realHeight')) * e.mon.zoomAmount//height of stream
|
||||
e.width=parseFloat(e.p.attr('realWidth')) * e.mon.zoomAmount;//width of stream
|
||||
var targetForZoom = e.p.find('.stream-element');
|
||||
zoomGlass = e.p.find(".zoomGlass");
|
||||
if(!options.mon && !options.monitor){
|
||||
var groupKey = parent.attr('ke')//group key
|
||||
var monitorId = parent.attr('mid')//monitor id
|
||||
var sessionKey = parent.attr('auth')//authkey
|
||||
var monitor = $.ccio.mon[groupKey + monitorId + sessionKey]//monitor configuration
|
||||
}else{
|
||||
var monitor = options.mon || options.monitor
|
||||
var groupKey = monitor.ke//group key
|
||||
var monitorId = monitor.mid//monitor id
|
||||
var sessionKey = monitor.auth//authkey
|
||||
}
|
||||
if(options.zoomAmount)zoomAmount = 3
|
||||
if(!zoomAmount)zoomAmount = 3
|
||||
var realHeight = parent.attr('realHeight')
|
||||
var realWidth = parent.attr('realWidth')
|
||||
var height = parseFloat(realHeight) * zoomAmount//height of stream
|
||||
var width = parseFloat(realWidth) * zoomAmount//width of stream
|
||||
var targetForZoom = parent.find(options.targetForZoom)
|
||||
zoomGlass = parent.find(".zoomGlass")
|
||||
var zoomFrame = function(){
|
||||
var magnify_offset = e.p.find('.stream-block')[streamBlockOperator]();
|
||||
var mx = e.pageX - magnify_offset.left;
|
||||
var my = e.pageY - magnify_offset.top;
|
||||
var rx = Math.round(mx/targetForZoom.width()*e.width - zoomGlass.width()/2)*-1;
|
||||
var ry = Math.round(my/targetForZoom.height()*e.height - zoomGlass.height()/2)*-1;
|
||||
var px = mx - zoomGlass.width()/2;
|
||||
var py = my - zoomGlass.height()/2;
|
||||
zoomGlass[zoomGlassAnimate]({left: px, top: py}).find(magnifiedElement)[zoomGlassAnimate]({left: rx, top: ry});
|
||||
var magnify_offset = parent.find(options.magnifyOffsetElement)[streamBlockOperator]()
|
||||
var mx = options.pageX - magnify_offset.left
|
||||
var my = options.pageY - magnify_offset.top
|
||||
var rx = Math.round(mx/targetForZoom.width()*width - zoomGlass.width()/2)*-1
|
||||
var ry = Math.round(my/targetForZoom.height()*height - zoomGlass.height()/2)*-1
|
||||
var px = mx - zoomGlass.width()/2
|
||||
var py = my - zoomGlass.height()/2
|
||||
zoomGlass[zoomGlassAnimate]({left: px, top: py}).find(magnifiedElement)[zoomGlassAnimate]({left: rx, top: ry})
|
||||
}
|
||||
if(!e.height||!e.width||zoomGlass.length===0){
|
||||
$.ccio.snapshot(e,function(url,buffer,width,height){
|
||||
e.width = width * e.mon.zoomAmount;
|
||||
e.height = height * e.mon.zoomAmount;
|
||||
e.p.attr('realWidth',width)
|
||||
e.p.attr('realHeight',height)
|
||||
zoomGlass = e.p.find(".zoomGlass");
|
||||
if(zoomGlass.length===0){
|
||||
if(e.useCanvas === true){
|
||||
e.p.append('<div class="zoomGlass"><canvas class="blenderCanvas"></canvas></div>');
|
||||
}else{
|
||||
e.p.append('<div class="zoomGlass"><iframe src="'+e.auth+'/embed/'+e.ke+'/'+e.mid+'/fullscreen|jquery|relative"/><div class="hoverShade"></div></div>');
|
||||
}
|
||||
zoomGlass = e.p.find(".zoomGlass");
|
||||
}
|
||||
zoomGlass.find(magnifiedElement).css({height:e.height,width:e.width});
|
||||
zoomFrame()
|
||||
var commit = function(height,width){
|
||||
zoomGlass.find(magnifiedElement).css({
|
||||
height: height,
|
||||
width: width
|
||||
})
|
||||
}else{
|
||||
zoomGlass.find(magnifiedElement).css({height:e.height,width:e.width});
|
||||
zoomFrame()
|
||||
}
|
||||
if(!height || !width || zoomGlass.length === 0){
|
||||
zoomGlass = parent.find(".zoomGlass")
|
||||
var zoomGlassShell = function(contents){return `<div ${options.attribute} class="zoomGlass">${contents}</div>`}
|
||||
if(!options.videoUrl){
|
||||
$.ccio.snapshot(monitor,function(url,buffer,w,h){
|
||||
parent.attr('realWidth',w)
|
||||
parent.attr('realHeight',h)
|
||||
if(zoomGlass.length === 0){
|
||||
if(options.useCanvas === true){
|
||||
parent.append(zoomGlassShell('<canvas class="blenderCanvas"></canvas>'))
|
||||
}else{
|
||||
parent.append(zoomGlassShell('<iframe src="'+$.ccio.init('location',user)+sessionKey+'/embed/'+groupKey+'/'+monitorId+'/fullscreen|jquery|relative"/><div class="hoverShade"></div>'))
|
||||
}
|
||||
zoomGlass = parent.find(".zoomGlass")
|
||||
}
|
||||
commit(h,w)
|
||||
})
|
||||
}else{
|
||||
if(zoomGlass.length === 0){
|
||||
parent.append(zoomGlassShell(`<video src="${options.videoUrl}" preload></video>`))
|
||||
}
|
||||
if(options.setTime){
|
||||
var video = zoomGlass.find('video')[0]
|
||||
video.currentTime = options.setTime
|
||||
height = video.videoHeight
|
||||
width = video.videoWidth
|
||||
parent.attr('realWidth',width)
|
||||
parent.attr('realHeight',height)
|
||||
}
|
||||
commit(height,width)
|
||||
}
|
||||
}else{
|
||||
if(options.setTime){
|
||||
var video = zoomGlass.find('video')
|
||||
var src = video.attr('src')
|
||||
video[0].currentTime = options.setTime
|
||||
if(options.videoUrl !== src)zoomGlass.html(`<video src="${options.videoUrl}" preload></video>`)
|
||||
}
|
||||
commit(height,width)
|
||||
}
|
||||
}
|
||||
$.ccio.destroyStream = function(d,user,killElement){
|
||||
if(d.mid && !d.id)d.id = d.mid
|
||||
console.log(d.ke+d.id+user.auth_token)
|
||||
console.log($.ccio.mon[d.ke+d.id+user.auth_token])
|
||||
if($.ccio.mon[d.ke+d.id+user.auth_token]){
|
||||
console.log('destroy')
|
||||
$.ccio.init('closeVideo',{mid:d.id,ke:d.ke},user);
|
||||
|
|
@ -297,3 +358,59 @@ $.ccio.destroyStream = function(d,user,killElement){
|
|||
}
|
||||
}
|
||||
}
|
||||
$(document).ready(function(){
|
||||
$('body')
|
||||
.on('click', '.table-header-sorter', function () {
|
||||
var $sort = jQuery(this).find('i');
|
||||
var currentSort = undefined;
|
||||
if ($sort.hasClass('fa-sort-asc')) {
|
||||
currentSort = 'asc';
|
||||
} else if ($sort.hasClass('fa-sort-desc')) {
|
||||
currentSort = 'desc';
|
||||
}
|
||||
|
||||
jQuery(this)
|
||||
.parent()
|
||||
.find('i.fa')
|
||||
.removeClass('fa-sort-asc')
|
||||
.removeClass('fa-sort-desc')
|
||||
.addClass('fa-sort');
|
||||
|
||||
jQuery(this)
|
||||
.find('i.fa')
|
||||
.toggleClass('fa-sort', currentSort === 'desc')
|
||||
.toggleClass('fa-sort-asc', currentSort === undefined)
|
||||
.toggleClass('fa-sort-desc', currentSort === 'asc');
|
||||
|
||||
const field = jQuery(this).data('field');
|
||||
const $body = jQuery(this)
|
||||
.closest('.table')
|
||||
.find('tbody');
|
||||
|
||||
const sortedRows = $body
|
||||
.find('tr')
|
||||
.detach()
|
||||
.sort(function(a,b) {
|
||||
const data1 = jQuery(a).data('sort');
|
||||
const data2 = jQuery(b).data('sort');
|
||||
if (currentSort === undefined)
|
||||
return data1[field] > data2[field] ? 1 : data1[field] < data2[field] ? -1 : 0;
|
||||
else if (currentSort === 'asc')
|
||||
return data1[field] > data2[field] ? -1 : data1[field] < data2[field] ? 1 : 0;
|
||||
else
|
||||
return data1._no > data2._no ? 1 : data1._no < data2._no ? -1 : 0;
|
||||
});
|
||||
$body.append(sortedRows);
|
||||
})
|
||||
.on('click','[tab-chooser]',function(){
|
||||
var el = $(this)
|
||||
var parent = el.parents('[tab-chooser-parent]')
|
||||
var tabName = el.attr('tab-chooser')
|
||||
var allTabsInParent = parent.find('[tab-section]')
|
||||
var allTabChoosersInParent = parent.find('[tab-chooser]')
|
||||
allTabsInParent.hide()
|
||||
allTabChoosersInParent.removeClass('active')
|
||||
el.addClass('active')
|
||||
parent.find(`[tab-section="${tabName}"]`).show()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@ $.ccio={
|
|||
mon:{},
|
||||
useUTC: <%- config.useUTC || false %>,
|
||||
definitions: <%-JSON.stringify(define)%>,
|
||||
libURL: '<%-window.libURL%>',
|
||||
logMemory: []
|
||||
libURL: '<%-window.libURL%>'
|
||||
};
|
||||
<% if(config.DropboxAppKey){ %>
|
||||
$.ccio.DropboxAppKey = '<%-window.DropboxAppKey%>'
|
||||
|
|
@ -118,7 +117,6 @@ $(document).ready(function(e){
|
|||
}
|
||||
})
|
||||
}
|
||||
//on window resize
|
||||
document.addEventListener("fullscreenchange", onFullScreenChange, false);
|
||||
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
|
||||
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
$(document).ready(function(){
|
||||
$.confirm={e:$('#confirm_window')};
|
||||
$.confirm.title=$.confirm.e.find('.modal-title span')
|
||||
$.confirm.body=$.confirm.e.find('.modal-body')
|
||||
$.confirm.footer=$.confirm.e.find('.modal-footer')
|
||||
$.confirm.click=function(x,e){
|
||||
$.confirm.footer.find('.confirmaction').remove()
|
||||
var createButton = function(x,place,callback){
|
||||
$.confirm.footer.prepend('<button type="button" class="btn '+x.class+' confirmaction confirmaction'+place+'">'+x.title+'</button>')
|
||||
if(!x.class){x.class='btn-success'}
|
||||
if(!x.title){x.title='Save changes'}
|
||||
$.confirm.footer.find('.confirmaction'+place).click(function(){
|
||||
$.confirm.e.modal('hide')
|
||||
callback();
|
||||
})
|
||||
}
|
||||
if(x instanceof Array){
|
||||
$.each(x,function(place,x){
|
||||
createButton(x,place,x.callback)
|
||||
})
|
||||
}else{
|
||||
createButton(x,0,e)
|
||||
}
|
||||
}
|
||||
$.confirm.create = function(options){
|
||||
if(options.title && options.body){
|
||||
$.confirm.e.modal('show')
|
||||
$.confirm.title.text(options.title)
|
||||
$.confirm.body.html(options.body)
|
||||
}
|
||||
if(options.clickOptions && options.clickCallback)$.confirm.click(options.clickOptions,options.clickCallback)
|
||||
}
|
||||
$.confirm.e.on('hidden.bs.modal', function () {
|
||||
$.confirm.footer.find('.confirmaction').remove()
|
||||
})
|
||||
})
|
||||
129
web/libs/js/dash2.downloadAndZip.js
Normal file
129
web/libs/js/dash2.downloadAndZip.js
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
$(document).ready(function(){
|
||||
var downloadFile = function(remoteLink,onProgress,onSuccess){
|
||||
if(!onProgress)onProgress = function(){}
|
||||
if(!onSuccess)onSuccess = function(){}
|
||||
var xhr = new window.XMLHttpRequest();
|
||||
xhr.addEventListener("progress", function(evt) {
|
||||
if (evt.lengthComputable) {
|
||||
var percentComplete = (evt.loaded / evt.total * 100).toFixed(2);
|
||||
onProgress(percentComplete)
|
||||
}
|
||||
}, false)
|
||||
xhr.addEventListener('readystatechange', function(e) {
|
||||
if(xhr.readyState == 2 && xhr.status == 200) {
|
||||
// Download is being started
|
||||
}
|
||||
else if(xhr.readyState == 3) {
|
||||
// Download is under progress
|
||||
}
|
||||
else if(xhr.readyState == 4) {
|
||||
onSuccess(xhr.response)
|
||||
// Downloaing has finished
|
||||
|
||||
// request.response holds the file data
|
||||
}
|
||||
})
|
||||
xhr.responseType = 'blob'
|
||||
|
||||
// Downloading a JPEG file
|
||||
xhr.open('get', remoteLink)
|
||||
|
||||
xhr.send()
|
||||
}
|
||||
var downloadBulkVideos = function(videos,onProgress,onSuccess){
|
||||
var fileBuffers = {}
|
||||
var numberOfCompletedDownloads = 0
|
||||
var getVideo = function(video){
|
||||
var url = video.href
|
||||
downloadFile(url,function(percent){
|
||||
if(onProgress)onProgress(video,percent)
|
||||
},function(buffer){
|
||||
++numberOfCompletedDownloads
|
||||
fileBuffers[url] = Object.assign(video,{buffer: buffer})
|
||||
console.log(fileBuffers[url] )
|
||||
console.log(videos.length, numberOfCompletedDownloads)
|
||||
if(videos.length === numberOfCompletedDownloads){
|
||||
if(onSuccess)onSuccess(fileBuffers)
|
||||
}else{
|
||||
getVideo(videos[numberOfCompletedDownloads])
|
||||
}
|
||||
})
|
||||
}
|
||||
getVideo(videos[numberOfCompletedDownloads])
|
||||
}
|
||||
var saveFile = function(blob, filename) {
|
||||
console.log(blob,filename)
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
window.navigator.msSaveOrOpenBlob(blob, filename);
|
||||
} else {
|
||||
const a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
setTimeout(() => {
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
var zipVideosAndDownload = function(videos,onSuccess){
|
||||
var zip = new JSZip();
|
||||
var zipFileName = `ShinobiVideos_${$.ccio.timeObject(new Date()).format('YYYY-MM-DDTHH-mm-ss')}.zip`
|
||||
var foldersCreated = {}
|
||||
var downloadBars = {}
|
||||
var progressBarHtml = []
|
||||
var videosCopy = Object.assign(videos,{})
|
||||
$.each(videosCopy,function(n,video){
|
||||
var fileZipName = `${$.ccio.timeObject(video.time).format('YYYY-MM-DDTHH-mm-ss')}.${video.ext}`
|
||||
var fileId = video.ke + video.mid + moment(video.time).format('YYYY-MM-DDTHH-mm-ss')
|
||||
video.fileId = fileId
|
||||
video.fileZipName = fileZipName
|
||||
if(!foldersCreated[video.ke]){
|
||||
foldersCreated[video.ke] = {}
|
||||
foldersCreated[video.ke]._zipFolder = zip.folder(video.ke)
|
||||
}
|
||||
if(!foldersCreated[video.ke][video.mid]){
|
||||
foldersCreated[video.ke][video.mid] = {}
|
||||
foldersCreated[video.ke][video.mid]._zipFolder = foldersCreated[video.ke]._zipFolder.folder(video.mid)
|
||||
}
|
||||
progressBarHtml.push(`<br><small></small><div id="download-${fileId}" class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>`)
|
||||
})
|
||||
new PNotify({
|
||||
type:'notice',
|
||||
title: lang['Downloading Videos'],
|
||||
text: lang['Please Wait for Completion'] + progressBarHtml.join(''),
|
||||
hide: false,
|
||||
modules: {
|
||||
Buttons: {
|
||||
closer: true,
|
||||
sticker: false
|
||||
},
|
||||
Mobile: {
|
||||
swipeDismiss: false
|
||||
}
|
||||
},
|
||||
})
|
||||
$.each(videosCopy,function(n,video){
|
||||
downloadBars[video.fileId] = $(`#download-${video.fileId} .progress-bar`)
|
||||
})
|
||||
downloadBulkVideos(videosCopy,function(video,percent){
|
||||
downloadBars[video.fileId].width(percent + '%').attr('aria-valuenow', percent)
|
||||
},function(videosWithBuffers){
|
||||
new PNotify({
|
||||
type:'success',
|
||||
title: lang['Zipping Videos'],
|
||||
text: lang['Please Wait for Completion']
|
||||
})
|
||||
$.each(videosWithBuffers,function(n,video){
|
||||
foldersCreated[video.ke][video.mid]._zipFolder.file(video.fileZipName, video.buffer)
|
||||
})
|
||||
zip.generateAsync({type:"blob"}).then(function(content) {
|
||||
saveFile(content, zipFileName)
|
||||
if(onSuccess)onSuccess(content)
|
||||
});
|
||||
})
|
||||
}
|
||||
$.zipVideosAndDownload = zipVideosAndDownload
|
||||
})
|
||||
|
|
@ -20,8 +20,13 @@ $.ccio.tm=function(x,d,z,user){
|
|||
d.per=parseInt(d.hr/24*100);
|
||||
d.circle='<div title="at '+d.hr+' hours of '+d.startMoment.format('MMMM DD')+'" '+href+' video="launch" class="progress-circle progress-'+d.per+'"><span>'+d.hr+'</span></div>'
|
||||
tmp+='<li class="video-item glM'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" status="'+d.status+'" status="'+d.status+'" file="'+d.filename+'">'+d.circle+'<div><span title="'+d.endMoment.format()+'" class="livestamp"></span></div><div><div class="small"><b>'+lang.Start+'</b> : '+d.startMoment.format('h:mm:ss , MMMM Do YYYY')+'</div><div class="small"><b>'+lang.End+'</b> : '+d.endMoment.format('h:mm:ss , MMMM Do YYYY')+'</div></div><div><span class="pull-right">'+(parseInt(d.size)/1000000).toFixed(2)+'mb</span><div class="controls btn-group"><a class="btn btn-sm btn-primary" video="launch" '+href+'><i class="fa fa-play-circle"></i></a> <a download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-download"></i></a>'
|
||||
if($.ccio.DropboxAppKey){ tmp+='<a video="download" host="dropbox" download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-dropbox"></i></a>' }
|
||||
tmp+='<a title="'+lang['Delete Video']+'" video="delete" href="'+$.ccio.init('videoHrefToDelete',url)+'" class="btn btn-sm btn-danger permission_video_delete"><i class="fa fa-trash"></i></a></div></div></li>';
|
||||
if($.ccio.DropboxAppKey){
|
||||
tmp+='<a video="download" host="dropbox" download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-dropbox"></i></a>'
|
||||
}
|
||||
if($.ccio.permissionCheck('video_delete',d.mid)){
|
||||
tmp += '<a title="'+lang['Delete Video']+'" video="delete" href="'+$.ccio.init('videoHrefToDelete',url)+'" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>'
|
||||
}
|
||||
tmp += '</div></div></li>';
|
||||
$(z).each(function(n,v){
|
||||
v=$(v);
|
||||
if(v.find('.video-item').length>10){v.find('.video-item:last').remove()}
|
||||
|
|
@ -33,25 +38,25 @@ $.ccio.tm=function(x,d,z,user){
|
|||
tmp+='<div class="btn-group btn-group-xs">'
|
||||
var buttons = {
|
||||
"Pop": {
|
||||
"label": "Pop",
|
||||
"label": lang['Pop'],
|
||||
"attr": "monitor=\"pop\"",
|
||||
"class": "default",
|
||||
"icon": "external-link"
|
||||
},
|
||||
"Power Viewer": {
|
||||
"label": "Power Viewer",
|
||||
"attr": "monitor=\"powerview\"",
|
||||
"class": "default",
|
||||
"icon": "map-marker"
|
||||
},
|
||||
// "Power Viewer": {
|
||||
// "label": lang['Power Viewer'],
|
||||
// "attr": "monitor=\"powerview\"",
|
||||
// "class": "default",
|
||||
// "icon": "map-marker"
|
||||
// },
|
||||
"Videos List": {
|
||||
"label": "Videos List",
|
||||
"label": lang['Videos List'],
|
||||
"attr": "monitor=\"videos_table\"",
|
||||
"class": "default",
|
||||
"icon": "film"
|
||||
},
|
||||
"Monitor Settings": {
|
||||
"label": "Monitor Settings",
|
||||
"label": lang['Monitor Settings'],
|
||||
"attr": "monitor=\"edit\"",
|
||||
"class": "default",
|
||||
"icon": "wrench"
|
||||
|
|
@ -89,50 +94,56 @@ $.ccio.tm=function(x,d,z,user){
|
|||
tmp+='<div class="btn-group btn-group-sm">'//start of btn list
|
||||
var buttons = {
|
||||
"Snapshot": {
|
||||
"label": "Snapshot",
|
||||
"label": lang['Snapshot'],
|
||||
"attr": "monitor=\"snapshot\"",
|
||||
"class": "primary",
|
||||
"icon": "camera"
|
||||
},
|
||||
"Show Logs": {
|
||||
"label": "Show Logs",
|
||||
"label": lang['Show Logs'],
|
||||
"attr": "monitor=\"show_data\"",
|
||||
"class": "warning",
|
||||
"icon": "exclamation-triangle"
|
||||
},
|
||||
"Control": {
|
||||
"label": "Control",
|
||||
"label": lang['Control'],
|
||||
"attr": "monitor=\"control_toggle\"",
|
||||
"class": "default arrows",
|
||||
"icon": "arrows"
|
||||
},
|
||||
"Status Indicator": {
|
||||
"label": "Status Indicator",
|
||||
"Reconnect Stream": {
|
||||
"label": lang['Reconnect Stream'],
|
||||
"attr": "monitor=\"watch_on\"",
|
||||
"class": "success signal",
|
||||
"icon": "plug"
|
||||
},
|
||||
"Pop": {
|
||||
"label": "Pop",
|
||||
"label": lang['Pop'],
|
||||
"attr": "monitor=\"pop\"",
|
||||
"class": "default",
|
||||
"icon": "external-link"
|
||||
},
|
||||
"Pop": {
|
||||
"label": lang['Zoom In'],
|
||||
"attr": "monitor=\"zoomStreamWithMouse\"",
|
||||
"class": "default",
|
||||
"icon": "search-plus"
|
||||
},
|
||||
"Calendar": {
|
||||
"label": "Calendar",
|
||||
"label": lang['Calendar'],
|
||||
"attr": "monitor=\"calendar\"",
|
||||
"class": "default ",
|
||||
"icon": "calendar"
|
||||
},
|
||||
"Power Viewer": {
|
||||
"label": "Power Viewer",
|
||||
"attr": "monitor=\"powerview\"",
|
||||
"class": "default",
|
||||
"icon": "map-marker"
|
||||
},
|
||||
// "Power Viewer": {
|
||||
// "label": lang['Power Viewer'],
|
||||
// "attr": "monitor=\"powerview\"",
|
||||
// "class": "default",
|
||||
// "icon": "map-marker"
|
||||
// },
|
||||
"Time-lapse": {
|
||||
"label": "Time-lapse",
|
||||
"attr": "monitor=\"timelapse\"",
|
||||
"label": lang['Time-lapse'],
|
||||
"attr": "monitor=\"timelapseJpeg\"",
|
||||
"class": "default",
|
||||
"icon": "angle-double-right"
|
||||
},
|
||||
|
|
@ -143,25 +154,25 @@ $.ccio.tm=function(x,d,z,user){
|
|||
"icon": "th"
|
||||
},
|
||||
"Videos List": {
|
||||
"label": "Videos List",
|
||||
"label": lang['Videos List'],
|
||||
"attr": "monitor=\"videos_table\"",
|
||||
"class": "default",
|
||||
"icon": "film"
|
||||
},
|
||||
"Monitor Settings": {
|
||||
"label": "Monitor Settings",
|
||||
"label": lang['Monitor Settings'],
|
||||
"attr": "monitor=\"edit\"",
|
||||
"class": "default",
|
||||
"icon": "wrench"
|
||||
},
|
||||
"Fullscreen": {
|
||||
"label": "Fullscreen",
|
||||
"label": lang['Fullscreen'],
|
||||
"attr": "monitor=\"fullscreen\"",
|
||||
"class": "default",
|
||||
"icon": "arrows-alt"
|
||||
},
|
||||
"Close": {
|
||||
"label": "Close",
|
||||
"label": lang['Close'],
|
||||
"attr": "monitor=\"watch_off\"",
|
||||
"class": "danger",
|
||||
"icon": "times"
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ $(document).ready(function(e){
|
|||
$.logWriter.floodTimeout = setTimeout(function(){
|
||||
delete($.logWriter.floodTimeout)
|
||||
$.logWriter.floodCounter = 0
|
||||
},1000)
|
||||
},2000)
|
||||
$.ccio.tm(4,d,'#logs,'+id+'.monitor_item .logs:visible,'+id+'#add_monitor:visible .logs',user)
|
||||
}
|
||||
//open all monitors
|
||||
|
|
@ -320,6 +320,32 @@ $(document).ready(function(e){
|
|||
user=$user
|
||||
}
|
||||
switch(e.a){
|
||||
case'zoomStreamWithMouse':
|
||||
var streamWindow = $('.monitor_item[mid="'+e.mid+'"][ke="'+e.ke+'"][auth="'+e.auth+'"]')
|
||||
if(e.mon.magnifyStreamEnabled){
|
||||
e.mon.magnifyStreamEnabled = false
|
||||
streamWindow
|
||||
.off('mousemove')
|
||||
.off('touchmove')
|
||||
.find('.zoomGlass').remove()
|
||||
}else{
|
||||
e.mon.magnifyStreamEnabled = true
|
||||
const magnifyStream = function(e){
|
||||
$.ccio.magnifyStream({
|
||||
p: streamWindow,
|
||||
zoomAmount: 1,
|
||||
auto: false,
|
||||
animate: false,
|
||||
pageX: e.pageX,
|
||||
pageY: e.pageY,
|
||||
attribute: 'monitor="zoomStreamWithMouse"'
|
||||
},user)
|
||||
}
|
||||
streamWindow
|
||||
.on('mousemove', magnifyStream)
|
||||
.on('touchmove', magnifyStream)
|
||||
}
|
||||
break;
|
||||
case'show_data':
|
||||
e.p.toggleClass('show_data')
|
||||
var dataBlocks = e.p.find('.stream-block,.mdl-data_window')
|
||||
|
|
@ -365,31 +391,17 @@ $(document).ready(function(e){
|
|||
})
|
||||
}
|
||||
break;
|
||||
case'timelapse':
|
||||
$.timelapse.e.modal('show')
|
||||
$.timelapse.monitors.find('.monitor').remove()
|
||||
case'timelapseJpeg':
|
||||
$.timelapseJpeg.e.modal('show')
|
||||
$.timelapseJpeg.monitors.find('.monitor').remove()
|
||||
$.each($.ccio.mon,function(n,v){
|
||||
$.timelapse.monitors.append('<option class="monitor" value="'+v.mid+'">'+v.name+'</option>')
|
||||
$.timelapseJpeg.monitors.append('<option class="monitor" value="'+v.mid+'">'+v.name+'</option>')
|
||||
})
|
||||
e.e=$.timelapse.monitors.find('.monitor').prop('selected',false)
|
||||
e.e=$.timelapseJpeg.monitors.find('.monitor').prop('selected',false)
|
||||
if(e.mid!==''){
|
||||
e.e=$.timelapse.monitors.find('.monitor[value="'+e.mid+'"]')
|
||||
e.e=$.timelapseJpeg.monitors.find('.monitor[value="'+e.mid+'"]')
|
||||
}
|
||||
e.e.first().prop('selected',true)
|
||||
$.timelapse.f.submit()
|
||||
break;
|
||||
case'powerview':
|
||||
$.pwrvid.e.modal('show')
|
||||
$.pwrvid.m.empty()
|
||||
$.each($.ccio.mon,function(n,v){
|
||||
$.pwrvid.m.append('<option value="'+v.mid+'">'+v.name+'</option>')
|
||||
})
|
||||
e.e=$.pwrvid.m.find('option').prop('selected',false)
|
||||
if(e.mid!==''){
|
||||
e.e=$.pwrvid.m.find('[value="'+e.mid+'"]')
|
||||
}
|
||||
e.e.first().prop('selected',true)
|
||||
$.pwrvid.f.submit()
|
||||
break;
|
||||
case'region':
|
||||
if(!e.mon){
|
||||
|
|
@ -508,6 +520,7 @@ $(document).ready(function(e){
|
|||
right: 'month,agendaWeek,agendaDay,listWeek'
|
||||
},
|
||||
defaultDate: $.ccio.timeObject(d.videos[0].time).format('YYYY-MM-DD'),
|
||||
locale: user.details.lang.substring(0, 2),
|
||||
navLinks: true,
|
||||
eventLimit: true,
|
||||
events:e.ar,
|
||||
|
|
@ -562,21 +575,21 @@ $(document).ready(function(e){
|
|||
var showThumbnail = $.ccio.op().showThumbnail === '1'
|
||||
$.vidview.e.removeClass('dark')
|
||||
e.t.attr('class','fa fa-film')
|
||||
var tmp = '<table class="table table-striped" style="max-height:500px">';
|
||||
var tmp = '<table class="table table-striped table-bordered">';
|
||||
tmp+='<thead>';
|
||||
tmp+='<tr>';
|
||||
tmp+='<th><div class="checkbox"><input id="videos_select_all" type="checkbox"><label for="videos_select_all"></label></div></th>';
|
||||
if(showThumbnail)tmp+='<th data-field="Thumbnail" data-sortable="true">'+lang.Thumbnail+'</th>';
|
||||
tmp+='<th data-field="Closed" data-sortable="true">'+lang.Closed+'</th>';
|
||||
tmp+='<th data-field="Ended" data-sortable="true">'+lang.Ended+'</th>';
|
||||
tmp+='<th data-field="Started" data-sortable="true">'+lang.Started+'</th>';
|
||||
tmp+='<th data-field="Monitor" data-sortable="true">'+lang.Monitor+'</th>';
|
||||
tmp+='<th data-field="Filename" data-sortable="true">'+lang.Filename+'</th>';
|
||||
tmp+='<th data-field="Size" data-sortable="true">'+lang['Size (mb)']+'</th>';
|
||||
tmp+='<th data-field="Preview" data-sortable="true">'+lang.Preview+'</th>';
|
||||
tmp+='<th data-field="Watch" data-sortable="true">'+lang.Watch+'</th>';
|
||||
tmp+='<th data-field="Download" data-sortable="true">'+lang.Download+'</th>';
|
||||
tmp+='<th class="permission_video_delete" data-field="Delete" data-sortable="true">'+lang.Delete+'</th>';
|
||||
if(showThumbnail)tmp+='<th>'+lang.Thumbnail+'</th>';
|
||||
tmp+='<th class="table-header-sorter" data-field="Closed">'+lang.Closed+'<i class="fa fa-sort"></i></th>';
|
||||
tmp+='<th class="table-header-sorter" data-field="Ended">'+lang.Ended+'<i class="fa fa-sort"></i></th>';
|
||||
tmp+='<th class="table-header-sorter" data-field="Started">'+lang.Started+'<i class="fa fa-sort"></i></th>';
|
||||
tmp+='<th class="table-header-sorter" data-field="Monitor">'+lang.Monitor+'<i class="fa fa-sort"></i></th>';
|
||||
tmp+='<th class="table-header-sorter" data-field="Filename">'+lang.Filename+'<i class="fa fa-sort"></i></th>';
|
||||
tmp+='<th class="table-header-sorter" data-field="Size">'+lang['Size (mb)']+'<i class="fa fa-sort"></i></th>';
|
||||
tmp+='<th>'+lang.Preview+'</th>';
|
||||
tmp+='<th>'+lang.Watch+'</th>';
|
||||
tmp+='<th>'+lang.Download+'</th>';
|
||||
tmp+='<th class="permission_video_delete">'+lang.Delete+'</th>';
|
||||
// tmp+='<th class="permission_video_delete" data-field="Fix" data-sortable="true">'+lang.Fix+'</th>';
|
||||
tmp+='</tr>';
|
||||
tmp+='</thead>';
|
||||
|
|
@ -588,10 +601,19 @@ $(document).ready(function(e){
|
|||
v.mon=$.ccio.mon[v.ke+v.mid+user.auth_token];
|
||||
v.start=v.time;
|
||||
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
|
||||
tmp+='<tr data-ke="'+v.ke+'" data-status="'+v.status+'" data-mid="'+v.mid+'" data-file="'+v.filename+'" data-auth="'+v.mon.user.auth_token+'">';
|
||||
const sortData = {
|
||||
_no: n,
|
||||
Closed: $.ccio.timeObject(v.end).unix(),
|
||||
Ended: $.ccio.timeObject(v.end).unix(),
|
||||
Started: $.ccio.timeObject(v.time).unix(),
|
||||
Monitor: v.mon.name,
|
||||
Filename: v.filename,
|
||||
Size: v.size,
|
||||
};
|
||||
tmp+='<tr data-sort="' + JSON.stringify(sortData).replace(/"/g, """) + '" data-ke="'+v.ke+'" data-status="'+v.status+'" data-mid="'+v.mid+'" data-file="'+v.filename+'" data-auth="'+v.mon.user.auth_token+'">';
|
||||
tmp+='<td><div class="checkbox"><input id="'+v.ke+'_'+v.filename+'" name="'+v.filename+'" value="'+v.mid+'" type="checkbox"><label for="'+v.ke+'_'+v.filename+'"></label></div></td>';
|
||||
if(showThumbnail)tmp+='<td class="text-center"><img class="thumbnail"></td>';
|
||||
tmp+='<td><span class="livestamp" title="'+$.ccio.timeObject(v.end).format('YYYY-MM-DD HH:mm:ss')+'"></span></td>';
|
||||
tmp+='<td>'+$.ccio.timeObject(v.end).fromNow()+'</td>';
|
||||
tmp+='<td title="'+v.end+'">'+$.ccio.timeObject(v.end).format('h:mm:ss A, MMMM Do YYYY')+'</td>';
|
||||
tmp+='<td title="'+v.time+'">'+$.ccio.timeObject(v.time).format('h:mm:ss A, MMMM Do YYYY')+'</td>';
|
||||
tmp+='<td>'+v.mon.name+'</td>';
|
||||
|
|
@ -608,6 +630,10 @@ $(document).ready(function(e){
|
|||
tmp+='</tbody>';
|
||||
tmp+='</table>';
|
||||
e.b.html(tmp)
|
||||
e.b.css({
|
||||
overflow: 'auto',
|
||||
height: '100%',
|
||||
}).scrollTop(0);
|
||||
if(showThumbnail){
|
||||
var i = 0
|
||||
var getThumbnail = function(){
|
||||
|
|
@ -624,8 +650,6 @@ $(document).ready(function(e){
|
|||
}
|
||||
getThumbnail()
|
||||
}
|
||||
$.ccio.init('ls');
|
||||
$.vidview.e.find('table').bootstrapTable();
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
|
@ -796,6 +820,4 @@ $(document).ready(function(e){
|
|||
.on('dblclick','.stream-hud',function(){
|
||||
$(this).parents('[mid]').find('[monitor="fullscreen"]').click();
|
||||
})
|
||||
//.on('mousemove',".magnifyStream",$.ccio.magnifyStream)
|
||||
//.on('touchmove',".magnifyStream",$.ccio.magnifyStream);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -336,11 +336,11 @@ $.ccio.init=function(x,d,user,k){
|
|||
case'drawMatrices':
|
||||
d.height=d.stream.height()
|
||||
d.width=d.stream.width()
|
||||
if(d.monitorDetails.detector_scale_x===''){d.monitorDetails.detector_scale_x=320}
|
||||
if(d.monitorDetails.detector_scale_y===''){d.monitorDetails.detector_scale_y=240}
|
||||
if(!d.details.imgWidth && d.monitorDetails.detector_scale_x===''){d.monitorDetails.detector_scale_x=320}
|
||||
if(!d.details.imgHeight && d.monitorDetails.detector_scale_y===''){d.monitorDetails.detector_scale_y=240}
|
||||
|
||||
d.widthRatio=d.width/d.monitorDetails.detector_scale_x
|
||||
d.heightRatio=d.height/d.monitorDetails.detector_scale_y
|
||||
d.widthRatio=d.width/d.details.imgWidth || d.monitorDetails.detector_scale_x
|
||||
d.heightRatio=d.height/d.details.imgHeight || d.monitorDetails.detector_scale_y
|
||||
|
||||
d.streamObjects.find('.stream-detected-object[name="'+d.details.name+'"]').remove()
|
||||
d.tmp=''
|
||||
|
|
|
|||
320
web/libs/js/dash2.monitorStates.js
Normal file
320
web/libs/js/dash2.monitorStates.js
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
$(document).ready(function(){
|
||||
$.monitorStates = {
|
||||
e: $('#monitorStates'),
|
||||
selector: $('#monitorStatesSelector'),
|
||||
monitors: $('#monitorStatesMonitors'),
|
||||
loaded: {}
|
||||
}
|
||||
$.monitorStates.f = $.monitorStates.e.find('form')
|
||||
$.monitorStates.loadPresets = function(callback){
|
||||
$.get($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke,function(d){
|
||||
var html = ''
|
||||
$.each(d.presets,function(n,v){
|
||||
$.monitorStates.loaded[v.name] = v
|
||||
html += '<option value="' + v.name + '">' + v.name + '</option>'
|
||||
})
|
||||
$.monitorStates.selector.find('optgroup').html(html)
|
||||
if(callback)callback()
|
||||
})
|
||||
}
|
||||
$.monitorStates.e.on('shown.bs.modal', function (e) {
|
||||
if($.monitorStates.selector.val() === '')$.monitorStates.loadPresets()
|
||||
})
|
||||
var buildOptions = function(field,possiblities,fieldData){
|
||||
if(!field)console.error('field',field)
|
||||
var fieldElement = ''
|
||||
possiblities.forEach(function(option){
|
||||
if(option.optgroup){
|
||||
fieldElement += '<optgroup label="' + option.name + '">'
|
||||
fieldElement += buildOptions(field,option.optgroup,fieldData)
|
||||
fieldElement += '</optgroup>'
|
||||
}else{
|
||||
var selected = ''
|
||||
if(option.value === fieldData || option.value === field.default){
|
||||
selected = 'selected'
|
||||
}
|
||||
fieldElement += '<option value="' + option.value + '" ' + selected + '>' + option.name + '</option>'
|
||||
}
|
||||
})
|
||||
return fieldElement
|
||||
}
|
||||
var drawBlock = function(monitorSettings,preloadedData){
|
||||
var html = ''
|
||||
var headerTitle = lang[monitorSettings.name]
|
||||
// if(monitorSettings.evaluation && !eval(monitorSettings.evaluation)){
|
||||
// return
|
||||
// }
|
||||
if(monitorSettings.blocks){
|
||||
monitorSettings.blocks.forEach(function(settingsBlock){
|
||||
html += drawBlock(settingsBlock)
|
||||
})
|
||||
}
|
||||
if(monitorSettings.info){
|
||||
monitorSettings.info.forEach(function(field){
|
||||
if(field.isFormGroupGroup === true){
|
||||
html += drawBlock(field)
|
||||
}else{
|
||||
if(field.notForSubAccount === true){
|
||||
var notForSubAccount = '!details.sub'
|
||||
if(!field.evaluation){
|
||||
field.evaluation = notForSubAccount
|
||||
}else{
|
||||
field.evaluation += ' && ' + notForSubAccount
|
||||
}
|
||||
}
|
||||
if(!field.name || field.evaluation && !eval(field.evaluation)){
|
||||
return
|
||||
}
|
||||
var attributes = []
|
||||
var listGroupClass = []
|
||||
var monitorRowFieldClass = []
|
||||
if(preloadedData){
|
||||
var isDetail = false
|
||||
var name = field.name
|
||||
var fieldData
|
||||
if(name.indexOf('detail=') > -1){
|
||||
isDetail = true
|
||||
name = name.replace('detail=','')
|
||||
if(preloadedData.details)fieldData = preloadedData.details[name]
|
||||
}else{
|
||||
fieldData = preloadedData[name]
|
||||
}
|
||||
if(fieldData){
|
||||
listGroupClass.push('active')
|
||||
if(fieldType !== 'select'){
|
||||
attributes.push(`value="${fieldData}"`)
|
||||
}
|
||||
}else{
|
||||
monitorRowFieldClass.push('display:none')
|
||||
}
|
||||
}else{
|
||||
monitorRowFieldClass.push('display:none')
|
||||
}
|
||||
if(field.placeholder || field.default){
|
||||
attributes.push(`placeholder="${field.placeholder || field.default}"`)
|
||||
}else if(field.example){
|
||||
attributes.push(`placeholder="Example : ${field.example}"`)
|
||||
}
|
||||
var possiblities = field.possible || []
|
||||
var fieldType = field.fieldType || 'text'
|
||||
var fieldElement = ''
|
||||
switch(fieldType){
|
||||
case'number':
|
||||
if(field.numberMin){
|
||||
attributes.push(`min="${field.numberMin}"`)
|
||||
}
|
||||
if(field.numberMax){
|
||||
attributes.push(`max="${field.numberMax}"`)
|
||||
}
|
||||
fieldElement = '<div><input type="number" class="form-control" ' + attributes.join(' ') + '></div>'
|
||||
break;
|
||||
case'password':
|
||||
fieldElement = '<div><input type="password" class="form-control" ' + attributes.join(' ') + '></div>'
|
||||
break;
|
||||
case'text':
|
||||
fieldElement = `<div><input class="form-control" ${attributes.join(' ')}></div>`
|
||||
break;
|
||||
case'textarea':
|
||||
fieldElement = '<div><textarea class="form-control" ' + attributes.join(' ') + '></textarea></div>'
|
||||
break;
|
||||
case'select':
|
||||
fieldElement = '<div><select class="form-control" ' + attributes.join(' ') + '>'
|
||||
fieldElement += buildOptions(field,possiblities,fieldData)
|
||||
fieldElement += '</select></div>'
|
||||
break;
|
||||
}
|
||||
if(fieldType === 'ul' || fieldType === 'div' || fieldType === 'btn' || field.name === 'mid'){
|
||||
|
||||
}else{
|
||||
if(headerTitle){
|
||||
html += `<div class="list-group-item ${listGroupClass.join(' ')}" data-name="${field.name}" data-value="${field.value || ""}">
|
||||
<h4>${headerTitle} : ${field.field}</h4>
|
||||
<div><small>${field.description}</small></div>
|
||||
<div class="state-monitor-row-fields-field mt-4" style="${monitorRowFieldClass.join(' ')}">${fieldElement}</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return html
|
||||
}
|
||||
$.monitorStates.drawMonitor = function(preloadedData){
|
||||
var MonitorSettings = $.ccio.definitions['Monitor Settings']
|
||||
var html = ''
|
||||
console.log(preloadedData)
|
||||
Object.keys(MonitorSettings.blocks).forEach(function(blockKey){
|
||||
var block = MonitorSettings.blocks[blockKey]
|
||||
html += drawBlock(block,preloadedData)
|
||||
})
|
||||
var monitorSelect = `<select class="state-monitor-row-select form-control">`
|
||||
$.each($.ccio.mon,function(n,monitor){
|
||||
monitorSelect += `<option value="${monitor.mid}">${monitor.name} (${monitor.mid})</option>`
|
||||
})
|
||||
monitorSelect += `</select>`
|
||||
var fullHtml = `<div class="form-group state-monitor-row">
|
||||
<div class="input-group state-monitor-row-select-container">
|
||||
${monitorSelect}
|
||||
<div class="input-group-btn">
|
||||
<a class="btn btn-danger delete-monitor">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group state-monitor-row-fields-container" style="height:300px;overflow: auto">
|
||||
${html}
|
||||
</div>
|
||||
</div>`
|
||||
return fullHtml
|
||||
}
|
||||
$.monitorStates.e.on('click','.add-monitor',function(e){
|
||||
var el = $(this)
|
||||
var html = $.monitorStates.drawMonitor()
|
||||
$.monitorStates.monitors.append(html)
|
||||
})
|
||||
$.monitorStates.e.on('click','.state-monitor-row-fields-container .list-group-item',function(e){
|
||||
var el = $(this)
|
||||
var listGroupParent = el.parents('.list-group')
|
||||
var fieldContainer = el.find('.state-monitor-row-fields-field')
|
||||
var name = el.attr('data-name')
|
||||
var value = el.attr('data-value')
|
||||
if(el.hasClass('active')){
|
||||
el.removeClass('active')
|
||||
fieldContainer.hide()
|
||||
}else{
|
||||
el.addClass('active')
|
||||
fieldContainer.show()
|
||||
}
|
||||
})
|
||||
$.monitorStates.e.on('click','.state-monitor-row-fields-container .form-control',function(e){
|
||||
e.preventDefault()
|
||||
return false
|
||||
})
|
||||
$.monitorStates.e.on('change','.json',function(e){
|
||||
var el = $(this)
|
||||
var val = el.val()
|
||||
try{
|
||||
el.css('border-color','green')
|
||||
var parsed = JSON.parse(val)
|
||||
el.val(JSON.stringify(parsed,null,3))
|
||||
}catch(err){
|
||||
el.css('border-color','red')
|
||||
return $.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
|
||||
}
|
||||
})
|
||||
$.monitorStates.e.on('click','.delete',function(e){
|
||||
$.confirm.e.modal('show');
|
||||
$.confirm.title.text(lang['Delete Monitor States Preset']);
|
||||
$.confirm.body.html(lang.deleteMonitorStateText1);
|
||||
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
|
||||
var form = $.monitorStates.f.serializeObject()
|
||||
$.post($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke + '/' + form.name + '/delete',function(d){
|
||||
$.ccio.log(d)
|
||||
if(d.ok === true){
|
||||
$.monitorStates.loadPresets()
|
||||
$.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
$.monitorStates.e.on('click','.delete-monitor',function(e){
|
||||
var el = $(this).parents('.state-monitor-row')
|
||||
$.confirm.e.modal('show');
|
||||
$.confirm.title.text(lang['Delete Monitor State']);
|
||||
$.confirm.body.html(lang.deleteMonitorStateText2)
|
||||
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
|
||||
el.remove()
|
||||
})
|
||||
})
|
||||
$.monitorStates.selector.change(function(e){
|
||||
var selected = $(this).val()
|
||||
var loaded = $.monitorStates.loaded[selected]
|
||||
var namespace = $.monitorStates.e.find('[name="name"]')
|
||||
var deleteButton = $.monitorStates.e.find('.delete')
|
||||
if(loaded){
|
||||
namespace.val(loaded.name)
|
||||
var html = ''
|
||||
$.each(loaded.details.monitors,function(n,v){
|
||||
console.log(v)
|
||||
html += $.monitorStates.drawMonitor(v)
|
||||
})
|
||||
$.monitorStates.monitors.html(html)
|
||||
deleteButton.show()
|
||||
}else{
|
||||
namespace.val('')
|
||||
$.monitorStates.monitors.empty()
|
||||
deleteButton.hide()
|
||||
}
|
||||
})
|
||||
$.monitorStates.getFormValuesFromJson = function(){
|
||||
var rows = $.monitorStates.monitors.find('.state-monitor-row')
|
||||
var monitors = []
|
||||
rows.each(function(n,v){
|
||||
var el = $(v)
|
||||
var textarea = el.find('textarea')
|
||||
try{
|
||||
var json = JSON.parse(el.find('.json').val())
|
||||
textarea.css('border-color','green')
|
||||
if(json.mid)monitors.push(json)
|
||||
}catch(err){
|
||||
textarea.css('border-color','red')
|
||||
$.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
|
||||
}
|
||||
})
|
||||
return monitors
|
||||
}
|
||||
$.monitorStates.getFormValues = function(){
|
||||
var rows = $.monitorStates.monitors.find('.state-monitor-row')
|
||||
var monitors = []
|
||||
rows.each(function(n,v){
|
||||
var monitorJson = {
|
||||
details: {}
|
||||
}
|
||||
var el = $(v)
|
||||
var fieldsSelcted = el.find('.list-group-item.active')
|
||||
monitorJson.mid = el.find('.state-monitor-row-select').val()
|
||||
fieldsSelcted.each(function(nn,element){
|
||||
var field = $(element)
|
||||
var name = field.attr('data-name')
|
||||
var value = field.find('.form-control').val()
|
||||
var isDetail = false
|
||||
if(name.indexOf('detail=') > -1){
|
||||
isDetail = true
|
||||
name = name.replace('detail=','')
|
||||
monitorJson.details[name] = value
|
||||
}else{
|
||||
monitorJson[name] = value
|
||||
}
|
||||
})
|
||||
if(Object.keys(monitorJson).length > 2 || Object.keys(monitorJson.details).length > 2){
|
||||
monitors.push(monitorJson)
|
||||
}
|
||||
})
|
||||
return monitors
|
||||
}
|
||||
$.monitorStates.f.submit(function(e){
|
||||
e.preventDefault()
|
||||
var el = $(this)
|
||||
var form = el.serializeObject()
|
||||
var monitors = $.monitorStates.getFormValues()
|
||||
if(form.name === ''){
|
||||
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Name cannot be empty.'],type:'error'})
|
||||
}
|
||||
if(monitors.length === 0){
|
||||
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Must be atleast one row'],type:'error'})
|
||||
}
|
||||
var data = {
|
||||
monitors: monitors
|
||||
}
|
||||
$.post($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke + '/' + form.name + '/insert',{data:data},function(d){
|
||||
$.ccio.log(d)
|
||||
if(d.ok === true){
|
||||
$.monitorStates.loadPresets(function(){
|
||||
$.monitorStates.selector.val(form.name)
|
||||
})
|
||||
$.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
|
||||
}
|
||||
})
|
||||
return false;
|
||||
})
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,17 @@
|
|||
$(document).ready(function(e){
|
||||
var getUrlPieces = function(url){
|
||||
var el = document.createElement('a');
|
||||
el.href = url
|
||||
return el
|
||||
// el.host // www.somedomain.com (includes port if there is one[1])
|
||||
// el.hostname // www.somedomain.com
|
||||
// el.hash // #top
|
||||
// el.href // http://www.somedomain.com/account/search?filter=a#top
|
||||
// el.pathname // /account/search
|
||||
// el.port // (port if there is one[1])
|
||||
// el.protocol // http:
|
||||
// el.search // ?filter=a
|
||||
}
|
||||
//multi monitor manager
|
||||
$.multimon={e:$('#multi_mon')};
|
||||
$.multimon.table=$.multimon.e.find('.tableData tbody');
|
||||
|
|
@ -17,7 +30,7 @@ $.multimon.e.find('.import_config').click(function(){
|
|||
var e={};e.e=$(this);e.mid=e.e.parents('[mid]').attr('mid');
|
||||
$.confirm.e.modal('show');
|
||||
$.confirm.title.text(lang['Import Monitor Configuration'])
|
||||
e.html=lang.ImportMultiMonitorConfigurationText+'<div style="margin-top:15px"><div class="form-group"><textarea placeholder="'+lang['Paste JSON here.']+'" class="form-control"></textarea></div><label class="upload_file btn btn-primary btn-block"> Upload File <input class="upload" type=file name="files[]"></label></div>';
|
||||
e.html=lang.ImportMultiMonitorConfigurationText+'<div style="margin-top:15px"><div class="form-group"><textarea placeholder="'+lang['Paste JSON here.']+'" class="form-control"></textarea></div><label class="upload_file btn btn-primary btn-block">'+lang['Upload File']+'<input class="upload" type=file name="files[]"></label></div>';
|
||||
$.confirm.body.html(e.html)
|
||||
$.confirm.e.find('.upload').change(function(e){
|
||||
var files = e.target.files; // FileList object
|
||||
|
|
@ -28,7 +41,7 @@ $.multimon.e.find('.import_config').click(function(){
|
|||
}
|
||||
reader.readAsText(f);
|
||||
});
|
||||
$.confirm.click({title:'Import',class:'btn-primary'},function(){
|
||||
$.confirm.click({title:lang['Import'],class:'btn-primary'},function(){
|
||||
// setTimeout(function(){
|
||||
// $.confirm.e.modal('show');
|
||||
// },1000)
|
||||
|
|
@ -67,7 +80,8 @@ $.multimon.e.find('.import_config').click(function(){
|
|||
console.log(newMon)
|
||||
return newMon
|
||||
}
|
||||
parsedData=JSON.parse($.confirm.e.find('textarea').val());
|
||||
var textFieldData = $.confirm.e.find('textarea').val()
|
||||
var parsedData = JSON.parse(textFieldData)
|
||||
//zoneminder one monitor
|
||||
if(parsedData.monitor){
|
||||
$.aM.import({
|
||||
|
|
@ -95,8 +109,45 @@ $.multimon.e.find('.import_config').click(function(){
|
|||
})
|
||||
}
|
||||
}catch(err){
|
||||
$.ccio.log(err)
|
||||
$.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
|
||||
//#EXTM3U
|
||||
if(textFieldData.indexOf('#EXTM3U') > -1 && textFieldData.indexOf('{"') === -1){
|
||||
var m3u8List = textFieldData.replace('#EXTM3U','').trim().split('\n')
|
||||
var parsedList = {}
|
||||
var currentName
|
||||
m3u8List.forEach(function(line){
|
||||
if(line.indexOf('#EXTINF:-1,') > -1){
|
||||
currentName = line.replace('#EXTINF:-1,','').trim()
|
||||
}else{
|
||||
parsedList[currentName] = line.trim()
|
||||
}
|
||||
})
|
||||
$.each(parsedList,function(name,url){
|
||||
var link = getUrlPieces(url)
|
||||
var newMon = $.aM.generateDefaultMonitorSettings()
|
||||
newMon.details = JSON.parse(newMon.details)
|
||||
newMon.mid = 'HLS' + name.toLowerCase()
|
||||
newMon.name = name
|
||||
newMon.port = link.port
|
||||
newMon.host = link.hostname
|
||||
newMon.path = link.pathname
|
||||
newMon.details.tv_channel = '1'
|
||||
newMon.details.tv_channel_id = name
|
||||
newMon.details.auto_host_enable = '1'
|
||||
newMon.details.auto_host = url
|
||||
newMon.details.stream_quality = '1'
|
||||
newMon.details.stream_fps = ''
|
||||
newMon.details.stream_vcodec = 'libx264'
|
||||
newMon.details.stream_acodec = 'aac'
|
||||
newMon.details.stream_type = 'hls'
|
||||
newMon.details.hls_time = '10'
|
||||
newMon.type = 'mp4'
|
||||
newMon.details = JSON.stringify(newMon.details)
|
||||
postMonitor(newMon)
|
||||
})
|
||||
}else{
|
||||
$.ccio.log(err)
|
||||
$.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
|
||||
}
|
||||
}
|
||||
// });
|
||||
});
|
||||
|
|
@ -116,7 +167,7 @@ $.multimon.getSelectedMonitors = function(unclean){
|
|||
$.multimon.e.find('.delete').click(function(){
|
||||
var arr=$.multimon.getSelectedMonitors(true);
|
||||
if(arr.length===0){
|
||||
$.ccio.init('note',{title:'No Monitors Selected',text:'Select atleast one monitor to delete.',type:'error'});
|
||||
$.ccio.init('note',{title:lang['No Monitors Selected'],text:lang['Select atleast one monitor to delete'],type:'error'});
|
||||
return
|
||||
}
|
||||
$.confirm.e.modal('show');
|
||||
|
|
@ -125,7 +176,7 @@ $.multimon.e.find('.delete').click(function(){
|
|||
$.confirm.body.html(e.html)
|
||||
$.confirm.click([
|
||||
{
|
||||
title:'Delete Monitors',
|
||||
title:lang['Delete']+' '+lang['Monitors'],
|
||||
class:'btn-danger',
|
||||
callback:function(){
|
||||
$.each(arr,function(n,v){
|
||||
|
|
@ -136,7 +187,7 @@ $.multimon.e.find('.delete').click(function(){
|
|||
}
|
||||
},
|
||||
{
|
||||
title:'Delete Monitors and Files',
|
||||
title:lang['Delete Monitors and Files'],
|
||||
class:'btn-danger',
|
||||
callback:function(){
|
||||
$.each(arr,function(n,v){
|
||||
|
|
@ -152,7 +203,7 @@ $.multimon.e.find('.delete').click(function(){
|
|||
// var arr=$.multimon.getSelectedMonitors();
|
||||
// var arrObject={}
|
||||
// if(arr.length===0){
|
||||
// $.ccio.init('note',{title:'No Monitors Selected',text:'Select atleast one monitor to delete.',type:'error'});
|
||||
// $.ccio.init('note',{title:lang['No Monitors Selected'],text:lang['Select atleast one monitor to delete'],type:'error'});
|
||||
// return
|
||||
// }
|
||||
// $.multimonedit.selectedList = arr;
|
||||
|
|
@ -162,7 +213,7 @@ $.multimon.e.find('.save_config').click(function(){
|
|||
var e={};e.e=$(this);
|
||||
var arr=$.multimon.getSelectedMonitors();
|
||||
if(arr.length===0){
|
||||
$.ccio.init('note',{title:'No Monitors Selected',text:'Select atleast one monitor to delete.',type:'error'});
|
||||
$.ccio.init('note',{title:lang['No Monitors Selected'],text:lang['Select atleast one monitor to delete'],type:'error'});
|
||||
return
|
||||
}
|
||||
e.dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(arr));
|
||||
|
|
|
|||
616
web/libs/js/dash2.powerVideo2.js
Normal file
616
web/libs/js/dash2.powerVideo2.js
Normal file
|
|
@ -0,0 +1,616 @@
|
|||
$(document).ready(function(e){
|
||||
var powerVideoWindow = $('#powerVideo')
|
||||
var powerVideoMonitorsListElement = $('#powerVideoMonitorsList')
|
||||
var powerVideoMonitorViewsElement = $('#powerVideoMonitorViews')
|
||||
var powerVideoTimelineStripsContainer = $('#powerVideoTimelineStrips')
|
||||
var powerVideoDateRangeElement = $('#powerVideoDateRange')
|
||||
var powerVideoVideoLimitElement = $('#powerVideoVideoLimit')
|
||||
var powerVideoEventLimitElement = $('#powerVideoEventLimit')
|
||||
var powerVideoLoadedVideos = {}
|
||||
var powerVideoLoadedEvents = {}
|
||||
var powerVideoLoadedChartData = {}
|
||||
var loadedTableGroupIds = {}
|
||||
var eventsLabeledByTime = {}
|
||||
var monitorSlotPlaySpeeds = {}
|
||||
var currentlyPlayingVideos = {}
|
||||
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) >
|
||||
powerVideoDateRangeElement.daterangepicker({
|
||||
startDate:$.ccio.timeObject().subtract(moment.duration("24:00:00")),
|
||||
endDate:$.ccio.timeObject().add(moment.duration("24:00:00")),
|
||||
timePicker: true,
|
||||
timePicker24Hour: true,
|
||||
timePickerSeconds: true,
|
||||
timePickerIncrement: 30,
|
||||
locale: {
|
||||
format: 'MM/DD/YYYY h:mm A'
|
||||
}
|
||||
},function(start, end, label){
|
||||
// $.pwrvid.drawTimeline()
|
||||
powerVideoDateRangeElement.focus()
|
||||
getSelectedMonitors().each(function(n,activeElement){
|
||||
var monitorId = $(activeElement).attr('data-monitor')
|
||||
requestTableData(monitorId)
|
||||
})
|
||||
});
|
||||
// fix utc/localtime translation (use timelapseJpeg as guide, it works as expected) />
|
||||
var loadVideosToTimeLineMemory = function(monitorId,videos,events){
|
||||
powerVideoLoadedVideos[monitorId] = videos
|
||||
powerVideoLoadedEvents[monitorId] = events
|
||||
}
|
||||
var drawMonitorsList = function(){
|
||||
var html = ''
|
||||
$.each($.ccio.mon,function(n,monitor){
|
||||
html += `<div class="list-group-item" data-monitor="${monitor.mid}">${monitor.name}</div>`
|
||||
})
|
||||
powerVideoMonitorsListElement.html(html)
|
||||
}
|
||||
var requestTableData = function(monitorId,user){
|
||||
if(!user)user = $user
|
||||
var dateData = powerVideoDateRangeElement.data('daterangepicker')
|
||||
$.ccio.cx({
|
||||
f: 'monitor',
|
||||
ff: 'get',
|
||||
fff: 'videos&events',
|
||||
videoLimit: parseInt(powerVideoVideoLimitElement.val()) || 0,
|
||||
eventLimit: parseInt(powerVideoEventLimitElement.val()) || 500,
|
||||
startDate: dateData.startDate.utc().format('YYYY-MM-DDTHH:mm:ss'),
|
||||
endDate: dateData.endDate.utc().format('YYYY-MM-DDTHH:mm:ss'),
|
||||
ke: user.ke,
|
||||
mid: monitorId
|
||||
})
|
||||
}
|
||||
var unloadTableData = function(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()
|
||||
}
|
||||
var checkEventsAgainstVideo = function(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
|
||||
}
|
||||
var prepareVideosAndEventsForTable = function(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}">
|
||||
${video.time}
|
||||
<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.reason.toUpperCase()
|
||||
var eventSlotTag = eventReason
|
||||
if(eventReason === 'OBJECT' && 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
|
||||
}
|
||||
var getAllChartDataForLoadedVideos = function(){
|
||||
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
|
||||
}
|
||||
var visuallySelectItemInRow = function(video){
|
||||
powerVideoTimelineStripsContainer.find(`[timeline-video-file="${video.mid}${video.time}"]`).parents('.vis-item').addClass('vis-selected')
|
||||
}
|
||||
var visuallyDeselectItemInRow = function(video){
|
||||
powerVideoTimelineStripsContainer.find(`[timeline-video-file="${video.mid}${video.time}"]`).parents('.vis-item').removeClass('vis-selected')
|
||||
}
|
||||
var drawTableTimeout = null
|
||||
var drawLoadedTableData = function(){
|
||||
// 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){
|
||||
groups.push({
|
||||
id: groupId,
|
||||
content: monitorId
|
||||
})
|
||||
groupId += 1
|
||||
groups.push({
|
||||
id: groupId,
|
||||
content: 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)
|
||||
}
|
||||
var drawMatrices = function(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}</span>`
|
||||
html += '</div>'
|
||||
})
|
||||
streamObjectsContainer.append(html)
|
||||
}
|
||||
var attachEventsToVideoActiveElement = function(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("timeupdate").on("timeupdate",function(){
|
||||
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($.ccio.init('jsontoblock',event.details.matrices))
|
||||
}
|
||||
if(event.details.confidence){
|
||||
motionMeterProgressBar.css('width',event.details.confidence+'px')
|
||||
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($.ccio.init('jsontoblock',{`${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}px`
|
||||
extenders.onVideoPlayerTimeUpdateExtensions.forEach(function(extender){
|
||||
extender(videoElement,watchPoint)
|
||||
})
|
||||
})
|
||||
var onEnded = function() {
|
||||
visuallyDeselectItemInRow(video)
|
||||
if(video.videoAfter){
|
||||
visuallySelectItemInRow(video.videoAfter)
|
||||
loadVideoIntoMonitorSlot(video.videoAfter)
|
||||
}
|
||||
}
|
||||
videoElement[0].onended = onEnded
|
||||
videoElement[0].onerror = onEnded
|
||||
}
|
||||
var dettachEventsToVideoActiveElement = function(monitorId){
|
||||
var videoElement = powerVideoMonitorViewsElement.find(`.videoPlayer[data-mid=${monitorId}] video.videoNow`)
|
||||
$(videoElement)
|
||||
// .off('loadeddata')
|
||||
.off("pause")
|
||||
.off("play")
|
||||
.off("timeupdate")
|
||||
}
|
||||
var findAllVideosAtTime = function(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
|
||||
}
|
||||
var resetVisualDetectionDataForMonitorSlot = function(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')
|
||||
}
|
||||
var loadVideoIntoMonitorSlot = function(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 widthOfBlock = 100 / numberOfMonitors
|
||||
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:${widthOfBlock}%" data-mid="${video.mid}">
|
||||
<div class="videoPlayer-detection-info">
|
||||
<div class="videoPlayer-detection-info-raw"></div>
|
||||
<h5 class="epic-text">${lang.Motion}</h5>
|
||||
<div class="videoPlayer-detection-info-motion"></div>
|
||||
<h5 class="epic-text">${lang.Matrices}</h5>
|
||||
<div class="videoPlayer-detection-info-object"></div>
|
||||
</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',`${widthOfBlock}%`)
|
||||
}
|
||||
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()
|
||||
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
|
||||
videoNow.currentTime = timeToStartAt / 1000
|
||||
videoNow.play()
|
||||
extenders.onVideoPlayerCreateExtensions.forEach(function(extender){
|
||||
extender(videoElement,watchPoint)
|
||||
})
|
||||
}
|
||||
var getSelectedMonitors = function(){
|
||||
return powerVideoMonitorsListElement.find('.active')
|
||||
}
|
||||
var getAllActiveVideosInSlots = function(){
|
||||
return powerVideoMonitorViewsElement.find('video.videoNow')
|
||||
}
|
||||
var pauseAllSlots = function(){
|
||||
getAllActiveVideosInSlots().each(function(n,video){
|
||||
if(!video.paused)video.pause()
|
||||
})
|
||||
}
|
||||
var toggleZoomAllSlots = function(){
|
||||
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)
|
||||
$.ccio.magnifyStream({
|
||||
p: streamWindow,
|
||||
videoUrl: streamWindow.find('video.videoNow').find('source').attr('src'),
|
||||
setTime: videoElement[0].currentTime,
|
||||
monitor: $.ccio.mon[$user.ke + monitorId + $user.auth_token],
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
var playAllSlots = function(){
|
||||
getAllActiveVideosInSlots().each(function(n,video){
|
||||
if(video.paused)video.play()
|
||||
})
|
||||
}
|
||||
var setPlaySpeedOnAllSlots = function(playSpeed){
|
||||
Object.keys(powerVideoLoadedVideos).forEach(function(monitorId){
|
||||
monitorSlotPlaySpeeds[monitorId] = playSpeed
|
||||
})
|
||||
getAllActiveVideosInSlots().each(function(n,video){
|
||||
video.playbackRate = playSpeed
|
||||
})
|
||||
}
|
||||
var nextVideoAllSlots = function(){
|
||||
Object.keys(currentlyPlayingVideos).forEach(function(monitorId){
|
||||
var video = currentlyPlayingVideos[monitorId]
|
||||
visuallyDeselectItemInRow(video)
|
||||
visuallySelectItemInRow(video.videoAfter)
|
||||
loadVideoIntoMonitorSlot(video.videoAfter,0)
|
||||
})
|
||||
}
|
||||
var previousVideoAllSlots = function(){
|
||||
Object.keys(currentlyPlayingVideos).forEach(function(monitorId){
|
||||
var video = currentlyPlayingVideos[monitorId]
|
||||
visuallyDeselectItemInRow(video)
|
||||
visuallySelectItemInRow(video.videoBefore)
|
||||
loadVideoIntoMonitorSlot(video.videoBefore,0)
|
||||
})
|
||||
}
|
||||
$user.ws.on('f',function (d){
|
||||
switch(d.f){
|
||||
case'videos&events':
|
||||
var videos = d.videos.videos
|
||||
var events = d.events
|
||||
loadVideosToTimeLineMemory(d.id,videos,events)
|
||||
drawLoadedTableData()
|
||||
break;
|
||||
}
|
||||
})
|
||||
$('body')
|
||||
.on('dblclick','.videoPlayer',function(){
|
||||
var el = $(this)
|
||||
$.ccio.init('fullscreen',this)
|
||||
})
|
||||
.on('click','[data-monitor]',function(){
|
||||
var el = $(this)
|
||||
var monitorId = el.attr('data-monitor')
|
||||
el.toggleClass('active')
|
||||
if(el.hasClass('active')){
|
||||
requestTableData(monitorId)
|
||||
}else{
|
||||
unloadTableData(monitorId)
|
||||
}
|
||||
})
|
||||
.on('click','[powerVideo-control]',function(){
|
||||
var el = $(this)
|
||||
var controlType = el.attr('powerVideo-control')
|
||||
switch(controlType){
|
||||
case'toggleZoom':
|
||||
toggleZoomAllSlots()
|
||||
break;
|
||||
case'playAll':
|
||||
playAllSlots()
|
||||
break;
|
||||
case'pauseAll':
|
||||
pauseAllSlots()
|
||||
break;
|
||||
case'playSpeedAll':
|
||||
var playSpeed = el.attr('data-speed')
|
||||
setPlaySpeedOnAllSlots(playSpeed)
|
||||
break;
|
||||
case'previousVideoAll':
|
||||
playAllSlots()
|
||||
previousVideoAllSlots()
|
||||
break;
|
||||
case'nextVideoAll':
|
||||
playAllSlots()
|
||||
nextVideoAllSlots()
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
powerVideoWindow.on('shown.bs.modal',function(){
|
||||
drawMonitorsList()
|
||||
})
|
||||
$.powerVideoViewer = {
|
||||
window: powerVideoWindow,
|
||||
drawMonitorsList: drawMonitorsList,
|
||||
activeTimeline: activeTimeline,
|
||||
monitorListElement: powerVideoMonitorsListElement,
|
||||
monitorViewsElement: powerVideoMonitorViewsElement,
|
||||
timelineStripsElement: powerVideoTimelineStripsContainer,
|
||||
dateRangeElement: powerVideoDateRangeElement,
|
||||
loadedVideos: powerVideoLoadedVideos,
|
||||
loadedEvents: powerVideoLoadedEvents,
|
||||
loadedChartData: powerVideoLoadedChartData,
|
||||
loadedTableGroupIds: loadedTableGroupIds,
|
||||
extenders: extenders
|
||||
}
|
||||
})
|
||||
128
web/libs/js/dash2.schedules.js
Normal file
128
web/libs/js/dash2.schedules.js
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
$(document).ready(function(){
|
||||
$.schedules = {
|
||||
e: $('#schedules'),
|
||||
selector: $('#schedulesSelector'),
|
||||
loadedMonitorStates: {},
|
||||
loadedSchedules: {}
|
||||
}
|
||||
$.schedules.f = $.schedules.e.find('form')
|
||||
$.schedules.selectedStates = $.schedules.e.find('[name="monitorStates"]')
|
||||
$.schedules.selectedDays = $.schedules.e.find('[name="days"]')
|
||||
$.schedules.loadSchedules = function(callback){
|
||||
$.get($.ccio.init('location',$user) + $user.auth_token + '/schedule/' + $user.ke,function(d){
|
||||
console.log(d)
|
||||
var html = ''
|
||||
$.each(d.schedules,function(n,v){
|
||||
$.schedules.loadedSchedules[v.name] = v
|
||||
html += $.ccio.tm('option',{
|
||||
id: v.name,
|
||||
name: v.name
|
||||
})
|
||||
})
|
||||
$.schedules.selector.find('optgroup').html(html)
|
||||
if(callback)callback()
|
||||
})
|
||||
}
|
||||
$.schedules.loadMonitorStates = function(){
|
||||
$.get($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke,function(d){
|
||||
var html = ''
|
||||
$.each(d.presets,function(n,v){
|
||||
$.schedules.loadedMonitorStates[v.name] = v
|
||||
html += $.ccio.tm('option',{
|
||||
id: v.name,
|
||||
name: v.name
|
||||
})
|
||||
})
|
||||
$.schedules.selectedStates.html(html)
|
||||
})
|
||||
}
|
||||
$.schedules.e.on('shown.bs.modal', function (e) {
|
||||
$.schedules.loadMonitorStates()
|
||||
$.schedules.loadSchedules()
|
||||
})
|
||||
$.schedules.e.on('click','.delete',function(e){
|
||||
$.confirm.e.modal('show');
|
||||
$.confirm.title.text(lang['Delete Monitor States Preset']);
|
||||
$.confirm.body.html(lang.deleteMonitorStateText1);
|
||||
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
|
||||
var form = $.schedules.f.serializeObject()
|
||||
$.post($.ccio.init('location',$user) + $user.auth_token + '/schedule/' + $user.ke + '/' + form.name + '/delete',function(d){
|
||||
$.ccio.log(d)
|
||||
if(d.ok === true){
|
||||
$.schedules.loadSchedules()
|
||||
$.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
$.schedules.selector.change(function(e){
|
||||
var selected = $(this).val()
|
||||
var loaded = $.schedules.loadedSchedules[selected]
|
||||
var namespace = $.schedules.e.find('[name="name"]')
|
||||
var deleteButton = $.schedules.e.find('.delete')
|
||||
var tzEl = $.schedules.e.find('[name="timezone"]')
|
||||
$.schedules.selectedStates.find('option:selected').removeAttr('selected')
|
||||
$.schedules.selectedDays.find('option:selected').removeAttr('selected')
|
||||
if(loaded){
|
||||
namespace.val(loaded.name)
|
||||
var html = ''
|
||||
$.each(loaded,function(n,v){
|
||||
$.schedules.f.find('[name="' + n + '"]').val(v)
|
||||
})
|
||||
$.each(loaded.details.monitorStates,function(n,v){
|
||||
$.schedules.selectedStates.find('option[value="' + v + '"]').prop('selected',true)
|
||||
})
|
||||
$.each(loaded.details.days,function(n,v){
|
||||
$.schedules.selectedDays.find('option[value="' + v + '"]').prop('selected',true)
|
||||
})
|
||||
tzEl.val(loaded.details.timezone || '+0')
|
||||
deleteButton.show()
|
||||
}else{
|
||||
tzEl.val('+0')
|
||||
namespace.val('')
|
||||
deleteButton.hide()
|
||||
}
|
||||
})
|
||||
$.schedules.f.submit(function(e){
|
||||
e.preventDefault()
|
||||
var el = $(this)
|
||||
var form = el.serializeObject()
|
||||
var monitors = []
|
||||
var failedToParseAJson = false
|
||||
var rows = $.monitorStates.monitors.find('.state-monitor-row')
|
||||
if(form.name === ''){
|
||||
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Name cannot be empty.'],type:'error'})
|
||||
}
|
||||
if(form.start === ''){
|
||||
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Start Time cannot be empty.'],type:'error'})
|
||||
}
|
||||
if(form.monitorStates instanceof Array === false){
|
||||
form.monitorStates = [form.monitorStates]
|
||||
}
|
||||
if(!form.days || form.days === ''){
|
||||
form.days = null
|
||||
}else if(form.days instanceof Array === false){
|
||||
form.days = [form.days]
|
||||
}
|
||||
var data = {
|
||||
start: form.start,
|
||||
end: form.end,
|
||||
enabled: form.enabled,
|
||||
details: {
|
||||
monitorStates: form.monitorStates,
|
||||
days: form.days,
|
||||
timezone: form.timezone,
|
||||
}
|
||||
}
|
||||
$.post($.ccio.init('location',$user) + $user.auth_token + '/schedule/' + $user.ke + '/' + form.name + '/insert',{data:data},function(d){
|
||||
$.ccio.log(d)
|
||||
if(d.ok === true){
|
||||
$.schedules.loadSchedules(function(){
|
||||
$.schedules.selector.val(form.name)
|
||||
})
|
||||
$.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
|
||||
}
|
||||
})
|
||||
return false;
|
||||
})
|
||||
})
|
||||
|
|
@ -7,6 +7,13 @@ $.ccio.cx=function(x,user){
|
|||
if(!x.uid){x.uid=user.uid;};
|
||||
return user.ws.emit('f',x)
|
||||
}
|
||||
$.diskUsed = {
|
||||
main: $('.diskUsed'),
|
||||
list: {},
|
||||
}
|
||||
$.each(addStorage,function(n,storage){
|
||||
$.diskUsed.list[storage.name] = $(`#diskUsedList [storage="${storage.name}"]`)
|
||||
})
|
||||
$.ccio.globalWebsocket=function(d,user){
|
||||
if(d.f!=='monitor_frame'&&d.f!=='os'&&d.f!=='video_delete'&&d.f!=='detector_trigger'&&d.f!=='detector_record_timeout_start'&&d.f!=='log'){$.ccio.log(d);}
|
||||
if(!user){
|
||||
|
|
@ -151,12 +158,26 @@ $.ccio.globalWebsocket=function(d,user){
|
|||
break;
|
||||
case'diskUsed':
|
||||
if(!d.limit||d.limit===''){d.limit=10000}
|
||||
d.percent=parseInt((d.size/d.limit)*100)+'%';
|
||||
d.human=parseFloat(d.size)
|
||||
d.percent = parseInt((d.size/d.limit)*100)+'%';
|
||||
d.human = parseFloat(d.size)
|
||||
if(d.human>1000){d.human=(d.human/1000).toFixed(2)+' GB'}else{d.human=d.human.toFixed(2)+' MB'}
|
||||
$('.diskUsed .value').html(d.human)
|
||||
$('.diskUsed .percent').html(d.percent)
|
||||
$('.diskUsed .progress-bar').css('width',d.percent)
|
||||
$.diskUsed.main.find('.value').html(d.human)
|
||||
$.diskUsed.main.find('.percent').html(d.percent)
|
||||
$.diskUsed.main.find('.progress-bar').css('width',d.percent)
|
||||
if(d.addStorage){
|
||||
$.each(d.addStorage,function(n,storage){
|
||||
var percent = parseInt((storage.usedSpace/storage.sizeLimit)*100)+'%'
|
||||
var humanValue = parseFloat(storage.usedSpace)
|
||||
if(humanValue > 1000){
|
||||
humanValue = (humanValue/1000).toFixed(2)+' GB'
|
||||
}else{
|
||||
humanValue = humanValue.toFixed(2)+' MB'
|
||||
}
|
||||
$.diskUsed.list[storage.name].find('.value').html(humanValue)
|
||||
$.diskUsed.list[storage.name].find('.percent').html(percent)
|
||||
$.diskUsed.list[storage.name].find('.progress-bar').css('width',percent)
|
||||
})
|
||||
}
|
||||
break;
|
||||
case'video_fix_success':case'video_fix_start':
|
||||
switch(d.f){
|
||||
|
|
@ -723,9 +744,14 @@ $.ccio.globalWebsocket=function(d,user){
|
|||
type: "time",
|
||||
display: true,
|
||||
time: {
|
||||
format: timeFormat,
|
||||
// round: 'day'
|
||||
}
|
||||
// format: timeFormat,
|
||||
unit: 'minute',
|
||||
displayFormats: {
|
||||
minute: 'h:mm a',
|
||||
},
|
||||
},
|
||||
categoryPercentage: 0.6,
|
||||
barPercentage: .5,
|
||||
}],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
14
web/libs/js/dash2.tabs.js
Normal file
14
web/libs/js/dash2.tabs.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
$(document).ready(function(){
|
||||
$('body')
|
||||
.on('click','[tab-chooser]',function(){
|
||||
var el = $(this)
|
||||
var parent = el.parents('[tab-chooser-parent]')
|
||||
var tabName = el.attr('[tab-chooser]')
|
||||
var allTabChoosersInParent = parent.find('[tab-chooser]')
|
||||
var allTabsInParent = parent.find('[tab-section]')
|
||||
allTabsInParent.hide()
|
||||
allTabChoosersInParent.removeClass('active')
|
||||
el.addClass('active')
|
||||
parent.find(`[tab-section="${tabName}"]`).show()
|
||||
})
|
||||
})
|
||||
174
web/libs/js/dash2.timelapse.jpeg.js
Normal file
174
web/libs/js/dash2.timelapse.jpeg.js
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
$(document).ready(function(e){
|
||||
//Timelapse JPEG Window
|
||||
$.timelapseJpeg = {e:$('#timelapsejpeg')}
|
||||
$.timelapseJpeg.datepicker = $('#timelapsejpeg_date')
|
||||
$.timelapseJpeg.timelapseJpegFps = $('#timelapseJpegFps')
|
||||
$.timelapseJpeg.framesContainer = $.timelapseJpeg.e.find('.frames')
|
||||
$.timelapseJpeg.frameStrip = $.timelapseJpeg.e.find('.frameStrip')
|
||||
$.timelapseJpeg.frameIcons = $.timelapseJpeg.e.find('.frameIcons')
|
||||
$.timelapseJpeg.fieldHolder = $.timelapseJpeg.e.find('.fieldHolder')
|
||||
$.timelapseJpeg.frameStripPreview = $.timelapseJpeg.e.find('.frameStripPreview')
|
||||
$.timelapseJpeg.frameStripContainer = $.timelapseJpeg.e.find('.frameStripContainer')
|
||||
$.timelapseJpeg.playBackViewImg = $.timelapseJpeg.e.find('.playBackView img')
|
||||
$.timelapseJpeg.liveStreamView = $.timelapseJpeg.e.find('.liveStreamView')
|
||||
$.timelapseJpeg.monitors=$.timelapseJpeg.e.find('.monitors_list')
|
||||
$.timelapseJpeg.pointer = $.ccio.init('location',$user)
|
||||
$.timelapseJpeg.downloadRecheckTimers = {}
|
||||
$.timelapseJpeg.selectedStartDate = moment().utc().subtract(2, 'days').format('YYYY-MM-DDTHH:mm:ss')
|
||||
$.timelapseJpeg.selectedEndDate = moment().utc().format('YYYY-MM-DDTHH:mm:ss')
|
||||
$.timelapseJpeg.datepicker.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) {
|
||||
console.log(start,end)
|
||||
var selectedStartDate = moment(start).utc().format('YYYY-MM-DDTHH:mm:ss')
|
||||
var selectedEndDate = moment(end).utc().format('YYYY-MM-DDTHH:mm:ss')
|
||||
$.timelapseJpeg.draw(selectedStartDate,selectedEndDate)
|
||||
$.timelapseJpeg.selectedStartDate = selectedStartDate
|
||||
$.timelapseJpeg.selectedEndDate = selectedEndDate
|
||||
})
|
||||
$.timelapseJpeg.monitors.change(function(){
|
||||
$.timelapseJpeg.draw()
|
||||
$.timelapseJpeg.getLiveStream()
|
||||
})
|
||||
$.timelapseJpeg.getLiveStream = function(){
|
||||
var selectedMonitor = $.timelapseJpeg.monitors.val()
|
||||
$.timelapseJpeg.liveStreamView.html(`<iframe src="${$.timelapseJpeg.pointer+$user.auth_token+'/embed/'+$user.ke+'/'+selectedMonitor+'/jquery|fullscreen'}"></iframe>`)
|
||||
$.timelapseJpeg.liveStreamView.find('iframe').width($.timelapseJpeg.playBackViewImg.width())
|
||||
|
||||
}
|
||||
$.timelapseJpeg.draw = function(startDate,endDate){
|
||||
if(!startDate)startDate = $.timelapseJpeg.selectedStartDate
|
||||
if(!endDate)endDate = $.timelapseJpeg.selectedEndDate
|
||||
$.timelapseJpeg.frameStripContainerOffset = $.timelapseJpeg.frameStripContainer.offset()
|
||||
var queryString = ['start=' + startDate,'end=' + endDate]
|
||||
var frameIconsHtml = ''
|
||||
var selectedMonitor = $.timelapseJpeg.monitors.val()
|
||||
var apiURL = $.timelapseJpeg.pointer+$user.auth_token+'/timelapse/'+$user.ke+'/'+selectedMonitor
|
||||
console.log(apiURL + '?' + queryString.join('&'))
|
||||
$.getJSON(apiURL + '?' + queryString.join('&'),function(data){
|
||||
if(data && data[0]){
|
||||
var firstFilename = data[0].filename
|
||||
$.timelapseJpeg.frameSelected = firstFilename
|
||||
$.timelapseJpeg.playlist = {}
|
||||
$.timelapseJpeg.playlistArray = []
|
||||
$.each(data.reverse(),function(n,fileInfo){
|
||||
fileInfo.href = apiURL + '/' + fileInfo.filename.split('T')[0] + '/' + fileInfo.filename
|
||||
fileInfo.number = n
|
||||
frameIconsHtml += '<div class="col-md-4"><div class="frame" data-filename="' + fileInfo.filename + '" style="background-image:url(\'' + fileInfo.href + '\')"><div class="shade">' + moment(fileInfo.time).format('YYYY-MM-DD HH:mm:ss') + '</div></div></div>'
|
||||
$.timelapseJpeg.playlist[fileInfo.filename] = fileInfo
|
||||
})
|
||||
$.timelapseJpeg.playlistArray = data
|
||||
$.timelapseJpeg.frameIcons.html(frameIconsHtml)
|
||||
$.timelapseJpeg.frameIcons.find(`.frame:first`).click()
|
||||
$.timelapseJpeg.getLiveStream()
|
||||
$.timelapseJpeg.resetFilmStripPositions()
|
||||
}else{
|
||||
frameIconsHtml = lang['No Data']
|
||||
$.timelapseJpeg.frameIcons.html(frameIconsHtml)
|
||||
}
|
||||
})
|
||||
}
|
||||
$.timelapseJpeg.fieldHolderCssHeightModifier = 0
|
||||
$.timelapseJpeg.resetFilmStripPositions = function(){
|
||||
var numberOfFrames = Object.keys($.timelapseJpeg.playlist).length
|
||||
var fieldHolderHeight = $.timelapseJpeg.fieldHolder.height() + $.timelapseJpeg.fieldHolderCssHeightModifier
|
||||
console.log("calc(100% - " + fieldHolderHeight + "px)")
|
||||
$.timelapseJpeg.frameIcons.css({height:"calc(100% - " + fieldHolderHeight + "px)"})
|
||||
}
|
||||
$.timelapseJpeg.setPlayBackFrame = function(href){
|
||||
$.timelapseJpeg.playBackViewImg[0].src = href
|
||||
}
|
||||
$.timelapseJpeg.playInterval = 1000 / 30
|
||||
$.timelapseJpeg.play = function(){
|
||||
var selectedFrame = $.timelapseJpeg.playlist[$.timelapseJpeg.frameSelected]
|
||||
var selectedFrameNumber = $.timelapseJpeg.playlist[$.timelapseJpeg.frameSelected].number
|
||||
$.timelapseJpeg.setPlayBackFrame(selectedFrame.href)
|
||||
$.timelapseJpeg.frameIcons.find(`.frame.selected`).removeClass('selected')
|
||||
$.timelapseJpeg.frameIcons.find(`.frame[data-filename="${selectedFrame.filename}"]`).addClass('selected')
|
||||
clearTimeout($.timelapseJpeg.playIntervalTimer)
|
||||
$.timelapseJpeg.playIntervalTimer = setTimeout(function(){
|
||||
++selectedFrameNumber
|
||||
var newSelectedFrame = $.timelapseJpeg.playlistArray[selectedFrameNumber]
|
||||
if(!newSelectedFrame)return
|
||||
$.timelapseJpeg.frameSelected = newSelectedFrame.filename
|
||||
$.timelapseJpeg.play()
|
||||
},$.timelapseJpeg.playInterval)
|
||||
}
|
||||
$.timelapseJpeg.destroy = function(){
|
||||
$.timelapseJpeg.pause()
|
||||
$.timelapseJpeg.frameIcons.empty()
|
||||
$.timelapseJpeg.setPlayBackFrame(null)
|
||||
}
|
||||
$.timelapseJpeg.pause = function(){
|
||||
clearTimeout($.timelapseJpeg.playIntervalTimer)
|
||||
delete($.timelapseJpeg.playIntervalTimer)
|
||||
}
|
||||
$.timelapseJpeg.togglePlayPause = function(){
|
||||
if($.timelapseJpeg.playIntervalTimer){
|
||||
$.timelapseJpeg.pause()
|
||||
}else{
|
||||
$.timelapseJpeg.play()
|
||||
}
|
||||
}
|
||||
$.timelapseJpeg.e.on('click','.frame',function(){
|
||||
$.timelapseJpeg.pause()
|
||||
var selectedFrame = $(this).attr('data-filename')
|
||||
if(selectedFrame === $.timelapseJpeg.frameSelected){
|
||||
return $.timelapseJpeg.togglePlayPause()
|
||||
}
|
||||
$.timelapseJpeg.frameSelected = selectedFrame
|
||||
$.timelapseJpeg.frameIcons.find(`.frame.selected`).removeClass('selected')
|
||||
$.timelapseJpeg.frameIcons.find(`.frame[data-filename="${selectedFrame}"]`).addClass('selected')
|
||||
var href = $.timelapseJpeg.playlist[selectedFrame].href
|
||||
$.timelapseJpeg.setPlayBackFrame(href)
|
||||
})
|
||||
$.timelapseJpeg.e.on('click','.download_mp4',function(){
|
||||
var _this = $(this)
|
||||
var runDownloader = function(){
|
||||
var startDate = $.timelapseJpeg.selectedStartDate
|
||||
var endDate = $.timelapseJpeg.selectedEndDate
|
||||
var queryString = ['fps=' + $.timelapseJpeg.timelapseJpegFps.val(),'start=' + startDate,'end=' + endDate,'mp4=1']
|
||||
var timerId = queryString.join('&')
|
||||
var selectedMonitor = $.timelapseJpeg.monitors.val()
|
||||
var generatorUrl = $.timelapseJpeg.pointer + $user.auth_token + '/timelapse/' + $user.ke + '/' + selectedMonitor
|
||||
$.getJSON(generatorUrl + '?' + queryString.join('&'),function(response){
|
||||
if(response.fileExists){
|
||||
_this.text(lang['Download'])
|
||||
var downloadName = startDate + '_' + endDate + '_' + selectedMonitor + '.mp4'
|
||||
var a = document.createElement('a')
|
||||
a.href = generatorUrl + '?' + queryString.concat(['download="1"']).join('&')
|
||||
a.download = downloadName
|
||||
a.click()
|
||||
}else{
|
||||
_this.html(' <i class="fa fa-spinner fa-pulse"></i> ')
|
||||
clearTimeout($.timelapseJpeg.downloadRecheckTimers[timerId])
|
||||
$.timelapseJpeg.downloadRecheckTimers[timerId] = setTimeout(function(){
|
||||
runDownloader()
|
||||
},5000)
|
||||
}
|
||||
})
|
||||
}
|
||||
runDownloader()
|
||||
})
|
||||
$.timelapseJpeg.e.on('shown.bs.modal', function (e) {
|
||||
// $.timelapseJpeg.datepicker.val($.timelapseJpeg.baseDate)
|
||||
// $.timelapseJpeg.draw($.timelapseJpeg.baseDate)
|
||||
})
|
||||
$.timelapseJpeg.e.on('hidden.bs.modal', function (e) {
|
||||
$.timelapseJpeg.destroy()
|
||||
})
|
||||
$.timelapseJpeg.timelapseJpegFps
|
||||
.on('slide',function(ev){
|
||||
$.timelapseJpeg.playInterval = 1000 / ev.value
|
||||
})
|
||||
.slider({
|
||||
formatter: function(value) {
|
||||
return 'FPS : ' + value;
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -3,9 +3,80 @@ $(document).ready(function(e){
|
|||
$.sM={e:$('#settings')};
|
||||
$.sM.f=$.sM.e.find('form');
|
||||
$.sM.links=$('#linkShinobi');
|
||||
$.sM.addStorageMaxAmounts=$('#add_storage_max_amounts')
|
||||
$.sM.addStorageMaxAmountsField=$.sM.e.find('[detail="addStorage"]')
|
||||
$.sM.g=$('#settings_mon_groups');
|
||||
$.sM.md=$.sM.f.find('[detail]');
|
||||
$.sM.md.change($.ccio.form.details);
|
||||
$.sM.e.find('.follow-list ul').affix();
|
||||
$.sM.sections = {}
|
||||
var addSection = function(section){
|
||||
if(!section.id){
|
||||
var userSettingsId = section.name.replace(/[^a-zA-Z ]/g, '').replace(/[^a-zA-Z ]/g, '').replace(/ /g, '')
|
||||
section.id = userSettingsId
|
||||
}
|
||||
$.sM.sections[section.name] = section.id
|
||||
if(section.info){
|
||||
$.each(section.info,function(m,block){
|
||||
if(block.isFormGroupGroup === true){
|
||||
addSection(block)
|
||||
}
|
||||
})
|
||||
}
|
||||
if(section.blocks){
|
||||
$.each(section.blocks,function(m,block){
|
||||
addSection(block)
|
||||
})
|
||||
}
|
||||
}
|
||||
$.each($.ccio.definitions['Account Settings'].blocks,function(n,section){
|
||||
addSection(section)
|
||||
})
|
||||
$.sM.drawList = function(){
|
||||
var list = $.sM.e.find('.follow-list ul')
|
||||
var html = ''
|
||||
$.each($.sM.sections,function(sectionName,sectionId){
|
||||
var el = $('#' + sectionId)
|
||||
if(el.length > 0){
|
||||
html += '<li><a class="scrollTo" href="#' + sectionId + '" scrollToParent="#settings .modal-body">' + sectionName + '</a></li>'
|
||||
}
|
||||
})
|
||||
list.html(html)
|
||||
}
|
||||
try{
|
||||
var addStorageData = JSON.parse($user.details.addStorage || '{}')
|
||||
var html = ''
|
||||
$.each(addStorage,function(n,storage){
|
||||
var limit = ""
|
||||
if(addStorageData[storage.path] && addStorageData[storage.path].limit){
|
||||
limit = addStorageData[storage.path].limit
|
||||
}
|
||||
html += `<div class="form-group">\
|
||||
<label><div><span>${lang['Max Storage Amount']} : ${storage.name}</span></div>\
|
||||
<div><input class="form-control" addStorageLimit="${storage.path}" value="${limit}"></div>\
|
||||
</label>\
|
||||
</div>`
|
||||
})
|
||||
$.sM.addStorageMaxAmounts.html(html)
|
||||
$.sM.addStorageMaxAmounts.on('change','[addStorageLimit]',function(){
|
||||
var json = {}
|
||||
$.each(addStorage,function(n,storage){
|
||||
var storageId = storage.path
|
||||
var el = $.sM.addStorageMaxAmounts.find('[addStorageLimit="' + storageId + '"]')
|
||||
var value = el.val()
|
||||
json[storageId] = {
|
||||
name: storage.name,
|
||||
path: storage.path,
|
||||
limit: value
|
||||
}
|
||||
})
|
||||
$.sM.addStorageMaxAmountsField.val(JSON.stringify(json))
|
||||
})
|
||||
}catch(err){
|
||||
console.log(err)
|
||||
}
|
||||
|
||||
$.sM.drawList()
|
||||
$.sM.f.find('[selector]').change(function(e){
|
||||
e.v=$(this).val();e.a=$(this).attr('selector')
|
||||
$.sM.f.find('.'+e.a+'_input').hide()
|
||||
|
|
|
|||
|
|
@ -109,19 +109,15 @@ $.vidview.e.find('.export_selected').click(function(){
|
|||
$.confirm.e.modal('show');
|
||||
$.confirm.title.text(lang['Export Selected Videos'])
|
||||
var html = lang.ExportSelectedVideosMsg+'<div style="margin-bottom:15px"></div>'
|
||||
var selectedVideos = []
|
||||
$.each(videos,function(n,v){
|
||||
html+=v.filename+'<br>';
|
||||
selectedVideos.push($.vidview.loadedVideos[v.filename])
|
||||
})
|
||||
$.confirm.body.html(html)
|
||||
$.confirm.click({title:'Export Video',class:'btn-danger'},function(){
|
||||
var queryVariables = []
|
||||
queryVariables.push('videos='+JSON.stringify(videos))
|
||||
if($.ccio.useUTC === true){
|
||||
queryVariables.push('isUTC=true')
|
||||
}
|
||||
var downloadZip = $.ccio.init('location',$user)+$user.auth_token+'/zipVideos/'+$user.ke+'?'+queryVariables.join('&')
|
||||
$('#temp').html('<iframe>a</iframe>').find('iframe').attr('src',downloadZip);
|
||||
});
|
||||
$.zipVideosAndDownload(selectedVideos)
|
||||
})
|
||||
})
|
||||
$.vidview.e.find('.merge_selected').click(function(){
|
||||
e = {}
|
||||
|
|
|
|||
13
web/libs/js/jszip.min.js
vendored
Normal file
13
web/libs/js/jszip.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
web/libs/js/moment-with-locales.min.js
vendored
Normal file
1
web/libs/js/moment-with-locales.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
47
web/libs/js/vis.min.js
vendored
Normal file
47
web/libs/js/vis.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue