Tap anywhere to start
-Audio requires user interaction
+Tap anywhere to start
+Audio requires user interaction
`; tapOverlay.onclick = () => { unlockAudio(); diff --git a/server/routes/devices.js b/server/routes/devices.js index 44e30e3..4367d70 100644 --- a/server/routes/devices.js +++ b/server/routes/devices.js @@ -23,7 +23,7 @@ router.get('/', (req, res) => { const devices = db.prepare(` SELECT d.*, t.battery_level, t.battery_charging, t.storage_free_mb, t.storage_total_mb, - t.ram_free_mb, t.ram_total_mb, t.wifi_ssid, t.wifi_rssi, t.uptime_seconds, t.local_ip, + t.ram_free_mb, t.ram_total_mb, t.wifi_ssid, t.wifi_rssi, t.uptime_seconds, t.local_ip, t.local_ip6, t.cpu_usage, s.filepath as screenshot_path, s.captured_at as screenshot_at, u.email as owner_email, u.name as owner_name diff --git a/server/test/openapi-contract.test.js b/server/test/openapi-contract.test.js index 185de59..de1c786 100644 --- a/server/test/openapi-contract.test.js +++ b/server/test/openapi-contract.test.js @@ -78,7 +78,7 @@ test('openapi: the spec version tracks the shipped release', () => { // GET /devices, so both must be documented and must not be described interchangeably. test('openapi: a device documents its WAN and LAN addresses distinctly', () => { const props = spec.components.schemas.Device.properties; - for (const field of ['ip_address', 'local_ip']) { + for (const field of ['ip_address', 'local_ip', 'local_ip6']) { assert.ok(props[field], `Device.${field} is returned by GET /devices but is not documented`); assert.ok( props[field].type.includes('null'), @@ -88,6 +88,11 @@ test('openapi: a device documents its WAN and LAN addresses distinctly', () => { } assert.match(props.ip_address.description, /WAN|public/i); assert.match(props.local_ip.description, /local network|LAN/i); + assert.match(props.local_ip6.description, /local network|LAN/i); + // The two LAN fields are a pair, not alternatives — a dual-stack panel reports both, so the + // spec must not let an integrator read one as a fallback for the other. + assert.match(props.local_ip.description, /IPv4/i); + assert.match(props.local_ip6.description, /IPv6/i); }); // "permission" is a sentinel, not a network name: Android 10+ withholds the SSID without a diff --git a/server/test/player-screen-scaling.test.js b/server/test/player-screen-scaling.test.js new file mode 100644 index 0000000..b8ca526 --- /dev/null +++ b/server/test/player-screen-scaling.test.js @@ -0,0 +1,92 @@ +'use strict'; + +/* + * The pairing code has to be readable on the panel it is displayed on. + * + * A CSS pixel covers a quarter of the screen area on a 4K panel that it does on 1080p, and a + * sixteenth on 8K. Every size on the player's pre-playback screens was a hard-coded pixel value, + * so the 72px pairing code that fills a 1080p screen became a smudge on a 4K wall — reported from + * the field, on exactly the screens signage gets installed on. + * + * The fix is a viewport-proportional root font size with everything on those screens expressed in + * rem, so the code holds the same ANGULAR size at any panel resolution. These tests pin the two + * properties that actually matter: nothing on those screens is left in px, and the scaling cannot + * leak into playback content. + */ +const { test } = require('node:test'); +const assert = require('node:assert/strict'); +const fs = require('fs'); +const path = require('path'); + +const ROOT = path.join(__dirname, '..', '..'); +const read = (p) => fs.readFileSync(path.join(ROOT, p), 'utf8'); + +const SURFACES = [ + { name: 'web player', file: 'server/player/index.html' }, + { name: 'tizen player', file: 'tizen/css/style.css' }, +]; + +for (const { name, file } of SURFACES) { + test(`${name}: the root font size is viewport-proportional and clamped at both ends`, () => { + const src = read(file); + const m = src.match(/html\s*\{\s*font-size:\s*clamp\(\s*([\d.]+)px\s*,\s*([\d.]+)vmin\s*,\s*([\d.]+)px\s*\)/); + assert.ok(m, `${file} must set a clamped, vmin-based root font size`); + const [, min, vmin, max] = m.map(Number); + + // vmin, not vw: a portrait-mounted panel is as common as a landscape one, and vw would render + // a 1080x1920 screen at half size. + assert.ok(vmin > 0, 'the middle term must actually scale with the viewport'); + // 1rem should land on 10px at a 1080-tall viewport, so the rem values read as "px at 1080p" + // and a reviewer can check them against the design at a glance. + assert.ok(Math.abs(vmin * 1080 / 100 - 10) < 0.1, `1rem must be ~10px at 1080p, got ${vmin * 1080 / 100}px`); + // The floor keeps a dashboard preview iframe and a laptop window legible rather than + // microscopic; the ceiling stops an ultrawide from getting silly. + assert.ok(min >= 6 && min <= 10, `floor should keep small viewports readable, got ${min}px`); + assert.ok(max >= 32, `ceiling should not cap a genuine 8K panel too early, got ${max}px`); + }); +} + +test('web player: the pairing code scales, and is still the biggest thing on the screen', () => { + const src = read('server/player/index.html'); + const rule = src.slice(src.indexOf('.pairing-code {'), src.indexOf('.pairing-hint')); + const size = rule.match(/font-size:\s*([\d.]+)rem/); + assert.ok(size, 'the pairing code must be sized in rem, not px'); + assert.ok(Number(size[1]) >= 7, 'the code is what someone squints at from across a room'); + assert.match(rule, /letter-spacing:\s*[\d.]+rem/, 'letter-spacing must scale with it or the digits collide'); + + const h1 = src.match(/#setupScreen h1 \{ font-size: ([\d.]+)rem/); + assert.ok(h1 && Number(size[1]) > Number(h1[1]), 'the code must outrank the product name'); +}); + +test('tizen player: the pairing code scales too', () => { + const src = read('tizen/css/style.css'); + const rule = src.slice(src.indexOf('.code {'), src.indexOf('.hint {')); + assert.match(rule, /font-size:\s*[\d.]+rem/, 'the Tizen pairing code must be sized in rem'); + assert.match(rule, /letter-spacing:\s*[\d.]+rem/); +}); + +test('no pre-playback screen is left in hard-coded px', () => { + const src = read('server/player/index.html'); + // Everything from the setup screen through the status overlay. A px value surviving in here is + // one element that stays put while the rest of the screen grows around it. + for (const selector of ['#setupScreen h1', '#setupScreen .subtitle', '.pairing-hint', '.status-msg', '#statusOverlay h2', '#statusOverlay p']) { + const at = src.indexOf(selector + ' {'); + assert.ok(at > 0, `${selector} not found`); + const rule = src.slice(at, src.indexOf('}', at)); + const px = rule.match(/font-size:\s*[\d.]+px/); + assert.equal(px, null, `${selector} still has a hard-coded font-size — it will not scale`); + } +}); + +test('the scaling cannot reach playback content', () => { + const src = read('server/player/index.html'); + // The whole safety argument for moving the root font size is that only the pre-playback chrome + // uses rem. If a stage/zone/PiP rule starts using rem, resizing a panel would start resizing + // CONTENT, which is a different and much worse bug than the one being fixed here. + for (const selector of ['#stage', '.zone', '#pip']) { + const at = src.indexOf(selector + ' {'); + if (at < 0) continue; + const rule = src.slice(at, src.indexOf('}', at)); + assert.ok(!/[\d.]rem/.test(rule), `${selector} must not use rem — content sizing must stay independent`); + } +}); diff --git a/server/test/telemetry-ipv6.test.js b/server/test/telemetry-ipv6.test.js new file mode 100644 index 0000000..37b3324 --- /dev/null +++ b/server/test/telemetry-ipv6.test.js @@ -0,0 +1,92 @@ +'use strict'; + +/* + * A panel's own IPv6 address has to survive the trip from the player to the dashboard. + * + * It never used to exist: the Android collector filtered to Inet4Address, so a v6-only screen + * reported no address at all and the dashboard rendered a dash for a panel that was perfectly + * reachable. The fix is two columns rather than one, because a dual-stack panel genuinely has + * both and collapsing them would make the field mean "whichever interface enumerated first". + */ +const { test } = require('node:test'); +const assert = require('node:assert/strict'); +const fs = require('fs'); +const path = require('path'); +const Database = require('better-sqlite3'); + +const ROOT = path.join(__dirname, '..', '..'); +const read = (p) => fs.readFileSync(path.join(ROOT, p), 'utf8'); + +test('the Android collector reports BOTH stacks, not whichever it finds first', () => { + const src = read('android/app/src/main/java/com/remotedisplay/player/telemetry/DeviceInfo.kt'); + assert.match(src, /put\("local_ip6"/, 'telemetry must carry local_ip6'); + assert.match(src, /getLocalIp6/, 'there must be a v6 collector'); + // The v4 one keeps its filter — this is an addition, not a replacement. A v4 panel must keep + // reporting exactly what it reported before. + assert.match(src, /addr is java\.net\.Inet4Address/, 'local_ip stays IPv4-only'); +}); + +test('link-local v6 is excluded — it cannot be dialled without a zone index', () => { + const src = read('android/app/src/main/java/com/remotedisplay/player/telemetry/DeviceInfo.kt'); + const fn = src.slice(src.indexOf('private fun getLocalIp6'), src.indexOf('private fun getWifiRSSI')); + assert.ok(fn.length > 0, 'getLocalIp6 not found'); + for (const guard of ['isLinkLocalAddress', 'isLoopbackAddress', 'isAnyLocalAddress', 'isMulticastAddress']) { + assert.ok(fn.includes(guard), `getLocalIp6 must skip ${guard} addresses`); + } + // Every interface has an fe80:: address and it is usually enumerated first, so without this the + // field would fill up with strings nobody can paste anywhere and hide the useful address. + assert.match(fn, /substringBefore\('%'\)/, 'a %iface suffix must be trimmed before it reaches the UI'); +}); + +test('the column exists, holds a full-length v6 address, and is separate from local_ip', () => { + const db = new Database(':memory:'); + db.exec('CREATE TABLE device_telemetry (id INTEGER PRIMARY KEY, device_id TEXT, local_ip TEXT)'); + // The same statement the migration list runs. + db.exec('ALTER TABLE device_telemetry ADD COLUMN local_ip6 TEXT'); + + const v6 = '2001:0db8:85a3:0000:0000:8a2e:0370:7334'; + db.prepare('INSERT INTO device_telemetry (device_id, local_ip, local_ip6) VALUES (?, ?, ?)') + .run('d1', '192.168.1.42', v6); + const row = db.prepare('SELECT local_ip, local_ip6 FROM device_telemetry WHERE device_id = ?').get('d1'); + assert.equal(row.local_ip, '192.168.1.42', 'the v4 address is untouched by the addition'); + assert.equal(row.local_ip6, v6); + + // 45 characters is the longest legitimate IPv6 text form (IPv4-mapped, ::ffff:255.255.255.255). + // The write path caps at 45, so a real address must never be truncated by it. + assert.ok('::ffff:255.255.255.255'.length <= 45); + assert.ok(v6.length <= 45, 'a full uncompressed v6 address fits the cap the writer applies'); + db.close(); +}); + +test('the migration is registered, and does not replace the v4 column', () => { + const src = read('server/db/database.js'); + assert.match(src, /ALTER TABLE device_telemetry ADD COLUMN local_ip6 TEXT/); + assert.match(src, /ALTER TABLE device_telemetry ADD COLUMN local_ip TEXT/); +}); + +test('the server stores what the player sends, capped like its neighbour', () => { + const src = read('server/ws/deviceSocket.js'); + assert.match(src, /local_ip, local_ip6, temperature_c/, 'the INSERT must name the new column'); + assert.match( + src, + /typeof telemetry\.local_ip6 === 'string' \? telemetry\.local_ip6\.trim\(\)\.slice\(0, 45\)/, + 'device-supplied text headed for the dashboard must be trimmed and capped', + ); +}); + +test('both addresses reach the dashboard, and the v6 card only appears when there is one', () => { + const api = read('server/routes/devices.js'); + assert.match(api, /t\.local_ip, t\.local_ip6/, 'the device list must select the new column'); + + const ui = read('frontend/js/views/device-detail.js'); + assert.match(ui, /device\.local_ip6 \?/, 'the card must be conditional — no empty row for a v4-only fleet'); + assert.match(ui, /telLocalIp6/); + assert.match(ui, /device\.info\.local_ip6/, 'the label must go through i18n, not be hardcoded'); +}); + +test('every locale has the label — a missing key renders as the raw key', () => { + for (const lang of ['en', 'es', 'fr', 'de', 'pt', 'it']) { + const src = read(`frontend/js/i18n/${lang}.js`); + assert.match(src, /'device\.info\.local_ip6':/, `${lang} is missing device.info.local_ip6`); + } +}); diff --git a/server/ws/deviceSocket.js b/server/ws/deviceSocket.js index 2b602c9..c56ea82 100644 --- a/server/ws/deviceSocket.js +++ b/server/ws/deviceSocket.js @@ -1170,8 +1170,8 @@ module.exports = function setupDeviceSocket(io) { if (telemetry && deviceExists(device_id)) { db.prepare(` INSERT INTO device_telemetry (device_id, battery_level, battery_charging, storage_free_mb, storage_total_mb, - ram_free_mb, ram_total_mb, cpu_usage, wifi_ssid, wifi_rssi, uptime_seconds, local_ip, temperature_c) - VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + ram_free_mb, ram_total_mb, cpu_usage, wifi_ssid, wifi_rssi, uptime_seconds, local_ip, local_ip6, temperature_c) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) `).run( device_id, telemetry.battery_level ?? null, @@ -1187,6 +1187,9 @@ module.exports = function setupDeviceSocket(io) { // Device-supplied text headed for a column the dashboard renders: trim and cap it. // 45 chars is the longest legitimate value (a full IPv6 address). typeof telemetry.local_ip === 'string' ? telemetry.local_ip.trim().slice(0, 45) || null : null, + // Same treatment for the v6 address. 45 is still the cap: it is the longest legitimate + // IPv6 text form (an IPv4-mapped one, `::ffff:255.255.255.255`). + typeof telemetry.local_ip6 === 'string' ? telemetry.local_ip6.trim().slice(0, 45) || null : null, // Only a finite number is a reading. A panel with no sensor sends nothing, and NaN or // Infinity from a flaky one must land as "no reading" rather than poisoning the column. typeof telemetry.temperature_c === 'number' && Number.isFinite(telemetry.temperature_c) diff --git a/tizen/css/style.css b/tizen/css/style.css index 85c12e3..5c0cc36 100644 --- a/tizen/css/style.css +++ b/tizen/css/style.css @@ -1,5 +1,21 @@ * { margin: 0; padding: 0; box-sizing: border-box; } +/* + * ONE KNOB for every pre-playback screen, matching server/player/index.html. + * + * A pairing code is read from across a room, so what must stay constant is ANGULAR size, not + * pixel size — and a CSS pixel covers a sixteenth of the screen area on an 8K panel that it does + * on 1080p. Sizes below are rem against this root: 1rem = 10px at a 1080-tall viewport, and it + * scales from there. A Tizen web app is handed a 1920x1080 logical viewport on most panels, where + * this is arithmetically identical to the pixel values it replaces — the point is the panels where + * it is not. + * + * vmin rather than vw: portrait-mounted panels are common and vw would halve everything on one. + * Only the setup/pairing/toast chrome uses rem; the stage and PiP layers are laid out in %/vw/vh + * and are untouched. + */ +html { font-size: clamp(7px, 0.926vmin, 56px); } + html, body { width: 100%; height: 100%; background: #000; color: #f1f5f9; @@ -19,39 +35,39 @@ html, body { .card { background: #111827; border: 1px solid #1f2937; - border-radius: 18px; - padding: 48px 64px; + border-radius: 1.8rem; + padding: 4.8rem 6.4rem; text-align: center; - max-width: 760px; + max-width: 76rem; } -.card h1 { color: #3b82f6; font-size: 44px; margin-bottom: 6px; } -.sub { color: #94a3b8; font-size: 22px; margin-bottom: 36px; } -.card label { display: block; text-align: left; color: #94a3b8; font-size: 18px; margin-bottom: 8px; } +.card h1 { color: #3b82f6; font-size: 4.4rem; margin-bottom: 0.6rem; } +.sub { color: #94a3b8; font-size: 2.2rem; margin-bottom: 3.6rem; } +.card label { display: block; text-align: left; color: #94a3b8; font-size: 1.8rem; margin-bottom: 0.8rem; } #serverUrl { - width: 100%; font-size: 26px; padding: 16px 20px; - border-radius: 10px; border: 2px solid #334155; - background: #0b1220; color: #f1f5f9; margin-bottom: 24px; + width: 100%; font-size: 2.6rem; padding: 1.6rem 2rem; + border-radius: 1rem; border: 0.2rem solid #334155; + background: #0b1220; color: #f1f5f9; margin-bottom: 2.4rem; } #serverUrl:focus { outline: none; border-color: #3b82f6; } button { - font-size: 24px; font-weight: bold; color: #fff; - background: #3b82f6; border: none; border-radius: 10px; - padding: 16px 40px; cursor: pointer; + font-size: 2.4rem; font-weight: bold; color: #fff; + background: #3b82f6; border: none; border-radius: 1rem; + padding: 1.6rem 4rem; cursor: pointer; } -button:focus { outline: 3px solid #93c5fd; } -button.ghost { background: transparent; color: #64748b; font-size: 18px; margin-top: 24px; padding: 8px; } +button:focus { outline: 0.3rem solid #93c5fd; } +button.ghost { background: transparent; color: #64748b; font-size: 1.8rem; margin-top: 2.4rem; padding: 0.8rem; } -.status { color: #64748b; font-size: 18px; margin-top: 20px; min-height: 24px; } +.status { color: #64748b; font-size: 1.8rem; margin-top: 2rem; min-height: 2.4rem; } .status.error { color: #ef4444; } /* Pairing code */ .code { - font-size: 96px; font-weight: bold; letter-spacing: 16px; - color: #22c55e; margin: 24px 0; font-family: monospace; + font-size: 9.6rem; font-weight: bold; letter-spacing: 1.6rem; + color: #22c55e; margin: 2.4rem 0; font-family: monospace; } -.hint { color: #94a3b8; font-size: 20px; line-height: 1.5; } +.hint { color: #94a3b8; font-size: 2rem; line-height: 1.5; } /* Playback stage */ .stage { background: #000; } @@ -82,8 +98,8 @@ button.ghost { background: transparent; color: #64748b; font-size: 18px; margin- /* Toast */ .toast { - position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); + position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); background: rgba(17,24,39,0.92); color: #f1f5f9; - padding: 12px 24px; border-radius: 10px; font-size: 18px; - border: 1px solid #334155; + padding: 1.2rem 2.4rem; border-radius: 1rem; font-size: 1.8rem; + border: 0.1rem solid #334155; }