build: Enable lint-staged

.husky/pre-commit

@@ -1 +1 @@
-npm run prettier:check
+npm run pre-commit

main.js

@@ -538,6 +538,11 @@ async function startApp() {
       app.quit();
     }
   });
+
+  app.on("will-quit", async () => {
+    console.log("will-quit");
+    await tools.destroy();
+  });
 }
 
 startApp();

package.json

@@ -8,14 +8,15 @@
     "@electron/remote": "2.1.2",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "adbkit-apkreader": "3.2.0",
+    "bootstrap": "^5.3.3",
+    "bootswatch": "^5.3.3",
     "command-exists": "1.2.9",
     "compare-versions": "6.1.1",
     "electron-find": "1.0.7",
     "electron-twig": "1.1.1",
     "fix-path": "4.0.0",
     "jquery": "3.7.1",
     "jquery-ui": "^1.14.0",
-    "node-fetch": "3.3.2",
     "socks-proxy-agent": "8.0.4",
     "web-auto-extractor": "1.0.17"
   },
@@ -34,6 +35,7 @@
     "dist-win": "electron-builder -w",
     "dist-mac": "electron-builder -m",
     "dist-linux": "electron-builder -l",
+    "pre-commit": "lint-staged --concurrent false",
     "prettier:check": "prettier --check \"**/*.{css,js,json,md,twig,yml}\"",
     "prettier:format": "prettier --write \"**/*.{css,js,json,md,twig,yml}\"",
     "postdist": "npm run pack-win && npm run pack-mac",
