diff --git a/languages/en_CA.json b/languages/en_CA.json
index 2687c8fc..36698da5 100644
--- a/languages/en_CA.json
+++ b/languages/en_CA.json
@@ -254,6 +254,9 @@
"Can Edit Monitor": "Can Edit Monitor",
"Can Delete Videos": "Can Delete Videos",
"Delete Video": "Delete Video",
+ "Delete Videos": "Delete Videos",
+ "Batch Download": "Batch Download",
+ "batchDownloadText": "Do you want to download the selected files?",
"Delete Timelapse Frame": "Delete Timelapse Frame",
"Can View Videos and Events": "Can View Videos and Events",
"Can Delete Videos and Events": "Can Delete Videos and Events",
@@ -483,6 +486,7 @@
"FixVideoMsg": "Do you want to fix this video? You cannot undo this action.",
"DeleteVideoMsg": "Do you want to delete this video? You cannot recover it.",
"DeleteThisMsg": "Do you want to delete this? You cannot recover it.",
+ "DeleteTheseMsg": "Do you want to delete these? You cannot recover them.",
"dropBoxSuccess": "Success! Files saved to your Dropbox.",
"API Key Deleted": "API Key Deleted",
"APIKeyDeletedText": "Key has been deleted. It will no longer work.",
diff --git a/web/assets/js/bs5.dashboard-base.js b/web/assets/js/bs5.dashboard-base.js
index f3860b06..f6c0aa9b 100644
--- a/web/assets/js/bs5.dashboard-base.js
+++ b/web/assets/js/bs5.dashboard-base.js
@@ -812,6 +812,12 @@ function downloadJSON(jsonData,filename){
.attr('download',filename)
[0].click()
}
+function downloadFile(downloadUrl,fileName){
+ var a = document.createElement('a')
+ a.href = downloadUrl
+ a.download = fileName
+ a.click()
+}
function convertKbToHumanSize(theNumber){
var amount = theNumber / 1048576
var unit = amount / 1000 >= 1000 ? 'TB' : amount >= 1000 ? 'GB' : 'MB'
diff --git a/web/assets/js/bs5.timelapseViewer.js b/web/assets/js/bs5.timelapseViewer.js
index 94d92074..25e652ea 100644
--- a/web/assets/js/bs5.timelapseViewer.js
+++ b/web/assets/js/bs5.timelapseViewer.js
@@ -254,10 +254,7 @@ $(document).ready(function(e){
}
function downloadTimelapseVideo(data){
var downloadUrl = buildFileBinUrl(data)
- var a = document.createElement('a')
- a.href = downloadUrl
- a.download = data.name
- a.click()
+ downloadFile(downloadUrl,data.name)
}
function onTimelapseVideoBuildComplete(data){
var saveBuiltVideo = dashboardOptions().switches.timelapseSaveBuiltVideo
diff --git a/web/assets/js/bs5.videos.js b/web/assets/js/bs5.videos.js
index 0dfd5ebf..97cec906 100644
--- a/web/assets/js/bs5.videos.js
+++ b/web/assets/js/bs5.videos.js
@@ -398,32 +398,35 @@ function loadVideoData(video){
loadedVideosInMemory[`${video.mid}${video.time}`] = video
}
function getVideos(options,callback){
- options = options ? options : {}
- var requestQueries = []
- var monitorId = options.monitorId
- var limit = options.limit || 300
- 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([`limit=${limit}`]).join('&')}`,function(eventData){
- var newVideos = applyDataListToVideos(videos,eventData)
- newVideos = applyTimelapseFramesListToVideos(newVideos,timelapseFrames,'timelapseFrames',true)
- $.each(newVideos,function(n,video){
- loadVideoData(video)
+ return new Promise((resolve,reject) => {
+ options = options ? options : {}
+ var requestQueries = []
+ var monitorId = options.monitorId
+ var limit = options.limit || 300
+ 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([`limit=${limit}`]).join('&')}`,function(eventData){
+ var newVideos = applyDataListToVideos(videos,eventData)
+ newVideos = applyTimelapseFramesListToVideos(newVideos,timelapseFrames,'timelapseFrames',true)
+ $.each(newVideos,function(n,video){
+ loadVideoData(video)
+ })
+ if(callback)callback({videos: newVideos, frames: timelapseFrames});
+ resolve({videos: newVideos, frames: timelapseFrames})
})
- callback({videos: newVideos, frames: timelapseFrames})
})
})
})
@@ -452,6 +455,32 @@ function getEvents(options,callback){
callback(eventData)
})
}
+function deleteVideo(video,callback){
+ return new Promise((resolve,reject) => {
+ var videoEndpoint = getApiPrefix(`videos`) + '/' + video.mid + '/' + video.filename
+ console.log(videoEndpoint)
+ $.getJSON(videoEndpoint + '/delete',function(data){
+ if(callback)callback(data)
+ resolve(data)
+ })
+ })
+}
+async function deleteVideos(videos){
+ for (let i = 0; i < videos.length; i++) {
+ var video = videos[i];
+ await deleteVideo(video)
+ }
+}
+function downloadVideo(video){
+ var videoEndpoint = getApiPrefix(`videos`) + '/' + video.mid + '/' + video.filename
+ downloadFile(videoEndpoint,video.filename)
+}
+async function downloadVideos(videos){
+ for (let i = 0; i < videos.length; i++) {
+ var video = videos[i];
+ await downloadVideo(video)
+ }
+}
onWebSocketEvent(function(d){
switch(d.f){
case'video_delete':
@@ -490,14 +519,14 @@ $(document).ready(function(){
timeInward = timeInward < 0 ? 0 : timeInward
createVideoPlayerTab(video,timeInward)
})
- .on('click','.delete-video',function(){
+ .on('click','.delete-video',function(e){
+ e.preventDefault()
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 = getApiPrefix(`videos`) + '/' + video.mid + '/' + video.filename
$.confirm.create({
title: lang["Delete Video"] + ' : ' + video.filename,
body: `${lang.DeleteVideoMsg}
`,
@@ -506,6 +535,7 @@ $(document).ready(function(){
class: 'btn-danger btn-sm'
},
clickCallback: function(){
+ var videoEndpoint = getApiPrefix(`videos`) + '/' + video.mid + '/' + video.filename
$.getJSON(videoEndpoint + '/delete',function(data){
if(data.ok){
console.log('Video Deleted')
@@ -514,6 +544,7 @@ $(document).ready(function(){
}
})
}
- })
+ });
+ return false;
})
})
diff --git a/web/assets/js/bs5.videosTable.js b/web/assets/js/bs5.videosTable.js
index 4db680c4..27d43717 100644
--- a/web/assets/js/bs5.videosTable.js
+++ b/web/assets/js/bs5.videosTable.js
@@ -4,7 +4,8 @@ $(document).ready(function(e){
var dateSelector = theEnclosure.find('.date_selector')
var videosTableDrawArea = $('#videosTable_draw_area')
var videosTablePreviewArea = $('#videosTable_preview_area')
- var loadedVideosInMemory = {};
+ var loadedVideosTable = [];
+ var redrawTimeout;
function openVideosTableView(monitorId,startDate,endDate){
drawVideosTableViewElements(monitorId,startDate,endDate)
}
@@ -37,59 +38,91 @@ $(document).ready(function(e){
monitorsList.change(function(){
drawVideosTableViewElements()
})
- function drawVideosTableViewElements(selectedMonitor,startDate,endDate){
+ async function drawVideosTableViewElements(usePreloadedData){
var dateRange = getSelectedTime(false)
- if(!startDate)startDate = dateRange.startDate
- if(!endDate)endDate = dateRange.endDate
- if(!selectedMonitor)selectedMonitor = monitorsList.val()
+ var startDate = dateRange.startDate
+ var endDate = dateRange.endDate
+ var monitorId = monitorsList.val()
var queryString = ['start=' + startDate,'end=' + endDate,'limit=0']
var frameIconsHtml = ''
- var apiURL = getApiPrefix('videos') + '/' + selectedMonitor;
- var videosTableData = []
- loadedVideosInMemory = {}
- $.getJSON(apiURL + '?' + queryString.join('&'),function(data){
- videosTableDrawArea.bootstrapTable('destroy')
- videosTableDrawArea.bootstrapTable({
- pagination: true,
- search: true,
- columns: [
- {
- field: 'monitorName',
- title: lang['Monitor']
- },
- {
- field: 'time',
- title: lang['Time Created']
- },
- {
- field: 'size',
- title: ''
- },
- {
- field: 'buttons',
- title: ''
- }
- ],
- data: data.videos.map((file) => {
- return {
- monitorName: `${loadedMonitors[file.mid]?.name || file.mid}`,
- time: `
- ${lang.Started} ${formattedTime(file.start, 'DD-MM-YYYY hh:mm:ss AA')}
- ${lang.Ended} ${formattedTime(file.end, 'DD-MM-YYYY hh:mm:ss AA')}
- `,
- size: convertKbToHumanSize(file.size),
- buttons: `
-
-
- `,
- }
- })
+ var apiURL = getApiPrefix('videos') + '/' + monitorId;
+ if(!usePreloadedData){
+ loadedVideosTable = (await getVideos({
+ monitorId,
+ startDate,
+ endDate,
+ })).videos;
+ $.each(loadedVideosTable,function(n,v){
+ loadedVideosInMemory[`${monitorId}${v.time}`]
+ })
+ }
+ videosTableDrawArea.bootstrapTable('destroy')
+ videosTableDrawArea.bootstrapTable({
+ pagination: true,
+ search: true,
+ columns: [
+ {
+ field: 'mid',
+ title: '',
+ checkbox: true,
+ formatter: () => {
+ return {
+ checked: false
+ }
+ },
+ },
+ {
+ field: 'time',
+ title: lang['Time Created'],
+ },
+ {
+ field: 'end',
+ title: lang['Ended']
+ },
+ {
+ field: 'size',
+ title: ''
+ },
+ {
+ field: 'buttons',
+ title: ''
+ }
+ ],
+ data: loadedVideosTable.map((file) => {
+ return {
+ mid: file.mid,
+ time: formattedTime(file.time, 'DD-MM-YYYY hh:mm:ss AA'),
+ end: formattedTime(file.end, 'DD-MM-YYYY hh:mm:ss AA'),
+ size: convertKbToHumanSize(file.size),
+ buttons: `
+
+ `,
+ }
})
})
}
function drawPreviewVideo(href){
videosTablePreviewArea.html(``)
}
+ function getSelectedRows(){
+ var rowsSelected = []
+ videosTableDrawArea.find('[name="btSelectItem"]:checked').each(function(n,checkbox){
+ var rowInfo = $(checkbox).parents('tr').find('.row-info')
+ var monitorId = rowInfo.attr('data-mid')
+ var groupKey = rowInfo.attr('data-ke')
+ var filename = rowInfo.attr('data-filename')
+ rowsSelected.push({
+ mid: monitorId,
+ ke: groupKey,
+ filename: filename,
+ })
+ })
+ return rowsSelected
+ }
$('body')
.on('click','.open-videosTable',function(e){
e.preventDefault()
@@ -108,6 +141,58 @@ $(document).ready(function(e){
drawPreviewVideo(href)
return false;
})
+ .on('click','.delete-selected-videos',function(e){
+ e.preventDefault()
+ var videos = getSelectedRows()
+ $.confirm.create({
+ title: lang["Delete Videos"],
+ body: `${lang.DeleteTheseMsg}`,
+ clickOptions: {
+ title: ' ' + lang.Delete,
+ class: 'btn-danger btn-sm'
+ },
+ clickCallback: function(){
+ deleteVideos(videos).then(() => {
+ console.log(`Done Deleting Rows!`)
+ })
+ }
+ });
+ return false;
+ })
+ .on('click','.download-selected-videos',function(e){
+ e.preventDefault()
+ var videos = getSelectedRows()
+ console.log(videos)
+ $.confirm.create({
+ title: lang["Batch Download"],
+ body: `${lang.batchDownloadText}`,
+ clickOptions: {
+ title: ' ' + lang.Yes,
+ class: 'btn-success btn-sm'
+ },
+ clickCallback: function(){
+ downloadVideos(videos)
+ }
+ });
+ return false;
+ })
+ onWebSocketEvent((data) => {
+ switch(data.f){
+ case'video_delete':
+ if(tabTree.name === 'videosTableView' && monitorsList.val() === data.mid){
+ var videoIndexToRemove = loadedVideosTable.findIndex(row => new Date(row.time).getTime() === new Date(data.time).getTime())
+ if(videoIndexToRemove !== -1){
+ loadedVideosTable.splice(videoIndexToRemove, 1);
+ delete(loadedVideosInMemory[`${data.mid}${data.time}`])
+ clearTimeout(redrawTimeout)
+ redrawTimeout = setTimeout(function(){
+ drawVideosTableViewElements(true)
+ },2000)
+ }
+ }
+ break;
+ }
+ })
addOnTabOpen('videosTableView', function () {
drawMonitorListToSelector(monitorsList)
drawVideosTableViewElements()
diff --git a/web/pages/blocks/home/videosTable.ejs b/web/pages/blocks/home/videosTable.ejs
index 2e8eb446..4a6b3513 100644
--- a/web/pages/blocks/home/videosTable.ejs
+++ b/web/pages/blocks/home/videosTable.ejs
@@ -12,5 +12,21 @@
drawBlock(theBlock)
}) %>
+
+