Merge pull request #21117 from Chocobo1/webui_interval

WebUI: timer related clean ups

src/webui/www/private/scripts/client.js

@@ -705,7 +705,7 @@ window.addEventListener("DOMContentLoaded", () => {
         };
     })();
 
-    let syncMainDataTimeoutID;
+    let syncMainDataTimeoutID = -1;
     let syncRequestInProgress = false;
     const syncMainData = function() {
         const url = new URI("api/v2/sync/maindata");
@@ -889,6 +889,7 @@ window.addEventListener("DOMContentLoaded", () => {
             return;
 
         clearTimeout(syncMainDataTimeoutID);
+        syncMainDataTimeoutID = -1;
 
         if (window.qBittorrent.Client.isStopped())
             return;

src/webui/www/private/scripts/dynamicTable.js

@@ -91,54 +91,43 @@ window.qBittorrent.DynamicTable ??= (() => {
         },
 
         setupCommonEvents: function() {
-            const scrollFn = function() {
+            const tableDiv = $(this.dynamicTableDivId);
-                $(this.dynamicTableFixedHeaderDivId).getElements("table")[0].style.left = -$(this.dynamicTableDivId).scrollLeft + "px";
+            const tableFixedHeaderDiv = $(this.dynamicTableFixedHeaderDivId);
-            }.bind(this);
 
-            $(this.dynamicTableDivId).addEvent("scroll", scrollFn);
+            tableDiv.addEventListener("scroll", () => {
+                tableFixedHeaderDiv.getElements("table")[0].style.left = `${-tableDiv.scrollLeft}px`;
+            });
 
             // if the table exists within a panel
-            if ($(this.dynamicTableDivId).getParent(".panel")) {
+            const parentPanel = tableDiv.getParent(".panel");
-                const resizeFn = function() {
+            if (parentPanel) {
-                    const panel = $(this.dynamicTableDivId).getParent(".panel");
+                const resizeFn = (entries) => {
-                    let h = panel.getBoundingClientRect().height - $(this.dynamicTableFixedHeaderDivId).getBoundingClientRect().height;
+                    const panel = entries[0].target;
-                    $(this.dynamicTableDivId).style.height = h + "px";
+                    let h = panel.getBoundingClientRect().height - tableFixedHeaderDiv.getBoundingClientRect().height;
+                    tableDiv.style.height = `${h}px`;
 
                     // Workaround due to inaccurate calculation of elements heights by browser
-
                     let n = 2;
 
                     // is panel vertical scrollbar visible or does panel content not fit?
                     while (((panel.clientWidth !== panel.offsetWidth) || (panel.clientHeight !== panel.scrollHeight)) && (n > 0)) {
                         --n;
                         h -= 0.5;
-                        $(this.dynamicTableDivId).style.height = h + "px";
+                        tableDiv.style.height = `${h}px`;
                     }
+                };
 
-                    this.lastPanelHeight = panel.getBoundingClientRect().height;
+                this.resizeDebounceTimer = -1;
-                }.bind(this);
+                const resizeDebouncer = (entries) => {
+                    clearTimeout(this.resizeDebounceTimer);
+                    this.resizeDebounceTimer = setTimeout(() => {
+                        resizeFn(entries);
+                        resizeDebounceTimer = -1;
+                    }, 100);
+                };
 
-                $(this.dynamicTableDivId).getParent(".panel").addEvent("resize", resizeFn);
+                const resizeObserver = new ResizeObserver(resizeDebouncer);
-
+                resizeObserver.observe(parentPanel, { box: "border-box" });
-                this.lastPanelHeight = 0;
-
-                // Workaround. Resize event is called not always (for example it isn't called when browser window changes it's size)
-
-                const checkResizeFn = function() {
-                    const tableDiv = $(this.dynamicTableDivId);
-
-                    // dynamicTableDivId is not visible on the UI
-                    if (!tableDiv)
-                        return;
-
-                    const panel = tableDiv.getParent(".panel");
-                    if (this.lastPanelHeight !== panel.getBoundingClientRect().height) {
-                        this.lastPanelHeight = panel.getBoundingClientRect().height;
-                        panel.fireEvent("resize");
-                    }
-                }.bind(this);
-
-                setInterval(checkResizeFn, 500);
             }
         },
 

src/webui/www/private/scripts/piecesbar.js

@@ -88,7 +88,7 @@ window.qBittorrent.PiecesBar ??= (() => {
             if (vals.width > 0)
                 obj.setPieces(vals.pieces);
             else
-                setTimeout(() => { checkForParent(obj.id); }, 1);
+                setTimeout(() => { checkForParent(obj.id); });
 
             return obj;
         }
@@ -258,7 +258,7 @@ window.qBittorrent.PiecesBar ??= (() => {
         if (!obj)
             return;
         if (!obj.parentNode)
-            return setTimeout(() => { checkForParent(id); }, 1);
+            return setTimeout(() => { checkForParent(id); }, 100);
 
         obj.refresh();
     }

src/webui/www/private/scripts/progressbar.js

@@ -104,7 +104,7 @@ window.qBittorrent.ProgressBar ??= (() => {
             if (vals.width)
                 obj.setValue(vals.value);
             else
-                setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1);
+                setTimeout('ProgressBar_checkForParent("' + obj.id + '")');
             return obj;
         }
     });
@@ -144,7 +144,7 @@ window.qBittorrent.ProgressBar ??= (() => {
         if (!obj)
             return;
         if (!obj.parentNode)
-            return setTimeout('ProgressBar_checkForParent("' + id + '")', 1);
+            return setTimeout('ProgressBar_checkForParent("' + id + '")', 100);
         obj.setStyle("width", "100%");
         const w = obj.offsetWidth;
         obj.vals.dark.setStyle("width", w);

src/webui/www/private/scripts/prop-files.js

@@ -306,6 +306,8 @@ window.qBittorrent.PropFiles ??= (() => {
             return;
 
         clearTimeout(loadTorrentFilesDataTimer);
+        loadTorrentFilesDataTimer = -1;
+
         new Request({
             url: "api/v2/torrents/filePrio",
             method: "post",
@@ -331,7 +333,7 @@ window.qBittorrent.PropFiles ??= (() => {
         torrentFilesTable.updateTable(false);
     };
 
-    let loadTorrentFilesDataTimer;
+    let loadTorrentFilesDataTimer = -1;
     const loadTorrentFilesData = function() {
         if ($("prop_files").hasClass("invisible")
             || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) {
@@ -378,6 +380,7 @@ window.qBittorrent.PropFiles ??= (() => {
 
     const updateData = function() {
         clearTimeout(loadTorrentFilesDataTimer);
+        loadTorrentFilesDataTimer = -1;
         loadTorrentFilesData();
     };
 

src/webui/www/private/scripts/prop-general.js

@@ -72,7 +72,7 @@ window.qBittorrent.PropGeneral ??= (() => {
         piecesBar.clear();
     };
 
-    let loadTorrentDataTimer;
+    let loadTorrentDataTimer = -1;
     const loadTorrentData = function() {
         if ($("prop_general").hasClass("invisible")
             || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) {
@@ -250,6 +250,7 @@ window.qBittorrent.PropGeneral ??= (() => {
 
     const updateData = function() {
         clearTimeout(loadTorrentDataTimer);
+        loadTorrentDataTimer = -1;
         loadTorrentData();
     };
 

src/webui/www/private/scripts/prop-peers.js

@@ -37,7 +37,7 @@ window.qBittorrent.PropPeers ??= (() => {
     };
 
     const torrentPeersTable = new window.qBittorrent.DynamicTable.TorrentPeersTable();
-    let loadTorrentPeersTimer;
+    let loadTorrentPeersTimer = -1;
     let syncTorrentPeersLastResponseId = 0;
     let show_flags = true;
 
@@ -109,6 +109,7 @@ window.qBittorrent.PropPeers ??= (() => {
 
     const updateData = function() {
         clearTimeout(loadTorrentPeersTimer);
+        loadTorrentPeersTimer = -1;
         loadTorrentPeersData();
     };
 

src/webui/www/private/scripts/prop-trackers.js

@@ -39,7 +39,7 @@ window.qBittorrent.PropTrackers ??= (() => {
     let current_hash = "";
 
     const torrentTrackersTable = new window.qBittorrent.DynamicTable.TorrentTrackersTable();
-    let loadTrackersDataTimer;
+    let loadTrackersDataTimer = -1;
 
     const loadTrackersData = function() {
         if ($("prop_trackers").hasClass("invisible")
@@ -119,6 +119,7 @@ window.qBittorrent.PropTrackers ??= (() => {
 
     const updateData = function() {
         clearTimeout(loadTrackersDataTimer);
+        loadTrackersDataTimer = -1;
         loadTrackersData();
     };
 

src/webui/www/private/scripts/prop-webseeds.js

@@ -88,7 +88,7 @@ window.qBittorrent.PropWebseeds ??= (() => {
 
     let current_hash = "";
 
-    let loadWebSeedsDataTimer;
+    let loadWebSeedsDataTimer = -1;
     const loadWebSeedsData = function() {
         if ($("prop_webseeds").hasClass("invisible")
             || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) {
@@ -138,6 +138,7 @@ window.qBittorrent.PropWebseeds ??= (() => {
 
     const updateData = function() {
         clearTimeout(loadWebSeedsDataTimer);
+        loadWebSeedsDataTimer = -1;
         loadWebSeedsData();
     };
 

src/webui/www/private/scripts/search.js

@@ -47,7 +47,7 @@ window.qBittorrent.Search ??= (() => {
     };
 
     const searchTabIdPrefix = "Search-";
-    let loadSearchPluginsTimer;
+    let loadSearchPluginsTimer = -1;
     const searchPlugins = [];
     let prevSearchPluginsResponse;
     let selectedCategory = "QBT_TR(All categories)QBT_TR[CONTEXT=SearchEngineWidget]";
@@ -207,7 +207,7 @@ window.qBittorrent.Search ??= (() => {
             rowId: 0,
             selectedRowIds: [],
             running: true,
-            loadResultsTimer: null,
+            loadResultsTimer: -1,
             sort: { column: searchResultsTable.sortedColumn, reverse: searchResultsTable.reverseSort },
         });
         updateSearchResultsData(searchId);
@@ -507,6 +507,7 @@ window.qBittorrent.Search ??= (() => {
                 },
                 onClose: function() {
                     clearTimeout(loadSearchPluginsTimer);
+                    loadSearchPluginsTimer = -1;
                 }
             });
         }
@@ -569,6 +570,7 @@ window.qBittorrent.Search ??= (() => {
         if (state) {
             state.running = false;
             clearTimeout(state.loadResultsTimer);
+            state.loadResultsTimer = -1;
         }
     };
 

src/webui/www/private/views/rss.html

@@ -180,7 +180,7 @@
         const serverSyncRssDataInterval = 1500;
         let feedData = {};
         let pathByFeedId = new Map();
-        let feedRefreshTimer;
+        let feedRefreshTimer = -1;
         const rssFeedTable = new window.qBittorrent.DynamicTable.RssFeedTable();
         const rssArticleTable = new window.qBittorrent.DynamicTable.RssArticleTable();
 
@@ -293,11 +293,15 @@
         };
 
         const unload = () => {
-            clearInterval(feedRefreshTimer);
+            clearTimeout(feedRefreshTimer);
+            feedRefreshTimer = -1;
         };
 
         const load = () => {
-            feedRefreshTimer = setInterval(updateRssFeedList, serverSyncRssDataInterval);
+            feedRefreshTimer = setTimeout(() => {
+                updateRssFeedList();
+                load();
+            }, serverSyncRssDataInterval);
         };
 
         const addRSSFeed = () => {