Show server locations in verbose mode (#92)

Author: rizaljamhari

source/api.tsx

@@ -1,13 +1,13 @@
 import {isDeepStrictEqual} from 'node:util';
-import puppeteer from 'puppeteer';
+import {launch, type Page} from 'puppeteer';
 import {delay} from 'unicorn-magic';
 import {type SpeedData, type SpeedUnit} from './types.js';
 
 type Options = {
 	measureUpload?: boolean;
 };
 
-async function * monitorSpeed(page: puppeteer.Page, options?: Options): AsyncGenerator<SpeedData, void, undefined> {
+async function * monitorSpeed(page: Page, options?: Options): AsyncGenerator<SpeedData, void, undefined> {
 	let previousResult: SpeedData | undefined;
 
 	while (true) {
@@ -25,6 +25,7 @@ async function * monitorSpeed(page: puppeteer.Page, options?: Options): AsyncGen
 				latency: Number($('#latency-value')?.textContent?.trim()) || 0,
 				bufferBloat: Number($('#bufferbloat-value')?.textContent?.trim()) || 0,
 				userLocation: $('#user-location')?.textContent?.trim() ?? '',
+				serverLocations: $('#server-locations')?.textContent?.split('|').map(location => location.trim()).filter(Boolean) ?? [],
 				userIp: $('#user-ip')?.textContent?.trim() ?? '',
 				isDone: Boolean($('#speed-value.succeeded') && $('#upload-value.succeeded')),
 			};
@@ -46,7 +47,7 @@ async function * monitorSpeed(page: puppeteer.Page, options?: Options): AsyncGen
 }
 
 export default async function * api(options?: Options): AsyncGenerator<SpeedData, void, undefined> {
-	const browser = await puppeteer.launch({
+	const browser = await launch({
 		args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
 		headless: true,
 	});

source/types.ts

@@ -10,6 +10,7 @@ export type SpeedData = {
 	readonly latency: number;
 	readonly bufferBloat: number;
 	readonly userLocation: string;
+	readonly serverLocations: string[];
 	readonly userIp: string;
 	readonly isDone: boolean;
 };

source/ui.tsx

@@ -127,7 +127,22 @@ const VerboseInfo: React.FC<VerboseInfoProperties> = ({data, singleLine}) => {
 						<Text dimColor>Detecting...</Text>
 					)}
 				</Box>
+				<Box>
+					<Text><FixedSpacer size={4}/></Text>
+					<Text dimColor>Server: </Text>
+					{data.serverLocations ? (
+						data.serverLocations.map((location, index) => (
+							<Text key={location}>
+								{index > 0 && <Text dimColor>{' | '}</Text>}
+								<Text color='white'>{location}</Text>
+							</Text>
+						))
+					) : (
+						<Text dimColor>Detecting...</Text>
+					)}
+				</Box>
 			</Box>
+
 		</>
 	);
 };
@@ -170,6 +185,10 @@ function formatVerboseText(data: PartialSpeedData): string[] {
 		lines.push(clientLine);
 	}
 
+	if (data.serverLocations?.length) {
+		lines.push(`Server: ${data.serverLocations.join(' | ')}`);
+	}
+
 	return lines;
 }
 
@@ -184,6 +203,7 @@ function createJsonOutput(data: PartialSpeedData, upload: boolean) {
 		latency: data.latency,
 		bufferBloat: data.bufferBloat,
 		userLocation: data.userLocation,
+		serverLocations: data.serverLocations,
 		userIp: data.userIp,
 	};
 }

test.tsx

@@ -22,6 +22,7 @@ test('json output', async t => {
 	t.is(typeof data.downloadSpeed, 'number');
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 	t.regex(data.downloadUnit, /^[MGKB]bps$/);
+	t.true(Array.isArray(data.serverLocations));
 });
 
 test('upload flag', async t => {
@@ -64,6 +65,9 @@ test('verbose flag', async t => {
 
 	// Should contain client information
 	t.regex(stdout, /Client:/);
+
+	// Should contain server information
+	t.regex(stdout, /Server:/);
 });
 
 test('verbose flag in help', async t => {