update UI extenders

web/assets/js/bs5.extenders.js

@@ -1,3 +1,18 @@
+const on = {};
+const dashboardExtensions = {};
+async function addExtender(extenderContainer){
+    dashboardExtensions[extenderContainer] = [];
+    on[extenderContainer] = function(...extender){
+        dashboardExtensions[extenderContainer].push(...extender)
+    };
+}
+async function executeExtender(extenderContainer, args){
+    console.log('Running', extenderContainer)
+    for(extender of dashboardExtensions[extenderContainer]){
+        await extender(...args)
+    }
+}
+
 var accountSettings = {
     onLoadFieldsExtensions: [],
     onLoadFields: function(...extender){

web/assets/js/bs5.monitorMap.js

@@ -1,7 +1,7 @@
+var loadedMap;
 $(document).ready(function(){
     var theBlock = $('#tab-monitorMap')
     var theMap = $('#monitor-map-canvas')
-    var loadedMap;
     function loadPopupVideoList(monitor){
         var groupKey = monitor.ke
         var monitorId = monitor.mid

web/assets/js/bs5.monitorSettings.monitorMap.js

@@ -5,7 +5,7 @@ $(document).ready(function(e){
     var monitorSettingsMapOptionsEl = $('#monitor-settings-geolocation-options')
     var monitorSettingsMapOptionsElOptions = monitorSettingsMapOptionsEl.find('[map-option]')
     var editorForm = monitorEditorWindow.find('form')
-    var loadedMap;
+    var mapInWindow;
     var monitorMapMarker;
     var monitorMapMarkerFov;
     function setAdditionalControls(options){
@@ -34,14 +34,14 @@ $(document).ready(function(e){
             fov,
             range,
         } = getGeolocationParts(geoString || monitor.details.geolocation);
-        loadedMap = L.map('monitor-settings-monitor-map').setView([lat, lng], zoom);
+        mapInWindow = L.map('monitor-settings-monitor-map').setView([lat, lng], zoom);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
-        }).addTo(loadedMap);
+        }).addTo(mapInWindow);
         monitorMapMarker = L.marker([lat, lng], {
             title: monitor ? `${monitor.name} (${monitor.host})` : null,
             draggable: true,
-        }).addTo(loadedMap);
+        }).addTo(mapInWindow);
         monitorMapMarker.on('dragend', function(){
             setGeolocationFieldValue()
         });
@@ -49,7 +49,7 @@ $(document).ready(function(e){
             var markerDetails = getMapMarkerDetails();
             setMapMarkerFov(monitorMapMarkerFov,markerDetails)
         });
-        loadedMap.on('zoomend', function(){
+        mapInWindow.on('zoomend', function(){
             setGeolocationFieldValue()
         });
         setAdditionalControls({
@@ -57,7 +57,7 @@ $(document).ready(function(e){
             fov,
             range,
         })
-        monitorMapMarkerFov = drawMapMarkerFov(loadedMap,{
+        monitorMapMarkerFov = drawMapMarkerFov(mapInWindow,{
             lat,
             lng,
             direction,
@@ -71,8 +71,8 @@ $(document).ready(function(e){
         })
     }
     function unloadMap(){
-        loadedMap.remove();
-        loadedMap = null;
+        mapInWindow.remove();
+        mapInWindow = null;
     }
     function getMapOptions(){
         var options = {}
@@ -86,7 +86,7 @@ $(document).ready(function(e){
     }
     function getMapMarkerDetails(){
         var pos = monitorMapMarker.getLatLng()
-        var zoom = loadedMap.getZoom();
+        var zoom = mapInWindow.getZoom();
         var {
             direction,
             fov,

web/assets/js/bs5.timeline.js

@@ -110,7 +110,7 @@ $(document).ready(function(){
         async function loopOnGaps(monitorId){
             for (let i = 0; i < gaps.length; i++) {
                 var range = gaps[i]
-                videos.push(...(await getVideos({
+                var videosFound = (await getVideos({
                     monitorId,
                     startDate: range[0],
                     endDate: range[1],
@@ -118,7 +118,9 @@ $(document).ready(function(){
                     searchQuery,
                     // archived: false,
                     // customVideoSet: wantCloudVideo ? 'cloudVideos' : null,
-                },null,dontShowDetectionOnTimeline)).videos);
+                },null,dontShowDetectionOnTimeline)).videos;
+                videos.push(...videosFound);
+                executeExtender('timelineGetVideosByMonitor', [monitorId, videosFound])
             }
         }
         if(monitorIds && monitorIds.length > 0){
@@ -148,6 +150,7 @@ $(document).ready(function(){
                 setLoadingMask(true)
                 timeStripListOfQueries.push(...gaps)
                 var videos = await getVideosInGaps(gaps,timeStripSelectedMonitors)
+                executeExtender('timelineGetVideos', [videos])
                 videos = addVideoBeforeAndAfter(videos)
                 loadedVideosOnTimeStrip.push(...videos)
                 if(currentVideosLength !== loadedVideosOnTimeStrip.length)addTimelineItems(loadedVideosOnTimeStrip);
@@ -293,6 +296,7 @@ $(document).ready(function(){
             timeStripActionWithPausePlay().then((timeChanging) => {
                 if(!timeChanging){
                     resetTimeline(clickTime)
+                    executeExtender('timelineTimeChange', [clickTime])
                 }
             })
         });
@@ -313,6 +317,7 @@ $(document).ready(function(){
                 setTimeout(() => {
                     timeChanging = false
                     getAndDrawVideosToTimeline(clickTime)
+                    executeExtender('timelineRangeChanged', [properties.start, properties.end, getTimestripDate()])
                 },500)
             },300)
         })
@@ -641,6 +646,7 @@ $(document).ready(function(){
                 addition += (msSpeed * timelineSpeed);
                 newTime = new Date(currentDate + addition)
                 setTickDate(newTime);
+                executeExtender('timelineTimeChange', [newTime])
                 // setTimeOfCanvasVideos(newTime)
             }, msSpeed)
             timeStripVisTickMovementIntervalSecond = setInterval(function() {
@@ -1089,4 +1095,8 @@ $(document).ready(function(){
     if(currentOptions.dontShowDetectionOnTimeline === '1'){
         timeStripDontShowDetectionToggle()
     }
+    addExtender('timelineTimeChange')
+    addExtender('timelineRangeChanged')
+    addExtender('timelineGetVideos')
+    addExtender('timelineGetVideosByMonitor')
 })