Shinobi/web/libs/js/dash2.elementbuilder.js

916 lines
49 KiB
JavaScript

$.ccio.tm=function(x,d,z,user){
var tmp='';if(!d){d={}};
var k={}
if(d&&d.user){
user=d.user
}
if(!user){
user=$user
}
if(d.id&&!d.mid){d.mid=d.id;}
switch(x){
case 0://video
var url = $.ccio.init('videoUrlBuild',d)
href = 'href="'+url+'"'
// if(!d.filename){d.filename=$.ccio.init('tf',d.time)+'.'+d.ext;}
d.dlname=d.mid+'-'+d.filename;
d.startMoment=$.ccio.timeObject(d.time),
d.endMoment=$.ccio.timeObject(d.end),
d.hr=parseInt(d.startMoment.format('HH')),
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>';
$(z).each(function(n,v){
v=$(v);
if(v.find('.video-item').length>10){v.find('.video-item:last').remove()}
})
break;
case 1://monitor icon
d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#b57d00',text:'...'}));
tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b>'+lang['Save as']+' :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Status :</b> <span class="monitor_status">'+d.status+'</span></div></div><div class="icons text-center">'
tmp+='<div class="btn-group btn-group-xs">'
var buttons = {
"Pop": {
"label": "Pop",
"attr": "monitor=\"pop\"",
"class": "default",
"icon": "external-link"
},
"Power Viewer": {
"label": "Power Viewer",
"attr": "monitor=\"powerview\"",
"class": "default",
"icon": "map-marker"
},
"Videos List": {
"label": "Videos List",
"attr": "monitor=\"videos_table\"",
"class": "default",
"icon": "film"
},
"Monitor Settings": {
"label": "Monitor Settings",
"attr": "monitor=\"edit\"",
"class": "default",
"icon": "wrench"
}
}
if(!$.ccio.permissionCheck('video_view',d.mid)){
delete(buttons["Videos List"])
delete(buttons["Power Viewer"])
}
if(!$.ccio.permissionCheck('monitor_edit',d.mid)){
delete(buttons["Monitor Settings"])
}
$.each(buttons,function(n,v){
tmp+='<a class="btn btn-'+v.class+'" '+v.attr+' title="'+v.label+'"><i class="fa fa-'+v.icon+'"></i></a>'
})
tmp+='</div>\
</div></div></div>';
delete(d.src);
break;
case 2://monitor stream
try{k.d=JSON.parse(d.details);}catch(er){k.d=d.details;}
k.mode=$.ccio.init('humanReadMode',d.mode);
var dataTarget = '.monitor_item[mid=\''+d.mid+'\'][ke=\''+d.ke+'\'][auth=\''+user.auth_token+'\']';
tmp+='<div id="monitor_live_'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" mode="'+k.mode+'" class="grid-stack-item monitor_item glM'+d.mid+user.auth_token+'"><div class="grid-stack-item-content">';
tmp+='<div class="stream-block no-padding mdl-card__media mdl-color-text--grey-50">';
tmp+='<div class="stream-objects"></div>';
tmp+='<div class="stream-hud">'
tmp+='<div class="camera_cpu_usage"><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar"><span></span></div></div></div>';
tmp+='<div class="lamp" title="'+k.mode+'"><i class="fa fa-eercast"></i></div><div class="controls"><span title="'+lang['Currently viewing']+'" class="label label-default"><span class="viewers"></span></span> <a class="btn-xs btn-danger btn" monitor="mode" mode="record"><i class="fa fa-circle"></i> '+lang['Start Recording']+'</a> <a class="btn-xs btn-primary btn" monitor="mode" mode="start"><i class="fa fa-eye"></i> '+lang['Set to Watch Only']+'</a></div></div></div></div>'
tmp+='<div class="mdl-card__supporting-text text-center">';
tmp+='<div class="indifference detector-fade"><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar"><span></span></div></div></div>';
tmp+='<div class="monitor_details">';
tmp+='<div><span class="monitor_name">'+d.name+'</span><span class="monitor_not_record_copy">, '+lang['Recording FPS']+' : <span class="monitor_fps">'+d.fps+'</span></span></div>';
tmp+='</div>';
tmp+='<div class="btn-group btn-group-sm">'//start of btn list
var buttons = {
"Snapshot": {
"label": "Snapshot",
"attr": "monitor=\"snapshot\"",
"class": "primary",
"icon": "camera"
},
"Show Logs": {
"label": "Show Logs",
"attr": "monitor=\"show_data\"",
"class": "warning",
"icon": "exclamation-triangle"
},
"Control": {
"label": "Control",
"attr": "monitor=\"control_toggle\"",
"class": "default arrows",
"icon": "arrows"
},
"Status Indicator": {
"label": "Status Indicator",
"attr": "monitor=\"watch_on\"",
"class": "success signal",
"icon": "plug"
},
"Pop": {
"label": "Pop",
"attr": "monitor=\"pop\"",
"class": "default",
"icon": "external-link"
},
"Calendar": {
"label": "Calendar",
"attr": "monitor=\"calendar\"",
"class": "default ",
"icon": "calendar"
},
"Power Viewer": {
"label": "Power Viewer",
"attr": "monitor=\"powerview\"",
"class": "default",
"icon": "map-marker"
},
"Time-lapse": {
"label": "Time-lapse",
"attr": "monitor=\"timelapse\"",
"class": "default",
"icon": "angle-double-right"
},
"Video Grid": {
"label": "Video Grid",
"attr": "monitor=\"video_grid\"",
"class": "default",
"icon": "th"
},
"Videos List": {
"label": "Videos List",
"attr": "monitor=\"videos_table\"",
"class": "default",
"icon": "film"
},
"Monitor Settings": {
"label": "Monitor Settings",
"attr": "monitor=\"edit\"",
"class": "default",
"icon": "wrench"
},
"Fullscreen": {
"label": "Fullscreen",
"attr": "monitor=\"fullscreen\"",
"class": "default",
"icon": "arrows-alt"
},
"Close": {
"label": "Close",
"attr": "monitor=\"watch_off\"",
"class": "danger",
"icon": "times"
}
}
if(!$.ccio.permissionCheck('video_view',d.mid)){
delete(buttons["Videos List"])
delete(buttons["Time-lapse"])
delete(buttons["Power Viewer"])
delete(buttons["Calendar"])
}
if(!$.ccio.permissionCheck('monitor_edit',d.mid)){
delete(buttons["Monitor Settings"])
}
$.each(buttons,function(n,v){
tmp+='<a class="btn btn-'+v.class+'" '+v.attr+' title="'+v.label+'"><i class="fa fa-'+v.icon+'"></i></a>'
})
tmp+='</div>';//end of btn list
tmp+='</div>';//.stream-block
tmp+='<div class="mdl-data_window pull-right">';
tmp+='<div>';
tmp+='<div class="data-menu col-md-6 no-padding videos_monitor_list glM'+d.mid+user.auth_token+' scrollable"><ul></ul></div>';
tmp+='<div class="data-menu col-md-6 no-padding logs scrollable"></div>';
tmp+='</div>';
tmp+='</div>';//.mdl-data_window
tmp+='</div>';//.grid-stack-content
tmp+='</div>';//#monitor_live_...
break;
case 3://api key row
tmp+='<tr api_key="'+d.code+'"><td class="code">'+d.code+'</td><td class="ip">'+d.ip+'</td><td class="time">'+d.time+'</td><td class="text-right"><a class="delete btn btn-xs btn-danger">&nbsp;<i class="fa fa-trash"></i>&nbsp;</a></td></tr>';
break;
case 4://log row, draw to global and monitor
if(!d.time){d.time=$.ccio.init('t')}
tmp+='<li class="log-item">'
tmp+='<span>'
tmp+='<div>'+d.ke+' : <b>'+d.mid+'</b></div>'
tmp+='<span>'+d.log.type+'</span> '
tmp+='<b class="time livestamp" title="'+d.time+'"></b>'
tmp+='</span>'
tmp+='<div class="message">'
tmp+=$.ccio.init('jsontoblock',d.log.msg);
tmp+='</div>'
tmp+='</li>';
$(z).each(function(n,v){
v=$(v);
if(v.find('.log-item').length>10){v.find('.log-item:last').remove()}
})
break;
case 6://notification row
if(!d.time){d.time=$.ccio.init('t')}
if(!d.note.class){d.note.class=''}
tmp+='<li class="note-item '+d.note.class+'" ke="'+d.ke+'" auth="'+user.auth_token+'" mid="'+d.id+'">'
tmp+='<span>'
tmp+='<div>'+d.ke+' : <b>'+d.id+'</b></div>'
tmp+='<span>'+d.note.type+'</span> '
tmp+='<b class="time livestamp" title="'+d.time+'"></b>'
tmp+='</span>'
tmp+='<div class="message">'
tmp+=d.note.msg
tmp+='</div>'
tmp+='</li>';
break;
case'option':
var selected = ''
if(d.selected === true){selected = ' selected'}
tmp+='<option auth="'+user.auth_token+'"'+selected+' value="'+d.id+'">'+d.name+'</option>'
break;
case'stream-element':
try{k.d=JSON.parse(d.details);}catch(er){k.d=d.details}
if($.ccio.mon[d.ke+d.mid+user.auth_token]&&$.ccio.mon[d.ke+d.mid+user.auth_token].previousStreamType===k.d.stream_type){
return;
}
k.e=$('#monitor_live_'+d.mid+user.auth_token+' .stream-block');
k.e.find('.stream-element').remove();
if($.ccio.op().jpeg_on===true){
tmp+='<img class="stream-element">';
}else{
switch(k.d.stream_type){
case'hls':case'flv':case'mp4':
tmp+='<video class="stream-element" autoplay></video>';
break;
case'mjpeg':
tmp+='<iframe class="stream-element"></iframe>';
break;
case'jpeg':
tmp+='<img class="stream-element">';
break;
default://base64//h265
tmp+='<canvas class="stream-element"></canvas>';
break;
}
}
k.e.append(tmp).find('.stream-element').resize();
if($.ccio.op().switches.monitorMuteAudio === 1){
k.e.find('video').each(function(n,el){
el.muted = "muted"
})
}
break;
case'user-row':
d.e=$('.user-row[uid="'+d.uid+'"][ke="'+d.ke+'"]')
if(d.e.length===0){
tmp+='<li class="user-row" uid="'+d.uid+'" ke="'+d.ke+'">';
tmp+='<span><div><span class="mail">'+d.mail+'</span> : <b class="uid">'+d.uid+'</b></div><span>Logged in</span> <b class="time livestamped" title="'+d.logged_in_at+'"></b></span>';
tmp+='</li>';
}else{
d.e.find('.mail').text(d.mail)
d.e.find('.time').livestamp('destroy').toggleClass('livestamped livestamp').text(d.logged_in_at)
}
$.ccio.init('ls')
break;
case'detector-filters-where':
if(!d)d={};
d.id=$('#filters_where .row').length;
if(!d.p1){d.p1='indifference'}
if(!d.p2){d.p2='='}
if(!d.p3){d.p3=''}
if(!d.p4){d.p4='&&'}
tmp+='<div class="row where-row">'
tmp+=' <div class="form-group col-md-3">'
tmp+=' <label>'
tmp+=' <select class="form-control" where="p1">'
tmp+=' <option value="indifference" selected>'+lang['Indifference']+'</option>'
tmp+=' <option value="name">'+lang['Region Name']+'</option>'
tmp+=' <option value="reason">'+lang['Reason']+'</option>'
tmp+=' <option value="time">'+lang['Time']+'</option>'
tmp+=' <option value="plug">'+lang['Detection Engine']+'</option>'
tmp+=' <optgroup label="Matrix">'
tmp+=' <option value="tag">'+lang['Object Tag']+'</option>'
tmp+=' <option value="confidence">'+lang['Confidence']+'</option>'
tmp+=' <option value="x">'+lang['X Point']+'</option>'
tmp+=' <option value="y">'+lang['Y Point']+'</option>'
tmp+=' <option value="height">'+lang['Height']+'</option>'
tmp+=' <option value="width">'+lang['Width']+'</option>'
tmp+=' </optgroup>'
tmp+=' </select>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group col-md-3">'
tmp+=' <label>'
tmp+=' <select class="form-control" where="p2">'
tmp+=' <option value="===" selected>'+lang['Equal to']+'</option>'
tmp+=' <option value="!==">'+lang['Not Equal to']+'</option>'
tmp+=' <option value="indexOf">'+lang['Contains']+'</option>'
tmp+=' <option value="!indexOf">'+lang['Does Not Contain']+'</option>'
tmp+=' <optgroup label="For Numbers">'
tmp+=' <option value=">=">'+lang['Greater Than or Equal to']+'</option>'
tmp+=' <option value=">">'+lang['Greater Than']+'</option>'
tmp+=' <option value="<">'+lang['Less Than']+'</option>'
tmp+=' <option value="<=">'+lang['Less Than or Equal to']+'</option>'
tmp+=' </optgroup>'
tmp+=' </select>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group col-md-3">'
tmp+=' <label>'
tmp+=' <input class="form-control" placeholder="Value" title="'+lang.Value+'" where="p3">'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group col-md-3">'
tmp+=' <label>'
tmp+=' <select class="form-control" where="p4">'
tmp+=' <option value="&&" selected>'+lang['AND']+'</option>'
tmp+=' <option value="||">'+lang['OR']+'</option>'
tmp+=' </select>'
tmp+=' </label>'
tmp+=' </div>'
tmp+='</div>'
break;
case'filters-where':
if(!d)d={};
d.id=$('#filters_where .row').length;
if(!d.p1){d.p1='mid'}
if(!d.p2){d.p2='='}
if(!d.p3){d.p3=''}
tmp+='<div class="row where-row">';
tmp+=' <div class="form-group col-md-4">';
tmp+=' <label>';
tmp+=' <select class="form-control" where="p1">';
tmp+=' <option value="mid" selected>'+lang['Monitor ID']+'</option>';
tmp+=' <option value="ext">'+lang['File Type']+'</option>';
tmp+=' <option value="time">'+lang['Start Time']+'</option>';
tmp+=' <option value="end">'+lang['End Time']+'</option>';
tmp+=' <option value="size">'+lang['Filesize']+'</option>';
tmp+=' <option value="status">'+lang['Video Status']+'</option>';
tmp+=' </select>';
tmp+=' </label>';
tmp+=' </div>';
tmp+=' <div class="form-group col-md-4">';
tmp+=' <label>';
tmp+=' <select class="form-control" where="p2">';
tmp+=' <option value="=" selected>'+lang['Equal to']+'</option>';
tmp+=' <option value="!=">'+lang['Not Equal to']+'</option>';
tmp+=' <option value=">=">'+lang['Greater Than or Equal to']+'</option>';
tmp+=' <option value=">">'+lang['Greater Than']+'</option>';
tmp+=' <option value="<">'+lang['Less Than']+'</option>';
tmp+=' <option value="<=">'+lang['Less Than or Equal to']+'</option>';
tmp+=' <option value="LIKE">'+lang['Like']+'</option>';
tmp+=' <option value="=~">'+lang['Matches']+'</option>';
tmp+=' <option value="!~">'+lang['Not Matches']+'</option>';
tmp+=' <option value="=[]">'+lang['In']+'</option>';
tmp+=' <option value="![]">'+lang['Not In']+'</option>';
tmp+=' </select>';
tmp+=' </label>';
tmp+=' </div>';
tmp+=' <div class="form-group col-md-4">';
tmp+=' <label>';
tmp+=' <input class="form-control" placeholder="Value" title="'+lang.Value+'" where="p3">';
tmp+=' </label>';
tmp+=' </div>';
tmp+='</div>';
break;
case 'link-set'://Link Shinobi - 1 set
if(!d.host){d.host=''}
if(!d.ke){d.ke=''}
if(!d.api){d.api=''}
if(!d.secure){d.secure="0"}
tmp+='<div class="linksGroup" links="'+d.host+'">'
tmp+='<h4 class="round-left">'+d.host+' <small>'+d.ke+'</small>&nbsp;<div class="pull-right"><a class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i></a></div></h4>'
tmp+='<div class="form-group"><label><div><span>'+lang.Host+'</span></div><div><input class="form-control" link="host" value="'+d.host+'"></div></label></div>'
tmp+='<div class="form-group"><label><div><span>'+lang['Group Key']+'</span></div><div><input class="form-control" link="ke" value="'+d.ke+'"></div></label></div>'
tmp+='<div class="form-group"><label><div><span>'+lang['API Key']+'</span></div><div><input class="form-control" link="api" value="'+d.api+'"></div></label></div>'
tmp+='<div class="form-group"><label><div><span>'+lang.Secure+' (HTTPS/WSS)</span></div><div><select class="form-control" link="secure"><option value="1">'+lang.Yes+'</option><option selected value="0">'+lang.No+'</option></select></div></label></div>'
tmp+='</div>';
break;
case 'form-group'://Input Map Selector
var fields = []
if(d.fields){
if(d.fields instanceof Object){
fields = [d]
}else{
fields = d
}
}
$.each(fields,function(n,v){
var value,hidden
if(!v.attribute)v.attribute='';
if(!v.placeholder)v.placeholder='';
if(!v.class)v.class='';
if(!v.inputType)v.inputType='value';
if(v.hidden){hidden='style="display:none"'}else{hidden=''};
if(v.value){value='value=""'}else{value=''};
tmp+=' <div class="form-group '+v.class+'" '+hidden+'>'
tmp+=' <label><div><span>'+v.label+'</span></div>'
tmp+=' <div>'
switch(v.type){
case'text':
tmp+='<input class="form-control" '+v.inputType+'="'+v.name+'" placeholder="'+v.placeholder+'" "'+value+'" '+v.attribute+'>'
break;
case'selector':
tmp+='<select class="form-control" '+v.inputType+'="'+v.name+'" placeholder="'+v.placeholder+'" '+v.attribute+'>'
$.each(v.choices,function(m,b){
tmp+='<option value="'+b.value+'">'+b.label+'</option>'
})
tmp+='</select>'
break;
}
tmp+=' </div>'
tmp+=' </label>'
tmp+=' </div>'
})
break;
case 'input-map-selector'://Input Map Selector
if(!d.map){d.map=''}
tmp+=' <div class="form-group map-row">'
tmp+=' <label><div><span>'+lang['Map']+'</span></div>'
tmp+=' <div>'
tmp+=' <div class="input-group input-group-sm">'
tmp+='<input class="form-control" map-input="map" value="'+d.map+'" placeholder="0">'
tmp+=' <div class="input-group-btn">'
tmp+=' <a class="btn btn-danger delete_map_row">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' </label>'
tmp+=' </div>'
break;
case 'input-map'://Input Map Options
var tempID = $.ccio.gid();
if(!d.channel){
var numberOfChannelsDrawn = $('#monSectionInputMaps .input-map').length
d.channel=numberOfChannelsDrawn+1
}
var fields = [
// {
// name:'',
// class:'',
// placeholder:'',
// default:'',
// attribute:'',
// type:'text',
// },
{
name:'type',
label:lang['Input Type'],
default:'h264',
attribute:'selector="h_i_'+tempID+'"',
type:'selector',
choices:[
{label:lang['H.264 / H.265 / H.265+'],value:'h264'},
{label:lang['JPEG'],value:'jpeg'},
{label:lang['MJPEG'],value:'mjpeg'},
{label:lang['HLS (.m3u8)'],value:'hls'},
{label:lang['MPEG-4 (.mp4 / .ts)'],value:'mp4'},
{label:lang['Local'],value:'local'},
{label:lang['Raw'],value:'raw'},
]
},
{
name:'fulladdress',
label:lang['Full URL Path'],
placeholder:'Example : rtsp://admin:password@123.123.123.123/stream/1',
type:'text',
},
{
name:'sfps',
label:lang['Monitor Capture Rate'],
placeholder:'',
type:'text',
},
{
name:'aduration',
label:lang['Analyzation Duration'],
placeholder:'Example : 1000000',
type:'text',
},
{
name:'probesize',
label:lang['Probe Size'],
placeholder:'Example : 1000000',
type:'text',
},
{
name:'stream_loop',
label:lang['Loop Stream'],
class:'h_i_'+tempID+'_input h_i_'+tempID+'_mp4 h_i_'+tempID+'_raw',
hidden:true,
default:'0',
type:'selector',
choices:[
{label:'No',value:'0'},
{label:'Yes',value:'1'}
]
},
{
name:'rtsp_transport',
label:lang['RTSP Transport'],
class:'h_i_'+tempID+'_input h_i_'+tempID+'_h264',
default:'0',
type:'selector',
choices:[
{label:'Auto',value:''},
{label:'TCP',value:'tcp'},
{label:'UDP',value:'udp'}
]
},
{
name:'accelerator',
label:lang['Accelerator'],
attribute:'selector="h_accel_'+tempID+'"',
default:'0',
type:'selector',
choices:[
{label:'No',value:'0'},
{label:'Yes',value:'1'},
]
},
{
name:'hwaccel',
label:lang['hwaccel'],
class:'h_accel_'+tempID+'_input h_accel_'+tempID+'_1',
hidden:true,
default:'',
type:'selector',
choices: $.ccio.HWAccelChoices
},
{
name:'hwaccel_vcodec',
label:lang['hwaccel_vcodec'],
class:'h_accel_'+tempID+'_input h_accel_'+tempID+'_1',
hidden:true,
default:'auto',
type:'selector',
choices:[
{label:lang['Auto'],value:'auto'},
{label:lang['h264_cuvid'],value:'h264_cuvid',group:'NVIDIA'},
{label:lang['hevc_cuvid'],value:'hevc_cuvid',group:'NVIDIA'},
{label:lang['mjpeg_cuvid'],value:'mjpeg_cuvid',group:'NVIDIA'},
{label:lang['mpeg4_cuvid'],value:'mpeg4_cuvid',group:'NVIDIA'},
{label:lang['h264_qsv'],value:'h264_qsv',group:'Quick Sync Video'},
{label:lang['hevc_qsv'],value:'hevc_qsv',group:'Quick Sync Video'},
{label:lang['mpeg2_qsv'],value:'mpeg2_qsv',group:'Quick Sync Video'},
{label:lang['h264_mmal'],value:'h264_mmal',group:'Raspberry Pi'},
{label:lang['mpeg2_mmal'],value:'mpeg2_mmal',group:'Raspberry Pi'},
{label:lang['mpeg4_mmal'],value:'mpeg4_mmal',group:'Raspberry Pi'},
]
},
{
name:'hwaccel_device',
label:lang['hwaccel_device'],
class:'h_accel_'+tempID+'_input h_accel_'+tempID+'_1',
hidden:true,
placeholder:'Example : /dev/dri/video0',
type:'text',
},
];
tmp+='<div class="form-group-group forestgreen input-map" section id="monSectionMap'+tempID+'">'
tmp+=' <h4>'+lang["Input"]+' <b>'+lang["Map"]+' : <span class="place">'+d.channel+'</span></b>'
tmp+=' <div class="pull-right"><a class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i></a></div>'
tmp+=' </h4>'
$.each(fields,function(n,v){
if(!v.attribute)v.attribute='';
if(!v.placeholder)v.placeholder='';
if(!v.class)v.class='';
if(v.hidden){v.hidden='style="display:none"'}else{v.hidden=''};
tmp+=' <div class="form-group '+v.class+'" '+v.hidden+'>'
tmp+=' <label><div><span>'+v.label+'</span></div>'
tmp+=' <div>'
switch(v.type){
case'text':
tmp+='<input class="form-control" map-detail="'+v.name+'" placeholder="'+v.placeholder+'" '+v.attribute+'>'
break;
case'selector':
tmp+='<select class="form-control" map-detail="'+v.name+'" placeholder="'+v.placeholder+'" '+v.attribute+'>'
$.each(v.choices,function(m,b){
tmp+='<option value="'+b.value+'">'+b.label+'</option>'
})
tmp+='</select>'
break;
}
tmp+=' </div>'
tmp+=' </label>'
tmp+=' </div>'
})
tmp+='</div>'
break;
case 'stream-channel'://Stream Channel
var tempID = $.ccio.gid();
if(!d.channel){
var numberOfChannelsDrawn = $('#monSectionStreamChannels .stream-channel').length
d.channel=numberOfChannelsDrawn
}
tmp+='<div class="form-group-group blue stream-channel" section id="monSectionChannel'+tempID+'">'
tmp+=' <h4>'+lang["Stream Channel"]+' <span class="place">'+d.channel+'</span>'
tmp+=' <div class="pull-right"><a class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i></a></div>'
tmp+=' </h4>'
// tmp+=' <div class="form-group">'
// tmp+=' <label><div><span>'+lang["Input Selector"]+'</span></div>'
// tmp+=' <div><input class="form-control" channel-detail="stream_map" placeholder="0"></div>'
// tmp+=' </label>'
// tmp+=' </div>'
tmp+='<div class="form-group-group forestgreen" input-mapping="stream_channel-'+d.channel+'">'
tmp+=' <h4>'+lang['Input Feed']
tmp+=' <div class="pull-right">'
tmp+=' <a class="btn btn-success btn-xs add_map_row"><i class="fa fa-plus-square-o"></i></a>'
tmp+=' </div>'
tmp+=' </h4>'
tmp+=' <div class="choices"></div>'
tmp+='</div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Stream Type"]+'</span></div>'
tmp+=' <div><select class="form-control" channel-detail="stream_type" selector="h_st_channel_'+tempID+'" triggerChange="#monSectionChannel'+tempID+' [channel-detail=stream_vcodec]" triggerChangeIgnore="b64,mjpeg">'
tmp+=' <option value="mp4">'+lang["Poseidon"]+'</option>'
tmp+=' <option value="rtmp">'+lang["RTMP Stream"]+'</option>'
tmp+=' <option value="flv">'+lang["FLV"]+'</option>'
tmp+=' <option value="h264">'+lang["Raw H.264 Stream"]+'</option>'
tmp+=' <option value="hls">'+lang["HLS (includes Audio)"]+'</option>'
tmp+=' <option value="mjpeg">'+lang["MJPEG"]+'</option>'
tmp+=' </select></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="h_st_channel_'+tempID+'_input h_st_channel_'+tempID+'_rtmp">'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Server URL"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="rtmp_server_url" placeholder="Example : rtmp://live-api.facebook.com:80/rtmp/"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Stream Key"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="rtmp_stream_key" placeholder="Example : 1111111111?ds=1&a=xxxxxxxxxx"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' <div class="form-group h_st_channel_'+tempID+'_input h_st_channel_'+tempID+'_mjpeg" style="display:none">'
tmp+=' <label><div><span>'+lang["# of Allow MJPEG Clients"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="stream_mjpeg_clients" placeholder="20"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="h_st_channel_'+tempID+'_input h_st_channel_'+tempID+'_hls h_st_channel_'+tempID+'_rtmp h_st_channel_'+tempID+'_flv h_st_channel_'+tempID+'_mp4 h_st_channel_'+tempID+'_h264">'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["HLS Video Encoder"]+'</span></div>'
tmp+=' <div><select class="form-control" channel-detail="stream_vcodec" selector="h_hls_v_channel_'+tempID+'">'
tmp+=' <option value="no" selected>'+lang["Auto"]+'</option>'
tmp+=' <option value="libx264">'+lang["libx264"]+'</option>'
tmp+=' <option value="libx265">'+lang["libx265"]+'</option>'
tmp+=' <option value="copy" selected>'+lang["copy"]+'</option>'
tmp+=' <optgroup label="'+lang["Hardware Accelerated"]+'">'
tmp+=' <option value="h264_vaapi">'+lang["h264_vaapi"]+'</option>'
tmp+=' <option value="hevc_vaapi">'+lang["hevc_vaapi"]+'</option>'
tmp+=' <option value="h264_nvenc">'+lang["h264_nvenc"]+'</option>'
tmp+=' <option value="hevc_nvenc">'+lang["hevc_nvenc"]+'</option>'
tmp+=' <option value="h264_qsv">'+lang["h264_qsv"]+'</option>'
tmp+=' <option value="hevc_qsv">'+lang["hevc_qsv"]+'</option>'
tmp+=' <option value="mpeg2_qsv">'+lang["mpeg2_qsv"]+'</option>'
tmp+=' <option value="h264_omx">'+lang["h264_omx"]+'</option>'
tmp+=' </optgroup>'
tmp+=' </select></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["HLS Audio Encoder"]+'</span></div>'
tmp+=' <div><select class="form-control" channel-detail="stream_acodec">'
tmp+=' <option value="no" selected>'+lang["No Audio"]+'</option>'
tmp+=' <option value="">'+lang["Auto"]+'</option>'
tmp+=' <option value="aac">'+lang["aac"]+'</option>'
tmp+=' <option value="ac3">'+lang["ac3"]+'</option>'
tmp+=' <option value="libmp3lame">'+lang["libmp3lame"]+'</option>'
tmp+=' <option value="copy">'+lang["copy"]+'</option>'
tmp+=' </select></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Rate"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="stream_fps" placeholder=""></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="h_st_channel_'+tempID+'_input h_st_channel_'+tempID+'_hls" style="display:none">'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["HLS Segment Length"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="hls_time" placeholder="2"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["HLS Preset"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="preset_stream" placeholder="ultrafast"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["HLS List Size"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="hls_list_size" placeholder="2"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' <div class="h_st_channel_'+tempID+'_input h_st_channel_'+tempID+'_mjpeg h_st_channel_'+tempID+'_hls h_st_channel_'+tempID+'_rtmp h_st_channel_'+tempID+'_jsmpeg h_st_channel_'+tempID+'_flv h_st_channel_'+tempID+'_mp4 h_st_channel_'+tempID+'_h264 h_hls_v_channel_'+tempID+'_input h_hls_v_channel_'+tempID+'_libx264 h_hls_v_channel_'+tempID+'_libx265 h_hls_v_channel_'+tempID+'_h264_nvenc h_hls_v_channel_'+tempID+'_hevc_nvenc h_hls_v_channel_'+tempID+'_no" style="display:none">'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Quality"]+'</span></div>'
tmp+=' <div><input class="form-control" placeholder="23" channel-detail="stream_quality"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="h_st_channel_'+tempID+'_input h_st_channel_'+tempID+'_rtmp">'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Video Bit Rate"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="stream_v_br" placeholder=""></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Audio Bit Rate"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="stream_a_br" placeholder="128k"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Width"]+'</span></div>'
tmp+=' <div><input class="form-control" type="number" min="1" channel-detail="stream_scale_x" placeholder="Example : 640"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Height"]+'</span></div>'
tmp+=' <div><input class="form-control" type="number" min="1" channel-detail="stream_scale_y" placeholder="Example : 480"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Rotate"]+'</span></div>'
tmp+=' <div><select class="form-control" channel-detail="rotate_stream">'
tmp+=' <option value="no" selected>'+lang["No Rotation"]+'</option>'
tmp+=' <option value="2,transpose=2">'+lang["180 Degrees"]+'</option>'
tmp+=' <option value="0">'+lang["90 Counter Clockwise and Vertical Flip (default)"]+'</option>'
tmp+=' <option value="1">'+lang["90 Clockwise"]+'</option>'
tmp+=' <option value="2">'+lang["90 Clockwise and Vertical Flip"]+'</option>'
tmp+=' <option value="3">'+lang["90 Clockwise and Vertical Flip"]+'</option>'
tmp+=' </select></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Video Filter"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="svf"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span>'+lang["Stream Flags"]+'</span></div>'
tmp+=' <div><input class="form-control" channel-detail="cust_stream"></div>'
tmp+=' </label>'
tmp+=' </div>'
tmp+=' </div>'
tmp+=' </div>'
break;
}
if(z && x !== 2){
$(z).prepend(tmp)
}
switch(x){
case 1:
z='#monitors_list .link-monitors-list[auth="'+user.auth_token+'"][ke="'+d.ke+'"]'
if($('.link-monitors-list[auth="'+user.auth_token+'"][ke="'+d.ke+'"]').length===0){
$("#monitors_list").append('<div class="link-monitors-list" auth="'+user.auth_token+'" ke="'+d.ke+'"></div>')
var options = {
cellHeight: 80,
verticalMargin: 10,
};
//monitor="watch_off"
$(z).gridstack(options);
$(z).on('change', function(event, ui) {
var monitors = {}
$.grid.e.find(" .monitor_item").each(function(n,v){
var el = $(v)
var item = {}
item.ke = el.attr('ke')
item.mid = el.attr('mid')
item.x = el.attr('data-gs-x')
item.y = el.attr('data-gs-y')
item.height = el.attr('data-gs-height')
item.width = el.attr('data-gs-width')
monitors[item.ke+item.mid] = item
})
user.details.monitorOrder=monitors;
$.ccio.cx({f:'monitorOrder',monitorOrder:monitors},user)
});
}
$(z).prepend(tmp)
componentHandler.upgradeAllRegistered()
break;
case 0:case 4:
$.ccio.init('ls');
break;
case 2:
var x = 0;
var y = 0;
var width = $.grid.getMonitorsPerRow()
var height = width;
if(user.details && user.details.monitorOrder && user.details.monitorOrder[d.ke+d.mid]){
var saved = user.details.monitorOrder[d.ke+d.mid];
x = saved.x;
y = saved.y;
width = saved.width;
height = saved.height;
}
var autoPlacement = false
if($.ccio.op().switches.monitorOrder !== 1){
autoPlacement = true
}
$(z).data('gridstack').addWidget($(tmp), x, y, width, height, autoPlacement);
k.e=$('#monitor_live_'+d.mid+user.auth_token);
try{
if(JSON.parse(d.details).control=="1"){
k.e.find('[monitor="control_toggle"]').show()
}else{
k.e.find('.pad').remove();
k.e.find('[monitor="control_toggle"]').hide()
}
$.ccio.tm('stream-element',d,null,user)
}catch(re){$.ccio.log(re)}
k.mid=d.mid
k.mon=$.ccio.mon[d.ke+d.mid+user.auth_token]
$.ccio.init('monitorInfo',k)
break;
case'detector-filters-where':
$('#detector_filters_where').append(tmp);
$('#detector_filters_where .row [where="p4"][disabled]').prop('disabled',false)
$('#detector_filters_where .row:last [where="p1"]').val(d.p1)
$('#detector_filters_where .row:last [where="p2"]').val(d.p2)
$('#detector_filters_where .row:last [where="p3"]').val(d.p3)
$('#detector_filters_where .row:last [where="p4"]').val(d.p4).prop('disabled',true)
break;
case'filters-where':
$('#filters_where').append(tmp);
$('#filters_where .row:last [where="p1"]').val(d.p1)
$('#filters_where .row:last [where="p2"]').val(d.p2)
$('#filters_where .row:last [where="p3"]').val(d.p3)
break;
case'input-map':
var mapsList = $.aM.maps
mapsList.append(tmp)
mapsList.find('.input-map').last().find('[map-detail="aduration"]').change()
return tempID;
break;
case'stream-channel':
var channeList = $.aM.channels
channeList.append(tmp)
channeList.find('.stream-channel').last().find('[channel-detail="stream_vcodec"]').change()
return tempID;
break;
case'link-set':
$('[links="'+d.host+'"] [link="secure"]').val(d.secure).change()
break;
}
return tmp;
}
$.ccio.pm=function(x,d,z,user){
var tmp='';if(!d){d={}};
if(!user){
user=$user
}
switch(x){
case 0:
d.mon=$.ccio.mon[d.ke+d.mid+user.auth_token];
d.ev='.glM'+d.mid+user.auth_token+'.videos_list ul,.glM'+d.mid+user.auth_token+'.videos_monitor_list ul';d.fr=$.ccio.fr.find(d.ev),d.tmp='';
if(d.fr.length===0){$.ccio.fr.append('<div class="videos_list glM'+d.mid+user.auth_token+'"><h3 class="title">'+d.mon.name+'</h3><ul></ul></div>')}
if(d.videos&&d.videos.length>0){
$.each(d.videos,function(n,v){
if(v.status!==0){
tmp+=$.ccio.tm(0,v,null,user)
}
})
}else{
$('.glM'+d.mid+user.auth_token+'.videos_list,.glM'+d.mid+user.auth_token+'.videos_monitor_list').appendTo($.ccio.fr)
tmp+='<li class="notice novideos">No videos</li>';
}
$(d.ev).html(tmp);
$.ccio.init('ls');
break;
case 3:
z='#api_list';
$(z).empty();
$.each(d,function(n,v){
tmp+=$.ccio.tm(3,v,null,user);
})
break;
case'option':
$.each(d,function(n,v){
tmp+=$.ccio.tm('option',v,null,user);
})
break;
case'user-row':
$.each(d,function(n,v){
tmp+=$.ccio.tm('user-row',v,null,user);
})
z='#users_online'
break;
case'link-set':
$.sM.links.empty()
$.each(d,function(n,v){
tmp+=$.ccio.tm('link-set',v,'#linkShinobi',user)
})
break;
}
if(z){
$(z).prepend(tmp)
}
return tmp;
}