GitSquared · geosp · Nov 2, 2020 · Nov 2, 2020 · Nov 4, 2020 · Nov 5, 2020
diff --git a/src/_boot.js b/src/_boot.js
@@ -189,6 +189,7 @@ function createWindow(settings) {
             nodeIntegration: true,
             nodeIntegrationInSubFrames: false,
             allowRunningInsecureContent: false,
+            webviewTag: true,
             experimentalFeatures: settings.experimentalFeatures || false
         }
     });

diff --git a/src/_renderer.js b/src/_renderer.js
@@ -341,16 +341,28 @@ async function getDisplayName() {
 
 // Create the UI's html structure and initialize the terminal client and the keyboard
 async function initUI() {
-    document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
+    document.body.innerHTML += `
+    <section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
     </section>
     <section id="main_shell" style="height:0%;width:0%;opacity:0;margin-bottom:30vh;" augmented-ui="bl-clip tr-clip exe">
         <h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
         <h1 id="main_shell_greeting"></h1>
     </section>
-    <section class="mod_column" id="mod_column_right">
-        <h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
-    </section>`;
+    <section class="mod_column" id="mod_column_right">        
+      <h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
+	   <div>
+          <webview id="mod_streaming" src="${(() => {
+            if( !window.settings.streamSource ) {
+               window.settings.streamSource = 'https://www.youtube.com/embed/9Auq9mYxFEE'
+            }
+            return window.settings.streamSource
+           })()
+          }">
+          </webview>
+      </div>
+    </section>
+    `;
 
     await _delay(10);
 
@@ -366,10 +378,10 @@ async function initUI() {
 
     document.getElementById("main_shell").setAttribute("style", "opacity: 0;");
     document.body.innerHTML += `
