Call HUD
The in-call bar: who you're talking to, a live timer, mute, hang up. Mount it permanently — it renders nothing while quiet.
The bar is draggable — grab it anywhere but the buttons. The grid button pops the keypad.
Demo mode — the callee answers after a moment; try mute, then hang up and the bar disappears.
Installation
npx shadcn@latest add @handset/call-hudUsage
import { CallHUD } from "@/components/handset/call-hud";
// e.g. in your app shell, floating above everything — draggable, so the
// user can move it off whatever they're working on:
<CallHUD softphone={softphone} draggable className="fixed bottom-4 left-4 z-50" />See it live on the Dialer page — place a demo call and the bar appears. It shows connecting/ringing/on-hold states, flips the mute button's appearance when muted, and disappears when the call ends. Inbound calls that are still ringing belong to IncomingCallToast, not the HUD.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| softphone | Softphone | — | The softphone instance. |
| formatNumber | (e164: string) => string | US formatter | Display formatting for the remote number. |
| draggable | boolean | false | Let the user drag the bar around the screen (grab anywhere but the buttons). Position resets when the call ends. |
| keypad | boolean | false | Show a keypad toggle that pops a DTMF pad under the bar — extensions, PINs, press-1 menus. |
| className | string | — | Merged onto the bar — position it here. |