Update SpiderADB, fix site build

octospacc · Apr 16, 2024 · eecdf1f · eecdf1f
1 parent aced338
commit eecdf1f
Show file tree

Hide file tree

Showing 23 changed files with 207 additions and 80 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,6 @@
+*.bak
 node_modules/
+/public/a/
+/public/s/
+/public/SpiderADB/
+/public/WuppiMini/
diff --git a/Build.sh b/Build.sh
@@ -1,21 +1,12 @@
 #!/bin/sh
-for App in WuppiMini
+for App in SpiderADB WuppiMini
 do
 	mkdir -p ./public/${App}
 	cd ./src/${App}
-	npm update
-	npm install
-	node ./index.js html
-	cp ./index.js ./index.html ./node_modules/SpaccDotWeb/SpaccDotWeb.Server.js ../../public/${App}/
-	cd ../..
-done
-for App in SpiderADB
-do
-	mkdir -p ./public/${App}
-	cd ./src/${App}
-	sh ./Prepare.sh
+	sh ./Requirements.sh
 	cp -r $(sh ./Build.sh) ../../public/${App}/
 	cd ../..
 done
+cp -r ./shared ./public/shared
 cd ./public
 node ../WriteRedirectPages.js
diff --git a/public/.gitignore b/public/.gitignore
diff --git a/public/Collections/index.html b/public/Collections/index.html
@@ -13,7 +13,7 @@
 	<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"/>
 	<link href="../Assets/CSS/Dark.css" rel="stylesheet"/>
 	<script src="../Assets/JS/RandomGIF.js"></script>
-	<script src="../Assets/JS/Global.js"></script>
+	<script src="../../shared/OctoHub-Global.js"></script>
 	<style>
 		.form > * { margin: 4px; }
 		#SitesList, #PostsListMain { text-align: left; }

