Strike.js Network View

Strike UI for strike-fw-network-check. Runs a check, shows verdict / progress / axes / accordion details, and optionally picks ICE by region with libping.

Part of Strike.

Install

npm install strike-fw-network-view strike-fw strike-fw-ui strike-fw-network-check

Optional for dynamic nearest-region:

npm install libping

Peers:

• strike-fw, strike-fw-ui - rendering (Accordion, Alert, Progress, ...)
• strike-fw-network-check - scoring / probes
• libping - required for dynamic nearest-region (browser needs RTCPeerConnection). Optional if you only pass top-level ice or always inject hooks.pingGateways.

Install peers so there is a single strike-fw copy. Nested copies break Accordion hooks (hoist / dedupe; avoid nesting strike-fw under strike-fw-ui).

Usage

import { h, render } from 'strike-fw';
import { NetworkCheckView } from 'strike-fw-network-view';

render(
  h(NetworkCheckView, {
    check: {
      probes: { capabilities: true, audioQuality: true },
    },
    iceByRegion: {
      eu: {
        label: 'Europe',
        iceServers: [{ urls: 'turn:eu.example:3478', username: 'u', credential: 'p' }],
      },
      us: {
        label: 'United States',
        iceServers: [{ urls: 'turn:us.example:3478', username: 'u', credential: 'p' }],
        // optional; otherwise derived from first stun/turn/turns url
        ping: 'stun:us.example:3478',
      },
    },
    guides: {
      'clarity.loss': {
        title: 'Packet loss',
        body: 'Prefer a wired link or move closer to the AP.',
      },
    },
    guideFallback: { title: 'Tip', body: 'See your admin guide.' },
    view: { autoRun: false },
    onComplete: (result) => console.log(result.verdict),
  }),
  document.getElementById('root')
);

ICE precedence

1. If iceByRegion has one or more keys, that map is used for the run. Top-level ice is ignored.
2. Otherwise use top-level ice (iceServers and/or fetchIceConfig).
3. If neither is set, use local TURN defaults: turn:127.0.0.1:3478 with username/credential user / pass (UDP and TCP).

Regions and dynamic

• With two or more regions, a Select is shown. The first option is always dynamic (label from view.labels.dynamic).
• With zero or one region, the Select and the resolved-region line are both hidden.
• When the Select is shown and a run finishes, the resolved region is always shown (Region: Europe (dynamic) or Region: Europe).
• dynamic calls libping (pingGateways(gateways, { warmup: true })) and picks the lowest finite RTT. If every ping fails or times out, the first Object.keys(iceByRegion) entry is used.

Resolving pingGateways

Order:

1. hooks.pingGateways (preferred in tests / Node)
2. globalThis.LibPing.pingGateways
3. Best-effort import('libping') (CJS interop)

Do not rely on an ESM default import of libping alone in the browser; prefer a script tag that sets globalThis.LibPing, or inject hooks.pingGateways.

Progress (v1)

While running, the view shows Progress plus a short phase label from onProgress (context, capabilities, audio, ...). There is no Stepper in v1.

Hooks for tests

h(NetworkCheckView, {
  iceByRegion: { /* regions */ },
  hooks: {
    pingGateways: async () => [{ code: 'eu', rtt: 40 }],
    runNetworkCheck: async (cfg) => ({ /* NetworkCheckResult */ }),
    onProgress: (phase, ratio) => {},
  },
})

View defaults

autoRun: false, axes / capabilities / environment / guides / MOS on, raw config off, accordionType: 'multiple', defaultOpen: 'first-failure'. Host guides map is not invented by the library.

Exports

NetworkCheckView, listRegions, showRegionSelect, gatewaysForPing, resolveRegionSelection, resolvePingGateways, derivePingUrl, VIEW_DEFAULTS, mergeViewConfig, mergeViewAndCheck, DEFAULT_ICE_SERVERS

Browser smoke / Pages demo

From a clone of this package: examples/browser-smoke.html and docs/ (CDN peers + vendored runtimes for GitHub Pages). Local helper: ./serve-docs.sh (see docs/README.md).

License

MIT