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

Nir Maoz · web-flow · commit 7654e56bd7ca · 2022-01-06T09:43:03.000+02:00
diff --git a/bundlewatch.config.js b/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',
diff --git a/src/util/xhr/getBlobFromURL.js b/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();
   });

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const bundlewatchConfig = {`
`6`	`6`	`},`
`7`	`7`	`{`
`8`	`8`	`path: './dist/cloudinary-core-shrinkwrap.min.js',`
`9`		`- maxSize: '31kb'`
	`9`	`+ maxSize: '32kb'`
`10`	`10`	`},`
`11`	`11`	`{`
`12`	`12`	`path: './dist/cloudinary-jquery.min.js',`