app: ipfs loading improvements:

use IPFSClient from wabac.js
app: remove # from ipfs paths sent to app
preload interface made more extensible

CHANGES.md

@@ -2,6 +2,7 @@
 
 v1.3.3
 - UI: Component customization improvements, update to latest wabac.js
+- Loading: Improvements for IPFS loading, fix loading with hashtag #filename= in Electron app
 
 v1.3.2
 - UI: Show navbar on all pages, include breadcrumbs with collection title current page

src/electron-preload.js

@@ -10,18 +10,22 @@ const dbs = {};
 
 const loader = new CollectionLoader();
 
-async function getDB(name) {
+async function getColl(name) {
   if (!dbs[name]) {
     dbs[name] = await loader.loadColl(name);
-    console.log(dbs[name]);
+    await dbs[name].initing;
   }
 
-  return dbs[name].store;
+  return dbs[name];
+}
+
+async function getDB(name) {
+  const coll = await getColl(name);
+  return coll.store;
 }
 
 async function getResponse(event, request, coll, ts, channel) {
   const db = await getDB(coll);
-  await db.initing;
 
   const req = {request, url: request.url, timestamp: ts};
 
@@ -41,6 +45,8 @@ async function getResponse(event, request, coll, ts, channel) {
 
 ipcRenderer.on('getresponse', getResponse);
 
+export { getDB, getColl, loader };
+
 
 
 

src/electron-replay-app.js

@@ -7,6 +7,7 @@ import path from 'path';
 import fs from 'fs';
 
 import { ArchiveResponse, Rewriter } from '@webrecorder/wabac/src/rewrite';
+import { IPFSClient } from '@webrecorder/wabac/src/ipfs';
 
 import { PassThrough, Readable } from 'stream';
 
@@ -21,9 +22,26 @@ const REPLAY_PREFIX = STATIC_PREFIX + "wabac/";
 
 const URL_RX = /([^\/]+)\/([\d]+)(?:\w\w_)?\/(.*)$/;
 
+
 let IPFS = null;
-let ipfs = null;
+
-let initingIPFS = null;
+// ============================================================================
+class NativeIPFSClient extends IPFSClient
+{
+  async _doInitIPFS() {
+    if (!IPFS) {
+      IPFS = require("ipfs-core");
+    }
+
+    this.ipfs = await IPFS.create({
+      //repo: "/tmp/test-ipfs"
+      init: {emptyRepo: true},
+      //preload: {enabled: false},
+    });
+
+    this.resetGC();
+  }
+}
 
 
 // ============================================================================
@@ -48,6 +66,8 @@ class ElectronReplayApp
     this.openNextFile = null;
 
     this.screenSize = {width: 1024, height: 768};
+
+    this.ipfsClient = new NativeIPFSClient();
   }
 
   get mainWindowWebPreferences() {
@@ -138,38 +158,7 @@ class ElectronReplayApp
     });
   }
 
-  static async doInitIPFS() {
-    if (!IPFS) {
-      IPFS = require("ipfs-core");
-    }
-
-    ipfs = await IPFS.create({
-      //repo: "/tmp/test-ipfs"
-      init: {emptyRepo: true},
-      //preload: {enabled: false},
-    });
-  }
-
-  async initIPFS() {
-    if (!ipfs) {
-      try {
-        if (!initingIPFS) {
-          initingIPFS = ElectronReplayApp.doInitIPFS();
-        }
-
-        await initingIPFS;
-
-      } catch (e) {
-        console.warn(e);
-      }
-    }
-
-    return ipfs;
-  }
-
   onAppReady() {
-    //ElectronReplayApp.doInitIPFS();
-
     this.screenSize = screen.getPrimaryDisplay().workAreaSize;
 
     app.on('web-contents-created', (event, contents) => {
@@ -276,16 +265,12 @@ class ElectronReplayApp
       } else if (ipfsCID) {
         console.log("ipfs serve:", ipfsCID);
 
-        const ipfs = await this.initIPFS();
+        await this.ipfsClient.initIPFS();
 
-        let size = 0;
+        let size = await this.ipfsClient.getFileSize(ipfsCID);
 
-        for await (const file of ipfs.get(ipfsCID, {timeout: 20000, preload: false})) {
+        if (size === null) {
-          if (file.type !== "file") {
+          return this.notFound(ipfsCID, callback);
-            return this.notFound(ipfsCID, callback);
-          }
-          size = file.size;
-          break;
         }
 
         const {statusCode, start, end} = this.parseRange(reqHeaders, headers, size);
@@ -295,7 +280,7 @@ class ElectronReplayApp
         if (request.method === "GET") {
           const offset = start || 0;
           const length = end ? end - start + 1 : size;
-          data = Readable.from(ipfs.cat(ipfsCID, {offset, length}));
+          data = Readable.from(this.ipfsClient.cat(ipfsCID, {offset, length}));
         }
 
         callback({statusCode, headers, data});

src/loader.js

@@ -134,7 +134,8 @@ You can select a file to upload from the main page by clicking the \'Choose File
         case "ipfs":
           if (IS_APP) {
             const url = new URL(__APP_FILE_SERVE_PREFIX__);
-            url.searchParams.set("ipfs", sourceUrl.slice("ipfs://".length));
+            const hash = sourceUrl.split("#", 1)[0];
+            url.searchParams.set("ipfs", hash.slice("ipfs://".length));
             source = {sourceUrl, loadUrl: url.href};
           }
           break;

webpack.config.js

@@ -47,7 +47,8 @@ const electronMainConfig = (env, argv) => {
     plugins: [
       new webpack.DefinePlugin({
         __APP_FILE_SERVE_PREFIX__ : JSON.stringify(APP_FILE_SERVE_PREFIX),
-        __HELPER_PROXY__ : JSON.stringify(HELPER_PROXY)
+        __HELPER_PROXY__ : JSON.stringify(HELPER_PROXY),
+        __IPFS_CORE_URL__: JSON.stringify("")
       }),
       new webpack.BannerPlugin(BANNER_TEXT),
       new CopyPlugin({
@@ -78,7 +79,7 @@ const electronPreloadConfig = (env, argv) => {
       // this needs to be defined, but not actually used, as electron app uses
       // ipfs-core from node
       new webpack.DefinePlugin({
-        __IPFS_CORE_URL__: JSON.stringify(IPFS_CORE_URL)
+        __IPFS_CORE_URL__: JSON.stringify("")
       }),
     ]
   }