Fix transparent video on safari 14.1 by using fetch instead of XHR (#282

)

bundlewatch.config.js

@@ -6,7 +6,7 @@ const bundlewatchConfig = {
     },
     {
       path: './dist/cloudinary-core-shrinkwrap.min.js',
-      maxSize: '31kb'
+      maxSize: '32kb'
     },
     {
       path: './dist/cloudinary-jquery.min.js',

src/util/xhr/getBlobFromURL.js

@@ -1,3 +1,18 @@
+/**
+ * Reject on timeout
+ * @param maxTimeoutMS
+ * @param reject
+ * @returns {number} timerID
+ */
+function rejectOnTimeout(maxTimeoutMS, reject) {
+  return setTimeout(() => {
+    reject({
+      status: 'error',
+      message: 'Timeout loading Blob URL'
+    });
+  }, maxTimeoutMS);
+}
+
 /**
  * @description Converts a URL to a BLOB URL
  * @param {string} urlToLoad
@@ -10,34 +25,67 @@
  *    }
  * }>}
  */
-function getBlobFromURL(urlToLoad, max_timeout_ms) {
+function getBlobFromURL(urlToLoad, maxTimeoutMS) {
   return new Promise((resolve, reject) => {
-    let timerID = setTimeout(() => {
-      reject({
-        status: 'error',
-        message: 'Timeout loading Blob URL'
-      });
-    }, max_timeout_ms);
+    const timerID = rejectOnTimeout(maxTimeoutMS, reject);
 
-    let xhr = new XMLHttpRequest();
-    xhr.responseType = 'blob';
-    xhr.onload = function (response) {
-      clearTimeout(timerID); // clear timeout reject error
+    // If fetch exists, use it to fetch blob, otherwise use XHR.
+    // XHR causes issues on safari 14.1 so we prefer fetch
+    const fetchBlob = (typeof fetch !== 'undefined' && fetch) ? loadUrlUsingFetch : loadUrlUsingXhr;
+
+    fetchBlob(urlToLoad).then((blob) => {
       resolve({
         status: 'success',
         payload: {
-          blobURL: URL.createObjectURL(xhr.response)
+          blobURL: URL.createObjectURL(blob)
         }
       });
-    };
-
-    xhr.onerror = function () {
-      clearTimeout(timerID); // clear timeout reject error
+    }).catch(() => {
       reject({
         status: 'error',
         message: 'Error loading Blob URL'
       });
+    }).finally(() => {
+      // Clear the timeout timer on fail or success.
+      clearTimeout(timerID);
+    });
+  });
+}
+
+/**
+ * Use fetch function to fetch file
+ * @param urlToLoad
+ * @returns {Promise<unknown>}
+ */
+function loadUrlUsingFetch(urlToLoad) {
+  return new Promise((resolve, reject) => {
+    fetch(urlToLoad).then((response) => {
+      response.blob().then((blob) => {
+        resolve(blob);
+      });
+    }).catch(() => {
+      reject('error');
+    });
+  });
+}
+
+/**
+ * Use XHR to fetch file
+ * @param urlToLoad
+ * @returns {Promise<unknown>}
+ */
+function loadUrlUsingXhr(urlToLoad) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'blob';
+    xhr.onload = function (response) {
+      resolve(xhr.response);
     };
+
+    xhr.onerror = function () {
+      reject('error');
+    };
+
     xhr.open('GET', urlToLoad, true);
     xhr.send();
   });