whattheduck: Fix local config, fix camera container background color

Author: bperel

apps/whattheduck/README.md

@@ -11,3 +11,10 @@
   - The DM Web interface
   - The DM API
   - The native WTD Android app.
+
+### Android dev (WebSocket)
+
+The `dev:android` script loads the app from the dev server (HTTP), so WebSocket connections (`ws://`) work via `server.url` on the same network. Prerequisites:
+
+1. Start the API (e.g. "Debug DM API + WTD Android" compound, or `pnpm dev:whattheduck` in another terminal)
+2. Run: `pnpm dev:whattheduck:android` or `pnpm dev:android`

apps/whattheduck/android/app/src/debug/res/values/strings.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
 <resources>
-    <string name="app_name">What The Duck (Debug)</string>
-    <string name="title_activity_main">What The Duck (Debug)</string>
-</resources>
+    <string name="app_name">_What The Duck</string>
+    <string name="title_activity_main">_What The Duck</string>
+</resources>

apps/whattheduck/android/app/src/main/assets/capacitor.config.json

@@ -2,13 +2,16 @@
 	"appId": "net.ducksmanager.whattheduck",
 	"appName": "What The Duck",
 	"webDir": "dist",
+	"server": {
+		"url": "http://192.168.1.147:8008",
+		"cleartext": true,
+		"androidScheme": "http"
+	},
 	"android": {
-		"webContentsDebuggingEnabled": true
+		"webContentsDebuggingEnabled": true,
+		"allowMixedContent": true
 	},
 	"ios": {
 		"scheme": "What The Duck"
-	},
-	"server": {
-		"url": "http://192.168.1.147:8008"
 	}
-}
+}

apps/whattheduck/capacitor.config.ts

@@ -11,17 +11,18 @@ function getLocalIP(): string {
   }
 }
 
