make "Zip and Download" a client side interaction

languages/en_CA.json

@@ -739,6 +739,8 @@
    "Monitor mode is already": "Monitor mode is already",
    "Monitor or Key does not exist.": "Monitor or Key does not exist.",
    "No Group with this key exists": "No Group with this key exists",
+   "Downloading Videos": "Downloading Videos",
+   "Zipping Videos": "Zipping Videos",
    "Success": "Success",
    "Trigger Successful": "Trigger Successful",
    "Trigger Blocked": "Trigger Blocked",
@@ -870,7 +872,7 @@
    "Main": "Main",
    "Storage Location": "Storage Location",
    "Recommended": "Recommended",
-   "Please Wait for Completion": "Please Wait for Completion, Depending on the number of files selected this may take some time. Refresh to check again.",
+   "Please Wait for Completion": "Please Wait for Completion, Depending on the number of files selected this may take some time.",
    "flv": "flv",
    "FLV": "FLV",
    "FLV Stream Type": "FLV Stream Type",

web/libs/js/dash2.downloadAndZip.js

@@ -0,0 +1,117 @@
+$(document).ready(function(){
+    var downloadFile = function(remoteLink,onProgress,onSuccess){
+        if(!onProgress)onProgress = function(){}
+        if(!onSuccess)onSuccess = function(){}
+        return $.ajax({
+            xhr: 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);
+               return xhr;
+            },
+            type: 'GET',
+            url: remoteLink,
+            success: onSuccess
+        });
+    }
+    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])
+    }
+    function saveFile(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
+})

web/libs/js/dash2.vidview.js

@@ -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 = {}

web/pages/home.ejs

@@ -218,6 +218,8 @@
 <script src="<%-window.libURL%>libs/js/libde265.min.js"></script>
 <script src="<%-window.libURL%>libs/js/bootstrap-slider.min.js"></script>
 <script type="text/javascript" src="<%-window.libURL%>libs/js/flv.shinobi.js">;</script>
+<script src="<%-window.libURL%>libs/js/jszip.min.js"></script>
+<script src="<%-window.libURL%>libs/js/dash2.downloadAndZip.js"></script>
 <script src="<%-window.libURL%>libs/js/menu.js"></script>
 <script src="<%-window.libURL%>libs/js/clock.js"></script>
 <script src="<%-window.libURL%>libs/js/poseidon.js"></script>