add calendar selector and refresh buttons

definitions/base.js

@@ -9166,7 +9166,13 @@ module.exports = function(s,config,lang){
                               </div>
                               <div class="btn-group">
                                   <a class="btn btn-sm btn-success" timeline-action="downloadAll" title="${lang.Download}"><i class="fa fa-download"></i></a>
+                              </div>
+                              <div class="btn-group">
                                   <a class="btn btn-sm btn-default" class_toggle="show-only-playing" data-target="#timeline-video-canvas" icon-toggle="fa-eye fa-eye-slash" icon-child="i" title="${lang['Show Only Playing']}"><i class="fa fa-eye"></i></a>
+                                  <a class="btn btn-sm btn-default" timeline-action="refresh" title="${lang.Refresh}"><i class="fa fa-refresh"></i></a>
+                              </div>
+                              <div class="btn-group">
+                                  <a class="btn btn-sm btn-primary" id="timeline-date-selector" title="${lang.Date}"><i class="fa fa-calendar"></i></a>
                               </div>
                           </div>
                           `,

web/assets/js/bs5.timeline.js

@@ -6,6 +6,7 @@ $(document).ready(function(){
     var timeStripInfo = $('#timeline-info');
     var timeStripPreBuffers = $('#timeline-pre-buffers');
     var timeStripObjectSearchInput = $('#timeline-video-object-search');
+    var dateSelector = $('#timeline-date-selector');
     var playToggles = timeStripControls.find('[timeline-action="playpause"]')
     var speedButtons = timeStripControls.find('[timeline-action="speed"]')
     var gridSizeButtons = timeStripControls.find('[timeline-action="gridSize"]')
@@ -33,6 +34,7 @@ $(document).ready(function(){
     var isPlaying = false
     var earliestStart = null
     var latestEnd = null
+    var timeChanging = false
     function setLoadingMask(turnOn){
         if(turnOn){
             var html = `<div class="loading-mask"><i class="fa fa-spinner fa-pulse fa-5x"></i></div>`
@@ -185,7 +187,6 @@ $(document).ready(function(){
         setHollowClickQueue()
     }
     function createTimeline(videos){
-        var timeChanging = false
         var timeChangingTimeout = null
         var timeChangingTimeoutSecond = null
         var dateNow = new Date()
@@ -225,12 +226,12 @@ $(document).ready(function(){
             clearTimeout(timeChangingTimeoutSecond)
             timeChangingTimeout = setTimeout(function(){
                 var clickTime = properties.time;
+                resetDateRangePicker()
                 timeChanging = false
                 getAndDrawVideosToTimeline(clickTime)
             },300)
             timeChangingTimeoutSecond = setTimeout(function(){
                 var clickTime = properties.time;
-                timeChanging = false
                 getAndDrawVideosToTimeline(clickTime)
             },1500)
         })
@@ -256,6 +257,9 @@ $(document).ready(function(){
             end
         };
     }
+    function setTimestripDate(newStart, newEnd) {
+        return timeStripVis.setWindow(newStart, newEnd);
+    }
     function reloadTimeline(){
         var theTime = new Date()
         getAndDrawVideosToTimeline(theTime,true)
@@ -518,6 +522,14 @@ $(document).ready(function(){
             adjustTimelineGridSize(`md-4`)
         }
     }
+    function resetDateRangePicker(){
+        var stripDate = getTimestripDate()
+        var startDate = stripDate.start
+        var endDate = stripDate.end
+        var picker = dateSelector.data('daterangepicker')
+        picker.setStartDate(startDate);
+        picker.setEndDate(endDate);
+    }
     timelineActionButtons.click(function(){
         var el = $(this)
         var type = el.attr('timeline-action')
@@ -571,6 +583,20 @@ $(document).ready(function(){
         // destroyTimeline()
         timeStripPlay(true)
     })
+    loadDateRangePicker(dateSelector,{
+        timePicker: true,
+        timePicker24Hour: true,
+        timePickerSeconds: true,
+        timePickerIncrement: 30,
+        autoApply: true,
+        buttonClasses: 'hidden',
+        drops: 'up',
+        onChange: function(start, end, label) {
+            if(!timeChanging){
+                setTimestripDate(start, end)
+            }
+        }
+    })
     var currentOptions = dashboardOptions()
     if(isChromiumBased){
         [ 7, 10 ].forEach((speed) => {