mirror of
https://gitlab.com/Shinobi-Systems/ShinobiCE.git
synced 2025-03-09 15:40:15 +00:00
334 lines
16 KiB
JavaScript
334 lines
16 KiB
JavaScript
$(document).ready(function(e){
|
|
//Timelapse Window
|
|
$.timelapse={e:$('#timelapse')}
|
|
$.timelapse.f=$.timelapse.e.find('form'),
|
|
$.timelapse.meter=$.timelapse.e.find('.motion-meter'),
|
|
$.timelapse.line=$('#timelapse_video_line'),
|
|
$.timelapse.display=$('#timelapse_video_display'),
|
|
$.timelapse.seekBar=$('#timelapse_seekBar'),
|
|
$.timelapse.seekBarProgress=$.timelapse.seekBar.find('.progress-bar'),
|
|
$.timelapse.dr=$('#timelapse_daterange'),
|
|
$.timelapse.mL=$.timelapse.e.find('.motion_list'),
|
|
$.timelapse.monitors=$.timelapse.e.find('.monitors_list');
|
|
$.timelapse.playDirection='videoAfter'
|
|
$.timelapse.playRate=15
|
|
$.timelapse.placeholder=placeholder.getData(placeholder.plcimg({bgcolor:'#b57d00',text:'...'}))
|
|
$.timelapse.dr.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){
|
|
$.timelapse.drawTimeline()
|
|
$.timelapse.dr.focus()
|
|
});
|
|
$.timelapse.f.find('input,select').change(function(){
|
|
$.timelapse.f.submit()
|
|
})
|
|
$.timelapse.f.submit(function(e){
|
|
e.preventDefault();
|
|
$.timelapse.drawTimeline()
|
|
return false;
|
|
})
|
|
$.timelapse.drawTimeline=function(getData){
|
|
var e={};
|
|
if(getData===undefined){getData=true}
|
|
var mid = $.timelapse.monitors.val()
|
|
e.dateRange=$.timelapse.dr.data('daterangepicker');
|
|
e.dateRange={startDate:e.dateRange.startDate,endDate:e.dateRange.endDate}
|
|
e.videoURL=$.ccio.init('location',$user)+$user.auth_token+'/videos/'+$user.ke+'/'+mid;
|
|
e.videoURL+='?limit=100&start='+$.ccio.init('th',e.dateRange.startDate)+'&end='+$.ccio.init('th',e.dateRange.endDate);
|
|
e.next=function(videos){
|
|
$.timelapse.currentVideos={}
|
|
e.tmp=''
|
|
$.each(videos.videos,function(n,v){
|
|
if(!v||!v.time){return}
|
|
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
|
|
v.videoBefore=videos.videos[n-1];
|
|
v.videoAfter=videos.videos[n+1];
|
|
// if(v.href.charAt(0)==='/'){
|
|
// v.href=$.ccio.init('location',user)+(v.href.substring(1))
|
|
// v.videoURL=$.ccio.init('location',user)+(v.videoURL.substring(1))
|
|
// }
|
|
v.position=n;
|
|
$.timelapse.currentVideos[v.filename]=v;
|
|
e.tmp+='<li class="glM'+v.mid+$user.auth_token+' list-group-item timelapse_video flex-block" timelapse="video" file="'+v.filename+'" href="'+v.href+'" mid="'+v.mid+'" ke="'+v.ke+'" auth="'+$user.auth_token+'">'
|
|
e.tmp+='<div class="flex-block">'
|
|
e.tmp+='<div class="flex-unit-3"><div class="frame" style="background-image:url('+$.timelapse.placeholder+')"></div></div>'
|
|
e.tmp+='<div class="flex-unit-3"><div><span title="'+v.time+'" class="livestamp"></span></div><div>'+v.filename+'</div></div>'
|
|
e.tmp+='<div class="flex-unit-3 text-right"><a class="btn btn-default" download="'+v.mid+'-'+v.filename+'" href="'+v.href+'"> <i class="fa fa-download"></i> </a> <a class="btn btn-danger" video="delete" href="'+$.ccio.init('videoHrefToDelete',v.href)+'"> <i class="fa fa-trash-o"></i> </a></div>'
|
|
e.tmp+='</div>'
|
|
e.tmp+='<div class="flex-block">'
|
|
e.tmp+='<div class="flex-unit-3"><div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" style="width:0%"></div></div></div>'
|
|
e.tmp+='</div>'
|
|
e.tmp+='</li>'
|
|
})
|
|
$.timelapse.line.html(e.tmp)
|
|
$.ccio.init('ls')
|
|
if(getData===true){
|
|
e.timeout=50
|
|
}else{
|
|
e.timeout=2000
|
|
}
|
|
setTimeout(function(){
|
|
if($.timelapse.e.find('.timelapse_video.active').length===0){
|
|
$.timelapse.e.find('[timelapse="video"]').first().click()
|
|
}
|
|
},e.timeout)
|
|
}
|
|
if(getData===true){
|
|
$.getJSON(e.videoURL,function(videos){
|
|
videos.videos=videos.videos.reverse()
|
|
$.timelapse.currentVideosArray=videos
|
|
e.next(videos)
|
|
})
|
|
}else{
|
|
e.next($.timelapse.currentVideosArray)
|
|
}
|
|
}
|
|
$.timelapse.playButtonIcon = $.timelapse.e.find('[timelapse="play"]').find('i')
|
|
$.timelapse.timelapseSpeedUseBasicSwitch = $('#timelapseSpeedUseBasic')
|
|
$.timelapse.timelapseSpeedUseBasicSwitch.on('change',function(){
|
|
var el = $.timelapse.e.find('.timelapseSpeedUseBasicSwitch')
|
|
if($(this).is(':checked')){
|
|
el.hide()
|
|
}else{
|
|
el.show()
|
|
}
|
|
$.timelapse.play()
|
|
})
|
|
$.timelapse.getUseBasicStatus = function(){return $.timelapse.timelapseSpeedUseBasicSwitch.prop('checked')}
|
|
$.timelapse.onPlayPause = function(toggleGui,secondWind){
|
|
if($.timelapse.paused === true){
|
|
$.timelapse.paused = false
|
|
if(toggleGui === true)$.timelapse.play();
|
|
}else{
|
|
$.timelapse.paused = true
|
|
if(toggleGui === true)$.timelapse.pause(secondWind);
|
|
}
|
|
}
|
|
$.timelapse.pause = function(secondWind){
|
|
//secondWind is used because sometimes pause can be pressed just as a video ends and the pause command does not register on the next video.
|
|
var videoNow = $.timelapse.display.find('video.videoNow')[0]
|
|
var pause = function(){
|
|
if(videoNow.paused == false)videoNow.pause()
|
|
clearInterval($.timelapse.interval)
|
|
$.timelapse.playButtonIcon.removeClass('fa-pause').addClass('fa-play')
|
|
}
|
|
pause()
|
|
if(secondWind === true)setTimeout(pause,250);
|
|
}
|
|
$.timelapse.play = function(x){
|
|
var videoNow = $.timelapse.display.find('video.videoNow')[0]
|
|
$.timelapse.pause()
|
|
clearInterval($.timelapse.interval)
|
|
if($.timelapse.getUseBasicStatus()){
|
|
videoNow.playbackRate = $.timelapse.playRate
|
|
if(videoNow.paused)videoNow.play()
|
|
}else{
|
|
videoNow.playbackRate = 1.0
|
|
$.timelapse.interval = setInterval(function(){
|
|
if(videoNow.currentTime >= videoNow.duration - .2){
|
|
clearInterval($.timelapse.interval)
|
|
videoNow.currentTime = videoNow.duration
|
|
}else{
|
|
videoNow.currentTime += .5
|
|
}
|
|
},500 / $.timelapse.playRate)
|
|
}
|
|
$.timelapse.playButtonIcon.removeClass('fa-play').addClass('fa-pause')
|
|
}
|
|
$.timelapse.rewind = function(e){
|
|
var videoNow = $.timelapse.display.find('video.videoNow')[0]
|
|
$.timelapse.pause()
|
|
videoNow.playbackRate = 1.0
|
|
clearInterval($.timelapse.interval)
|
|
$.timelapse.interval = setInterval(function(){
|
|
if(videoNow.currentTime <= 0.2){
|
|
clearInterval($.timelapse.interval)
|
|
videoNow.currentTime = 0
|
|
$('[timelapse][href="'+e.videoCurrentBefore.attr('video')+'"]').click()
|
|
var videoNowNew = $.timelapse.display.find('video.videoNow')[0]
|
|
videoNowNew.pause()
|
|
videoNowNew.currentTime = videoNowNew.duration - 0.1
|
|
$.timelapse.e.find('[timelapse="stepBackBack"]').click()
|
|
}else{
|
|
videoNow.currentTime += -.5
|
|
}
|
|
},500 / $.timelapse.playRate)
|
|
$.timelapse.playButtonIcon.removeClass('fa-play').addClass('fa-pause')
|
|
}
|
|
$.timelapse.e.on('click','[timelapse]',function(){
|
|
var e={}
|
|
e.e=$(this)
|
|
e.videoCurrentNow=$.timelapse.display.find('.videoNow')
|
|
e.videoCurrentAfter=$.timelapse.display.find('.videoAfter')
|
|
e.videoCurrentBefore=$.timelapse.display.find('.videoBefore')
|
|
if($.timelapse.videoInterval){
|
|
clearInterval($.timelapse.videoInterval);
|
|
}
|
|
switch(e.e.attr('timelapse')){
|
|
case'download':
|
|
$.timelapse.line.find('.active [download]').click()
|
|
break;
|
|
case'mute':
|
|
e.videoCurrentNow[0].muted = !e.videoCurrentNow[0].muted
|
|
$.timelapse.videoNowIsMuted = e.videoCurrentNow[0].muted
|
|
e.e.find('i').toggleClass('fa-volume-off fa-volume-up')
|
|
e.e.toggleClass('btn-danger')
|
|
break;
|
|
case'play':
|
|
e.videoCurrentNow[0].playbackRate = $.timelapse.playRate;
|
|
$.timelapse.onPlayPause(true,true)
|
|
break;
|
|
case'setPlayBackRate':
|
|
$.timelapse.pause()
|
|
$.timelapse.playRate = parseFloat(e.e.attr('playRate'))
|
|
$.timelapse.play()
|
|
break;
|
|
case'stepFrontFront':
|
|
e.add=e.e.attr('add')
|
|
e.stepFrontFront=parseInt(e.e.attr('stepFrontFront'))
|
|
if(!e.stepFrontFront||isNaN(e.stepFrontFront)){e.stepFrontFront = 5}
|
|
if(e.add==="0"){
|
|
$.timelapse.playRate = e.stepFrontFront
|
|
}else{
|
|
$.timelapse.playRate += e.stepFrontFront
|
|
}
|
|
e.videoCurrentNow[0].playbackRate = $.timelapse.playRate;
|
|
e.videoCurrentNow[0].play()
|
|
break;
|
|
case'stepFront':
|
|
e.videoCurrentNow[0].currentTime += 5;
|
|
e.videoCurrentNow[0].pause()
|
|
break;
|
|
case'stepBackBack':
|
|
// e.videoCurrentNow=$.timelapse.display.find('.videoNow')
|
|
// e.videoCurrentAfter=$.timelapse.display.find('.videoAfter')
|
|
// e.videoCurrentBefore=$.timelapse.display.find('.videoBefore')
|
|
$.timelapse.rewind(e)
|
|
break;
|
|
case'stepBack':
|
|
e.videoCurrentNow[0].currentTime += -5;
|
|
e.videoCurrentNow[0].pause()
|
|
break;
|
|
case'video':
|
|
$.timelapse.e.find('video').each(function(n,v){
|
|
v.pause()
|
|
})
|
|
e.drawVideoHTML=function(position){
|
|
var video
|
|
var exisitingElement=$.timelapse.display.find('.'+position)
|
|
if(position){
|
|
video=e.video[position]
|
|
}else{
|
|
position='videoNow'
|
|
video=e.video
|
|
}
|
|
if(video){
|
|
$.timelapse.display.append('<video class="video_video '+position+'" video="'+video.href+'" preload><source src="'+video.href+'" type="video/'+video.ext+'"></video>')
|
|
}
|
|
}
|
|
e.filename=e.e.attr('file')
|
|
e.video=$.timelapse.currentVideos[e.filename]
|
|
e.videoIsSame=(e.video.href==e.videoCurrentNow.attr('video'))
|
|
e.videoIsAfter=(e.video.href==e.videoCurrentAfter.attr('video'))
|
|
e.videoIsBefore=(e.video.href==e.videoCurrentBefore.attr('video'))
|
|
if(e.videoIsSame||e.videoIsAfter||e.videoIsBefore){
|
|
switch(true){
|
|
case e.videoIsSame:
|
|
$.ccio.log('$.timelapse','videoIsSame')
|
|
e.videoNow=$.timelapse.display.find('video.videoNow')
|
|
if(e.videoNow[0].paused===true){
|
|
e.videoNow[0].play()
|
|
}else{
|
|
e.videoNow[0].pause()
|
|
}
|
|
return
|
|
break;
|
|
case e.videoIsAfter:
|
|
$.ccio.log('$.timelapse','videoIsAfter')
|
|
e.videoCurrentBefore.remove()
|
|
e.videoCurrentAfter.removeClass('videoAfter').addClass('videoNow')
|
|
e.videoCurrentNow.removeClass('videoNow').addClass('videoBefore')
|
|
e.drawVideoHTML('videoAfter')
|
|
break;
|
|
case e.videoIsBefore:
|
|
$.ccio.log('$.timelapse','videoIsBefore')
|
|
e.videoCurrentAfter.remove()
|
|
e.videoCurrentBefore.removeClass('videoBefore').addClass('videoNow')
|
|
e.videoCurrentNow.removeClass('videoNow').addClass('videoAfter')
|
|
e.drawVideoHTML('videoBefore')
|
|
break;
|
|
}
|
|
}else{
|
|
$.ccio.log('$.timelapse','newSetOf3')
|
|
$.timelapse.display.empty()
|
|
e.drawVideoHTML()//videoNow
|
|
e.drawVideoHTML('videoBefore')
|
|
e.drawVideoHTML('videoAfter')
|
|
}
|
|
$.timelapse.display.find('video').each(function(n,v){
|
|
v.addEventListener('loadeddata', function() {
|
|
e.videoCurrentAfterPreview=$('.timelapse_video[href="'+$(v).attr('video')+'"] .frame')
|
|
if(e.videoCurrentAfterPreview.attr('set')!=='1'){
|
|
$.ccio.snapshotVideo(v,function(url,buffer){
|
|
e.videoCurrentAfterPreview.attr('set','1').css('background-image','url('+url+')')
|
|
if($(v).hasClass('videoAfter')){
|
|
v.currentTime=0
|
|
v.pause()
|
|
}
|
|
})
|
|
}
|
|
}, false);
|
|
})
|
|
e.videoNow=$.timelapse.display.find('video.videoNow')[0]
|
|
if($.timelapse.videoNowIsMuted){
|
|
e.videoNow.muted=true
|
|
}
|
|
$.timelapse.playButtonIcon.removeClass('fa-pause').addClass('fa-play')
|
|
$.timelapse.onended = function() {
|
|
$.timelapse.line.find('[file="'+e.video[$.timelapse.playDirection].filename+'"]').click()
|
|
};
|
|
e.videoNow.onended = $.timelapse.onended
|
|
e.videoNow.onerror = $.timelapse.onended
|
|
//
|
|
$(e.videoNow)
|
|
.off('play').on('play',$.timelapse.play)
|
|
.off('pause').on('pause',$.timelapse.onPlayPause)
|
|
.off('timeupdate').on('timeupdate',function(){
|
|
var value= (( e.videoNow.currentTime / e.videoNow.duration ) * 100)+"%"
|
|
$.timelapse.seekBarProgress.css("width",value);
|
|
$.timelapse.e.find('.timelapse_video[file="'+e.filename+'"] .progress-bar').css("width",value);
|
|
})
|
|
$.timelapse.play()
|
|
$.timelapse.seekBar.off("click").on("click", function(seek){
|
|
var offset = $(this).offset();
|
|
var left = (seek.pageX - offset.left);
|
|
var totalWidth = $.timelapse.seekBar.width();
|
|
var percentage = ( left / totalWidth );
|
|
var vidTime = e.videoNow.duration * percentage;
|
|
e.videoNow.currentTime = vidTime;
|
|
});
|
|
|
|
$.ccio.log('$.timelapse',e.video)
|
|
$.timelapse.line.find('.timelapse_video').removeClass('active')
|
|
e.videoCurrentNow=$.timelapse.display.find('.videoNow')
|
|
e.e.addClass('active')
|
|
if ($('#timelapse_video_line:hover').length === 0) {
|
|
$.timelapse.line.animate({scrollTop:$.timelapse.line.scrollTop() + e.e.position().top - $.timelapse.line.height()/2 + e.e.height()/2 - 40});
|
|
}
|
|
break;
|
|
}
|
|
$.timelapse.e.find('.timelapse_playRate').text('x'+$.timelapse.playRate)
|
|
})
|
|
$.timelapse.e.on('hidden.bs.modal',function(e){
|
|
delete($.timelapse.currentVideos)
|
|
delete($.timelapse.currentVideosArray)
|
|
})
|
|
})
|