diff --git a/package.json b/package.json index 9d058e4..d143748 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@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", @@ -22,6 +21,7 @@ "dexie-export-import": "^1.0.0", "err-code": "^2.0.3", "fake-indexeddb": "^3.1.2", + "file-saver": "^2.0.5", "fuse.js": "^6.4.1", "interactjs": "^1.9.7", "konva": "^7.1.8", @@ -52,10 +52,8 @@ "simplify-js": "^1.2.4", "socket.io-client": "^3.0.3", "source-map-explorer": "^2.4.2", - "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": { diff --git a/src/modals/ImportExportModal.js b/src/modals/ImportExportModal.js index 4b5d071..d518254 100644 --- a/src/modals/ImportExportModal.js +++ b/src/modals/ImportExportModal.js @@ -1,10 +1,7 @@ import React, { useRef, useState, useEffect } from "react"; import { Box, Label, Text, Button, Flex } from "theme-ui"; -import * as streamSaver from "streamsaver"; -import * as streamPonyfill from "web-streams-polyfill/ponyfill"; +import { saveAs } from "file-saver"; import * as Comlink from "comlink"; -// Polyfill blob to get use to Blob.stream() on unsupported browsers (Safari) -import "blob-polyfill"; import Modal from "../components/Modal"; import LoadingOverlay from "../components/LoadingOverlay"; @@ -14,10 +11,6 @@ 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 }) { @@ -49,37 +42,13 @@ function ImportDatabaseModal({ isOpen, onRequestClose }) { window.location.reload(); } - const fileStreamRef = useRef(); - async function handleExportDatabase() { setIsLoading(true); backgroundTaskRunningRef.current = true; const blob = await worker.exportData(Comlink.proxy(handleDBProgress)); + saveAs(blob, `${new Date().toISOString()}.owlbear`); setIsLoading(false); - - const fileStream = streamSaver.createWriteStream( - `${new Date().toISOString()}.owlbear`, - { - size: blob.size, - } - ); - fileStreamRef.current = fileStream; - - const readableStream = blob.stream(); - try { - await readableStream.pipeTo(fileStream); - } catch (error) { - console.error(error); - } backgroundTaskRunningRef.current = false; - fileStreamRef.current = null; - } - - function handleClose() { - if (isLoading) { - return; - } - onRequestClose(); } useEffect(() => { @@ -90,20 +59,19 @@ function ImportDatabaseModal({ isOpen, onRequestClose }) { } } - function handleUnload() { - if (fileStreamRef.current) { - fileStreamRef.current.abort(); - } - } - window.addEventListener("beforeunload", handleBeforeUnload); - window.addEventListener("unload", handleUnload); return () => { window.removeEventListener("beforeunload", handleBeforeUnload); - window.removeEventListener("unload", handleUnload); }; }, []); + function handleClose() { + if (isLoading) { + return; + } + onRequestClose(); + } + return (