* Add an end-to-end Element Call test with a real MatrixRTC backend
Element Web's Playwright coverage of Element Call has only ever used a stand-in:
`sample-files/fake-element-call.html`, a page that does just enough for the widget
plumbing to be exercised. Nothing in the suite has ever carried media.
This adds one real call between two users, through the Element Call the build under
test ships (`@element-hq/element-call-embedded`, copied to `widgets/element-call/`),
against a real MatrixRTC backend:
- `testcontainers/livekit.ts` — a LiveKit SFU advertising loopback so the browser
reaches it through published ports on macOS as well as Linux.
- `testcontainers/lk-jwt-service.ts` — the authorisation service, validating OpenID
tokens over Synapse's federation API.
- `testcontainers/matrix-rtc.ts` — starts the two and produces the Synapse
configuration that announces the transport (MSC4143) and enables the MSCs Element
Call needs.
- `services.ts` — a `matrixRTC` worker option turning all of that on.
`routeConfigJson` no longer hard-codes the dev server's origin: it resolves
`config.json` against the context's `baseURL`, so a `BASE_URL` other than the default
works, and other origins a test loads keep their own.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Make Renovate actually see the new testcontainer images
The custom manager's `depName` group is `[^@]+`, which matches newlines and
quotes, so it is only bounded by the next `@` in the file. In `synapse.ts` and
`mas.ts` an `@element-hq/…` import happens to sit above the image literal and
caps it; `livekit.ts` and `lk-jwt-service.ts` import `testcontainers` and `yaml`,
so the match instead starts at that import and swallows everything up to the
image name. Renovate gets a nonsense package name, finds nothing, and the pins
quietly rot.
Exclude quotes and whitespace from both groups. All four digest-pinned files now
extract correctly, synapse and mas unchanged.
Bump lk-jwt-service to 0.7.0 while here.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Address the bundled Element Call by directory, not by index.html
The full-call spec passed against the webpack dev server and failed in CI, where
the production build is hosted by `serve`.
`ElementCall.generateWidgetUrl` built `./widgets/element-call/index.html#…`.
`serve` has `cleanUrls` on by default, so it 301s that to the extensionless
`/widgets/element-call`. Element Call's `index.html` references its chunks
relatively (`./assets/…`), and against a base with no trailing slash the browser
resolves those to `/widgets/assets/…` — 404. Element Call never boots, so the
lobby never appears and the test times out.
Address the directory instead. It is the same deployment, the trailing slash
sidesteps the redirect, and the hash is overwritten further down either way. This
is not only a test concern: Netlify also strips `.html` by default, and that is
what serves the PR previews and develop.element.io.
Doing it here rather than in the spec keeps the test honest — it exercises the
widget URL Element Web really generates, with no `Developer.elementCallUrl`
override. Setting `cleanUrls` in a `serve.json` was the other candidate and is
not viable: any value other than the default also stops `serve` resolving `/` to
`index.html`, which breaks every other test.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* EC react component Plan
* The implemantation Element Call React Component with mocked EC react
component
* final plan
* tests
* update plan to not do e2e tests in EW but in EC
* Start using the real react component instead of the mock (activation
react EC)
* add playwright e2e tests
* fix transport discovery (pass in via config. Hack the well-known source
for servers not supporting get_transports)
* stylesheet fixes
* Update element-call-react-plan.md
* add docuemnt pip
* Depend on the Element Call component from its git branch
`@element-hq/element-call-component` was a `link:` to a hand-built
`dist/` in a machine-local worktree. It is now a git dependency on the
`component` directory of element-hq/element-call, on the
`valere/component_ec_M1` branch (element-call#4233), whose `prepare`
script builds the component on install; pnpm has to be allowed to run
it (`allowBuilds`). The ref goes back to `main` once that PR has merged.
The branch first needs the commit that adds the component's manifest
and build (`toger5/component-package-manifest` in the EC checkout);
until it is pushed, `path:/component` resolves to no manifest and the
lockfile keeps the old `link:` entry. Both are written up in the plan.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* use the component_ec_m1 dep lock file entries
* fix element call reloading
* pass the right theme to element-call component
* bump element-call-component
* Return a call from the browser PiP window to where it left from
Closing the Document Picture-in-Picture window always dropped the call
into Element Web's floating PiP, even when it had filled the room's call
view a moment earlier and the user was still looking at that room.
The store now remembers whether the call left from the call view, and
on release opens the call view again when it did — unless the call has
ended, the user has moved to another room, or the user opened the call
view themselves (which is what closed the window). A call that was
floating in Element Web's PiP before goes back there, as it did.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* Draw the call header's outline icons a little smaller
The room header's icons are Compound's solid set, but minimise,
maximise and pop-out exist only as outlines: Compound has no filled
counterparts, and nothing else in the set says what they say. At the
solid icons' size their open strokes look heavy-handed next to them.
Scaling the glyphs down slightly inside the buttons lets them sit
comfortably next to their neighbours without changing the buttons'
footprint.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* Hand a persisted tree to the remaining placeholder on unmount
When two PersistedElements for the same key mount in one React commit
(a call returning from the browser PiP window into the call view, while
Element Web's floating PiP briefly shows it as well), whichever rendered
the tree last owns the child's ref. If that one is then the one to
unmount, it hid the tree, and the survivor, never having been handed the
child, could not show it again.
On unmount, if another placeholder is mounted, render the tree once more
with the most recently mounted survivor's wrapper so it takes over the
child and positions it; only hide the tree when nothing is left to show
it.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* Adjust to updates done in EC
(simpler public api. More resilient to prop changes)
* package.json back to EC branch valere/component_ec_M1
* fix closing in component mode
* Configure pnpm store location in workflows
Keep the pnpm store out of node_modules to prevent incorrect
bundling of element-call-component when building git dependencies.
* update docs on EC packaging improvements
* fix ci
* Update pnpm-lock and tsconfig
* Move the browser Picture-in-Picture window and call header changes to a follow-up
Keeps this PR to Element Call as a React component. The Document
Picture-in-Picture window (DocumentPipStore, useDocumentPip, the
PersistedElement detach/reattach and placeholder hand-over, the
PipContainer awareness of it), the call header's minimise, maximise and
pop-out buttons with their outline-icon sizing, the browser API typings,
their strings, tests and e2e spec move to toger5/ec-document-pip.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* bump to main branch EC
* fix CI failing due to pnpm store
* remove docs and dev journals
* review
* CI: silence zizmor's github-env finding on the pnpm store action
zizmor flags every $GITHUB_ENV write inside a composite action, because it
cannot see which triggers the action will be used from. The value written
here is a constant built from RUNNER_TEMP with nothing attacker-controlled
in it, so suppress the finding the way the repo does elsewhere.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Keep the ready promise's rejection from going unobserved
close() rejects the pending ready promise so that a start() still waiting on
the component learns the call went away instead of hanging until the timeout.
Usually nothing is waiting, and the unobserved rejection then surfaced as an
unhandled promise rejection, which crashed the Vitest worker running
Call.test.ts. Mark the promise as handled before rejecting it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* review
* review: double import
* move types to EC repo (just import them here)
* review: refactor ElementCallAppTile to a MVVM shared compoenent
* merge useEffectiveTheme and useTheme hooks
* cnvert the ElementCallMock to MVVM
* use unstable EC branch. DO NOT MERGE UNTI THIS COMMIT IS REVERTED
this branch is used to test CI with the new exports from EC.
We need to first merge:
https://github.com/element-hq/element-call/pull/4269 before we can put
this back to main (revert this commit).
* Move Node and pnpm setup into a single action
The setup-node-pnpm action now includes pnpm/action-setup and
actions/setup-node alongside the store relocation, eliminating
boilerplate across workflows and fixing the setup order in one place.
* fix broken lock file
* test for review change "reject on promise race"
* review: letter spacing
* Import the EC CSS layered
* Use self-repository syntax
* Fix import path
* Fix webpack
* Revert actions syntax as Sonar doesn't seem compatible with it
* Switch to Flex
* Switch to a11y label
* Take client from SdkContext
* Make strings in mock view translatable
* Keep class names in EW
* Move mock view to shared components and add stories
* Exempt voip|element_call_mock|title
* Fix tests
* Clarify doc string
* Add labs.md entry
* Use text element
* Remove redundant test
* Remove redundant test
* Delint
* Format
* Update snapshots
* Bump element-call
---------
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>
* Migrate final batch of tests from Jest to Vitest
* Update test-utils imports
* Move test-utils
* Remove the remainder of Jest
* Make tsc & knip happy
Conflicts:
pnpm-lock.yaml
* Fix bad merge conflict
* Iterate
* Actually run stylelint on all EW pcss files
And make them comply with the linter
Noticed as husky would run stylelint on all pcss files, but `lint:styles` would not.
* Delint
* Remove legacy Module & Customisation API
in favour of the new runtime modules system
* Delint
* Remove unused i18n string
* Fix tests
* Fix test
* Fix tests
* Iterate
* Fix bad merge
* Bump Module API version
* Bump module-api compatibility ranges
* Update docs
* Fix semver ranges
* Update test module API version
* Too many versions
* Too many versions again
* Reopen the right panel when the current card is given new state
setCard's "same phase, new state" branch swapped the state of the card at
the top of the history but left the panel's own isOpen alone. If the panel
had been closed, the card was updated behind it and nothing appeared, so
the action looked like it had done nothing.
Show the panel in that branch, as the other two branches already do.
Also drop the unguarded index into a possibly empty history while we are
here: a matching phase can only have come from this room's own history, so
guard on it rather than trusting `hist[hist.length - 1]` to exist.
* Add a PDF viewer to the right panel
Open a PDF attachment in the right panel instead of having to download it
first. The viewer is pdf.js, rendering continuously with fit-to-width zoom,
pinch and ctrl-wheel zoom, and a page selector; the reading position is
remembered per file so reopening a document comes back where you left off.
The file body gains an optional "open" control next to download, which the
view model only asks for on PDFs shown as files in a timeline — not in an
export, and not in the download-only panels. FileBodyView renders nothing
for it otherwise, so every other file body is unchanged.
Encrypted attachments work unchanged: the handle the viewer is given reads
the bytes through MediaEventHelper's sourceBlob, which decrypts first.
The card stores only the source event id, so a restored panel re-derives
the media and drops the card if the event is no longer in the room.
* Add icon into the container instead of outside.
* Update translate + new images
* Load the right panel store lazily when opening a PDF
utils/pdfViewer is reached from the message body view models, and importing
RightPanelStore from it closed a cycle back to the message bodies:
utils/pdfViewer -> RightPanelStore -> SDKContextClass -> LegacyCallHandler
-> utils/notifications -> Unread -> EventTileFactory -> MessageEvent
-> MVoiceOrAudioBody -> MVoiceMessageBody -> extends MAudioBody
MVoiceMessageBody evaluated `extends MAudioBody` while MAudioBody was still
initialising, so the whole MAudioBody suite failed to load with "Class
extends value undefined is not a constructor or null".
Pull the store in through a dynamic import instead, as StoresApi already
does for the room list store. Nothing else under views/messages or
viewmodels imports RightPanelStore, which is what kept this cycle closed
until now.
openPdfViewer becomes async as a result; the click handler fires it with
`void` since opening the panel is not something the caller waits on.
* Code split the PDF viewer behind Suspense
Importing PdfViewer from the card put pdf.js into every module graph that
reaches the right panel, so RoomView pulled it in and the Jest suites failed
to parse it:
SyntaxError: Cannot use 'import.meta' outside a module
pdf.js locates its worker with `new URL(..., import.meta.url)`, which Jest
cannot compile, since it transpiles to CJS. That took out ExtrasApi-test and
anything else reaching RoomView.
Load the viewer with React.lazy instead, as the beacon components already do
for maplibre-gl. pdf.js is large and of no use until someone opens a PDF, so
keeping it out of the main bundle is worth doing on its own account; the Jest
suites stop seeing it as a side effect.
* Put the PDF viewer behind a lab
Ship the viewer disabled by default, as feature_pdf_viewer under the
Messaging group in Labs, alongside the other flags that change how message
content renders.
Two gates:
- FileBodyViewModel leads showOpen with the flag, and showInlineDownload
follows it, so with the lab off the file pill renders exactly as it did
before: attachment icon, file name, no actions.
- RightPanelStore drops a stored PdfViewer card when the flag is off, ahead
of the check for a displayable event. Without it, someone who had a PDF
open when they turned the lab off would get the viewer back on reload.
The existing "drops a PdfViewer card with no event to display" test now
enables the lab first; the gate had made it pass for the wrong reason.
* Drop the brand name from the PDF viewer lab
The i18n check forbids hardcoding "Element" in translations, since the brand
is configurable, and "Open PDFs in Element" tripped it:
"labs|pdf_viewer": contains forbidden hardcoded word
Keys that genuinely need the brand are allow-listed in the i18n job, but this
one does not: the label reads fine without it, and naming a panel the viewer
happens to use is the description's job anyway.
* Update card header to show file name + change edit icon to expend icon on filepreview
* Update storybook images to reflect new icon
* Update apps/web/src/viewmodels/message-body/FileBodyViewModel.ts
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
* Removed @link as it did not go anywhere.
* Drop the self-referential @link in PdfViewerState docs
* Comment why the file tile actions are hidden in forward previews
* Test the RightPanel PdfViewer phase renders the viewer card
* Take the PDF viewer lab as a prop on FileBodyViewModel
* Dispatch an action to open the PDF viewer instead of importing the store
* Check the PDF signature before parsing the attachment
* MVVM PDF Viewer
* Fix Sonar
* Cap decoded image size and pin XFA off when opening a PDF
* Update apps/web/src/i18n/strings/en_EN.json
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
* Use the real SettingsStore for the PDF viewer lab in tests
* Read the PDF viewer lab in the view, not the view model
* Declare the mock viewer's page field with the others
* Use the minified pdf.js worker
* Allow clicking on links in the PDF.
* Force use of a PDF worker
* Reduce logging noise.
* Cap PDF size
* Check blob size too
* Add support for clicking links in the canvas
* Report file size
* Tests
* cleanup
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: Half-Shot <will@half-shot.uk>
