520 lines
24 KiB
JavaScript
520 lines
24 KiB
JavaScript
var loadedVideosInMemory = {}
|
|
var loadedFramesMemory = {}
|
|
var loadedFramesMemoryTimeout = {}
|
|
function getLocalTimelapseImageLink(imageUrl){
|
|
if(loadedFramesMemory[imageUrl]){
|
|
return loadedFramesMemory[imageUrl]
|
|
}else{
|
|
return new Promise((resolve,reject) => {
|
|
fetch(imageUrl)
|
|
.then(res => res.blob()) // Gets the response and returns it as a blob
|
|
.then(blob => {
|
|
var objectURL = URL.createObjectURL(blob);
|
|
loadedFramesMemory[imageUrl] = objectURL
|
|
clearTimeout(loadedFramesMemoryTimeout[imageUrl])
|
|
loadedFramesMemoryTimeout[imageUrl] = setTimeout(function(){
|
|
URL.revokeObjectURL(objectURL)
|
|
delete(loadedFramesMemory[imageUrl])
|
|
delete(loadedFramesMemoryTimeout[imageUrl])
|
|
},1000 * 60 * 10)
|
|
resolve(objectURL)
|
|
});
|
|
})
|
|
}
|
|
}
|
|
async function preloadAllTimelapseFramesToMemoryFromVideoList(framesSortedByDays){
|
|
async function syncWait(waitTime){
|
|
return new Promise((resolve,reject) => {
|
|
setTimeout(function(){
|
|
resolve()
|
|
},waitTime)
|
|
})
|
|
}
|
|
for (let ii = 0; ii < framesSortedByDays.length; ii++) {
|
|
var frame = framesSortedByDays[ii]
|
|
console.log ('Loading... ',frame.href)
|
|
await syncWait(50)
|
|
await getLocalTimelapseImageLink(frame.href)
|
|
console.log ('Loaded! ',frame.href)
|
|
}
|
|
}
|
|
function createVideoLinks(video){
|
|
var details = safeJsonParse(video.details)
|
|
var queryString = []
|
|
// if(details.isUTC === true){
|
|
// queryString.push('isUTC=true')
|
|
// }else{
|
|
// video.time = s.utcToLocal(video.time)
|
|
// video.end = s.utcToLocal(video.end)
|
|
// }
|
|
if(queryString.length > 0){
|
|
queryString = '?' + queryString.join('&')
|
|
}else{
|
|
queryString = ''
|
|
}
|
|
video.ext = video.ext ? video.ext : 'mp4'
|
|
if(details.type === 'googd'){
|
|
video.href = undefined
|
|
}else if(!video.ext && video.href){
|
|
video.ext = video.href.split('.')
|
|
video.ext = video.ext[video.ext.length - 1]
|
|
}
|
|
video.filename = formattedTimeForFilename(video.time,null,`YYYY-MM-DDTHH-mm-ss`) + '.' + video.ext;
|
|
var href = getApiPrefix('videos') + '/'+video.mid+'/'+video.filename;
|
|
video.actionUrl = href
|
|
video.links = {
|
|
deleteVideo : href+'/delete' + queryString,
|
|
changeToUnread : href+'/status/1' + queryString,
|
|
changeToRead : href+'/status/2' + queryString
|
|
}
|
|
if(!video.href || options.hideRemote === true)video.href = href + queryString
|
|
video.details = details
|
|
return video
|
|
}
|
|
function applyDataListToVideos(videos,events,keyName,reverseList){
|
|
var updatedVideos = videos.concat([])
|
|
var currentEvents = events.concat([])
|
|
updatedVideos.forEach(function(video){
|
|
var videoEvents = []
|
|
currentEvents.forEach(function(theEvent,index){
|
|
var startTime = new Date(video.time)
|
|
var endTime = new Date(video.end)
|
|
var eventTime = new Date(theEvent.time)
|
|
if(theEvent.mid === video.mid && eventTime >= startTime && eventTime <= endTime){
|
|
videoEvents.push(theEvent)
|
|
currentEvents.splice(index, 1)
|
|
}
|
|
})
|
|
if(reverseList)videoEvents = videoEvents.reverse()
|
|
video[keyName || 'events'] = videoEvents
|
|
})
|
|
return updatedVideos
|
|
}
|
|
function applyTimelapseFramesListToVideos(videos,events,keyName,reverseList){
|
|
var thisApiPrefix = getApiPrefix() + '/timelapse/' + $user.ke + '/'
|
|
var newVideos = applyDataListToVideos(videos,events,keyName,reverseList)
|
|
newVideos.forEach(function(video){
|
|
video.timelapseFrames.forEach(function(row){
|
|
var apiURL = thisApiPrefix + row.mid
|
|
row.href = libURL + apiURL + '/' + row.filename.split('T')[0] + '/' + row.filename
|
|
})
|
|
})
|
|
return newVideos
|
|
}
|
|
function getFrameOnVideoRow(percentageInward,video){
|
|
var startTime = new Date(video.time)
|
|
var endTime = new Date(video.end)
|
|
var timeDifference = endTime - startTime
|
|
var timeInward = timeDifference / (100 / percentageInward)
|
|
var timeAdded = new Date(startTime.getTime() + timeInward) // ms
|
|
var frames = video.timelapseFrames || []
|
|
var foundFrame = frames.length === 1 ? frames[0] : frames.find(function(row){
|
|
return new Date(row.time) >= timeAdded
|
|
});
|
|
return {
|
|
timeInward: timeInward,
|
|
foundFrame: foundFrame,
|
|
timeAdded: timeAdded,
|
|
}
|
|
}
|
|
function getVideoFromDay(percentageInward,videos){
|
|
var startTime = new Date(videos[0].time)
|
|
var endTime = new Date(videos[videos.length - 1].end)
|
|
var timeDifference = endTime - startTime
|
|
var timeInward = timeDifference / (100 / percentageInward)
|
|
var timeAdded = new Date(startTime.getTime() + timeInward) // ms
|
|
var foundVideo = ([]).concat(videos).reverse().find(function(row){
|
|
return new Date(timeAdded - 1000) >= new Date(row.time)
|
|
});
|
|
return foundVideo
|
|
}
|
|
function bindFrameFindingByMouseMove(createdCardCarrier,video){
|
|
var createdCardElement = createdCardCarrier.find('.video-time-card').first()
|
|
var timeImg = createdCardElement.find('.video-time-img')
|
|
var timeStrip = createdCardElement.find('.video-time-strip')
|
|
var timeNeedleSeeker = createdCardElement.find('.video-time-needle-seeker')
|
|
if(video.timelapseFrames.length > 0){
|
|
createdCardElement.on('mousemove',function(evt){
|
|
var offest = createdCardElement.offset()
|
|
var elementWidth = createdCardElement.width() + 2
|
|
var amountMoved = evt.pageX - offest.left
|
|
var percentMoved = amountMoved / elementWidth * 100
|
|
percentMoved = percentMoved > 100 ? 100 : percentMoved < 0 ? 0 : percentMoved
|
|
var frameFound = getFrameOnVideoRow(percentMoved,video).frameFound
|
|
if(frameFound){
|
|
timeImg.css('background-image',`url(${frameFound.href})`)
|
|
}
|
|
timeNeedleSeeker.css('left',`${amountMoved}px`)
|
|
})
|
|
timeImg.css('background-image',`url(${getFrameOnVideoRow(1,video).frameFound.href})`)
|
|
}else{
|
|
if(video.events.length === 0){
|
|
timeStrip.hide()
|
|
}else{
|
|
var eventMatrixHtml = ``
|
|
var objectsFound = {}
|
|
eventMatrixHtml += `
|
|
<table class="table table-striped mb-0">
|
|
<tr>
|
|
<th scope="col" class="${definitions.Theme.isDark ? 'text-white' : ''} text-epic">${lang.Events}</th>
|
|
<th scope="col" class="text-end"><span class="badge bg-light text-dark rounded-pill">${video.events.length}</span></th>
|
|
</tr>`
|
|
$.each(([]).concat(video.events).splice(0,11),function(n,theEvent){
|
|
var imagePath = `${formattedTimeForFilename(theEvent.time,false,'YYYY-MM-DD')}/${formattedTimeForFilename(theEvent.time,false,'YYYY-MM-DDTHH-mm-ss')}.jpg`
|
|
possibleEventFrames += `<div class="col-4 mb-2"><img class="rounded pop-image cursor-pointer" style="max-width:100%;" src="${getApiPrefix('timelapse')}/${theEvent.mid}/${imagePath}" onerror="$(this).parent().remove()"></div>`
|
|
})
|
|
$.each(video.events,function(n,theEvent){
|
|
$.each(theEvent.details.matrices,function(n,matrix){
|
|
if(!objectsFound[matrix.tag])objectsFound[matrix.tag] = 1
|
|
++objectsFound[matrix.tag]
|
|
})
|
|
})
|
|
$.each(objectsFound,function(tag,count){
|
|
eventMatrixHtml += `<tr>
|
|
<td class="${definitions.Theme.isDark ? 'text-white' : ''}" style="text-transform:capitalize">${tag}</td>
|
|
<td class="text-end"><span class="badge badge-dark text-white rounded-pill">${count}</span></td>
|
|
</tr>`
|
|
})
|
|
eventMatrixHtml += `</table>`
|
|
timeStrip.append(eventMatrixHtml)
|
|
}
|
|
timeImg.remove()
|
|
}
|
|
}
|
|
function bindFrameFindingByMouseMoveForDay(createdCardCarrier,dayKey,videos,allFrames){
|
|
var createdCardElement = createdCardCarrier.find('.video-time-card')
|
|
var timeImg = createdCardElement.find('.video-time-img')
|
|
var rowHeader = createdCardElement.find('.video-time-header')
|
|
var timeStrip = createdCardElement.find('.video-time-strip')
|
|
var timeNeedleSeeker = createdCardElement.find('.video-time-needle-seeker')
|
|
var dayStart = videos[0].time
|
|
var dayEnd = videos[videos.length - 1].end
|
|
var firstFrameOfDay = null
|
|
$.each(videos,function(day,video){
|
|
$.each(video.timelapseFrames,function(day,frame){
|
|
if(!firstFrameOfDay)firstFrameOfDay = frame;
|
|
})
|
|
})
|
|
if(!firstFrameOfDay){
|
|
timeImg.remove()
|
|
rowHeader.css('position','initial')
|
|
}else{
|
|
timeImg.attr('src',firstFrameOfDay.href)
|
|
}
|
|
var videoSlices = createdCardElement.find('.video-day-slice')
|
|
var videoTimeLabel = createdCardElement.find('.video-time-label')
|
|
var currentlySelected = null
|
|
var currentlySelectedFrame = null
|
|
createdCardElement.on('mousemove',function(evt){
|
|
var offest = createdCardElement.offset()
|
|
var elementWidth = createdCardElement.width() + 2
|
|
var amountMoved = evt.pageX - offest.left
|
|
var percentMoved = amountMoved / elementWidth * 100
|
|
percentMoved = percentMoved > 100 ? 100 : percentMoved < 0 ? 0 : percentMoved
|
|
var videoFound = getVideoFromDay(percentMoved,videos)
|
|
createdCardElement.find(`[data-time]`).css('background-color','')
|
|
if(videoFound){
|
|
// var videoSlice = createdCardElement.find(`[data-time="${videoFound.time}"]`).css('background-color','rgba(255,255,255,0.3)')
|
|
// var videoSliceOffest = videoSlice.offset()
|
|
// var videoSliceElementWidth = videoSlice.width()
|
|
// var videoSliceAmountMoved = evt.pageX - videoSliceOffest.left
|
|
// var videoSlicePercentMoved = videoSliceAmountMoved / videoSliceElementWidth * 100
|
|
// videoSlicePercentMoved = videoSlicePercentMoved > 100 ? 100 : videoSlicePercentMoved < 0 ? 0 : videoSlicePercentMoved
|
|
|
|
if(currentlySelected && currentlySelected.time !== videoFound.time){
|
|
timeNeedleSeeker.attr('video-time-seeked-video-position',videoFound.time)
|
|
}
|
|
currentlySelected = Object.assign({},videoFound)
|
|
}
|
|
// draw frame
|
|
var result = getFrameOnVideoRow(percentMoved,{
|
|
time: videos[0].time,
|
|
end: videos[videos.length - 1].end,
|
|
timelapseFrames: allFrames,
|
|
})
|
|
var frameFound = result.foundFrame
|
|
videoTimeLabel.text(formattedTime(result.timeAdded,'hh:mm:ss AA, DD-MM-YYYY'))
|
|
if(frameFound){
|
|
currentlySelectedFrame = Object.assign({},frameFound)
|
|
setTimeout(async function(){
|
|
var frameUrl = await getLocalTimelapseImageLink(frameFound.href)
|
|
if(currentlySelectedFrame.time === frameFound.time)timeImg.attr('src',frameUrl);
|
|
},1)
|
|
}
|
|
timeNeedleSeeker.attr('video-slice-seeked',result.timeInward).css('left',`${percentMoved}%`)
|
|
})
|
|
}
|
|
function getPercentOfTimePositionFromVideo(video,theEvent){
|
|
var startTime = new Date(video.time)
|
|
var endTime = new Date(video.end)
|
|
var eventTime = new Date(theEvent.time)
|
|
var rangeMax = endTime - startTime
|
|
var eventMs = eventTime - startTime
|
|
var percentChanged = eventMs / rangeMax * 100
|
|
return percentChanged
|
|
}
|
|
function createVideoRow(row,classOverride){
|
|
var eventMatrixHtml = ``
|
|
if(row.events && row.events.length > 0){
|
|
$.each(row.events,function(n,theEvent){
|
|
var leftPercent = getPercentOfTimePositionFromVideo(row,theEvent)
|
|
eventMatrixHtml += `<div class="video-time-needle video-time-needle-event" style="left:${leftPercent}%"></div>`
|
|
})
|
|
}
|
|
var videoEndpoint = getLocation() + '/' + $user.auth_token + '/videos/' + $user.ke + '/' + row.mid + '/' + row.filename
|
|
return `
|
|
<div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row" data-mid="${row.mid}" data-time="${row.time}" data-time-formed="${new Date(row.time)}">
|
|
<div class="video-time-card shadow-lg px-0 btn-default">
|
|
<div class="card-header d-flex flex-row">
|
|
<div class="flex-grow-1 ${definitions.Theme.isDark ? 'text-white' : ''}">
|
|
${loadedMonitors[row.mid] ? loadedMonitors[row.mid].name : row.mid}
|
|
</div>
|
|
<div>
|
|
<a class="badge btn btn-primary open-video mr-1" title="${lang['Watch']}"><i class="fa fa-play-circle"></i></a>
|
|
<a class="badge btn btn-success" download href="${videoEndpoint}" title="${lang['Download']}"><i class="fa fa-download"></i></a>
|
|
<a class="badge btn btn-danger delete-video" title="${lang['Delete']}"><i class="fa fa-trash-o"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="video-time-img">
|
|
<div class="card-body">
|
|
<div title="${row.time}" class="d-flex flex-row">
|
|
<div class="flex-grow-1">
|
|
${moment(row.time).fromNow()}
|
|
</div>
|
|
<div>
|
|
<small class="text-muted">~${durationBetweenTimes(row.time,row.end)} ${lang.Minutes}</small>
|
|
</div>
|
|
</div>
|
|
<div title="${row.time}" class="d-flex flex-row border-bottom-dotted border-bottom-dark mb-2">
|
|
<div>
|
|
<div title="${row.time}"><small class="text-muted">${lang.Started} : ${formattedTime(row.time,true)}</small></div>
|
|
<div title="${row.end}"><small class="text-muted">${lang.Ended} : ${formattedTime(row.end,true)}</small></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="video-time-strip card-footer p-0">
|
|
${eventMatrixHtml}
|
|
<div class="video-time-needle video-time-needle-seeker" style="z-index: 2"></div>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
}
|
|
function sortVideosByDays(videos){
|
|
var days = {}
|
|
videos.forEach(function(video){
|
|
var videoTime = new Date(video.time)
|
|
var theDayKey = `${videoTime.getDate()}-${videoTime.getMonth()}-${videoTime.getFullYear()}`
|
|
if(!days[video.mid])days[video.mid] = {};
|
|
if(!days[video.mid][theDayKey])days[video.mid][theDayKey] = [];
|
|
days[video.mid][theDayKey].push(video)
|
|
})
|
|
return days
|
|
}
|
|
function sortFramesByDays(frames){
|
|
var days = {}
|
|
var thisApiPrefix = getApiPrefix() + '/timelapse/' + $user.ke + '/'
|
|
frames.forEach(function(frame){
|
|
var frameTime = new Date(frame.time)
|
|
var theDayKey = `${frameTime.getDate()}-${frameTime.getMonth()}-${frameTime.getFullYear()}`
|
|
if(!days[frame.mid])days[frame.mid] = {};
|
|
if(!days[frame.mid][theDayKey])days[frame.mid][theDayKey] = [];
|
|
var apiURL = thisApiPrefix + frame.mid
|
|
frame.href = libURL + apiURL + '/' + frame.filename.split('T')[0] + '/' + frame.filename
|
|
days[frame.mid][theDayKey].push(frame)
|
|
})
|
|
console.log(days)
|
|
return days
|
|
}
|
|
function getVideoPercentWidthForDay(row,videos){
|
|
var startTime = new Date(row.time)
|
|
var endTime = new Date(row.end)
|
|
var timeDifference = endTime - startTime
|
|
var stripStartTime = new Date(videos[0].time)
|
|
var stripEndTime = new Date(videos[videos.length - 1].end)
|
|
var stripTimeDifference = stripEndTime - stripStartTime
|
|
var percent = (timeDifference / stripTimeDifference) * 100
|
|
return percent
|
|
}
|
|
function createDayCard(videos,dayKey,monitorId,classOverride){
|
|
var html = ''
|
|
var eventMatrixHtml = ``
|
|
var dayParts = dayKey.split('-')
|
|
var day = dayParts[0]
|
|
var month = dayParts[1]
|
|
var year = dayParts[2]
|
|
$.each(videos,function(n,row){
|
|
var nextRow = videos[n + 1]
|
|
if(nextRow)console.log({time: row.end, end: nextRow.time},n + 1)
|
|
var marginRight = !!nextRow ? getVideoPercentWidthForDay({time: row.end, end: nextRow.time},videos) : 0;
|
|
eventMatrixHtml += `<div class="video-day-slice" data-mid="${row.mid}" data-time="${row.time}" style="width:${getVideoPercentWidthForDay(row,videos)}%;position:relative">`
|
|
if(row.events && row.events.length > 0){
|
|
$.each(row.events,function(n,theEvent){
|
|
var leftPercent = getPercentOfTimePositionFromVideo(row,theEvent)
|
|
eventMatrixHtml += `<div class="video-time-needle video-time-needle-event" style="margin-right:${leftPercent}%"></div>`
|
|
})
|
|
}
|
|
eventMatrixHtml += `</div>`
|
|
eventMatrixHtml += `<div class="video-day-slice-spacer" style="width: ${marginRight}%"></div>`
|
|
})
|
|
html += `
|
|
<div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row">
|
|
<div class="video-time-card shadow-sm px-0 ${definitions.Theme.isDark ? 'bg-dark' : 'bg-light'}">
|
|
<div class="video-time-header">
|
|
<div class="d-flex flex-row vertical-center ${definitions.Theme.isDark ? 'text-white' : ''}">
|
|
<div class="flex-grow-1 p-3">
|
|
<b>${loadedMonitors[monitorId] ? loadedMonitors[monitorId].name : monitorId}</b>
|
|
<div class="${definitions.Theme.isDark ? 'text-white' : ''}">
|
|
<span class="video-time-label">${formattedTime(videos[0].time)} to ${formattedTime(videos[videos.length - 1].end)}</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right p-3" style="background:rgba(0,0,0,0.5)">
|
|
<div class="text-center" style="font-size:20pt;font-weight:bold">${day}</div>
|
|
<div>${month}, ${year}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<img class="video-time-img">
|
|
</div>
|
|
<div class="video-time-strip card-footer p-0">
|
|
<div class="flex-row d-flex" style="height:30px">${eventMatrixHtml}</div>
|
|
<div class="video-time-needle video-time-needle-seeker" data-mid="${videos[0].mid}" style="z-index: 2"></div>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
return html
|
|
}
|
|
function drawVideoRowsToList(targetElement,rows){
|
|
var theVideoList = $(targetElement)
|
|
theVideoList.empty()
|
|
$.each(rows,function(n,row){
|
|
theVideoList.append(createVideoRow(row))
|
|
})
|
|
liveStamp()
|
|
}
|
|
function loadVideoData(video){
|
|
delete(video.f)
|
|
loadedVideosInMemory[`${video.mid}${video.time}`] = video
|
|
}
|
|
function getVideos(options,callback){
|
|
options = options ? options : {}
|
|
var requestQueries = []
|
|
var monitorId = options.monitorId
|
|
var limit = options.limit || 5000
|
|
var eventStartTime
|
|
var eventEndTime
|
|
// var startDate = options.startDate
|
|
// var endDate = options.endDate
|
|
if(options.startDate){
|
|
eventStartTime = formattedTimeForFilename(options.startDate,false)
|
|
requestQueries.push(`start=${eventStartTime}`)
|
|
}
|
|
if(options.endDate){
|
|
eventEndTime = formattedTimeForFilename(options.endDate,false)
|
|
requestQueries.push(`end=${eventEndTime}`)
|
|
}
|
|
$.getJSON(`${getApiPrefix(`videos`)}${monitorId ? `/${monitorId}` : ''}?${requestQueries.concat([`noLimit=1`]).join('&')}`,function(data){
|
|
var videos = data.videos
|
|
$.getJSON(`${getApiPrefix(`timelapse`)}${monitorId ? `/${monitorId}` : ''}?${requestQueries.concat([`noLimit=1`]).join('&')}`,function(timelapseFrames){
|
|
$.getJSON(`${getApiPrefix(`events`)}${monitorId ? `/${monitorId}` : ''}?${requestQueries.concat([`noLimit=1`]).join('&')}`,function(eventData){
|
|
var newVideos = applyDataListToVideos(videos,eventData)
|
|
newVideos = applyTimelapseFramesListToVideos(newVideos,timelapseFrames,'timelapseFrames',true)
|
|
$.each(newVideos,function(n,video){
|
|
loadVideoData(video)
|
|
})
|
|
callback({videos: newVideos, frames: timelapseFrames})
|
|
})
|
|
})
|
|
})
|
|
}
|
|
function getEvents(options,callback){
|
|
options = options ? options : {}
|
|
var requestQueries = []
|
|
var monitorId = options.monitorId
|
|
var limit = options.limit || 5000
|
|
var eventStartTime
|
|
var eventEndTime
|
|
// var startDate = options.startDate
|
|
// var endDate = options.endDate
|
|
if(options.startDate){
|
|
eventStartTime = formattedTimeForFilename(options.startDate,false)
|
|
requestQueries.push(`start=${eventStartTime}`)
|
|
}
|
|
if(options.endDate){
|
|
eventEndTime = formattedTimeForFilename(options.endDate,false)
|
|
requestQueries.push(`end=${eventEndTime}`)
|
|
}
|
|
if(options.onlyCount){
|
|
requestQueries.push(`onlyCount=1`)
|
|
}
|
|
$.getJSON(`${getApiPrefix(`events`)}${monitorId ? `/${monitorId}` : ''}?${requestQueries.join('&')}`,function(eventData){
|
|
callback(eventData)
|
|
})
|
|
}
|
|
onWebSocketEvent(function(d){
|
|
switch(d.f){
|
|
case'video_delete':
|
|
$('[file="'+d.filename+'"][mid="'+d.mid+'"]:not(.modal)').remove();
|
|
$('[data-file="'+d.filename+'"][data-mid="'+d.mid+'"]:not(.modal)').remove();
|
|
$('[data-time-formed="'+(new Date(d.time))+'"][data-mid="'+d.mid+'"]:not(.modal)').remove();
|
|
var videoPlayerId = getVideoPlayerTabId(d)
|
|
deleteTab(videoPlayerId)
|
|
// if($.powerVideoWindow.currentDataObject&&$.powerVideoWindow.currentDataObject[d.filename]){
|
|
// delete($.timelapse.currentVideos[$.powerVideoWindow.currentDataObject[d.filename].position])
|
|
// $.powerVideoWindow.drawTimeline(false)
|
|
// }
|
|
// if($.timelapse.currentVideos&&$.timelapse.currentVideos[d.filename]){
|
|
// delete($.timelapse.currentVideosArray.videos[$.timelapse.currentVideos[d.filename].position])
|
|
// $.timelapse.drawTimeline(false)
|
|
// }
|
|
// if($.vidview.loadedVideos && $.vidview.loadedVideos[d.filename])delete($.vidview.loadedVideos[d.filename])
|
|
break;
|
|
}
|
|
})
|
|
$(document).ready(function(){
|
|
$('body')
|
|
.on('click','.open-video',function(){
|
|
var el = $(this).parents('[data-mid]')
|
|
var monitorId = el.attr('data-mid')
|
|
var videoTime = el.attr('data-time')
|
|
var video = loadedVideosInMemory[`${monitorId}${videoTime}`]
|
|
createVideoPlayerTab(video)
|
|
})
|
|
.on('click','[video-time-seeked-video-position]',function(){
|
|
var el = $(this)
|
|
var monitorId = el.attr('data-mid')
|
|
var videoTime = el.attr('video-time-seeked-video-position')
|
|
var timeInward = (parseInt(el.attr('video-slice-seeked')) / 1000) - 2
|
|
var video = loadedVideosInMemory[`${monitorId}${videoTime}`]
|
|
timeInward = timeInward < 0 ? 0 : timeInward
|
|
createVideoPlayerTab(video,timeInward)
|
|
})
|
|
.on('click','.delete-video',function(){
|
|
var el = $(this).parents('[data-mid]')
|
|
var monitorId = el.attr('data-mid')
|
|
var videoTime = el.attr('data-time')
|
|
var video = loadedVideosInMemory[`${monitorId}${videoTime}`]
|
|
var ext = video.filename.split('.')
|
|
ext = ext[ext.length - 1]
|
|
var videoEndpoint = getLocation() + '/' + $user.auth_token + '/videos/' + $user.ke + '/' + video.mid + '/' + video.filename
|
|
$.confirm.create({
|
|
title: lang["Delete Video"] + ' : ' + video.filename,
|
|
body: `${lang.DeleteVideoMsg}<br><br><div class="row"><video class="video_video" autoplay loop controls><source src="${videoEndpoint}" type="video/${ext}"></video></div>`,
|
|
clickOptions: {
|
|
title: '<i class="fa fa-trash-o"></i> ' + lang.Delete,
|
|
class: 'btn-danger btn-sm'
|
|
},
|
|
clickCallback: function(){
|
|
$.getJSON(videoEndpoint + '/delete',function(data){
|
|
if(data.ok){
|
|
console.log('Video Deleted')
|
|
}else{
|
|
console.log('Video Not Deleted',data,deleteEndpoint)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
})
|