diff --git a/app/javascript/flavours/glitch/util/base64.js b/app/javascript/flavours/glitch/util/base64.js new file mode 100644 index 0000000000..8226e2c54e --- /dev/null +++ b/app/javascript/flavours/glitch/util/base64.js @@ -0,0 +1,10 @@ +export const decode = base64 => { + const rawData = window.atob(base64); + const outputArray = new Uint8Array(rawData.length); + + for (let i = 0; i < rawData.length; ++i) { + outputArray[i] = rawData.charCodeAt(i); + } + + return outputArray; +}; diff --git a/app/javascript/flavours/glitch/util/base_polyfills.js b/app/javascript/flavours/glitch/util/base_polyfills.js index 7856b26f9d..ad023eb73e 100644 --- a/app/javascript/flavours/glitch/util/base_polyfills.js +++ b/app/javascript/flavours/glitch/util/base_polyfills.js @@ -3,7 +3,9 @@ import 'intl/locale-data/jsonp/en'; import 'es6-symbol/implement'; import includes from 'array-includes'; import assign from 'object-assign'; +import values from 'object.values'; import isNaN from 'is-nan'; +import { decode as decodeBase64 } from './base64'; if (!Array.prototype.includes) { includes.shim(); @@ -13,6 +15,30 @@ if (!Object.assign) { Object.assign = assign; } +if (!Object.values) { + values.shim(); +} + if (!Number.isNaN) { Number.isNaN = isNaN; } + +if (!HTMLCanvasElement.prototype.toBlob) { + const BASE64_MARKER = ';base64,'; + + Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { + value(callback, type = 'image/png', quality) { + const dataURL = this.toDataURL(type, quality); + let data; + + if (dataURL.indexOf(BASE64_MARKER) >= 0) { + const [, base64] = dataURL.split(BASE64_MARKER); + data = decodeBase64(base64); + } else { + [, data] = dataURL.split(','); + } + + callback(new Blob([data], { type })); + }, + }); +} diff --git a/app/javascript/flavours/glitch/util/load_polyfills.js b/app/javascript/flavours/glitch/util/load_polyfills.js index 8927b73585..8cb81c1a61 100644 --- a/app/javascript/flavours/glitch/util/load_polyfills.js +++ b/app/javascript/flavours/glitch/util/load_polyfills.js @@ -12,11 +12,13 @@ function importExtraPolyfills() { function loadPolyfills() { const needsBasePolyfills = !( + Array.prototype.includes && + HTMLCanvasElement.prototype.toBlob && window.Intl && - Object.assign && Number.isNaN && - window.Symbol && - Array.prototype.includes + Object.assign && + Object.values && + window.Symbol ); // Latest version of Firefox and Safari do not have IntersectionObserver.