Web Components

sw-ui-call-layout

View as MarkdownOpen in Claude

Fluid call layout that adapts to any container shape.

1<sw-ui-call-layout>
2  <!-- call surface goes here -->
3</sw-ui-call-layout>

Uses the container’s aspect ratio (not just width) to decide whether the transcript pane sits beside the video (landscape) or below it (portrait / narrow). The video area is always maximised.

Wide (landscape):                Narrow (portrait):
┌────────────────┬─────────┐    ┌─────────────────┐
│     VIDEO      │ TRANSCR │    │      VIDEO       │
│  (maximised)   │ (side)  │    │   (maximised)    │
├────────────────┴─────────┤    ├──────────────────┤
│        CONTROLS           │    │    CONTROLS      │
└──────────────────────────┘    ├──────────────────┤
                                 │    TRANSCRIPT    │
                                 └──────────────────┘

Class: SwUiCallLayout · Module: packages/web-components/src/components/UI/layout/sw-ui-call-layout.ts

class: SwUiCallLayout, sw-ui-call-layout

Fields

transcript
booleanDefaults to false

show / hide the transcript pane

loading
booleanDefaults to false

show a spinner overlay on the video area

shadow
booleanDefaults to false

apply a drop shadow to the host

fullscreen
boolean

(read-only) reflects the current fullscreen state

Methods

NamePrivacyDescriptionParametersReturnInherited From
toggleTranscriptvoid
toggleFullscreenvoid

Attributes

NameFieldInherited From
transcripttranscript
loadingloading
shadowshadow

CSS Properties

NameDefaultDescription
--sw-call-layout-radius[0] - border-radius on external corners
--sw-call-layout-shadowbox-shadow when `shadow` is set
--sw-call-layout-loading-bg[rgba(0,0,0,0.6)] - loading overlay background
--loading-spinner-size[48] - spinner icon size (px, number)
--sw-call-layout-transcript-transition[350ms ease-in-out] - open/close transition
--sw-call-layout-pip-width[clamp(100px, 20%, 200px)] - PiP container width
--sw-call-layout-pip-radius[8px] - PiP border-radius
--sw-call-layout-pip-shadow[0 2px 8px rgba(0,0,0,0.5)] - PiP box-shadow
--sw-call-layout-pip-bottom[12px] - PiP offset from bottom
--sw-call-layout-pip-right[12px] - PiP offset from right

Slots

NameDescription
videomain video content
backgroundelement behind the video (e.g. `<sw-ui-background>`)
floating-videopicture-in-picture overlay (absolute, bottom-right)
controlscontrol bar beneath the video
transcripttranscript panel (side or bottom)