diff --git a/public/Ecoji/index.html b/public/Ecoji/index.html
@@ -21,7 +21,7 @@
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<link rel="manifest" href="manifest.json">
-		<script src="../Assets/JS/Global.js"></script>
+		<script src="../../shared/OctoHub-Global.js"></script>
 		<style>
 @Media (Prefers-Color-Scheme: Light) {
 	Body, TextArea {

diff --git a/public/FramesBrowser/index.html b/public/FramesBrowser/index.html
@@ -92,7 +92,7 @@
 				padding: 8px;
 			}
 		</style>
-		<script src="../Assets/JS/Global.js"></script>
+		<script src="../../shared/OctoHub-Global.js"></script>
 	</head>
 	<body>
 		<button id="BtnFullscreen" onclick="ToggleFullscreen()">🎞️ Menu</button>

diff --git a/public/HashyMagnet/index.html b/public/HashyMagnet/index.html
@@ -12,7 +12,7 @@
 	<link href="Bubbles.css" rel="stylesheet"/>
 	<link rel="shortcut icon" type="image/x-icon" href="../favicon.png"/>
 	<link rel="manifest" href="./manifest.json"/>
-	<script src="../Assets/JS/Global.js"></script>
+	<script src="../../shared/OctoHub-Global.js"></script>
 <style>
 Body {
 	Color: #FFFFFF;

diff --git a/public/MBViewer/index.html b/public/MBViewer/index.html
@@ -38,7 +38,7 @@
 		<link rel="stylesheet" media="screen" href="css/telegram-web.css"/>
 		<link rel="stylesheet" media="screen" href="css/MBViewer.css"/>
 		<link rel="stylesheet" media="print" href="css/print.css"/>
-		<script src="../Assets/JS/Global.js"></script>
+		<script src="../../shared/OctoHub-Global.js"></script>
 	</head>
 	<body class="widget_frame_base tgme_webpreview emoji_image thin_box_shadow tme_mode no_transitions">
 		<div class="tgme_background_wrap">

diff --git a/public/MatrixStickerHelper/index.html b/public/MatrixStickerHelper/index.html
@@ -3,7 +3,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>🃏️ [Matrix] Sticker Helper</title>
 
-<script src="../Assets/JS/Global.js"></script>
+<script src="../../shared/OctoHub-Global.js"></script>
 <script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- offline -->
 <script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script><!-- online -->
 <link rel="stylesheet" href="./paper.min.css"/>

diff --git a/public/Userscripts/index.html b/public/Userscripts/index.html
@@ -13,7 +13,7 @@
 	<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"/>
 	<link href="../Assets/CSS/Dark.css" rel="stylesheet"/>
 	<script src="../Assets/JS/RandomGIF.js"></script>
-	<script src="../Assets/JS/Global.js"></script>
+	<script src="../../shared/OctoHub-Global.js"></script>
 </head>
 <body>
 	<div class="Content" style="text-align: center;">

diff --git a/public/index.html b/public/index.html
@@ -15,7 +15,7 @@
 	<link href="./Assets/CSS/Dark.css" rel="stylesheet"/>
 	<script src="./Assets/JS/RandomGIF.js"></script>
 	<script src="./Assets/JS/CurrentAge.js"></script>
-	<script src="./Assets/JS/Global.js"></script>
+	<script src="../shared/OctoHub-Global.js"></script>
 </head>
 <body>
 	<div id="ConfettiCanvas"></div>

diff --git a/public/Assets/JS/Global.js → shared/OctoHub-Global.js b/public/Assets/JS/Global.js → shared/OctoHub-Global.js
diff --git a/src/SpiderADB/Build.sh b/src/SpiderADB/Build.sh
diff --git a/src/SpiderADB/Requirements.sh b/src/SpiderADB/Requirements.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+npm update
+npm install
+yes | npx esbuild
diff --git a/src/SpiderADB/SpiderADB.js b/src/SpiderADB/SpiderADB.js
@@ -1,13 +1,46 @@
-import * as Adb from "../../node_modules/@yume-chan/adb/esm/index.js";
-import * as AdbDaemonWebUsb from "../../node_modules/@yume-chan/adb-daemon-webusb/esm/index.js";
-import AdbWebCredentialStore from "../../node_modules/@yume-chan/adb-credential-web/esm/index.js";
-//window.WebADB = { Adb, AdbDaemonWebUsb, AdbWebCredentialStore };
+import * as Adb from '@yume-chan/adb';
+import * as AdbDaemonWebUsb from '@yume-chan/adb-daemon-webusb';
+import AdbWebCredentialStore from '@yume-chan/adb-credential-web';
+import { DecodeUtf8Stream } from '@yume-chan/stream-extra';
+
+// TODO:
+// * warning on fail to claim USB interface (it may be because of other tabs, or a local adb server)
+// * warn or gracefully handle debug permission not granted
+// * package manager with install/uninstall/dump, debloat tool with default list and import/export
+// * fastboot shell and tools? possible?
 
 (async function(){
 
 const deviceSelect = $('select$deviceSelect$');
 const deviceConnect = $('button$deviceConnect$');
+const terminalOutput = $('textarea$terminalOutput$');
+
+function resizeTerminal () {
+	terminalOutput.style.height = `${window.innerHeight - ((48 + 8) * 4)}px`;
+}
+resizeTerminal();
+
+window.addEventListener('resize', (function(){
+	resizeTerminal();
+}));
+
+$('input$terminalInput$').addEventListener('keydown', (async function(event){
+	if (event.keyCode == 13) { // Enter
+		const cmd = $('input$terminalInput$').value;
+		terminalOutput.textContent += (cmd + '\n');
+		const process = await Device.adb.subprocess.spawn(cmd);
+		await process.stdout.pipeThrough(new DecodeUtf8Stream()).pipeTo(
+			new WritableStream({ write(chunk) {
+				terminalOutput.textContent += chunk;
+				terminalOutput.scrollTop = terminalOutput.scrollHeight;
+			} }),
+		);
+		terminalOutput.textContent += '\n> ';
+		$('input$terminalInput$').value = null;
+	};
+}));
 
+let Device = {};
 const CredentialStore = new AdbWebCredentialStore();
 
 const UsbManager = AdbDaemonWebUsb.AdbDaemonWebUsbDeviceManager.BROWSER;
@@ -16,7 +49,7 @@ if (!UsbManager) {
 		<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/USB#browser_compatibility">WebUSB is not supported</a> in this browser, so the app cannot work.
 		Consider using an <a target="_blank" href="https://chromium.woolyss.com">up-to-date Chromium-based</a> one.
 	</p><p>
-		Alternatively, these alternative ADB solutions might work for you:
+		Otherwise, the following alternative ADB solutions might work for you:
 	</p><ul>
 		<li><a target="_blank" href="https://www.makeuseof.com/use-adb-over-wifi-android/">
 			How to Set Up and Use ADB Wirelessly With Android
@@ -28,17 +61,41 @@ if (!UsbManager) {
 			LADB — Local ADB Shell
 		</a></li>
 	</ul>`;
-	return;
+	return; // kill the app
 }
 
-new AdbDaemonWebUsb.AdbDaemonWebUsbDeviceWatcher(refreshDeviceSection, navigator.usb);
+new AdbDaemonWebUsb.AdbDaemonWebUsbDeviceWatcher((async function(connectedDevice){
+	if (!connectedDevice) {
+		await disconnectDevice();
+	}
+	await refreshDeviceSection();
+}), navigator.usb);
 
 async function connectAuthorizeDevice () {
+	if (deviceSelect.selectedIndex > 0) {
+		Device.device = await getDevice();
+		try {
+			Device.connection = await Device.device.connect();
+			Device.transport = await Adb.AdbDaemonTransport.authenticate({ connection: Device.connection, credentialStore: CredentialStore });
+			Device.adb = new Adb.Adb(Device.transport);
+		} catch (err) {
+			$('[name="deviceStatus"]').innerHTML = 'An error occurred while trying to establish a device connection. Please ensure that no other processes or browser tabs on this system are currently using the device, then retry.';
+		}
+	}
+}
+
+async function getDevice () {
 	const devices = await UsbManager.getDevices();
-	const connection = await devices[deviceSelect.selectedIndex - 1].connect();
-	const transport = await Adb.AdbDaemonTransport.authenticate({ connection, credentialStore: CredentialStore });
-	const adb = new Adb.Adb(transport);
-	$('$androidVersion$').innerHTML = `<b>Android version</b>: ${await adb.getProp("ro.build.version.release")}`;
+	const device = devices[deviceSelect.selectedIndex - 1];
+	return device;
+}
+
+function disconnectDevice () {
+	const connection = (Device.adb || Device.transport || Device.connection);
+	if (connection) {
+		Device = {};
+		return connection.close();
+	}
 }
 
 async function refreshDeviceSelect () {
@@ -52,24 +109,51 @@ async function refreshDeviceSelect () {
 			deviceOption.textContent = `${device.raw.productName} [${device.raw.serialNumber}]`;
 			deviceSelect.appendChild(deviceOption);
 		});
-		deviceSelect.onchange = refreshDeviceInfo;
+		deviceSelect.onchange = onSwitchDevice;
 		deviceSelect.disabled = false;
 	} else {
 		deviceSelect.innerHTML = '<option>[📵️ No connected devices]</option>';
 	}
 }
 
+async function onSwitchDevice () {
+	await disconnectDevice();
+	await connectAuthorizeDevice();
+	await refreshDeviceInfo();
+}
+
 async function refreshDeviceInfo () {
 	if (deviceSelect.selectedIndex > 0) {
-		const devices = await UsbManager.getDevices();
-		const device = devices[deviceSelect.selectedIndex - 1];
+		const device = await getDevice();
 		$('$deviceOem$').innerHTML = `<b>Brand</b>: ${device.raw.manufacturerName}`;
 		$('$deviceModel$').innerHTML = `<b>Model</b>: ${device.raw.productName}`;
 		$('$deviceSerial$').innerHTML = `<b>Serial number</b>: ${device.raw.serialNumber}`;
 		//$('[name="deviceStatus"]').innerHTML = 'Connected to device.';
+		//$('$deviceInfo$').hidden = false;
+		if (Device.adb) {
+			$('$deviceStatus$').innerHTML = null;
+			// $('$devicePropDump$').innerHTML = null;
+			$('$androidVersion$').innerHTML = `<b>Android version</b>: ${await Device.adb.getProp('ro.build.version.release')}`;
+			$('$androidApi$').innerHTML = `<b>API version</b>: ${await Device.adb.getProp('ro.build.version.sdk')}`;
+			$('$androidInfo$').hidden = false;
+			$('$connectReminder$').hidden = true;
+			terminalOutput.disabled = false;
+			terminalOutput.textContent += '> ';
+			$('input$terminalInput$').disabled = false;
+			/* for (const line of (await Device.adb.getProp()).split('\n')) {
+				const elem = document.createElement('li');
+				elem.textContent = line;
+				$('$devicePropDump$').appendChild(elem);
+			} */
+		} else {
+			$('$deviceInfo$').hidden = true;
+		}
 		$('$deviceInfo$').hidden = false;
 	} else {
-		//$('[name="deviceStatus"]').innerHTML = null;
+		$('$deviceStatus$').innerHTML = null;
+		$('$connectReminder$').hidden = false;
+		terminalOutput.disabled = true;
+		$('input$terminalInput$').disabled = true;
 		$('$deviceInfo$').hidden = true;
 	}
 }
@@ -85,10 +169,10 @@ deviceConnect.onclick = (async function(){
 	if (!device) {
 		return;
 	}
+	await disconnectDevice();
 	await refreshDeviceSection();
 	deviceSelect.selectedIndex = (deviceSelect.children.length - 1);
 	deviceSelect.onchange();
-	await connectAuthorizeDevice();
 });
 deviceConnect.disabled = false;
 

diff --git a/src/SpiderADB/holo-web/holo-extra-octt.css b/src/SpiderADB/holo-web/holo-extra-octt.css
@@ -54,28 +54,30 @@ a[data-action-section] {
 
 /* https://github.com/ZMYaro/holo-web/issues/1#issuecomment-12778881 */
 input[type="text"] {
-    background: transparent;
-    border-width: 0 0 1px;
-    border-color: #7F7F7F;
-    border-style: solid;
-    line-height: 36px;
-    padding: 0px 4px;
-    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
-    width: 200px;
-    position: relative;
-    display: block;
-    height: 32px;
-    margin: 6px;
+	background: transparent;
+	color: white;
+	border-width: 0 0 1px;
+	border-color: #7F7F7F;
+	border-style: solid;
+	line-height: 36px;
+	padding: 0px 4px;
+	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
+	width: 200px;
+	position: relative;
+	display: block;
+	height: 32px;
+	margin: 6px;
 }
 textarea {
-    background: transparent;
-    border-width: 0 0 1px;
-    border-color: #7F7F7F;
-    border-style: solid;
-    padding: 4px 4px;
-    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
-    width: 250px;
-    height: 100px;
-    position: relative;
-    margin: 6px;
+	background: transparent;
+	color: white;
+	border-width: 0 0 1px;
+	border-color: #7F7F7F;
+	border-style: solid;
+	padding: 4px 4px;
+	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
+	width: 250px;
+	height: 100px;
+	position: relative;
+	margin: 6px;
 }
diff --git a/src/SpiderADB/holo-web/holo-extra-octt.js b/src/SpiderADB/holo-web/holo-extra-octt.js
@@ -24,6 +24,7 @@ $('::[data-action-section]').forEach(function(actionSectionElem){
 			sectionElem.dataset.open = false;
 		});
 		sectionTargetElem.dataset.open = 'open';
+		location.hash = `/${sectionTargetName}`;
 		refreshDisplaySections(sectionTargetName);
 	}));
 });
@@ -39,4 +40,9 @@ function refreshDisplaySections (sectionTargetName) {
 }
 refreshDisplaySections();
 
+var sectionHash = location.hash.slice(2).split('/')[0];
+if (sectionHash) {
+	$(`[data-action-section="${sectionHash}"]`).click();
+}
+
 }));