@@ -43,7 +45,7 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "{**/*,*}.{css,js,json,md,twig,yml}": "prettier --write"
+    "*.{css,html,js,json,md,twig,yml}": "prettier --write"
   },
   "build": {
     "appId": "com.sidenoder.app",

tools.js

@@ -10,8 +10,6 @@ const { dialog } = require("electron");
 const ApkReader = require("adbkit-apkreader");
 const adbkit = require("@devicefarmer/adbkit").default;
 const adb = adbkit.createClient();
-const fetch = (...args) =>
-  import("node-fetch").then(({ default: fetch }) => fetch(...args));
 const WAE = require("web-auto-extractor").default;
 // const HttpProxyAgent = require('https-proxy-agent'); // TODO add https proxy support
 const { SocksProxyAgent } = require("socks-proxy-agent");
@@ -30,7 +28,7 @@ const l = 32;
 const configLocationOld = path.join(global.homedir, "sidenoder-config.json");
 const configLocation = path.join(global.sidenoderHome, "config.json");
 
-let agentOculus, agentSteam, agentSQ;
+let agentOculus, agentSteam, agentSQ, tracker;
 
 init();
 
@@ -63,6 +61,7 @@ module.exports = {
   trackDevices,
   checkDeps,
   checkMount,
+  destroy,
   mount,
   killRClone,
   getDir,
@@ -908,7 +907,7 @@ async function trackDevices() {
   await getDeviceSync();
 
   try {
-    const tracker = await adb.trackDevices();
+    tracker = await adb.trackDevices();
     tracker.on("add", async (device) => {
       console.log("Device was plugged in", device.id);
       // await getDeviceSync();
@@ -926,15 +925,25 @@ async function trackDevices() {
     });
 
     tracker.on("end", () => {
-      console.error("Tracking stopped");
-      trackDevices();
+      console.log("Tracking stopped");
     });
   } catch (err) {
     console.error("Something went wrong:", err.stack);
     returnError(err);
   }
 }
 
+async function destroy() {
+  try {
+    await killRClone();
+  } catch (_err) {
+    console.log("rclone not started");
+  }
+
+  tracker.end();
+  tracker = null;
+}
+
 async function appInfo(args) {
   const { res, pkg } = args;
   const app = KMETAS[pkg];
@@ -1495,7 +1504,7 @@ async function killRClone() {
     platform == "win"
       ? `taskkill.exe /F /T /IM rclone.exe`
       : `killall -9 rclone`;
-  console.log("try kill rclone");
+  console.log("killing rclone");
   return new Promise((res, rej) => {
     exec(killCmd, (error, stdout, stderr) => {
       if (error) {
@@ -1624,17 +1633,23 @@ async function mount() {
   exec(
     `"${rcloneCmd}" ${mountCmd} --read-only --rc --rc-no-auth --config="${global.currentConfiguration.rcloneConf}" ${global.currentConfiguration.cfgSection}: "${global.mountFolder}"`,
     (error, stdout, stderr) => {
-      if (error) {
-        console.error("rclone error:", error);
-        if (RCLONE_ID != myId) error = false;
-        console.log({ RCLONE_ID, myId });
-        win.webContents.send("check_mount", { success: false, error });
-        // checkMount();
-        /*if (error.message.search('transport endpoint is not connected')) {
-        console.log('GEVONDE');
-      }*/
+      try {
+        // We need to use a try/catch here because the callback may have been
+        // called after rclone has been closed.
+        if (error) {
+          if (!tracker) {
+            // Window is closing
+            return;
+          }
+          console.error("rclone error:", error);
+          if (RCLONE_ID != myId) error = false;
+          console.log({ RCLONE_ID, myId });
+          win.webContents.send("check_mount", { success: false, error });
 
-        return;
+          return;
+        }
+      } catch (e) {
+        // Do nothing
       }
 
       if (stderr) {

versioncheck.js

@@ -1,6 +1,4 @@
 const pkg = require("./package.json");
-const fetch = (...args) =>
-  import("node-fetch").then(({ default: fetch }) => fetch(...args));
 const compareVersions = require("compare-versions");
 global.version = pkg.version;
 

views/browse_include.twig

@@ -1,6 +1,6 @@
 <div class="card text-light bg-primary">
   <div class="card-header sticky" id="nav-panel">
-    <h4 class="float-left mb-0">
+    <h4 class="float-start mb-0">
       <a
         class="btn btn-md btn-primary"
         onclick="upDir()"
@@ -20,32 +20,33 @@
       </a>
       <span id="path"></span>
     </h4>
-    <h4 class="float-right mb-0">
+    <h4 class="float-end mb-0">
       <button
         class="btn btn-md btn-primary dropdown-toggle"
         type="button"
-        onclick="$id('bookmarksdropdown').toggle()"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
         <i class="fa fa-star" title="Bookmarks"></i>
       </button>
-      <div
+      <ul
         id="bookmarksdropdown"
         class="dropdown-menu"
         style="left: auto; top: auto"
       >
-        <div class="input-group">
+        <li class="input-group">
           <input
             id="bookmarkName"
-            class="ml-3"
+            class="ms-3"
             value=""
             placeholder="Bookmark name"
           >
-          <a class="btn btn-warning btn-sm mr-3" id="addBookmark">
+          <a class="btn btn-warning btn-sm me-3" id="addBookmark">
             <i class="fa fa-plus" title="Add current location"></i
           ></a>
-        </div>
+        </li>
         <hr>
-      </div>
+      </ul>
       <a
         class="btn btn-md btn-primary"
         onclick="refreshDir()"
@@ -55,36 +56,45 @@
       >
       <a
         class="btn btn-md btn-primary"
-        onclick="openSearch()"
+        onclick="toggleSearch()"
         title="(hotkey: ctrl+f)"
       >
         <i class="fa fa-search"></i> Search</a
       >
       <button
         class="btn btn-md btn-primary dropdown-toggle"
         type="button"
-        onclick="$id('searchdropdownmenu').toggle()"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
         <i class="fa fa-sort"></i> Sort By
       </button>
-      <div
-        id="searchdropdownmenu"
+      <ul
+        id="sortdropdownmenu"
         class="dropdown-menu"
         style="right: 0; left: auto; top: auto"
       >
-        <a class="dropdown-item" onclick="sortFiles('name', 1)">
-          <i class="fa fa-sort-alpha-asc"></i> Name</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('name', 0)">
-          <i class="fa fa-sort-alpha-desc"></i> Name (decending)</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('modified', 1)">
-          <i class="fa fa-sort-amount-asc"></i> Last modified</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('modified', 0)">
-          <i class="fa fa-sort-amount-desc"></i> Last modified (decending)</a
-        >
-      </div>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('name', 1)">
+            <i class="fa fa-sort-alpha-asc"></i> Name</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('name', 0)">
+            <i class="fa fa-sort-alpha-desc"></i> Name (decending)</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('modified', 1)">
+            <i class="fa fa-sort-amount-asc"></i> Last modified</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('modified', 0)">
+            <i class="fa fa-sort-amount-desc"></i> Last modified (decending)</a
+          >
+        </li>
+      </ul>
     </h4>
   </div>
   <div class="card-body">

views/css/main.css

@@ -40,7 +40,7 @@ a {
 .badge {
   text-shadow: none;
 }
-.badge-success {
+.bg-success {
   background: #5a4;
 }
 .alert-warning {
@@ -250,6 +250,16 @@ html {
   overflow-y: scroll;
 }
 
+.small,
+small {
+  font-size: 0.75em;
+}
+
+.form-check-input:checked {
+  background-color: #bfbfbf;
+  border-color: #bfbfbf;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 6pt;
@@ -366,3 +376,11 @@ html {
 #installedmodaldiv .modal-content {
   min-height: 700px;
 }
+
+#bookmarksdropdown a {
+  text-decoration: none;
+}
+
+#bookmarksdropdown a:hover {
+  text-decoration: underline;
+}

views/device_info.twig

@@ -20,8 +20,8 @@
       const danger = Math.min(5, Math.max(0, percent - 95));
 
       id('storageDiv').innerHTML = `
-      <small class="pull-left">Used: ${storage.used} of ${storage.size}(${storage.percent})</small>
-      <small class="pull-right">Free: ${storage.free}</small><br/>
+      <small class="float-start">Used: ${storage.used} of ${storage.size}(${storage.percent})</small>
+      <small class="float-end">Free: ${storage.free}</small><br/>
       <div class="progress">
         <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: ${success}%" aria-valuenow="${success}" aria-valuemin="0" aria-valuemax="100"></div>
         <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: ${warning}%" aria-valuenow="${warning}" aria-valuemin="0" aria-valuemax="100"></div>