Add Preview to FileBin viewer

definitions/base.js

@@ -6211,7 +6211,7 @@ module.exports = function(s,config,lang){
                ]
            },
            "Watch": {
-              "name": lang['Watch'],
+               noHeader: true,
               "color": "blue",
               "section-pre-class": "col-md-8",
               "info": [
@@ -7990,6 +7990,11 @@ module.exports = function(s,config,lang){
                      {
                          "class": "date_selector",
                          "field": lang.Date,
+                     },
+                     {
+                         "fieldType": "div",
+                         "id": "fileBin_preview_area",
+                         "divContent": ""
                      }
                 ]
             },
@@ -7999,6 +8004,7 @@ module.exports = function(s,config,lang){
                "info": [
                    {
                        "fieldType": "table",
+                       "attribute": `data-classes="table table-striped"`,
                        "id": "fileBin_draw_area",
                        "divContent": ""
                    }

languages/en_CA.json

@@ -377,6 +377,9 @@
    "Max Storage Amount": "Max Storage Amount",
    "Video Share": "Video Share",
    "FileBin": "FileBin",
+   "File Download Ready": "File Download Ready",
+   "Timelapse Video Build Complete": "Timelapse Video Build Complete",
+   "yourFileDownloadedShortly": "Please wait. Your file will be downloaded shortly.",
    "Save Built Video on Completion": "Save Built Video on Completion",
    "FileBin Share": "FileBin Share",
    "Timelapse Frames Share": "Timelapse Frames Share",

web/assets/js/bs5.fileBin.js

@@ -4,6 +4,7 @@ $(document).ready(function(e){
     var monitorsList = theEnclosure.find('.monitors_list')
     var dateSelector = theEnclosure.find('.date_selector')
     var fileBinDrawArea = $('#fileBin_draw_area')
+    var fileBinPreviewArea = $('#fileBin_preview_area')
     var loadedVideosInMemory = {};
     function openFileBinView(monitorId,startDate,endDate){
         drawFileBinViewElements(monitorId,startDate,endDate)
@@ -48,6 +49,7 @@ $(document).ready(function(e){
         var fileBinData = []
         loadedVideosInMemory = {}
         $.getJSON(apiURL + '?' + queryString.join('&'),function(data){
+            fileBinDrawArea.bootstrapTable('destroy')
             fileBinDrawArea.bootstrapTable({
                 pagination: true,
                 search: true,
@@ -61,7 +63,7 @@ $(document).ready(function(e){
                         title: lang['Time Created']
                       },
                       {
-                        field: 'href',
+                        field: 'buttons',
                         title: 'Download'
                       }
                 ],
@@ -69,18 +71,29 @@ $(document).ready(function(e){
                     return {
                         name: file.name,
                         time: file.time,
-                        href: `<a class="btn btn-sm btn-primary" href="${file.href}" download title="${lang.Download}"><i class="fa fa-download"></i></a>`,
+                        buttons: `
+                            <a class="btn btn-sm btn-primary" href="${file.href}" download title="${lang.Download}"><i class="fa fa-download"></i></a>
+                            ${file.details.video ? `<a class="btn btn-sm btn-primary preview-video" href="${file.href}" title="${lang.Play}"><i class="fa fa-play"></i></a>` : ``}
+                        `,
                     }
                 })
             })
         })
     }
 
-    $('body').on('click','.open-fileBin-viewer',function(){
+    $('body')
+    .on('click','.open-fileBin-viewer',function(){
         var el = $(this).parents('[data-mid]')
         var monitorId = el.attr('data-mid')
         openTab(`fileBinView`,{},null)
         monitorsList.val(monitorId).change()
+    });
+    theEnclosure
+    .on('click','.preview-video',function(e){
+        e.preventDefault()
+        var href = $(this).attr('href')
+        fileBinPreviewArea.html(`<video class="video_video" style="width:100%" autoplay controls preload loop src="${href}"></video>`)
+        return false;
     })
     addOnTabOpen('fileBinView', function () {
         drawMonitorListToSelector(monitorsList)
@@ -91,4 +104,7 @@ $(document).ready(function(e){
         drawMonitorListToSelector(monitorsList)
         monitorsList.val(theSelected)
     })
+    addOnTabAway('fileBinView', function () {
+        fileBinPreviewArea.find('video')[0].pause()
+    })
 })