Use XHR instead of fetch requests

src/invidious/views/watch.ecr

@@ -205,15 +205,6 @@ function toggle_comments(target) {
   }
 }
 
-function timeout(ms, promise) {
-  return new Promise(function(resolve, reject) {
-    setTimeout(function() {
-      reject(new Error('timeout'));
-    }, ms);
-    promise.then(resolve, reject);
-  });
-}
-
 function load_comments(target) {
   var continuation = target.getAttribute('data-continuation');
 
@@ -222,34 +213,36 @@ function load_comments(target) {
   body.innerHTML =
     '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
 
-  var url =
+  var url = '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
-    '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
+  var xhr = new XMLHttpRequest();
-  timeout(5000, fetch(url))
+  xhr.responseType = 'json';
-    .then(function(response) {
+  xhr.timeout = 10000;
-      return response.json();
+  xhr.open("GET", url, true);
-    })
+  xhr.send();
-    .then(
+
-      function(jsonResponse) {
+  xhr.onreadystatechange = function() {
-        body.innerHTML = jsonResponse.content_html;
+    if(xhr.readyState == 4 && xhr.status == 200) {
-      },
+      body.innerHTML = xhr.response.content_html;
-      function(error) {
+    } else {
       body.innerHTML = fallback;
-        console.log(response);
     }
-    )
+  }
-    .catch(function(error) {
+
+  xhr.ontimeout = function() {
       body.innerHTML = fallback;
-      console.log(error);
+  }
-    });
 }
 
 function get_reddit_comments() {
-  fetch('/api/v1/comments/<%= video.id %>?source=reddit')
+  var url = '/api/v1/comments/<%= video.id %>?source=reddit';
-    .then(function(response) {
+  var xhr = new XMLHttpRequest();
-      return response.json();
+  xhr.responseType = 'json';
-    })
+  xhr.timeout = 10000;
-    .then(
+  xhr.open("GET", url, true);
-      function(jsonResponse) {
+  xhr.send();
+
+  xhr.onreadystatechange = function() {
+    if(xhr.readyState == 4 && xhr.status == 200) {
       comments = document.getElementById('comments');
       comments.innerHTML = `
       <div>
@@ -264,24 +257,30 @@ function get_reddit_comments() {
       <div>{content_html}</div>
   
       <hr style="margin-left:1em; margin-right:1em;">`.supplant({
-          title: jsonResponse.title,
+          title: xhr.response.title,
-          permalink: jsonResponse.permalink,
+          permalink: xhr.response.permalink,
-          content_html: jsonResponse.content_html
+          content_html: xhr.response.content_html
       });
-      },
+    } else {
-      function(response) {
       get_youtube_comments();
     }
-    );
+  };
+
+  xhr.ontimeout = function() {
+      get_reddit_comments();
+  }
 }
 
 function get_youtube_comments() {
-  fetch('/api/v1/comments/<%= video.id %>?format=html')
+  var url = '/api/v1/comments/<%= video.id %>?format=html';
-    .then(function(response) {
+  var xhr = new XMLHttpRequest();
-      return response.json();
+  xhr.responseType = 'json';
-    })
+  xhr.timeout = 10000;
-    .then(
+  xhr.open("GET", url, true);
-      function(jsonResponse) {
+  xhr.send();
+
+  xhr.onreadystatechange = function() {
+    if(xhr.readyState == 4 && xhr.status == 200) {
         comments = document.getElementById('comments');
         comments.innerHTML = `
         <div>
@@ -292,13 +291,17 @@ function get_youtube_comments() {
         </div>
         <div>{content_html}</div>
         <hr style="margin-left:1em; margin-right:1em;">`.supplant({
-          content_html: jsonResponse.content_html
+          content_html: xhr.response.content_html
         });
-      },
+      } else {
-      function(response) {
+          comments = document.getElementById('comments');
           comments.innerHTML = '';
       }
-    );
+  }
+
+  xhr.ontimeout = function () {
+    get_youtube_comments();
+  }
 }
 
 String.prototype.supplant = function(o) {