-const isDev = process.env.NODE_ENV === 'local';
+const isDev = process.env.NODE_ENV !== 'production';
 
 const config: CapacitorConfig = {
   appId: 'net.ducksmanager.whattheduck',
   appName: 'What The Duck',
   webDir: 'dist',
-  // Only set server URL in development mode
+  // Only set server URL in development mode (so cap sync copies it to android)
   ...(isDev && {
     server: {
       url: `http://${getLocalIP()}:8008`,
       cleartext: true,
+      androidScheme: 'http',
     },
   }),
   android: {
@@ -30,6 +31,7 @@ const config: CapacitorConfig = {
       keystoreAlias: 'whattheduck',
     },
     webContentsDebuggingEnabled: true,
+    ...(isDev && { allowMixedContent: true }),
   },
   ios: {
     scheme: 'What The Duck',

apps/whattheduck/package.json

@@ -10,9 +10,9 @@
     "optimize-splash-images": "bun run scripts/optimize-splash.ts",
     "dev": "pnpm cap:update && pnpm dev:server",
     "dev:server": "concurrently -n vite,vue-tsc \"vite --port 8008 --host\" \"vue-tsc --noEmit --watch\"",
-    "dev:android": "pnpm cap:update && pnpm update-android-capacitor-config && concurrently --kill-others-on-fail -n set-android-socket-url,android,dev \"pnpm set-android-socket-url\" \"ionic cap run android --external --target Pixel_3_API_31 --public-host=`ipconfig getifaddr en0`\" \"pnpm dev:server\"",
+    "dev:android": "bun run scripts/dev-android.ts",
     "lint": "eslint --fix .",
-    "set-android-socket-url": "echo VITE_DM_SOCKET_URL_NATIVE=http://`ipconfig getifaddr en0`:3001 > .env.local",
+    "set-android-socket-url": "bun run scripts/set-android-socket-url.ts",
     "update-android-capacitor-config": "bun run scripts/update-android-capacitor-config.ts",
     "build": "vite build && vue-tsc --noEmit && pnpm sentry:sourcemaps && pnpm cleanup-sourcemaps",
     "cleanup-sourcemaps": "find dist -name '*.map' -type f -delete",

apps/whattheduck/scripts/dev-android.ts

@@ -0,0 +1,41 @@
+#!/usr/bin/env bun
+
+import { execSync } from 'child_process';
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+const API_PORT = 3001;
+
+async function main() {
+  const scriptDir = join(import.meta.dir, '..');
+
+  console.log('Waiting for API on port 3001...');
+  execSync("pnpm -F '~api' exec wait-on -l tcp:3001", {
+    cwd: join(scriptDir, '../..'),
+    stdio: 'inherit',
+  });
+
+  const ip = execSync('ipconfig getifaddr en0', { encoding: 'utf-8' }).trim();
+  const socketUrl = `http://${ip}:${API_PORT}`;
+
+  console.log(`✓ Using socket URL: ${socketUrl}`);
+
+  writeFileSync(join(scriptDir, '.env.local'), `VITE_DM_SOCKET_URL_NATIVE=${socketUrl}\n`);
+
+  const { spawn } = await import('child_process');
+  const cmd =
+    'pnpm cap:update && pnpm update-android-capacitor-config && concurrently --kill-others-on-fail -n android,dev "ionic cap run android --external --target Pixel_3_API_31 --public-host=$(ipconfig getifaddr en0)" "pnpm dev:server"';
+  const dev = spawn('sh', ['-c', cmd], {
+    cwd: scriptDir,
+    stdio: 'inherit',
+  });
+
+  dev.on('exit', (code) => {
+    process.exit(code ?? 0);
+  });
+}
+
+main().catch((err) => {
+  console.error('✗', err.message);
+  process.exit(1);
+});

apps/whattheduck/scripts/set-android-socket-url.ts

@@ -0,0 +1,22 @@
+#!/usr/bin/env bun
+
+import { execSync } from 'child_process';
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+function getFallbackUrl(): string {
+  const ip = execSync('ipconfig getifaddr en0', { encoding: 'utf-8' }).trim();
+  return `http://${ip}:3001`;
+}
+
+async function main() {
+  const socketUrl = process.env.DM_SOCKET_URL_NATIVE_HTTPS ?? getFallbackUrl();
+
+  const envLocalPath = join(import.meta.dir, '../.env.local');
+  writeFileSync(envLocalPath, `VITE_DM_SOCKET_URL_NATIVE=${socketUrl}\n`);
+}
+
+main().catch((err) => {
+  console.error('✗', err.message);
+  process.exit(1);
+});

apps/whattheduck/scripts/update-android-capacitor-config.ts

@@ -29,7 +29,10 @@ try {
   const config = JSON.parse(readFileSync(androidConfigPath, 'utf-8'));
   config.server = {
     url: serverUrl,
+    cleartext: true,
+    androidScheme: 'http',
   };
+  config.android = { ...config.android, allowMixedContent: true };
   writeFileSync(androidConfigPath, JSON.stringify(config, null, '\t') + '\n');
   console.log('✓ Android capacitor.config.json updated successfully');
 } catch (error) {

apps/whattheduck/src/components/CameraPreviewOverlay.vue

@@ -1,4 +1,27 @@
 <template>
+  <div v-if="boundingClientRect" id="camera-bg-overlays" aria-hidden="true">
+    <div class="camera-bg-overlay camera-bg-top" :style="{ height: `${boundingClientRect.y}px` }" />
+    <div
+      class="camera-bg-overlay camera-bg-bottom"
+      :style="{ top: `${boundingClientRect.y + boundingClientRect.height}px` }"
+    />
+    <div
+      class="camera-bg-overlay camera-bg-left"
+      :style="{
+        top: `${boundingClientRect.y}px`,
+        width: `${boundingClientRect.x}px`,
+        height: `${boundingClientRect.height}px`,
+      }"
+    />
+    <div
+      class="camera-bg-overlay camera-bg-right"
+      :style="{
+        top: `${boundingClientRect.y}px`,
+        left: `${boundingClientRect.x + boundingClientRect.width}px`,
+        height: `${boundingClientRect.height}px`,
+      }"
+    />
+  </div>
   <div id="camera-preview" ref="cameraPreview"></div>
   <ion-row id="overlay" ref="overlay" :class="{ portrait: isPortrait, landscape: !isPortrait }">
     <ion-button ref="takePhotoButton" size="large" :disabled="isSearching" @click="takePhoto()">
@@ -134,6 +157,38 @@ watch([overlayHeight, currentRatioIndex], async () => {
 </script>
 
 <style scoped>
+#camera-bg-overlays {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  pointer-events: none;
+}
+
+.camera-bg-overlay {
+  position: absolute;
+  background: var(--dm-background-color);
+}
+
+.camera-bg-top {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.camera-bg-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.camera-bg-left {
+  left: 0;
+}
+
+.camera-bg-right {
+  right: 0;
+}
+
 #camera-preview,
 #overlay {
   display: flex;
@@ -161,6 +216,7 @@ watch([overlayHeight, currentRatioIndex], async () => {
 }
 #overlay {
   position: absolute;
+  background: var(--dm-background-color);
   &.portrait {
     bottom: 1rem;
     height: 4rem;

apps/whattheduck/src/theme/variables.scss

@@ -15,6 +15,8 @@ $dmConditions: (
   --ion-margin: 48px;
   --ion-background-color: #303030;
   --ion-background-color-rgb: 48,48,48;
+  /* App background, not overridden when camera preview is active */
+  --dm-background-color: #303030;
 
   --ion-text-color: #ffffff;
   --ion-text-color-rgb: 255,255,255;
@@ -195,6 +197,7 @@ $dmConditions: (
   .ios body {
     --ion-background-color: #000000;
     --ion-background-color-rgb: 0, 0, 0;
+    --dm-background-color: #000000;
 
     --ion-text-color: white;
     --ion-text-color-rgb: 255, 255, 255;
@@ -238,6 +241,7 @@ $dmConditions: (
   .md body {
     --ion-background-color: #121212;
     --ion-background-color-rgb: 18, 18, 18;
+    --dm-background-color: #121212;
 
     --ion-text-color: white;
     --ion-text-color-rgb: 255, 255, 255;