Add poly/ponyfills for WritableStream and Blob

This commit is contained in:
Mitchell McCaffrey 2021-02-07 21:53:17 +11:00
parent 291fd1512c
commit 31f502e6ba
3 changed files with 25 additions and 3 deletions

View File

@ -13,6 +13,7 @@
"@testing-library/react": "^11.2.0",
"@testing-library/user-event": "^12.2.2",
"ammo.js": "kripken/ammo.js#aab297a4164779c3a9d8dc8d9da26958de3cb778",
"blob-polyfill": "^5.0.20210201",
"case": "^1.6.3",
"color": "^3.1.3",
"comlink": "^4.3.0",
@ -54,6 +55,7 @@
"streamsaver": "^2.0.5",
"theme-ui": "^0.3.1",
"use-image": "^1.0.5",
"web-streams-polyfill": "^3.0.1",
"webrtc-adapter": "^7.5.1"
},
"resolutions": {

View File

@ -1,7 +1,11 @@
import React, { useRef, useState, useEffect } from "react";
import { Box, Label, Text, Button, Flex } from "theme-ui";
import streamSaver from "streamsaver";
import * as streamSaver from "streamsaver";
import * as streamPonyfill from "web-streams-polyfill/ponyfill";
import * as Comlink from "comlink";
// Polyfill blob to get use to Blob.stream() on unsupported browsers (Safari)
// eslint-disable-next-line no-unused-vars
import { Blob } from "blob-polyfill";
import Modal from "../components/Modal";
import LoadingOverlay from "../components/LoadingOverlay";
@ -11,6 +15,10 @@ import { useDatabase } from "../contexts/DatabaseContext";
import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
// Add writableStream ponyfill
streamSaver.WritableStream =
streamSaver.WritableStream || streamPonyfill.WritableStream;
const worker = Comlink.wrap(new DatabaseWorker());
function ImportDatabaseModal({ isOpen, onRequestClose }) {
@ -60,9 +68,10 @@ function ImportDatabaseModal({ isOpen, onRequestClose }) {
const readableStream = blob.stream();
if (window.WritableStream && readableStream.pipeTo) {
await readableStream.pipeTo(fileStream);
readableStream.pipeTo(fileStream);
backgroundTaskRunningRef.current = false;
} else {
// Fallback when no writableStream and pipeTo is available (Safari)
const writer = fileStream.getWriter();
const reader = readableStream.getReader();
async function pump() {
@ -70,7 +79,8 @@ function ImportDatabaseModal({ isOpen, onRequestClose }) {
if (res.done) {
writer.close();
} else {
writer.write(res.value).then(pump);
await writer.write(res.value);
await pump();
}
}
await pump();

View File

@ -3145,6 +3145,11 @@ bindings@^1.5.0:
dependencies:
file-uri-to-path "1.0.0"
blob-polyfill@^5.0.20210201:
version "5.0.20210201"
resolved "https://registry.yarnpkg.com/blob-polyfill/-/blob-polyfill-5.0.20210201.tgz#0024bfa5dcc3440eb5a2f1e5991cb1612a558465"
integrity sha512-SrH6IG6aXL9pCgSysBCiDpGcAJ1j6/c1qCwR3sTEQJhb+MTk6FITNA6eW6WNYQDNZVi4Z9GjxH5v2MMTv59CrQ==
bluebird@^3.5.5:
version "3.7.2"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@ -12393,6 +12398,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
dependencies:
minimalistic-assert "^1.0.0"
web-streams-polyfill@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.0.1.tgz#1f836eea307e8f4af15758ee473c7af755eb879e"
integrity sha512-M+EmTdszMWINywOZaqpZ6VIEDUmNpRaTOuizF0ZKPjSDC8paMRe/jBBwFv0Yeyn5WYnM5pMqMQa82vpaE+IJRw==
webidl-conversions@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"