anentrypoint-design 0.0.122 → 0.0.124

package/src/components/voice.js

@@ -1,132 +0,0 @@
-// Voice / audio / video surface — pure factories.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-const h = webjsx.createElement;
-
-export function PttButton({ state = 'idle', mode = 'ptt', onHoldStart, onHoldEnd, onClick, label } = {}) {
-    const cls = 'cm-ptt-button mode-' + mode + ' ' + state;
-    const hold = (fn) => fn ? (e) => { e.preventDefault(); fn(e); } : null;
-    return h('button', {
-        class: cls,
-        'data-state': state,
-        'data-mode': mode,
-        onmousedown: hold(onHoldStart),
-        onmouseup: hold(onHoldEnd),
-        onmouseleave: hold(onHoldEnd),
-        ontouchstart: hold(onHoldStart),
-        ontouchend: hold(onHoldEnd),
-        ontouchcancel: hold(onHoldEnd),
-        onclick: onClick
-    },
-        h('span', { class: 'cm-ptt-dot' }),
-        h('span', { class: 'cm-ptt-label' }, label || (mode === 'realtime' ? (state === 'realtime' ? 'Live' : 'Go live') : (state === 'live' ? 'Talking' : 'Hold to talk')))
-    );
-}
-
-export function VadMeter({ level = 0, threshold = 0.15, onThresholdChange, height = 24, width = 200 } = {}) {
-    const clamp = (n) => Math.max(0, Math.min(1, n));
-    const lv = clamp(level);
-    const th = clamp(threshold);
-    const onPick = onThresholdChange ? (e) => {
-        const r = e.currentTarget.getBoundingClientRect();
-        const x = (e.clientX - r.left) / r.width;
-        onThresholdChange(clamp(x));
-    } : null;
-    return h('div', { class: 'cm-vad-meter', style: `width:${width}px;height:${height}px;` },
-        h('div', { class: 'cm-vad-track' },
-            h('div', { class: 'cm-vad-bar' + (lv >= th ? ' active' : ''), style: `width:${lv * 100}%;` }),
-            h('div', { class: 'cm-vad-threshold', style: `left:${th * 100}%;` }),
-            h('div', { class: 'cm-vad-hit', onclick: onPick, onmousedown: onPick })
-        )
-    );
-}
-
-export function WebcamPreview({ videoStream, resolution = '320x240', fps = 15, resolutions = [], fpsOptions = [], onResolutionChange, onFpsChange, onToggle, enabled } = {}) {
-    const ref = (el) => { if (el && videoStream && el.srcObject !== videoStream) el.srcObject = videoStream; };
-    return h('div', { class: 'cm-webcam-preview' + (enabled ? ' enabled' : ' disabled') },
-        h('video', { class: 'cm-wc-video', autoplay: true, muted: true, playsinline: true, ref }),
-        h('div', { class: 'cm-wc-controls' },
-            h('select', {
-                class: 'cm-wc-select',
-                value: resolution,
-                onchange: (e) => onResolutionChange && onResolutionChange(e.currentTarget.value)
-            }, ...resolutions.map(r => h('option', { value: r, selected: r === resolution }, r))),
-            h('select', {
-                class: 'cm-wc-select',
-                value: String(fps),
-                onchange: (e) => onFpsChange && onFpsChange(Number(e.currentTarget.value))
-            }, ...fpsOptions.map(f => h('option', { value: String(f), selected: Number(f) === Number(fps) }, `${f} fps`))),
-            h('button', {
-                class: 'cm-wc-toggle' + (enabled ? ' on' : ''),
-                onclick: onToggle,
-                title: enabled ? 'Disable camera' : 'Enable camera'
-            }, enabled ? '📷 On' : '📷 Off')
-        )
-    );
-}
-
-export function AudioQueue({ segments = [], currentSegmentId, onReplay, onSkip, onResume, onPause, paused } = {}) {
-    return h('div', { class: 'cm-audio-queue' },
-        h('div', { class: 'cm-aq-header' },
-            h('span', { class: 'cm-aq-title' }, `Queue (${segments.length})`),
-            h('button', {
-                class: 'cm-aq-pause',
-                onclick: paused ? onResume : onPause,
-                title: paused ? 'Resume' : 'Pause'
-            }, paused ? '▶' : '❚❚')
-        ),
-        h('div', { class: 'cm-aq-list' },
-            ...segments.map(seg => h('div', {
-                class: 'cm-aq-item' + (seg.id === currentSegmentId ? ' current' : '') + (seg.isLive ? ' live' : ''),
-                key: seg.id,
-                'data-id': seg.id
-            },
-                h('span', { class: 'cm-aq-dot', style: seg.color ? `background:${seg.color}` : '' }),
-                h('span', { class: 'cm-aq-speaker' }, seg.speaker || '?'),
-                h('span', { class: 'cm-aq-dur' }, seg.duration != null ? `${Number(seg.duration).toFixed(1)}s` : ''),
-                seg.isLive ? h('span', { class: 'cm-aq-live-tag' }, 'LIVE') : null,
-                h('button', { class: 'cm-aq-replay', onclick: () => onReplay && onReplay(seg.id), title: 'Replay' }, '↺'),
-                h('button', { class: 'cm-aq-skip', onclick: () => onSkip && onSkip(seg.id), title: 'Skip' }, '⏭')
-            ))
-        )
-    );
-}
-
-export function VoiceControls({ muted, deafened, cameraOn, screenShareOn, onMic, onDeafen, onCamera, onScreenShare, onSettings, onLeave } = {}) {
-    return h('div', { class: 'cm-voice-controls' },
-        h('button', { class: 'cm-vc-btn' + (muted ? ' muted' : ''), onclick: onMic, title: muted ? 'Unmute' : 'Mute' }, muted ? '🔇' : '🎤'),
-        h('button', { class: 'cm-vc-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, title: deafened ? 'Undeafen' : 'Deafen' }, deafened ? '🔕' : '🎧'),
-        h('button', { class: 'cm-vc-btn' + (cameraOn ? ' active' : ''), onclick: onCamera, title: cameraOn ? 'Camera off' : 'Camera on' }, '📷'),
-        h('button', { class: 'cm-vc-btn' + (screenShareOn ? ' active' : ''), onclick: onScreenShare, title: screenShareOn ? 'Stop share' : 'Share screen' }, '🖥'),
-        h('button', { class: 'cm-vc-btn', onclick: onSettings, title: 'Voice settings' }, '⚙'),
-        h('button', { class: 'cm-vc-btn danger', onclick: onLeave, title: 'Leave voice' }, '✕')
-    );
-}
-
-export function MicMonitor({ rawLevel = 0, processedLevel = 0, label } = {}) {
-    const clamp = (n) => Math.max(0, Math.min(1, n));
-    const r = clamp(rawLevel), p = clamp(processedLevel);
-    return h('div', { class: 'cm-mic-monitor' },
-        label ? h('div', { class: 'cm-mm-label' }, label) : null,
-        h('div', { class: 'cm-mm-row' },
-            h('span', { class: 'cm-mm-cap' }, 'raw'),
-            h('div', { class: 'cm-mm-bar raw', style: `width:${r * 100}%;` })
-        ),
-        h('div', { class: 'cm-mm-row' },
-            h('span', { class: 'cm-mm-cap' }, 'proc'),
-            h('div', { class: 'cm-mm-bar processed', style: `width:${p * 100}%;` })
-        )
-    );
-}
-
-export function VideoLightbox({ src, label, open, onClose } = {}) {
-    if (!open) return null;
-    return h('div', { class: 'cm-video-lightbox' },
-        h('div', { class: 'cm-vl-backdrop', onclick: onClose }),
-        h('div', { class: 'cm-vl-content' },
-            h('button', { class: 'cm-vl-close', onclick: onClose, title: 'Close' }, '✕'),
-            label ? h('div', { class: 'cm-vl-label' }, label) : null,
-            h('video', { class: 'cm-vl-video', src, controls: true, autoplay: true, playsinline: true })
-        )
-    );
-}