Split out viewer and re-write unzipping

.vscode/settings.json

@@ -5,6 +5,8 @@
         "bloompub",
         "octokit",
         "repos",
-        "toastify"
+        "toastify",
+        "unzipper",
+        "wordmark"
     ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloom-viewer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Bloom Devs",
   "description": "Viewer for Bloom Digital books",
   "license": "MIT",
@@ -74,8 +74,11 @@
     }
   },
   "dependencies": {
+    "@emotion/core": "^10.0.28",
     "@octokit/rest": "^18.0.0",
     "@types/archiver": "^3.0.0",
+    "@types/temp": "^0.8.34",
+    "@types/unzipper": "^0.10.3",
     "archiver": "^3.1.1",
     "bloom-player": "^1.1.49",
     "compare-versions": "^3.6.0",

src/renderer/App.tsx

@@ -4,58 +4,33 @@ import "./App.css";
 import "./ReactToastify.min.css";
 import { hot } from "react-hot-loader/root";
 import { ToastContainer } from "react-toastify";
-import * as fs from "fs";
-import * as unzipper from "unzipper";
-import * as temp from "temp";
 import { useCheckForNewVersion } from "./useCheckForNewVersion";
+import { Viewer } from "./Viewer";
+import * as electron from "electron";
+import { StartScreen } from "./StartScreen";
 
-const bloomPlayerHtml = "bloomplayer.htm";
-const App: React.FunctionComponent<{ zipFilePath: string }> = (props) => {
-  const [htmPath, setHtmPath] = useState("");
-  useCheckForNewVersion();
-  useEffect(() => {
-    console.log("bloom htmlpath=" + bloomPlayerHtml);
-    const slashIndex = props.zipFilePath
-      .replace(/\\/g, "/")
+let setZipPathStatic: (path: string) => void;
 
-      .lastIndexOf("/");
-    let bookTitle: string;
-    bookTitle = props.zipFilePath.substring(
-      slashIndex + 1,
-      props.zipFilePath.length
-    );
-    const filename = bookTitle
-      .replace(/\.bloomd/gi, ".htm")
-      .replace(/\.bloompub/gi, ".htm");
-    temp.track();
-    temp.mkdir("bloom-reader-", (err, p) => {
-      fs.createReadStream(props.zipFilePath).pipe(
-        unzipper.Extract({ path: p })
-      );
-      console.log("booktitle = " + bookTitle);
-      console.log("filename = " + filename);
-      console.log("temp path = " + p);
-      // for some reason electron isn't actually ready for bloom-player to make requests yet
-      // initially, hence the delay
-      window.setTimeout(
-        () => setHtmPath((p + "\\" + filename).replace(/\\/g, "/")),
-        1000
-      );
-    });
-  }, [props.zipFilePath]);
+const App: React.FunctionComponent<{ initialFilePath: string }> = (props) => {
+  const [zipPath, setZipPath] = useState(props.initialFilePath);
+  setZipPathStatic = setZipPath;
+  useEffect(() => {
+    electron.remote.app.addRecentDocument(zipPath);
+  }, [zipPath]);
+  useCheckForNewVersion();
 
-  console.log("htmPath = " + htmPath);
   return (
-    <div className="App">
-      {htmPath && (
-        <iframe
-          style={{ width: "100%", height: "100%" }}
-          src={`${bloomPlayerHtml}?allowToggleAppBar=true&url=file:///${htmPath}`}
-        />
+    <>
+      {(zipPath && <Viewer zipFilePath={zipPath} />) || (
+        <StartScreen></StartScreen>
       )}
       <ToastContainer />
-    </div>
+    </>
   );
-}; ////https://s3.amazonaws.com/bloomharvest/benjamin%40aconnectedplanet.org%2f130b6829-5367-4e5c-80d7-ec588aae5281/bloomdigital%2findex.htm"
+};
 
 export default hot(App);
+
+export function showBook(zipFilePath: string) {
+  setZipPathStatic(zipFilePath);
+}

src/renderer/Viewer.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+
+import * as fs from "fs";
+import * as unzipper from "unzipper";
+import * as temp from "temp";
+import * as Path from "path";
+
+temp.track();
+
+const bloomPlayerHtml = "bloomplayer.htm";
+export const Viewer: React.FunctionComponent<{ zipFilePath: string }> = (
+  props
+) => {
+  const [htmPath, setHtmPath] = useState("");
+  useEffect(() => {
+    console.log("bloom htmlpath=" + bloomPlayerHtml);
+    const slashIndex = props.zipFilePath
+      .replace(/\\/g, "/")
+
+      .lastIndexOf("/");
+
+    const unpackedFolder = temp.mkdirSync("bloomPUB-viewer-");
+    const stream = fs.createReadStream(props.zipFilePath);
+    // This will wait until we know the readable stream is actually valid before piping
+    stream.on("open", () => {
+      stream.pipe(
+        unzipper
+          .Extract({ path: unpackedFolder })
+          // unzipper calls this when it's done unzipping
+          .on("close", () => {
+            let filename = "index.htm";
+            if (!fs.existsSync(Path.join(unpackedFolder, filename))) {
+              // it must be the old method, where we named the htm the same as the bloomd (which was obviously fragile):
+              const bookTitle = props.zipFilePath.substring(
+                slashIndex + 1,
+                props.zipFilePath.length
+              );
+              filename = bookTitle
+                .replace(/\.bloomd/gi, ".htm")
+                .replace(/\.bloompub/gi, ".htm");
+            }
+            setHtmPath((unpackedFolder + "\\" + filename).replace(/\\/g, "/"));
+          })
+      );
+    });
+  }, [props.zipFilePath]);
+
+  console.log("htmPath = " + htmPath);
+  return (
+    <div className="App">
+      {htmPath && (
+        <iframe
+          style={{ width: "100%", height: "100%" }}
+          src={`${bloomPlayerHtml}?allowToggleAppBar=true&url=file:///${htmPath}`}
+        />
+      )}
+    </div>
+  );
+}; ////https://s3.amazonaws.com/bloomharvest/benjamin%40aconnectedplanet.org%2f130b6829-5367-4e5c-80d7-ec588aae5281/bloomdigital%2findex.htm"

src/renderer/index.tsx

@@ -1,37 +1,25 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-const electron = require("electron");
 import { ipcRenderer, remote, app } from "electron";
-import * as fs from "fs";
-import App from "./App";
+import App, { showBook } from "./App";
 
 updateMainMenu();
-const path = ipcRenderer.sendSync("get-file-that-launched-me");
+const zipFilePath = ipcRenderer.sendSync("get-file-that-launched-me");
 
-const title = "BloomPub Viewer " + require("../../package.json").version;
+const title = "BloomPUB Viewer " + require("../../package.json").version;
 
 remote.getCurrentWindow().setTitle(title);
 
-//show initial book or notice
-if (path && fs.existsSync(path)) {
-  showBook(path);
-} else {
-  showOpenFile();
-}
-
-function showBook(zipFilePath: string) {
-  electron.remote.app.addRecentDocument(zipFilePath);
-  ReactDOM.render(
-    <App zipFilePath={zipFilePath} />,
-    document.getElementById("root")
-  );
-}
+ReactDOM.render(
+  <App initialFilePath={zipFilePath} />,
+  document.getElementById("root")
+);
 
 function updateMainMenu() {
   const mainWindow = remote.getCurrentWindow();
   const macMenu = {
-    label: `BloomPub Viewer`,
+    label: `BloomPUB Viewer`,
     submenu: [
       {
         label: `Quit`,
@@ -47,12 +35,19 @@ function updateMainMenu() {
     label: "&" + `File`,
     submenu: [
       {
-        label: "&" + `Open BloomPub...`,
+        label: "&" + `Open BloomPUB...`,
         accelerator: "Ctrl+O",
         click: () => {
           showOpenFile();
         },
       },
+      {
+        label: "&" + `Start Screen`,
+
+        click: () => {
+          showBook("");
+        },
+      },
     ],
   };
   if (fileMenu && process.platform !== "darwin") {
@@ -73,13 +68,13 @@ function updateMainMenu() {
 
   remote.Menu.setApplicationMenu(menu);
 }
-function showOpenFile() {
+export function showOpenFile() {
   const options: Electron.OpenDialogOptions = {
-    title: "Open BloomPub File",
+    title: "Open BloomPUB File",
     properties: ["openFile"],
     filters: [
       {
-        name: "BloomPub Book",
+        name: "BloomPUB Book",
         extensions: ["bloomd", "bloompub"],
       },
     ],

src/renderer/useCheckForNewVersion.ts

@@ -16,7 +16,7 @@ export function useCheckForNewVersion() {
           compareVersions(version, require("../../package.json").version) > 0
         ) {
           toast.success(
-            `Click to get new version of BloomPub Viewer (${data.data.name})`,
+            `Click to get new version of BloomPUB Viewer (${data.data.name})`,
             {
               position: "bottom-right",
               autoClose: 15000,