use standard videos list for "Videos" tab

definitions/base.js

@@ -7340,7 +7340,7 @@ module.exports = function(s,config,lang){
                        <a title="${lang['Edit']}" class="btn btn-sm badge btn-primary open-monitor-settings"><i class="fa fa-wrench"></i></a>
                        <a title="${lang['Toggle Substream']}" class="btn btn-sm badge btn-secondary toggle-monitor-substream"><i class="fa fa-eye"></i></a>
                        <a title="${lang['Snapshot']}" class="btn btn-sm badge btn-warning snapshot-live-grid-monitor"><i class="fa fa-camera"></i></a>
-                       <a title="${lang['Videos List']}" class="btn btn-sm badge btn-secondary open-videos"><i class="fa fa-film"></i></a>
+                       <a title="${lang['Videos List']}" class="btn btn-sm badge btn-secondary open-videosTable"><i class="fa fa-film"></i></a>
                        <a title="${lang['Show Logs']}" class="btn btn-sm badge btn-warning toggle-live-grid-monitor-logs"><i class="fa fa-exclamation-triangle"></i></a>
                        <a title="${lang['Close']}" class="btn btn-sm badge btn-danger close-live-grid-monitor"><i class="fa fa-times"></i></a>
                   </div>
@@ -7422,7 +7422,7 @@ module.exports = function(s,config,lang){
               // },
               "Videos List": {
                  "label": lang['Videos List'],
-                 "class": "default open-videos",
+                 "class": "default open-videosTable",
                  "icon": "film"
               },
               "Monitor Settings": {

web/assets/js/bs5.dashboard-base.js

@@ -267,7 +267,7 @@ function blipTo(xPageValue,yPageValue){
     setTimeout(() => document.documentElement.style.scrollBehavior = 'smooth', 5);
 }
 
-function openTab(theTab,loadData,backAction,haltTrigger,type){
+function openTab(theTab,loadData,backAction,haltTrigger,type,overrideOnTabOpen){
     loadData = loadData ? loadData : {}
     if(tabTree && tabTree.back && tabTree.back.name === theTab){
         goBackOneTab()
@@ -309,9 +309,9 @@ function openTab(theTab,loadData,backAction,haltTrigger,type){
             loadData: loadData,
             type: type || 'other'
         }
-        onTabOpen(activeTabName)
+        overrideOnTabOpen ? overrideOnTabOpen(activeTabName) : onTabOpen(activeTabName)
     }else{
-        onTabReopen(activeTabName)
+        overrideOnTabOpen ? overrideOnTabOpen(activeTabName) : onTabReopen(activeTabName)
     }
     // mobile-only, close menu on page change
     $('#sidebarMenu').removeClass('show');
@@ -390,7 +390,11 @@ function onTabAway(tabId){
     }
     if(addedOnTabAway[tabId]){
         addedOnTabAway[tabId].forEach(function(theAction){
-            theAction(loadedTab)
+            try{
+                theAction(loadedTab)
+            }catch(err){
+                console.log(err)
+            }
         })
     }
 }
@@ -416,7 +420,11 @@ function onTabReopen(tabId){
     }
     if(addedOnTabReopen[tabId]){
         addedOnTabReopen[tabId].forEach(function(theAction){
-            theAction(loadedTab)
+            try{
+                theAction(loadedTab)
+            }catch(err){
+                console.log(err)
+            }
         })
     }
 }

web/assets/js/bs5.monitorsList.js

@@ -4,11 +4,6 @@ $(document).ready(function(){
     var theList = $('#monitorsListRows')
     var apiKeySelector = $('#multi_mon_api_key_selector')
     var multiMonitorSelect = $('#multimon_select_all')
-    function getRowsMonitorId(rowEl){
-        var el = $(rowEl).parents('[data-mid]')
-        var monitorId = el.attr('data-mid')
-        return monitorId
-    }
     function drawRowToList(row){
         var streamUrl = libURL + buildStreamUrl(row.mid).replace($user.auth_token,selectedApiKey)
         theList.append(`

web/assets/js/bs5.monitorsUtils.js

@@ -578,7 +578,7 @@ function buildDefaultMonitorMenuItems(){
     <li><a class="dropdown-item run-live-grid-monitor-pop cursor-pointer">${lang['Pop']}</a></li>
     <li><a class="dropdown-item toggle-substream cursor-pointer">${lang['Toggle Substream']}</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item open-videos cursor-pointer">${lang['Videos List']}</a></li>
+    <li><a class="dropdown-item open-videosTable cursor-pointer">${lang['Videos List']}</a></li>
     <!-- <li><a class="dropdown-item cursor-pointer" monitor-action="pvv">${lang['Power Viewer']}</a></li> -->
     <li><a class="dropdown-item open-timelapse-viewer cursor-pointer">${lang['Time-lapse']}</a></li>
     <li><hr class="dropdown-divider"></li>
@@ -854,7 +854,7 @@ function buildMiniMonitorCardBody(monitorAlreadyAdded,monitorConfigPartial,addit
                 <div>${infoHtml}</div>
             </div>
             <div class="card-footer text-center">
-                <a class="btn btn-sm btn-block btn-${monitorAlreadyAdded ? doOpenVideosInsteadOfDelete ? 'primary open-videos' : 'danger delete-monitor' : 'success add-monitor'}">${monitorAlreadyAdded ? doOpenVideosInsteadOfDelete ? lang['Videos'] : lang['Delete Camera'] : lang['Add Camera']}</a>
+                <a class="btn btn-sm btn-block btn-${monitorAlreadyAdded ? doOpenVideosInsteadOfDelete ? 'primary open-videosTable' : 'danger delete-monitor' : 'success add-monitor'}">${monitorAlreadyAdded ? doOpenVideosInsteadOfDelete ? lang['Videos'] : lang['Delete Camera'] : lang['Add Camera']}</a>
             </div>
         </div>
         ${monitorSettingsHtml}
@@ -872,6 +872,11 @@ function buildMonitorsListSelectFieldHtml(arrayOfSelected){
     });
     return createOptionListHtml(monitorList)
 }
+function getRowsMonitorId(rowEl){
+    var el = $(rowEl).parents('[data-mid]')
+    var monitorId = el.attr('data-mid')
+    return monitorId
+}
 $(document).ready(function(){
     $('body')
     .on('click','[system]',function(){

web/assets/js/bs5.videosTable.js

@@ -91,11 +91,15 @@ $(document).ready(function(e){
         videosTablePreviewArea.html(`<video class="video_video" style="width:100%" autoplay controls preload loop src="${href}"></video>`)
     }
     $('body')
-    .on('click','.open-videosTable-video',function(e){
+    .on('click','.open-videosTable',function(e){
         e.preventDefault()
-        var href = $(this).attr('href')
-        openTab(`videosTableView`,{},null)
-        drawPreviewVideo(href)
+        var monitorId = getRowsMonitorId(this)
+        openTab(`videosTableView`,{},null,null,null,() => {
+            console.log(monitorId)
+            drawMonitorListToSelector(monitorsList)
+            monitorsList.val(monitorId)
+            drawVideosTableViewElements()
+        })
         return false;
     });
     theEnclosure