/* global React, Dot, Badge, hashStr */ // VT shared primitives: equipment icon, waveform, video frame placeholder, roof map, timeline const { useState: _useS, useEffect: _useE, useRef: _useR, useMemo: _useM } = React; // ─── Equipment Icon (deterministic pictograms, no emoji) ──────── function EquipIcon({ cat, size = 16, ...p }) { const sw = 1.4; const S = { width: size, height: size, viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', ...p }; switch (cat) { case 'pac_air_eau': case 'pac_air_air': return ; case 'panneau_pv': return ; case 'chaudiere': return ; case 'ballon_thermo': return ; case 'groupe_froid': case 'clim': return ; case 'cta': return ; case 'onduleur': return ; case 'compteur': return ; case 'enveloppe': return ; default: return ; } } // ─── Waveform (deterministic, can animate) ───────────────────── function Waveform({ seed = 'w', width = 300, height = 48, bars = 80, color = 'currentColor', bg = 'var(--line)', progress = 0, animate = false, segments = [], onClick }) { const [tick, setTick] = _useS(0); _useE(() => { if (!animate) return; const id = setInterval(() => setTick(t => t + 1), 80); return () => clearInterval(id); }, [animate]); const heights = _useM(() => { const h = hashStr(seed); return Array.from({ length: bars }, (_, i) => { const a = Math.sin((i * 0.37 + ((h >> (i % 16)) & 7) * 0.2)) * 0.4 + 0.55; const b = Math.cos((i * 0.19 + ((h >> ((i * 3) % 24)) & 15) * 0.1)) * 0.3; return Math.max(0.1, Math.min(1, a + b)); }); }, [seed, bars]); const w = width / bars; const progressBar = Math.floor(progress * bars); return ( {heights.map((H, i) => { const jitter = animate && i > progressBar - 3 && i < progressBar + 8 ? (Math.sin((tick + i) * 0.6) * 0.15) : 0; const h = Math.max(1, (H + jitter) * (height - 4)); const y = (height - h) / 2; const active = i <= progressBar; return ; })} {/* Speaker segments overlay */} {segments.map((s, i) => ( ))} ); } // ─── Video Frame Placeholder (stylized SVG, no emoji, no gradient slop) ── // Uses synthetic "scene" imagery based on scene type function VideoFrame({ scene = 'utility_room', width = '100%', height = '100%', overlay, timestamp, style }) { return (
{/* Overlays */} {overlay} {/* Scanline */}
{/* Timestamp */} {timestamp !== undefined && (
{formatTS(timestamp)}
)}
); } // Generative "photo" of the scene — no real image, everything is drawn function SceneSvg({ scene }) { // A tiny palette const metal = '#6b7280'; const metalDark = '#374151'; const wall = '#1f2937'; const accent = '#0d3b2c'; // daikin green const plate = '#9ca3af'; const text = '#e5e7eb'; if (scene === 'utility_room') { // Shows PAC Daikin on wall return ( {/* Floor */} {/* PAC unit mounted on wall */} {/* Top vents */} {Array.from({length: 14}).map((_, i) => )} {/* Bottom louvers */} {Array.from({length: 20}).map((_, i) => )} {/* Badge */} DAIKIN {/* Data plate */} EBLQ011CAW1 S/N DK-2021-8837491 {/* Pipes */} {/* Shadow under */} {/* Light from above */} ); } if (scene === 'roof_drone') { return ( {/* Sky */} {/* Roof tiles */} {Array.from({length: 10}).map((_, r) => ( {Array.from({length: 14}).map((__, c) => ( ))} ))} {/* Neighbor house silhouettes */} {/* Satellite crosshair overlay */} ); } if (scene === 'meter_box') { return ( 123456789 0612 487 330 001 LINKY G3 — Enedis {Array.from({length: 4}).map((_, i) => )} ); } if (scene === 'boiler') { return ( 62°C FRISQUET Hydroconfort · 2008 {/* rust spots */} ); } if (scene === 'facade') { return ( {/* house */} {/* roof tiles lines */} {Array.from({length: 8}).map((_, i) => )} ); } // Default dark frame return ( — no signal — ); } // ─── Time formatting ─────────────────────────────────── function formatTS(seconds) { const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); const s = Math.floor(seconds % 60); if (h) return `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; } function formatDuration(seconds) { const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); if (h) return `${h}h ${m}min`; if (m) return `${m} min`; return `${Math.floor(seconds)}s`; } // ─── Confidence meter ─────────────────────────────────── function Confidence({ value, width = 40, label = true }) { const pct = Math.round(value * 100); const tone = value > 0.85 ? 'var(--signal)' : value > 0.7 ? 'var(--copper)' : 'var(--amber)'; return (
{label && {pct}%}
); } // ─── Roof Map (generative top-down satellite, with panel layout overlay) ── function RoofMap({ width = 360, height = 220, usableArea = 85, panels = 16, rows = 2, cols = 8, orientation = 'S', tilt = 30, highlightPanel = null, showShadow = true }) { // rotation based on orientation const orientAngle = { N: 180, NE: 135, E: 90, SE: 45, S: 0, SO: -45, O: -90, NO: -135 }[orientation] || 0; const cx = width / 2, cy = height / 2; const houseW = 140, houseH = 90; const panelW = (houseW - 20) / cols - 1; const panelH = (houseH - 20) / rows - 1; return ( {/* Satellite base: parcellaire */} {/* Neighbor houses */} {/* Road */} {/* Roof (centered, rotated by orientation) */} {/* Roof base */} {/* Roof ridge */} {/* Tile texture */} {Array.from({length: 12}).map((_, i) => )} {Array.from({length: 12}).map((_, i) => )} {/* Panels on south half (y > 0) */} {Array.from({length: rows * cols}).map((_, i) => { const r = Math.floor(i / cols); const c = i % cols; const isHighlight = highlightPanel === i; const x = -houseW/2 + 10 + c * (panelW + 1); const y = 4 + r * (panelH + 1); return ( {/* cells */} {Array.from({length: 6}).map((_, j) => )} ); })} {/* Velux on north half */} {/* Shadow cast by chimney (if showShadow) */} {showShadow && ( )} {/* Compass */} N ); } Object.assign(window, { EquipIcon, Waveform, VideoFrame, SceneSvg, formatTS, formatDuration, Confidence, RoofMap });