diff --git a/src/client/components/living/Header.tsx b/src/client/components/living/Header.tsx index 43b76ae..cf2a6b4 100644 --- a/src/client/components/living/Header.tsx +++ b/src/client/components/living/Header.tsx @@ -65,7 +65,7 @@ export function HeaderControls() { {option("zh", "中", "mode.zh")} {option("en", "EN", "mode.en")} - {option("vis", vis ? "✦" : "视", "mode.vis")} + {option("vis", "✦", "mode.vis")} {vis ? ( diff --git a/src/client/components/living/Metrics.tsx b/src/client/components/living/Metrics.tsx index 50755ab..3c4c3e4 100644 --- a/src/client/components/living/Metrics.tsx +++ b/src/client/components/living/Metrics.tsx @@ -82,21 +82,23 @@ function secondaryMetrics( }); } const captureParts: string[] = []; - let captureDiffersFromDelivery = false; if (metrics.captureWidth !== null && metrics.captureHeight !== null) { const captureResolution = `${metrics.captureWidth}x${metrics.captureHeight}`; - captureParts.push(captureResolution); - captureDiffersFromDelivery ||= captureResolution !== metrics.resolution; + if (captureResolution !== metrics.resolution) { + captureParts.push(captureResolution); + } } if (metrics.captureFramesPerSecond !== null) { const captureFps = readable(metrics.captureFramesPerSecond, 1); - captureParts.push(`${captureFps} fps`); - captureDiffersFromDelivery ||= + if ( metrics.framesPerSecond === null || !Number.isFinite(metrics.framesPerSecond) || - captureFps !== metrics.framesPerSecond.toFixed(1); + captureFps !== metrics.framesPerSecond.toFixed(1) + ) { + captureParts.push(`${captureFps} fps`); + } } - if (captureParts.length > 0 && captureDiffersFromDelivery) { + if (captureParts.length > 0) { values.push({ icon: "expand", label: "stats.capture", value: captureParts.join(" · ") }); } addNumber("stats.inputFps", "wave", metrics.mediaSourceFramesPerSecond, "fps", 1); diff --git a/src/client/styles.css b/src/client/styles.css index fc6aef4..747b1d2 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -445,8 +445,10 @@ ul { margin: 0; padding: 0; list-style: none; } .lr-row.is-sub .lr-divider { background: #c3d4cb; } .lr-field-cap { opacity: .55; font-size: 12px; font-weight: 600; } .lr-invite-url { + width: 100%; min-width: 0; max-width: 340px; + flex: 1 1 240px; overflow: hidden; padding: 7px 10px; border: 1.5px dashed var(--wall-2); @@ -912,6 +914,10 @@ html[data-theme="dark"] .lr-switch::after { background: var(--ink); } .lr-leds-label { display: none; } .lr-header-controls .lr-btn .lr-cap { display: none; } } +@media (max-width: 360px) { + .lr-tiles .lr-tile { padding-inline: 4px; } + .lr-tile small { font-size: 10px; letter-spacing: 0; } +} /* ---------- comic tooltip ---------- */ diff --git a/tests/metric-cells.test.ts b/tests/metric-cells.test.ts index 61bddba..16ea134 100644 --- a/tests/metric-cells.test.ts +++ b/tests/metric-cells.test.ts @@ -234,4 +234,25 @@ describe("MetricCells progressive disclosure", () => { expect(html).not.toContain("捕获设置"); }); + + it("shows only the capture dimension that differs from delivery", () => { + const html = renderToStaticMarkup( + createElement(MetricCells, { + metrics: { + ...metrics, + resolution: "1280x720", + framesPerSecond: 60, + captureWidth: 1920, + captureHeight: 1080, + captureFramesPerSecond: 60, + }, + direction: "send", + expanded: true, + onToggle: () => undefined, + }), + ); + + expect(html).toContain("1920x1080"); + expect(html).not.toContain("1920x1080 · 60.0 fps"); + }); });