@signalwire/web-components 4.0.0-beta.9 → 4.0.0-dev-20260515133934
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -55
- package/dist/_virtual/_commonjsHelpers.js +9 -0
- package/dist/_virtual/_commonjsHelpers.js.map +1 -0
- package/dist/_virtual/prism-python.js +28 -0
- package/dist/_virtual/prism-python.js.map +1 -0
- package/dist/_virtual/prism-python2.js +5 -0
- package/dist/_virtual/prism-python2.js.map +1 -0
- package/dist/_virtual/prism-typescript.js +28 -0
- package/dist/_virtual/prism-typescript.js.map +1 -0
- package/dist/_virtual/prism-typescript2.js +5 -0
- package/dist/_virtual/prism-typescript2.js.map +1 -0
- package/dist/_virtual/prism.js +28 -0
- package/dist/_virtual/prism.js.map +1 -0
- package/dist/_virtual/prism2.js +5 -0
- package/dist/_virtual/prism2.js.map +1 -0
- package/dist/assets/sw_background.webp.js +5 -0
- package/dist/assets/sw_background.webp.js.map +1 -0
- package/dist/components/UI/DEFAULT_BACKGROUND.d.ts +4 -0
- package/dist/components/UI/DEFAULT_BACKGROUND.d.ts.map +1 -0
- package/dist/components/UI/DEFAULT_BACKGROUND.js +5 -0
- package/dist/components/UI/DEFAULT_BACKGROUND.js.map +1 -0
- package/dist/components/UI/controls/sw-ui-control-bar.d.ts +114 -0
- package/dist/components/UI/controls/sw-ui-control-bar.d.ts.map +1 -0
- package/dist/components/UI/controls/sw-ui-control-bar.js +324 -0
- package/dist/components/UI/controls/sw-ui-control-bar.js.map +1 -0
- package/dist/components/UI/controls/sw-ui-dialpad.d.ts +67 -0
- package/dist/components/UI/controls/sw-ui-dialpad.d.ts.map +1 -0
- package/dist/components/UI/controls/sw-ui-dialpad.js +360 -0
- package/dist/components/UI/controls/sw-ui-dialpad.js.map +1 -0
- package/dist/components/UI/controls/sw-ui-dropup.d.ts +42 -0
- package/dist/components/UI/controls/sw-ui-dropup.d.ts.map +1 -0
- package/dist/components/UI/controls/sw-ui-dropup.js +138 -0
- package/dist/components/UI/controls/sw-ui-dropup.js.map +1 -0
- package/dist/components/UI/controls/sw-ui-split-button.d.ts +44 -0
- package/dist/components/UI/controls/sw-ui-split-button.d.ts.map +1 -0
- package/dist/components/UI/controls/sw-ui-split-button.js +178 -0
- package/dist/components/UI/controls/sw-ui-split-button.js.map +1 -0
- package/dist/components/UI/host-reset.d.ts +16 -0
- package/dist/components/UI/host-reset.d.ts.map +1 -0
- package/dist/components/UI/host-reset.js +20 -0
- package/dist/components/UI/host-reset.js.map +1 -0
- package/dist/components/UI/icons/backspace.svg.js +10 -0
- package/dist/components/UI/icons/backspace.svg.js.map +1 -0
- package/dist/components/UI/icons/camera-off.svg.js +8 -0
- package/dist/components/UI/icons/camera-off.svg.js.map +1 -0
- package/dist/components/UI/icons/camera-on.svg.js +8 -0
- package/dist/components/UI/icons/camera-on.svg.js.map +1 -0
- package/dist/components/UI/icons/check-circle.svg.js +6 -0
- package/dist/components/UI/icons/check-circle.svg.js.map +1 -0
- package/dist/components/UI/icons/chevron-up.svg.js +8 -0
- package/dist/components/UI/icons/chevron-up.svg.js.map +1 -0
- package/dist/components/UI/icons/close.svg.js +6 -0
- package/dist/components/UI/icons/close.svg.js.map +1 -0
- package/dist/components/UI/icons/copy.svg.js +6 -0
- package/dist/components/UI/icons/copy.svg.js.map +1 -0
- package/dist/components/UI/icons/download.svg.js +6 -0
- package/dist/components/UI/icons/download.svg.js.map +1 -0
- package/dist/components/UI/icons/fullscreen-exit.svg.js +8 -0
- package/dist/components/UI/icons/fullscreen-exit.svg.js.map +1 -0
- package/dist/components/UI/icons/fullscreen.svg.js +8 -0
- package/dist/components/UI/icons/fullscreen.svg.js.map +1 -0
- package/dist/components/UI/icons/hand-raise.svg.js +6 -0
- package/dist/components/UI/icons/hand-raise.svg.js.map +1 -0
- package/dist/components/UI/icons/icons.d.ts +31 -0
- package/dist/components/UI/icons/icons.d.ts.map +1 -0
- package/dist/components/UI/icons/icons.js +60 -0
- package/dist/components/UI/icons/icons.js.map +1 -0
- package/dist/components/UI/icons/index.d.ts +4 -0
- package/dist/components/UI/icons/index.d.ts.map +1 -0
- package/dist/components/UI/icons/info-circle.svg.js +6 -0
- package/dist/components/UI/icons/info-circle.svg.js.map +1 -0
- package/dist/components/UI/icons/mic-off.svg.js +8 -0
- package/dist/components/UI/icons/mic-off.svg.js.map +1 -0
- package/dist/components/UI/icons/mic-on.svg.js +8 -0
- package/dist/components/UI/icons/mic-on.svg.js.map +1 -0
- package/dist/components/UI/icons/person.svg.js +8 -0
- package/dist/components/UI/icons/person.svg.js.map +1 -0
- package/dist/components/UI/icons/phone-call.svg.js +8 -0
- package/dist/components/UI/icons/phone-call.svg.js.map +1 -0
- package/dist/components/UI/icons/phone-end.svg.js +8 -0
- package/dist/components/UI/icons/phone-end.svg.js.map +1 -0
- package/dist/components/UI/icons/room.svg.js +8 -0
- package/dist/components/UI/icons/room.svg.js.map +1 -0
- package/dist/components/UI/icons/screen-share-off.svg.js +9 -0
- package/dist/components/UI/icons/screen-share-off.svg.js.map +1 -0
- package/dist/components/UI/icons/screen-share.svg.js +9 -0
- package/dist/components/UI/icons/screen-share.svg.js.map +1 -0
- package/dist/components/UI/icons/sendIcon.svg.js +9 -0
- package/dist/components/UI/icons/sendIcon.svg.js.map +1 -0
- package/dist/components/UI/icons/settings.svg.js +8 -0
- package/dist/components/UI/icons/settings.svg.js.map +1 -0
- package/dist/components/UI/icons/speaker-off.svg.js +8 -0
- package/dist/components/UI/icons/speaker-off.svg.js.map +1 -0
- package/dist/components/UI/icons/speaker-on.svg.js +8 -0
- package/dist/components/UI/icons/speaker-on.svg.js.map +1 -0
- package/dist/components/UI/icons/spinner.svg.js +9 -0
- package/dist/components/UI/icons/spinner.svg.js.map +1 -0
- package/dist/components/UI/icons/sw-logo.svg.js +11 -0
- package/dist/components/UI/icons/sw-logo.svg.js.map +1 -0
- package/dist/components/UI/icons/sw-ui-icon.d.ts +28 -0
- package/dist/components/UI/icons/sw-ui-icon.d.ts.map +1 -0
- package/dist/components/UI/icons/sw-ui-icon.js +47 -0
- package/dist/components/UI/icons/sw-ui-icon.js.map +1 -0
- package/dist/components/UI/icons/transcript.svg.js +10 -0
- package/dist/components/UI/icons/transcript.svg.js.map +1 -0
- package/dist/components/UI/index.d.ts +18 -0
- package/dist/components/UI/index.d.ts.map +1 -0
- package/dist/components/UI/layout/sw-ui-background.d.ts +33 -0
- package/dist/components/UI/layout/sw-ui-background.d.ts.map +1 -0
- package/dist/components/UI/layout/sw-ui-background.js +106 -0
- package/dist/components/UI/layout/sw-ui-background.js.map +1 -0
- package/dist/components/UI/layout/sw-ui-call-layout.d.ts +69 -0
- package/dist/components/UI/layout/sw-ui-call-layout.d.ts.map +1 -0
- package/dist/components/UI/layout/sw-ui-call-layout.js +278 -0
- package/dist/components/UI/layout/sw-ui-call-layout.js.map +1 -0
- package/dist/components/UI/layout/sw-ui-content-drawer.d.ts +50 -0
- package/dist/components/UI/layout/sw-ui-content-drawer.d.ts.map +1 -0
- package/dist/components/UI/layout/sw-ui-content-drawer.js +413 -0
- package/dist/components/UI/layout/sw-ui-content-drawer.js.map +1 -0
- package/dist/components/UI/layout/sw-ui-modal.d.ts +31 -0
- package/dist/components/UI/layout/sw-ui-modal.d.ts.map +1 -0
- package/dist/components/UI/layout/sw-ui-modal.js +150 -0
- package/dist/components/UI/layout/sw-ui-modal.js.map +1 -0
- package/dist/components/UI/layout/sw-ui-responsive-container.d.ts +15 -0
- package/dist/components/UI/layout/sw-ui-responsive-container.d.ts.map +1 -0
- package/dist/components/UI/layout/sw-ui-responsive-container.js +78 -0
- package/dist/components/UI/layout/sw-ui-responsive-container.js.map +1 -0
- package/dist/components/UI/sw-ui-alert.d.ts +37 -0
- package/dist/components/UI/sw-ui-alert.d.ts.map +1 -0
- package/dist/components/UI/sw-ui-alert.js +127 -0
- package/dist/components/UI/sw-ui-alert.js.map +1 -0
- package/dist/components/UI/sw-ui-transcript-view.d.ts +56 -0
- package/dist/components/UI/sw-ui-transcript-view.d.ts.map +1 -0
- package/dist/components/UI/sw-ui-transcript-view.js +342 -0
- package/dist/components/UI/sw-ui-transcript-view.js.map +1 -0
- package/dist/components/{audio-level.d.ts → sw-audio-level.d.ts} +44 -4
- package/dist/components/sw-audio-level.d.ts.map +1 -0
- package/dist/components/sw-audio-level.js +252 -0
- package/dist/components/sw-audio-level.js.map +1 -0
- package/dist/components/sw-call-controls.d.ts +58 -0
- package/dist/components/sw-call-controls.d.ts.map +1 -0
- package/dist/components/sw-call-controls.js +186 -0
- package/dist/components/sw-call-controls.js.map +1 -0
- package/dist/components/sw-call-dialpad.d.ts +52 -0
- package/dist/components/sw-call-dialpad.d.ts.map +1 -0
- package/dist/components/sw-call-dialpad.js +70 -0
- package/dist/components/sw-call-dialpad.js.map +1 -0
- package/dist/components/sw-call-media.d.ts +59 -0
- package/dist/components/sw-call-media.d.ts.map +1 -0
- package/dist/components/sw-call-media.js +178 -0
- package/dist/components/sw-call-media.js.map +1 -0
- package/dist/components/sw-call-provider.d.ts +41 -0
- package/dist/components/sw-call-provider.d.ts.map +1 -0
- package/dist/components/sw-call-provider.js +37 -0
- package/dist/components/sw-call-provider.js.map +1 -0
- package/dist/components/sw-call-status.d.ts +50 -0
- package/dist/components/sw-call-status.d.ts.map +1 -0
- package/dist/components/sw-call-status.js +204 -0
- package/dist/components/sw-call-status.js.map +1 -0
- package/dist/components/sw-call-widget/client-factory.d.ts +6 -0
- package/dist/components/sw-call-widget/client-factory.d.ts.map +1 -0
- package/dist/components/sw-call-widget/client-factory.js +25 -0
- package/dist/components/sw-call-widget/client-factory.js.map +1 -0
- package/dist/components/sw-call-widget/sw-call-widget.d.ts +110 -0
- package/dist/components/sw-call-widget/sw-call-widget.d.ts.map +1 -0
- package/dist/components/sw-call-widget/sw-call-widget.js +251 -0
- package/dist/components/sw-call-widget/sw-call-widget.js.map +1 -0
- package/dist/components/sw-call-widget/sw-call-widget.templates.d.ts +17 -0
- package/dist/components/sw-call-widget/sw-call-widget.templates.d.ts.map +1 -0
- package/dist/components/sw-call-widget/sw-call-widget.templates.js +80 -0
- package/dist/components/sw-call-widget/sw-call-widget.templates.js.map +1 -0
- package/dist/components/sw-click-to-call.d.ts +39 -0
- package/dist/components/sw-click-to-call.d.ts.map +1 -0
- package/dist/components/sw-click-to-call.js +88 -0
- package/dist/components/sw-click-to-call.js.map +1 -0
- package/dist/components/sw-device-selector/index.d.ts +2 -0
- package/dist/components/sw-device-selector/index.d.ts.map +1 -0
- package/dist/components/sw-device-selector/sw-device-selector.d.ts +69 -0
- package/dist/components/sw-device-selector/sw-device-selector.d.ts.map +1 -0
- package/dist/components/sw-device-selector/sw-device-selector.js +278 -0
- package/dist/components/sw-device-selector/sw-device-selector.js.map +1 -0
- package/dist/components/sw-device-selector/sw-device-selector.styles.d.ts +2 -0
- package/dist/components/sw-device-selector/sw-device-selector.styles.d.ts.map +1 -0
- package/dist/components/sw-device-selector/sw-device-selector.styles.js +238 -0
- package/dist/components/sw-device-selector/sw-device-selector.styles.js.map +1 -0
- package/dist/components/{directory.d.ts → sw-directory.d.ts} +18 -4
- package/dist/components/sw-directory.d.ts.map +1 -0
- package/dist/components/sw-directory.js +435 -0
- package/dist/components/sw-directory.js.map +1 -0
- package/dist/components/sw-local-camera.d.ts +53 -0
- package/dist/components/sw-local-camera.d.ts.map +1 -0
- package/dist/components/sw-local-camera.js +147 -0
- package/dist/components/sw-local-camera.js.map +1 -0
- package/dist/components/sw-participant-controls.d.ts +58 -0
- package/dist/components/sw-participant-controls.d.ts.map +1 -0
- package/dist/components/sw-participant-controls.js +306 -0
- package/dist/components/sw-participant-controls.js.map +1 -0
- package/dist/components/sw-participants.d.ts +55 -0
- package/dist/components/sw-participants.d.ts.map +1 -0
- package/dist/components/sw-participants.js +320 -0
- package/dist/components/sw-participants.js.map +1 -0
- package/dist/components/sw-self-media.d.ts +46 -0
- package/dist/components/sw-self-media.d.ts.map +1 -0
- package/dist/components/sw-self-media.js +106 -0
- package/dist/components/sw-self-media.js.map +1 -0
- package/dist/context/CallStateContextController.d.ts +31 -0
- package/dist/context/CallStateContextController.d.ts.map +1 -0
- package/dist/context/CallStateContextController.js +125 -0
- package/dist/context/CallStateContextController.js.map +1 -0
- package/dist/context/DevicesContextController.d.ts +38 -0
- package/dist/context/DevicesContextController.d.ts.map +1 -0
- package/dist/context/DevicesContextController.js +124 -0
- package/dist/context/DevicesContextController.js.map +1 -0
- package/dist/context/TranscriptController.d.ts +32 -0
- package/dist/context/TranscriptController.d.ts.map +1 -0
- package/dist/context/TranscriptController.js +113 -0
- package/dist/context/TranscriptController.js.map +1 -0
- package/dist/context/UserEventController.d.ts +26 -0
- package/dist/context/UserEventController.d.ts.map +1 -0
- package/dist/context/UserEventController.js +55 -0
- package/dist/context/UserEventController.js.map +1 -0
- package/dist/context/call-state-context.d.ts +75 -0
- package/dist/context/call-state-context.d.ts.map +1 -0
- package/dist/context/call-state-context.js +39 -0
- package/dist/context/call-state-context.js.map +1 -0
- package/dist/context/chat-state.d.ts +41 -0
- package/dist/context/chat-state.d.ts.map +1 -0
- package/dist/context/chat-state.js +61 -0
- package/dist/context/chat-state.js.map +1 -0
- package/dist/context/devices-context.d.ts +28 -0
- package/dist/context/devices-context.d.ts.map +1 -0
- package/dist/context/devices-context.js +6 -0
- package/dist/context/devices-context.js.map +1 -0
- package/dist/context/index.d.ts +9 -1
- package/dist/context/index.d.ts.map +1 -1
- package/dist/context/transcript-context.d.ts +9 -0
- package/dist/context/transcript-context.d.ts.map +1 -0
- package/dist/context/transcript-context.js +6 -0
- package/dist/context/transcript-context.js.map +1 -0
- package/dist/context/types.d.ts +9 -0
- package/dist/context/types.d.ts.map +1 -0
- package/dist/embed/signalwire-web-components-embed.iife.js +3237 -0
- package/dist/embed/signalwire-web-components-embed.iife.js.map +1 -0
- package/dist/embed/signalwire-web-components-embed.umd.cjs +3237 -0
- package/dist/embed/signalwire-web-components-embed.umd.cjs.map +1 -0
- package/dist/embed.d.ts +20 -0
- package/dist/embed.d.ts.map +1 -0
- package/dist/index.d.ts +19 -13
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +84 -35
- package/dist/index.js.map +1 -1
- package/dist/node_modules/dompurify/dist/purify.es.js +597 -0
- package/dist/node_modules/dompurify/dist/purify.es.js.map +1 -0
- package/dist/node_modules/marked/lib/marked.esm.js +1475 -0
- package/dist/node_modules/marked/lib/marked.esm.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-bash.js +220 -0
- package/dist/node_modules/prismjs/components/prism-bash.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-css.js +56 -0
- package/dist/node_modules/prismjs/components/prism-css.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-javascript.js +138 -0
- package/dist/node_modules/prismjs/components/prism-javascript.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-json.js +26 -0
- package/dist/node_modules/prismjs/components/prism-json.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-markdown.js +301 -0
- package/dist/node_modules/prismjs/components/prism-markdown.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-python.js +69 -0
- package/dist/node_modules/prismjs/components/prism-python.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-sql.js +34 -0
- package/dist/node_modules/prismjs/components/prism-sql.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-typescript.js +53 -0
- package/dist/node_modules/prismjs/components/prism-typescript.js.map +1 -0
- package/dist/node_modules/prismjs/components/prism-yaml.js +67 -0
- package/dist/node_modules/prismjs/components/prism-yaml.js.map +1 -0
- package/dist/node_modules/prismjs/prism.js +1165 -0
- package/dist/node_modules/prismjs/prism.js.map +1 -0
- package/dist/react.d.ts +96 -46
- package/dist/theme.css +451 -0
- package/dist/theme.css.js +5 -0
- package/dist/theme.css.js.map +1 -0
- package/dist/types/index.d.ts +9 -33
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/prism.d.ts +4 -0
- package/dist/utils/prism.d.ts.map +1 -0
- package/dist/utils/prism.js +34 -0
- package/dist/utils/prism.js.map +1 -0
- package/dist/utils/theme-loader.d.ts +11 -0
- package/dist/utils/theme-loader.d.ts.map +1 -0
- package/dist/utils/theme-loader.js +17 -0
- package/dist/utils/theme-loader.js.map +1 -0
- package/dist/utils/transcriptToMarkdown.d.ts +14 -0
- package/dist/utils/transcriptToMarkdown.d.ts.map +1 -0
- package/dist/utils/transcriptToMarkdown.js +59 -0
- package/dist/utils/transcriptToMarkdown.js.map +1 -0
- package/dist/utils/use-google-font.d.ts +18 -0
- package/dist/utils/use-google-font.d.ts.map +1 -0
- package/dist/utils/use-google-font.js +12 -0
- package/dist/utils/use-google-font.js.map +1 -0
- package/dist/utils/user-variables.d.ts +20 -0
- package/dist/utils/user-variables.d.ts.map +1 -0
- package/dist/utils/user-variables.js +37 -0
- package/dist/utils/user-variables.js.map +1 -0
- package/dist/utils/video.js +6 -21
- package/dist/utils/video.js.map +1 -1
- package/package.json +105 -42
- package/dist/components/audio-level.d.ts.map +0 -1
- package/dist/components/audio-level.js +0 -203
- package/dist/components/audio-level.js.map +0 -1
- package/dist/components/call-controls.d.ts +0 -163
- package/dist/components/call-controls.d.ts.map +0 -1
- package/dist/components/call-controls.js +0 -606
- package/dist/components/call-controls.js.map +0 -1
- package/dist/components/call-media.d.ts +0 -114
- package/dist/components/call-media.d.ts.map +0 -1
- package/dist/components/call-media.js +0 -219
- package/dist/components/call-media.js.map +0 -1
- package/dist/components/call-status.d.ts +0 -68
- package/dist/components/call-status.d.ts.map +0 -1
- package/dist/components/call-status.js +0 -254
- package/dist/components/call-status.js.map +0 -1
- package/dist/components/click-to-call.d.ts +0 -123
- package/dist/components/click-to-call.d.ts.map +0 -1
- package/dist/components/click-to-call.js +0 -428
- package/dist/components/click-to-call.js.map +0 -1
- package/dist/components/device-selector.d.ts +0 -224
- package/dist/components/device-selector.d.ts.map +0 -1
- package/dist/components/device-selector.js +0 -685
- package/dist/components/device-selector.js.map +0 -1
- package/dist/components/dialpad.d.ts +0 -60
- package/dist/components/dialpad.d.ts.map +0 -1
- package/dist/components/dialpad.js +0 -372
- package/dist/components/dialpad.js.map +0 -1
- package/dist/components/directory.d.ts.map +0 -1
- package/dist/components/directory.js +0 -503
- package/dist/components/directory.js.map +0 -1
- package/dist/components/example-button.d.ts +0 -20
- package/dist/components/example-button.d.ts.map +0 -1
- package/dist/components/example-button.js +0 -74
- package/dist/components/example-button.js.map +0 -1
- package/dist/components/participant-controls.d.ts +0 -94
- package/dist/components/participant-controls.d.ts.map +0 -1
- package/dist/components/participant-controls.js +0 -468
- package/dist/components/participant-controls.js.map +0 -1
- package/dist/components/participants.d.ts +0 -116
- package/dist/components/participants.d.ts.map +0 -1
- package/dist/components/participants.js +0 -394
- package/dist/components/participants.js.map +0 -1
- package/dist/components/self-media.d.ts +0 -78
- package/dist/components/self-media.d.ts.map +0 -1
- package/dist/components/self-media.js +0 -129
- package/dist/components/self-media.js.map +0 -1
- package/dist/constants.js +0 -5
- package/dist/constants.js.map +0 -1
- package/dist/context/call-context.d.ts +0 -13
- package/dist/context/call-context.d.ts.map +0 -1
- package/dist/context/call-context.js +0 -6
- package/dist/context/call-context.js.map +0 -1
- package/dist/types/index.js +0 -12
- package/dist/types/index.js.map +0 -1
- package/dist/utils/debounce.js +0 -13
- package/dist/utils/debounce.js.map +0 -1
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Participants Component
|
|
3
|
-
*
|
|
4
|
-
* Renders member overlays based on layoutLayers from the call context.
|
|
5
|
-
* Excludes self member and provides slot for <self-media> child component.
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```html
|
|
9
|
-
* <participants>
|
|
10
|
-
* <self-media mirror=${true}></self-media>
|
|
11
|
-
* </participants>
|
|
12
|
-
* ```
|
|
13
|
-
*/
|
|
14
|
-
import { LitElement } from 'lit';
|
|
15
|
-
import type { Call } from '../types/index.js';
|
|
16
|
-
export declare class Participants extends LitElement {
|
|
17
|
-
static styles: import("lit").CSSResult;
|
|
18
|
-
/**
|
|
19
|
-
* Consumes call context from parent call-media component
|
|
20
|
-
*/
|
|
21
|
-
private _call?;
|
|
22
|
-
/**
|
|
23
|
-
* Public call property for direct assignment (when not nested in sw-call-media)
|
|
24
|
-
*/
|
|
25
|
-
set call(value: Call | undefined);
|
|
26
|
-
get call(): Call | undefined;
|
|
27
|
-
/**
|
|
28
|
-
* Current layout layers value from observable
|
|
29
|
-
*/
|
|
30
|
-
private _layoutLayersValue;
|
|
31
|
-
/**
|
|
32
|
-
* Current participants from observable
|
|
33
|
-
*/
|
|
34
|
-
private _participantsValue;
|
|
35
|
-
/**
|
|
36
|
-
* ID of participant with open menu
|
|
37
|
-
*/
|
|
38
|
-
private _openMenuId;
|
|
39
|
-
/**
|
|
40
|
-
* RxJS subscriptions for cleanup
|
|
41
|
-
*/
|
|
42
|
-
private subscriptions;
|
|
43
|
-
/**
|
|
44
|
-
* Lifecycle: Component connected to DOM
|
|
45
|
-
*/
|
|
46
|
-
connectedCallback(): void;
|
|
47
|
-
/**
|
|
48
|
-
* Lifecycle: React to property/context changes
|
|
49
|
-
*/
|
|
50
|
-
protected updated(changedProperties: Map<string, unknown>): void;
|
|
51
|
-
/**
|
|
52
|
-
* Lifecycle: Component disconnected from DOM
|
|
53
|
-
*/
|
|
54
|
-
disconnectedCallback(): void;
|
|
55
|
-
/**
|
|
56
|
-
* Subscribe to call observables
|
|
57
|
-
*/
|
|
58
|
-
private setupSubscriptions;
|
|
59
|
-
/**
|
|
60
|
-
* Handle click outside menu to close it
|
|
61
|
-
*/
|
|
62
|
-
private _handleOutsideClick;
|
|
63
|
-
/**
|
|
64
|
-
* Toggle menu for a participant
|
|
65
|
-
*/
|
|
66
|
-
private _toggleMenu;
|
|
67
|
-
/**
|
|
68
|
-
* Get participant by member ID
|
|
69
|
-
*/
|
|
70
|
-
private _getParticipant;
|
|
71
|
-
/**
|
|
72
|
-
* Handle mute audio action
|
|
73
|
-
*/
|
|
74
|
-
private _handleMuteAudio;
|
|
75
|
-
/**
|
|
76
|
-
* Handle mute video action
|
|
77
|
-
*/
|
|
78
|
-
private _handleMuteVideo;
|
|
79
|
-
/**
|
|
80
|
-
* Handle remove participant action
|
|
81
|
-
*/
|
|
82
|
-
private _handleRemove;
|
|
83
|
-
/**
|
|
84
|
-
* Cleanup all subscriptions
|
|
85
|
-
*/
|
|
86
|
-
private cleanupSubscriptions;
|
|
87
|
-
/**
|
|
88
|
-
* Render member overlays for all participants
|
|
89
|
-
*/
|
|
90
|
-
private renderMemberOverlays;
|
|
91
|
-
/**
|
|
92
|
-
* Render menu button SVG icon (three dots)
|
|
93
|
-
*/
|
|
94
|
-
private renderMenuIcon;
|
|
95
|
-
/**
|
|
96
|
-
* Render menu dropdown for a participant
|
|
97
|
-
*/
|
|
98
|
-
private renderMenuDropdown;
|
|
99
|
-
/**
|
|
100
|
-
* Render individual member overlay
|
|
101
|
-
*/
|
|
102
|
-
private renderOverlay;
|
|
103
|
-
/**
|
|
104
|
-
* Render the component
|
|
105
|
-
*/
|
|
106
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Declare global type for TypeScript
|
|
110
|
-
*/
|
|
111
|
-
declare global {
|
|
112
|
-
interface HTMLElementTagNameMap {
|
|
113
|
-
'sw-participants': Participants;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
//# sourceMappingURL=participants.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"participants.d.ts","sourceRoot":"","sources":["../../src/components/participants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAA4B,MAAM,mBAAmB,CAAC;AAIxE,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAqHX;IAEF;;OAEG;IAGH,OAAO,CAAC,KAAK,CAAC,CAAO;IAErB;;OAEG;IACH,IACI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,EAI/B;IACD,IAAI,IAAI,IAAI,IAAI,GAAG,SAAS,CAE3B;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAuB;IAE1C;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;YACW,gBAAgB;IAwB9B;;OAEG;YACW,gBAAgB;IAwB9B;;OAEG;YACW,aAAa;IAoB3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0D1B;;OAEG;IACH,OAAO,CAAC,aAAa;IA0CrB;;OAEG;IACH,MAAM;CAMP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}
|
|
@@ -1,394 +0,0 @@
|
|
|
1
|
-
import { LitElement as d, html as r, css as p } from "lit";
|
|
2
|
-
import { property as c, state as h, customElement as b } from "lit/decorators.js";
|
|
3
|
-
import { consume as m } from "@lit/context";
|
|
4
|
-
import { castParticipants as g, getSelfId as v } from "../types/index.js";
|
|
5
|
-
import { callContext as f } from "../context/call-context.js";
|
|
6
|
-
var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
|
|
7
|
-
for (var o = s > 1 ? void 0 : s ? _(t, i) : t, a = e.length - 1, u; a >= 0; a--)
|
|
8
|
-
(u = e[a]) && (o = (s ? u(t, i, o) : u(o)) || o);
|
|
9
|
-
return s && o && x(t, i, o), o;
|
|
10
|
-
};
|
|
11
|
-
let n = class extends d {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments), this._layoutLayersValue = [], this._participantsValue = [], this._openMenuId = null, this.subscriptions = [];
|
|
14
|
-
}
|
|
15
|
-
set call(e) {
|
|
16
|
-
this._call = e, this.cleanupSubscriptions(), this.setupSubscriptions();
|
|
17
|
-
}
|
|
18
|
-
get call() {
|
|
19
|
-
return this._call;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Lifecycle: Component connected to DOM
|
|
23
|
-
*/
|
|
24
|
-
connectedCallback() {
|
|
25
|
-
super.connectedCallback(), this.setupSubscriptions();
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Lifecycle: React to property/context changes
|
|
29
|
-
*/
|
|
30
|
-
updated(e) {
|
|
31
|
-
super.updated(e), e.has("_call") && this._call && (this.cleanupSubscriptions(), this.setupSubscriptions());
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* Lifecycle: Component disconnected from DOM
|
|
35
|
-
*/
|
|
36
|
-
disconnectedCallback() {
|
|
37
|
-
super.disconnectedCallback(), this.cleanupSubscriptions();
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Subscribe to call observables
|
|
41
|
-
*/
|
|
42
|
-
setupSubscriptions() {
|
|
43
|
-
this._call && (this.subscriptions.push(
|
|
44
|
-
this._call.layoutLayers$.subscribe((e) => {
|
|
45
|
-
this._layoutLayersValue = e, this.requestUpdate();
|
|
46
|
-
})
|
|
47
|
-
), this._call.participants$ && this.subscriptions.push(
|
|
48
|
-
this._call.participants$.subscribe((e) => {
|
|
49
|
-
this._participantsValue = g(e), this.requestUpdate();
|
|
50
|
-
})
|
|
51
|
-
), this._handleOutsideClick = this._handleOutsideClick.bind(this), document.addEventListener("click", this._handleOutsideClick));
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Handle click outside menu to close it
|
|
55
|
-
*/
|
|
56
|
-
_handleOutsideClick(e) {
|
|
57
|
-
const t = e.target;
|
|
58
|
-
!t.closest(".menu-trigger") && !t.closest(".menu-dropdown") && (this._openMenuId = null);
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Toggle menu for a participant
|
|
62
|
-
*/
|
|
63
|
-
_toggleMenu(e, t) {
|
|
64
|
-
t.stopPropagation(), this._openMenuId = this._openMenuId === e ? null : e;
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Get participant by member ID
|
|
68
|
-
*/
|
|
69
|
-
_getParticipant(e) {
|
|
70
|
-
return this._participantsValue.find((t) => t.id === e);
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* Handle mute audio action
|
|
74
|
-
*/
|
|
75
|
-
async _handleMuteAudio(e, t) {
|
|
76
|
-
t.stopPropagation();
|
|
77
|
-
const i = this._getParticipant(e);
|
|
78
|
-
if (i) {
|
|
79
|
-
try {
|
|
80
|
-
i.audioMuted && i.unmute ? await i.unmute() : !i.audioMuted && i.mute && await i.mute(), this.dispatchEvent(
|
|
81
|
-
new CustomEvent("sw-participant-mute-audio", {
|
|
82
|
-
detail: { participant: i, memberId: e },
|
|
83
|
-
bubbles: !0,
|
|
84
|
-
composed: !0
|
|
85
|
-
})
|
|
86
|
-
);
|
|
87
|
-
} catch {
|
|
88
|
-
}
|
|
89
|
-
this._openMenuId = null;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
/**
|
|
93
|
-
* Handle mute video action
|
|
94
|
-
*/
|
|
95
|
-
async _handleMuteVideo(e, t) {
|
|
96
|
-
t.stopPropagation();
|
|
97
|
-
const i = this._getParticipant(e);
|
|
98
|
-
if (i) {
|
|
99
|
-
try {
|
|
100
|
-
i.videoMuted && i.unmuteVideo ? await i.unmuteVideo() : !i.videoMuted && i.muteVideo && await i.muteVideo(), this.dispatchEvent(
|
|
101
|
-
new CustomEvent("sw-participant-mute-video", {
|
|
102
|
-
detail: { participant: i, memberId: e },
|
|
103
|
-
bubbles: !0,
|
|
104
|
-
composed: !0
|
|
105
|
-
})
|
|
106
|
-
);
|
|
107
|
-
} catch {
|
|
108
|
-
}
|
|
109
|
-
this._openMenuId = null;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* Handle remove participant action
|
|
114
|
-
*/
|
|
115
|
-
async _handleRemove(e, t) {
|
|
116
|
-
t.stopPropagation();
|
|
117
|
-
const i = this._getParticipant(e);
|
|
118
|
-
if (i != null && i.remove) {
|
|
119
|
-
try {
|
|
120
|
-
await i.remove(), this.dispatchEvent(
|
|
121
|
-
new CustomEvent("sw-participant-remove", {
|
|
122
|
-
detail: { participant: i, memberId: e },
|
|
123
|
-
bubbles: !0,
|
|
124
|
-
composed: !0
|
|
125
|
-
})
|
|
126
|
-
);
|
|
127
|
-
} catch {
|
|
128
|
-
}
|
|
129
|
-
this._openMenuId = null;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Cleanup all subscriptions
|
|
134
|
-
*/
|
|
135
|
-
cleanupSubscriptions() {
|
|
136
|
-
this.subscriptions.forEach((e) => e.unsubscribe()), this.subscriptions = [], document.removeEventListener("click", this._handleOutsideClick);
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Render member overlays for all participants
|
|
140
|
-
*/
|
|
141
|
-
renderMemberOverlays() {
|
|
142
|
-
if (!this._layoutLayersValue || this._layoutLayersValue.length === 0)
|
|
143
|
-
return null;
|
|
144
|
-
const e = v(this._call);
|
|
145
|
-
return this._layoutLayersValue.filter((t) => t.member_id).map((t) => this.renderOverlay(t, t.member_id === e));
|
|
146
|
-
}
|
|
147
|
-
/**
|
|
148
|
-
* Render menu button SVG icon (three dots)
|
|
149
|
-
*/
|
|
150
|
-
renderMenuIcon() {
|
|
151
|
-
return r`
|
|
152
|
-
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
153
|
-
<circle cx="12" cy="6" r="2" />
|
|
154
|
-
<circle cx="12" cy="12" r="2" />
|
|
155
|
-
<circle cx="12" cy="18" r="2" />
|
|
156
|
-
</svg>
|
|
157
|
-
`;
|
|
158
|
-
}
|
|
159
|
-
/**
|
|
160
|
-
* Render menu dropdown for a participant
|
|
161
|
-
*/
|
|
162
|
-
renderMenuDropdown(e) {
|
|
163
|
-
const t = this._getParticipant(e), i = this._openMenuId === e;
|
|
164
|
-
return r`
|
|
165
|
-
<div class="menu-dropdown ${i ? "open" : ""}">
|
|
166
|
-
<button
|
|
167
|
-
class="menu-item"
|
|
168
|
-
@click=${(s) => this._handleMuteAudio(e, s)}
|
|
169
|
-
aria-label="${t != null && t.audioMuted ? "Unmute audio" : "Mute audio"}"
|
|
170
|
-
>
|
|
171
|
-
${t != null && t.audioMuted ? r`<svg viewBox="0 0 24 24" fill="currentColor">
|
|
172
|
-
<path
|
|
173
|
-
d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
|
|
174
|
-
/>
|
|
175
|
-
</svg>` : r`<svg viewBox="0 0 24 24" fill="currentColor">
|
|
176
|
-
<path
|
|
177
|
-
d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"
|
|
178
|
-
/>
|
|
179
|
-
</svg>`}
|
|
180
|
-
${t != null && t.audioMuted ? "Unmute" : "Mute"}
|
|
181
|
-
</button>
|
|
182
|
-
<button
|
|
183
|
-
class="menu-item"
|
|
184
|
-
@click=${(s) => this._handleMuteVideo(e, s)}
|
|
185
|
-
aria-label="${t != null && t.videoMuted ? "Enable video" : "Disable video"}"
|
|
186
|
-
>
|
|
187
|
-
${t != null && t.videoMuted ? r`<svg viewBox="0 0 24 24" fill="currentColor">
|
|
188
|
-
<path
|
|
189
|
-
d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"
|
|
190
|
-
/>
|
|
191
|
-
</svg>` : r`<svg viewBox="0 0 24 24" fill="currentColor">
|
|
192
|
-
<path
|
|
193
|
-
d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
|
|
194
|
-
/>
|
|
195
|
-
</svg>`}
|
|
196
|
-
${t != null && t.videoMuted ? "Enable video" : "Disable video"}
|
|
197
|
-
</button>
|
|
198
|
-
<button
|
|
199
|
-
class="menu-item danger"
|
|
200
|
-
@click=${(s) => this._handleRemove(e, s)}
|
|
201
|
-
aria-label="Remove participant"
|
|
202
|
-
>
|
|
203
|
-
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
204
|
-
<path
|
|
205
|
-
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
|
206
|
-
/>
|
|
207
|
-
</svg>
|
|
208
|
-
Remove
|
|
209
|
-
</button>
|
|
210
|
-
</div>
|
|
211
|
-
`;
|
|
212
|
-
}
|
|
213
|
-
/**
|
|
214
|
-
* Render individual member overlay
|
|
215
|
-
*/
|
|
216
|
-
renderOverlay(e, t = !1) {
|
|
217
|
-
const i = `
|
|
218
|
-
position: absolute;
|
|
219
|
-
top: ${e.y}%;
|
|
220
|
-
left: ${e.x}%;
|
|
221
|
-
width: ${e.width}%;
|
|
222
|
-
height: ${e.height}%;
|
|
223
|
-
opacity: ${e.visible ? 1 : 0};
|
|
224
|
-
overflow: visible;
|
|
225
|
-
transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
|
|
226
|
-
pointer-events: auto;
|
|
227
|
-
z-index: 10;
|
|
228
|
-
`, s = e.member_id, o = `member-overlay member-overlay-${s}${t ? " is-self" : ""}`;
|
|
229
|
-
return r`
|
|
230
|
-
<div class="${o}" part="overlay" style="${i}">
|
|
231
|
-
${t ? null : r`
|
|
232
|
-
<button
|
|
233
|
-
class="menu-trigger"
|
|
234
|
-
part="menu-trigger"
|
|
235
|
-
@click=${(a) => this._toggleMenu(s, a)}
|
|
236
|
-
aria-label="Participant menu"
|
|
237
|
-
aria-expanded="${this._openMenuId === s}"
|
|
238
|
-
aria-haspopup="menu"
|
|
239
|
-
>
|
|
240
|
-
${this.renderMenuIcon()}
|
|
241
|
-
</button>
|
|
242
|
-
${this.renderMenuDropdown(s)}
|
|
243
|
-
`}
|
|
244
|
-
<span class="member-name" part="name"></span>
|
|
245
|
-
<span class="member-indicators" part="indicators"></span>
|
|
246
|
-
<slot name="controls-${s}"></slot>
|
|
247
|
-
</div>
|
|
248
|
-
`;
|
|
249
|
-
}
|
|
250
|
-
/**
|
|
251
|
-
* Render the component
|
|
252
|
-
*/
|
|
253
|
-
render() {
|
|
254
|
-
return r`
|
|
255
|
-
${this.renderMemberOverlays()}
|
|
256
|
-
<slot></slot>
|
|
257
|
-
`;
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
n.styles = p`
|
|
261
|
-
:host {
|
|
262
|
-
display: contents; /* Doesn't create a box, children inherit positioning */
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.member-overlay {
|
|
266
|
-
box-sizing: border-box;
|
|
267
|
-
/* Thick inset box-shadow with semi-transparent background for debugging */
|
|
268
|
-
box-shadow: inset 0 0 0 8px rgba(255, 0, 0, 0.8);
|
|
269
|
-
background-color: rgba(255, 0, 0, 0.1);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.member-overlay.is-self {
|
|
273
|
-
/* Self overlay uses blue border to distinguish from other participants */
|
|
274
|
-
box-shadow: inset 0 0 0 8px rgba(0, 0, 255, 0.8);
|
|
275
|
-
background-color: rgba(0, 0, 255, 0.1);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
/* Circular menu trigger button */
|
|
279
|
-
.menu-trigger {
|
|
280
|
-
position: absolute;
|
|
281
|
-
top: 12px;
|
|
282
|
-
left: 12px;
|
|
283
|
-
width: 36px;
|
|
284
|
-
height: 36px;
|
|
285
|
-
border-radius: 50%;
|
|
286
|
-
background: rgba(0, 0, 0, 0.6);
|
|
287
|
-
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
288
|
-
color: white;
|
|
289
|
-
cursor: pointer;
|
|
290
|
-
display: flex;
|
|
291
|
-
align-items: center;
|
|
292
|
-
justify-content: center;
|
|
293
|
-
transition:
|
|
294
|
-
background 0.2s ease,
|
|
295
|
-
transform 0.2s ease,
|
|
296
|
-
border-color 0.2s ease;
|
|
297
|
-
z-index: 20;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.menu-trigger:hover {
|
|
301
|
-
background: rgba(0, 0, 0, 0.8);
|
|
302
|
-
border-color: rgba(255, 255, 255, 0.6);
|
|
303
|
-
transform: scale(1.1);
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.menu-trigger:focus {
|
|
307
|
-
outline: none;
|
|
308
|
-
border-color: #044cf6;
|
|
309
|
-
box-shadow: 0 0 0 3px rgba(4, 78, 246, 0.4);
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
.menu-trigger svg {
|
|
313
|
-
width: 20px;
|
|
314
|
-
height: 20px;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
/* Dropdown menu */
|
|
318
|
-
.menu-dropdown {
|
|
319
|
-
position: absolute;
|
|
320
|
-
top: 12px;
|
|
321
|
-
left: 56px;
|
|
322
|
-
background: rgba(31, 41, 55, 0.95);
|
|
323
|
-
backdrop-filter: blur(8px);
|
|
324
|
-
border-radius: 8px;
|
|
325
|
-
padding: 8px 0;
|
|
326
|
-
min-width: 160px;
|
|
327
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
328
|
-
z-index: 30;
|
|
329
|
-
opacity: 0;
|
|
330
|
-
visibility: hidden;
|
|
331
|
-
transform: translateX(-10px);
|
|
332
|
-
transition:
|
|
333
|
-
opacity 0.2s ease,
|
|
334
|
-
transform 0.2s ease,
|
|
335
|
-
visibility 0.2s ease;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
.menu-dropdown.open {
|
|
339
|
-
opacity: 1;
|
|
340
|
-
visibility: visible;
|
|
341
|
-
transform: translateX(0);
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.menu-item {
|
|
345
|
-
display: flex;
|
|
346
|
-
align-items: center;
|
|
347
|
-
gap: 8px;
|
|
348
|
-
padding: 8px 16px;
|
|
349
|
-
color: white;
|
|
350
|
-
font-size: 14px;
|
|
351
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
352
|
-
cursor: pointer;
|
|
353
|
-
transition: background 0.15s ease;
|
|
354
|
-
border: none;
|
|
355
|
-
background: none;
|
|
356
|
-
width: 100%;
|
|
357
|
-
text-align: left;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
.menu-item:hover {
|
|
361
|
-
background: rgba(255, 255, 255, 0.1);
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
.menu-item svg {
|
|
365
|
-
width: 16px;
|
|
366
|
-
height: 16px;
|
|
367
|
-
flex-shrink: 0;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
.menu-item.danger {
|
|
371
|
-
color: #ef4444;
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
.menu-item.danger:hover {
|
|
375
|
-
background: rgba(239, 68, 68, 0.2);
|
|
376
|
-
}
|
|
377
|
-
`;
|
|
378
|
-
l([
|
|
379
|
-
m({ context: f, subscribe: !0 }),
|
|
380
|
-
c({ attribute: !1 })
|
|
381
|
-
], n.prototype, "_call", 2);
|
|
382
|
-
l([
|
|
383
|
-
c({ attribute: !1 })
|
|
384
|
-
], n.prototype, "call", 1);
|
|
385
|
-
l([
|
|
386
|
-
h()
|
|
387
|
-
], n.prototype, "_openMenuId", 2);
|
|
388
|
-
n = l([
|
|
389
|
-
b("sw-participants")
|
|
390
|
-
], n);
|
|
391
|
-
export {
|
|
392
|
-
n as Participants
|
|
393
|
-
};
|
|
394
|
-
//# sourceMappingURL=participants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"participants.js","sources":["../../src/components/participants.ts"],"sourcesContent":["/**\n * Participants Component\n *\n * Renders member overlays based on layoutLayers from the call context.\n * Excludes self member and provides slot for <self-media> child component.\n *\n * @example\n * ```html\n * <participants>\n * <self-media mirror=${true}></self-media>\n * </participants>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { Call, LayoutLayer, Participant } from '../types/index.js';\nimport { getSelfId, castParticipants } from '../types/index.js';\nimport { callContext } from '../context/call-context.js';\n\n@customElement('sw-participants')\nexport class Participants extends LitElement {\n static styles = css`\n :host {\n display: contents; /* Doesn't create a box, children inherit positioning */\n }\n\n .member-overlay {\n box-sizing: border-box;\n /* Thick inset box-shadow with semi-transparent background for debugging */\n box-shadow: inset 0 0 0 8px rgba(255, 0, 0, 0.8);\n background-color: rgba(255, 0, 0, 0.1);\n }\n\n .member-overlay.is-self {\n /* Self overlay uses blue border to distinguish from other participants */\n box-shadow: inset 0 0 0 8px rgba(0, 0, 255, 0.8);\n background-color: rgba(0, 0, 255, 0.1);\n }\n\n /* Circular menu trigger button */\n .menu-trigger {\n position: absolute;\n top: 12px;\n left: 12px;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.6);\n border: 2px solid rgba(255, 255, 255, 0.3);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background 0.2s ease,\n transform 0.2s ease,\n border-color 0.2s ease;\n z-index: 20;\n }\n\n .menu-trigger:hover {\n background: rgba(0, 0, 0, 0.8);\n border-color: rgba(255, 255, 255, 0.6);\n transform: scale(1.1);\n }\n\n .menu-trigger:focus {\n outline: none;\n border-color: #044cf6;\n box-shadow: 0 0 0 3px rgba(4, 78, 246, 0.4);\n }\n\n .menu-trigger svg {\n width: 20px;\n height: 20px;\n }\n\n /* Dropdown menu */\n .menu-dropdown {\n position: absolute;\n top: 12px;\n left: 56px;\n background: rgba(31, 41, 55, 0.95);\n backdrop-filter: blur(8px);\n border-radius: 8px;\n padding: 8px 0;\n min-width: 160px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n z-index: 30;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-10px);\n transition:\n opacity 0.2s ease,\n transform 0.2s ease,\n visibility 0.2s ease;\n }\n\n .menu-dropdown.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(0);\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n color: white;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n cursor: pointer;\n transition: background 0.15s ease;\n border: none;\n background: none;\n width: 100%;\n text-align: left;\n }\n\n .menu-item:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .menu-item svg {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n }\n\n .menu-item.danger {\n color: #ef4444;\n }\n\n .menu-item.danger:hover {\n background: rgba(239, 68, 68, 0.2);\n }\n `;\n\n /**\n * Consumes call context from parent call-media component\n */\n @consume({ context: callContext, subscribe: true })\n @property({ attribute: false })\n private _call?: Call;\n\n /**\n * Public call property for direct assignment (when not nested in sw-call-media)\n */\n @property({ attribute: false })\n set call(value: Call | undefined) {\n this._call = value;\n this.cleanupSubscriptions();\n this.setupSubscriptions();\n }\n get call(): Call | undefined {\n return this._call;\n }\n\n /**\n * Current layout layers value from observable\n */\n private _layoutLayersValue: LayoutLayer[] = [];\n\n /**\n * Current participants from observable\n */\n private _participantsValue: Participant[] = [];\n\n /**\n * ID of participant with open menu\n */\n @state()\n private _openMenuId: string | null = null;\n\n /**\n * RxJS subscriptions for cleanup\n */\n private subscriptions: Subscription[] = [];\n\n /**\n * Lifecycle: Component connected to DOM\n */\n connectedCallback() {\n super.connectedCallback();\n this.setupSubscriptions();\n }\n\n /**\n * Lifecycle: React to property/context changes\n */\n protected updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('_call') && this._call) {\n // Clean up old subscriptions first\n this.cleanupSubscriptions();\n // Set up new subscriptions\n this.setupSubscriptions();\n }\n }\n\n /**\n * Lifecycle: Component disconnected from DOM\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n this.cleanupSubscriptions();\n }\n\n /**\n * Subscribe to call observables\n */\n private setupSubscriptions(): void {\n // Continue observing even if _call is undefined initially\n // This allows component to react when call becomes available\n if (!this._call) return;\n\n this.subscriptions.push(\n this._call.layoutLayers$.subscribe((layers: LayoutLayer[]) => {\n this._layoutLayersValue = layers;\n this.requestUpdate();\n })\n );\n\n // Subscribe to participants for menu actions\n if (this._call.participants$) {\n this.subscriptions.push(\n this._call.participants$.subscribe((participants: unknown[]) => {\n this._participantsValue = castParticipants(participants);\n this.requestUpdate();\n })\n );\n }\n\n // Close menu on outside click\n this._handleOutsideClick = this._handleOutsideClick.bind(this);\n document.addEventListener('click', this._handleOutsideClick);\n }\n\n /**\n * Handle click outside menu to close it\n */\n private _handleOutsideClick(e: Event): void {\n const target = e.target as Element;\n if (!target.closest('.menu-trigger') && !target.closest('.menu-dropdown')) {\n this._openMenuId = null;\n }\n }\n\n /**\n * Toggle menu for a participant\n */\n private _toggleMenu(memberId: string, e: Event): void {\n e.stopPropagation();\n this._openMenuId = this._openMenuId === memberId ? null : memberId;\n }\n\n /**\n * Get participant by member ID\n */\n private _getParticipant(memberId: string): Participant | undefined {\n return this._participantsValue.find((p) => p.id === memberId);\n }\n\n /**\n * Handle mute audio action\n */\n private async _handleMuteAudio(memberId: string, e: Event): Promise<void> {\n e.stopPropagation();\n const participant = this._getParticipant(memberId);\n if (!participant) return;\n\n try {\n if (participant.audioMuted && participant.unmute) {\n await participant.unmute();\n } else if (!participant.audioMuted && participant.mute) {\n await participant.mute();\n }\n this.dispatchEvent(\n new CustomEvent('sw-participant-mute-audio', {\n detail: { participant, memberId },\n bubbles: true,\n composed: true\n })\n );\n } catch {\n // Silently handle error\n }\n this._openMenuId = null;\n }\n\n /**\n * Handle mute video action\n */\n private async _handleMuteVideo(memberId: string, e: Event): Promise<void> {\n e.stopPropagation();\n const participant = this._getParticipant(memberId);\n if (!participant) return;\n\n try {\n if (participant.videoMuted && participant.unmuteVideo) {\n await participant.unmuteVideo();\n } else if (!participant.videoMuted && participant.muteVideo) {\n await participant.muteVideo();\n }\n this.dispatchEvent(\n new CustomEvent('sw-participant-mute-video', {\n detail: { participant, memberId },\n bubbles: true,\n composed: true\n })\n );\n } catch {\n // Silently handle error\n }\n this._openMenuId = null;\n }\n\n /**\n * Handle remove participant action\n */\n private async _handleRemove(memberId: string, e: Event): Promise<void> {\n e.stopPropagation();\n const participant = this._getParticipant(memberId);\n if (!participant?.remove) return;\n\n try {\n await participant.remove();\n this.dispatchEvent(\n new CustomEvent('sw-participant-remove', {\n detail: { participant, memberId },\n bubbles: true,\n composed: true\n })\n );\n } catch {\n // Silently handle error\n }\n this._openMenuId = null;\n }\n\n /**\n * Cleanup all subscriptions\n */\n private cleanupSubscriptions(): void {\n this.subscriptions.forEach((sub) => sub.unsubscribe());\n this.subscriptions = [];\n document.removeEventListener('click', this._handleOutsideClick);\n }\n\n /**\n * Render member overlays for all participants\n */\n private renderMemberOverlays() {\n if (!this._layoutLayersValue || this._layoutLayersValue.length === 0) {\n return null;\n }\n\n // Get selfId dynamically from call.self to handle cases where self is available after subscription setup\n const selfId = getSelfId(this._call);\n\n return this._layoutLayersValue\n .filter((layer) => layer.member_id)\n .map((layer) => this.renderOverlay(layer, layer.member_id === selfId));\n }\n\n /**\n * Render menu button SVG icon (three dots)\n */\n private renderMenuIcon() {\n return html`\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"12\" cy=\"6\" r=\"2\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n <circle cx=\"12\" cy=\"18\" r=\"2\" />\n </svg>\n `;\n }\n\n /**\n * Render menu dropdown for a participant\n */\n private renderMenuDropdown(memberId: string) {\n const participant = this._getParticipant(memberId);\n const isOpen = this._openMenuId === memberId;\n\n return html`\n <div class=\"menu-dropdown ${isOpen ? 'open' : ''}\">\n <button\n class=\"menu-item\"\n @click=${(e: Event) => this._handleMuteAudio(memberId, e)}\n aria-label=\"${participant?.audioMuted ? 'Unmute audio' : 'Mute audio'}\"\n >\n ${participant?.audioMuted\n ? html`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\n />\n </svg>`\n : html`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z\"\n />\n </svg>`}\n ${participant?.audioMuted ? 'Unmute' : 'Mute'}\n </button>\n <button\n class=\"menu-item\"\n @click=${(e: Event) => this._handleMuteVideo(memberId, e)}\n aria-label=\"${participant?.videoMuted ? 'Enable video' : 'Disable video'}\"\n >\n ${participant?.videoMuted\n ? html`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z\"\n />\n </svg>`\n : html`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\n />\n </svg>`}\n ${participant?.videoMuted ? 'Enable video' : 'Disable video'}\n </button>\n <button\n class=\"menu-item danger\"\n @click=${(e: Event) => this._handleRemove(memberId, e)}\n aria-label=\"Remove participant\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n />\n </svg>\n Remove\n </button>\n </div>\n `;\n }\n\n /**\n * Render individual member overlay\n */\n private renderOverlay(layer: LayoutLayer, isSelf: boolean = false) {\n const style = `\n position: absolute;\n top: ${layer.y}%;\n left: ${layer.x}%;\n width: ${layer.width}%;\n height: ${layer.height}%;\n opacity: ${layer.visible ? 1 : 0};\n overflow: visible;\n transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;\n pointer-events: auto;\n z-index: 10;\n `;\n\n // member_id is guaranteed to exist by the filter in renderMemberOverlays\n const memberId = layer.member_id!;\n const classes = `member-overlay member-overlay-${memberId}${isSelf ? ' is-self' : ''}`;\n\n return html`\n <div class=\"${classes}\" part=\"overlay\" style=\"${style}\">\n ${!isSelf\n ? html`\n <button\n class=\"menu-trigger\"\n part=\"menu-trigger\"\n @click=${(e: Event) => this._toggleMenu(memberId, e)}\n aria-label=\"Participant menu\"\n aria-expanded=\"${this._openMenuId === memberId}\"\n aria-haspopup=\"menu\"\n >\n ${this.renderMenuIcon()}\n </button>\n ${this.renderMenuDropdown(memberId)}\n `\n : null}\n <span class=\"member-name\" part=\"name\"></span>\n <span class=\"member-indicators\" part=\"indicators\"></span>\n <slot name=\"controls-${memberId}\"></slot>\n </div>\n `;\n }\n\n /**\n * Render the component\n */\n render() {\n return html`\n ${this.renderMemberOverlays()}\n <slot></slot>\n `;\n }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sw-participants': Participants;\n }\n}\n"],"names":["Participants","LitElement","value","changedProperties","layers","participants","castParticipants","target","memberId","e","p","participant","sub","selfId","getSelfId","layer","html","isOpen","isSelf","style","classes","css","__decorateClass","consume","callContext","property","state","customElement"],"mappings":"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"}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Self Media Component
|
|
3
|
-
*
|
|
4
|
-
* Renders local video overlay with positioning from layoutLayers.
|
|
5
|
-
* Supports optional mirror transform for the video element.
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```html
|
|
9
|
-
* <self-media mirror=${true}></self-media>
|
|
10
|
-
* ```
|
|
11
|
-
*/
|
|
12
|
-
import { LitElement } from 'lit';
|
|
13
|
-
import type { Call } from '../types/index.js';
|
|
14
|
-
export declare class SelfMedia extends LitElement {
|
|
15
|
-
static styles: import("lit").CSSResult;
|
|
16
|
-
/**
|
|
17
|
-
* Mirror the local video horizontally
|
|
18
|
-
*/
|
|
19
|
-
mirror: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Consumes call context from parent call-media component
|
|
22
|
-
*/
|
|
23
|
-
private _call?;
|
|
24
|
-
/**
|
|
25
|
-
* Public call property for direct assignment (when not nested in sw-call-media)
|
|
26
|
-
*/
|
|
27
|
-
set call(value: Call | undefined);
|
|
28
|
-
get call(): Call | undefined;
|
|
29
|
-
/**
|
|
30
|
-
* Current local stream value from observable
|
|
31
|
-
*/
|
|
32
|
-
private _localStreamValue;
|
|
33
|
-
/**
|
|
34
|
-
* Current layout layers value from observable
|
|
35
|
-
*/
|
|
36
|
-
private _layoutLayersValue;
|
|
37
|
-
/**
|
|
38
|
-
* RxJS subscriptions for cleanup
|
|
39
|
-
*/
|
|
40
|
-
private subscriptions;
|
|
41
|
-
/**
|
|
42
|
-
* Lifecycle: Component connected to DOM
|
|
43
|
-
*/
|
|
44
|
-
connectedCallback(): void;
|
|
45
|
-
/**
|
|
46
|
-
* Lifecycle: React to property/context changes
|
|
47
|
-
*/
|
|
48
|
-
protected updated(changedProperties: Map<string, unknown>): void;
|
|
49
|
-
/**
|
|
50
|
-
* Lifecycle: Component disconnected from DOM
|
|
51
|
-
*/
|
|
52
|
-
disconnectedCallback(): void;
|
|
53
|
-
/**
|
|
54
|
-
* Subscribe to call observables
|
|
55
|
-
*/
|
|
56
|
-
private setupSubscriptions;
|
|
57
|
-
/**
|
|
58
|
-
* Cleanup all subscriptions
|
|
59
|
-
*/
|
|
60
|
-
private cleanupSubscriptions;
|
|
61
|
-
/**
|
|
62
|
-
* Find self layer in layout layers
|
|
63
|
-
*/
|
|
64
|
-
private getSelfLayer;
|
|
65
|
-
/**
|
|
66
|
-
* Render the component
|
|
67
|
-
*/
|
|
68
|
-
render(): import("lit-html").TemplateResult<1> | null;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Declare global type for TypeScript
|
|
72
|
-
*/
|
|
73
|
-
declare global {
|
|
74
|
-
interface HTMLElementTagNameMap {
|
|
75
|
-
'sw-self-media': SelfMedia;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
//# sourceMappingURL=self-media.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"self-media.d.ts","sourceRoot":"","sources":["../../src/components/self-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,mBAAmB,CAAC;AAI3D,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAYX;IAEF;;OAEG;IAC0B,MAAM,UAAS;IAE5C;;OAEG;IAGH,OAAO,CAAC,KAAK,CAAC,CAAO;IAErB;;OAEG;IACH,IACI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,EAI/B;IACD,IAAI,IAAI,IAAI,IAAI,GAAG,SAAS,CAE3B;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAA4B;IAErD;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,iBAAiB;IAKjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE;;OAEG;IACH,oBAAoB;IAKpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACH,MAAM;CAyCP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAC;KAC5B;CACF"}
|