mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Valere
979b521563
Adds component/index.tsx as a fourth build target: <ElementCall client roomId /> and an initializeElementCall to await once beforehand. It gives Element Call everything it would otherwise take from the page it is on — the parameters, the host bridge, media devices, translations, a container to confine itself to — and hands it the host's client rather than finding one of its own. React, the Matrix SDK and LiveKit stay external, since the host has them and a second copy of any would not merely be wasteful: React would hold two sets of hooks and the client would run two sync loops. Every subpath has to be listed by name, because the pattern and callback forms of rollupOptions.external are silently ignored here — a lesson worth the comment that records it. Element Call's own navigation runs in a MemoryRouter, so being embedded cannot disturb the host's URL. ClientContext and GroupCallView both navigate, so some router has to be present. The bundle is not yet a reasonable size: library mode base64-inlines assets referenced through import.meta.url, so MediaPipe's vision runtime lands in it whole. Left for its own change, since the fix — loading the background blur transformer lazily — is worth doing for the standalone app too.
44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { createContext, use } from "react";
|
|
|
|
/**
|
|
* The element that Element Call treats as the root of its own interface.
|
|
*
|
|
* Element Call decorates this element with the theme, layout and background
|
|
* attributes its stylesheets key off, and portals its modals into it. When
|
|
* Element Call owns the page this is simply the document body; the intent is
|
|
* that when embedded in a host application it becomes the container the host
|
|
* mounted it into, so that Element Call does not reach outside its own subtree.
|
|
*
|
|
* The stylesheets find this element by its `data-element-call-root` attribute,
|
|
* which {@link useTheme} sets along with the platform and theme, so they no
|
|
* longer depend on it being the body.
|
|
*
|
|
* What remains body-specific is the standalone page's own furniture: the
|
|
* `body` rule in `index.css` still sets the page background and margin, and
|
|
* `index.html` starts the body hidden with `no-theme` until the theme lands.
|
|
* Neither applies when a host mounts Element Call into a container of its own.
|
|
*/
|
|
const RootElementContext = createContext<HTMLElement | null>(null);
|
|
|
|
/**
|
|
* Supplies the element Element Call should confine itself to. The standalone
|
|
* and widget builds need no provider, since for them that element is the body.
|
|
*/
|
|
export const RootElementProvider = RootElementContext.Provider;
|
|
|
|
/**
|
|
* The element Element Call should decorate and portal into.
|
|
*
|
|
* Defaults to the document body, so that the standalone and widget builds work
|
|
* without a provider.
|
|
*/
|
|
export const useRootElement = (): HTMLElement =>
|
|
use(RootElementContext) ?? document.body;
|