working os integration

app/package.json

@@ -30,5 +30,8 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ]
+  ],
+  "browser":{
+    "child_process": false
+  }  
 }

app/src/background.js

@@ -13,8 +13,15 @@ protocol.registerSchemesAsPrivileged([
 async function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 720,
+    minWidth: 720,
+    height: 700,
+    autoHideMenuBar: true,
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      color: '#1C1B1F',
+      symbolColor: '#8867c0'
+    },
     webPreferences: {
 
       // Use pluginOptions.nodeIntegration, leave this alone

app/src/components/home/information.vue

@@ -1,35 +1,84 @@
 <template>
-<div class="card section bg-base-300 shadow-xl">
-  <div class="card-body">
+  <div>
+    <div role="alert" class="alert alert-error">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6 shrink-0 stroke-current"
+        fill="none"
+        viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span>
+        <h2 class="font-bold text-lg">One or more issues occurred while starting SCRCPY+</h2>
+        <p>{{ errors?.join('\n\n') }}</p>
+      </span>
+    </div>
+
+    <div class="card section bg-base-300 shadow-xl">
+      <div class="card-body">
 
-    <div class="flex">
-        <img alt="Vue logo" src="@/assets/logo.png" class="mr-8" style="width: 5em;">
-        <div>
-            <h2 class="card-title">SCRCPY+ <span class="accent-text">{{ scrcpyPlusVersion }}</span></h2>
-            <p>SCRCPY <span class="accent-text">{{ scrcpyPlusVersion }}</span></p>
-            <p>ADB <span class="accent-text">{{ scrcpyPlusVersion }}</span></p>
+        <div class="flex">
+            <img alt="Vue logo" src="@/assets/logo.png" class="mr-8" style="width: 5em;">
+            <div>
+                <h2 class="card-title">SCRCPY+ <span class="accent-text">{{ version.scrcpyplus }}</span></h2>
+                <p>SCRCPY <span class="accent-text">{{ version.scrcpy }}</span></p>
+                <p>ADB <span class="accent-text">{{ version.adb }}</span></p>
+            </div>
         </div>
-    </div>
 
-    <div class="card-actions justify-end">
-      <button class="btn btn-ghost">Join the Discord</button>
-      <router-link to="/settings">
-        <button class="btn btn-primary">Settings</button>
-      </router-link>
+        <div class="card-actions justify-end">
+          <button class="btn btn-ghost">Join the Discord</button>
+          <router-link to="/settings">
+            <button class="btn btn-primary">Settings</button>
+          </router-link>
+        </div>
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      scrcpyPlusVersion: this.$version
+      version: {
+        scrcpyplus: this.$version,
+        scrcpy: null,
+        adb: null,
+        errors: new Array()
+      }
+    }
+  },
+  methods: {
+    async detectVersions() {
+      let errors = new Array();
+      const adb = await this.$spb.execute('adb --version')
+      .then(data => {
+        return data.split('\n')[1].split(" ")[1].trim();
+      })
+      .catch(e => {
+        errors.push(e);
+        return false;
+      });
+      const scrcpy = await this.$spb.execute('scrcpy --version')
+      .then(data => {
+        return data.split('\n')[0].split(" ")[1].trim();
+      })
+      .catch(e => {
+        errors.push(e);
+        return false;
+      });
+      this.version.adb = adb;
+      this.version.scrcpy = scrcpy;
+      this.errors = errors;
     }
   },
   mounted() {
-    this.$spb.execute('test');
+    this.detectVersions();
   }
 }
 </script>

app/src/plugins/scrcpy-plus-bridge.js

@@ -1,5 +1,13 @@
-function execute(data) {
-  console.log(data)
+//---   Execute Function   ---//
+const { exec } = require("child_process");
+function execute(cmd) {
+  return new Promise((resolve, reject) => {
+    exec(cmd, (error, stdout, stderr) => {
+        if (error || stderr) reject(error || stderr);
+        resolve(stdout);
+      }
+    );
+  });
 }
 
 // This file is the 'SCRCPY Plus Bridge' that bridges the electron app to the host system, be it Windows, Linux or MacOS.

app/vue.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    pluginOptions: {
+        electronBuilder: {
+            nodeIntegration: true
+        }
+    }
+}