Fix retry on timeout for AJAX requests

assets/js/embed.js

@@ -1,5 +1,5 @@
-function get_playlist(plid, timeouts = 1) {
+function get_playlist(plid, retries = 5) {
-    if (timeouts >= 10) {
+    if (retries <= 0) {
         console.log('Failed to pull playlist');
         return;
     }
@@ -18,7 +18,6 @@ function get_playlist(plid, timeouts = 1) {
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', plid_url, true);
-    xhr.send();
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
@@ -51,10 +50,17 @@ function get_playlist(plid, timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        console.log('Pulling playlist failed... ' + retries + '/5');
+        setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
-        console.log('Pulling playlist timed out... ' + timeouts + '/10');
+        console.log('Pulling playlist failed... ' + retries + '/5');
-        get_playlist(plid, timeouts++);
+        get_playlist(plid, retries - 1);
     }
+
+    xhr.send();
 }
 
 if (video_data.plid) {

assets/js/notifications.js

@@ -1,15 +1,14 @@
 var notifications, delivered;
 
-function get_subscriptions(callback, timeouts = 1) {
+function get_subscriptions(callback, retries = 5) {
-    if (timeouts >= 10) {
+    if (retries <= 0) {
-        return
+        return;
     }
 
     var xhr = new XMLHttpRequest();
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', '/api/v1/auth/subscriptions', true);
-    xhr.send(null);
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
@@ -20,10 +19,17 @@ function get_subscriptions(callback, timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        console.log('Pulling subscriptions failed... ' + retries + '/5');
+        setTimeout(function () { get_subscriptions(callback, retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
-        console.log('Pulling subscriptions timed out... ' + timeouts + '/10');
+        console.log('Pulling subscriptions failed... ' + retries + '/5');
-        get_subscriptions(callback, timeouts++);
+        get_subscriptions(callback, retries - 1);
     }
+
+    xhr.send();
 }
 
 function create_notification_stream(subscriptions) {
@@ -77,7 +83,7 @@ function create_notification_stream(subscriptions) {
     notifications.onerror = function (event) {
         console.log('Something went wrong with notifications, trying to reconnect...');
         notifications.close();
-        get_subscriptions(create_notification_stream);
+        setTimeout(function () { get_subscriptions(create_notification_stream) }, 100);
     }
 
     notifications.ontimeout = function (event) {
@@ -97,6 +103,7 @@ window.addEventListener('load', function (e) {
     } else {
         setTimeout(function () {
             if (!localStorage.getItem('stream')) {
+                notifications = true;
                 get_subscriptions(create_notification_stream);
                 localStorage.setItem('stream', true);
             }
@@ -110,6 +117,7 @@ window.addEventListener('load', function (e) {
             } else {
                 setTimeout(function () {
                     if (!localStorage.getItem('stream')) {
+                        notifications = true;
                         get_subscriptions(create_notification_stream);
                         localStorage.setItem('stream', true);
                     }

assets/js/player.js

@@ -218,7 +218,6 @@ if (!video_data.params.listen && video_data.params.annotations) {
     xhr.responseType = 'text';
     xhr.timeout = 60000;
     xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
-    xhr.send();
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
@@ -251,6 +250,8 @@ if (!video_data.params.listen && video_data.params.annotations) {
             window.open(path, '_blank');
         }
     });
+
+    xhr.send();
 }
 
 // Since videojs-share can sometimes be blocked, we defer it until last

assets/js/subscribe_widget.js

@@ -7,8 +7,8 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') {
     subscribe_button.onclick = unsubscribe;
 }
 
-function subscribe(timeouts = 1) {
+function subscribe(retries = 5) {
-    if (timeouts >= 10) {
+    if (retries <= 0) {
         console.log('Failed to subscribe.');
         return;
     }
@@ -20,7 +20,6 @@ function subscribe(timeouts = 1) {
     xhr.timeout = 20000;
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=' + subscribe_data.csrf_token);
 
     var fallback = subscribe_button.innerHTML;
     subscribe_button.onclick = unsubscribe;
@@ -35,14 +34,21 @@ function subscribe(timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        console.log('Subscribing failed... ' + retries + '/5');
+        setTimeout(function () { subscribe(retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
-        console.log('Subscribing timed out... ' + timeouts + '/10');
+        console.log('Subscribing failed... ' + retries + '/5');
-        subscribe(timeouts++);
+        subscribe(retries - 1);
     }
+
+    xhr.send('csrf_token=' + subscribe_data.csrf_token);
 }
 
-function unsubscribe(timeouts = 1) {
+function unsubscribe(retries = 5) {
-    if (timeouts >= 10) {
+    if (retries <= 0) {
         console.log('Failed to subscribe');
         return;
     }
@@ -54,7 +60,6 @@ function unsubscribe(timeouts = 1) {
     xhr.timeout = 20000;
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=' + subscribe_data.csrf_token);
 
     var fallback = subscribe_button.innerHTML;
     subscribe_button.onclick = subscribe;
@@ -69,8 +74,15 @@ function unsubscribe(timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        console.log('Unsubscribing failed... ' + retries + '/5');
+        setTimeout(function () { unsubscribe(retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
-        console.log('Unsubscribing timed out... ' + timeouts + '/10');
+        console.log('Unsubscribing failed... ' + retries + '/5');
-        unsubscribe(timeouts++);
+        unsubscribe(retries - 1);
     }
+
+    xhr.send('csrf_token=' + subscribe_data.csrf_token);
 }

assets/js/themes.js

@@ -9,10 +9,11 @@ toggle_theme.addEventListener('click', function () {
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', url, true);
-    xhr.send();
 
     set_mode(dark_mode);
     localStorage.setItem('dark_mode', dark_mode);
+
+    xhr.send();
 });
 
 window.addEventListener('storage', function (e) {

assets/js/watch.js

@@ -109,10 +109,10 @@ function number_with_separator(val) {
     return val;
 }
 
-function get_playlist(plid, timeouts = 1) {
+function get_playlist(plid, retries = 5) {
     playlist = document.getElementById('playlist');
 
-    if (timeouts >= 10) {
+    if (retries <= 0) {
         console.log('Failed to pull playlist');
         playlist.innerHTML = '';
         return;
@@ -136,7 +136,6 @@ function get_playlist(plid, timeouts = 1) {
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', plid_url, true);
-    xhr.send();
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
@@ -174,20 +173,31 @@ function get_playlist(plid, timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        playlist = document.getElementById('playlist');
+        playlist.innerHTML =
+            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
+
+        console.log('Pulling playlist timed out... ' + retries + '/5');
+        setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
         playlist = document.getElementById('playlist');
         playlist.innerHTML =
             '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
 
-        console.log('Pulling playlist timed out... ' + timeouts + '/10');
+        console.log('Pulling playlist timed out... ' + retries + '/5');
-        get_playlist(plid, timeouts++);
+        get_playlist(plid, retries - 1);
     }
+
+    xhr.send();
 }
 
-function get_reddit_comments(timeouts = 1) {
+function get_reddit_comments(retries = 5) {
     comments = document.getElementById('comments');
 
-    if (timeouts >= 10) {
+    if (retries <= 0) {
         console.log('Failed to pull comments');
         comments.innerHTML = '';
         return;
@@ -204,7 +214,6 @@ function get_reddit_comments(timeouts = 1) {
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', url, true);
-    xhr.send();
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
@@ -239,8 +248,8 @@ function get_reddit_comments(timeouts = 1) {
                 comments.children[0].children[1].children[0].onclick = swap_comments;
             } else {
                 if (video_data.params.comments[1] === 'youtube') {
-                    console.log('Pulling comments timed out... ' + timeouts + '/10');
+                    console.log('Pulling comments failed... ' + retries + '/5');
-                    get_youtube_comments(timeouts++);
+                    setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
                 } else {
                     comments.innerHTML = fallback;
                 }
@@ -248,16 +257,23 @@ function get_reddit_comments(timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        console.log('Pulling comments failed... ' + retries + '/5');
+        setInterval(function () { get_reddit_comments(retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
-        console.log('Pulling comments timed out... ' + timeouts + '/10');
+        console.log('Pulling comments failed... ' + retries + '/5');
-        get_reddit_comments(timeouts++);
+        get_reddit_comments(retries - 1);
     }
+
+    xhr.send();
 }
 
-function get_youtube_comments(timeouts = 1) {
+function get_youtube_comments(retries = 5) {
     comments = document.getElementById('comments');
 
-    if (timeouts >= 10) {
+    if (retries <= 0) {
         console.log('Failed to pull comments');
         comments.innerHTML = '';
         return;
@@ -275,7 +291,6 @@ function get_youtube_comments(timeouts = 1) {
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', url, true);
-    xhr.send();
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
@@ -305,7 +320,7 @@ function get_youtube_comments(timeouts = 1) {
                 comments.children[0].children[1].children[0].onclick = swap_comments;
             } else {
                 if (video_data.params.comments[1] === 'youtube') {
-                    get_youtube_comments(timeouts++);
+                    setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
                 } else {
                     comments.innerHTML = '';
                 }
@@ -313,12 +328,21 @@ function get_youtube_comments(timeouts = 1) {
         }
     }
 
+    xhr.onerror = function () {
+        comments.innerHTML =
+            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+        console.log('Pulling comments failed... ' + retries + '/5');
+        setInterval(function () { get_youtube_comments(retries - 1) }, 1000);
+    }
+
     xhr.ontimeout = function () {
         comments.innerHTML =
             '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-        console.log('Pulling comments timed out... ' + timeouts + '/10');
+        console.log('Pulling comments failed... ' + retries + '/5');
-        get_youtube_comments(timeouts++);
+        get_youtube_comments(retries - 1);
     }
+
+    xhr.send();
 }
 
 function get_youtube_replies(target, load_more) {
@@ -338,7 +362,6 @@ function get_youtube_replies(target, load_more) {
     xhr.responseType = 'json';
     xhr.timeout = 20000;
     xhr.open('GET', url, true);
-    xhr.send();
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
@@ -373,9 +396,11 @@ function get_youtube_replies(target, load_more) {
     }
 
     xhr.ontimeout = function () {
-        console.log('Pulling comments timed out.');
+        console.log('Pulling comments failed.');
         body.innerHTML = fallback;
     }
+
+    xhr.send();
 }
 
 if (video_data.play_next) {

assets/js/watched_widget.js

@@ -9,7 +9,6 @@ function mark_watched(target) {
     xhr.timeout = 20000;
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=' + watched_data.csrf_token);
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
@@ -18,6 +17,8 @@ function mark_watched(target) {
             }
         }
     }
+
+    xhr.send('csrf_token=' + watched_data.csrf_token);
 }
 
 function mark_unwatched(target) {
@@ -33,7 +34,6 @@ function mark_unwatched(target) {
     xhr.timeout = 20000;
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=' + watched_data.csrf_token);
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
@@ -43,4 +43,6 @@ function mark_unwatched(target) {
             }
         }
     }
+
+    xhr.send('csrf_token=' + watched_data.csrf_token);
 }

src/invidious/views/subscription_manager.ecr

@@ -68,7 +68,6 @@ function remove_subscription(target) {
     xhr.timeout = 20000;
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
 
     xhr.onreadystatechange = function() {
         if (xhr.readyState == 4) {
@@ -78,5 +77,7 @@ function remove_subscription(target) {
             }
         }
     }
+
+    xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
 }
 </script>

src/invidious/views/token_manager.ecr

@@ -60,7 +60,6 @@ function revoke_token(target) {
     xhr.timeout = 20000;
     xhr.open('POST', url, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
 
     xhr.onreadystatechange = function() {
         if (xhr.readyState == 4) {
@@ -70,5 +69,7 @@ function revoke_token(target) {
             }
         }
     }
+
+    xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
 }
 </script>