electron app: add preview mode option to open window without recording

Author: ikreymer

src/electron/electron-rec-preload.js

@@ -11,8 +11,8 @@ const { ipcRenderer, contextBridge } = require('electron');
 
 // ===========================================================================
 contextBridge.exposeInMainWorld('archivewebpage', {
-  record: (url, collId) => {
-    ipcRenderer.send("start-rec", url, collId);
+  record: (url, collId, startRec) => {
+    ipcRenderer.send("start-rec", url, collId, startRec);
   },
 
   ipfsPin: (collId) => {

src/electron/electron-recorder-app.js

@@ -39,8 +39,8 @@ class ElectronRecorderApp extends ElectronReplayApp
 
     app.userAgentFallback = desktopUA;
 
-    ipcMain.on("start-rec", (event, url, collId) => {
-      this.createRecordWindow(url, collId);
+    ipcMain.on("start-rec", (event, url, collId, startRec) => {
+      this.createRecordWindow(url, collId, startRec);
     });
 
     ipcMain.on("start-ipfs", (event, validPins) => {
@@ -217,7 +217,7 @@ class ElectronRecorderApp extends ElectronReplayApp
 
     view.webContents.on("new-window", (event, url, frameName, disposition, options, additionalFeatures, referrer) => {
       event.preventDefault();
-      event.newGuest = this.createRecordWindow(url, collId);
+      event.newGuest = this.createRecordWindow(url, collId, startRec);
       console.log("new-window", url, frameName, disposition, options, additionalFeatures, referrer);
     });
 

src/ui.js

@@ -232,7 +232,7 @@ class ArchiveWebApp extends ReplayWebApp
         </div>
       </div>
 
-      <form class="is-flex" @submit="${this.onStartRecord}">
+      <form class="is-flex is-flex-direction-row" @submit="${this.onStartRecord}">
         <div class="field has-addons">
           <p class="control is-expanded">
             <input class="input" type="url" required
@@ -248,6 +248,10 @@ class ArchiveWebApp extends ReplayWebApp
             </button>
           </div>
         </div>
+        ${IS_APP ? html`
+        <label class="checkbox">
+          <input id="preview" type="checkbox"><span>&nbsp;Start in Preview Mode (without recording.)</span>
+        </label>` : ``}
       </form>
     </wr-modal>`;
   }
@@ -264,7 +268,7 @@ class ArchiveWebApp extends ReplayWebApp
             <section class="modal-card-body">
               <div class="container">
                 <div class="content">
-                  <div style="display: flex">
+                  <div class="is-flex">
                     <div class="has-text-centered" style="width: 220px">
                       <fa-icon class="logo" size="48px" .svg="${wrLogo}"></fa-icon>
                       <div style="font-size: smaller; margin-bottom: 1em">${IS_APP ? 'App' : 'Extension'} v${__VERSION__}</div>
@@ -359,7 +363,9 @@ class ArchiveWebApp extends ReplayWebApp
         collId: this.selCollId,
       });
     } else if (window.archivewebpage && window.archivewebpage.record) {
-      window.archivewebpage.record(url, this.selCollId);
+      const previewCheckbox = this.renderRoot.querySelector("#preview");
+      const startRec = !(previewCheckbox && previewCheckbox.checked);
+      window.archivewebpage.record(url, this.selCollId, startRec);
     }
     return false;
   }