From 552f616305809d111f7540cbea93f89fad3d0760 Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Sat, 15 Jun 2019 10:08:06 -0500 Subject: [PATCH] Fix retry on timeout for AJAX requests --- assets/js/embed.js | 18 ++++-- assets/js/notifications.js | 24 ++++--- assets/js/player.js | 3 +- assets/js/subscribe_widget.js | 36 +++++++---- assets/js/themes.js | 3 +- assets/js/watch.js | 67 ++++++++++++++------ assets/js/watched_widget.js | 6 +- src/invidious/views/subscription_manager.ecr | 3 +- src/invidious/views/token_manager.ecr | 3 +- 9 files changed, 110 insertions(+), 53 deletions(-) diff --git a/assets/js/embed.js b/assets/js/embed.js index 283bc06d..1f742864 100644 --- a/assets/js/embed.js +++ b/assets/js/embed.js @@ -1,5 +1,5 @@ -function get_playlist(plid, timeouts = 1) { - if (timeouts >= 10) { +function get_playlist(plid, retries = 5) { + 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.ontimeout = function () { - console.log('Pulling playlist timed out... ' + timeouts + '/10'); - get_playlist(plid, timeouts++); + 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 failed... ' + retries + '/5'); + get_playlist(plid, retries - 1); + } + + xhr.send(); } if (video_data.plid) { diff --git a/assets/js/notifications.js b/assets/js/notifications.js index 7a112350..4e7be42d 100644 --- a/assets/js/notifications.js +++ b/assets/js/notifications.js @@ -1,15 +1,14 @@ var notifications, delivered; -function get_subscriptions(callback, timeouts = 1) { - if (timeouts >= 10) { - return +function get_subscriptions(callback, retries = 5) { + if (retries <= 0) { + 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.ontimeout = function () { - console.log('Pulling subscriptions timed out... ' + timeouts + '/10'); - get_subscriptions(callback, timeouts++); + 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 failed... ' + retries + '/5'); + 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); } diff --git a/assets/js/player.js b/assets/js/player.js index ae9a8b25..37dd1dcf 100644 --- a/assets/js/player.js +++ b/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 diff --git a/assets/js/subscribe_widget.js b/assets/js/subscribe_widget.js index 7a7f806d..1201a554 100644 --- a/assets/js/subscribe_widget.js +++ b/assets/js/subscribe_widget.js @@ -7,8 +7,8 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') { subscribe_button.onclick = unsubscribe; } -function subscribe(timeouts = 1) { - if (timeouts >= 10) { +function subscribe(retries = 5) { + 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.ontimeout = function () { - console.log('Subscribing timed out... ' + timeouts + '/10'); - subscribe(timeouts++); + xhr.onerror = function () { + console.log('Subscribing failed... ' + retries + '/5'); + setTimeout(function () { subscribe(retries - 1) }, 1000); } + + xhr.ontimeout = function () { + console.log('Subscribing failed... ' + retries + '/5'); + subscribe(retries - 1); + } + + xhr.send('csrf_token=' + subscribe_data.csrf_token); } -function unsubscribe(timeouts = 1) { - if (timeouts >= 10) { +function unsubscribe(retries = 5) { + 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.ontimeout = function () { - console.log('Unsubscribing timed out... ' + timeouts + '/10'); - unsubscribe(timeouts++); + xhr.onerror = function () { + console.log('Unsubscribing failed... ' + retries + '/5'); + setTimeout(function () { unsubscribe(retries - 1) }, 1000); } + + xhr.ontimeout = function () { + console.log('Unsubscribing failed... ' + retries + '/5'); + unsubscribe(retries - 1); + } + + xhr.send('csrf_token=' + subscribe_data.csrf_token); } diff --git a/assets/js/themes.js b/assets/js/themes.js index 178ff112..826c6597 100644 --- a/assets/js/themes.js +++ b/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) { diff --git a/assets/js/watch.js b/assets/js/watch.js index 80da3ee6..fb4ab4b4 100644 --- a/assets/js/watch.js +++ b/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 = + '

'; + + 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 = '

'; - console.log('Pulling playlist timed out... ' + timeouts + '/10'); - get_playlist(plid, timeouts++); + console.log('Pulling playlist timed out... ' + retries + '/5'); + 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'); - get_youtube_comments(timeouts++); + console.log('Pulling comments failed... ' + retries + '/5'); + setTimeout(function () { get_youtube_comments(retries - 1) }, 1000); } else { comments.innerHTML = fallback; } @@ -248,16 +257,23 @@ function get_reddit_comments(timeouts = 1) { } } - xhr.ontimeout = function () { - console.log('Pulling comments timed out... ' + timeouts + '/10'); - get_reddit_comments(timeouts++); + 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 failed... ' + retries + '/5'); + 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 = + '

'; + console.log('Pulling comments failed... ' + retries + '/5'); + setInterval(function () { get_youtube_comments(retries - 1) }, 1000); + } + xhr.ontimeout = function () { comments.innerHTML = '

'; - console.log('Pulling comments timed out... ' + timeouts + '/10'); - get_youtube_comments(timeouts++); + console.log('Pulling comments failed... ' + retries + '/5'); + 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) { diff --git a/assets/js/watched_widget.js b/assets/js/watched_widget.js index 280da83a..4a5cfd2d 100644 --- a/assets/js/watched_widget.js +++ b/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); } \ No newline at end of file diff --git a/src/invidious/views/subscription_manager.ecr b/src/invidious/views/subscription_manager.ecr index fe866bd0..508cf51c 100644 --- a/src/invidious/views/subscription_manager.ecr +++ b/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) || "") %>'); } diff --git a/src/invidious/views/token_manager.ecr b/src/invidious/views/token_manager.ecr index c5cfd7ff..659f5ab3 100644 --- a/src/invidious/views/token_manager.ecr +++ b/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) || "") %>'); }