-    <section id="filesystem" style="width: 0px;" class="${window.settings.hideDotfiles ? "hideDotfiles" : ""} ${window.settings.fsListView ? "list-view" : ""}">
-    </section>
-    <section id="keyboard" style="opacity:0;">
-    </section>`;
+    <div style="display:flex;margin-right:auto;">
+        <section id="filesystem" style="width: 0px;" class="${window.settings.hideDotfiles ? "hideDotfiles" : ""} ${window.settings.fsListView ? "list-view" : ""}"></section>
+        <section id="keyboard" style="opacity:0;"></section>
+    </div>`;
     window.keyboard = new Keyboard({
         layout: path.join(keyboardsDir, settings.keyboard+".json"),
         container: "keyboard"
@@ -396,6 +408,7 @@ async function initUI() {
     document.getElementById("filesystem").setAttribute("style", "");
     document.getElementById("keyboard").setAttribute("style", "");
     document.getElementById("keyboard").setAttribute("class", "animation_state_1");
+
     window.audioManager.keyboard.play();
 
     await _delay(100);
@@ -486,6 +499,7 @@ async function initUI() {
     window.onmouseup = e => {
         if (window.keyboard.linkedToTerm) window.term[window.currentTerm].term.focus();
     };
+
     window.term[0].term.writeln("\033[1m"+`Welcome to eDEX-UI v${electron.remote.app.getVersion()} - Electron v${process.versions.electron}`+"\033[0m");
 
     await _delay(100);
@@ -496,7 +510,7 @@ async function initUI() {
 
     await _delay(200);
 
-    document.getElementById("filesystem").setAttribute("style", "opacity: 1;");
+    document.getElementById("filesystem").setAttribute("style", "opacity: 1;padding-left: 10px;");
 
     // Resend terminal CWD to fsDisp if we're hot reloading
     if (window.performance.navigation.type === 1) {
@@ -616,7 +630,8 @@ window.openSettings = async () => {
     new Modal({
         type: "custom",
         title: `Settings <i>(v${electron.remote.app.getVersion()})</i>`,
-        html: `<table id="settingsEditor">
+        html: `<div id="settingsEditorContainer">
+                <table id="settingsEditor">
                     <tr>
                         <th>Key</th>
                         <th>Description</th>
@@ -637,11 +652,26 @@ window.openSettings = async () => {
                         <td>Custom shell environment override</td>
                         <td><input type="text" id="settingsEditor-env" value="${window.settings.env}"></td>
                     </tr>
+                    <tr>
+                        <td>system</td>
+                        <td>System manufacturer</td>
+                        <td><input type="text" id="settingsEditor-manufacturer" value="${window.settings.systemManufacturer}"></td>
+                    </tr>
+                    <tr>
+                        <td>system</td>
+                        <td>System model</td>
+                        <td><input type="text" id="settingsEditor-model" value="${window.settings.systemModel}"></td>
+                    </tr>
                     <tr>
                         <td>username</td>
                         <td>Custom username to display at boot</td>
                         <td><input type="text" id="settingsEditor-username" value="${window.settings.username}"></td>
                     </tr>
+                    <tr>
+                        <td>streaming</td>
+                        <td>Video stream source</td>
+                        <td><input type="text" id="settingsEditor-streamSource" value="${window.settings.streamSource}"></td>
+                    </tr>
                     <tr>
                         <td>keyboard</td>
                         <td>On-screen keyboard layout code</td>
@@ -694,6 +724,14 @@ window.openSettings = async () => {
                         <td>IPv4 address to test Internet connectivity</td>
                         <td><input type="text" id="settingsEditor-pingAddr" value="${window.settings.pingAddr || "1.1.1.1"}"></td>
                     </tr>
+                    <tr>
+                        <td>mockAddr</td>
+                        <td>Mock IP address.</td>
+                        <td><select id="settingsEditor-mockAddr">
+                              <option>${!!window.settings.mockAddr}</option>
+                              <option>${!window.settings.mockAddr}</option>
+                        </select></td>
+                    </tr>
                     <tr>
                         <td>clockHours</td>
                         <td>Clock format (12/24 hours)</td>
@@ -790,6 +828,7 @@ window.openSettings = async () => {
                         </select></td>
                     </tr>
                 </table>
+                </div>
                 <h6 id="settingsEditorStatus">Loaded values from memory</h6>
                 <br>`,
         buttons: [
@@ -813,13 +852,17 @@ window.writeSettingsFile = () => {
         cwd: document.getElementById("settingsEditor-cwd").value,
         env: document.getElementById("settingsEditor-env").value,
         username: document.getElementById("settingsEditor-username").value,
+        systemManufacturer: document.getElementById("settingsEditor-manufacturer").value,
+        systemModel: document.getElementById("settingsEditor-model").value,
+        streamSource: document.getElementById("settingsEditor-streamSource").value,
         keyboard: document.getElementById("settingsEditor-keyboard").value,
         theme: document.getElementById("settingsEditor-theme").value,
         termFontSize: Number(document.getElementById("settingsEditor-termFontSize").value),
         audio: (document.getElementById("settingsEditor-audio").value === "true"),
         audioVolume: Number(document.getElementById("settingsEditor-audioVolume").value),
         disableFeedbackAudio: (document.getElementById("settingsEditor-disableFeedbackAudio").value === "true"),
         pingAddr: document.getElementById("settingsEditor-pingAddr").value,
+        mockAddr: document.getElementById("settingsEditor-mockAddr").value,
         clockHours: Number(document.getElementById("settingsEditor-clockHours").value),
         port: Number(document.getElementById("settingsEditor-port").value),
         monitor: Number(document.getElementById("settingsEditor-monitor").value),

diff --git a/src/assets/css/filesystem.css b/src/assets/css/filesystem.css
@@ -1,7 +1,7 @@
 section#filesystem {
     position: relative;
     top: -0.925vh;
-    width: 43vw;
+    width: 30vw;
     height: 30vh;
     margin-right: 0.5vw;
 
@@ -10,7 +10,7 @@ section#filesystem {
 }
 
 section#filesystem > h3.title {
-    width: 43vw;
+    width: 30vw;
     padding-right: 0;
 }
 
@@ -29,7 +29,7 @@ div#fs_disp_container {
     left: .35vw;
     top: 1.5vh;
     height: 25.5vh;
-    width: 43vw;
+    width: 30vw;
     overflow: auto;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8.5vh, 1fr));
@@ -210,7 +210,7 @@ div#fs_disp_container.disks+div#fs_space_bar > *:not(h1) {
 }
 
 div#fs_space_bar > h3 {
-    width: 30%;
+    width: 180px;
     margin: 0;
     display: inline-block;
     font-size: 1.4vh;
@@ -221,7 +221,7 @@ div#fs_space_bar > h3 {
 }
 
 div#fs_space_bar > progress {
-    width: 70%;
+    width: 79%;
     height: 2.2vh;
     padding-top: .5vh;
     -webkit-appearance: none;

diff --git a/src/assets/css/keyboard.css b/src/assets/css/keyboard.css
@@ -2,7 +2,7 @@ section#keyboard {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 55.5vw;
+    width: 50.5vw;
     position: relative;
     top: -0.925vh;
 }

diff --git a/src/assets/css/mod_globe.css b/src/assets/css/mod_globe.css
@@ -30,7 +30,7 @@ div#mod_globe_innercontainer {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 100%;
+    width: 95%;
 }
 
 div#mod_globe h1 {

diff --git a/src/assets/css/mod_streaming.css b/src/assets/css/mod_streaming.css
@@ -0,0 +1,26 @@
+webview#mod_streaming {
+   border-top: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
+   display: flex;
+   padding-bottom:2px;
+   padding-top:2px;
+   height: 22vh;
+}
+
+webview#mod_streaming::before {
+    content: "";
+    border-left: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
+    position: relative;
+    left: -0.092vh;
+    top: -0.6vh;
+    height: 0.833vh;
+}
+
+webview#mod_streaming::after {
+    content: "";
+    border-right: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
+    position: relative;
+    left: -0.092vh;
+    top: -0.6vh;
+    height: 0.833vh;
+}
+
diff --git a/src/assets/css/modal.css b/src/assets/css/modal.css
@@ -4,7 +4,7 @@ div.modal_popup {
     background: var(--color_light_black);
     border-color: rgb(var(--color_r), var(--color_g), var(--color_b));
     padding: 2vh;
-    padding-bottom: 0vh;
+    padding-bottom: 1vh;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -132,6 +132,11 @@ div.modal_popup table:not(#settingsEditor) td:first-child {
     text-align: center;
 }
 
+div#settingsEditorContainer {
+    height: 800px;
+    overflow-y: scroll;
+}
+
 div.modal_popup td input {
     width: 100%;
     background: var(--color_light_black);

diff --git a/src/assets/themes/tron-notype-colorfilter.json b/src/assets/themes/tron-notype-colorfilter.json
@@ -0,0 +1,35 @@
+{
+    "colors": {
+        "r": 170,
+        "g": 207,
+        "b": 209,
+        "black": "#000000",
+        "light_black": "#05080d",
+        "grey": "#262828"
+    },
+    "cssvars": {
+        "font_main": "United Sans Medium",
+        "font_main_light": "United Sans Light"
+    },
+    "terminal": {
+        "fontFamily": "Fira Mono",
+        "cursorStyle": "block",
+        "foreground": "#aacfd1",
+        "background": "#05080d",
+        "cursor": "#aacfd1",
+        "cursorAccent": "#aacfd1",
+        "selection": "rgba(170,207,209,0.3)",
+        "colorFilter": [
+         "rotate(180)",
+         "saturate(0.5)",
+         "mix(0.7)"
+        ]
+    },
+    "globe": {
+        "base": "#000000",
+        "marker": "#aacfd1",
+        "pin": "#aacfd1",
+        "satellite": "#aacfd1"
+    },
+    "injectCSS": "section#filesystem{left: 0;width:82vw} section#filesystem>h3.title, section#filesystem>div{width:82vw;padding-left:10px;} section#keyboard{display:none;}"
+}
diff --git a/src/assets/themes/tron-notype.json b/src/assets/themes/tron-notype.json
@@ -26,5 +26,5 @@
         "pin": "#aacfd1",
         "satellite": "#aacfd1"
     },
-    "injectCSS": "section#filesystem{left: 0;width:100vw} section#filesystem>h3.title, section#filesystem>div{width:100vw} section#keyboard{display:none;}"
+    "injectCSS": "section#filesystem{left: 0;width:82vw} section#filesystem>h3.title, section#filesystem>div{width:82vw;padding-left:10px;} section#keyboard{display:none;}"
 }
diff --git a/src/classes/filesystem.class.js b/src/classes/filesystem.class.js
@@ -519,7 +519,7 @@ class FilesystemDisplay {
 
             // See #226
             if (!isNaN(fsBlock.use)) {
-                this.space_bar.text.innerHTML = `Mount <strong>${displayMount}</strong> used <strong>${Math.round(fsBlock.use)}%</strong>`;
+                this.space_bar.text.innerHTML = `Mount <strong>${displayMount}</strong> Used <strong>${Math.round(fsBlock.use)}%</strong>`;
                 this.space_bar.bar.value = Math.round(fsBlock.use);
             } else if (!isNaN((fsBlock.size / fsBlock.used) * 100)) {
                 let usage = Math.round((fsBlock.size / fsBlock.used) * 100);

diff --git a/src/classes/hardwareInspector.class.js b/src/classes/hardwareInspector.class.js
@@ -31,8 +31,10 @@ class HardwareInspector {
     updateInfo() {
         window.si.system().then(d => {
             window.si.chassis().then(e => {
-                document.getElementById("mod_hardwareInspector_manufacturer").innerText = this._trimDataString(d.manufacturer);
-                document.getElementById("mod_hardwareInspector_model").innerText = this._trimDataString(d.model, d.manufacturer, e.type);
+                let manufacturer = getSetting('systemManufacturer', this._trimDataString(d.manufacturer), 'System manufacturer');
+                let model = getSetting('systemModel', this._trimDataString(d.model, d.manufacturer, e.type), 'System Product');
+                document.getElementById("mod_hardwareInspector_manufacturer").innerText = manufacturer;
+                document.getElementById("mod_hardwareInspector_model").innerText = model;
                 document.getElementById("mod_hardwareInspector_chassis").innerText = e.type;
             });
         });
@@ -46,6 +48,15 @@ class HardwareInspector {
     }
 }
 
+let getSetting = (name, value, defaultValue) => {
+    if (value === defaultValue && !window.settings[name]) {
+        value = window.settings[name] = 'Unknown'
+    } else {
+        value = window.settings[name]
+    }
+    return value
+}
+
 module.exports = {
     HardwareInspector
 };
diff --git a/src/classes/netstat.class.js b/src/classes/netstat.class.js
@@ -117,7 +117,7 @@ class Netstat {
                                 };
 
                                 let ip = this.ipinfo.ip;
-                                document.querySelector("#mod_netstat_innercontainer > div:nth-child(2) > h2").innerHTML = window._escapeHtml(ip);
+                                document.querySelector("#mod_netstat_innercontainer > div:nth-child(2) > h2").innerHTML = window._escapeHtml(window.settings.mockAddr ? mockIp() : ip);
 
                                 this.runsBeforeGeoIPUpdate = 10;
                             } catch(e) {
@@ -179,6 +179,9 @@ class Netstat {
     }
 }
 
+let getIpNumber = () => (Math.floor(Math.random() * 255) + 1)
+let mockIp = () => `${getIpNumber()}.${getIpNumber()}.${getIpNumber()}.${getIpNumber()}`
+
 module.exports = {
     Netstat
 };
diff --git a/src/ui.html b/src/ui.html
@@ -25,6 +25,7 @@
         <link rel="stylesheet" href="assets/css/mod_netstat.css" />
         <link rel="stylesheet" href="assets/css/mod_conninfo.css" />
         <link rel="stylesheet" href="assets/css/mod_globe.css" />
+        <link rel="stylesheet" href="assets/css/mod_streaming.css" />
         <link rel="stylesheet" href="assets/css/mod_ramwatcher.css" />
         <link rel="stylesheet" href="assets/css/mod_toplist.css" />
         <link rel="stylesheet" href="assets/css/mod_fuzzyFinder.css" />