Bring SableCall Up-to-Date With ElementCall Upstream (#12)

* Posthog add reconnect event (element-hq#3953)

* Add Posthog events for Call reconnect including the reason

* Expose single trackCallReconnecting() entry point on PosthogAnalytics

* Track reconnect duration and align with existing analytics pattern

* Refactor combined$ to return [connected, reason] tuple

* Update firefoxUserPrefs to allow getUserMedia and enumerateDevices on CI
---------

Co-authored-by: Valere <bill.carson@valrsoft.com>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Timo K <toger5@hotmail.de>

* Fix tests

* Fix tap-to-show call controls on iOS (ReactMouseEvent -> ReactPointerEvent)

* review

* Update dependency livekit-client to v2.18.10

* Use correct preposition

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Link to self-hosting guide

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Add missing article

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Add missing article

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Reorder sentence fragments for better readability

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Fix typo

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Add missing colon

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Add missing apostrophe

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Remove extra space and add colon

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Add missing apostrophe

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Fix linking link

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Minor documentation fixes

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Fix media foreground elements being obscured by header/footer

* devx: Allow to run local dev EC on mobile in same wifi

* Review (everything except translation feedback)

* lint

* refactor video blur toggle

* translation fixes

* use previous device selection logic

* cleanup

* Update MediaMuteAndSwitchButton.test.tsx

* List additional dependencies needed for development

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Log unhandled promise rejections in rageshakes (element-hq#3972)

For more comprehensive rageshake logs. Copied from Element Web's rageshake.ts.

* Bump babel/plugin-transform-modules-systemjs (element-hq#3974)

* Posthog: drop $initial_person_info from outgoing events (element-hq#3968)

* Posthog: drop $initial_person_info from outgoing events

* Posthog: migrate from sanitize_properties to before_send

* strip URL fields from $set / $set_once

* enable mask_personal_data_properties

* review

* update tests to check for `delete` (not anymore `=null`)
rename: `applyPrivacyFilters`->`santizeSensitiveData`

---------

Co-authored-by: Timo K <toger5@hotmail.de>

* Allow PostHog dependency updates again

* Ensure that foreground elements of media tile do not overlap app bar

Because the type of header that we use in Element X (an 'app bar') lives in a different place in the document than the other headers, it needs a special branch to propagate the right insets.

* Stop the settings button from appearing while footer is fading out

The designs actually never want us to show the settings button in the footer if an app bar is in use (as in Element X mobile apps), so just avoid showing it at all in that case.

* reproduce bug internal element-hq#578

Regression: Controls are shown in Mobile PIP

* fix(regression): control buttons should be hidden on mobile PIP

* review

* Update and simplify tests

* merge fixups

* review: eqeqe

Co-authored-by: Robin <robin@robin.town>

* del: windowMode$ from public callViewModel
replace with edgeToEdge$

* Avoid overlapping spotlight tiles with the app bar

The default inset that is given to the fixed layout layer needs to account for the app bar now.

* Ensure landscape layout is always edge-to-edge on mobile

The spotlight landscape layout was edge-to-edge previously, and should remain that way.

* fix visibility test

* Update InCallView.test.tsx

* fix backgroundBlurToggleClick -> videoBlurToggleClick

* Update src/state/ViewModel.ts

Co-authored-by: Robin <robin@robin.town>

* element-call moved away from yarn to pnpm

* element-call set packageManager to pnpm

* updating pnpm-lock

* test: Add test for new option

review: Remove uneeed {" "}

* eslint

* review: better doc

* touch commit to unbock gh

* bump playwright

update playwright container image

* bump playwright

update playwright container image

* test: use toHaveCount instead of count()).toBe

* Fix play of second leave sound

* fixup: Missing translation

* Update Gradle to v8.14.5

* Add onPipMediaOrientationUpdate to controls api.

* add docs

* Update all non-major dependencies

* Switch from global to globalThis to fix import issues

* Update dependency @vector-im/compound-design-tokens to v10.2.0

* Update dependency livekit-client to v2.19.0

* Show the right fallback labels in device switcher menus

* Request full device names when device switchers are open

* temp add tests

* Fix footer stories

* Add test

* Fix type error

* fix tests

* lint

* fix race

* Avoid usage of SWIFT_RELEASE_TOKEN in dry runs

* Fix corner radius on screenshare overlay in widget mode

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Update CallViewModel.test.ts

* fix error with no media

* Fix illegible text color for raised hand duration

Fixes: https://github.com/element-hq/voip-internal/issues/579

* feat(errors): Report livekit as such rather than like unknown errors

* Reorder entries

* fixup: ensure dynamic keys are extracted by i18n parser

* fixup snapshots

* feat(mute): add syncing state and disable toggle during async mute

* storybook: Add storybook for audio/video busy

* fixup: Update snapshot with button busy state

* fix: Initial unmute is reverted

* Add `matrix_rtc_mode` config option (element-hq#4014)

* Move MatrixRTCMode enum from settings.ts to ConfigOptions.ts

* Add matrix_rtc_mode config option

* add matrix_rtc_mode to config.sample.json

* Update src/settings/DeveloperSettingsTab.tsx

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Update src/settings/DeveloperSettingsTab.test.tsx

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* reviewer comments

---------

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* review: remove unneeded early return

* review: add test for busy behavior for Mic and Video buttons

* review: cleanup removed redundant default properties

* Update Compound

* Update dev settings snapshot

* Update codecov-action to v7

* Update LiveKit client to v2.19.1

* Remove deprecated @types/uuid

* Replace deprecated i18next-parser with i18next-cli

* Update LiveKit client to v2.19.2 (element-hq#4031)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Add primary button icon configuration and set it left arrow in lobby

* tests

* Show typed error when matrix_2_0 mode is forced without homeserver MSC4354 support (element-hq#4017)

Show typed error when matrix_2_0 mode is forced without homeserver MSC4354 support

* Remove deprecated @types/content-type dependency

* Update DeveloperSettingsTab.test.tsx.snap

* more test coverage

* Improve internal model of ringing, expose ringing intent to call UI

I found our code's internal model of ringing a little overgrown (it had superfluous states like 'unknown') and difficult to extend with metadata or callbacks relating to ring attempts. By modeling ringing instead as a stream of ring attempts, where each attempt has an intent, a recipient, and an eventual outcome (accept/decline/timeout), I find it more natural to work with.

This makes room for a future 'try again' callback to allow ringing someone again after a timeout, and also forced me to look for a simpler solution to the duplicate leave sound effects. I exposed the intent of the ringing attempt to the call UI so I can later use it in the header.

* Fix a minor resource leak with display names and avatars

I noticed that calls to createDisplayNameBehavior$ and createAvatarUrlBehavior$ were technically leaking resources since they reused the ObservableScope from their outer scope, which in practice lasts for the entire lifetime of the CallViewModel. This would not have had any noticeable effect unless you had other participants leave and rejoin the same call many thousands of times.

* rename db

* Update src/state/media/observeRtpStreamStats.ts

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Add lint rule to prevent ObservableScope resource leaks

The rule of thumb to avoid resource leaks is that you should never call ObservableScope methods in a callback unless the ObservableScope is directly passed to or created inside that callback. I had a go at codifying this as a lint rule.

* Update Compound to v10.2.2

* Switch to pnpm 11.6.0

* Update @vitejs/plugin-react to 0.6.2

* Update LobbyView.tsx

* Set up label sync

* update back arrow size

* refactor using enum vs jsx node

* update tests

* fix prettier

* Update dependency vite to v8.0.16 [SECURITY]

* review

* Switch from prettier to oxfmt

* Document why we override resolved versions

* Reformat

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* I cannot belive GH... Does this commit fix the processing situation?

* update comment + fix tests

* Remove accidentally added file

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* Revert to original fix for duplicate leave sounds

My attempted simpler fix of applying takeUntil(autoLeave$) to leaveSoundEffect$ didn't work.

* Only consider a call accepted if the *intended* recipient picks up

* Restore ability to play sound with custom volume

This was missing from the revert in 8b0f505.

* Format

* Clarify which Matrix-LiveKit members are remote

It was rather confusing that matrixLivekitMembers$ gives you objects of type RemoteMatrixLivekitMembers and yet the *local* member would often be among these. I've attempted to clear this up. To my knowledge this wasn't creating any bugs.

* Fix docs for autoLeave URL param

The parameter as seen in URLs has a different name from what's used in the code.

* Move ringing status indicator to header on mobile

On mobile, the ringing status indicator is supposed to display in the header rather than on a tile. The exact layout differs between Android and iOS. To get it right I had to refactor AppBar to use CSS grid templates.

(Also, I changed my mind about the exact ringing data I needed out of CallViewModel - sorry. A little move of the ringtone audio renderer into its own component was necessary to accommodate that.)

* Update remaining variable names for remote Matrix-LiveKit members

* Address remaining resource leak error

* Improve test coverage

* Fix vertical alignment of ringing status icons on Chromium and Safari

* Show ringing status even on spotlight tiles (except in app bar mode)

* Invert the colors of the speaker toggle button

* Show the subtitle of the app bar on small screens

Previously we were hiding the entire app bar on mobile phones in landscape orientation. However now that the app bar supports a small 'subtitle' element, we should show only the subtitle in this case to match the designs.

The subtitle still hides on tap, just like the footer.

* Add PiP border in 1on1 layouts

Fixes: element-hq#4008

* Make it clearer why the app bar elements need to be hidden individually

* Remove redundant styles

* Eliminate noOutline constant

* Fix formatting

* Switch from eslint to oxlint

* Use regex to test node name

* Remove duplicate paths config

* Port over copyright rule

* fix(voice): Default to earpiece for voice only call

* Use the correct company name

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

* playwright: New toast

* Hide local tile from mobile voice calls in landscape orientation

To match the designs. Just like in portrait, it wouldn't contribute anything meaningful.

* Remove obsolete avatar patch in favor of MSC4039

* formatting and restore workflows

* Fix github workflows to use pnpm, pin actions, and publish manually

* Pin remaining pnpm actions and ignore unfenced codecov secret

* Ensure Codecov doesn't break CI if token is missing

* Remove pnpm version from GitHub Actions config to prevent version mismatch

* Fix Zizmor errors and use real SHAs

* Ignore pnpm version mismatch on git-hosted dependencies

* Format files

* fix tests

* formatting...

* fix duplicate thing

* readd timeout with delay

---------

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
Co-authored-by: fkwp <fkwp@users.noreply.github.com>
Co-authored-by: Valere <bill.carson@valrsoft.com>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Timo K <toger5@hotmail.de>
Co-authored-by: fkwp <github-fkwp@w4ve.de>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: Valere Fedronic <valeref@matrix.org>
Co-authored-by: cronkenstein <cronkenstein.ac@proton.me>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: 7w1 <noreply@sl.sable.moe>

Author: 10 people

.eslintrc.cjs

@@ -1,11 +1,9 @@
-#!/usr/bin/sh
+#!/usr/bin/env bash
 
-FILE=".links.yaml"
-if test -f "$FILE"; then
-  mv .links.yaml .links.temp-disabled.yaml
-  # echo "running yarn"
-  x=$(yarn)
-  y=$(git add yarn.lock)
-  echo "[yarn-linker] The pre-commit hook has disabled .links.yaml and MODIFIED the yarn.lock file. Review the staged changes (the hook added yarn.lock, was this desired?) and run \`git commit \` again if they look okay. The post-commit hook will re-enable your links."
+# Checks if there currently is linking configured. Informs the user to disable linking before committing.
+
+PNPMFILE=.pnpmfile.cjs
+if test -f "$PNPMFILE"; then
+  echo "[pnpm-linker] The pre-commit hook detected $PNPMFILE which implies you have linked packages in your pnpm-lock.yaml. Run pnpm links:off and commit again. See also linking.md."
   exit 1
 fi

.githooks/post-commit

@@ -1,39 +1,46 @@
-<!-- Thanks for submitting a PR! Please ensure the following requirements are met in order for us to review your PR -->
+<!-- Thanks for submitting a PR! Please read CONTRIBUTING.md before you start. -->
+
+> [!IMPORTANT]
+> **Features and UI changes require a pre-approved issue.**
+> Every PR must have a linked issue
+> that a maintainer has reviewed and approved **before you started writing code**.
+> PRs that don't meet this requirement will not be reviewed.
+> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) for ElementCall decided for this approach.
 
 ## Content
 
 <!-- Describe shortly what has been changed -->
 
 ## Motivation and context
 
-<!-- Provide link to the corresponding issue if applicable or explain the context -->
+<!-- Provide a link to the pre-approved issue, or explain the context for a bug fix -->
 
 ## Screenshots / GIFs
 
 <!--
 
-You can use a table like this to show screenshots comparison.
-Uncomment this markdown table below and edit the last line `|||`:
-|copy screenshot of before here|copy screenshot of after here|
+You can use a table like this to show a before/after comparison.
+Uncomment the markdown table below and fill in the last line:
 
 |Before|After|
 |-|-|
 |||
- -->
+
+-->
 
 ## Tests
 
-<!-- Explain how you tested your development -->
+<!-- Explain how you tested your changes -->
 
 - Step 1
 - Step 2
 - Step ...
--
 
 ## Checklist
 
-- [ ] I have read through [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md).
-- [ ] Pull request includes screenshots or videos if containing UI changes
-- [ ] Tests written for new code (and old code if feasible).
+- [ ] A linked, pre-approved issue exists for this feature or UI change.
+- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) in full.
+- [ ] Pull request includes screenshots or videos for any UI changes.
+- [ ] Tests written for new code (and existing touched code where feasible).
 - [ ] Linter and other CI checks pass.
 - [ ] I have licensed the changes to Element by completing the [Contributor License Agreement (CLA)](https://cla-assistant.io/element-hq/element-call)