mirror of
https://github.com/suitenumerique/meet.git
synced 2026-07-27 04:09:26 +00:00
Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7e422e5846 | |||
| d915b93caa | |||
| 9d9ec794aa | |||
| 570d57d5f5 | |||
| 7469ccfdf1 | |||
| 0d3bd2727e | |||
| 660b022eb1 | |||
| a28b611ecc | |||
| dfa6092c72 | |||
| 7d8c166c7f | |||
| f7dd1f8fd7 | |||
| 416411b843 | |||
| 45e0665cf0 | |||
| a3eabf8f66 | |||
| 7c81947681 | |||
| 2424817523 |
@@ -223,8 +223,6 @@ jobs:
|
||||
DB_PORT: 5432
|
||||
REDIS_URL: redis://localhost:6379/1
|
||||
STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
|
||||
LIVEKIT_API_SECRET: secret
|
||||
LIVEKIT_API_KEY: devkey
|
||||
AWS_S3_ENDPOINT_URL: http://localhost:9000
|
||||
AWS_S3_ACCESS_KEY_ID: meet
|
||||
AWS_S3_SECRET_ACCESS_KEY: password
|
||||
|
||||
@@ -8,9 +8,14 @@ and this project adheres to
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [1.13.0] - 2026-03-31
|
||||
|
||||
### Changed
|
||||
|
||||
- ⬆️(dependencies) update python dependencies
|
||||
- ♿️(frontend) add explicit region for call controls #1216
|
||||
- ♿️(frontend) improve accessibility of the reaction toolbar #1216
|
||||
- ♿️(frontend) enhance sidepanel navigation accessibility #1216
|
||||
|
||||
### Fixed
|
||||
|
||||
|
||||
@@ -73,7 +73,8 @@ create-env-files: \
|
||||
env.d/development/crowdin \
|
||||
env.d/development/postgresql \
|
||||
env.d/development/kc_postgresql \
|
||||
env.d/development/summary
|
||||
env.d/development/summary \
|
||||
env.d/development/kube-secret
|
||||
.PHONY: create-env-files
|
||||
|
||||
bootstrap: ## Prepare Docker images for the project
|
||||
@@ -265,6 +266,9 @@ env.d/development/kc_postgresql:
|
||||
env.d/development/summary:
|
||||
cp -n env.d/development/summary.dist env.d/development/summary
|
||||
|
||||
env.d/development/kube-secret:
|
||||
cp -n env.d/development/kube-secret.dist env.d/development/kube-secret
|
||||
|
||||
# -- Internationalization
|
||||
|
||||
env.d/development/crowdin:
|
||||
@@ -359,10 +363,6 @@ install-external-secrets: ## install the kubernetes secrets from Vaultwarden
|
||||
./bin/install-external-secrets.sh
|
||||
.PHONY: build-k8s-cluster
|
||||
|
||||
start-tilt: ## start the kubernetes cluster using kind
|
||||
tilt up --namespace=meet -f ./bin/Tiltfile
|
||||
.PHONY: build-k8s-cluster
|
||||
|
||||
start-tilt-keycloak: ## start the kubernetes cluster using kind, without Pro Connect for authentication, use keycloak
|
||||
DEV_ENV=dev-keycloak tilt up --namespace=meet -f ./bin/Tiltfile
|
||||
.PHONY: build-k8s-cluster
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<img alt="meet logo" src="./docs/assets/banner-meet-fr.png" maxWidth="100%">
|
||||
</p>
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/suitenumerique/meet/stargazers/">
|
||||
<img src="https://img.shields.io/github/stars/suitenumerique/meet" alt="">
|
||||
@@ -11,11 +12,11 @@
|
||||
<img alt="GitHub closed issues" src="https://img.shields.io/github/issues-closed/suitenumerique/meet"/>
|
||||
<a href="https://github.com/suitenumerique/meet/blob/main/LICENSE">
|
||||
<img alt="GitHub closed issues" src="https://img.shields.io/github/license/suitenumerique/meet"/>
|
||||
</a>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://livekit.io/">LiveKit</a> - <a href="https://matrix.to/#/#meet-official:matrix.org">Chat with us</a> - <a href="https://github.com/orgs/suitenumerique/projects/3/views/2">Roadmap</a> - <a href="https://github.com/suitenumerique/meet/blob/main/CHANGELOG.md">Changelog</a> - <a href="https://github.com/suitenumerique/meet/issues/new?assignees=&labels=bug&template=Bug_report.md">Bug reports</a>
|
||||
<a href="https://livekit.io/">LiveKit</a> - <a href="https://matrix.to/#/#meet-official:matrix.org">Chat with us</a> - <a href="https://github.com/orgs/suitenumerique/projects/3/views/2">Roadmap</a> - <a href="https://github.com/suitenumerique/meet/blob/main/CHANGELOG.md">Changelog</a> - <a href="https://github.com/suitenumerique/meet/issues/new?assignees=&labels=bug&template=Bug_report.md">Bug reports</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -27,75 +28,25 @@
|
||||
## La Suite Meet: Simple Video Conferencing
|
||||
|
||||
Powered by [LiveKit](https://livekit.io/), La Suite Meet offers Zoom-level performance with high-quality video and audio. No installation required—simply join calls directly from your browser. Check out LiveKit's impressive optimizations in their [blog post](https://blog.livekit.io/livekit-one-dot-zero/).
|
||||
|
||||
### Features
|
||||
|
||||
- Optimized for stability in large meetings (+100 p.)
|
||||
- Support for multiple screen sharing streams
|
||||
- Non-persistent, secure chat
|
||||
- End-to-end encryption with hybrid key distribution
|
||||
- End-to-end encryption (coming soon)
|
||||
- Meeting recording
|
||||
- Meeting transcription & Summary (currently in beta)
|
||||
- Telephony integration
|
||||
- Secure participation with robust authentication and access control
|
||||
- Customizable frontend style
|
||||
- LiveKit Advances features including :
|
||||
- speaker detection
|
||||
- simulcast
|
||||
- end-to-end optimizations
|
||||
- speaker detection
|
||||
- simulcast
|
||||
- end-to-end optimizations
|
||||
- selective subscription
|
||||
- SVC codecs (VP9, AV1)
|
||||
|
||||
### End-to-end encryption
|
||||
|
||||
La Suite Meet supports end-to-end encryption (E2EE) for meetings, ensuring that the media server (LiveKit SFU) cannot access audio/video content. Two encryption modes are available:
|
||||
|
||||
#### Basic encryption
|
||||
|
||||
- Passphrase-based — the encryption key is embedded in the meeting URL hash (`#passphrase`)
|
||||
- Uses LiveKit's built-in Worker + `crypto.subtle` (AES-GCM) for frame encryption
|
||||
- Sharing the meeting link shares the encryption key
|
||||
- No account or onboarding required
|
||||
- Security depends on keeping the link private
|
||||
|
||||
#### Advanced encryption
|
||||
|
||||
- Key managed by [La Suite Encryption](https://github.com/suitenumerique/encryption) — the symmetric key never leaves the vault iframe
|
||||
- Uses XChaCha20-Poly1305 (libsodium) via the VaultClient iframe for frame encryption
|
||||
- Key distribution uses `vaultClient.shareKeys()` (hybrid PKI with X25519 + post-quantum slot)
|
||||
- All participants must complete encryption onboarding (key generation + backup) before joining
|
||||
- Requires a Chromium-based browser (Chrome, Edge, Brave) — uses the Insertable Streams API
|
||||
|
||||
**Frame encryption (both modes):**
|
||||
|
||||
- Codec header bytes (VP8 payload descriptor) are preserved unencrypted — required for proper RTP packetization
|
||||
- Only the media payload is encrypted, with a per-frame random nonce
|
||||
- The server (LiveKit SFU) only forwards encrypted data it cannot read
|
||||
|
||||
**Trust levels (advanced mode):**
|
||||
| Badge | Level | Description |
|
||||
|-------|-------|-------------|
|
||||
| 🟢 Green shield | Verified | User completed encryption onboarding (public key registered). Identity cryptographically verified. |
|
||||
| 🔵 Blue shield | Authenticated | User signed in via ProConnect/OIDC. Identity server-verified. |
|
||||
| 🟡 Orange warning | Anonymous | User not signed in. Self-declared name. Admin should verify identity before accepting. |
|
||||
|
||||
**Security guarantees:**
|
||||
|
||||
- Encrypted rooms enforce restricted access (lobby approval required)
|
||||
- Trust information (`is_authenticated`, `email`) comes from server-signed JWT tokens — cannot be spoofed
|
||||
- Recording and transcription are not available in encrypted rooms (server cannot decrypt media)
|
||||
|
||||
**Configuration:**
|
||||
|
||||
```env
|
||||
ENCRYPTION_ENABLED=true
|
||||
ENCRYPTION_VAULT_URL=https://data.encryption.example.fr
|
||||
ENCRYPTION_INTERFACE_URL=https://encryption.example.fr
|
||||
```
|
||||
|
||||
When the encryption service is deployed and configured, rooms can use advanced encryption. Without it, only basic (passphrase) encryption is available.
|
||||
|
||||
La Suite Meet is fully self-hostable and released under the MIT License, ensuring complete control and flexibility. It's simple to [get started](https://visio.numerique.gouv.fr/) or [request a demo](mailto:visio@numerique.gouv.fr).
|
||||
La Suite Meet is fully self-hostable and released under the MIT License, ensuring complete control and flexibility. It's simple to [get started](https://visio.numerique.gouv.fr/) or [request a demo](mailto:visio@numerique.gouv.fr).
|
||||
|
||||
We’re continuously adding new features to enhance your experience, with the latest updates coming soon!
|
||||
|
||||
@@ -112,6 +63,7 @@ On the 25th of January 2026, David Amiel, France’s Minister for Civil Service
|
||||
- [Philosophy](#philosophy)
|
||||
- [Open source](#open-source)
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
## Docs
|
||||
@@ -130,15 +82,15 @@ We use Kubernetes for our [production instance](https://visio.numerique.gouv.fr/
|
||||
> Some advanced features (ex: recording, transcription) lack detailed documentation. We're working hard to provide comprehensive guides soon.
|
||||
|
||||
#### Known instances
|
||||
|
||||
We hope to see many more, here is an incomplete list of public La Suite Meet instances. Feel free to make a PR to add ones that are not listed below🙏
|
||||
|
||||
| Url | Org | Access |
|
||||
| ------------------------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [visio.numerique.gouv.fr](https://visio.numerique.gouv.fr/) | DINUM | French public agents working for the central administration and the extended public sphere. ProConnect is required to login in or sign up |
|
||||
| [visio.suite.anct.gouv.fr](https://visio.suite.anct.gouv.fr/) | ANCT | French public agents working for the territorial administration and the extended public sphere. ProConnect is required to login in or sign up |
|
||||
| [visio.lasuite.coop](https://visio.lasuite.coop/) | lasuite.coop | Free and open demo to all. Content and accounts are reset after one month |
|
||||
| [mosacloud.cloud](https://mosa.cloud/) | mosa.cloud | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |
|
||||
| Url | Org | Access |
|
||||
|---------------------------------------------------------------| --- | ------- |
|
||||
| [visio.numerique.gouv.fr](https://visio.numerique.gouv.fr/) | DINUM | French public agents working for the central administration and the extended public sphere. ProConnect is required to login in or sign up|
|
||||
| [visio.suite.anct.gouv.fr](https://visio.suite.anct.gouv.fr/) | ANCT | French public agents working for the territorial administration and the extended public sphere. ProConnect is required to login in or sign up|
|
||||
| [visio.lasuite.coop](https://visio.lasuite.coop/) | lasuite.coop | Free and open demo to all. Content and accounts are reset after one month |
|
||||
| [mosacloud.cloud](https://mosa.cloud/) | mosa.cloud | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
@@ -148,6 +100,7 @@ We <3 contributions of any kind, big and small:
|
||||
- Open a PR (see our instructions on [developing La Suite Meet locally](https://github.com/suitenumerique/meet/blob/main/docs/developping_locally.md))
|
||||
- Submit a [feature request](https://github.com/suitenumerique/meet/issues/new?assignees=&labels=enhancement&template=Feature_request.md) or [bug report](https://github.com/suitenumerique/meet/issues/new?assignees=&labels=bug&template=Bug_report.md)
|
||||
|
||||
|
||||
## Philosophy
|
||||
|
||||
We’re relentlessly focused on building the best open-source video conferencing product—La Suite Meet. Growth comes from creating something people truly need, not just from chasing metrics.
|
||||
@@ -156,6 +109,7 @@ Our users come first. We’re committed to making La Suite Meet as accessible an
|
||||
|
||||
Most of the heavy engineering is handled by the incredible LiveKit team, allowing us to focus on delivering a top-tier product. We follow extreme programming practices, favoring pair programming and quick, iterative releases. Challenge our tech and architecture—simplicity is always our top priority.
|
||||
|
||||
|
||||
## Open-source
|
||||
|
||||
Gov 🇫🇷 supports open source! This project is available under [MIT license](https://github.com/suitenumerique/meet/blob/0cc2a7b7b4f4821e2c4d9d790efa739622bb6601/LICENSE).
|
||||
@@ -167,13 +121,14 @@ To learn more, don't hesitate to [reach out](mailto:visio@numerique.gouv.fr).
|
||||
|
||||
Come help us make La Suite Meet even better. We're growing fast and [would love some help](mailto:visio@numerique.gouv.fr).
|
||||
|
||||
|
||||
## Contributors 🧞
|
||||
|
||||
<a href="https://github.com/suitenumerique/meet/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=suitenumerique/meet" />
|
||||
</a>
|
||||
|
||||
## Credits
|
||||
## Credits
|
||||
|
||||
We're using the awesome [LiveKit](https://livekit.io/) implementation. We're also thankful to the teams behind [Django Rest Framework](https://www.django-rest-framework.org/), [Vite.js](https://vite.dev/), and [React Aria](https://github.com/adobe/react-spectrum) — Thanks for your amazing work!
|
||||
This project is tested with BrowserStack.
|
||||
@@ -182,3 +137,4 @@ This project is tested with BrowserStack.
|
||||
|
||||
Code in this repository is published under the MIT license by DINUM (Direction interministériel du numérique).
|
||||
Documentation (in the docs/) directory is released under the [Etalab-2.0 license](https://spdx.org/licenses/etalab-2.0.html).
|
||||
|
||||
|
||||
+8
-2
@@ -2,7 +2,7 @@ load('ext://uibutton', 'cmd_button', 'bool_input', 'location')
|
||||
load('ext://namespace', 'namespace_create', 'namespace_inject')
|
||||
namespace_create('meet')
|
||||
|
||||
DEV_ENV = os.getenv('DEV_ENV', 'dev')
|
||||
DEV_ENV = os.getenv('DEV_ENV', 'dev-keycloak')
|
||||
|
||||
if DEV_ENV == 'dev-dinum':
|
||||
update_settings(suppress_unused_image_warnings=["localhost:5001/meet-frontend-generic:latest"])
|
||||
@@ -95,7 +95,13 @@ docker_build(
|
||||
)
|
||||
clean_old_images('localhost:5001/meet-livekit')
|
||||
|
||||
k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))
|
||||
load('ext://secret', 'secret_yaml_generic')
|
||||
k8s_yaml(secret_yaml_generic(
|
||||
name="secret-dev",
|
||||
from_env_file="../env.d/development/kube-secret"
|
||||
))
|
||||
|
||||
k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev-keycloak} template .'))
|
||||
|
||||
k8s_resource('minio-bucket', resource_deps=['minio'])
|
||||
k8s_resource('meet-backend', resource_deps=['postgresql', 'minio', 'redis', 'livekit-livekit-server'])
|
||||
|
||||
+3
-20
@@ -60,7 +60,7 @@
|
||||
},
|
||||
{
|
||||
"username": "user-e2e-chromium",
|
||||
"email": "user.test@chromium.test",
|
||||
"email": "user@chromium.e2e",
|
||||
"firstName": "E2E",
|
||||
"lastName": "Chromium",
|
||||
"enabled": "true",
|
||||
@@ -74,7 +74,7 @@
|
||||
},
|
||||
{
|
||||
"username": "user-e2e-webkit",
|
||||
"email": "user.test@webkit.test",
|
||||
"email": "user@webkit.e2e",
|
||||
"firstName": "E2E",
|
||||
"lastName": "Webkit",
|
||||
"enabled": "true",
|
||||
@@ -88,7 +88,7 @@
|
||||
},
|
||||
{
|
||||
"username": "user-e2e-firefox",
|
||||
"email": "user.test@firefox.test",
|
||||
"email": "user@firefox.e2e",
|
||||
"firstName": "E2E",
|
||||
"lastName": "Firefox",
|
||||
"enabled": "true",
|
||||
@@ -845,23 +845,6 @@
|
||||
"offline_access",
|
||||
"microprofile-jwt"
|
||||
]
|
||||
},
|
||||
{
|
||||
"clientId": "encryption",
|
||||
"name": "Encryption Service",
|
||||
"enabled": true,
|
||||
"publicClient": true,
|
||||
"standardFlowEnabled": true,
|
||||
"directAccessGrantsEnabled": false,
|
||||
"redirectUris": [
|
||||
"http://encryption.localhost:7200/auth/callback"
|
||||
],
|
||||
"webOrigins": [
|
||||
"http://encryption.localhost:7200",
|
||||
"http://data.encryption.localhost:7200"
|
||||
],
|
||||
"protocol": "openid-connect",
|
||||
"fullScopeAllowed": true
|
||||
}
|
||||
],
|
||||
"clientScopes": [
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
WHISPERX_BASE_URL=https://configure-your-url.com
|
||||
WHISPERX_API_KEY=<key>
|
||||
LLM_BASE_URL=https://configure-your-url.com
|
||||
LLM_API_KEY=<key>
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
[project]
|
||||
name = "agents"
|
||||
version = "1.12.0"
|
||||
version = "1.13.0"
|
||||
requires-python = ">=3.12"
|
||||
dependencies = [
|
||||
"livekit-agents==1.4.5",
|
||||
|
||||
@@ -73,11 +73,5 @@ def get_frontend_configuration(request):
|
||||
"default_sources": settings.LIVEKIT_DEFAULT_SOURCES,
|
||||
},
|
||||
}
|
||||
if settings.ENCRYPTION_ENABLED and settings.ENCRYPTION_VAULT_URL:
|
||||
frontend_configuration["encryption"] = {
|
||||
"enabled": True,
|
||||
"vault_url": settings.ENCRYPTION_VAULT_URL,
|
||||
"interface_url": settings.ENCRYPTION_INTERFACE_URL,
|
||||
}
|
||||
frontend_configuration.update(settings.FRONTEND_CONFIGURATION)
|
||||
return Response(frontend_configuration)
|
||||
|
||||
@@ -30,8 +30,8 @@ class UserSerializer(serializers.ModelSerializer):
|
||||
|
||||
class Meta:
|
||||
model = models.User
|
||||
fields = ["id", "sub", "email", "full_name", "short_name", "timezone", "language"]
|
||||
read_only_fields = ["id", "sub", "email", "full_name", "short_name"]
|
||||
fields = ["id", "email", "full_name", "short_name", "timezone", "language"]
|
||||
read_only_fields = ["id", "email", "full_name", "short_name"]
|
||||
|
||||
|
||||
class UserLightSerializer(serializers.ModelSerializer):
|
||||
@@ -74,23 +74,6 @@ class ResourceAccessSerializerMixin:
|
||||
raise PermissionDenied(
|
||||
"Only owners of a room can assign other users as owners."
|
||||
)
|
||||
|
||||
# In advanced encrypted rooms, new accesses require an encrypted_symmetric_key
|
||||
# so the new member can decrypt the room's streams. Without it, they'd have
|
||||
# access but no key — which is useless and confusing.
|
||||
# Future: a sharing UI (like Docs) could provide the key via vault shareKeys.
|
||||
if not self.instance and "resource" in data:
|
||||
resource = data["resource"]
|
||||
if (
|
||||
hasattr(resource, 'encryption_mode')
|
||||
and resource.encryption_mode == models.EncryptionMode.ADVANCED
|
||||
and not data.get("encrypted_symmetric_key")
|
||||
):
|
||||
raise serializers.ValidationError(
|
||||
"Adding members to advanced encrypted rooms requires "
|
||||
"an encrypted_symmetric_key for the new user."
|
||||
)
|
||||
|
||||
return data
|
||||
|
||||
def validate_resource(self, resource):
|
||||
@@ -115,7 +98,7 @@ class ResourceAccessSerializer(
|
||||
|
||||
class Meta:
|
||||
model = models.ResourceAccess
|
||||
fields = ["id", "user", "resource", "role", "encrypted_symmetric_key"]
|
||||
fields = ["id", "user", "resource", "role"]
|
||||
read_only_fields = ["id"]
|
||||
|
||||
def update(self, instance, validated_data):
|
||||
@@ -145,27 +128,9 @@ class RoomSerializer(serializers.ModelSerializer):
|
||||
|
||||
class Meta:
|
||||
model = models.Room
|
||||
fields = ["id", "name", "slug", "configuration", "access_level", "pin_code", "encryption_mode"]
|
||||
fields = ["id", "name", "slug", "configuration", "access_level", "pin_code"]
|
||||
read_only_fields = ["id", "slug", "pin_code"]
|
||||
|
||||
def validate_access_level(self, value):
|
||||
"""Encrypted rooms must stay restricted — prevent downgrading access level."""
|
||||
instance = self.instance
|
||||
if instance and instance.encryption_enabled and value != models.RoomAccessLevel.RESTRICTED:
|
||||
raise serializers.ValidationError(
|
||||
"Encrypted rooms require restricted access level to enforce lobby approval."
|
||||
)
|
||||
return value
|
||||
|
||||
def validate_encryption_mode(self, value):
|
||||
"""Once encryption is enabled on a room, it cannot be disabled or downgraded."""
|
||||
instance = self.instance
|
||||
if instance and instance.encryption_enabled and value == models.EncryptionMode.NONE:
|
||||
raise serializers.ValidationError(
|
||||
"Encryption cannot be disabled once enabled on a room."
|
||||
)
|
||||
return value
|
||||
|
||||
def to_representation(self, instance):
|
||||
"""
|
||||
Add users only for administrator users.
|
||||
@@ -207,34 +172,18 @@ class RoomSerializer(serializers.ModelSerializer):
|
||||
if should_access_room:
|
||||
room_id = f"{instance.id!s}"
|
||||
username = request.query_params.get("username", None)
|
||||
|
||||
# In encrypted rooms, authenticated users must use their real name from
|
||||
# the OIDC profile (ProConnect) — they cannot choose an arbitrary name.
|
||||
if instance.encryption_enabled and request.user.is_authenticated:
|
||||
username = request.user.full_name or request.user.email
|
||||
|
||||
output["livekit"] = utils.generate_livekit_config(
|
||||
room_id=room_id,
|
||||
user=request.user,
|
||||
username=username,
|
||||
configuration=configuration,
|
||||
is_admin_or_owner=is_admin_or_owner,
|
||||
encryption_mode=instance.encryption_mode,
|
||||
)
|
||||
else:
|
||||
del output["pin_code"]
|
||||
|
||||
output["is_administrable"] = is_admin_or_owner
|
||||
|
||||
# Include the current user's encrypted symmetric key for advanced E2EE
|
||||
if request.user.is_authenticated and instance.encryption_mode == models.EncryptionMode.ADVANCED:
|
||||
try:
|
||||
access = instance.accesses.get(user=request.user)
|
||||
if access.encrypted_symmetric_key:
|
||||
output["encrypted_symmetric_key"] = access.encrypted_symmetric_key
|
||||
except models.ResourceAccess.DoesNotExist:
|
||||
pass
|
||||
|
||||
return output
|
||||
|
||||
|
||||
@@ -316,8 +265,7 @@ class StartRecordingSerializer(BaseValidationOnlySerializer):
|
||||
class RequestEntrySerializer(BaseValidationOnlySerializer):
|
||||
"""Validate request entry data."""
|
||||
|
||||
username = serializers.CharField(required=True, allow_blank=True)
|
||||
ephemeral_public_key = serializers.CharField(required=False, allow_blank=True, default='')
|
||||
username = serializers.CharField(required=True)
|
||||
|
||||
|
||||
class ParticipantEntrySerializer(BaseValidationOnlySerializer):
|
||||
@@ -325,9 +273,6 @@ class ParticipantEntrySerializer(BaseValidationOnlySerializer):
|
||||
|
||||
participant_id = serializers.UUIDField(required=True)
|
||||
allow_entry = serializers.BooleanField(required=True)
|
||||
encrypted_key = serializers.CharField(required=False, allow_blank=True, default='')
|
||||
admin_ephemeral_public_key = serializers.CharField(required=False, allow_blank=True, default='')
|
||||
encrypted_vault_key = serializers.CharField(required=False, allow_blank=True, default='')
|
||||
|
||||
|
||||
class CreationCallbackSerializer(BaseValidationOnlySerializer):
|
||||
|
||||
@@ -281,32 +281,11 @@ class RoomViewSet(
|
||||
|
||||
def perform_create(self, serializer):
|
||||
"""Set the current user as owner of the newly created room."""
|
||||
encryption_mode = serializer.validated_data.get("encryption_mode", models.EncryptionMode.NONE)
|
||||
|
||||
# Block encrypted room creation if encryption is not enabled on this instance
|
||||
if encryption_mode != models.EncryptionMode.NONE and not settings.ENCRYPTION_ENABLED:
|
||||
raise drf_exceptions.ValidationError(
|
||||
{"encryption_mode": "Encryption is not enabled on this server."}
|
||||
)
|
||||
|
||||
# Advanced encryption requires the vault service to be configured
|
||||
if encryption_mode == models.EncryptionMode.ADVANCED and not getattr(settings, 'ENCRYPTION_VAULT_URL', ''):
|
||||
raise drf_exceptions.ValidationError(
|
||||
{"encryption_mode": "Advanced encryption requires the encryption service to be configured."}
|
||||
)
|
||||
|
||||
# Encrypted rooms must use restricted access to enforce lobby approval
|
||||
# before the encryption key is shared with participants.
|
||||
if encryption_mode != models.EncryptionMode.NONE:
|
||||
serializer.validated_data["access_level"] = models.RoomAccessLevel.RESTRICTED
|
||||
|
||||
room = serializer.save()
|
||||
encrypted_symmetric_key = self.request.data.get("encrypted_symmetric_key", "")
|
||||
models.ResourceAccess.objects.create(
|
||||
resource=room,
|
||||
user=self.request.user,
|
||||
role=models.RoleChoices.OWNER,
|
||||
encrypted_symmetric_key=encrypted_symmetric_key,
|
||||
)
|
||||
|
||||
if callback_id := self.request.data.get("callback_id"):
|
||||
@@ -335,12 +314,6 @@ class RoomViewSet(
|
||||
options = serializer.validated_data.get("options")
|
||||
room = self.get_object()
|
||||
|
||||
if room.encryption_enabled:
|
||||
return drf_response.Response(
|
||||
{"detail": "Recording is not available in encrypted rooms."},
|
||||
status=drf_status.HTTP_403_FORBIDDEN,
|
||||
)
|
||||
|
||||
# May raise exception if an active or initiated recording already exist for the room
|
||||
recording = models.Recording.objects.create(
|
||||
room=room,
|
||||
@@ -423,28 +396,12 @@ class RoomViewSet(
|
||||
serializer.is_valid(raise_exception=True)
|
||||
|
||||
room = self.get_object()
|
||||
validated_data = serializer.validated_data
|
||||
|
||||
# Advanced encrypted rooms require authentication
|
||||
if room.encryption_mode == models.EncryptionMode.ADVANCED and not request.user.is_authenticated:
|
||||
return drf_response.Response(
|
||||
{"detail": "This meeting requires authentication to join."},
|
||||
status=drf_status.HTTP_403_FORBIDDEN,
|
||||
)
|
||||
|
||||
# In encrypted rooms, authenticated users must use their real name
|
||||
# from the OIDC profile — they cannot choose an arbitrary name.
|
||||
if room.encryption_enabled and request.user.is_authenticated:
|
||||
validated_data["username"] = (
|
||||
request.user.full_name or request.user.email
|
||||
)
|
||||
|
||||
lobby_service = LobbyService()
|
||||
|
||||
participant, livekit = lobby_service.request_entry(
|
||||
room=room,
|
||||
request=request,
|
||||
**validated_data,
|
||||
**serializer.validated_data,
|
||||
)
|
||||
response = drf_response.Response({**participant.to_dict(), "livekit": livekit})
|
||||
lobby_service.prepare_response(response, participant.id)
|
||||
@@ -480,9 +437,6 @@ class RoomViewSet(
|
||||
room_id=room.id,
|
||||
participant_id=str(serializer.validated_data.get("participant_id")),
|
||||
allow_entry=serializer.validated_data.get("allow_entry"),
|
||||
encrypted_key=serializer.validated_data.get("encrypted_key", ''),
|
||||
admin_ephemeral_public_key=serializer.validated_data.get("admin_ephemeral_public_key", ''),
|
||||
encrypted_vault_key=serializer.validated_data.get("encrypted_vault_key", ''),
|
||||
)
|
||||
return drf_response.Response({"message": "Participant was updated."})
|
||||
|
||||
@@ -510,14 +464,6 @@ class RoomViewSet(
|
||||
lobby_service = LobbyService()
|
||||
|
||||
participants = lobby_service.list_waiting_participants(room.id)
|
||||
|
||||
# Only expose email and ephemeral keys in encrypted rooms.
|
||||
# Strip them otherwise to avoid leaking personal data.
|
||||
if not room.encryption_enabled:
|
||||
for p in participants:
|
||||
p.pop("email", None)
|
||||
p.pop("ephemeral_public_key", None)
|
||||
|
||||
return drf_response.Response({"participants": participants})
|
||||
|
||||
@decorators.action(
|
||||
@@ -620,12 +566,6 @@ class RoomViewSet(
|
||||
|
||||
room = self.get_object()
|
||||
|
||||
if room.encryption_enabled:
|
||||
return drf_response.Response(
|
||||
{"error": "Transcription is not available in encrypted rooms."},
|
||||
status=drf_status.HTTP_403_FORBIDDEN,
|
||||
)
|
||||
|
||||
try:
|
||||
SubtitleService().start_subtitle(room)
|
||||
except SubtitleException:
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
("core", "0018_rename_active_application_is_active"),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name="room",
|
||||
name="encryption_enabled",
|
||||
field=models.BooleanField(
|
||||
default=False,
|
||||
help_text="Whether end-to-end encryption is enabled for this room.",
|
||||
verbose_name="Encryption enabled",
|
||||
),
|
||||
),
|
||||
]
|
||||
@@ -1,51 +0,0 @@
|
||||
"""Replace encryption_enabled boolean with encryption_mode enum."""
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
def migrate_encryption_enabled_to_mode(apps, schema_editor):
|
||||
"""Convert existing encryption_enabled=True rooms to encryption_mode='basic'."""
|
||||
Room = apps.get_model("core", "Room")
|
||||
Room.objects.filter(encryption_enabled=True).update(encryption_mode="basic")
|
||||
|
||||
|
||||
def migrate_mode_to_encryption_enabled(apps, schema_editor):
|
||||
"""Reverse: set encryption_enabled=True for any non-'none' encryption_mode."""
|
||||
Room = apps.get_model("core", "Room")
|
||||
Room.objects.exclude(encryption_mode="none").update(encryption_enabled=True)
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
("core", "0019_room_encryption_enabled"),
|
||||
]
|
||||
|
||||
operations = [
|
||||
# 1. Add the new encryption_mode field
|
||||
migrations.AddField(
|
||||
model_name="room",
|
||||
name="encryption_mode",
|
||||
field=models.CharField(
|
||||
choices=[
|
||||
("none", "No encryption"),
|
||||
("basic", "Basic encryption"),
|
||||
("advanced", "Advanced encryption"),
|
||||
],
|
||||
default="none",
|
||||
help_text="End-to-end encryption mode for this room.",
|
||||
max_length=20,
|
||||
verbose_name="Encryption mode",
|
||||
),
|
||||
),
|
||||
# 2. Migrate existing data
|
||||
migrations.RunPython(
|
||||
migrate_encryption_enabled_to_mode,
|
||||
migrate_mode_to_encryption_enabled,
|
||||
),
|
||||
# 3. Remove the old boolean field
|
||||
migrations.RemoveField(
|
||||
model_name="room",
|
||||
name="encryption_enabled",
|
||||
),
|
||||
]
|
||||
@@ -1,23 +0,0 @@
|
||||
"""Add encrypted_symmetric_key to ResourceAccess for advanced E2EE mode."""
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
("core", "0020_room_encryption_mode"),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name="resourceaccess",
|
||||
name="encrypted_symmetric_key",
|
||||
field=models.TextField(
|
||||
blank=True,
|
||||
default="",
|
||||
help_text="Vault-wrapped symmetric encryption key for advanced E2EE mode. Each user's copy is encrypted for their own vault public key.",
|
||||
verbose_name="Encrypted symmetric key",
|
||||
),
|
||||
),
|
||||
]
|
||||
@@ -98,14 +98,6 @@ class RoomAccessLevel(models.TextChoices):
|
||||
RESTRICTED = "restricted", _("Restricted Access")
|
||||
|
||||
|
||||
class EncryptionMode(models.TextChoices):
|
||||
"""Encryption mode choices for rooms."""
|
||||
|
||||
NONE = "none", _("No encryption")
|
||||
BASIC = "basic", _("Basic encryption")
|
||||
ADVANCED = "advanced", _("Advanced encryption")
|
||||
|
||||
|
||||
class BaseModel(models.Model):
|
||||
"""
|
||||
Serves as an abstract base model for other models, ensuring that records are validated
|
||||
@@ -332,15 +324,6 @@ class ResourceAccess(BaseModel):
|
||||
role = models.CharField(
|
||||
max_length=20, choices=RoleChoices.choices, default=RoleChoices.MEMBER
|
||||
)
|
||||
encrypted_symmetric_key = models.TextField(
|
||||
blank=True,
|
||||
default='',
|
||||
verbose_name=_("Encrypted symmetric key"),
|
||||
help_text=_(
|
||||
"Vault-wrapped symmetric encryption key for advanced E2EE mode. "
|
||||
"Each user's copy is encrypted for their own vault public key."
|
||||
),
|
||||
)
|
||||
|
||||
class Meta:
|
||||
db_table = "meet_resource_access"
|
||||
@@ -405,13 +388,6 @@ class Room(Resource):
|
||||
choices=RoomAccessLevel.choices,
|
||||
default=settings.RESOURCE_DEFAULT_ACCESS_LEVEL,
|
||||
)
|
||||
encryption_mode = models.CharField(
|
||||
max_length=20,
|
||||
choices=EncryptionMode.choices,
|
||||
default=EncryptionMode.NONE,
|
||||
verbose_name=_("Encryption mode"),
|
||||
help_text=_("End-to-end encryption mode for this room."),
|
||||
)
|
||||
configuration = models.JSONField(
|
||||
blank=True,
|
||||
default=dict,
|
||||
@@ -466,11 +442,6 @@ class Room(Resource):
|
||||
"""Check if a room is public"""
|
||||
return self.access_level == RoomAccessLevel.PUBLIC
|
||||
|
||||
@property
|
||||
def encryption_enabled(self):
|
||||
"""Check if any encryption mode is active."""
|
||||
return self.encryption_mode != EncryptionMode.NONE
|
||||
|
||||
@staticmethod
|
||||
def generate_unique_pin_code(length):
|
||||
"""Generate a unique n-digit PIN code"""
|
||||
|
||||
@@ -46,36 +46,15 @@ class LobbyParticipant:
|
||||
username: str
|
||||
color: str
|
||||
id: str
|
||||
is_authenticated: bool = False
|
||||
email: Optional[str] = None
|
||||
suite_user_id: Optional[str] = None
|
||||
ephemeral_public_key: str = ''
|
||||
encrypted_key: str = ''
|
||||
admin_ephemeral_public_key: str = ''
|
||||
encrypted_vault_key: str = ''
|
||||
|
||||
def to_dict(self) -> Dict[str, str]:
|
||||
"""Serialize the participant object to a dict representation."""
|
||||
result = {
|
||||
return {
|
||||
"status": self.status.value,
|
||||
"username": self.username,
|
||||
"id": self.id,
|
||||
"color": self.color,
|
||||
"is_authenticated": self.is_authenticated,
|
||||
}
|
||||
if self.email:
|
||||
result["email"] = self.email
|
||||
if self.suite_user_id:
|
||||
result["suite_user_id"] = self.suite_user_id
|
||||
if self.ephemeral_public_key:
|
||||
result["ephemeral_public_key"] = self.ephemeral_public_key
|
||||
if self.encrypted_key:
|
||||
result["encrypted_key"] = self.encrypted_key
|
||||
if self.admin_ephemeral_public_key:
|
||||
result["admin_ephemeral_public_key"] = self.admin_ephemeral_public_key
|
||||
if self.encrypted_vault_key:
|
||||
result["encrypted_vault_key"] = self.encrypted_vault_key
|
||||
return result
|
||||
|
||||
@classmethod
|
||||
def from_dict(cls, data: dict) -> "LobbyParticipant":
|
||||
@@ -89,13 +68,6 @@ class LobbyParticipant:
|
||||
username=data["username"],
|
||||
id=data["id"],
|
||||
color=data["color"],
|
||||
is_authenticated=data.get("is_authenticated", False),
|
||||
email=data.get("email"),
|
||||
suite_user_id=data.get("suite_user_id"),
|
||||
ephemeral_public_key=data.get("ephemeral_public_key", ''),
|
||||
encrypted_key=data.get("encrypted_key", ''),
|
||||
admin_ephemeral_public_key=data.get("admin_ephemeral_public_key", ''),
|
||||
encrypted_vault_key=data.get("encrypted_vault_key", ''),
|
||||
)
|
||||
except (KeyError, ValueError) as e:
|
||||
logger.exception("Error creating Participant from dict:")
|
||||
@@ -127,7 +99,7 @@ class LobbyService:
|
||||
key=settings.LOBBY_COOKIE_NAME,
|
||||
value=participant_id,
|
||||
httponly=True,
|
||||
secure=not settings.DEBUG,
|
||||
secure=True,
|
||||
samesite="Lax",
|
||||
)
|
||||
|
||||
@@ -139,16 +111,11 @@ class LobbyService:
|
||||
1. The room is public (open to everyone)
|
||||
2. The room has TRUSTED access level and the user is authenticated
|
||||
|
||||
Encrypted rooms never bypass the lobby — participants must go through
|
||||
the lobby key exchange to receive the encryption key.
|
||||
|
||||
Note: Room access levels can change while participants are waiting in the lobby.
|
||||
This function only checks the current state and should be called each time
|
||||
a participant requests entry to ensure consistent access control, even for
|
||||
participants who have already begun waiting.
|
||||
"""
|
||||
if hasattr(room, 'encryption_mode') and room.encryption_mode != 'none':
|
||||
return False
|
||||
return room.is_public or (
|
||||
room.access_level == models.RoomAccessLevel.TRUSTED
|
||||
and user.is_authenticated
|
||||
@@ -159,7 +126,6 @@ class LobbyService:
|
||||
room,
|
||||
request,
|
||||
username: str,
|
||||
ephemeral_public_key: str = '',
|
||||
) -> Tuple[LobbyParticipant, Optional[Dict]]:
|
||||
"""Request entry to a room for a participant.
|
||||
|
||||
@@ -198,42 +164,19 @@ class LobbyService:
|
||||
configuration=room.configuration,
|
||||
is_admin_or_owner=False,
|
||||
participant_id=participant_id,
|
||||
encryption_mode=room.encryption_mode,
|
||||
)
|
||||
return participant, livekit_config
|
||||
|
||||
livekit_config = None
|
||||
|
||||
if participant is None:
|
||||
participant = self.enter(
|
||||
room.id, participant_id, username,
|
||||
is_authenticated=request.user.is_authenticated,
|
||||
email=getattr(request.user, 'email', None) if request.user.is_authenticated else None,
|
||||
suite_user_id=str(request.user.sub) if request.user.is_authenticated else None,
|
||||
ephemeral_public_key=ephemeral_public_key,
|
||||
)
|
||||
participant = self.enter(room.id, participant_id, username)
|
||||
|
||||
elif participant.status == LobbyParticipantStatus.WAITING:
|
||||
self.refresh_waiting_status(room.id, participant_id)
|
||||
|
||||
elif participant.status == LobbyParticipantStatus.ACCEPTED:
|
||||
# If the joiner comes back with a different ephemeral key (e.g. browser
|
||||
# closed and reopened), they can no longer decrypt the encrypted symmetric
|
||||
# key. Reset them to WAITING so the admin re-accepts with the new key.
|
||||
if (
|
||||
ephemeral_public_key
|
||||
and participant.ephemeral_public_key
|
||||
and ephemeral_public_key != participant.ephemeral_public_key
|
||||
):
|
||||
participant = self.enter(
|
||||
room.id, participant_id, username,
|
||||
is_authenticated=request.user.is_authenticated,
|
||||
email=getattr(request.user, 'email', None) if request.user.is_authenticated else None,
|
||||
suite_user_id=str(request.user.sub) if request.user.is_authenticated else None,
|
||||
ephemeral_public_key=ephemeral_public_key,
|
||||
)
|
||||
return participant, None
|
||||
|
||||
# wrongly named, contains access token to join a room
|
||||
livekit_config = utils.generate_livekit_config(
|
||||
room_id=room_id,
|
||||
user=request.user,
|
||||
@@ -242,7 +185,6 @@ class LobbyService:
|
||||
configuration=room.configuration,
|
||||
is_admin_or_owner=False,
|
||||
participant_id=participant_id,
|
||||
encryption_mode=room.encryption_mode,
|
||||
)
|
||||
|
||||
return participant, livekit_config
|
||||
@@ -259,11 +201,7 @@ class LobbyService:
|
||||
)
|
||||
|
||||
def enter(
|
||||
self, room_id: UUID, participant_id: str, username: str,
|
||||
is_authenticated: bool = False,
|
||||
email: Optional[str] = None,
|
||||
suite_user_id: Optional[str] = None,
|
||||
ephemeral_public_key: str = '',
|
||||
self, room_id: UUID, participant_id: str, username: str
|
||||
) -> LobbyParticipant:
|
||||
"""Add participant to waiting lobby.
|
||||
|
||||
@@ -278,10 +216,6 @@ class LobbyService:
|
||||
username=username,
|
||||
id=participant_id,
|
||||
color=color,
|
||||
is_authenticated=is_authenticated,
|
||||
email=email,
|
||||
suite_user_id=suite_user_id,
|
||||
ephemeral_public_key=ephemeral_public_key,
|
||||
)
|
||||
|
||||
try:
|
||||
@@ -350,9 +284,6 @@ class LobbyService:
|
||||
room_id: UUID,
|
||||
participant_id: str,
|
||||
allow_entry: bool,
|
||||
encrypted_key: str = '',
|
||||
admin_ephemeral_public_key: str = '',
|
||||
encrypted_vault_key: str = '',
|
||||
) -> None:
|
||||
"""Handle decision on participant entry.
|
||||
|
||||
@@ -371,13 +302,7 @@ class LobbyService:
|
||||
"timeout": settings.LOBBY_DENIED_TIMEOUT,
|
||||
}
|
||||
|
||||
self._update_participant_status(
|
||||
room_id, participant_id,
|
||||
encrypted_key=encrypted_key,
|
||||
admin_ephemeral_public_key=admin_ephemeral_public_key,
|
||||
encrypted_vault_key=encrypted_vault_key,
|
||||
**decision,
|
||||
)
|
||||
self._update_participant_status(room_id, participant_id, **decision)
|
||||
|
||||
def _update_participant_status(
|
||||
self,
|
||||
@@ -385,9 +310,6 @@ class LobbyService:
|
||||
participant_id: str,
|
||||
status: LobbyParticipantStatus,
|
||||
timeout: int,
|
||||
encrypted_key: str = '',
|
||||
admin_ephemeral_public_key: str = '',
|
||||
encrypted_vault_key: str = '',
|
||||
) -> None:
|
||||
"""Update participant status with appropriate timeout."""
|
||||
|
||||
@@ -408,12 +330,6 @@ class LobbyService:
|
||||
raise
|
||||
|
||||
participant.status = status
|
||||
if encrypted_key:
|
||||
participant.encrypted_key = encrypted_key
|
||||
if admin_ephemeral_public_key:
|
||||
participant.admin_ephemeral_public_key = admin_ephemeral_public_key
|
||||
if encrypted_vault_key:
|
||||
participant.encrypted_vault_key = encrypted_vault_key
|
||||
cache.set(cache_key, participant.to_dict(), timeout=timeout)
|
||||
|
||||
def clear_room_cache(self, room_id: UUID) -> None:
|
||||
|
||||
@@ -205,7 +205,7 @@ def test_start_subtitle_wrong_signature(settings, mock_livekit_token):
|
||||
"""Test that tokens signed with incorrect signature are rejected."""
|
||||
|
||||
settings.ROOM_SUBTITLE_ENABLED = True
|
||||
settings.LIVEKIT_CONFIGURATION["api_secret"] = "wrong-secret"
|
||||
settings.LIVEKIT_CONFIGURATION["api_secret"] = "wrong-secret-padded-to-32-bytes!!"
|
||||
|
||||
room = RoomFactory()
|
||||
client = APIClient()
|
||||
|
||||
@@ -47,7 +47,7 @@ def mock_livekit_config(settings):
|
||||
"""Mock LiveKit configuration."""
|
||||
settings.LIVEKIT_CONFIGURATION = {
|
||||
"api_key": "test_api_key",
|
||||
"api_secret": "test_api_secret",
|
||||
"api_secret": "test_api_secret_padded_to_32bytes!",
|
||||
"url": "https://test-livekit.example.com/",
|
||||
}
|
||||
return settings.LIVEKIT_CONFIGURATION
|
||||
|
||||
@@ -713,7 +713,7 @@ def test_api_rooms_token_invalid_signature(mock_rs_authenticate, settings):
|
||||
}
|
||||
token = jwt.encode(
|
||||
payload,
|
||||
"invalid-private-key",
|
||||
"invalid-private-key-padded-to-32b!",
|
||||
algorithm=settings.APPLICATION_JWT_ALG,
|
||||
)
|
||||
|
||||
|
||||
@@ -66,7 +66,6 @@ def generate_token(
|
||||
sources: Optional[List[str]] = None,
|
||||
is_admin_or_owner: bool = False,
|
||||
participant_id: Optional[str] = None,
|
||||
encryption_mode: str = 'none',
|
||||
) -> str:
|
||||
"""Generate a LiveKit access token for a user in a specific room.
|
||||
|
||||
@@ -93,15 +92,11 @@ def generate_token(
|
||||
if sources is None:
|
||||
sources = settings.LIVEKIT_DEFAULT_SOURCES
|
||||
|
||||
# In encrypted rooms, no one can change their name/metadata to prevent
|
||||
# identity spoofing — the admin accepted them based on their declared identity.
|
||||
can_update_metadata = encryption_mode == 'none'
|
||||
|
||||
video_grants = VideoGrants(
|
||||
room=room,
|
||||
room_join=True,
|
||||
room_admin=is_admin_or_owner,
|
||||
can_update_own_metadata=can_update_metadata,
|
||||
can_update_own_metadata=True,
|
||||
can_publish=bool(sources),
|
||||
can_publish_sources=sources,
|
||||
can_subscribe=True,
|
||||
@@ -117,42 +112,6 @@ def generate_token(
|
||||
if color is None:
|
||||
color = generate_color(identity)
|
||||
|
||||
# Build participant attributes — these are server-signed in the JWT
|
||||
# and visible to all participants in the room.
|
||||
attributes = {
|
||||
"color": color,
|
||||
"room_admin": "true" if is_admin_or_owner else "false",
|
||||
"is_authenticated": "true" if not user.is_anonymous else "false",
|
||||
}
|
||||
|
||||
# Add identity info for authenticated users in encrypted rooms only.
|
||||
#
|
||||
# Email and suite_user_id are included in the JWT attributes for encrypted
|
||||
# rooms because:
|
||||
# - Email: allows admins to verify participant identity in the lobby and
|
||||
# participant list (important for trust decisions in encrypted meetings)
|
||||
# - suite_user_id: required for vault key exchange in advanced encryption
|
||||
# (vaultClient.shareKeys needs the recipient's user ID)
|
||||
#
|
||||
# These attributes are NOT included in non-encrypted rooms because:
|
||||
# - Non-encrypted rooms have no waiting room, so anonymous users can join
|
||||
# freely and would see everyone's email via LiveKit signaling
|
||||
# - LiveKit JWT attributes are immutable and broadcast to ALL participants
|
||||
# equally — there is no way to show them only to authenticated users
|
||||
# at the protocol level
|
||||
# - The frontend additionally hides email from anonymous users in the UI,
|
||||
# but this is defense-in-depth, not the primary protection
|
||||
#
|
||||
# Future improvement: serve email via a Django API endpoint that checks
|
||||
# the requester's authentication, removing it from the JWT entirely.
|
||||
# This would require the backend to call LiveKit's ListParticipants API
|
||||
# to cross-reference identities with the user database.
|
||||
if not user.is_anonymous and encryption_mode != 'none':
|
||||
if user.email:
|
||||
attributes["email"] = user.email
|
||||
if user.sub:
|
||||
attributes["suite_user_id"] = str(user.sub)
|
||||
|
||||
token = (
|
||||
AccessToken(
|
||||
api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
|
||||
@@ -161,7 +120,9 @@ def generate_token(
|
||||
.with_grants(video_grants)
|
||||
.with_identity(identity)
|
||||
.with_name(username or default_username)
|
||||
.with_attributes(attributes)
|
||||
.with_attributes(
|
||||
{"color": color, "room_admin": "true" if is_admin_or_owner else "false"}
|
||||
)
|
||||
)
|
||||
|
||||
return token.to_jwt()
|
||||
@@ -175,7 +136,6 @@ def generate_livekit_config(
|
||||
color: Optional[str] = None,
|
||||
configuration: Optional[dict] = None,
|
||||
participant_id: Optional[str] = None,
|
||||
encryption_mode: str = 'none',
|
||||
) -> dict:
|
||||
"""Generate LiveKit configuration for room access.
|
||||
|
||||
@@ -208,7 +168,6 @@ def generate_livekit_config(
|
||||
sources=sources,
|
||||
is_admin_or_owner=is_admin_or_owner,
|
||||
participant_id=participant_id,
|
||||
encryption_mode=encryption_mode,
|
||||
),
|
||||
}
|
||||
|
||||
|
||||
@@ -561,12 +561,12 @@ class Base(Configuration):
|
||||
"returnTo", environ_name="OIDC_REDIRECT_FIELD_NAME", environ_prefix=None
|
||||
)
|
||||
OIDC_USERINFO_FULLNAME_FIELDS = values.ListValue(
|
||||
default=["first_name", "last_name"],
|
||||
default=["given_name", "usual_name"],
|
||||
environ_name="OIDC_USERINFO_FULLNAME_FIELDS",
|
||||
environ_prefix=None,
|
||||
)
|
||||
OIDC_USERINFO_SHORTNAME_FIELD = values.Value(
|
||||
default="first_name",
|
||||
default="given_name",
|
||||
environ_name="OIDC_USERINFO_SHORTNAME_FIELD",
|
||||
environ_prefix=None,
|
||||
)
|
||||
@@ -808,17 +808,6 @@ class Base(Configuration):
|
||||
environ_prefix=None,
|
||||
)
|
||||
|
||||
# End-to-end encryption settings
|
||||
ENCRYPTION_ENABLED = values.BooleanValue(
|
||||
False, environ_name="ENCRYPTION_ENABLED", environ_prefix=None
|
||||
)
|
||||
ENCRYPTION_VAULT_URL = values.Value(
|
||||
None, environ_name="ENCRYPTION_VAULT_URL", environ_prefix=None
|
||||
)
|
||||
ENCRYPTION_INTERFACE_URL = values.Value(
|
||||
None, environ_name="ENCRYPTION_INTERFACE_URL", environ_prefix=None
|
||||
)
|
||||
|
||||
# External Applications
|
||||
APPLICATION_CLIENT_ID_LENGTH = values.PositiveIntegerValue(
|
||||
40,
|
||||
@@ -992,7 +981,13 @@ class Test(Base):
|
||||
USE_SWAGGER = True
|
||||
EXTERNAL_API_ENABLED = True
|
||||
|
||||
APPLICATION_JWT_SECRET_KEY = "devKey" # noqa:S105
|
||||
LIVEKIT_CONFIGURATION = {
|
||||
"api_key": "devkey-padded-for-minimum-len!-livekit",
|
||||
"api_secret": "secret-key-padded-for-minimum-len!-livekit",
|
||||
"url": "http://127.0.0.1.nip.io:7880",
|
||||
}
|
||||
|
||||
APPLICATION_JWT_SECRET_KEY = "secret-key-padded-for-minimum-len!-application" # noqa:S105
|
||||
APPLICATION_JWT_AUDIENCE = "Test inc."
|
||||
|
||||
CELERY_TASK_ALWAYS_EAGER = True
|
||||
|
||||
@@ -7,7 +7,7 @@ build-backend = "uv_build"
|
||||
|
||||
[project]
|
||||
name = "meet"
|
||||
version = "1.12.0"
|
||||
version = "1.13.0"
|
||||
authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
|
||||
classifiers = [
|
||||
"Development Status :: 5 - Production/Stable",
|
||||
@@ -55,7 +55,7 @@ dependencies = [
|
||||
"PyJWT==2.12.1",
|
||||
"python-frontmatter==1.1.0",
|
||||
"python-magic==0.4.27",
|
||||
"requests==2.32.5",
|
||||
"requests==2.33.0",
|
||||
"sentry-sdk==2.54.0",
|
||||
"whitenoise==6.12.0",
|
||||
"mozilla-django-oidc==5.0.2",
|
||||
|
||||
Generated
+49
-49
@@ -474,55 +474,55 @@ wheels = [
|
||||
|
||||
[[package]]
|
||||
name = "cryptography"
|
||||
version = "46.0.5"
|
||||
version = "46.0.6"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "cffi", marker = "platform_python_implementation != 'PyPy'" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/60/04/ee2a9e8542e4fa2773b81771ff8349ff19cdd56b7258a0cc442639052edb/cryptography-46.0.5.tar.gz", hash = "sha256:abace499247268e3757271b2f1e244b36b06f8515cf27c4d49468fc9eb16e93d", size = 750064, upload-time = "2026-02-10T19:18:38.255Z" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/a4/ba/04b1bd4218cbc58dc90ce967106d51582371b898690f3ae0402876cc4f34/cryptography-46.0.6.tar.gz", hash = "sha256:27550628a518c5c6c903d84f637fbecf287f6cb9ced3804838a1295dc1fd0759", size = 750542, upload-time = "2026-03-25T23:34:53.396Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/f7/81/b0bb27f2ba931a65409c6b8a8b358a7f03c0e46eceacddff55f7c84b1f3b/cryptography-46.0.5-cp311-abi3-macosx_10_9_universal2.whl", hash = "sha256:351695ada9ea9618b3500b490ad54c739860883df6c1f555e088eaf25b1bbaad", size = 7176289, upload-time = "2026-02-10T19:17:08.274Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ff/9e/6b4397a3e3d15123de3b1806ef342522393d50736c13b20ec4c9ea6693a6/cryptography-46.0.5-cp311-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:c18ff11e86df2e28854939acde2d003f7984f721eba450b56a200ad90eeb0e6b", size = 4275637, upload-time = "2026-02-10T19:17:10.53Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/63/e7/471ab61099a3920b0c77852ea3f0ea611c9702f651600397ac567848b897/cryptography-46.0.5-cp311-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:4d7e3d356b8cd4ea5aff04f129d5f66ebdc7b6f8eae802b93739ed520c47c79b", size = 4424742, upload-time = "2026-02-10T19:17:12.388Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/37/53/a18500f270342d66bf7e4d9f091114e31e5ee9e7375a5aba2e85a91e0044/cryptography-46.0.5-cp311-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:50bfb6925eff619c9c023b967d5b77a54e04256c4281b0e21336a130cd7fc263", size = 4277528, upload-time = "2026-02-10T19:17:13.853Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/22/29/c2e812ebc38c57b40e7c583895e73c8c5adb4d1e4a0cc4c5a4fdab2b1acc/cryptography-46.0.5-cp311-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:803812e111e75d1aa73690d2facc295eaefd4439be1023fefc4995eaea2af90d", size = 4947993, upload-time = "2026-02-10T19:17:15.618Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/6b/e7/237155ae19a9023de7e30ec64e5d99a9431a567407ac21170a046d22a5a3/cryptography-46.0.5-cp311-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:3ee190460e2fbe447175cda91b88b84ae8322a104fc27766ad09428754a618ed", size = 4456855, upload-time = "2026-02-10T19:17:17.221Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/2d/87/fc628a7ad85b81206738abbd213b07702bcbdada1dd43f72236ef3cffbb5/cryptography-46.0.5-cp311-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:f145bba11b878005c496e93e257c1e88f154d278d2638e6450d17e0f31e558d2", size = 3984635, upload-time = "2026-02-10T19:17:18.792Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/84/29/65b55622bde135aedf4565dc509d99b560ee4095e56989e815f8fd2aa910/cryptography-46.0.5-cp311-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:e9251e3be159d1020c4030bd2e5f84d6a43fe54b6c19c12f51cde9542a2817b2", size = 4277038, upload-time = "2026-02-10T19:17:20.256Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/bc/36/45e76c68d7311432741faf1fbf7fac8a196a0a735ca21f504c75d37e2558/cryptography-46.0.5-cp311-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:47fb8a66058b80e509c47118ef8a75d14c455e81ac369050f20ba0d23e77fee0", size = 4912181, upload-time = "2026-02-10T19:17:21.825Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/6d/1a/c1ba8fead184d6e3d5afcf03d569acac5ad063f3ac9fb7258af158f7e378/cryptography-46.0.5-cp311-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:4c3341037c136030cb46e4b1e17b7418ea4cbd9dd207e4a6f3b2b24e0d4ac731", size = 4456482, upload-time = "2026-02-10T19:17:25.133Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f9/e5/3fb22e37f66827ced3b902cf895e6a6bc1d095b5b26be26bd13c441fdf19/cryptography-46.0.5-cp311-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:890bcb4abd5a2d3f852196437129eb3667d62630333aacc13dfd470fad3aaa82", size = 4405497, upload-time = "2026-02-10T19:17:26.66Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/1a/df/9d58bb32b1121a8a2f27383fabae4d63080c7ca60b9b5c88be742be04ee7/cryptography-46.0.5-cp311-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:80a8d7bfdf38f87ca30a5391c0c9ce4ed2926918e017c29ddf643d0ed2778ea1", size = 4667819, upload-time = "2026-02-10T19:17:28.569Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ea/ed/325d2a490c5e94038cdb0117da9397ece1f11201f425c4e9c57fe5b9f08b/cryptography-46.0.5-cp311-abi3-win32.whl", hash = "sha256:60ee7e19e95104d4c03871d7d7dfb3d22ef8a9b9c6778c94e1c8fcc8365afd48", size = 3028230, upload-time = "2026-02-10T19:17:30.518Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e9/5a/ac0f49e48063ab4255d9e3b79f5def51697fce1a95ea1370f03dc9db76f6/cryptography-46.0.5-cp311-abi3-win_amd64.whl", hash = "sha256:38946c54b16c885c72c4f59846be9743d699eee2b69b6988e0a00a01f46a61a4", size = 3480909, upload-time = "2026-02-10T19:17:32.083Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/00/13/3d278bfa7a15a96b9dc22db5a12ad1e48a9eb3d40e1827ef66a5df75d0d0/cryptography-46.0.5-cp314-cp314t-macosx_10_9_universal2.whl", hash = "sha256:94a76daa32eb78d61339aff7952ea819b1734b46f73646a07decb40e5b3448e2", size = 7119287, upload-time = "2026-02-10T19:17:33.801Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/67/c8/581a6702e14f0898a0848105cbefd20c058099e2c2d22ef4e476dfec75d7/cryptography-46.0.5-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:5be7bf2fb40769e05739dd0046e7b26f9d4670badc7b032d6ce4db64dddc0678", size = 4265728, upload-time = "2026-02-10T19:17:35.569Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/dd/4a/ba1a65ce8fc65435e5a849558379896c957870dd64fecea97b1ad5f46a37/cryptography-46.0.5-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:fe346b143ff9685e40192a4960938545c699054ba11d4f9029f94751e3f71d87", size = 4408287, upload-time = "2026-02-10T19:17:36.938Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f8/67/8ffdbf7b65ed1ac224d1c2df3943553766914a8ca718747ee3871da6107e/cryptography-46.0.5-cp314-cp314t-manylinux_2_28_aarch64.whl", hash = "sha256:c69fd885df7d089548a42d5ec05be26050ebcd2283d89b3d30676eb32ff87dee", size = 4270291, upload-time = "2026-02-10T19:17:38.748Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f8/e5/f52377ee93bc2f2bba55a41a886fd208c15276ffbd2569f2ddc89d50e2c5/cryptography-46.0.5-cp314-cp314t-manylinux_2_28_ppc64le.whl", hash = "sha256:8293f3dea7fc929ef7240796ba231413afa7b68ce38fd21da2995549f5961981", size = 4927539, upload-time = "2026-02-10T19:17:40.241Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/3b/02/cfe39181b02419bbbbcf3abdd16c1c5c8541f03ca8bda240debc467d5a12/cryptography-46.0.5-cp314-cp314t-manylinux_2_28_x86_64.whl", hash = "sha256:1abfdb89b41c3be0365328a410baa9df3ff8a9110fb75e7b52e66803ddabc9a9", size = 4442199, upload-time = "2026-02-10T19:17:41.789Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c0/96/2fcaeb4873e536cf71421a388a6c11b5bc846e986b2b069c79363dc1648e/cryptography-46.0.5-cp314-cp314t-manylinux_2_31_armv7l.whl", hash = "sha256:d66e421495fdb797610a08f43b05269e0a5ea7f5e652a89bfd5a7d3c1dee3648", size = 3960131, upload-time = "2026-02-10T19:17:43.379Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d8/d2/b27631f401ddd644e94c5cf33c9a4069f72011821cf3dc7309546b0642a0/cryptography-46.0.5-cp314-cp314t-manylinux_2_34_aarch64.whl", hash = "sha256:4e817a8920bfbcff8940ecfd60f23d01836408242b30f1a708d93198393a80b4", size = 4270072, upload-time = "2026-02-10T19:17:45.481Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f4/a7/60d32b0370dae0b4ebe55ffa10e8599a2a59935b5ece1b9f06edb73abdeb/cryptography-46.0.5-cp314-cp314t-manylinux_2_34_ppc64le.whl", hash = "sha256:68f68d13f2e1cb95163fa3b4db4bf9a159a418f5f6e7242564fc75fcae667fd0", size = 4892170, upload-time = "2026-02-10T19:17:46.997Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d2/b9/cf73ddf8ef1164330eb0b199a589103c363afa0cf794218c24d524a58eab/cryptography-46.0.5-cp314-cp314t-manylinux_2_34_x86_64.whl", hash = "sha256:a3d1fae9863299076f05cb8a778c467578262fae09f9dc0ee9b12eb4268ce663", size = 4441741, upload-time = "2026-02-10T19:17:48.661Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5f/eb/eee00b28c84c726fe8fa0158c65afe312d9c3b78d9d01daf700f1f6e37ff/cryptography-46.0.5-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:c4143987a42a2397f2fc3b4d7e3a7d313fbe684f67ff443999e803dd75a76826", size = 4396728, upload-time = "2026-02-10T19:17:50.058Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/65/f4/6bc1a9ed5aef7145045114b75b77c2a8261b4d38717bd8dea111a63c3442/cryptography-46.0.5-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:7d731d4b107030987fd61a7f8ab512b25b53cef8f233a97379ede116f30eb67d", size = 4652001, upload-time = "2026-02-10T19:17:51.54Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/86/ef/5d00ef966ddd71ac2e6951d278884a84a40ffbd88948ef0e294b214ae9e4/cryptography-46.0.5-cp314-cp314t-win32.whl", hash = "sha256:c3bcce8521d785d510b2aad26ae2c966092b7daa8f45dd8f44734a104dc0bc1a", size = 3003637, upload-time = "2026-02-10T19:17:52.997Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/b7/57/f3f4160123da6d098db78350fdfd9705057aad21de7388eacb2401dceab9/cryptography-46.0.5-cp314-cp314t-win_amd64.whl", hash = "sha256:4d8ae8659ab18c65ced284993c2265910f6c9e650189d4e3f68445ef82a810e4", size = 3469487, upload-time = "2026-02-10T19:17:54.549Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e2/fa/a66aa722105ad6a458bebd64086ca2b72cdd361fed31763d20390f6f1389/cryptography-46.0.5-cp38-abi3-macosx_10_9_universal2.whl", hash = "sha256:4108d4c09fbbf2789d0c926eb4152ae1760d5a2d97612b92d508d96c861e4d31", size = 7170514, upload-time = "2026-02-10T19:17:56.267Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/0f/04/c85bdeab78c8bc77b701bf0d9bdcf514c044e18a46dcff330df5448631b0/cryptography-46.0.5-cp38-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:7d1f30a86d2757199cb2d56e48cce14deddf1f9c95f1ef1b64ee91ea43fe2e18", size = 4275349, upload-time = "2026-02-10T19:17:58.419Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5c/32/9b87132a2f91ee7f5223b091dc963055503e9b442c98fc0b8a5ca765fab0/cryptography-46.0.5-cp38-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:039917b0dc418bb9f6edce8a906572d69e74bd330b0b3fea4f79dab7f8ddd235", size = 4420667, upload-time = "2026-02-10T19:18:00.619Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/a1/a6/a7cb7010bec4b7c5692ca6f024150371b295ee1c108bdc1c400e4c44562b/cryptography-46.0.5-cp38-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:ba2a27ff02f48193fc4daeadf8ad2590516fa3d0adeeb34336b96f7fa64c1e3a", size = 4276980, upload-time = "2026-02-10T19:18:02.379Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/8e/7c/c4f45e0eeff9b91e3f12dbd0e165fcf2a38847288fcfd889deea99fb7b6d/cryptography-46.0.5-cp38-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:61aa400dce22cb001a98014f647dc21cda08f7915ceb95df0c9eaf84b4b6af76", size = 4939143, upload-time = "2026-02-10T19:18:03.964Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/37/19/e1b8f964a834eddb44fa1b9a9976f4e414cbb7aa62809b6760c8803d22d1/cryptography-46.0.5-cp38-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:3ce58ba46e1bc2aac4f7d9290223cead56743fa6ab94a5d53292ffaac6a91614", size = 4453674, upload-time = "2026-02-10T19:18:05.588Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/db/ed/db15d3956f65264ca204625597c410d420e26530c4e2943e05a0d2f24d51/cryptography-46.0.5-cp38-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:420d0e909050490d04359e7fdb5ed7e667ca5c3c402b809ae2563d7e66a92229", size = 3978801, upload-time = "2026-02-10T19:18:07.167Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/41/e2/df40a31d82df0a70a0daf69791f91dbb70e47644c58581d654879b382d11/cryptography-46.0.5-cp38-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:582f5fcd2afa31622f317f80426a027f30dc792e9c80ffee87b993200ea115f1", size = 4276755, upload-time = "2026-02-10T19:18:09.813Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/33/45/726809d1176959f4a896b86907b98ff4391a8aa29c0aaaf9450a8a10630e/cryptography-46.0.5-cp38-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:bfd56bb4b37ed4f330b82402f6f435845a5f5648edf1ad497da51a8452d5d62d", size = 4901539, upload-time = "2026-02-10T19:18:11.263Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/99/0f/a3076874e9c88ecb2ecc31382f6e7c21b428ede6f55aafa1aa272613e3cd/cryptography-46.0.5-cp38-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:a3d507bb6a513ca96ba84443226af944b0f7f47dcc9a399d110cd6146481d24c", size = 4452794, upload-time = "2026-02-10T19:18:12.914Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/02/ef/ffeb542d3683d24194a38f66ca17c0a4b8bf10631feef44a7ef64e631b1a/cryptography-46.0.5-cp38-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:9f16fbdf4da055efb21c22d81b89f155f02ba420558db21288b3d0035bafd5f4", size = 4404160, upload-time = "2026-02-10T19:18:14.375Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/96/93/682d2b43c1d5f1406ed048f377c0fc9fc8f7b0447a478d5c65ab3d3a66eb/cryptography-46.0.5-cp38-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:ced80795227d70549a411a4ab66e8ce307899fad2220ce5ab2f296e687eacde9", size = 4667123, upload-time = "2026-02-10T19:18:15.886Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/45/2d/9c5f2926cb5300a8eefc3f4f0b3f3df39db7f7ce40c8365444c49363cbda/cryptography-46.0.5-cp38-abi3-win32.whl", hash = "sha256:02f547fce831f5096c9a567fd41bc12ca8f11df260959ecc7c3202555cc47a72", size = 3010220, upload-time = "2026-02-10T19:18:17.361Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/48/ef/0c2f4a8e31018a986949d34a01115dd057bf536905dca38897bacd21fac3/cryptography-46.0.5-cp38-abi3-win_amd64.whl", hash = "sha256:556e106ee01aa13484ce9b0239bca667be5004efb0aabbed28d353df86445595", size = 3467050, upload-time = "2026-02-10T19:18:18.899Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/47/23/9285e15e3bc57325b0a72e592921983a701efc1ee8f91c06c5f0235d86d9/cryptography-46.0.6-cp311-abi3-macosx_10_9_universal2.whl", hash = "sha256:64235194bad039a10bb6d2d930ab3323baaec67e2ce36215fd0952fad0930ca8", size = 7176401, upload-time = "2026-03-25T23:33:22.096Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/60/f8/e61f8f13950ab6195b31913b42d39f0f9afc7d93f76710f299b5ec286ae6/cryptography-46.0.6-cp311-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:26031f1e5ca62fcb9d1fcb34b2b60b390d1aacaa15dc8b895a9ed00968b97b30", size = 4275275, upload-time = "2026-03-25T23:33:23.844Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/19/69/732a736d12c2631e140be2348b4ad3d226302df63ef64d30dfdb8db7ad1c/cryptography-46.0.6-cp311-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:9a693028b9cbe51b5a1136232ee8f2bc242e4e19d456ded3fa7c86e43c713b4a", size = 4425320, upload-time = "2026-03-25T23:33:25.703Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d4/12/123be7292674abf76b21ac1fc0e1af50661f0e5b8f0ec8285faac18eb99e/cryptography-46.0.6-cp311-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:67177e8a9f421aa2d3a170c3e56eca4e0128883cf52a071a7cbf53297f18b175", size = 4278082, upload-time = "2026-03-25T23:33:27.423Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5b/ba/d5e27f8d68c24951b0a484924a84c7cdaed7502bac9f18601cd357f8b1d2/cryptography-46.0.6-cp311-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:d9528b535a6c4f8ff37847144b8986a9a143585f0540fbcb1a98115b543aa463", size = 4926514, upload-time = "2026-03-25T23:33:29.206Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/34/71/1ea5a7352ae516d5512d17babe7e1b87d9db5150b21f794b1377eac1edc0/cryptography-46.0.6-cp311-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:22259338084d6ae497a19bae5d4c66b7ca1387d3264d1c2c0e72d9e9b6a77b97", size = 4457766, upload-time = "2026-03-25T23:33:30.834Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/01/59/562be1e653accee4fdad92c7a2e88fced26b3fdfce144047519bbebc299e/cryptography-46.0.6-cp311-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:760997a4b950ff00d418398ad73fbc91aa2894b5c1db7ccb45b4f68b42a63b3c", size = 3986535, upload-time = "2026-03-25T23:33:33.02Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d6/8b/b1ebfeb788bf4624d36e45ed2662b8bd43a05ff62157093c1539c1288a18/cryptography-46.0.6-cp311-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:3dfa6567f2e9e4c5dceb8ccb5a708158a2a871052fa75c8b78cb0977063f1507", size = 4277618, upload-time = "2026-03-25T23:33:34.567Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/dd/52/a005f8eabdb28df57c20f84c44d397a755782d6ff6d455f05baa2785bd91/cryptography-46.0.6-cp311-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:cdcd3edcbc5d55757e5f5f3d330dd00007ae463a7e7aa5bf132d1f22a4b62b19", size = 4890802, upload-time = "2026-03-25T23:33:37.034Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ec/4d/8e7d7245c79c617d08724e2efa397737715ca0ec830ecb3c91e547302555/cryptography-46.0.6-cp311-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:d4e4aadb7fc1f88687f47ca20bb7227981b03afaae69287029da08096853b738", size = 4457425, upload-time = "2026-03-25T23:33:38.904Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/1d/5c/f6c3596a1430cec6f949085f0e1a970638d76f81c3ea56d93d564d04c340/cryptography-46.0.6-cp311-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:2b417edbe8877cda9022dde3a008e2deb50be9c407eef034aeeb3a8b11d9db3c", size = 4405530, upload-time = "2026-03-25T23:33:40.842Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/7e/c9/9f9cea13ee2dbde070424e0c4f621c091a91ffcc504ffea5e74f0e1daeff/cryptography-46.0.6-cp311-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:380343e0653b1c9d7e1f55b52aaa2dbb2fdf2730088d48c43ca1c7c0abb7cc2f", size = 4667896, upload-time = "2026-03-25T23:33:42.781Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ad/b5/1895bc0821226f129bc74d00eccfc6a5969e2028f8617c09790bf89c185e/cryptography-46.0.6-cp311-abi3-win32.whl", hash = "sha256:bcb87663e1f7b075e48c3be3ecb5f0b46c8fc50b50a97cf264e7f60242dca3f2", size = 3026348, upload-time = "2026-03-25T23:33:45.021Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c3/f8/c9bcbf0d3e6ad288b9d9aa0b1dee04b063d19e8c4f871855a03ab3a297ab/cryptography-46.0.6-cp311-abi3-win_amd64.whl", hash = "sha256:6739d56300662c468fddb0e5e291f9b4d084bead381667b9e654c7dd81705124", size = 3483896, upload-time = "2026-03-25T23:33:46.649Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/01/41/3a578f7fd5c70611c0aacba52cd13cb364a5dee895a5c1d467208a9380b0/cryptography-46.0.6-cp314-cp314t-macosx_10_9_universal2.whl", hash = "sha256:2ef9e69886cbb137c2aef9772c2e7138dc581fad4fcbcf13cc181eb5a3ab6275", size = 7117147, upload-time = "2026-03-25T23:33:48.249Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/fa/87/887f35a6fca9dde90cad08e0de0c89263a8e59b2d2ff904fd9fcd8025b6f/cryptography-46.0.6-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:7f417f034f91dcec1cb6c5c35b07cdbb2ef262557f701b4ecd803ee8cefed4f4", size = 4266221, upload-time = "2026-03-25T23:33:49.874Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/aa/a8/0a90c4f0b0871e0e3d1ed126aed101328a8a57fd9fd17f00fb67e82a51ca/cryptography-46.0.6-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:d24c13369e856b94892a89ddf70b332e0b70ad4a5c43cf3e9cb71d6d7ffa1f7b", size = 4408952, upload-time = "2026-03-25T23:33:52.128Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/16/0b/b239701eb946523e4e9f329336e4ff32b1247e109cbab32d1a7b61da8ed7/cryptography-46.0.6-cp314-cp314t-manylinux_2_28_aarch64.whl", hash = "sha256:aad75154a7ac9039936d50cf431719a2f8d4ed3d3c277ac03f3339ded1a5e707", size = 4270141, upload-time = "2026-03-25T23:33:54.11Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/0f/a8/976acdd4f0f30df7b25605f4b9d3d89295351665c2091d18224f7ad5cdbf/cryptography-46.0.6-cp314-cp314t-manylinux_2_28_ppc64le.whl", hash = "sha256:3c21d92ed15e9cfc6eb64c1f5a0326db22ca9c2566ca46d845119b45b4400361", size = 4904178, upload-time = "2026-03-25T23:33:55.725Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/b1/1b/bf0e01a88efd0e59679b69f42d4afd5bced8700bb5e80617b2d63a3741af/cryptography-46.0.6-cp314-cp314t-manylinux_2_28_x86_64.whl", hash = "sha256:4668298aef7cddeaf5c6ecc244c2302a2b8e40f384255505c22875eebb47888b", size = 4441812, upload-time = "2026-03-25T23:33:57.364Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/bb/8b/11df86de2ea389c65aa1806f331cae145f2ed18011f30234cc10ca253de8/cryptography-46.0.6-cp314-cp314t-manylinux_2_31_armv7l.whl", hash = "sha256:8ce35b77aaf02f3b59c90b2c8a05c73bac12cea5b4e8f3fbece1f5fddea5f0ca", size = 3963923, upload-time = "2026-03-25T23:33:59.361Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/91/e0/207fb177c3a9ef6a8108f234208c3e9e76a6aa8cf20d51932916bd43bda0/cryptography-46.0.6-cp314-cp314t-manylinux_2_34_aarch64.whl", hash = "sha256:c89eb37fae9216985d8734c1afd172ba4927f5a05cfd9bf0e4863c6d5465b013", size = 4269695, upload-time = "2026-03-25T23:34:00.909Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/21/5e/19f3260ed1e95bced52ace7501fabcd266df67077eeb382b79c81729d2d3/cryptography-46.0.6-cp314-cp314t-manylinux_2_34_ppc64le.whl", hash = "sha256:ed418c37d095aeddf5336898a132fba01091f0ac5844e3e8018506f014b6d2c4", size = 4869785, upload-time = "2026-03-25T23:34:02.796Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/10/38/cd7864d79aa1d92ef6f1a584281433419b955ad5a5ba8d1eb6c872165bcb/cryptography-46.0.6-cp314-cp314t-manylinux_2_34_x86_64.whl", hash = "sha256:69cf0056d6947edc6e6760e5f17afe4bea06b56a9ac8a06de9d2bd6b532d4f3a", size = 4441404, upload-time = "2026-03-25T23:34:04.35Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/09/0a/4fe7a8d25fed74419f91835cf5829ade6408fd1963c9eae9c4bce390ecbb/cryptography-46.0.6-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:8e7304c4f4e9490e11efe56af6713983460ee0780f16c63f219984dab3af9d2d", size = 4397549, upload-time = "2026-03-25T23:34:06.342Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5f/a0/7d738944eac6513cd60a8da98b65951f4a3b279b93479a7e8926d9cd730b/cryptography-46.0.6-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:b928a3ca837c77a10e81a814a693f2295200adb3352395fad024559b7be7a736", size = 4651874, upload-time = "2026-03-25T23:34:07.916Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/cb/f1/c2326781ca05208845efca38bf714f76939ae446cd492d7613808badedf1/cryptography-46.0.6-cp314-cp314t-win32.whl", hash = "sha256:97c8115b27e19e592a05c45d0dd89c57f81f841cc9880e353e0d3bf25b2139ed", size = 3001511, upload-time = "2026-03-25T23:34:09.892Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c9/57/fe4a23eb549ac9d903bd4698ffda13383808ef0876cc912bcb2838799ece/cryptography-46.0.6-cp314-cp314t-win_amd64.whl", hash = "sha256:c797e2517cb7880f8297e2c0f43bb910e91381339336f75d2c1c2cbf811b70b4", size = 3471692, upload-time = "2026-03-25T23:34:11.613Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c4/cc/f330e982852403da79008552de9906804568ae9230da8432f7496ce02b71/cryptography-46.0.6-cp38-abi3-macosx_10_9_universal2.whl", hash = "sha256:12cae594e9473bca1a7aceb90536060643128bb274fcea0fc459ab90f7d1ae7a", size = 7162776, upload-time = "2026-03-25T23:34:13.308Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/49/b3/dc27efd8dcc4bff583b3f01d4a3943cd8b5821777a58b3a6a5f054d61b79/cryptography-46.0.6-cp38-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:639301950939d844a9e1c4464d7e07f902fe9a7f6b215bb0d4f28584729935d8", size = 4270529, upload-time = "2026-03-25T23:34:15.019Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e6/05/e8d0e6eb4f0d83365b3cb0e00eb3c484f7348db0266652ccd84632a3d58d/cryptography-46.0.6-cp38-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:ed3775295fb91f70b4027aeba878d79b3e55c0b3e97eaa4de71f8f23a9f2eb77", size = 4414827, upload-time = "2026-03-25T23:34:16.604Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/2f/97/daba0f5d2dc6d855e2dcb70733c812558a7977a55dd4a6722756628c44d1/cryptography-46.0.6-cp38-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:8927ccfbe967c7df312ade694f987e7e9e22b2425976ddbf28271d7e58845290", size = 4271265, upload-time = "2026-03-25T23:34:18.586Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/89/06/fe1fce39a37ac452e58d04b43b0855261dac320a2ebf8f5260dd55b201a9/cryptography-46.0.6-cp38-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:b12c6b1e1651e42ab5de8b1e00dc3b6354fdfd778e7fa60541ddacc27cd21410", size = 4916800, upload-time = "2026-03-25T23:34:20.561Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ff/8a/b14f3101fe9c3592603339eb5d94046c3ce5f7fc76d6512a2d40efd9724e/cryptography-46.0.6-cp38-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:063b67749f338ca9c5a0b7fe438a52c25f9526b851e24e6c9310e7195aad3b4d", size = 4448771, upload-time = "2026-03-25T23:34:22.406Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/01/b3/0796998056a66d1973fd52ee89dc1bb3b6581960a91ad4ac705f182d398f/cryptography-46.0.6-cp38-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:02fad249cb0e090b574e30b276a3da6a149e04ee2f049725b1f69e7b8351ec70", size = 3978333, upload-time = "2026-03-25T23:34:24.281Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c5/3d/db200af5a4ffd08918cd55c08399dc6c9c50b0bc72c00a3246e099d3a849/cryptography-46.0.6-cp38-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:7e6142674f2a9291463e5e150090b95a8519b2fb6e6aaec8917dd8d094ce750d", size = 4271069, upload-time = "2026-03-25T23:34:25.895Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d7/18/61acfd5b414309d74ee838be321c636fe71815436f53c9f0334bf19064fa/cryptography-46.0.6-cp38-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:456b3215172aeefb9284550b162801d62f5f264a081049a3e94307fe20792cfa", size = 4878358, upload-time = "2026-03-25T23:34:27.67Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/8b/65/5bf43286d566f8171917cae23ac6add941654ccf085d739195a4eacf1674/cryptography-46.0.6-cp38-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:341359d6c9e68834e204ceaf25936dffeafea3829ab80e9503860dcc4f4dac58", size = 4448061, upload-time = "2026-03-25T23:34:29.375Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e0/25/7e49c0fa7205cf3597e525d156a6bce5b5c9de1fd7e8cb01120e459f205a/cryptography-46.0.6-cp38-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:9a9c42a2723999a710445bc0d974e345c32adfd8d2fac6d8a251fa829ad31cfb", size = 4399103, upload-time = "2026-03-25T23:34:32.036Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/44/46/466269e833f1c4718d6cd496ffe20c56c9c8d013486ff66b4f69c302a68d/cryptography-46.0.6-cp38-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:6617f67b1606dfd9fe4dbfa354a9508d4a6d37afe30306fe6c101b7ce3274b72", size = 4659255, upload-time = "2026-03-25T23:34:33.679Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/0a/09/ddc5f630cc32287d2c953fc5d32705e63ec73e37308e5120955316f53827/cryptography-46.0.6-cp38-abi3-win32.whl", hash = "sha256:7f6690b6c55e9c5332c0b59b9c8a3fb232ebf059094c17f9019a51e9827df91c", size = 3010660, upload-time = "2026-03-25T23:34:35.418Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/1b/82/ca4893968aeb2709aacfb57a30dec6fa2ab25b10fa9f064b8882ce33f599/cryptography-46.0.6-cp38-abi3-win_amd64.whl", hash = "sha256:79e865c642cfc5c0b3eb12af83c35c5aeff4fa5c672dc28c43721c2c9fdd2f0f", size = 3471160, upload-time = "2026-03-25T23:34:37.191Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@@ -1157,7 +1157,7 @@ wheels = [
|
||||
|
||||
[[package]]
|
||||
name = "meet"
|
||||
version = "1.12.0"
|
||||
version = "1.13.0"
|
||||
source = { editable = "." }
|
||||
dependencies = [
|
||||
{ name = "aiohttp" },
|
||||
@@ -1255,7 +1255,7 @@ requires-dist = [
|
||||
{ name = "python-frontmatter", specifier = "==1.1.0" },
|
||||
{ name = "python-magic", specifier = "==0.4.27" },
|
||||
{ name = "redis", specifier = "==5.2.1" },
|
||||
{ name = "requests", specifier = "==2.32.5" },
|
||||
{ name = "requests", specifier = "==2.33.0" },
|
||||
{ name = "sentry-sdk", specifier = "==2.54.0" },
|
||||
{ name = "whitenoise", specifier = "==6.12.0" },
|
||||
]
|
||||
@@ -1965,7 +1965,7 @@ wheels = [
|
||||
|
||||
[[package]]
|
||||
name = "requests"
|
||||
version = "2.32.5"
|
||||
version = "2.33.0"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "certifi" },
|
||||
@@ -1973,9 +1973,9 @@ dependencies = [
|
||||
{ name = "idna" },
|
||||
{ name = "urllib3" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/c9/74/b3ff8e6c8446842c3f5c837e9c3dfcfe2018ea6ecef224c710c85ef728f4/requests-2.32.5.tar.gz", hash = "sha256:dbba0bac56e100853db0ea71b82b4dfd5fe2bf6d3754a8893c3af500cec7d7cf", size = 134517, upload-time = "2025-08-18T20:46:02.573Z" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/34/64/8860370b167a9721e8956ae116825caff829224fbca0ca6e7bf8ddef8430/requests-2.33.0.tar.gz", hash = "sha256:c7ebc5e8b0f21837386ad0e1c8fe8b829fa5f544d8df3b2253bff14ef29d7652", size = 134232, upload-time = "2026-03-25T15:10:41.586Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/1e/db/4254e3eabe8020b458f1a747140d32277ec7a271daf1d235b70dc0b4e6e3/requests-2.32.5-py3-none-any.whl", hash = "sha256:2462f94637a34fd532264295e186976db0f5d453d1cdd31473c85a6a161affb6", size = 64738, upload-time = "2025-08-18T20:46:00.542Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/56/5d/c814546c2333ceea4ba42262d8c4d55763003e767fa169adc693bd524478/requests-2.33.0-py3-none-any.whl", hash = "sha256:3324635456fa185245e24865e810cecec7b4caf933d7eb133dcde67d48cee69b", size = 65017, upload-time = "2026-03-25T15:10:40.382Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
||||
Generated
+3
-872
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "meet",
|
||||
"private": true,
|
||||
"version": "1.12.0",
|
||||
"version": "1.13.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "panda codegen && vite",
|
||||
@@ -10,9 +10,7 @@
|
||||
"preview": "vite preview",
|
||||
"i18n:extract": "npx i18next -c i18next-parser.config.json",
|
||||
"format": "prettier --write ./src",
|
||||
"check": "prettier --check ./src",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
"check": "prettier --check ./src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/material-symbols-outlined": "5.2.34",
|
||||
@@ -61,12 +59,10 @@
|
||||
"eslint-plugin-jsx-a11y": "6.10.2",
|
||||
"eslint-plugin-react-hooks": "5.2.0",
|
||||
"eslint-plugin-react-refresh": "0.4.20",
|
||||
"jsdom": "^29.0.2",
|
||||
"postcss": "8.5.6",
|
||||
"prettier": "3.8.1",
|
||||
"typescript": "5.8.3",
|
||||
"vite": "7.3.1",
|
||||
"vite-tsconfig-paths": "6.1.1",
|
||||
"vitest": "^4.1.3"
|
||||
"vite-tsconfig-paths": "6.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -274,6 +274,11 @@ const config: Config = {
|
||||
min: { value: 'min-content' },
|
||||
max: { value: 'max-content' },
|
||||
fit: { value: 'fit-content' },
|
||||
// room layout
|
||||
'room-side-panel': { value: '360px' },
|
||||
'room-side-panel-margin': { value: '1.5rem' },
|
||||
'room-control-bar': { value: '80px' },
|
||||
'room-reaction-toolbar-height': { value: '42px' },
|
||||
},
|
||||
spacing,
|
||||
}),
|
||||
|
||||
@@ -14,7 +14,6 @@ import './i18n/init'
|
||||
import { queryClient } from '@/api/queryClient'
|
||||
import { AppInitialization } from '@/components/AppInitialization'
|
||||
import { useIsSdkContext } from '@/features/sdk/hooks/useIsSdkContext'
|
||||
import { VaultClientProvider } from '@/features/encryption'
|
||||
|
||||
function App() {
|
||||
const { i18n } = useTranslation()
|
||||
@@ -26,22 +25,20 @@ function App() {
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{!isSDKContext && <AppInitialization />}
|
||||
<Suspense fallback={null}>
|
||||
<VaultClientProvider>
|
||||
<I18nProvider locale={i18n.language}>
|
||||
<Layout>
|
||||
<I18nProvider locale={i18n.language}>
|
||||
<Layout>
|
||||
<Switch>
|
||||
{Object.entries(routes).map(([, route], i) => (
|
||||
<Route key={i} path={route.path} component={route.Component} />
|
||||
))}
|
||||
<Route component={NotFoundScreen} />
|
||||
</Switch>
|
||||
</Layout>
|
||||
<ReactQueryDevtools
|
||||
initialIsOpen={false}
|
||||
buttonPosition="bottom-left"
|
||||
/>
|
||||
</I18nProvider>
|
||||
</VaultClientProvider>
|
||||
</Layout>
|
||||
<ReactQueryDevtools
|
||||
initialIsOpen={false}
|
||||
buttonPosition="bottom-left"
|
||||
/>
|
||||
</I18nProvider>
|
||||
</Suspense>
|
||||
</QueryClientProvider>
|
||||
)
|
||||
|
||||
@@ -52,11 +52,6 @@ export interface ApiConfig {
|
||||
enable_firefox_proxy_workaround: boolean
|
||||
default_sources: string[]
|
||||
}
|
||||
encryption?: {
|
||||
enabled: boolean
|
||||
vault_url: string
|
||||
interface_url: string
|
||||
}
|
||||
transcription_destination?: string
|
||||
}
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ export const Avatar = ({
|
||||
style,
|
||||
...props
|
||||
}: AvatarProps) => {
|
||||
const initial = name?.trim()?.charAt(0)?.toUpperCase() ?? ''
|
||||
const initial = name?.trim()?.charAt(0) ?? ''
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@@ -70,7 +70,7 @@ export const Avatar = ({
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={css({
|
||||
lineHeight: 1,
|
||||
marginTop: '-0.3rem',
|
||||
})}
|
||||
>
|
||||
{initial}
|
||||
|
||||
@@ -3,8 +3,7 @@ import { BackendLanguage } from '@/utils/languages'
|
||||
export type ApiUser = {
|
||||
id: string
|
||||
email: string
|
||||
full_name: string | null
|
||||
short_name: string | null
|
||||
full_name: string
|
||||
last_name: string
|
||||
language: BackendLanguage
|
||||
timezone: string
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
/**
|
||||
* Indicator shown at the top-left of an encrypted meeting.
|
||||
*
|
||||
* Initially shows the full label "End-to-end encrypted" with a lock icon.
|
||||
* After a few seconds, collapses to just the lock icon.
|
||||
* On hover, expands back with a smooth animation.
|
||||
* Clicking opens a modal explaining what E2EE means and its limitations.
|
||||
*/
|
||||
import { css } from '@/styled-system/css'
|
||||
import { VStack } from '@/styled-system/jsx'
|
||||
import { RiLockFill, RiShieldCheckFill } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom, ApiEncryptionMode } from '@/features/rooms/api/ApiRoom'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Dialog, Text } from '@/primitives'
|
||||
|
||||
const COLLAPSE_DELAY = 4000
|
||||
|
||||
export function EncryptedMeetingBanner() {
|
||||
const roomData = useRoomData()
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'encryption' })
|
||||
const [isCollapsed, setIsCollapsed] = useState(false)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
|
||||
const isStrongEncryption = roomData?.encryption_mode === ApiEncryptionMode.ADVANCED
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsCollapsed(true), COLLAPSE_DELAY)
|
||||
return () => clearTimeout(timer)
|
||||
}, [])
|
||||
|
||||
if (!isEncryptedRoom(roomData)) return null
|
||||
|
||||
const bgColor = isStrongEncryption ? '#166534' : '#1e3a5f'
|
||||
const hoverBgColor = isStrongEncryption ? '#15803d' : '#2563eb'
|
||||
const icon = isStrongEncryption
|
||||
? <RiShieldCheckFill size={13} color="white" className={css({ flexShrink: 0 })} />
|
||||
: <RiLockFill size={13} color="white" className={css({ flexShrink: 0 })} />
|
||||
const label = isStrongEncryption ? t('bannerStrong') : t('banner')
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onMouseEnter={() => setIsCollapsed(false)}
|
||||
onMouseLeave={() => setIsCollapsed(true)}
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && setIsModalOpen(true)}
|
||||
aria-label={label}
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
top: '0.5rem',
|
||||
left: '0.5rem',
|
||||
zIndex: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.35rem',
|
||||
padding: '0.3rem 0.6rem',
|
||||
borderRadius: '1rem',
|
||||
border: '2px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
transition: 'all 300ms ease',
|
||||
maxWidth: isCollapsed ? '2.2rem' : '16rem',
|
||||
whiteSpace: 'nowrap',
|
||||
})}
|
||||
style={{
|
||||
backgroundColor: bgColor,
|
||||
paddingRight: isCollapsed ? '0.3rem' : '0.6rem',
|
||||
}}
|
||||
onMouseOver={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = hoverBgColor }}
|
||||
onMouseOut={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = bgColor }}
|
||||
>
|
||||
{icon}
|
||||
<span
|
||||
className={css({
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 600,
|
||||
color: 'white',
|
||||
letterSpacing: '0.02em',
|
||||
transition: 'opacity 200ms ease',
|
||||
})}
|
||||
style={{
|
||||
opacity: isCollapsed ? 0 : 1,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
isOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
role="dialog"
|
||||
type="flex"
|
||||
title={t('bannerModal.title')}
|
||||
>
|
||||
<VStack
|
||||
gap="1rem"
|
||||
alignItems="start"
|
||||
className={css({ maxWidth: '24rem' })}
|
||||
>
|
||||
<Text variant="sm">
|
||||
{isStrongEncryption
|
||||
? t('bannerModal.descriptionAdvanced')
|
||||
: t('bannerModal.descriptionBasic')}
|
||||
</Text>
|
||||
|
||||
<VStack gap="0.5rem" alignItems="start" className={css({ width: '100%' })}>
|
||||
<Text variant="sm" className={css({ fontWeight: 600 })}>
|
||||
{t('bannerModal.guarantees')}
|
||||
</Text>
|
||||
<ul
|
||||
className={css({
|
||||
paddingLeft: '1.5rem',
|
||||
fontSize: '0.85rem',
|
||||
listStyleType: 'disc',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.4rem',
|
||||
'& li': {
|
||||
paddingLeft: '0.25rem',
|
||||
},
|
||||
'& li::marker': {
|
||||
color: '#22c55e',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<li>{t('bannerModal.guarantee1')}</li>
|
||||
<li>{t('bannerModal.guarantee2')}</li>
|
||||
<li>{t('bannerModal.guarantee3')}</li>
|
||||
</ul>
|
||||
</VStack>
|
||||
|
||||
<VStack gap="0.5rem" alignItems="start" className={css({ width: '100%' })}>
|
||||
<Text variant="sm" className={css({ fontWeight: 600 })}>
|
||||
{t('bannerModal.limitations')}
|
||||
</Text>
|
||||
<ul
|
||||
className={css({
|
||||
paddingLeft: '1.5rem',
|
||||
fontSize: '0.85rem',
|
||||
listStyleType: 'disc',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.4rem',
|
||||
'& li': {
|
||||
paddingLeft: '0.25rem',
|
||||
},
|
||||
'& li::marker': {
|
||||
color: '#f59e0b',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<li>{t('bannerModal.limitation1')}</li>
|
||||
<li>{isStrongEncryption
|
||||
? t('bannerModal.limitation2Advanced')
|
||||
: t('bannerModal.limitation2Basic')}
|
||||
</li>
|
||||
</ul>
|
||||
</VStack>
|
||||
|
||||
<Text
|
||||
variant="note"
|
||||
className={css({
|
||||
fontSize: '0.75rem',
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
paddingTop: '0.75rem',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
{t('bannerModal.note')}
|
||||
</Text>
|
||||
</VStack>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
/**
|
||||
* Per-participant encryption trust badge.
|
||||
*
|
||||
* In advanced mode:
|
||||
* - "verified": Green shield — fingerprint explicitly trusted
|
||||
* - "unknown": Grey shield — has public key, not yet verified
|
||||
* - "refused": Red shield — fingerprint previously refused
|
||||
* - "authenticated": Blue shield — ProConnect, no vault keys
|
||||
* - "anonymous": Orange warning — not signed in
|
||||
*
|
||||
* In basic mode:
|
||||
* - "authenticated": Blue shield — ProConnect
|
||||
* - "anonymous": Orange warning — not signed in
|
||||
*/
|
||||
import {
|
||||
RiShieldCheckFill,
|
||||
RiShieldFill,
|
||||
RiShieldCrossFill,
|
||||
RiErrorWarningFill,
|
||||
RiLockFill,
|
||||
} from '@remixicon/react'
|
||||
import type { TrustLevel } from './types'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
interface EncryptionBadgeProps {
|
||||
trustLevel: TrustLevel | null
|
||||
isEncrypted: boolean
|
||||
}
|
||||
|
||||
export function EncryptionBadge({
|
||||
trustLevel,
|
||||
isEncrypted,
|
||||
}: EncryptionBadgeProps) {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'encryption.badge' })
|
||||
|
||||
if (!isEncrypted) return null
|
||||
|
||||
let icon: React.ReactNode
|
||||
let label: string
|
||||
|
||||
switch (trustLevel) {
|
||||
case 'verified':
|
||||
icon = <RiShieldCheckFill size={14} color="#22c55e" />
|
||||
label = t('verified')
|
||||
break
|
||||
case 'unknown':
|
||||
icon = <RiShieldFill size={14} color="#9ca3af" />
|
||||
label = t('unknown')
|
||||
break
|
||||
case 'refused':
|
||||
icon = <RiShieldCrossFill size={14} color="#ef4444" />
|
||||
label = t('refused')
|
||||
break
|
||||
case 'authenticated':
|
||||
icon = <RiShieldCheckFill size={14} color="#3b82f6" />
|
||||
label = t('authenticated')
|
||||
break
|
||||
case 'anonymous':
|
||||
icon = <RiErrorWarningFill size={15} color="#d97706" />
|
||||
label = t('anonymous')
|
||||
break
|
||||
default:
|
||||
icon = <RiLockFill size={14} />
|
||||
label = t('default')
|
||||
break
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
aria-label={label}
|
||||
className={css({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
marginRight: '0.15rem',
|
||||
cursor: 'inherit',
|
||||
})}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
interface EncryptionContextValue {
|
||||
symmetricKey?: Uint8Array
|
||||
}
|
||||
|
||||
const EncryptionContext = createContext<EncryptionContextValue>({})
|
||||
|
||||
export const EncryptionProvider = EncryptionContext.Provider
|
||||
export const useEncryptionContext = () => useContext(EncryptionContext)
|
||||
@@ -1,326 +0,0 @@
|
||||
/**
|
||||
* Dialog showing a participant's encryption fingerprint.
|
||||
* Allows the admin to verify, accept, or refuse the fingerprint.
|
||||
*
|
||||
* This connects to the encryption library's VaultClient to check/accept/refuse
|
||||
* fingerprints from the TOFU (Trust On First Use) registry.
|
||||
*/
|
||||
import { css } from '@/styled-system/css'
|
||||
import { VStack, HStack } from '@/styled-system/jsx'
|
||||
import { Dialog, Text, Button } from '@/primitives'
|
||||
import { Avatar } from '@/components/Avatar'
|
||||
import { useUser } from '@/features/auth'
|
||||
import {
|
||||
RiShieldCheckFill,
|
||||
RiShieldCheckLine,
|
||||
RiAlertLine,
|
||||
RiCheckLine,
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useVaultClient } from './VaultClientProvider'
|
||||
import { formatFingerprint } from './useParticipantTrustLevel'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
interface EncryptionIdentityDialogProps {
|
||||
isOpen: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
participantName: string
|
||||
participantEmail?: string
|
||||
suiteUserId?: string
|
||||
isAuthenticated: boolean
|
||||
encryptionMode?: 'basic' | 'advanced' | 'none'
|
||||
isSelf?: boolean
|
||||
preloadedFingerprint?: string | null
|
||||
preloadedFingerprintStatus?: string | null
|
||||
}
|
||||
|
||||
type FingerprintStatus = 'loading' | 'no-key' | 'trusted' | 'refused' | 'unknown' | 'error'
|
||||
|
||||
export function EncryptionIdentityDialog({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
participantName,
|
||||
participantEmail,
|
||||
suiteUserId,
|
||||
isAuthenticated,
|
||||
encryptionMode,
|
||||
isSelf,
|
||||
preloadedFingerprint,
|
||||
preloadedFingerprintStatus,
|
||||
}: EncryptionIdentityDialogProps) {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'encryption.fingerprint' })
|
||||
const { client: vaultClient } = useVaultClient()
|
||||
const { isLoggedIn } = useUser()
|
||||
const [status, setStatus] = useState<FingerprintStatus>(
|
||||
(preloadedFingerprintStatus as FingerprintStatus) || 'loading'
|
||||
)
|
||||
const [fingerprint, setFingerprint] = useState<string | null>(preloadedFingerprint || null)
|
||||
|
||||
// Sync preloaded data when it becomes available (hook resolves after mount)
|
||||
useEffect(() => {
|
||||
if (preloadedFingerprintStatus) setStatus(preloadedFingerprintStatus as FingerprintStatus)
|
||||
if (preloadedFingerprint) setFingerprint(preloadedFingerprint)
|
||||
}, [preloadedFingerprint, preloadedFingerprintStatus])
|
||||
|
||||
const isBasicMode = encryptionMode !== 'advanced'
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
// In basic mode, no fingerprint check — identity is from ProConnect only
|
||||
if (isBasicMode) {
|
||||
setStatus(isAuthenticated ? 'no-key' : 'no-key')
|
||||
return
|
||||
}
|
||||
if (!vaultClient) {
|
||||
setStatus('error')
|
||||
return
|
||||
}
|
||||
if (!suiteUserId) {
|
||||
setStatus(isAuthenticated ? 'no-key' : 'no-key')
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
|
||||
async function checkFingerprint() {
|
||||
try {
|
||||
const timeout = new Promise<never>((_, reject) =>
|
||||
setTimeout(() => reject(new Error('timeout')), 3000)
|
||||
)
|
||||
|
||||
const fetchResult = await Promise.race([
|
||||
vaultClient!.fetchPublicKeys([suiteUserId!]),
|
||||
timeout,
|
||||
])
|
||||
|
||||
const publicKey = fetchResult.publicKeys[suiteUserId!]
|
||||
|
||||
if (!publicKey || cancelled) {
|
||||
setStatus('no-key')
|
||||
return
|
||||
}
|
||||
|
||||
// Compute fingerprint from the public key (SHA-256, first 16 hex chars)
|
||||
const hash = await crypto.subtle.digest('SHA-256', publicKey)
|
||||
const fp = Array.from(new Uint8Array(hash))
|
||||
.map((b) => b.toString(16).padStart(2, '0'))
|
||||
.join('')
|
||||
.slice(0, 16)
|
||||
|
||||
if (cancelled) return
|
||||
setFingerprint(fp)
|
||||
|
||||
// Check local registry without triggering TOFU auto-trust
|
||||
const { fingerprints: known } = await Promise.race([
|
||||
vaultClient!.getKnownFingerprints(),
|
||||
timeout,
|
||||
])
|
||||
if (cancelled) return
|
||||
|
||||
const knownEntry = known[suiteUserId!]
|
||||
if (!knownEntry) {
|
||||
setStatus('unknown')
|
||||
} else if (knownEntry.fingerprint === fp) {
|
||||
setStatus(knownEntry.status)
|
||||
} else {
|
||||
// Fingerprint changed — needs re-verification
|
||||
setStatus('unknown')
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) setStatus('error')
|
||||
}
|
||||
}
|
||||
|
||||
checkFingerprint()
|
||||
return () => { cancelled = true }
|
||||
}, [isOpen, vaultClient, suiteUserId, isAuthenticated])
|
||||
|
||||
const handleAccept = async () => {
|
||||
if (!vaultClient || !suiteUserId || !fingerprint) return
|
||||
try {
|
||||
await vaultClient.acceptFingerprint(suiteUserId, fingerprint)
|
||||
setStatus('trusted')
|
||||
} catch {
|
||||
// Failed to accept
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefuse = async () => {
|
||||
if (!vaultClient || !suiteUserId || !fingerprint) return
|
||||
try {
|
||||
await vaultClient.refuseFingerprint(suiteUserId, fingerprint)
|
||||
setStatus('refused')
|
||||
} catch {
|
||||
// Failed to refuse
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={isOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
role="dialog"
|
||||
type="flex"
|
||||
title={t('title')}
|
||||
>
|
||||
<VStack
|
||||
gap="0.75rem"
|
||||
alignItems="start"
|
||||
className={css({ maxWidth: '22rem' })}
|
||||
>
|
||||
<HStack gap="0.65rem" className={css({ width: '100%' })}>
|
||||
<div className={css({ flexShrink: 0, transform: 'scale(0.85)' })}>
|
||||
<Avatar name={participantName} bgColor="rgb(87, 44, 216)" />
|
||||
</div>
|
||||
<VStack gap="0" alignItems="start">
|
||||
<Text className={css({ fontWeight: 600, fontSize: '0.9rem' })}>{participantName}</Text>
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem', color: 'greyscale.500' })}>
|
||||
{isLoggedIn && participantEmail ? participantEmail : (!isAuthenticated ? t('anonymous') : '')}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{isSelf
|
||||
? (isAuthenticated ? t('descriptionSelf') : t('descriptionSelfAnonymous'))
|
||||
: t('description')}
|
||||
</Text>
|
||||
|
||||
{status === 'loading' && (
|
||||
<Text variant="note">{t('loading')}</Text>
|
||||
)}
|
||||
|
||||
{status === 'no-key' && isBasicMode && isAuthenticated && (
|
||||
<HStack
|
||||
gap="0.5rem"
|
||||
className={css({
|
||||
backgroundColor: '#eff6ff',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
width: '100%',
|
||||
border: '1px solid #bfdbfe',
|
||||
})}
|
||||
>
|
||||
<RiShieldCheckLine size={20} color="#3b82f6" className={css({ flexShrink: 0 })} />
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{t('noKeyBasicAuthenticated')}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{status === 'no-key' && !(isBasicMode && isAuthenticated) && !isSelf && (
|
||||
<HStack
|
||||
gap="0.5rem"
|
||||
className={css({
|
||||
backgroundColor: '#fffbeb',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
width: '100%',
|
||||
border: '1px solid #fde68a',
|
||||
})}
|
||||
>
|
||||
<RiAlertLine size={20} color="#f59e0b" className={css({ flexShrink: 0 })} />
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{isAuthenticated ? t('noKey') : t('noKeyAnonymous')}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{status === 'error' && (
|
||||
<Text variant="note" className={css({ color: '#ef4444' })}>
|
||||
{t('error')}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{(status === 'trusted' || status === 'refused' || status === 'unknown') && fingerprint && (
|
||||
<>
|
||||
<VStack
|
||||
gap="0.25rem"
|
||||
className={css({
|
||||
backgroundColor: 'greyscale.50',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
width: '100%',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.85rem',
|
||||
letterSpacing: '0.05em',
|
||||
wordBreak: 'break-all',
|
||||
})}
|
||||
>
|
||||
<Text variant="note" className={css({ fontSize: '0.7rem', fontFamily: 'inherit' })}>
|
||||
{t('fingerprintLabel')}
|
||||
</Text>
|
||||
{formatFingerprint(fingerprint)}
|
||||
</VStack>
|
||||
|
||||
{status === 'trusted' && (
|
||||
<VStack gap="0.25rem" alignItems="start">
|
||||
<HStack gap="0.5rem" className={css({ color: '#22c55e' })}>
|
||||
<RiShieldCheckFill size={18} />
|
||||
<Text className={css({ fontSize: '0.85rem', fontWeight: 600, color: 'inherit' })}>
|
||||
{t('trusted')}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{isSelf ? t('descriptionSelf') : t('trustedDescription')}
|
||||
</Text>
|
||||
{!isSelf && (
|
||||
<Text
|
||||
variant="note"
|
||||
className={css({ fontSize: '0.75rem', color: 'greyscale.500', cursor: 'pointer', _hover: { textDecoration: 'underline' } })}
|
||||
onClick={() => setStatus('unknown')}
|
||||
>
|
||||
{t('changeDecision')}
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{status === 'refused' && (
|
||||
<VStack gap="0.25rem" alignItems="start">
|
||||
<HStack gap="0.5rem" className={css({ color: '#ef4444' })}>
|
||||
<RiCloseLine size={18} />
|
||||
<Text className={css({ fontSize: '0.85rem', fontWeight: 600, color: 'inherit' })}>
|
||||
{t('refused')}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{t('refusedDescription')}
|
||||
</Text>
|
||||
<Text
|
||||
variant="note"
|
||||
className={css({ fontSize: '0.75rem', color: 'greyscale.500', cursor: 'pointer', _hover: { textDecoration: 'underline' } })}
|
||||
onClick={() => setStatus('unknown')}
|
||||
>
|
||||
{t('changeDecision')}
|
||||
</Text>
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{status === 'unknown' && !isSelf && (
|
||||
<VStack gap="0.5rem" className={css({ width: '100%' })}>
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{t('unknownDescription')}
|
||||
</Text>
|
||||
<Text variant="note" className={css({ fontSize: '0.75rem', fontStyle: 'italic' })}>
|
||||
{t('fingerprintHint')}
|
||||
</Text>
|
||||
<HStack gap="0.5rem">
|
||||
<Button size="sm" variant="primary" onPress={handleAccept}>
|
||||
<RiCheckLine size={16} />
|
||||
{t('accept')}
|
||||
</Button>
|
||||
<Button size="sm" variant="secondaryText" onPress={handleRefuse}>
|
||||
<RiCloseLine size={16} />
|
||||
{t('refuse')}
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
/**
|
||||
* Overlay shown during encryption key exchange.
|
||||
*
|
||||
* When a participant joins an encrypted room, there's a brief period
|
||||
* between connection and receiving the symmetric key where media
|
||||
* cannot be decrypted. This overlay provides feedback during that time.
|
||||
*
|
||||
* After 20 seconds without the key, shows an error with a refresh button.
|
||||
*/
|
||||
import { css } from '@/styled-system/css'
|
||||
import { VStack } from '@/styled-system/jsx'
|
||||
import { Text, Button } from '@/primitives'
|
||||
import { Spinner } from '@/primitives/Spinner'
|
||||
import { RiLockFill, RiAlertFill, RiRefreshLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const KEY_EXCHANGE_TIMEOUT = 20000
|
||||
|
||||
export function EncryptionSetupOverlay({
|
||||
isSettingUp,
|
||||
error,
|
||||
}: {
|
||||
isSettingUp: boolean
|
||||
error: string | null
|
||||
}) {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'encryption' })
|
||||
const [timedOut, setTimedOut] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSettingUp) {
|
||||
setTimedOut(false)
|
||||
return
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => setTimedOut(true), KEY_EXCHANGE_TIMEOUT)
|
||||
return () => clearTimeout(timer)
|
||||
}, [isSettingUp])
|
||||
|
||||
if (!isSettingUp && !error) return null
|
||||
|
||||
const showError = error || timedOut
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.85)',
|
||||
})}
|
||||
>
|
||||
<VStack gap="1rem" alignItems="center">
|
||||
{showError ? (
|
||||
<>
|
||||
<RiAlertFill size={36} color="#f87171" />
|
||||
<Text
|
||||
className={css({
|
||||
color: '#f87171',
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 500,
|
||||
textAlign: 'center',
|
||||
})}
|
||||
>
|
||||
{timedOut ? t('error.timeout') : t('error.title')}
|
||||
</Text>
|
||||
<Text
|
||||
className={css({
|
||||
color: 'greyscale.300',
|
||||
fontSize: '0.85rem',
|
||||
textAlign: 'center',
|
||||
maxWidth: '20rem',
|
||||
})}
|
||||
>
|
||||
{error || t('error.timeoutHint')}
|
||||
</Text>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onPress={() => window.location.reload()}
|
||||
>
|
||||
<RiRefreshLine size={16} />
|
||||
{t('error.refresh')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RiLockFill size={32} color="white" />
|
||||
<Text
|
||||
className={css({
|
||||
color: 'white',
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 500,
|
||||
textAlign: 'center',
|
||||
})}
|
||||
>
|
||||
{t('settingUp.title')}
|
||||
</Text>
|
||||
<Text
|
||||
className={css({
|
||||
color: 'greyscale.300',
|
||||
fontSize: '0.85rem',
|
||||
textAlign: 'center',
|
||||
maxWidth: '20rem',
|
||||
})}
|
||||
>
|
||||
{t('settingUp.description')}
|
||||
</Text>
|
||||
<Spinner />
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
/**
|
||||
* Modal explaining encryption trust levels.
|
||||
* Shown when admin clicks the trust badge in the waiting room.
|
||||
*/
|
||||
import { css } from '@/styled-system/css'
|
||||
import { VStack, HStack } from '@/styled-system/jsx'
|
||||
import { Dialog, Text } from '@/primitives'
|
||||
import { RiShieldCheckFill, RiShieldCheckLine, RiAlertLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
interface EncryptionTrustModalProps {
|
||||
isOpen: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
participantName: string
|
||||
isAuthenticated: boolean
|
||||
}
|
||||
|
||||
export function EncryptionTrustModal({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
participantName,
|
||||
isAuthenticated,
|
||||
}: EncryptionTrustModalProps) {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'encryption.trustModal' })
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={isOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
role="dialog"
|
||||
type="flex"
|
||||
title={t('title')}
|
||||
>
|
||||
<VStack
|
||||
gap="1rem"
|
||||
alignItems="start"
|
||||
className={css({ maxWidth: '22rem' })}
|
||||
>
|
||||
<Text variant="sm">{t('intro', { name: participantName })}</Text>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<HStack
|
||||
gap="0.75rem"
|
||||
className={css({
|
||||
backgroundColor: '#eff6ff',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
width: '100%',
|
||||
border: '1px solid #bfdbfe',
|
||||
})}
|
||||
>
|
||||
<RiShieldCheckLine
|
||||
size={24}
|
||||
color="#3b82f6"
|
||||
className={css({ flexShrink: 0 })}
|
||||
/>
|
||||
<VStack gap="0.25rem" alignItems="start">
|
||||
<Text className={css({ fontWeight: 600, fontSize: '0.85rem' })}>
|
||||
{t('authenticated.title')}
|
||||
</Text>
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{t('authenticated.description')}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
) : (
|
||||
<HStack
|
||||
gap="0.75rem"
|
||||
className={css({
|
||||
backgroundColor: '#fffbeb',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
width: '100%',
|
||||
border: '1px solid #fde68a',
|
||||
})}
|
||||
>
|
||||
<RiAlertLine
|
||||
size={24}
|
||||
color="#f59e0b"
|
||||
className={css({ flexShrink: 0 })}
|
||||
/>
|
||||
<VStack gap="0.25rem" alignItems="start">
|
||||
<Text className={css({ fontWeight: 600, fontSize: '0.85rem' })}>
|
||||
{t('anonymous.title')}
|
||||
</Text>
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem' })}>
|
||||
{t('anonymous.description')}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
<VStack
|
||||
gap="0.5rem"
|
||||
alignItems="start"
|
||||
className={css({
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
paddingTop: '0.75rem',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
variant="note"
|
||||
className={css({ fontWeight: 600, fontSize: '0.8rem' })}
|
||||
>
|
||||
{t('levels.title')}
|
||||
</Text>
|
||||
<HStack gap="0.5rem" alignItems="start">
|
||||
<RiShieldCheckFill
|
||||
size={16}
|
||||
color="#22c55e"
|
||||
className={css({ flexShrink: 0, marginTop: '2px' })}
|
||||
/>
|
||||
<Text variant="note" className={css({ fontSize: '0.75rem' })}>
|
||||
{t('levels.verified')}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack gap="0.5rem" alignItems="start">
|
||||
<RiShieldCheckLine
|
||||
size={16}
|
||||
color="#3b82f6"
|
||||
className={css({ flexShrink: 0, marginTop: '2px' })}
|
||||
/>
|
||||
<Text variant="note" className={css({ fontSize: '0.75rem' })}>
|
||||
{t('levels.authenticated')}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack gap="0.5rem" alignItems="start">
|
||||
<RiAlertLine
|
||||
size={16}
|
||||
color="#f59e0b"
|
||||
className={css({ flexShrink: 0, marginTop: '2px' })}
|
||||
/>
|
||||
<Text variant="note" className={css({ fontSize: '0.75rem' })}>
|
||||
{t('levels.anonymous')}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
/**
|
||||
* Hybrid key distributor: determines the best key distribution method per participant.
|
||||
*
|
||||
* For each participant joining an encrypted call:
|
||||
* 1. Check if they have a registered public key (via VaultClient/encryption library)
|
||||
* → If YES: wrap symmetric key with their public key (PKI path) → trust level "verified"
|
||||
* 2. Check if they are authenticated via ProConnect
|
||||
* → If YES but no public key: use ephemeral DH → trust level "authenticated"
|
||||
* 3. Otherwise: use ephemeral DH → trust level "anonymous"
|
||||
*
|
||||
* The symmetric key is always the same for everyone — only the distribution channel varies.
|
||||
*/
|
||||
import type { TrustLevel } from './types'
|
||||
import { PARTICIPANT_TRUST_ATTR } from './types'
|
||||
|
||||
export interface ParticipantEncryptionInfo {
|
||||
identity: string
|
||||
trustLevel: TrustLevel
|
||||
hasPublicKey: boolean
|
||||
isAuthenticated: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine the trust level for a participant based on their encryption capabilities.
|
||||
*/
|
||||
export function determineTrustLevel(
|
||||
hasPublicKey: boolean,
|
||||
isAuthenticated: boolean
|
||||
): TrustLevel {
|
||||
if (hasPublicKey) return 'verified'
|
||||
if (isAuthenticated) return 'authenticated'
|
||||
return 'anonymous'
|
||||
}
|
||||
|
||||
/**
|
||||
* Derive trust level from participant's server-signed attributes.
|
||||
*
|
||||
* The `is_authenticated` attribute is set by the backend in the LiveKit JWT token
|
||||
* and cannot be spoofed by clients. It indicates whether the participant
|
||||
* authenticated via OIDC (ProConnect/Keycloak).
|
||||
*
|
||||
* In basic encryption mode, the "verified" level is never returned because
|
||||
* PKI keys are not used — encryption relies on a shared passphrase, not on
|
||||
* per-user public keys. The green shield would be misleading.
|
||||
*
|
||||
* In advanced encryption mode, "verified" means the participant has completed
|
||||
* encryption onboarding and their public key is used to encrypt the symmetric key.
|
||||
*/
|
||||
export function getTrustLevelFromAttributes(
|
||||
attributes: Record<string, string> | undefined,
|
||||
encryptionMode?: 'basic' | 'advanced' | 'none',
|
||||
): TrustLevel | null {
|
||||
if (!attributes) return null
|
||||
|
||||
const isAdvanced = encryptionMode === 'advanced'
|
||||
|
||||
// Check for explicit trust level (set by PKI integration)
|
||||
const explicitLevel = attributes[PARTICIPANT_TRUST_ATTR]
|
||||
if (explicitLevel === 'verified' && isAdvanced) {
|
||||
return 'verified'
|
||||
}
|
||||
if (explicitLevel === 'authenticated' || explicitLevel === 'anonymous') {
|
||||
return explicitLevel
|
||||
}
|
||||
|
||||
// Derive from server-signed is_authenticated attribute
|
||||
if (attributes.is_authenticated === 'true') {
|
||||
return 'authenticated'
|
||||
}
|
||||
|
||||
return 'anonymous'
|
||||
}
|
||||
|
||||
/**
|
||||
* Try to distribute the symmetric key via PKI (encryption library).
|
||||
* Returns true if successful, false if the participant doesn't have a public key.
|
||||
*/
|
||||
export async function distributeKeyViaPKI(
|
||||
vaultClient: VaultClient,
|
||||
symmetricKey: Uint8Array,
|
||||
participantUserId: string
|
||||
): Promise<{ success: boolean; encryptedKey?: ArrayBuffer }> {
|
||||
try {
|
||||
const { publicKeys } = await vaultClient.fetchPublicKeys([
|
||||
participantUserId,
|
||||
])
|
||||
const publicKey = publicKeys[participantUserId]
|
||||
|
||||
if (!publicKey) {
|
||||
return { success: false }
|
||||
}
|
||||
|
||||
// Use encryptWithoutKey to wrap the symmetric key for this user
|
||||
const { encryptedKeys } = await vaultClient.shareKeys(
|
||||
symmetricKey.buffer as ArrayBuffer,
|
||||
{ [participantUserId]: publicKey }
|
||||
)
|
||||
|
||||
const encryptedKey = encryptedKeys[participantUserId]
|
||||
if (!encryptedKey) {
|
||||
return { success: false }
|
||||
}
|
||||
|
||||
return { success: true, encryptedKey }
|
||||
} catch (err) {
|
||||
console.warn(
|
||||
'[Encryption] PKI key distribution failed for participant:',
|
||||
participantUserId,
|
||||
err
|
||||
)
|
||||
return { success: false }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Encode trust level into participant attributes for badge display.
|
||||
*/
|
||||
export function encodeTrustLevelAttribute(
|
||||
trustLevel: TrustLevel
|
||||
): Record<string, string> {
|
||||
return { [PARTICIPANT_TRUST_ATTR]: trustLevel }
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
# Encryption Security Architecture
|
||||
|
||||
## Threat model
|
||||
|
||||
### What E2EE protects against
|
||||
- **Server-side data access**: The LiveKit SFU and Meet backend cannot read audio/video content
|
||||
- **Network interception**: Media frames are encrypted before leaving the client
|
||||
- **Unauthorized participants**: Restricted access + lobby ensures only admin-approved users join
|
||||
|
||||
### Known limitations and mitigations
|
||||
|
||||
#### Compromised LiveKit server (MITM on key exchange)
|
||||
|
||||
**Threat**: If the LiveKit server is compromised, it could perform a Man-in-the-Middle attack on the ephemeral DH key exchange, intercepting the symmetric key.
|
||||
|
||||
**Current mitigation**: KEY_RESPONSE is only accepted from participants with `room_admin: "true"` in their server-signed JWT attributes. This prevents non-admin participants from injecting fake keys, but does not protect against a compromised server that can forge JWT attributes.
|
||||
|
||||
**Planned mitigations (3 levels):**
|
||||
|
||||
##### Level 1 — Signed key exchange (requires encryption onboarding)
|
||||
|
||||
When the admin has completed encryption onboarding via `data.encryption`:
|
||||
1. Admin signs the KEY_RESPONSE with their permanent private key (stored in IndexedDB)
|
||||
2. Receiving participant fetches admin's public key from `data.encryption` registry
|
||||
3. Verifies the signature before accepting the symmetric key
|
||||
4. If signature is invalid → **reject the key, show error, cut video**
|
||||
|
||||
This protects against server compromise because the server cannot forge the admin's private key signature.
|
||||
|
||||
**Requirement**: Admin must have completed encryption onboarding. If not, falls back to Level 2.
|
||||
|
||||
##### Level 2 — SAS (Short Authentication String) verification
|
||||
|
||||
After the ephemeral DH key exchange:
|
||||
1. Both parties compute SAS = hash(DH_shared_secret) → displayed as 4 emojis or a 6-digit code
|
||||
2. Each participant sees the SAS on their own screen (local rendering)
|
||||
3. They read it aloud to each other during the call
|
||||
4. If the SAS matches → the key exchange was not intercepted
|
||||
5. If the SAS doesn't match → MITM detected → reject the key
|
||||
|
||||
This works because:
|
||||
- A MITM results in different DH shared secrets → different SAS codes
|
||||
- The SAS is rendered locally — the server cannot change what appears on screen
|
||||
- Real-time audio manipulation to fake the spoken SAS is extremely difficult
|
||||
|
||||
**Requirement**: Participants must verbally compare the SAS. Optional but recommended.
|
||||
|
||||
##### Level 3 — Trust the server (current default)
|
||||
|
||||
Relies on the LiveKit server's integrity (JWT-signed attributes). Suitable when:
|
||||
- The server infrastructure is self-hosted and trusted
|
||||
- The threat model does not include server compromise
|
||||
- Quick, frictionless meetings are prioritized over maximum security
|
||||
|
||||
#### Key propagation without admin
|
||||
|
||||
**Current behavior**: Any participant who has the symmetric key can relay it to new joiners.
|
||||
|
||||
**Risk**: If the server is compromised, it could inject a fake participant who relays a compromised key.
|
||||
|
||||
**Planned fix**: Only accept KEY_RESPONSE from participants whose identity can be:
|
||||
- Cryptographically verified (Level 1 — signature from registered public key), or
|
||||
- Manually verified (Level 2 — SAS comparison)
|
||||
|
||||
Non-verified key relays should show a clear warning.
|
||||
|
||||
## Trust levels
|
||||
|
||||
| Level | Badge | Identity verification | Key exchange | Server compromise protection |
|
||||
|-------|-------|----------------------|-------------|------------------------------|
|
||||
| Verified | 🟢 Green shield | Public key registered in `data.encryption` | Signed with permanent private key | Yes — signature cannot be forged |
|
||||
| Authenticated | 🔵 Blue shield | OIDC/ProConnect login | Ephemeral DH (unsigned) | No — relies on server integrity |
|
||||
| Anonymous | 🟡 Orange warning | None (self-declared name) | Ephemeral DH (unsigned) | No — relies on server integrity |
|
||||
|
||||
#### Basic mode: unencrypted frame window on connection
|
||||
|
||||
**Behavior**: LiveKit's built-in Worker passes frames through unencrypted when `!isEnabled()`.
|
||||
|
||||
**Mitigation**: `setE2EEEnabled(true)` is called BEFORE the room connects (in Conference.tsx),
|
||||
ensuring the 'enable' message reaches the Worker before any frames flow. This eliminates the
|
||||
unencrypted window in normal operation. However, edge cases (Worker message queue delays,
|
||||
race conditions during reconnection) could theoretically still allow a few unencrypted frames.
|
||||
|
||||
**Advanced mode**: VaultE2EEManager drops frames when the key isn't ready — no pass-through.
|
||||
|
||||
#### Basic mode: "Decryption failed" overlay may not appear with wrong passphrase
|
||||
|
||||
**Behavior**: When a participant joins with a wrong passphrase, the receiver may not show the
|
||||
"Decryption failed" overlay. The LiveKit Worker's error throttling (`MAX_ERRORS_PER_MINUTE = 5`)
|
||||
stops emitting `EncryptionError` events after 5 failures. Additionally, when a participant
|
||||
reconnects, the new `ParticipantTile` mounts fresh and may not receive errors referencing
|
||||
the new participant identity.
|
||||
|
||||
**Impact**: The user sees a black tile but no error message explaining why.
|
||||
|
||||
**Advanced mode**: VaultE2EEManager emits `EncryptionError` for each failure and signals
|
||||
`ParticipantEncryptionStatusChanged(true)` on first successful decrypt, ensuring the overlay
|
||||
appears and clears correctly.
|
||||
|
||||
## Implementation status
|
||||
|
||||
- [x] Basic E2EE with LiveKit Worker + passphrase in URL hash
|
||||
- [x] Advanced E2EE with VaultClient iframe (XChaCha20-Poly1305)
|
||||
- [x] Preserved codec header bytes for RTP compatibility
|
||||
- [x] Admin as key authority
|
||||
- [x] Server-signed trust attributes in JWT
|
||||
- [x] Trust badges (verified/unknown/refused/authenticated/anonymous)
|
||||
- [x] Encryption identity dialog with fingerprint verification
|
||||
- [x] Encryption settings in account menu (VaultClient onboarding)
|
||||
- [x] Fingerprint accept/refuse with `fingerprint-changed` event
|
||||
- [x] Disable recording/transcription in encrypted rooms (backend + frontend)
|
||||
- [x] Lobby bypass disabled for encrypted rooms
|
||||
- [x] Backend blocks encrypted room creation when `ENCRYPTION_ENABLED=false`
|
||||
- [ ] Signed KEY_RESPONSE (Level 1)
|
||||
- [ ] SAS verification (Level 2)
|
||||
- [ ] Restrict key propagation to verified participants only
|
||||
- [x] Mitigate unencrypted frame window (setE2EEEnabled before connection)
|
||||
@@ -1,231 +0,0 @@
|
||||
/**
|
||||
* React context provider for the centralized encryption VaultClient SDK.
|
||||
*
|
||||
* The client SDK is loaded at runtime via a <script> tag from the vault domain
|
||||
* (data.encryption). This provider:
|
||||
* - Loads the client.js script from the vault URL
|
||||
* - Creates and initializes the VaultClient instance
|
||||
* - Sets auth context when the user logs in
|
||||
* - Tracks key state (hasKeys, publicKey)
|
||||
* - Provides the client to all downstream components
|
||||
*/
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useUser } from '@/features/auth'
|
||||
import { useConfig } from '@/api/useConfig'
|
||||
|
||||
export interface VaultClientContextValue {
|
||||
client: VaultClient | null
|
||||
isReady: boolean
|
||||
isLoading: boolean
|
||||
error: string | null
|
||||
hasKeys: boolean | null
|
||||
publicKey: ArrayBuffer | null
|
||||
refreshKeyState: () => Promise<void>
|
||||
}
|
||||
|
||||
const VaultClientContext = createContext<VaultClientContextValue>({
|
||||
client: null,
|
||||
isReady: false,
|
||||
isLoading: true,
|
||||
error: null,
|
||||
hasKeys: null,
|
||||
publicKey: null,
|
||||
refreshKeyState: async () => {},
|
||||
})
|
||||
|
||||
function loadClientScript(vaultUrl: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.EncryptionClient?.VaultClient) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
const scriptSrc = `${vaultUrl}/client.js`
|
||||
const existing = document.querySelector(`script[src="${scriptSrc}"]`)
|
||||
|
||||
if (existing) {
|
||||
existing.addEventListener('load', () => resolve())
|
||||
existing.addEventListener('error', () =>
|
||||
reject(new Error('Failed to load encryption client SDK'))
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = scriptSrc
|
||||
script.async = true
|
||||
script.onload = () => resolve()
|
||||
script.onerror = () =>
|
||||
reject(new Error('Failed to load encryption client SDK'))
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
export function VaultClientProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const { data: config } = useConfig()
|
||||
const { i18n } = useTranslation()
|
||||
const { user } = useUser()
|
||||
const clientRef = useRef<VaultClient | null>(null)
|
||||
const [clientInitialized, setClientInitialized] = useState(false)
|
||||
const [isReady, setIsReady] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [hasKeys, setHasKeys] = useState<boolean | null>(null)
|
||||
const [publicKey, setPublicKey] = useState<ArrayBuffer | null>(null)
|
||||
const initRef = useRef(false)
|
||||
|
||||
const vaultUrl = config?.encryption?.vault_url
|
||||
const interfaceUrl = config?.encryption?.interface_url
|
||||
|
||||
// Load script + initialize VaultClient once
|
||||
useEffect(() => {
|
||||
if (initRef.current || !vaultUrl || !interfaceUrl) return
|
||||
initRef.current = true
|
||||
|
||||
let destroyed = false
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
await loadClientScript(vaultUrl!)
|
||||
|
||||
if (destroyed) return
|
||||
|
||||
const client = new window.EncryptionClient.VaultClient({
|
||||
vaultUrl: vaultUrl!,
|
||||
interfaceUrl: interfaceUrl!,
|
||||
lang: i18n.language,
|
||||
})
|
||||
|
||||
clientRef.current = client
|
||||
|
||||
client.on('onboarding:complete', () => {
|
||||
setHasKeys(true)
|
||||
client
|
||||
.getPublicKey()
|
||||
.then(({ publicKey: pk }) => setPublicKey(pk))
|
||||
.catch(() => {})
|
||||
})
|
||||
|
||||
client.on('keys-changed', () => {
|
||||
client
|
||||
.hasKeys()
|
||||
.then(({ hasKeys: exists }) => {
|
||||
setHasKeys(exists)
|
||||
if (exists) {
|
||||
client
|
||||
.getPublicKey()
|
||||
.then(({ publicKey: pk }) => setPublicKey(pk))
|
||||
.catch(() => {})
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
})
|
||||
|
||||
client.on('keys-destroyed', () => {
|
||||
setHasKeys(false)
|
||||
setPublicKey(null)
|
||||
})
|
||||
|
||||
await client.init()
|
||||
|
||||
if (destroyed) {
|
||||
client.destroy()
|
||||
} else {
|
||||
setClientInitialized(true)
|
||||
}
|
||||
} catch (err) {
|
||||
if (!destroyed) {
|
||||
setError((err as Error).message)
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void init()
|
||||
|
||||
return () => {
|
||||
destroyed = true
|
||||
if (clientRef.current) {
|
||||
clientRef.current.destroy()
|
||||
clientRef.current = null
|
||||
}
|
||||
}
|
||||
}, [vaultUrl, interfaceUrl, i18n.language])
|
||||
|
||||
// Set auth context when user is available
|
||||
// Note: Meet may have anonymous users — VaultClient only works for authenticated users
|
||||
// with a suite_user_id. For anonymous users, isReady stays false.
|
||||
useEffect(() => {
|
||||
const client = clientRef.current
|
||||
if (!client || !clientInitialized) {
|
||||
return
|
||||
}
|
||||
|
||||
const suiteUserId = (user as Record<string, unknown>)?.sub as string | undefined
|
||||
if (suiteUserId) {
|
||||
client.setAuthContext({ suiteUserId })
|
||||
setIsReady(true)
|
||||
// Check key state now that auth context is set
|
||||
client.hasKeys()
|
||||
.then(({ hasKeys: exists }) => {
|
||||
setHasKeys(exists)
|
||||
if (exists) {
|
||||
client.getPublicKey()
|
||||
.then(({ publicKey: pk }) => setPublicKey(pk))
|
||||
.catch(() => {})
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, [clientInitialized, (user as Record<string, unknown>)?.sub])
|
||||
|
||||
const refreshKeyState = useCallback(async () => {
|
||||
const client = clientRef.current
|
||||
if (!client) return
|
||||
|
||||
try {
|
||||
const { hasKeys: exists } = await client.hasKeys()
|
||||
setHasKeys(exists)
|
||||
if (exists) {
|
||||
const { publicKey: pk } = await client.getPublicKey()
|
||||
setPublicKey(pk)
|
||||
} else {
|
||||
setPublicKey(null)
|
||||
}
|
||||
} catch {
|
||||
// Vault not available
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<VaultClientContext.Provider
|
||||
value={{
|
||||
client: clientInitialized ? clientRef.current : null,
|
||||
isReady,
|
||||
isLoading,
|
||||
error,
|
||||
hasKeys,
|
||||
publicKey,
|
||||
refreshKeyState,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</VaultClientContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useVaultClient = (): VaultClientContextValue =>
|
||||
useContext(VaultClientContext)
|
||||
@@ -1,396 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import {
|
||||
VaultE2EEManager,
|
||||
getUnencryptedBytes,
|
||||
UNENCRYPTED_BYTES,
|
||||
} from './VaultE2EEManager'
|
||||
|
||||
// ── getUnencryptedBytes ───────────────────────────────────────────────
|
||||
|
||||
describe('getUnencryptedBytes', () => {
|
||||
it('returns 10 for VP8 keyframes', () => {
|
||||
const frame = { type: 'key', data: new ArrayBuffer(100) }
|
||||
expect(getUnencryptedBytes(frame as unknown as RTCEncodedVideoFrame)).toBe(
|
||||
UNENCRYPTED_BYTES.key
|
||||
)
|
||||
})
|
||||
|
||||
it('returns 3 for VP8 delta frames', () => {
|
||||
const frame = { type: 'delta', data: new ArrayBuffer(100) }
|
||||
expect(getUnencryptedBytes(frame as unknown as RTCEncodedVideoFrame)).toBe(
|
||||
UNENCRYPTED_BYTES.delta
|
||||
)
|
||||
})
|
||||
|
||||
it('returns 1 for audio frames (no type property)', () => {
|
||||
const frame = { data: new ArrayBuffer(100) }
|
||||
expect(getUnencryptedBytes(frame as unknown as RTCEncodedAudioFrame)).toBe(
|
||||
UNENCRYPTED_BYTES.audio
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Mock VaultClient ──────────────────────────────────────────────────
|
||||
|
||||
function createMockVaultClient() {
|
||||
// Simulates vault crypto: prepends 24-byte nonce + appends 16-byte MAC
|
||||
const NONCE_LEN = 24
|
||||
const MAC_LEN = 16
|
||||
|
||||
return {
|
||||
encryptWithKey: vi.fn(async (data: ArrayBuffer, _key: ArrayBuffer) => {
|
||||
const input = new Uint8Array(data)
|
||||
const nonce = new Uint8Array(NONCE_LEN).fill(0xaa) // deterministic for tests
|
||||
const ciphertext = new Uint8Array(input.length + MAC_LEN)
|
||||
ciphertext.set(input) // "encrypt" = copy (for testing)
|
||||
ciphertext.set(new Uint8Array(MAC_LEN).fill(0xbb), input.length) // fake MAC
|
||||
|
||||
const result = new Uint8Array(NONCE_LEN + ciphertext.length)
|
||||
result.set(nonce)
|
||||
result.set(ciphertext, NONCE_LEN)
|
||||
return { encryptedData: result.buffer }
|
||||
}),
|
||||
|
||||
decryptWithKey: vi.fn(
|
||||
async (encryptedData: ArrayBuffer, _key: ArrayBuffer) => {
|
||||
const input = new Uint8Array(encryptedData)
|
||||
// Strip nonce (24B) and MAC (16B)
|
||||
const plaintext = input.slice(NONCE_LEN, input.length - MAC_LEN)
|
||||
return { data: plaintext.buffer }
|
||||
}
|
||||
),
|
||||
} as unknown as VaultClient
|
||||
}
|
||||
|
||||
// ── Key management ────────────────────────────────────────────────────
|
||||
|
||||
describe('VaultE2EEManager key management', () => {
|
||||
it('stores an independent copy of the key', () => {
|
||||
const vaultClient = createMockVaultClient()
|
||||
const manager = new VaultE2EEManager(vaultClient)
|
||||
|
||||
const original = new Uint8Array([1, 2, 3, 4])
|
||||
manager.setEncryptedSymmetricKey(original.buffer)
|
||||
|
||||
// Mutate original — should not affect stored key
|
||||
original[0] = 99
|
||||
|
||||
// Access internal state via encryptData (which uses freshKeyBuffer)
|
||||
// If the key was a view on the original, this would reflect the mutation
|
||||
expect(manager.isDataChannelEncryptionEnabled).toBe(false) // _isDataChannelEncryptionEnabled not set
|
||||
manager.isDataChannelEncryptionEnabled = true
|
||||
expect(manager.isDataChannelEncryptionEnabled).toBe(true) // key is set
|
||||
})
|
||||
|
||||
it('isDataChannelEncryptionEnabled is false without key', () => {
|
||||
const manager = new VaultE2EEManager(createMockVaultClient())
|
||||
manager.isDataChannelEncryptionEnabled = true
|
||||
expect(manager.isDataChannelEncryptionEnabled).toBe(false)
|
||||
})
|
||||
|
||||
it('isDataChannelEncryptionEnabled is true with key + flag', () => {
|
||||
const manager = new VaultE2EEManager(createMockVaultClient())
|
||||
manager.setEncryptedSymmetricKey(new ArrayBuffer(32))
|
||||
manager.isDataChannelEncryptionEnabled = true
|
||||
expect(manager.isDataChannelEncryptionEnabled).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Data channel encrypt/decrypt round-trip ───────────────────────────
|
||||
|
||||
describe('VaultE2EEManager data channel encryption', () => {
|
||||
let manager: VaultE2EEManager
|
||||
let vaultClient: ReturnType<typeof createMockVaultClient>
|
||||
|
||||
beforeEach(() => {
|
||||
vaultClient = createMockVaultClient()
|
||||
manager = new VaultE2EEManager(vaultClient as unknown as VaultClient)
|
||||
manager.setEncryptedSymmetricKey(new ArrayBuffer(32))
|
||||
})
|
||||
|
||||
it('encryptData calls vaultClient.encryptWithKey', async () => {
|
||||
const data = new Uint8Array([10, 20, 30])
|
||||
const result = await manager.encryptData(data)
|
||||
|
||||
expect(vaultClient.encryptWithKey).toHaveBeenCalledOnce()
|
||||
expect(result.payload).toBeInstanceOf(Uint8Array)
|
||||
expect(result.payload.length).toBeGreaterThan(data.length) // overhead from nonce+MAC
|
||||
})
|
||||
|
||||
it('handleEncryptedData calls vaultClient.decryptWithKey', async () => {
|
||||
const data = new Uint8Array([10, 20, 30])
|
||||
const encrypted = await manager.encryptData(data)
|
||||
const decrypted = await manager.handleEncryptedData(
|
||||
encrypted.payload,
|
||||
new Uint8Array(0),
|
||||
'participant-1',
|
||||
0
|
||||
)
|
||||
|
||||
expect(vaultClient.decryptWithKey).toHaveBeenCalledOnce()
|
||||
expect(new Uint8Array(decrypted.payload)).toEqual(data)
|
||||
})
|
||||
|
||||
it('encryptData throws without key', async () => {
|
||||
const noKeyManager = new VaultE2EEManager(
|
||||
vaultClient as unknown as VaultClient
|
||||
)
|
||||
await expect(noKeyManager.encryptData(new Uint8Array([1]))).rejects.toThrow(
|
||||
'No encrypted symmetric key set'
|
||||
)
|
||||
})
|
||||
|
||||
it('handleEncryptedData throws without key', async () => {
|
||||
const noKeyManager = new VaultE2EEManager(
|
||||
vaultClient as unknown as VaultClient
|
||||
)
|
||||
await expect(
|
||||
noKeyManager.handleEncryptedData(
|
||||
new Uint8Array([1]),
|
||||
new Uint8Array(0),
|
||||
'p',
|
||||
0
|
||||
)
|
||||
).rejects.toThrow('No encrypted symmetric key set')
|
||||
})
|
||||
})
|
||||
|
||||
// ── Frame format (header preservation) ────────────────────────────────
|
||||
|
||||
describe('Frame format — header preservation', () => {
|
||||
let vaultClient: ReturnType<typeof createMockVaultClient>
|
||||
|
||||
beforeEach(() => {
|
||||
vaultClient = createMockVaultClient()
|
||||
})
|
||||
|
||||
it('encrypt preserves VP8 keyframe header (10 bytes)', async () => {
|
||||
// Simulate what the sender transform does
|
||||
const frameData = new Uint8Array(100)
|
||||
// Fill with recognizable pattern: header = 0x01-0x0A, payload = 0xFF
|
||||
for (let i = 0; i < 10; i++) frameData[i] = i + 1
|
||||
frameData.fill(0xff, 10)
|
||||
|
||||
const unencryptedBytes = UNENCRYPTED_BYTES.key // 10
|
||||
const header = frameData.slice(0, unencryptedBytes)
|
||||
const payload = frameData.slice(unencryptedBytes)
|
||||
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
payload.buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
|
||||
// Reconstruct frame: [header][encrypted payload]
|
||||
const newFrame = new Uint8Array(header.length + encrypted.length)
|
||||
newFrame.set(header)
|
||||
newFrame.set(encrypted, header.length)
|
||||
|
||||
// Verify header is preserved unencrypted
|
||||
expect(newFrame.slice(0, 10)).toEqual(header)
|
||||
// Verify the rest is different (encrypted)
|
||||
expect(newFrame.length).toBeGreaterThan(frameData.length) // overhead
|
||||
})
|
||||
|
||||
it('encrypt + decrypt round-trip preserves original frame', async () => {
|
||||
const frameData = new Uint8Array(50)
|
||||
for (let i = 0; i < 50; i++) frameData[i] = i
|
||||
|
||||
const unencryptedBytes = UNENCRYPTED_BYTES.delta // 3
|
||||
const header = frameData.slice(0, unencryptedBytes)
|
||||
const payload = frameData.slice(unencryptedBytes)
|
||||
|
||||
// Encrypt
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
payload.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
const encryptedFrame = new Uint8Array(header.length + encrypted.length)
|
||||
encryptedFrame.set(header)
|
||||
encryptedFrame.set(encrypted, header.length)
|
||||
|
||||
// Decrypt (receiver side)
|
||||
const rxHeader = encryptedFrame.slice(0, unencryptedBytes)
|
||||
const rxEncrypted = encryptedFrame.slice(unencryptedBytes)
|
||||
const { data } = await vaultClient.decryptWithKey(
|
||||
rxEncrypted.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const plaintext = new Uint8Array(data)
|
||||
const decryptedFrame = new Uint8Array(rxHeader.length + plaintext.length)
|
||||
decryptedFrame.set(rxHeader)
|
||||
decryptedFrame.set(plaintext, rxHeader.length)
|
||||
|
||||
// Original frame should be recovered exactly
|
||||
expect(decryptedFrame).toEqual(frameData)
|
||||
})
|
||||
|
||||
it('audio frames preserve 1 byte header', async () => {
|
||||
const frameData = new Uint8Array(20)
|
||||
frameData[0] = 0xfc // Opus TOC byte
|
||||
frameData.fill(0xab, 1)
|
||||
|
||||
const unencryptedBytes = UNENCRYPTED_BYTES.audio // 1
|
||||
const header = frameData.slice(0, unencryptedBytes)
|
||||
const payload = frameData.slice(unencryptedBytes)
|
||||
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
payload.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
const encryptedFrame = new Uint8Array(header.length + encrypted.length)
|
||||
encryptedFrame.set(header)
|
||||
encryptedFrame.set(encrypted, header.length)
|
||||
|
||||
// First byte (Opus TOC) must be preserved
|
||||
expect(encryptedFrame[0]).toBe(0xfc)
|
||||
})
|
||||
})
|
||||
|
||||
// ── Proof: data transiting through LiveKit SFU is not decipherable ────
|
||||
|
||||
describe('SFU sees only encrypted data', () => {
|
||||
let vaultClient: ReturnType<typeof createMockVaultClient>
|
||||
|
||||
beforeEach(() => {
|
||||
vaultClient = createMockVaultClient()
|
||||
})
|
||||
|
||||
it('encrypted frame payload does NOT match original payload', async () => {
|
||||
// Simulate a VP8 keyframe with recognizable pixel data
|
||||
const frameSize = 5000 // typical small video frame
|
||||
const originalFrame = new Uint8Array(frameSize)
|
||||
for (let i = 0; i < frameSize; i++) originalFrame[i] = i % 256
|
||||
|
||||
const headerSize = UNENCRYPTED_BYTES.key // 10
|
||||
const header = originalFrame.slice(0, headerSize)
|
||||
const payload = originalFrame.slice(headerSize)
|
||||
|
||||
// Encrypt (what the sender does before sending to SFU)
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
payload.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
|
||||
// This is what the SFU sees: [header][encrypted payload]
|
||||
const sfuFrame = new Uint8Array(header.length + encrypted.length)
|
||||
sfuFrame.set(header)
|
||||
sfuFrame.set(encrypted, header.length)
|
||||
|
||||
// The SFU frame is LARGER than original (nonce + MAC overhead)
|
||||
expect(sfuFrame.length).toBe(originalFrame.length + 24 + 16) // +40B
|
||||
|
||||
// The header bytes are the same (unencrypted, needed for RTP)
|
||||
expect(sfuFrame.slice(0, headerSize)).toEqual(header)
|
||||
|
||||
// The payload bytes are COMPLETELY DIFFERENT from the original
|
||||
const sfuPayload = sfuFrame.slice(headerSize)
|
||||
const originalPayload = originalFrame.slice(headerSize)
|
||||
expect(sfuPayload.length).not.toBe(originalPayload.length)
|
||||
expect(sfuPayload).not.toEqual(originalPayload)
|
||||
})
|
||||
|
||||
it('encrypted payload cannot be reversed without vault decryption', async () => {
|
||||
const originalPayload = new Uint8Array([72, 101, 108, 108, 111]) // "Hello"
|
||||
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
originalPayload.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
|
||||
// The encrypted data is 40 bytes larger (24B nonce + 16B MAC)
|
||||
expect(encrypted.length).toBe(originalPayload.length + 24 + 16)
|
||||
|
||||
// No substring of the encrypted data matches the original payload
|
||||
// (the nonce prepended and MAC appended obscure everything)
|
||||
for (let i = 0; i <= encrypted.length - originalPayload.length; i++) {
|
||||
const slice = encrypted.slice(i, i + originalPayload.length)
|
||||
if (i === 24) {
|
||||
// At offset 24 (after nonce), our mock "encrypts" by copying,
|
||||
// so in a real vault this would NOT match. Skip this offset for
|
||||
// the mock — the real test is the overhead structure.
|
||||
continue
|
||||
}
|
||||
expect(slice).not.toEqual(originalPayload)
|
||||
}
|
||||
})
|
||||
|
||||
it('overhead is exactly 40 bytes (24B nonce + 16B MAC) per frame', async () => {
|
||||
const testSizes = [10, 100, 1000, 5000, 20000]
|
||||
|
||||
for (const size of testSizes) {
|
||||
const payload = new Uint8Array(size)
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
payload.buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const overhead = new Uint8Array(encryptedData).length - size
|
||||
expect(overhead).toBe(40) // 24B nonce + 16B MAC = XChaCha20-Poly1305
|
||||
}
|
||||
})
|
||||
|
||||
it('only codec header bytes leak — they contain no media content', () => {
|
||||
// VP8 keyframe header is 10 bytes of codec metadata (not pixels)
|
||||
// VP8 delta header is 3 bytes
|
||||
// Opus audio header is 1 byte (TOC byte = codec config, not audio samples)
|
||||
//
|
||||
// These bytes tell the RTP packetizer how to split the frame into packets.
|
||||
// They do NOT contain visual or audio content.
|
||||
|
||||
expect(UNENCRYPTED_BYTES.key).toBe(10) // VP8 payload descriptor
|
||||
expect(UNENCRYPTED_BYTES.delta).toBe(3) // VP8 payload descriptor
|
||||
expect(UNENCRYPTED_BYTES.audio).toBe(1) // Opus TOC byte
|
||||
|
||||
// Maximum leak per frame is 10 bytes out of typically 1000-50000 byte frames
|
||||
// = 0.02% to 1% of frame data, and it's codec metadata, not content
|
||||
const typicalKeyframeSize = 50000
|
||||
const leakRatio = UNENCRYPTED_BYTES.key / typicalKeyframeSize
|
||||
expect(leakRatio).toBeLessThan(0.001) // less than 0.1%
|
||||
})
|
||||
|
||||
it('full sender→SFU→receiver pipeline: receiver recovers original, SFU cannot', async () => {
|
||||
// Original video frame (sender side)
|
||||
const originalFrame = new Uint8Array(200)
|
||||
for (let i = 0; i < 200; i++) originalFrame[i] = (i * 7 + 13) % 256
|
||||
const headerSize = UNENCRYPTED_BYTES.delta // 3
|
||||
|
||||
// ── SENDER: encrypt and send ──
|
||||
const header = originalFrame.slice(0, headerSize)
|
||||
const payload = originalFrame.slice(headerSize)
|
||||
|
||||
const { encryptedData } = await vaultClient.encryptWithKey(
|
||||
payload.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
const wireFrame = new Uint8Array(header.length + encrypted.length)
|
||||
wireFrame.set(header)
|
||||
wireFrame.set(encrypted, header.length)
|
||||
|
||||
// ── SFU: can only see wireFrame — cannot recover original ──
|
||||
// The SFU would need to strip the nonce and decrypt the ciphertext,
|
||||
// but it doesn't have the symmetric key (it's in the vault iframe).
|
||||
expect(wireFrame).not.toEqual(originalFrame)
|
||||
expect(wireFrame.length).not.toBe(originalFrame.length)
|
||||
|
||||
// ── RECEIVER: decrypt and recover ──
|
||||
const rxHeader = wireFrame.slice(0, headerSize)
|
||||
const rxEncrypted = wireFrame.slice(headerSize)
|
||||
|
||||
const { data } = await vaultClient.decryptWithKey(
|
||||
rxEncrypted.slice().buffer,
|
||||
new ArrayBuffer(32)
|
||||
)
|
||||
const decryptedPayload = new Uint8Array(data)
|
||||
const recoveredFrame = new Uint8Array(rxHeader.length + decryptedPayload.length)
|
||||
recoveredFrame.set(rxHeader)
|
||||
recoveredFrame.set(decryptedPayload, rxHeader.length)
|
||||
|
||||
// Receiver gets the EXACT original frame
|
||||
expect(recoveredFrame).toEqual(originalFrame)
|
||||
})
|
||||
})
|
||||
@@ -1,328 +0,0 @@
|
||||
/**
|
||||
* Custom E2EE Manager that delegates crypto to the VaultClient iframe.
|
||||
*
|
||||
* Uses XChaCha20-Poly1305 (libsodium) via the vault — the symmetric key
|
||||
* never leaves the iframe. Preserves codec header bytes unencrypted so
|
||||
* the WebRTC RTP packetizer can construct valid packets.
|
||||
*
|
||||
* Frame format (sender output / receiver input):
|
||||
* [unencrypted codec header][vault-encrypted payload]
|
||||
*
|
||||
* Where vault-encrypted payload = [24B nonce][ciphertext + 16B Poly1305 MAC]
|
||||
*
|
||||
* Unencrypted header sizes (VP8):
|
||||
* - keyframe: 10 bytes (VP8 payload descriptor)
|
||||
* - delta: 3 bytes
|
||||
* - audio: 1 byte (Opus TOC)
|
||||
*/
|
||||
import { EventEmitter } from 'events'
|
||||
import { Encryption_Type } from '@livekit/protocol'
|
||||
import type { Room, RemoteTrack, Track } from 'livekit-client'
|
||||
import { RoomEvent, ParticipantEvent, ConnectionState } from 'livekit-client'
|
||||
import type { RTCEngine } from 'livekit-client/src/room/RTCEngine'
|
||||
|
||||
const E2EE_FLAG = Symbol('e2ee')
|
||||
|
||||
enum EncryptionEvent {
|
||||
ParticipantEncryptionStatusChanged = 'participantEncryptionStatusChanged',
|
||||
EncryptionError = 'encryptionError',
|
||||
}
|
||||
|
||||
function isInsertableStreamSupported(): boolean {
|
||||
return (
|
||||
typeof window.RTCRtpSender !== 'undefined' &&
|
||||
// @ts-expect-error — createEncodedStreams not in TS types
|
||||
typeof window.RTCRtpSender.prototype.createEncodedStreams !== 'undefined'
|
||||
)
|
||||
}
|
||||
|
||||
export const UNENCRYPTED_BYTES = { key: 10, delta: 3, audio: 1 }
|
||||
|
||||
export function getUnencryptedBytes(
|
||||
frame: RTCEncodedVideoFrame | RTCEncodedAudioFrame
|
||||
): number {
|
||||
if (!('type' in frame)) return UNENCRYPTED_BYTES.audio
|
||||
return frame.type === 'key' ? UNENCRYPTED_BYTES.key : UNENCRYPTED_BYTES.delta
|
||||
}
|
||||
|
||||
export class VaultE2EEManager extends EventEmitter {
|
||||
private vaultClient: VaultClient
|
||||
private room?: Room
|
||||
private encryptionEnabled = false
|
||||
private _isDataChannelEncryptionEnabled = false
|
||||
|
||||
/**
|
||||
* Encrypted symmetric key (wrapped for the user's vault public key).
|
||||
* Stored as an independent copy so the original ArrayBuffer can't be detached.
|
||||
*/
|
||||
private encryptedKeyBytes: Uint8Array | null = null
|
||||
|
||||
constructor(vaultClient: VaultClient) {
|
||||
super()
|
||||
this.vaultClient = vaultClient
|
||||
}
|
||||
|
||||
get isEnabled() {
|
||||
return this.encryptionEnabled
|
||||
}
|
||||
|
||||
get isDataChannelEncryptionEnabled() {
|
||||
return this._isDataChannelEncryptionEnabled && !!this.encryptedKeyBytes
|
||||
}
|
||||
|
||||
set isDataChannelEncryptionEnabled(enabled: boolean) {
|
||||
this._isDataChannelEncryptionEnabled = enabled
|
||||
}
|
||||
|
||||
/** Fresh ArrayBuffer copy of the key for each vault call (avoids postMessage detachment). */
|
||||
private freshKeyBuffer(): ArrayBuffer {
|
||||
return new Uint8Array(this.encryptedKeyBytes!).buffer
|
||||
}
|
||||
|
||||
setEncryptedSymmetricKey(key: ArrayBuffer): void {
|
||||
this.encryptedKeyBytes = new Uint8Array(new Uint8Array(key))
|
||||
}
|
||||
|
||||
// ── Lifecycle (mirrors built-in E2EEManager) ────────────────────────
|
||||
|
||||
setup(room: Room): void {
|
||||
if (!isInsertableStreamSupported()) {
|
||||
throw new Error(
|
||||
'End-to-end encryption is not supported in this browser. ' +
|
||||
'Please use a Chromium-based browser (Chrome, Edge, Brave).'
|
||||
)
|
||||
}
|
||||
if (room !== this.room) {
|
||||
this.room = room
|
||||
this.setupEventListeners(room)
|
||||
}
|
||||
}
|
||||
|
||||
setupEngine(_engine: RTCEngine): void {}
|
||||
|
||||
setParticipantCryptorEnabled(
|
||||
enabled: boolean,
|
||||
participantIdentity: string
|
||||
): void {
|
||||
if (
|
||||
participantIdentity === this.room?.localParticipant.identity &&
|
||||
this.encryptionEnabled !== enabled
|
||||
) {
|
||||
this.encryptionEnabled = enabled
|
||||
this.emit(
|
||||
EncryptionEvent.ParticipantEncryptionStatusChanged,
|
||||
enabled,
|
||||
this.room!.localParticipant
|
||||
)
|
||||
} else if (participantIdentity !== this.room?.localParticipant.identity) {
|
||||
const p = this.room?.getParticipantByIdentity(participantIdentity)
|
||||
if (p)
|
||||
this.emit(
|
||||
EncryptionEvent.ParticipantEncryptionStatusChanged,
|
||||
enabled,
|
||||
p
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
setSifTrailer(_trailer: Uint8Array): void {}
|
||||
|
||||
async encryptData(data: Uint8Array) {
|
||||
if (!this.encryptedKeyBytes)
|
||||
throw new Error('No encrypted symmetric key set')
|
||||
const r = await this.vaultClient.encryptWithKey(
|
||||
data.slice().buffer,
|
||||
this.freshKeyBuffer()
|
||||
)
|
||||
return {
|
||||
uuid: crypto.randomUUID(),
|
||||
payload: new Uint8Array(r.encryptedData).slice(),
|
||||
iv: new Uint8Array(0),
|
||||
keyIndex: 0,
|
||||
}
|
||||
}
|
||||
|
||||
async handleEncryptedData(
|
||||
payload: Uint8Array,
|
||||
_iv: Uint8Array,
|
||||
_participantIdentity: string,
|
||||
_keyIndex: number
|
||||
) {
|
||||
if (!this.encryptedKeyBytes)
|
||||
throw new Error('No encrypted symmetric key set')
|
||||
const r = await this.vaultClient.decryptWithKey(
|
||||
payload.slice().buffer,
|
||||
this.freshKeyBuffer()
|
||||
)
|
||||
return {
|
||||
uuid: crypto.randomUUID(),
|
||||
payload: new Uint8Array(r.data).slice(),
|
||||
}
|
||||
}
|
||||
|
||||
// ── Event listeners ─────────────────────────────────────────────────
|
||||
|
||||
private setupEventListeners(room: Room): void {
|
||||
room.on(RoomEvent.TrackPublished, (pub, participant) => {
|
||||
this.setParticipantCryptorEnabled(
|
||||
pub.trackInfo!.encryption !== Encryption_Type.NONE,
|
||||
participant.identity
|
||||
)
|
||||
})
|
||||
|
||||
room.on(RoomEvent.ConnectionStateChanged, (state) => {
|
||||
if (state === ConnectionState.Connected) {
|
||||
room.remoteParticipants.forEach((p) => {
|
||||
p.trackPublications.forEach((pub) => {
|
||||
this.setParticipantCryptorEnabled(
|
||||
pub.trackInfo!.encryption !== Encryption_Type.NONE,
|
||||
p.identity
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
room.on(RoomEvent.TrackSubscribed, (track, _pub, participant) => {
|
||||
this.setupReceiver(track, participant.identity)
|
||||
})
|
||||
|
||||
room.on(RoomEvent.SignalConnected, () => {
|
||||
this.setParticipantCryptorEnabled(
|
||||
room.localParticipant.isE2EEEnabled,
|
||||
room.localParticipant.identity
|
||||
)
|
||||
})
|
||||
|
||||
room.localParticipant.on(
|
||||
ParticipantEvent.LocalSenderCreated,
|
||||
(sender: RTCRtpSender, track: Track) => {
|
||||
this.setupSender(sender, track.mediaStreamID)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// ── Sender (encrypt outgoing frames) ────────────────────────────────
|
||||
|
||||
private setupSender(sender: RTCRtpSender, _trackId: string): void {
|
||||
if (E2EE_FLAG in sender) return
|
||||
if (!this.room?.localParticipant.identity) return
|
||||
|
||||
// @ts-expect-error — createEncodedStreams not in TS types
|
||||
const streams = sender.createEncodedStreams()
|
||||
|
||||
const transformStream = new TransformStream({
|
||||
transform: async (
|
||||
frame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
|
||||
controller: TransformStreamDefaultController
|
||||
) => {
|
||||
try {
|
||||
if (!this.encryptedKeyBytes) return // drop — never send unencrypted
|
||||
if (!frame.data || frame.data.byteLength === 0)
|
||||
return controller.enqueue(frame)
|
||||
|
||||
const unencryptedBytes = getUnencryptedBytes(frame)
|
||||
const header = new Uint8Array(frame.data, 0, unencryptedBytes)
|
||||
const payload = new Uint8Array(frame.data, unencryptedBytes)
|
||||
|
||||
const { encryptedData } = await this.vaultClient.encryptWithKey(
|
||||
payload.slice().buffer,
|
||||
this.freshKeyBuffer()
|
||||
)
|
||||
|
||||
const encrypted = new Uint8Array(encryptedData)
|
||||
const newData = new Uint8Array(
|
||||
header.byteLength + encrypted.byteLength
|
||||
)
|
||||
newData.set(header)
|
||||
newData.set(encrypted, header.byteLength)
|
||||
frame.data = newData.buffer
|
||||
controller.enqueue(frame)
|
||||
} catch {
|
||||
// Drop frame on error — never send unencrypted
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
streams.readable.pipeThrough(transformStream).pipeTo(streams.writable)
|
||||
// @ts-expect-error
|
||||
sender[E2EE_FLAG] = true
|
||||
}
|
||||
|
||||
// ── Receiver (decrypt incoming frames) ──────────────────────────────
|
||||
|
||||
private setupReceiver(track: RemoteTrack, participantIdentity: string): void {
|
||||
if (!track.receiver) return
|
||||
const receiver = track.receiver
|
||||
if (E2EE_FLAG in receiver) return
|
||||
|
||||
// @ts-expect-error
|
||||
let writable: WritableStream = receiver.writableStream
|
||||
// @ts-expect-error
|
||||
let readable: ReadableStream = receiver.readableStream
|
||||
|
||||
if (!writable || !readable) {
|
||||
// @ts-expect-error
|
||||
const streams = receiver.createEncodedStreams()
|
||||
// @ts-expect-error
|
||||
receiver.writableStream = streams.writable
|
||||
writable = streams.writable
|
||||
// @ts-expect-error
|
||||
receiver.readableStream = streams.readable
|
||||
readable = streams.readable
|
||||
}
|
||||
|
||||
let successEmitted = false
|
||||
|
||||
const transformStream = new TransformStream({
|
||||
transform: async (
|
||||
frame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
|
||||
controller: TransformStreamDefaultController
|
||||
) => {
|
||||
try {
|
||||
if (!this.encryptedKeyBytes) return // drop — can't decrypt without key
|
||||
if (!frame.data || frame.data.byteLength === 0)
|
||||
return controller.enqueue(frame)
|
||||
|
||||
const unencryptedBytes = getUnencryptedBytes(frame)
|
||||
const header = new Uint8Array(frame.data, 0, unencryptedBytes)
|
||||
const encryptedPayload = new Uint8Array(frame.data, unencryptedBytes)
|
||||
|
||||
const { data } = await this.vaultClient.decryptWithKey(
|
||||
encryptedPayload.slice().buffer,
|
||||
this.freshKeyBuffer()
|
||||
)
|
||||
|
||||
const plaintext = new Uint8Array(data)
|
||||
const newData = new Uint8Array(
|
||||
header.byteLength + plaintext.byteLength
|
||||
)
|
||||
newData.set(header)
|
||||
newData.set(plaintext, header.byteLength)
|
||||
frame.data = newData.buffer
|
||||
controller.enqueue(frame)
|
||||
|
||||
if (!successEmitted) {
|
||||
successEmitted = true
|
||||
const p = this.room?.getParticipantByIdentity(participantIdentity)
|
||||
if (p)
|
||||
this.emit(
|
||||
EncryptionEvent.ParticipantEncryptionStatusChanged,
|
||||
true,
|
||||
p
|
||||
)
|
||||
}
|
||||
} catch {
|
||||
// Drop frame — keeps pipe alive, avoids sending corrupt data to decoder
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
readable
|
||||
.pipeThrough(transformStream)
|
||||
.pipeTo(writable)
|
||||
.catch(() => {})
|
||||
// @ts-expect-error
|
||||
receiver[E2EE_FLAG] = true
|
||||
}
|
||||
}
|
||||
-104
@@ -1,104 +0,0 @@
|
||||
export {}
|
||||
|
||||
declare global {
|
||||
interface VaultClient {
|
||||
init(): Promise<void>
|
||||
destroy(): void
|
||||
setTheme(theme: string): void
|
||||
setAuthContext(context: { suiteUserId: string }): void
|
||||
hasKeys(): Promise<{ hasKeys: boolean }>
|
||||
getPublicKey(): Promise<{ publicKey: ArrayBuffer }>
|
||||
encryptWithoutKey(
|
||||
data: ArrayBuffer,
|
||||
userPublicKeys: Record<string, ArrayBuffer>,
|
||||
options?: { optimizeMemory?: boolean }
|
||||
): Promise<{
|
||||
encryptedContent: ArrayBuffer
|
||||
encryptedKeys: Record<string, ArrayBuffer>
|
||||
}>
|
||||
encryptWithKey(
|
||||
data: ArrayBuffer,
|
||||
encryptedSymmetricKey: ArrayBuffer,
|
||||
encryptedKeyChain?: ArrayBuffer[],
|
||||
options?: { optimizeMemory?: boolean }
|
||||
): Promise<{ encryptedData: ArrayBuffer }>
|
||||
decryptWithKey(
|
||||
encryptedData: ArrayBuffer,
|
||||
encryptedSymmetricKey: ArrayBuffer,
|
||||
encryptedKeyChain?: ArrayBuffer[],
|
||||
options?: { optimizeMemory?: boolean }
|
||||
): Promise<{ data: ArrayBuffer }>
|
||||
shareKeys(
|
||||
encryptedSymmetricKey: ArrayBuffer,
|
||||
userPublicKeys: Record<string, ArrayBuffer>
|
||||
): Promise<{ encryptedKeys: Record<string, ArrayBuffer> }>
|
||||
fetchPublicKeys(
|
||||
userIds: string[]
|
||||
): Promise<{ publicKeys: Record<string, ArrayBuffer> }>
|
||||
checkFingerprints(
|
||||
userFingerprints: Record<string, string>,
|
||||
currentUserId?: string
|
||||
): Promise<{
|
||||
results: Array<{
|
||||
userId: string
|
||||
knownFingerprint: string | null
|
||||
providedFingerprint: string
|
||||
status: 'trusted' | 'refused' | 'unknown'
|
||||
}>
|
||||
}>
|
||||
acceptFingerprint(userId: string, fingerprint: string): Promise<void>
|
||||
refuseFingerprint(userId: string, fingerprint: string): Promise<void>
|
||||
getKnownFingerprints(): Promise<{
|
||||
fingerprints: Record<
|
||||
string,
|
||||
{ fingerprint: string; status: 'trusted' | 'refused' | 'unknown' }
|
||||
>
|
||||
}>
|
||||
openOnboarding(container: HTMLElement): void
|
||||
openBackup(container: HTMLElement): void
|
||||
openRestore(container: HTMLElement): void
|
||||
openDeviceTransfer(container: HTMLElement): void
|
||||
openSettings(container: HTMLElement): void
|
||||
closeInterface(): void
|
||||
on<K extends string>(event: K, listener: (data: unknown) => void): void
|
||||
off<K extends string>(event: K, listener: (data: unknown) => void): void
|
||||
}
|
||||
|
||||
/**
|
||||
* Stable error codes carried by `VaultError`. Sourced from the
|
||||
* encryption SDK (re-exported on `window.EncryptionClient.VaultErrorCode`)
|
||||
* — meet consumers match on these via `(err as VaultError).code` rather
|
||||
* than regexing message text. Keep in sync with the SDK definition.
|
||||
*/
|
||||
type VaultErrorCode =
|
||||
| 'MISSING_KEYS'
|
||||
| 'WRONG_SECRET_KEY'
|
||||
| 'INVALID_BACKUP'
|
||||
| 'INVALID_MNEMONIC'
|
||||
| 'NOT_INITIALIZED'
|
||||
| 'AUTH_REQUIRED'
|
||||
| 'PRIVILEGED_ORIGIN_REQUIRED'
|
||||
| 'TIMEOUT'
|
||||
| 'IFRAME_REQUIRED'
|
||||
| 'CIPHERTEXT_TOO_SHORT'
|
||||
| 'UNKNOWN'
|
||||
|
||||
interface VaultError extends Error {
|
||||
readonly code: VaultErrorCode
|
||||
}
|
||||
|
||||
interface Window {
|
||||
EncryptionClient: {
|
||||
VaultClient: new (options: {
|
||||
vaultUrl: string
|
||||
interfaceUrl: string
|
||||
timeout?: number
|
||||
theme?: string
|
||||
lang?: string
|
||||
}) => VaultClient
|
||||
VaultError: new (code: VaultErrorCode, message: string) => VaultError
|
||||
VaultErrorCode: { readonly [K in VaultErrorCode]: K }
|
||||
isVaultError: (err: unknown) => err is VaultError
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
export { VaultClientProvider, useVaultClient } from './VaultClientProvider'
|
||||
export type { VaultClientContextValue } from './VaultClientProvider'
|
||||
export {
|
||||
determineTrustLevel,
|
||||
getTrustLevelFromAttributes,
|
||||
distributeKeyViaPKI,
|
||||
encodeTrustLevelAttribute,
|
||||
} from './HybridKeyDistributor'
|
||||
export type { ParticipantEncryptionInfo } from './HybridKeyDistributor'
|
||||
export { EncryptionBadge } from './EncryptionBadge'
|
||||
export { EncryptedMeetingBanner } from './EncryptedMeetingBanner'
|
||||
export { EncryptionTrustModal } from './EncryptionTrustModal'
|
||||
export { EncryptionIdentityDialog } from './EncryptionIdentityDialog'
|
||||
export { useParticipantTrustLevel } from './useParticipantTrustLevel'
|
||||
|
||||
export { PARTICIPANT_TRUST_ATTR } from './types'
|
||||
export type { TrustLevel } from './types'
|
||||
@@ -1,49 +0,0 @@
|
||||
/**
|
||||
* Key storage and passphrase utilities for E2EE lobby flow.
|
||||
*
|
||||
* Basic mode: passphrase is in the URL hash — shared by sharing the link.
|
||||
* Advanced mode: vault-wrapped symmetric key exchanged via lobby REST API.
|
||||
*/
|
||||
|
||||
// ── Module-level symmetric key (basic mode) ───────────────────────────
|
||||
|
||||
let _symmetricKey: Uint8Array | null = null
|
||||
|
||||
export function setSymmetricKey(key: Uint8Array): void {
|
||||
_symmetricKey = key
|
||||
}
|
||||
|
||||
export function getSymmetricKey(): Uint8Array | null {
|
||||
return _symmetricKey
|
||||
}
|
||||
|
||||
export function clearSymmetricKey(): void {
|
||||
_symmetricKey = null
|
||||
}
|
||||
|
||||
// ── Module-level encrypted vault key (advanced mode) ──────────────────
|
||||
|
||||
let _encryptedVaultKey: ArrayBuffer | null = null
|
||||
|
||||
export function setEncryptedVaultKey(key: ArrayBuffer): void {
|
||||
_encryptedVaultKey = key
|
||||
}
|
||||
|
||||
export function getEncryptedVaultKey(): ArrayBuffer | null {
|
||||
return _encryptedVaultKey
|
||||
}
|
||||
|
||||
// ── Passphrase generation (basic mode) ────────────────────────────────
|
||||
|
||||
/**
|
||||
* Generate a random passphrase for basic mode encryption.
|
||||
* 24 random bytes encoded in base36 = 48 alphanumeric characters.
|
||||
*/
|
||||
export function generatePassphrase(): string {
|
||||
return Array.from(crypto.getRandomValues(new Uint8Array(24)))
|
||||
.map((b) => b.toString(36).padStart(2, '0'))
|
||||
.join('')
|
||||
}
|
||||
|
||||
/** Expected length of a basic mode passphrase */
|
||||
export const BASIC_KEY_LENGTH = 48
|
||||
@@ -1,43 +0,0 @@
|
||||
/**
|
||||
* Trust level for a participant's encryption key distribution.
|
||||
*
|
||||
* - 'verified': Key was distributed via PKI (public key registered in encryption library).
|
||||
* Identity is cryptographically verified.
|
||||
* - 'authenticated': Key was distributed via ephemeral DH, but participant is authenticated
|
||||
* via ProConnect. Identity is server-verified, not cryptographically.
|
||||
* - 'anonymous': Key was distributed via ephemeral DH, participant is not authenticated.
|
||||
* Identity is self-declared.
|
||||
*/
|
||||
export type TrustLevel = 'verified' | 'authenticated' | 'anonymous' | 'refused' | 'unknown'
|
||||
|
||||
/**
|
||||
* Metadata attached to participant attributes for encryption trust level.
|
||||
*/
|
||||
export const PARTICIPANT_TRUST_ATTR = 'encryption.trustLevel'
|
||||
|
||||
/**
|
||||
* Data channel topic for encryption key exchange protocol.
|
||||
*/
|
||||
export const KEY_EXCHANGE_TOPIC = 'encryption-key-exchange'
|
||||
|
||||
/**
|
||||
* Message types for the in-call key exchange protocol.
|
||||
*/
|
||||
export enum KeyExchangeMessageType {
|
||||
/** New participant sends their ephemeral public key to request the symmetric key */
|
||||
KEY_REQUEST = 'KEY_REQUEST',
|
||||
/** Existing participant responds with the symmetric key encrypted for the requester */
|
||||
KEY_RESPONSE = 'KEY_RESPONSE',
|
||||
/** Requester confirms receipt of the key */
|
||||
KEY_ACK = 'KEY_ACK',
|
||||
}
|
||||
|
||||
export interface KeyExchangeMessage {
|
||||
type: KeyExchangeMessageType
|
||||
/** Sender's participant identity */
|
||||
senderIdentity: string
|
||||
/** Target participant identity (for directed messages) */
|
||||
targetIdentity?: string
|
||||
/** Base64-encoded payload */
|
||||
payload: string
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
/**
|
||||
* Hook that determines a participant's trust level and fingerprint status
|
||||
* by checking the vault (encryption library) via VaultClient.
|
||||
*
|
||||
* In advanced mode:
|
||||
* - Checks if the participant has a registered public key
|
||||
* - Checks the fingerprint status (trusted/refused/unknown)
|
||||
* - Returns "verified" only if they have a public key
|
||||
*
|
||||
* In basic mode:
|
||||
* - Only uses authentication status (no vault check)
|
||||
*/
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useVaultClient } from './VaultClientProvider'
|
||||
import type { TrustLevel } from './types'
|
||||
|
||||
/** Compute a fingerprint from a public key (same as encryption repo: SHA-256, first 16 hex chars) */
|
||||
async function computeFingerprint(publicKey: ArrayBuffer): Promise<string> {
|
||||
const hash = await crypto.subtle.digest('SHA-256', publicKey)
|
||||
return Array.from(new Uint8Array(hash))
|
||||
.map((b) => b.toString(16).padStart(2, '0'))
|
||||
.join('')
|
||||
.slice(0, 16)
|
||||
}
|
||||
|
||||
/** Format for display: "a1b2c3d4e5f67890" → "A1B2 C3D4 E5F6 7890" */
|
||||
export function formatFingerprint(fp: string): string {
|
||||
return fp.replace(/(.{4})/g, '$1 ').trim().toUpperCase()
|
||||
}
|
||||
|
||||
export type FingerprintStatus = 'loading' | 'trusted' | 'refused' | 'unknown' | 'no-key' | 'error'
|
||||
|
||||
export function useParticipantTrustLevel(
|
||||
attributes: Record<string, string> | undefined,
|
||||
encryptionMode?: string,
|
||||
isSelf?: boolean,
|
||||
): { trustLevel: TrustLevel; fingerprintStatus: FingerprintStatus; fingerprint: string | null } {
|
||||
const { client: vaultClient } = useVaultClient()
|
||||
const [fingerprintStatus, setFingerprintStatus] = useState<FingerprintStatus>('loading')
|
||||
const [fingerprint, setFingerprint] = useState<string | null>(null)
|
||||
|
||||
const isAuthenticated = attributes?.is_authenticated === 'true'
|
||||
const suiteUserId = attributes?.suite_user_id
|
||||
const isAdvanced = encryptionMode === 'advanced'
|
||||
|
||||
// Re-check when a fingerprint is accepted/refused via VaultClient
|
||||
const [revision, setRevision] = useState(0)
|
||||
useEffect(() => {
|
||||
if (!vaultClient) return
|
||||
const handler = () => setRevision((r) => r + 1)
|
||||
vaultClient.on('fingerprint-changed', handler)
|
||||
return () => { vaultClient.off('fingerprint-changed', handler) }
|
||||
}, [vaultClient])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAdvanced || !isAuthenticated) {
|
||||
setFingerprintStatus('no-key')
|
||||
return
|
||||
}
|
||||
if (!vaultClient || !suiteUserId) {
|
||||
setFingerprintStatus(vaultClient ? 'no-key' : 'error')
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
|
||||
async function check() {
|
||||
try {
|
||||
const { publicKeys } = await vaultClient!.fetchPublicKeys([suiteUserId!])
|
||||
if (cancelled) return
|
||||
|
||||
const publicKey = publicKeys[suiteUserId!]
|
||||
if (!publicKey) {
|
||||
setFingerprintStatus('no-key')
|
||||
return
|
||||
}
|
||||
|
||||
// Compute the fingerprint from the public key (SHA-256, first 16 hex chars)
|
||||
const fp = await computeFingerprint(publicKey)
|
||||
if (cancelled) return
|
||||
setFingerprint(fp)
|
||||
|
||||
// Own fingerprint is always trusted — we hold the private key
|
||||
if (isSelf) {
|
||||
setFingerprintStatus('trusted')
|
||||
return
|
||||
}
|
||||
|
||||
// Check if we have a known fingerprint in the local registry
|
||||
const { fingerprints: known } = await vaultClient!.getKnownFingerprints()
|
||||
if (cancelled) return
|
||||
|
||||
const knownEntry = known[suiteUserId!]
|
||||
if (!knownEntry) {
|
||||
// Never seen — unknown, needs explicit acceptance
|
||||
setFingerprintStatus('unknown')
|
||||
} else if (knownEntry.fingerprint === fp) {
|
||||
// Same fingerprint — use stored status
|
||||
setFingerprintStatus(knownEntry.status as FingerprintStatus)
|
||||
} else {
|
||||
// Different fingerprint — key changed, needs re-verification
|
||||
setFingerprintStatus('unknown')
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) setFingerprintStatus('error')
|
||||
}
|
||||
}
|
||||
|
||||
check()
|
||||
return () => { cancelled = true }
|
||||
}, [vaultClient, suiteUserId, isAuthenticated, isAdvanced, isSelf, revision])
|
||||
|
||||
// Derive trust level from fingerprint status
|
||||
let trustLevel: TrustLevel
|
||||
if (!isAuthenticated) {
|
||||
trustLevel = 'anonymous'
|
||||
} else if (!isAdvanced) {
|
||||
// Basic mode: only authentication matters
|
||||
trustLevel = 'authenticated'
|
||||
} else if (fingerprintStatus === 'trusted') {
|
||||
trustLevel = 'verified'
|
||||
} else if (fingerprintStatus === 'refused') {
|
||||
trustLevel = 'refused'
|
||||
} else if (fingerprintStatus === 'no-key' || fingerprintStatus === 'error') {
|
||||
// Authenticated but no vault keys — show as authenticated (blue)
|
||||
trustLevel = 'authenticated'
|
||||
} else {
|
||||
// 'unknown' or 'loading' — has key but not yet verified
|
||||
trustLevel = 'unknown'
|
||||
}
|
||||
|
||||
return { trustLevel, fingerprintStatus, fingerprint }
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
import { Button, Dialog, type DialogProps, Text } from '@/primitives'
|
||||
import { VStack, HStack } from '@/styled-system/jsx'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { RiLockFill, RiShieldCheckFill, RiAlertLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ApiEncryptionMode } from '@/features/rooms/api/ApiRoom'
|
||||
import { useVaultClient } from '@/features/encryption'
|
||||
|
||||
export const EncryptionModeDialog = ({
|
||||
onSelect,
|
||||
isForLater = false,
|
||||
...dialogProps
|
||||
}: {
|
||||
onSelect: (mode: ApiEncryptionMode) => void
|
||||
isForLater?: boolean
|
||||
} & Omit<DialogProps, 'title'>) => {
|
||||
const { t } = useTranslation('home', { keyPrefix: 'encryptionModeDialog' })
|
||||
const { hasKeys, client: vaultClient, error: vaultError, isLoading: vaultLoading } = useVaultClient()
|
||||
const vaultUnavailable = !vaultClient && !vaultLoading
|
||||
const canUseAdvanced = !!hasKeys && !vaultUnavailable
|
||||
|
||||
return (
|
||||
<Dialog title={t('title')} isOpen {...dialogProps}>
|
||||
<VStack gap="1rem" alignItems="stretch">
|
||||
<Text variant="sm" className={css({ color: 'greyscale.700' })}>
|
||||
{t('description')}
|
||||
</Text>
|
||||
|
||||
<button
|
||||
className={css({
|
||||
display: 'flex',
|
||||
gap: '0.75rem',
|
||||
padding: '1rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
backgroundColor: 'white',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
transition: 'border-color 150ms ease, background-color 150ms ease',
|
||||
_hover: {
|
||||
borderColor: 'primary.500',
|
||||
backgroundColor: 'primary.50',
|
||||
},
|
||||
})}
|
||||
onClick={() => onSelect(ApiEncryptionMode.BASIC)}
|
||||
>
|
||||
<div className={css({ flexShrink: 0, paddingTop: '0.15rem' })}>
|
||||
<RiLockFill size={20} color="#2563eb" />
|
||||
</div>
|
||||
<VStack gap="0.25rem" alignItems="flex-start">
|
||||
<Text
|
||||
variant="sm"
|
||||
bold
|
||||
className={css({ color: 'greyscale.900' })}
|
||||
>
|
||||
{t('basic.title')}
|
||||
</Text>
|
||||
<Text variant="sm" className={css({ color: 'greyscale.600' })}>
|
||||
{t('basic.description')}
|
||||
</Text>
|
||||
</VStack>
|
||||
</button>
|
||||
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
className={css({
|
||||
display: 'flex',
|
||||
gap: '0.75rem',
|
||||
padding: '1rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
backgroundColor: 'white',
|
||||
cursor: canUseAdvanced ? 'pointer' : 'not-allowed',
|
||||
textAlign: 'left',
|
||||
opacity: canUseAdvanced ? 1 : 0.5,
|
||||
transition:
|
||||
'border-color 150ms ease, background-color 150ms ease',
|
||||
_hover: canUseAdvanced
|
||||
? {
|
||||
borderColor: 'green.500',
|
||||
backgroundColor: 'green.50',
|
||||
}
|
||||
: {},
|
||||
})}
|
||||
onClick={() => canUseAdvanced && onSelect(ApiEncryptionMode.ADVANCED)}
|
||||
disabled={!canUseAdvanced}
|
||||
>
|
||||
<div className={css({ flexShrink: 0, paddingTop: '0.15rem' })}>
|
||||
<RiShieldCheckFill
|
||||
size={20}
|
||||
color={canUseAdvanced ? '#166534' : '#9ca3af'}
|
||||
/>
|
||||
</div>
|
||||
<VStack gap="0.25rem" alignItems="flex-start">
|
||||
<Text
|
||||
variant="sm"
|
||||
bold
|
||||
className={css({
|
||||
color: canUseAdvanced ? 'greyscale.900' : 'greyscale.400',
|
||||
})}
|
||||
>
|
||||
{t('advanced.title')}
|
||||
</Text>
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
color: canUseAdvanced ? 'greyscale.600' : 'greyscale.400',
|
||||
})}
|
||||
>
|
||||
{t('advanced.description')}
|
||||
</Text>
|
||||
</VStack>
|
||||
</button>
|
||||
{!canUseAdvanced && (
|
||||
<HStack
|
||||
gap="0.4rem"
|
||||
className={css({
|
||||
marginTop: '0.5rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
backgroundColor: vaultUnavailable ? 'red.50' : 'orange.50',
|
||||
borderRadius: '0.375rem',
|
||||
})}
|
||||
>
|
||||
<RiAlertLine
|
||||
size={14}
|
||||
color={vaultUnavailable ? '#dc2626' : '#d97706'}
|
||||
className={css({ flexShrink: 0 })}
|
||||
/>
|
||||
<Text variant="note" className={css({ color: vaultUnavailable ? 'red.800' : 'orange.800' })}>
|
||||
{vaultUnavailable
|
||||
? t('advanced.serviceUnavailable')
|
||||
: t('advanced.onboardingRequired')}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</div>
|
||||
</VStack>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,147 +1,35 @@
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Field, Ul, H, P, Form, Dialog } from '@/primitives'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { navigateTo } from '@/navigation/navigateTo'
|
||||
import { isRoomValid } from '@/features/rooms'
|
||||
import { normalizeRoomId } from '@/features/rooms/utils/isRoomValid'
|
||||
import { fetchRoom } from '@/features/rooms/api/fetchRoom'
|
||||
import { ApiEncryptionMode } from '@/features/rooms/api/ApiRoom'
|
||||
|
||||
export const JoinMeetingDialog = () => {
|
||||
const { t } = useTranslation('home')
|
||||
const [step, setStep] = useState<'room' | 'passphrase'>('room')
|
||||
const [roomId, setRoomId] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const parseInput = (input: string): { roomId: string; hash: string } => {
|
||||
const trimmed = input.trim()
|
||||
try {
|
||||
const url = new URL(trimmed)
|
||||
const id = url.pathname.replace(/^\//, '')
|
||||
return { roomId: id, hash: url.hash.slice(1) }
|
||||
} catch {
|
||||
// Not a URL — treat as room code, normalize (add hyphens if 10 chars)
|
||||
const raw = trimmed.replace(`${window.location.origin}/`, '')
|
||||
return { roomId: normalizeRoomId(raw), hash: '' }
|
||||
}
|
||||
}
|
||||
|
||||
const handleRoomSubmit = async (data: { roomId?: FormDataEntryValue }) => {
|
||||
const input = data.roomId as string
|
||||
const parsed = parseInput(input)
|
||||
|
||||
// If URL already has a hash, navigate directly with it
|
||||
if (parsed.hash) {
|
||||
navigateTo('room', parsed.roomId)
|
||||
window.location.hash = parsed.hash
|
||||
return
|
||||
}
|
||||
|
||||
// Check if the room uses basic encryption (needs passphrase)
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const room = await fetchRoom({ roomId: parsed.roomId })
|
||||
if (room.encryption_mode === ApiEncryptionMode.BASIC) {
|
||||
setRoomId(parsed.roomId)
|
||||
setStep('passphrase')
|
||||
return
|
||||
}
|
||||
navigateTo('room', parsed.roomId)
|
||||
} catch {
|
||||
// Room doesn't exist yet or error — navigate anyway
|
||||
navigateTo('room', parsed.roomId)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePassphraseSubmit = (data: { passphrase?: FormDataEntryValue }) => {
|
||||
const passphrase = (data.passphrase as string).trim()
|
||||
const handleSubmit = (data: { roomId?: FormDataEntryValue }) => {
|
||||
const roomId = (data.roomId as string)
|
||||
.trim()
|
||||
.replace(`${window.location.origin}/`, '')
|
||||
navigateTo('room', roomId)
|
||||
window.location.hash = passphrase
|
||||
}
|
||||
|
||||
const validateRoomId = (value: string) => {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return null
|
||||
const { roomId: id } = parseInput(trimmed)
|
||||
return !isRoomValid(id) ? (
|
||||
return !isRoomValid(trimmed) ? (
|
||||
<>
|
||||
<p>{t('joinInputError')}</p>
|
||||
<Ul>
|
||||
<li>{window.location.origin}/uio-azer-jkl</li>
|
||||
<li>uio-azer-jkl</li>
|
||||
<li>uioazerjkl</li>
|
||||
</Ul>
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
|
||||
if (step === 'passphrase') {
|
||||
return (
|
||||
<Dialog title={t('joinMeeting')}>
|
||||
<Form onSubmit={handlePassphraseSubmit} submitLabel={t('joinPassphraseSubmit')}>
|
||||
<P
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: t('joinPassphraseDescription', {
|
||||
interpolation: { escapeValue: false },
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={css({
|
||||
backgroundColor: 'greyscale.100',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '0.75rem 1rem',
|
||||
marginBottom: '1rem',
|
||||
fontSize: '0.8rem',
|
||||
fontFamily: 'monospace',
|
||||
wordBreak: 'break-all',
|
||||
lineHeight: '1.5',
|
||||
border: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
'& strong': {
|
||||
color: '#16a34a',
|
||||
fontWeight: 700,
|
||||
},
|
||||
})}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: t('joinPassphraseExample', {
|
||||
origin: window.location.origin,
|
||||
interpolation: { escapeValue: false },
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* eslint-disable jsx-a11y/no-autofocus */}
|
||||
<Field
|
||||
type="text"
|
||||
autoFocus
|
||||
isRequired
|
||||
name="passphrase"
|
||||
label={t('joinPassphraseLabel')}
|
||||
errorMessage={t('joinPassphraseError')}
|
||||
/>
|
||||
|
||||
<P
|
||||
className={css({
|
||||
fontSize: '0.8rem',
|
||||
color: '#b45309',
|
||||
marginTop: '0.5rem',
|
||||
})}
|
||||
>
|
||||
{t('joinPassphraseWarning')}
|
||||
</P>
|
||||
</Form>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog title={t('joinMeeting')}>
|
||||
<Form onSubmit={handleRoomSubmit} submitLabel={isLoading ? '...' : t('joinInputSubmit')}>
|
||||
<Form onSubmit={handleSubmit} submitLabel={t('joinInputSubmit')}>
|
||||
{/* eslint-disable jsx-a11y/no-autofocus -- Focus on input when modal opens, required for accessibility */}
|
||||
<Field
|
||||
type="text"
|
||||
|
||||
@@ -13,12 +13,11 @@ import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRo
|
||||
// fixme - duplication with the InviteDialog
|
||||
export const LaterMeetingDialog = ({
|
||||
room,
|
||||
hash,
|
||||
...dialogProps
|
||||
}: { room: null | ApiRoom; hash?: string } & Omit<DialogProps, 'title'>) => {
|
||||
}: { room: null | ApiRoom } & Omit<DialogProps, 'title'>) => {
|
||||
const { t } = useTranslation('home', { keyPrefix: 'laterMeetingDialog' })
|
||||
|
||||
const roomUrl = room ? `${getRouteUrl('room', room.slug)}${hash ? `#${hash}` : ''}` : null
|
||||
const roomUrl = room && getRouteUrl('room', room?.slug)
|
||||
const telephony = useTelephony()
|
||||
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
@@ -32,7 +31,7 @@ export const LaterMeetingDialog = ({
|
||||
copyRoomToClipboard,
|
||||
isRoomUrlCopied,
|
||||
copyRoomUrlToClipboard,
|
||||
} = useCopyRoomToClipboard(room || undefined, hash)
|
||||
} = useCopyRoomToClipboard(room || undefined)
|
||||
|
||||
return (
|
||||
<Dialog isOpen={!!room} {...dialogProps} title={t('heading')}>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { DialogTrigger, MenuItem, Menu as RACMenu, Separator as RACSeparator } from 'react-aria-components'
|
||||
import { DialogTrigger, MenuItem, Menu as RACMenu } from 'react-aria-components'
|
||||
import { Button, Menu } from '@/primitives'
|
||||
import { styled } from '@/styled-system/jsx'
|
||||
import { navigateTo } from '@/navigation/navigateTo'
|
||||
@@ -7,12 +7,8 @@ import { Screen } from '@/layout/Screen'
|
||||
import { generateRoomId, useCreateRoom } from '@/features/rooms'
|
||||
import { useUser, UserAware } from '@/features/auth'
|
||||
import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
|
||||
import { RiAddLine, RiLink, RiLockLine, RiShieldKeyholeLine } from '@remixicon/react'
|
||||
import { RiAddLine, RiLink } from '@remixicon/react'
|
||||
import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
|
||||
import { EncryptionModeDialog } from '@/features/home/components/EncryptionModeDialog'
|
||||
import { ApiEncryptionMode } from '@/features/rooms/api/ApiRoom'
|
||||
import { generatePassphrase } from '@/features/encryption/lobbyKeyExchange'
|
||||
import { useVaultClient } from '@/features/encryption'
|
||||
import { IntroSlider } from '@/features/home/components/IntroSlider'
|
||||
import { MoreLink } from '@/features/home/components/MoreLink'
|
||||
import { ReactNode, useEffect, useState } from 'react'
|
||||
@@ -159,9 +155,7 @@ export const Home = () => {
|
||||
} = usePersistentUserChoices()
|
||||
|
||||
const { mutateAsync: createRoom } = useCreateRoom()
|
||||
const { client: vaultClient } = useVaultClient()
|
||||
const [laterRoom, setLaterRoom] = useState<null | { room: ApiRoom; hash?: string }>(null)
|
||||
const [encryptionDialogMode, setEncryptionDialogMode] = useState<null | 'instant' | 'later'>(null)
|
||||
const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)
|
||||
const [redirectFailed, setRedirectFailed] = useState(false)
|
||||
|
||||
const { data } = useConfig()
|
||||
@@ -235,7 +229,7 @@ export const Home = () => {
|
||||
onAction={() => {
|
||||
const slug = generateRoomId()
|
||||
createRoom({ slug, username }).then((data) =>
|
||||
setLaterRoom({ room: data })
|
||||
setLaterRoom(data)
|
||||
)
|
||||
}}
|
||||
data-attr="create-option-later"
|
||||
@@ -243,37 +237,6 @@ export const Home = () => {
|
||||
<RiLink size={18} />
|
||||
{t('createMenu.laterOption')}
|
||||
</MenuItem>
|
||||
{data?.encryption?.enabled && (
|
||||
<>
|
||||
<RACSeparator
|
||||
className={css({
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
margin: '0.25rem 0',
|
||||
})}
|
||||
/>
|
||||
<MenuItem
|
||||
className={
|
||||
menuRecipe({ icon: true, variant: 'light' }).item
|
||||
}
|
||||
onAction={() => setEncryptionDialogMode('instant')}
|
||||
data-attr="create-option-encrypted-instant"
|
||||
>
|
||||
<RiLockLine size={18} />
|
||||
{t('createMenu.encryptedInstantOption')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
className={
|
||||
menuRecipe({ icon: true, variant: 'light' }).item
|
||||
}
|
||||
onAction={() => setEncryptionDialogMode('later')}
|
||||
data-attr="create-option-encrypted-later"
|
||||
>
|
||||
<RiShieldKeyholeLine size={18} />
|
||||
{t('createMenu.encryptedLaterOption')}
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</RACMenu>
|
||||
</Menu>
|
||||
) : (
|
||||
@@ -302,58 +265,9 @@ export const Home = () => {
|
||||
</RightColumn>
|
||||
</Columns>
|
||||
<LaterMeetingDialog
|
||||
room={laterRoom?.room ?? null}
|
||||
hash={laterRoom?.hash}
|
||||
room={laterRoom}
|
||||
onOpenChange={() => setLaterRoom(null)}
|
||||
/>
|
||||
{encryptionDialogMode && (
|
||||
<EncryptionModeDialog
|
||||
onSelect={async (mode) => {
|
||||
const dialogMode = encryptionDialogMode
|
||||
setEncryptionDialogMode(null)
|
||||
const slug = generateRoomId()
|
||||
const hash = mode === ApiEncryptionMode.BASIC ? generatePassphrase() : undefined
|
||||
|
||||
let encryptedSymmetricKey = ''
|
||||
if (mode === ApiEncryptionMode.ADVANCED && vaultClient) {
|
||||
// encryptWithoutKey requires data to encrypt, but we only care about
|
||||
// the generated symmetric key (encryptedKeys), not the encrypted content.
|
||||
// The same symmetric key will be used for all streams (video/audio/chat).
|
||||
const dummyData = new Uint8Array(32).buffer
|
||||
const { publicKey } = await vaultClient.getPublicKey()
|
||||
const { encryptedKeys } = await vaultClient.encryptWithoutKey(
|
||||
dummyData,
|
||||
{ self: publicKey }
|
||||
)
|
||||
const keyBytes = new Uint8Array(encryptedKeys['self'])
|
||||
encryptedSymmetricKey = btoa(String.fromCharCode(...keyBytes))
|
||||
}
|
||||
|
||||
createRoom({
|
||||
slug,
|
||||
username,
|
||||
encryptionMode: mode,
|
||||
encryptedSymmetricKey,
|
||||
}).then((data) => {
|
||||
if (dialogMode === 'instant') {
|
||||
navigateTo('room', data.slug, {
|
||||
state: { create: true, initialRoomData: data },
|
||||
})
|
||||
if (hash) {
|
||||
window.history.replaceState(
|
||||
window.history.state,
|
||||
'',
|
||||
`${window.location.pathname}#${hash}`
|
||||
)
|
||||
}
|
||||
} else {
|
||||
setLaterRoom({ room: data, hash })
|
||||
}
|
||||
})
|
||||
}}
|
||||
onOpenChange={() => setEncryptionDialogMode(null)}
|
||||
/>
|
||||
)}
|
||||
</Screen>
|
||||
</UserAware>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { cva, RecipeVariantProps } from '@/styled-system/css'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const controlBarRegion = cva({
|
||||
base: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flex: '1 1 33%',
|
||||
justifyContent: 'center',
|
||||
gap: '0.65rem',
|
||||
},
|
||||
variants: {
|
||||
mobile: {
|
||||
true: {
|
||||
justifyContent: 'space-between',
|
||||
width: '330px',
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
mobile: false,
|
||||
},
|
||||
})
|
||||
|
||||
export type ControlBarRegionProps = React.HTMLAttributes<HTMLDivElement> &
|
||||
RecipeVariantProps<typeof controlBarRegion>
|
||||
|
||||
export function ControlBarRegion({
|
||||
children,
|
||||
mobile,
|
||||
...props
|
||||
}: ControlBarRegionProps) {
|
||||
const { t } = useTranslation('rooms')
|
||||
return (
|
||||
<div
|
||||
role="region"
|
||||
aria-label={t('controls.region')}
|
||||
className={controlBarRegion({ mobile })}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+3
-3
@@ -7,9 +7,9 @@ import {
|
||||
useSwipe,
|
||||
} from '@livekit/components-react'
|
||||
import { mergeProps } from '@/utils/mergeProps'
|
||||
import { PaginationIndicator } from '../controls/PaginationIndicator'
|
||||
import { useGridLayout } from '../../hooks/useGridLayout'
|
||||
import { PaginationControl } from '../controls/PaginationControl'
|
||||
import { PaginationIndicator } from './PaginationIndicator'
|
||||
import { useGridLayout } from '../hooks/useGridLayout'
|
||||
import { PaginationControl } from './PaginationControl'
|
||||
|
||||
/** @public */
|
||||
export interface GridLayoutProps
|
||||
@@ -0,0 +1,86 @@
|
||||
// RoomContentArea.tsx
|
||||
|
||||
import React from 'react'
|
||||
import { styled } from '@/styled-system/jsx'
|
||||
import { cva } from '@/styled-system/css'
|
||||
import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles'
|
||||
import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
|
||||
import { Subtitles } from '@/features/subtitle/component/Subtitles'
|
||||
import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
|
||||
import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
|
||||
|
||||
const RoomViewport = styled(
|
||||
'div',
|
||||
cva({
|
||||
base: {
|
||||
position: 'absolute',
|
||||
maxHeight: '100%',
|
||||
transition:
|
||||
'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms, padding .5s cubic-bezier(0.4,0,0.2,1) 5ms',
|
||||
},
|
||||
variants: {
|
||||
isSidePanelOpen: {
|
||||
true: {
|
||||
inset: `var(--lk-grid-gap) calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin) * 2) calc(var(--sizes-room-control-bar)) 16px`,
|
||||
},
|
||||
false: {
|
||||
inset: `var(--lk-grid-gap) var(--lk-grid-gap) calc(var(--sizes-room-control-bar))`,
|
||||
},
|
||||
},
|
||||
isReactionToolbarOpen: {
|
||||
true: {
|
||||
paddingBottom:
|
||||
'calc(var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))',
|
||||
},
|
||||
false: {
|
||||
paddingBottom: '0',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
const TrackAreaContainer = styled(
|
||||
'div',
|
||||
cva({
|
||||
base: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
transition: 'height .5s cubic-bezier(0.4,0,0.2,1) 5ms',
|
||||
},
|
||||
variants: {
|
||||
areSubtitlesOpen: {
|
||||
true: {
|
||||
height: 'calc(100% - 12rem)',
|
||||
},
|
||||
false: {
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
interface RoomContentAreaProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function RoomContentArea({ children }: RoomContentAreaProps) {
|
||||
const { isSidePanelOpen } = useSidePanel()
|
||||
const { areSubtitlesOpen } = useSubtitles()
|
||||
const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()
|
||||
|
||||
return (
|
||||
<RoomViewport
|
||||
isSidePanelOpen={isSidePanelOpen}
|
||||
isReactionToolbarOpen={isReactionToolbarOpen}
|
||||
>
|
||||
<TrackAreaContainer areSubtitlesOpen={areSubtitlesOpen}>
|
||||
{children}
|
||||
</TrackAreaContainer>
|
||||
<Subtitles />
|
||||
<MainNotificationToast />
|
||||
</RoomViewport>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useCallback, useEffect } from 'react'
|
||||
import { useRoomContext } from '@livekit/components-react'
|
||||
import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
|
||||
import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
|
||||
@@ -10,17 +10,11 @@ import { decodeNotificationDataReceived } from './utils'
|
||||
import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
|
||||
import { ToastProvider, toastQueue } from './components/ToastProvider'
|
||||
import { WaitingParticipantNotification } from './components/WaitingParticipantNotification'
|
||||
import {
|
||||
Emoji,
|
||||
Reaction,
|
||||
} from '@/features/rooms/livekit/components/controls/ReactionsToggle'
|
||||
import {
|
||||
ANIMATION_DURATION,
|
||||
ReactionPortals,
|
||||
} from '@/features/rooms/livekit/components/ReactionPortal'
|
||||
import { layoutStore } from '@/stores/layout'
|
||||
import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
|
||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||
import { Emoji } from '@/features/reactions/types'
|
||||
import { useReactions } from '@/features/reactions/hooks/useReactions'
|
||||
|
||||
export const MainNotificationToast = () => {
|
||||
const room = useRoomContext()
|
||||
@@ -28,8 +22,7 @@ export const MainNotificationToast = () => {
|
||||
const { t } = useTranslation('notifications')
|
||||
const announce = useScreenReaderAnnounce()
|
||||
|
||||
const [reactions, setReactions] = useState<Reaction[]>([])
|
||||
const instanceIdRef = useRef(0)
|
||||
const { appendReaction } = useReactions()
|
||||
|
||||
useEffect(() => {
|
||||
const handleChatMessage = (
|
||||
@@ -62,21 +55,13 @@ export const MainNotificationToast = () => {
|
||||
}
|
||||
}, [room, triggerNotificationSound, announce, t])
|
||||
|
||||
const handleEmoji = (emoji: string, participant: Participant) => {
|
||||
if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return
|
||||
const id = instanceIdRef.current++
|
||||
setReactions((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id,
|
||||
emoji,
|
||||
participant,
|
||||
},
|
||||
])
|
||||
setTimeout(() => {
|
||||
setReactions((prev) => prev.filter((instance) => instance.id !== id))
|
||||
}, ANIMATION_DURATION)
|
||||
}
|
||||
const handleEmoji = useCallback(
|
||||
(emoji: string, participant: Participant) => {
|
||||
if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return
|
||||
appendReaction(emoji as Emoji, participant)
|
||||
},
|
||||
[appendReaction]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const handleDataReceived = (
|
||||
@@ -149,7 +134,7 @@ export const MainNotificationToast = () => {
|
||||
return () => {
|
||||
room.off(RoomEvent.DataReceived, handleDataReceived)
|
||||
}
|
||||
}, [room])
|
||||
}, [room, handleEmoji])
|
||||
|
||||
useEffect(() => {
|
||||
const showJoinNotification = (participant: Participant) => {
|
||||
@@ -252,7 +237,6 @@ export const MainNotificationToast = () => {
|
||||
<Div position="absolute" bottom={0} right={5} zIndex={1000}>
|
||||
<ToastProvider />
|
||||
<WaitingParticipantNotification />
|
||||
<ReactionPortals reactions={reactions} />
|
||||
</Div>
|
||||
)
|
||||
}
|
||||
|
||||
+13
-119
@@ -12,112 +12,10 @@ import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingPartici
|
||||
import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
|
||||
import { useNotificationSound } from '../hooks/useSoundNotification'
|
||||
import { NotificationType } from '@/features/notifications'
|
||||
import { EncryptionBadge, EncryptionIdentityDialog } from '@/features/encryption'
|
||||
import { useParticipantTrustLevel, formatFingerprint } from '@/features/encryption/useParticipantTrustLevel'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
|
||||
const WaitingParticipantIdentity = ({ participant }: { participant: WaitingParticipant }) => {
|
||||
const { t: tBadge } = useTranslation('rooms', { keyPrefix: 'encryption.badge' })
|
||||
const roomData = useRoomData()
|
||||
const [isIdentityOpen, setIsIdentityOpen] = useState(false)
|
||||
const attrs = {
|
||||
is_authenticated: participant.is_authenticated ? 'true' : 'false',
|
||||
suite_user_id: participant.suite_user_id || '',
|
||||
}
|
||||
const { trustLevel, fingerprintStatus, fingerprint } = useParticipantTrustLevel(attrs, roomData?.encryption_mode)
|
||||
const badgeTooltip = tBadge(trustLevel)
|
||||
|
||||
return (
|
||||
<>
|
||||
<VStack gap="0" alignItems="start">
|
||||
<Button
|
||||
variant="greyscale"
|
||||
size="sm"
|
||||
tooltip={badgeTooltip}
|
||||
aria-label={badgeTooltip}
|
||||
onPress={() => setIsIdentityOpen(true)}
|
||||
className={css({
|
||||
padding: '0.1rem 0.25rem !important',
|
||||
minWidth: 'auto !important',
|
||||
height: 'auto !important',
|
||||
gap: '0.15rem !important',
|
||||
borderRadius: '0.25rem !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
color: 'white !important',
|
||||
cursor: 'pointer',
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.15) !important',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<EncryptionBadge isEncrypted={true} trustLevel={trustLevel} />
|
||||
<Text
|
||||
variant="sm"
|
||||
margin={false}
|
||||
className={css({
|
||||
maxWidth: '8rem',
|
||||
wordBreak: 'break-word',
|
||||
overflowWrap: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
})}
|
||||
>
|
||||
{participant.username}
|
||||
</Text>
|
||||
</Button>
|
||||
{fingerprint && (
|
||||
<Text
|
||||
variant="sm"
|
||||
margin={false}
|
||||
className={css({
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.6rem',
|
||||
color: 'greyscale.100',
|
||||
letterSpacing: '0.03em',
|
||||
paddingLeft: '0.25rem',
|
||||
})}
|
||||
>
|
||||
{formatFingerprint(fingerprint)}
|
||||
</Text>
|
||||
)}
|
||||
<Text
|
||||
variant="sm"
|
||||
margin={false}
|
||||
className={css({
|
||||
fontSize: '0.7rem',
|
||||
color: 'greyscale.200',
|
||||
paddingLeft: '0.25rem',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '10rem',
|
||||
})}
|
||||
>
|
||||
{participant.is_authenticated && participant.email
|
||||
? participant.email
|
||||
: tBadge('anonymous')}
|
||||
</Text>
|
||||
</VStack>
|
||||
<EncryptionIdentityDialog
|
||||
isOpen={isIdentityOpen}
|
||||
onOpenChange={setIsIdentityOpen}
|
||||
participantName={participant.username}
|
||||
participantEmail={participant.email}
|
||||
suiteUserId={participant.suite_user_id}
|
||||
isAuthenticated={participant.is_authenticated}
|
||||
encryptionMode={roomData?.encryption_mode}
|
||||
preloadedFingerprint={fingerprint}
|
||||
preloadedFingerprintStatus={fingerprintStatus}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const NOTIFICATION_DISPLAY_DURATION = 10000
|
||||
|
||||
export const WaitingParticipantNotification = () => {
|
||||
const roomData = useRoomData()
|
||||
const encrypted = isEncryptedRoom(roomData)
|
||||
const { triggerNotificationSound } = useNotificationSound()
|
||||
|
||||
const { t } = useTranslation('notifications', {
|
||||
@@ -202,29 +100,25 @@ export const WaitingParticipantNotification = () => {
|
||||
>
|
||||
{t('one')}
|
||||
</Text>
|
||||
<HStack gap="0.5rem">
|
||||
<HStack gap="1rem">
|
||||
<Avatar
|
||||
name={waitingParticipants[0].username}
|
||||
bgColor={waitingParticipants[0].color}
|
||||
context="list"
|
||||
notification
|
||||
/>
|
||||
{encrypted ? (
|
||||
<WaitingParticipantIdentity participant={waitingParticipants[0]} />
|
||||
) : (
|
||||
<Text
|
||||
variant="sm"
|
||||
margin={false}
|
||||
className={css({
|
||||
maxWidth: '10rem',
|
||||
wordBreak: 'break-word',
|
||||
overflowWrap: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
})}
|
||||
>
|
||||
{waitingParticipants[0].username}
|
||||
</Text>
|
||||
)}
|
||||
<Text
|
||||
variant="sm"
|
||||
margin={false}
|
||||
className={css({
|
||||
maxWidth: '10rem',
|
||||
wordBreak: 'break-word',
|
||||
overflowWrap: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
})}
|
||||
>
|
||||
{waitingParticipants[0].username}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack gap="0.25rem" marginLeft="auto">
|
||||
<Button
|
||||
|
||||
+20
-53
@@ -2,19 +2,17 @@ import { createPortal } from 'react-dom'
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import { Text } from '@/primitives'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Participant } from 'livekit-client'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
|
||||
import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
|
||||
import { accessibilityStore } from '@/stores/accessibility'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||
|
||||
export const ANIMATION_DURATION = 3000
|
||||
export const ANIMATION_DISTANCE = 300
|
||||
export const FADE_OUT_THRESHOLD = 0.7
|
||||
export const REACTION_SPAWN_WIDTH_RATIO = 0.2
|
||||
export const INITIAL_POSITION = 200
|
||||
import { reactionsStore } from '@/stores/reactions'
|
||||
import { useAnnounceReaction } from '../hooks/useAnnounceReaction'
|
||||
import { Reaction } from '../types'
|
||||
import {
|
||||
ANIMATION_DISTANCE,
|
||||
ANIMATION_DURATION,
|
||||
FADE_OUT_THRESHOLD,
|
||||
INITIAL_POSITION,
|
||||
REACTION_SPAWN_WIDTH_RATIO,
|
||||
} from '../constants'
|
||||
|
||||
interface FloatingReactionProps {
|
||||
emoji: string
|
||||
@@ -79,7 +77,7 @@ export function FloatingReaction({
|
||||
>
|
||||
<img
|
||||
src={`/assets/reactions/${emoji}.png`}
|
||||
alt={''}
|
||||
alt=""
|
||||
className={css({
|
||||
height: '50px',
|
||||
})}
|
||||
@@ -116,14 +114,7 @@ export function FloatingReaction({
|
||||
)
|
||||
}
|
||||
|
||||
export function ReactionPortal({
|
||||
emoji,
|
||||
participant,
|
||||
}: {
|
||||
emoji: string
|
||||
participant: Participant
|
||||
}) {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const ReactionPortal = ({ reaction }: { reaction: Reaction }) => {
|
||||
const speed = useMemo(() => Math.random() * 1.5 + 0.5, [])
|
||||
const scale = useMemo(() => Math.max(Math.random() + 0.5, 1), [])
|
||||
return createPortal(
|
||||
@@ -138,51 +129,27 @@ export function ReactionPortal({
|
||||
})}
|
||||
>
|
||||
<FloatingReaction
|
||||
emoji={emoji}
|
||||
emoji={reaction.emoji}
|
||||
speed={speed}
|
||||
scale={scale}
|
||||
name={participant?.isLocal ? t('you') : participant.name}
|
||||
isLocal={participant?.isLocal}
|
||||
name={reaction.participantName}
|
||||
isLocal={reaction.isLocal}
|
||||
/>
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
}
|
||||
|
||||
export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const { announceReactions } = useSnapshot(accessibilityStore)
|
||||
const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
|
||||
const announce = useScreenReaderAnnounce()
|
||||
export const ReactionPortals = () => {
|
||||
const { reactions } = useSnapshot(reactionsStore)
|
||||
const latestReaction = reactions.at(-1)
|
||||
|
||||
const latestReaction =
|
||||
reactions.length > 0 ? reactions[reactions.length - 1] : undefined
|
||||
|
||||
useEffect(() => {
|
||||
if (!announceReactions) {
|
||||
return
|
||||
}
|
||||
if (!latestReaction) return
|
||||
const isNewReaction = latestReaction.id !== lastAnnouncedId
|
||||
if (!isNewReaction) return
|
||||
|
||||
const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
|
||||
const participantName = latestReaction.participant?.isLocal
|
||||
? t('you')
|
||||
: latestReaction.participant?.name?.trim() ||
|
||||
t('someone', { defaultValue: 'Someone' })
|
||||
announce(t('announce', { name: participantName, emoji: emojiLabel }))
|
||||
setLastAnnouncedId(latestReaction.id)
|
||||
}, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
|
||||
useAnnounceReaction(latestReaction)
|
||||
|
||||
return (
|
||||
<>
|
||||
{reactions.map((instance) => (
|
||||
<ReactionPortal
|
||||
key={instance.id}
|
||||
emoji={instance.emoji}
|
||||
participant={instance.participant}
|
||||
/>
|
||||
<ReactionPortal key={instance.id} reaction={instance} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
@@ -0,0 +1,33 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiEmotionLine } from '@remixicon/react'
|
||||
import { ToggleButton } from '@/primitives'
|
||||
|
||||
import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
|
||||
import { useReactionsToolbar } from '../hooks/useReactionsToolbar'
|
||||
|
||||
export const ReactionsToggle = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
|
||||
const { isOpen, toggle } = useReactionsToolbar()
|
||||
|
||||
useRegisterKeyboardShortcut({
|
||||
id: 'reaction',
|
||||
handler: toggle,
|
||||
})
|
||||
|
||||
return (
|
||||
<ToggleButton
|
||||
id="reactions-toggle"
|
||||
data-attr="reactions-toggle"
|
||||
square
|
||||
variant="primaryDark"
|
||||
aria-label={t('button')}
|
||||
aria-expanded={isOpen}
|
||||
tooltip={t('button')}
|
||||
isSelected={isOpen}
|
||||
onChange={toggle}
|
||||
>
|
||||
<RiEmotionLine />
|
||||
</ToggleButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Emoji } from '../../types'
|
||||
import { useReactions } from '../../hooks/useReactions'
|
||||
import { Button } from '@/primitives'
|
||||
|
||||
export const ReactionButton = ({ emoji }: { emoji: Emoji }) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const { sendReaction } = useReactions()
|
||||
return (
|
||||
<Button
|
||||
onPress={() => sendReaction(emoji)}
|
||||
aria-label={t(`emojis.${emoji}`)}
|
||||
variant="primaryTextDark"
|
||||
size="sm"
|
||||
round
|
||||
data-attr={`send-reaction-${emoji}`}
|
||||
>
|
||||
<img
|
||||
src={`/assets/reactions/${emoji}.png`}
|
||||
alt=""
|
||||
className={css({
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
})}
|
||||
/>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { FocusScope, useFocusManager } from '@react-aria/focus'
|
||||
import { useReactionsToolbar } from '../../hooks/useReactionsToolbar'
|
||||
import { ReactionButton } from './ReactionButton'
|
||||
import { Emoji } from '../../types'
|
||||
import { styled } from '@/styled-system/jsx'
|
||||
import { layoutStore } from '@/stores/layout'
|
||||
import { getFirstControlBarFocusable } from '@/utils/dom'
|
||||
import { useIsMobile } from '@/utils/useIsMobile'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useDelayUnmount } from '@/hooks/useDelayUnmount'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const Container = styled('div', {
|
||||
base: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
bottom: 'var(--sizes-room-control-bar)',
|
||||
left: 0,
|
||||
right: 0,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
})
|
||||
|
||||
const StyledStrip = styled('div', {
|
||||
base: {
|
||||
display: 'flex',
|
||||
gap: '0.2rem',
|
||||
borderRadius: '21px',
|
||||
padding: '0.15rem',
|
||||
backgroundColor: 'primaryDark.100',
|
||||
opacity: 0,
|
||||
transform: 'translateY(3.25rem)',
|
||||
transition: 'opacity, transform',
|
||||
transitionDuration: '0.5s',
|
||||
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
variants: {
|
||||
isVisible: {
|
||||
true: {
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)',
|
||||
pointerEvents: 'auto',
|
||||
},
|
||||
},
|
||||
desktopOffset: {
|
||||
true: {
|
||||
// Ideally this value should be calculated dynamically in JavaScript to keep
|
||||
// the reaction toolbar perfectly centered relative to the reaction toggle.
|
||||
// However, for simplicity and to follow a pragmatic 80/20 approach,
|
||||
// this value is currently hardcoded in CSS.
|
||||
marginRight: '30px',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const Strip = ({ children }: { children: React.ReactNode }) => {
|
||||
const { isOpen } = useReactionsToolbar()
|
||||
const isMobile = useIsMobile()
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// defer one frame so the browser paints opacity:0 first
|
||||
const id = requestAnimationFrame(() => setIsVisible(true))
|
||||
return () => cancelAnimationFrame(id)
|
||||
} else {
|
||||
setIsVisible(false)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
return (
|
||||
<StyledStrip
|
||||
ref={ref}
|
||||
aria-hidden={!isOpen}
|
||||
isVisible={isVisible}
|
||||
desktopOffset={!isMobile}
|
||||
>
|
||||
{children}
|
||||
</StyledStrip>
|
||||
)
|
||||
}
|
||||
|
||||
const KeyboardNavigation = ({ children }: { children: React.ReactNode }) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const focusManager = useFocusManager()
|
||||
|
||||
const onFocus = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
const comingFromOutside = !e.currentTarget.contains(e.relatedTarget)
|
||||
if (comingFromOutside) {
|
||||
focusManager?.focusFirst()
|
||||
}
|
||||
}
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowRight':
|
||||
focusManager?.focusNext({ wrap: true })
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
focusManager?.focusPrevious({ wrap: true })
|
||||
break
|
||||
case 'Escape':
|
||||
e.preventDefault()
|
||||
document.getElementById('reactions-toggle')?.focus()
|
||||
layoutStore.showReactionsToolbar = false
|
||||
break
|
||||
case 'Tab':
|
||||
if (!e.shiftKey) {
|
||||
e.preventDefault()
|
||||
getFirstControlBarFocusable('control-bar')?.focus()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="toolbar"
|
||||
aria-label={t('toolbar')}
|
||||
onKeyDown={onKeyDown}
|
||||
onFocus={onFocus}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const ReactionsToolbar = () => {
|
||||
const { isOpen } = useReactionsToolbar()
|
||||
const shouldMount = useDelayUnmount(isOpen, 300)
|
||||
|
||||
if (!shouldMount) return null
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{/* eslint-disable-next-line jsx-a11y/no-autofocus*/}
|
||||
<FocusScope autoFocus>
|
||||
<KeyboardNavigation>
|
||||
<Strip>
|
||||
{Object.values(Emoji).map((emoji) => (
|
||||
<ReactionButton key={emoji} emoji={emoji} />
|
||||
))}
|
||||
</Strip>
|
||||
</KeyboardNavigation>
|
||||
</FocusScope>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export const ANIMATION_DURATION = 3000
|
||||
export const ANIMATION_DISTANCE = 300
|
||||
export const FADE_OUT_THRESHOLD = 0.7
|
||||
export const REACTION_SPAWN_WIDTH_RATIO = 0.2
|
||||
export const INITIAL_POSITION = 200
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { accessibilityStore } from '@/stores/accessibility'
|
||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||
|
||||
import { getEmojiLabel } from '../utils'
|
||||
import { Reaction } from '../types'
|
||||
|
||||
export const useAnnounceReaction = (latestReaction: Reaction | undefined) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const { announceReactions } = useSnapshot(accessibilityStore)
|
||||
const [lastAnnouncedId, setLastAnnouncedId] = useState<string | null>(null)
|
||||
const announce = useScreenReaderAnnounce()
|
||||
|
||||
useEffect(() => {
|
||||
if (!announceReactions || !latestReaction) return
|
||||
if (latestReaction.id === lastAnnouncedId) return
|
||||
|
||||
const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
|
||||
const participantName = latestReaction.participantName
|
||||
|
||||
announce(t('announce', { name: participantName, emoji: emojiLabel }))
|
||||
setLastAnnouncedId(latestReaction.id)
|
||||
}, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { reactionsStore } from '@/stores/reactions'
|
||||
import { NotificationType } from '@/features/notifications/NotificationType'
|
||||
import { useNotifyParticipants } from '@/features/notifications'
|
||||
import useRateLimiter from '@/hooks/useRateLimiter'
|
||||
import { Participant } from 'livekit-client'
|
||||
import { Emoji } from '../types'
|
||||
import { ANIMATION_DURATION } from '../constants'
|
||||
|
||||
export const useReactions = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const { notifyParticipants } = useNotifyParticipants()
|
||||
|
||||
const appendReaction = useCallback(
|
||||
(emoji: Emoji, participant?: Participant) => {
|
||||
const newReaction = {
|
||||
id: `${emoji}-${Date.now()}-${Math.random()}`,
|
||||
emoji,
|
||||
participantName: participant
|
||||
? participant.name || participant.identity
|
||||
: t('you'),
|
||||
isLocal: !participant,
|
||||
}
|
||||
|
||||
reactionsStore.reactions.push(newReaction)
|
||||
|
||||
setTimeout(() => {
|
||||
const index = reactionsStore.reactions.findIndex(
|
||||
(r) => r.id === newReaction.id
|
||||
)
|
||||
if (index !== -1) reactionsStore.reactions.splice(index, 1)
|
||||
}, ANIMATION_DURATION)
|
||||
},
|
||||
[t]
|
||||
)
|
||||
|
||||
const sendReaction = async (emoji: Emoji) => {
|
||||
appendReaction(emoji)
|
||||
await notifyParticipants({
|
||||
type: NotificationType.ReactionReceived,
|
||||
additionalData: { data: { emoji } },
|
||||
})
|
||||
}
|
||||
|
||||
const debouncedSendReaction = useRateLimiter({
|
||||
callback: sendReaction,
|
||||
maxCalls: 10,
|
||||
windowMs: 1000,
|
||||
})
|
||||
|
||||
return {
|
||||
sendReaction: debouncedSendReaction,
|
||||
appendReaction,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { layoutStore } from '@/stores/layout'
|
||||
|
||||
export const useReactionsToolbar = () => {
|
||||
const layoutSnap = useSnapshot(layoutStore)
|
||||
|
||||
return {
|
||||
isOpen: layoutSnap.showReactionsToolbar,
|
||||
toggle: () => {
|
||||
layoutStore.showReactionsToolbar = !layoutSnap.showReactionsToolbar
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export enum Emoji {
|
||||
THUMBS_UP = 'thumbs-up',
|
||||
THUMBS_DOWN = 'thumbs-down',
|
||||
CLAP = 'clapping-hands',
|
||||
HEART = 'red-heart',
|
||||
LAUGHING = 'face-with-tears-of-joy',
|
||||
SURPRISED = 'face-with-open-mouth',
|
||||
CELEBRATION = 'party-popper',
|
||||
PLEASE = 'folded-hands',
|
||||
}
|
||||
|
||||
export interface Reaction {
|
||||
id: string
|
||||
emoji: Emoji
|
||||
participantName: string
|
||||
isLocal: boolean
|
||||
}
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Emoji } from './types'
|
||||
|
||||
export const getEmojiLabel = (
|
||||
emoji: string,
|
||||
emoji: string | Emoji,
|
||||
t: ReturnType<typeof useTranslation>['t']
|
||||
) => {
|
||||
const emojiLabels: Record<string, string> = {
|
||||
@@ -10,21 +10,6 @@ export enum ApiAccessLevel {
|
||||
RESTRICTED = 'restricted',
|
||||
}
|
||||
|
||||
export enum ApiEncryptionMode {
|
||||
NONE = 'none',
|
||||
BASIC = 'basic',
|
||||
ADVANCED = 'advanced',
|
||||
}
|
||||
|
||||
export function isEncryptedRoom(room?: { encryption_mode?: ApiEncryptionMode; encryption_enabled?: boolean } | null): boolean {
|
||||
if (!room) return false
|
||||
// Support both new encryption_mode and legacy encryption_enabled
|
||||
if (room.encryption_mode !== undefined) {
|
||||
return room.encryption_mode !== ApiEncryptionMode.NONE
|
||||
}
|
||||
return !!room.encryption_enabled
|
||||
}
|
||||
|
||||
export type ApiRoom = {
|
||||
id: string
|
||||
name: string
|
||||
@@ -32,8 +17,6 @@ export type ApiRoom = {
|
||||
pin_code: string
|
||||
is_administrable: boolean
|
||||
access_level: ApiAccessLevel
|
||||
encryption_mode: ApiEncryptionMode
|
||||
encrypted_symmetric_key?: string
|
||||
livekit?: ApiLiveKit
|
||||
configuration?: {
|
||||
[key: string]: string | number | boolean | string[]
|
||||
|
||||
@@ -1,31 +1,24 @@
|
||||
import { useMutation, UseMutationOptions } from '@tanstack/react-query'
|
||||
import { fetchApi } from '@/api/fetchApi'
|
||||
import { ApiError } from '@/api/ApiError'
|
||||
import { ApiRoom, ApiEncryptionMode } from './ApiRoom'
|
||||
import { ApiRoom } from './ApiRoom'
|
||||
|
||||
export interface CreateRoomParams {
|
||||
slug: string
|
||||
callbackId?: string
|
||||
username?: string
|
||||
encryptionMode?: ApiEncryptionMode
|
||||
encryptedSymmetricKey?: string
|
||||
}
|
||||
|
||||
const createRoom = ({
|
||||
slug,
|
||||
callbackId,
|
||||
username = '',
|
||||
encryptionMode = ApiEncryptionMode.NONE,
|
||||
encryptedSymmetricKey = '',
|
||||
}: CreateRoomParams): Promise<ApiRoom> => {
|
||||
const queryParams = username ? `?username=${encodeURIComponent(username)}` : ''
|
||||
return fetchApi(`rooms/${queryParams}`, {
|
||||
return fetchApi(`rooms/?username=${encodeURIComponent(username)}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name: slug,
|
||||
callback_id: callbackId,
|
||||
encryption_mode: encryptionMode,
|
||||
encrypted_symmetric_key: encryptedSymmetricKey,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
@@ -6,9 +6,6 @@ export interface EnterRoomParams {
|
||||
roomId: string
|
||||
allowEntry: boolean
|
||||
participantId: string
|
||||
encryptedKey?: string
|
||||
adminEphemeralPublicKey?: string
|
||||
encryptedVaultKey?: string
|
||||
}
|
||||
|
||||
export interface EnterRoomResponse {
|
||||
@@ -19,18 +16,12 @@ export const enterRoom = async ({
|
||||
roomId,
|
||||
allowEntry,
|
||||
participantId,
|
||||
encryptedKey = '',
|
||||
adminEphemeralPublicKey = '',
|
||||
encryptedVaultKey = '',
|
||||
}: EnterRoomParams): Promise<EnterRoomResponse> => {
|
||||
return await fetchApi<EnterRoomResponse>(`/rooms/${roomId}/enter/`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
participant_id: participantId,
|
||||
allow_entry: allowEntry,
|
||||
encrypted_key: encryptedKey,
|
||||
admin_ephemeral_public_key: adminEphemeralPublicKey,
|
||||
encrypted_vault_key: encryptedVaultKey,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
@@ -8,10 +8,6 @@ export type WaitingParticipant = {
|
||||
status: string
|
||||
username: string
|
||||
color: string
|
||||
is_authenticated: boolean
|
||||
email?: string
|
||||
suite_user_id?: string
|
||||
ephemeral_public_key?: string
|
||||
}
|
||||
|
||||
export type WaitingParticipantsResponse = {
|
||||
|
||||
@@ -4,7 +4,6 @@ import { ApiLiveKit } from '@/features/rooms/api/ApiRoom'
|
||||
export interface RequestEntryParams {
|
||||
roomId: string
|
||||
username?: string
|
||||
ephemeralPublicKey?: string
|
||||
}
|
||||
|
||||
export enum ApiLobbyStatus {
|
||||
@@ -18,21 +17,16 @@ export enum ApiLobbyStatus {
|
||||
export interface ApiRequestEntry {
|
||||
status: ApiLobbyStatus
|
||||
livekit?: ApiLiveKit
|
||||
encrypted_key?: string
|
||||
admin_ephemeral_public_key?: string
|
||||
encrypted_vault_key?: string
|
||||
}
|
||||
|
||||
export const requestEntry = async ({
|
||||
roomId,
|
||||
username = '',
|
||||
ephemeralPublicKey = '',
|
||||
}: RequestEntryParams) => {
|
||||
return fetchApi<ApiRequestEntry>(`/rooms/${roomId}/request-entry/`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
ephemeral_public_key: ephemeralPublicKey,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
@@ -7,23 +7,14 @@ import {
|
||||
} from '@livekit/components-react'
|
||||
import {
|
||||
DisconnectReason,
|
||||
ExternalE2EEKeyProvider,
|
||||
MediaDeviceFailure,
|
||||
Room,
|
||||
RoomOptions,
|
||||
VideoPresets,
|
||||
} from 'livekit-client'
|
||||
import { setSymmetricKey, getSymmetricKey, getEncryptedVaultKey, generatePassphrase } from '@/features/encryption/lobbyKeyExchange'
|
||||
import { isEncryptedRoom, ApiEncryptionMode } from '../api/ApiRoom'
|
||||
import { VaultE2EEManager } from '@/features/encryption/VaultE2EEManager'
|
||||
import { useVaultClient } from '@/features/encryption'
|
||||
import { keys } from '@/api/queryKeys'
|
||||
import { queryClient } from '@/api/queryClient'
|
||||
import { Screen } from '@/layout/Screen'
|
||||
import { CenteredContent } from '@/layout/CenteredContent'
|
||||
import { RiLockLine } from '@remixicon/react'
|
||||
import { Center } from '@/styled-system/jsx'
|
||||
import { Text } from '@/primitives'
|
||||
import { QueryAware } from '@/components/QueryAware'
|
||||
import { ErrorScreen } from '@/components/ErrorScreen'
|
||||
import { fetchRoom } from '../api/fetchRoom'
|
||||
@@ -95,49 +86,12 @@ export const Conference = ({
|
||||
retry: false,
|
||||
})
|
||||
|
||||
const encryptionEnabled = isEncryptedRoom(data)
|
||||
const { client: vaultClient, hasKeys: vaultHasKeys, error: vaultError, isLoading: vaultLoading } = useVaultClient()
|
||||
|
||||
// Determine which E2EE backend to use based solely on the room's encryption_mode.
|
||||
// Advanced mode always uses VaultClient, basic mode always uses LiveKit Worker+KeyProvider.
|
||||
const useVaultE2EE = data?.encryption_mode === ApiEncryptionMode.ADVANCED
|
||||
|
||||
// Refs for both approaches (only one is used per session)
|
||||
const keyProviderRef = useRef<ExternalE2EEKeyProvider | null>(null)
|
||||
const workerRef = useRef<Worker | null>(null)
|
||||
const vaultManagerRef = useRef<VaultE2EEManager | null>(null)
|
||||
const [encryptionSetupComplete, setEncryptionSetupComplete] = useState(!encryptionEnabled)
|
||||
|
||||
const getKeyProvider = () => {
|
||||
if (!keyProviderRef.current && encryptionEnabled && !useVaultE2EE) {
|
||||
keyProviderRef.current = new ExternalE2EEKeyProvider()
|
||||
}
|
||||
return keyProviderRef.current
|
||||
}
|
||||
|
||||
const getWorker = () => {
|
||||
if (!workerRef.current && encryptionEnabled && !useVaultE2EE && typeof window !== 'undefined') {
|
||||
workerRef.current = new Worker(
|
||||
new URL('livekit-client/e2ee-worker', import.meta.url)
|
||||
)
|
||||
}
|
||||
return workerRef.current
|
||||
}
|
||||
|
||||
const getVaultManager = () => {
|
||||
if (!vaultManagerRef.current && useVaultE2EE && vaultClient) {
|
||||
vaultManagerRef.current = new VaultE2EEManager(vaultClient)
|
||||
}
|
||||
return vaultManagerRef.current
|
||||
}
|
||||
|
||||
const roomOptions = useMemo((): RoomOptions => {
|
||||
const baseOptions: RoomOptions = {
|
||||
return {
|
||||
adaptiveStream: true,
|
||||
dynacast: true,
|
||||
publishDefaults: {
|
||||
videoCodec: encryptionEnabled ? undefined : 'vp9',
|
||||
red: !encryptionEnabled,
|
||||
videoCodec: 'vp9',
|
||||
},
|
||||
videoCaptureDefaults: {
|
||||
deviceId: userConfig.videoDeviceId ?? undefined,
|
||||
@@ -152,25 +106,8 @@ export const Conference = ({
|
||||
deviceId: userConfig.audioOutputDeviceId ?? undefined,
|
||||
},
|
||||
}
|
||||
|
||||
if (useVaultE2EE) {
|
||||
const vaultManager = getVaultManager()
|
||||
if (vaultManager) {
|
||||
baseOptions.encryption = { e2eeManager: vaultManager }
|
||||
}
|
||||
} else if (encryptionEnabled) {
|
||||
const worker = getWorker()
|
||||
const keyProvider = getKeyProvider()
|
||||
if (keyProvider && worker) {
|
||||
baseOptions.encryption = { keyProvider, worker }
|
||||
}
|
||||
}
|
||||
|
||||
return baseOptions
|
||||
// do not rely on the userConfig object directly as its reference may change on every render
|
||||
}, [
|
||||
encryptionEnabled,
|
||||
useVaultE2EE,
|
||||
userConfig.videoDeviceId,
|
||||
userConfig.videoPublishResolution,
|
||||
userConfig.audioDeviceId,
|
||||
@@ -179,132 +116,6 @@ export const Conference = ({
|
||||
|
||||
const room = useMemo(() => new Room(roomOptions), [roomOptions])
|
||||
|
||||
/*
|
||||
* Ensure stable WebSocket connection URL. This is critical for legacy browser compatibility
|
||||
* (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs in WebSocket() constructor
|
||||
* may fail - the force_wss_protocol flag allows explicit WSS protocol conversion
|
||||
*/
|
||||
const serverUrl = useMemo(() => {
|
||||
const livekit_url = apiConfig?.livekit.url
|
||||
if (!livekit_url) return
|
||||
if (apiConfig?.livekit.force_wss_protocol) {
|
||||
return livekit_url.replace('https://', 'wss://')
|
||||
}
|
||||
return livekit_url
|
||||
}, [apiConfig?.livekit])
|
||||
|
||||
// Encryption key setup:
|
||||
// VaultE2EE: admin generates key via vaultClient.encryptWithoutKey(), joiner receives wrapped key
|
||||
// Fallback: admin generates passphrase, joiner receives via lobby DH exchange
|
||||
const isAdmin = mode === 'create' || data?.is_administrable === true
|
||||
const adminPassphraseRef = useRef<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!encryptionEnabled || encryptionSetupComplete) return
|
||||
|
||||
if (useVaultE2EE) {
|
||||
// Advanced mode: VaultE2EEManager delegates crypto to VaultClient iframe
|
||||
const vaultManager = getVaultManager()
|
||||
if (!vaultManager || !vaultClient) return
|
||||
if (isAdmin) {
|
||||
const existingKey = data?.encrypted_symmetric_key
|
||||
if (existingKey) {
|
||||
const binaryStr = atob(existingKey)
|
||||
const bytes = new Uint8Array(binaryStr.length)
|
||||
for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
|
||||
vaultManager.setEncryptedSymmetricKey(bytes.buffer)
|
||||
}
|
||||
} else {
|
||||
const vaultKey = getEncryptedVaultKey()
|
||||
if (vaultKey) {
|
||||
vaultManager.setEncryptedSymmetricKey(vaultKey)
|
||||
}
|
||||
}
|
||||
|
||||
// Enable E2EE BEFORE connecting — no tracks exist yet so
|
||||
// republishAllTracks() is a no-op. Calling after connection
|
||||
// triggers republish which times out.
|
||||
room.setE2EEEnabled(true).catch((err) => {
|
||||
console.error('[VaultE2EE] E2EE enable failed:', err)
|
||||
})
|
||||
|
||||
setEncryptionSetupComplete(true)
|
||||
return
|
||||
}
|
||||
|
||||
// Basic mode: LiveKit Worker+KeyProvider with passphrase
|
||||
const keyProvider = getKeyProvider()
|
||||
if (!keyProvider) return
|
||||
|
||||
let passphrase: string | null = null
|
||||
|
||||
if (isAdmin) {
|
||||
if (!adminPassphraseRef.current) {
|
||||
const existingHash = window.location.hash.slice(1)
|
||||
if (existingHash) {
|
||||
adminPassphraseRef.current = existingHash
|
||||
} else {
|
||||
adminPassphraseRef.current = generatePassphrase()
|
||||
window.history.replaceState(
|
||||
window.history.state,
|
||||
'',
|
||||
`${window.location.pathname}${window.location.search}#${adminPassphraseRef.current}`
|
||||
)
|
||||
}
|
||||
}
|
||||
passphrase = adminPassphraseRef.current
|
||||
setSymmetricKey(new TextEncoder().encode(passphrase))
|
||||
} else {
|
||||
const hashKey = window.location.hash.slice(1)
|
||||
if (hashKey) {
|
||||
passphrase = hashKey
|
||||
setSymmetricKey(new TextEncoder().encode(passphrase))
|
||||
} else {
|
||||
const preExchangedKey = getSymmetricKey()
|
||||
if (preExchangedKey) {
|
||||
passphrase = new TextDecoder().decode(preExchangedKey)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!passphrase) {
|
||||
console.error('[Encryption] No passphrase available')
|
||||
return
|
||||
}
|
||||
|
||||
keyProvider
|
||||
.setKey(passphrase)
|
||||
.then(async () => {
|
||||
// Enable E2EE BEFORE connecting — sets encryptionType=GCM so tracks
|
||||
// are published with encryption metadata from the start.
|
||||
// Also sends 'enable' to the Worker before any frames flow,
|
||||
// eliminating the unencrypted frame window.
|
||||
try {
|
||||
await room.setE2EEEnabled(true)
|
||||
} catch (err) {
|
||||
console.error('[Encryption] E2EE enable failed:', err)
|
||||
}
|
||||
|
||||
setEncryptionSetupComplete(true)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[Encryption] Key setup failed:', err)
|
||||
})
|
||||
|
||||
}, [room, encryptionEnabled, encryptionSetupComplete, isAdmin, useVaultE2EE])
|
||||
|
||||
// In basic encrypted rooms, the passphrase is in the URL hash.
|
||||
// If the user changes the hash (e.g. corrects a typo), reload the page
|
||||
// so the new passphrase is picked up by the encryption setup.
|
||||
useEffect(() => {
|
||||
if (!encryptionEnabled || useVaultE2EE) return
|
||||
const handleHashChange = () => {
|
||||
window.location.reload()
|
||||
}
|
||||
window.addEventListener('hashchange', handleHashChange)
|
||||
return () => window.removeEventListener('hashchange', handleHashChange)
|
||||
}, [encryptionEnabled, useVaultE2EE])
|
||||
|
||||
useEffect(() => {
|
||||
/**
|
||||
* Warm up connection to LiveKit server before joining room
|
||||
@@ -361,6 +172,20 @@ export const Conference = ({
|
||||
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
/*
|
||||
* Ensure stable WebSocket connection URL. This is critical for legacy browser compatibility
|
||||
* (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs in WebSocket() constructor
|
||||
* may fail - the force_wss_protocol flag allows explicit WSS protocol conversion
|
||||
*/
|
||||
const serverUrl = useMemo(() => {
|
||||
const livekit_url = apiConfig?.livekit.url
|
||||
if (!livekit_url) return
|
||||
if (apiConfig?.livekit.force_wss_protocol) {
|
||||
return livekit_url.replace('https://', 'wss://')
|
||||
}
|
||||
return livekit_url
|
||||
}, [apiConfig?.livekit])
|
||||
|
||||
const { t } = useTranslation('rooms')
|
||||
if (isCreateError) {
|
||||
// this error screen should be replaced by a proper waiting room for anonymous user.
|
||||
@@ -372,67 +197,6 @@ export const Conference = ({
|
||||
)
|
||||
}
|
||||
|
||||
// Block entry to advanced encrypted rooms when vault service is unavailable
|
||||
if (useVaultE2EE && !vaultLoading && !vaultClient) {
|
||||
return (
|
||||
<Screen layout="centered">
|
||||
<CenteredContent withBackButton>
|
||||
<Center>
|
||||
<div
|
||||
className={css({
|
||||
maxWidth: '400px',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '1rem',
|
||||
padding: '2rem',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
|
||||
border: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
textAlign: 'center',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
width: '3.5rem',
|
||||
height: '3.5rem',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#fef2f2',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
<RiLockLine size={28} color="#dc2626" />
|
||||
</div>
|
||||
<Text as="h2" className={css({ fontWeight: 700, fontSize: '1.15rem' })}>
|
||||
{t('encryption.error.title')}
|
||||
</Text>
|
||||
<Text as="p" className={css({ fontSize: '0.9rem', color: 'greyscale.700' })}>
|
||||
{t('encryption.error.vaultUnavailable')}
|
||||
</Text>
|
||||
<div
|
||||
className={css({
|
||||
backgroundColor: '#fffbeb',
|
||||
border: '1px solid #fde68a',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '0.75rem 1rem',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
<Text as="p" className={css({ fontSize: '0.8rem', color: '#92400e' })}>
|
||||
{t('encryption.error.vaultUnavailableHint')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Center>
|
||||
</CenteredContent>
|
||||
</Screen>
|
||||
)
|
||||
}
|
||||
|
||||
// Some clients (like DINUM) operate in bandwidth-constrained environments
|
||||
// These settings help ensure successful connections in poor network conditions
|
||||
const connectOptions = {
|
||||
@@ -447,7 +211,7 @@ export const Conference = ({
|
||||
room={room}
|
||||
serverUrl={serverUrl}
|
||||
token={data?.livekit?.token}
|
||||
connect={isConnectionWarmedUp && encryptionSetupComplete}
|
||||
connect={isConnectionWarmedUp}
|
||||
audio={userConfig.audioEnabled}
|
||||
video={
|
||||
userConfig.videoEnabled && {
|
||||
|
||||
@@ -43,11 +43,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
|
||||
|
||||
const roomData = useRoomData()
|
||||
const baseRoomUrl = getRouteUrl('room', roomData?.slug)
|
||||
// Include the hash (passphrase) for basic encrypted rooms so the full link is visible
|
||||
const roomUrl = window.location.hash
|
||||
? `${baseRoomUrl}${window.location.hash}`
|
||||
: baseRoomUrl
|
||||
const roomUrl = getRouteUrl('room', roomData?.slug)
|
||||
|
||||
const telephony = useTelephony()
|
||||
|
||||
|
||||
@@ -32,122 +32,8 @@ import { useQuery } from '@tanstack/react-query'
|
||||
import { queryClient } from '@/api/queryClient'
|
||||
import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
|
||||
import { Spinner } from '@/primitives/Spinner'
|
||||
import { ApiAccessLevel, ApiEncryptionMode, isEncryptedRoom as checkEncryptedRoom } from '../api/ApiRoom'
|
||||
import { useVaultClient } from '@/features/encryption'
|
||||
import { LoginButton } from '@/components/LoginButton'
|
||||
|
||||
const AdvancedOnboardingScreen = ({
|
||||
modalOpen,
|
||||
onModalOpenChange,
|
||||
}: {
|
||||
modalOpen: boolean
|
||||
onModalOpenChange: (open: boolean) => void
|
||||
}) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'join' })
|
||||
const { client: vaultClient } = useVaultClient()
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!modalOpen || !vaultClient) return
|
||||
|
||||
const el = containerRef.current
|
||||
if (!el) return
|
||||
|
||||
el.innerHTML = ''
|
||||
vaultClient.openOnboarding(el)
|
||||
|
||||
const handleClosed = () => {
|
||||
onModalOpenChange(false)
|
||||
vaultClient.off('interface:closed', handleClosed)
|
||||
}
|
||||
vaultClient.on('interface:closed', handleClosed)
|
||||
|
||||
return () => {
|
||||
vaultClient.off('interface:closed', handleClosed)
|
||||
}
|
||||
}, [modalOpen, vaultClient, onModalOpenChange])
|
||||
|
||||
return (
|
||||
<>
|
||||
<VStack alignItems="center" textAlign="center" gap="0.75rem">
|
||||
<RiLockLine size={32} color="#d97706" />
|
||||
<H lvl={1} margin={false} centered>
|
||||
{t('advancedOnboarding.title')}
|
||||
</H>
|
||||
<Text as="p" variant="note">
|
||||
{t('advancedOnboarding.body')}
|
||||
</Text>
|
||||
<Button
|
||||
variant="primary"
|
||||
onPress={() => onModalOpenChange(true)}
|
||||
>
|
||||
{t('advancedOnboarding.button')}
|
||||
</Button>
|
||||
</VStack>
|
||||
{modalOpen && (
|
||||
<div
|
||||
className={css({
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 9999,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
})}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onModalOpenChange(false)
|
||||
vaultClient?.closeInterface()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '0.75rem',
|
||||
width: '90%',
|
||||
maxWidth: '550px',
|
||||
maxHeight: '85vh',
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
||||
})}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
onModalOpenChange(false)
|
||||
vaultClient?.closeInterface()
|
||||
}}
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
top: '0.75rem',
|
||||
right: '0.75rem',
|
||||
zIndex: 1,
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '1.25rem',
|
||||
color: 'greyscale.500',
|
||||
_hover: { color: 'greyscale.900' },
|
||||
})}
|
||||
aria-label="Close"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={css({ minHeight: '300px' })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { ApiAccessLevel } from '../api/ApiRoom'
|
||||
import { useLoginHint } from '@/hooks/useLoginHint'
|
||||
import { useUser } from '@/features/auth'
|
||||
import { RiInformationLine, RiLockLine } from '@remixicon/react'
|
||||
import { openPermissionsDialog } from '@/stores/permissions'
|
||||
import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
|
||||
import { isSafari } from '@/utils/livekit'
|
||||
@@ -216,31 +102,6 @@ export const Join = ({
|
||||
roomId: string
|
||||
}) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'join' })
|
||||
const { isLoggedIn, user } = useUser()
|
||||
|
||||
// Early fetch to check if the room is encrypted (needed before form submission)
|
||||
const { data: roomInfo } = useQuery({
|
||||
queryKey: [keys.room, roomId, 'info'],
|
||||
queryFn: () => fetchRoom({ roomId }),
|
||||
staleTime: 6 * 60 * 60 * 1000,
|
||||
retry: false,
|
||||
})
|
||||
const isEncryptedRoom = checkEncryptedRoom(roomInfo)
|
||||
const isBasicEncrypted = roomInfo?.encryption_mode === ApiEncryptionMode.BASIC
|
||||
const isAdvancedEncrypted = roomInfo?.encryption_mode === ApiEncryptionMode.ADVANCED
|
||||
|
||||
// Basic mode: validate the passphrase in the URL hash
|
||||
const hashKey = window.location.hash.slice(1)
|
||||
const hasValidBasicKey = isBasicEncrypted ? (hashKey.length === 48 && /^[a-z0-9]+$/.test(hashKey)) : true
|
||||
|
||||
// Advanced mode: require auth + vault onboarding
|
||||
const { hasKeys: vaultHasKeys, isReady: vaultReady } = useVaultClient()
|
||||
const advancedRequiresLogin = isAdvancedEncrypted && !isLoggedIn
|
||||
const advancedRequiresOnboarding = isAdvancedEncrypted && isLoggedIn && vaultReady && !vaultHasKeys
|
||||
|
||||
// In encrypted rooms, authenticated users must use their OIDC name
|
||||
const isNameLocked = isEncryptedRoom && !!isLoggedIn
|
||||
const lockedName = user?.full_name || user?.email || ''
|
||||
|
||||
const {
|
||||
userChoices: {
|
||||
@@ -464,10 +325,8 @@ export const Join = ({
|
||||
roomId,
|
||||
username,
|
||||
onAccepted: handleAccepted,
|
||||
encryptionEnabled: isEncryptedRoom,
|
||||
})
|
||||
|
||||
const [advancedOnboardingOpen, setAdvancedOnboardingOpen] = useState(false)
|
||||
const { openLoginHint } = useLoginHint()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
@@ -567,41 +426,6 @@ export const Join = ({
|
||||
)
|
||||
|
||||
default:
|
||||
if (advancedRequiresLogin) {
|
||||
return (
|
||||
<VStack alignItems="center" textAlign="center" gap="0.75rem">
|
||||
<RiLockLine size={32} color="#2563eb" />
|
||||
<H lvl={1} margin={false} centered>
|
||||
{t('advancedAuth.title')}
|
||||
</H>
|
||||
<Text as="p" variant="note">
|
||||
{t('advancedAuth.body')}
|
||||
</Text>
|
||||
<LoginButton proConnectHint={false} />
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
if (advancedRequiresOnboarding || advancedOnboardingOpen) {
|
||||
return (
|
||||
<AdvancedOnboardingScreen
|
||||
modalOpen={advancedOnboardingOpen}
|
||||
onModalOpenChange={setAdvancedOnboardingOpen}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (isBasicEncrypted && !hasValidBasicKey) {
|
||||
return (
|
||||
<VStack alignItems="center" textAlign="center" gap="0.75rem">
|
||||
<RiLockLine size={32} color="#dc2626" />
|
||||
<H lvl={1} margin={false} centered>
|
||||
{t('invalidKey.title')}
|
||||
</H>
|
||||
<Text as="p" variant="note">
|
||||
{t('invalidKey.body')}
|
||||
</Text>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Form
|
||||
onSubmit={handleSubmit}
|
||||
@@ -614,81 +438,20 @@ export const Join = ({
|
||||
<H lvl={1} margin="sm" centered>
|
||||
{t('heading')}
|
||||
</H>
|
||||
{isNameLocked ? (
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.25rem',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
color: 'greyscale.500',
|
||||
fontSize: '0.8rem',
|
||||
})}
|
||||
>
|
||||
{t('usernameLabel')}
|
||||
</Text>
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
backgroundColor: 'greyscale.100',
|
||||
borderRadius: '0.375rem',
|
||||
border: '1px solid',
|
||||
borderColor: 'greyscale.200',
|
||||
})}
|
||||
>
|
||||
<RiLockLine size={14} color="#6b7280" />
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
fontWeight: 500,
|
||||
})}
|
||||
>
|
||||
{lockedName}
|
||||
</Text>
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.25rem',
|
||||
})}
|
||||
>
|
||||
<RiInformationLine size={12} color="#9ca3af" />
|
||||
<Text
|
||||
variant="note"
|
||||
className={css({
|
||||
fontSize: '0.7rem',
|
||||
color: 'greyscale.400',
|
||||
})}
|
||||
>
|
||||
{t('encryptedNameLocked')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Field
|
||||
type="text"
|
||||
onChange={saveUsername}
|
||||
label={t('usernameLabel')}
|
||||
id="input-name"
|
||||
defaultValue={username}
|
||||
validate={(value) => !value && t('errors.usernameEmpty')}
|
||||
wrapperProps={{
|
||||
noMargin: true,
|
||||
fullWidth: true,
|
||||
}}
|
||||
autoComplete="name"
|
||||
maxLength={50}
|
||||
/>
|
||||
)}
|
||||
<Field
|
||||
type="text"
|
||||
onChange={saveUsername}
|
||||
label={t('usernameLabel')}
|
||||
id="input-name"
|
||||
defaultValue={username}
|
||||
validate={(value) => !value && t('errors.usernameEmpty')}
|
||||
wrapperProps={{
|
||||
noMargin: true,
|
||||
fullWidth: true,
|
||||
}}
|
||||
autoComplete="name"
|
||||
maxLength={50}
|
||||
/>
|
||||
</VStack>
|
||||
</Form>
|
||||
)
|
||||
|
||||
@@ -6,10 +6,6 @@ import {
|
||||
ApiLobbyStatus,
|
||||
ApiRequestEntry,
|
||||
} from '../api/requestEntry'
|
||||
import {
|
||||
setSymmetricKey,
|
||||
setEncryptedVaultKey,
|
||||
} from '@/features/encryption/lobbyKeyExchange'
|
||||
|
||||
export const WAIT_TIMEOUT_MS = 600000 // 10 minutes
|
||||
export const POLL_INTERVAL_MS = 1000
|
||||
@@ -18,15 +14,14 @@ export const useLobby = ({
|
||||
roomId,
|
||||
username,
|
||||
onAccepted,
|
||||
encryptionEnabled = false,
|
||||
}: {
|
||||
roomId: string
|
||||
username: string
|
||||
onAccepted: (e: ApiRequestEntry) => void
|
||||
encryptionEnabled?: boolean
|
||||
}) => {
|
||||
const [status, setStatus] = useState(ApiLobbyStatus.IDLE)
|
||||
const waitingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
const clearWaitingTimeout = useCallback(() => {
|
||||
if (waitingTimeoutRef.current) {
|
||||
clearTimeout(waitingTimeoutRef.current)
|
||||
@@ -52,20 +47,6 @@ export const useLobby = ({
|
||||
if (response.status === ApiLobbyStatus.ACCEPTED) {
|
||||
clearWaitingTimeout()
|
||||
setStatus(ApiLobbyStatus.ACCEPTED)
|
||||
|
||||
// Advanced mode: vault-wrapped key
|
||||
if (encryptionEnabled && response.encrypted_vault_key) {
|
||||
console.info('[VaultE2EE] Joiner: received encrypted_vault_key from lobby, length:', response.encrypted_vault_key.length)
|
||||
const binaryStr = atob(response.encrypted_vault_key)
|
||||
const bytes = new Uint8Array(binaryStr.length)
|
||||
for (let i = 0; i < binaryStr.length; i++) {
|
||||
bytes[i] = binaryStr.charCodeAt(i)
|
||||
}
|
||||
setEncryptedVaultKey(bytes.buffer)
|
||||
} else if (encryptionEnabled) {
|
||||
console.warn('[VaultE2EE] Joiner: ACCEPTED but no encrypted_vault_key in response', response)
|
||||
}
|
||||
|
||||
onAccepted(response)
|
||||
} else if (response.status === ApiLobbyStatus.DENIED) {
|
||||
clearWaitingTimeout()
|
||||
@@ -79,7 +60,7 @@ export const useLobby = ({
|
||||
enabled: status === ApiLobbyStatus.WAITING,
|
||||
})
|
||||
|
||||
const startWaiting = useCallback(async () => {
|
||||
const startWaiting = useCallback(() => {
|
||||
setStatus(ApiLobbyStatus.WAITING)
|
||||
startWaitingTimeout()
|
||||
}, [startWaitingTimeout])
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { useRoomContext } from '@livekit/components-react'
|
||||
import { RoomEvent } from 'livekit-client'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom as checkEncryptedRoom, ApiEncryptionMode } from '@/features/rooms/api/ApiRoom'
|
||||
import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
|
||||
import { useEnterRoom } from '../api/enterRoom'
|
||||
import {
|
||||
@@ -11,8 +10,6 @@ import {
|
||||
} from '../api/listWaitingParticipants'
|
||||
import { decodeNotificationDataReceived } from '@/features/notifications/utils'
|
||||
import { NotificationType } from '@/features/notifications/NotificationType'
|
||||
import { useVaultClient } from '@/features/encryption'
|
||||
import { toastQueue } from '@/features/notifications/components/ToastProvider'
|
||||
|
||||
export const POLL_INTERVAL_MS = 1000
|
||||
|
||||
@@ -21,12 +18,9 @@ export const useWaitingParticipants = () => {
|
||||
|
||||
const roomData = useRoomData()
|
||||
const roomId = roomData?.id || '' // FIXME - bad practice
|
||||
const encrypted = checkEncryptedRoom(roomData)
|
||||
const isAdvancedMode = roomData?.encryption_mode === ApiEncryptionMode.ADVANCED
|
||||
|
||||
const room = useRoomContext()
|
||||
const isAdminOrOwner = useIsAdminOrOwner()
|
||||
const { client: vaultClient } = useVaultClient()
|
||||
|
||||
const handleDataReceived = useCallback((payload: Uint8Array) => {
|
||||
const notification = decodeNotificationDataReceived(payload)
|
||||
@@ -63,91 +57,14 @@ export const useWaitingParticipants = () => {
|
||||
|
||||
const { mutateAsync: enterRoom } = useEnterRoom()
|
||||
|
||||
const encryptKeyForAccept = async (participant: WaitingParticipant) => {
|
||||
let encryptedKey = ''
|
||||
let adminEphemeralPublicKey = ''
|
||||
let encryptedVaultKey = ''
|
||||
|
||||
if (isAdvancedMode) {
|
||||
// Advanced mode: re-wrap the existing symmetric key for the joiner.
|
||||
// All steps are mandatory — if any fails, the participant must NOT be accepted
|
||||
// (they would join without a key and see nothing).
|
||||
if (!vaultClient) {
|
||||
throw new Error('Encryption service is not available')
|
||||
}
|
||||
if (!participant.suite_user_id) {
|
||||
throw new Error('Participant has no vault identity — they may not be authenticated')
|
||||
}
|
||||
|
||||
const adminKeyBase64 = roomData?.encrypted_symmetric_key
|
||||
if (!adminKeyBase64) {
|
||||
throw new Error('Admin has no encrypted symmetric key for this room')
|
||||
}
|
||||
|
||||
console.info('[VaultE2EE] Admin: wrapping key for joiner', participant.suite_user_id)
|
||||
const adminKeyBinary = atob(adminKeyBase64)
|
||||
const adminKeyBytes = new Uint8Array(adminKeyBinary.length)
|
||||
for (let i = 0; i < adminKeyBinary.length; i++) adminKeyBytes[i] = adminKeyBinary.charCodeAt(i)
|
||||
|
||||
// Fetch joiner's vault public key
|
||||
const { publicKeys } = await vaultClient.fetchPublicKeys([participant.suite_user_id])
|
||||
const joinerPubKey = publicKeys[participant.suite_user_id]
|
||||
if (!joinerPubKey) {
|
||||
throw new Error(`Could not find encryption public key for participant "${participant.username}"`)
|
||||
}
|
||||
|
||||
// Re-wrap the symmetric key for the joiner using shareKeys
|
||||
const { encryptedKeys } = await vaultClient.shareKeys(
|
||||
adminKeyBytes.buffer,
|
||||
{ [participant.suite_user_id]: joinerPubKey }
|
||||
)
|
||||
const joinerKey = encryptedKeys[participant.suite_user_id]
|
||||
if (!joinerKey) {
|
||||
throw new Error('Key wrapping returned no result — shareKeys failed')
|
||||
}
|
||||
|
||||
const bytes = new Uint8Array(joinerKey)
|
||||
encryptedVaultKey = btoa(String.fromCharCode(...bytes))
|
||||
console.info('[VaultE2EE] Admin: key wrapped successfully, length:', encryptedVaultKey.length)
|
||||
}
|
||||
|
||||
return { encryptedKey, adminEphemeralPublicKey, encryptedVaultKey }
|
||||
}
|
||||
|
||||
const handleParticipantEntry = async (
|
||||
participant: WaitingParticipant,
|
||||
allowEntry: boolean
|
||||
) => {
|
||||
let encryptedKey = ''
|
||||
let adminEphemeralPublicKey = ''
|
||||
let encryptedVaultKey = ''
|
||||
|
||||
if (allowEntry) {
|
||||
try {
|
||||
const keys = await encryptKeyForAccept(participant)
|
||||
encryptedKey = keys.encryptedKey
|
||||
adminEphemeralPublicKey = keys.adminEphemeralPublicKey
|
||||
encryptedVaultKey = keys.encryptedVaultKey
|
||||
} catch (err) {
|
||||
console.error('[VaultE2EE] Cannot accept participant:', err)
|
||||
toastQueue.add(
|
||||
{
|
||||
type: 'encryptionError' as NotificationType,
|
||||
message: `Cannot accept ${participant.username}: ${(err as Error).message}`,
|
||||
},
|
||||
{ timeout: 8000 }
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
await enterRoom({
|
||||
roomId: roomId,
|
||||
allowEntry,
|
||||
participantId: participant.id,
|
||||
encryptedKey,
|
||||
adminEphemeralPublicKey,
|
||||
encryptedVaultKey,
|
||||
})
|
||||
await refetchWaiting()
|
||||
}
|
||||
@@ -159,39 +76,13 @@ export const useWaitingParticipants = () => {
|
||||
setListEnabled(false)
|
||||
|
||||
await Promise.all(
|
||||
waitingParticipants.map(async (participant) => {
|
||||
let encryptedKey = ''
|
||||
let adminEphemeralPublicKey = ''
|
||||
let encryptedVaultKey = ''
|
||||
|
||||
if (allowEntry) {
|
||||
try {
|
||||
const keys = await encryptKeyForAccept(participant)
|
||||
encryptedKey = keys.encryptedKey
|
||||
adminEphemeralPublicKey = keys.adminEphemeralPublicKey
|
||||
encryptedVaultKey = keys.encryptedVaultKey
|
||||
} catch (err) {
|
||||
console.error('[VaultE2EE] Cannot accept participant:', err)
|
||||
toastQueue.add(
|
||||
{
|
||||
type: 'encryptionError' as NotificationType,
|
||||
message: `Cannot accept ${participant.username}: ${(err as Error).message}`,
|
||||
},
|
||||
{ timeout: 8000 }
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
return enterRoom({
|
||||
waitingParticipants.map((participant) =>
|
||||
enterRoom({
|
||||
roomId: roomId,
|
||||
allowEntry,
|
||||
participantId: participant.id,
|
||||
encryptedKey,
|
||||
adminEphemeralPublicKey,
|
||||
encryptedVaultKey,
|
||||
})
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
await refetchWaiting()
|
||||
|
||||
@@ -4,14 +4,12 @@ import { Separator as RACSeparator } from 'react-aria-components'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { usePatchRoom } from '@/features/rooms/api/patchRoom'
|
||||
import { fetchRoom } from '@/features/rooms/api/fetchRoom'
|
||||
import { ApiAccessLevel, isEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
|
||||
import { queryClient } from '@/api/queryClient'
|
||||
import { keys } from '@/api/queryKeys'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useParams } from 'wouter'
|
||||
import { usePublishSourcesManager } from '@/features/rooms/livekit/hooks/usePublishSourcesManager'
|
||||
import { RiLockFill } from '@remixicon/react'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
|
||||
export const Admin = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'admin' })
|
||||
@@ -168,25 +166,6 @@ export const Admin = () => {
|
||||
>
|
||||
{t('access.description')}
|
||||
</Text>
|
||||
{isEncryptedRoom(readOnlyData) && (
|
||||
<HStack
|
||||
gap="0.5rem"
|
||||
className={css({
|
||||
backgroundColor: 'primary.100',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '0.75rem',
|
||||
marginBottom: '0.75rem',
|
||||
})}
|
||||
>
|
||||
<RiLockFill size={16} className={css({ flexShrink: 0 })} />
|
||||
<Text
|
||||
variant="note"
|
||||
className={css({ textStyle: 'sm' })}
|
||||
>
|
||||
{t('access.encryptionWarning')}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
<Field
|
||||
type="radioGroup"
|
||||
label={t('access.type')}
|
||||
@@ -213,13 +192,11 @@ export const Admin = () => {
|
||||
value: ApiAccessLevel.PUBLIC,
|
||||
label: t('access.levels.public.label'),
|
||||
description: t('access.levels.public.description'),
|
||||
isDisabled: isEncryptedRoom(readOnlyData),
|
||||
},
|
||||
{
|
||||
value: ApiAccessLevel.TRUSTED,
|
||||
label: t('access.levels.trusted.label'),
|
||||
description: t('access.levels.trusted.description'),
|
||||
isDisabled: isEncryptedRoom(readOnlyData),
|
||||
},
|
||||
{
|
||||
value: ApiAccessLevel.RESTRICTED,
|
||||
|
||||
@@ -32,6 +32,7 @@ export const AdminToggle = ({
|
||||
aria-label={t(tooltipLabel)}
|
||||
tooltip={t(tooltipLabel)}
|
||||
isSelected={isAdminOpen}
|
||||
aria-expanded={isAdminOpen}
|
||||
onPress={(e) => {
|
||||
toggleAdmin()
|
||||
onPress?.(e)
|
||||
|
||||
@@ -14,10 +14,7 @@ export const Info = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'info' })
|
||||
|
||||
const data = useRoomData()
|
||||
const baseRoomUrl = getRouteUrl('room', data?.slug)
|
||||
const roomUrl = window.location.hash
|
||||
? `${baseRoomUrl}${window.location.hash}`
|
||||
: baseRoomUrl
|
||||
const roomUrl = getRouteUrl('room', data?.slug)
|
||||
|
||||
const telephony = useTelephony()
|
||||
|
||||
@@ -53,14 +50,7 @@ export const Info = () => {
|
||||
flexDirection: 'column',
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="xsNote"
|
||||
className={css({
|
||||
wordBreak: 'break-all',
|
||||
whiteSpace: 'normal',
|
||||
})}
|
||||
>
|
||||
<Text as="p" variant="xsNote" wrap="pretty">
|
||||
{roomUrl.replace(/^https?:\/\//, '')}
|
||||
</Text>
|
||||
{isTelephonyReadyForUse && (
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
AudioTrack,
|
||||
ConnectionQualityIndicator,
|
||||
LockLockedIcon,
|
||||
ParticipantTileProps,
|
||||
ScreenShareIcon,
|
||||
useEnsureTrackRef,
|
||||
@@ -19,23 +20,10 @@ import {
|
||||
isTrackReferencePinned,
|
||||
TrackReferenceOrPlaceholder,
|
||||
} from '@livekit/components-core'
|
||||
import { Track, RoomEvent } from 'livekit-client'
|
||||
import type { Participant } from 'livekit-client'
|
||||
import { Track } from 'livekit-client'
|
||||
import { RiHand } from '@remixicon/react'
|
||||
import { useRoomContext } from '@livekit/components-react'
|
||||
import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
|
||||
import {
|
||||
EncryptionBadge,
|
||||
EncryptionIdentityDialog,
|
||||
} from '@/features/encryption'
|
||||
import { useParticipantTrustLevel } from '@/features/encryption/useParticipantTrustLevel'
|
||||
import { useRoomData } from '../hooks/useRoomData'
|
||||
import { isEncryptedRoom as checkEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
import { useIsAdminOrOwner } from '../hooks/useIsAdminOrOwner'
|
||||
import { RiLockFill } from '@remixicon/react'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { Button } from '@/primitives'
|
||||
import { MutedMicIndicator } from './MutedMicIndicator'
|
||||
import { ParticipantPlaceholder } from './ParticipantPlaceholder'
|
||||
import { ParticipantTileFocus } from './ParticipantTileFocus'
|
||||
@@ -91,51 +79,6 @@ export const ParticipantTile: (
|
||||
trackRef: trackReference,
|
||||
})
|
||||
const isEncrypted = useIsEncrypted(trackReference.participant)
|
||||
const roomData = useRoomData()
|
||||
const isEncryptedRoom = checkEncryptedRoom(roomData)
|
||||
const isAdmin = useIsAdminOrOwner()
|
||||
const [isIdentityOpen, setIsFingerprintOpen] = React.useState(false)
|
||||
const participantAttrs = trackReference.participant.attributes as Record<string, string> | undefined
|
||||
const { trustLevel, fingerprintStatus, fingerprint: participantFingerprint } = useParticipantTrustLevel(participantAttrs, roomData?.encryption_mode, trackReference.participant.isLocal)
|
||||
const { t: tBadge } = useTranslation('rooms', { keyPrefix: 'encryption.badge' })
|
||||
const badgeTooltip = tBadge(trustLevel)
|
||||
|
||||
// Track decryption failures via EncryptionError events from LiveKit.
|
||||
// useIsEncrypted returns true when E2EE is enabled, NOT when frames decrypt successfully.
|
||||
// So we listen for actual decryption errors to know when to show the overlay.
|
||||
const room = useRoomContext()
|
||||
const [decryptionFailed, setDecryptionFailed] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isEncryptedRoom || trackReference.participant.isLocal) return
|
||||
|
||||
const participantIdentity = trackReference.participant.identity
|
||||
|
||||
const handleEncryptionError = (_error: Error, participant?: Participant) => {
|
||||
if (participant?.identity === participantIdentity) {
|
||||
setDecryptionFailed(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEncryptionStatusChanged = (encrypted: boolean, participant?: Participant) => {
|
||||
// Clear the error when encryption status confirms frames are decrypting
|
||||
if (participant?.identity === participantIdentity && encrypted) {
|
||||
setDecryptionFailed(false)
|
||||
}
|
||||
}
|
||||
|
||||
room.on(RoomEvent.EncryptionError, handleEncryptionError)
|
||||
room.on(RoomEvent.ParticipantEncryptionStatusChanged, handleEncryptionStatusChanged)
|
||||
return () => {
|
||||
room.off(RoomEvent.EncryptionError, handleEncryptionError)
|
||||
room.off(RoomEvent.ParticipantEncryptionStatusChanged, handleEncryptionStatusChanged)
|
||||
}
|
||||
}, [room, isEncryptedRoom, trackReference.participant])
|
||||
|
||||
const showDecryptionError =
|
||||
!trackReference.participant.isLocal &&
|
||||
isEncryptedRoom &&
|
||||
decryptionFailed
|
||||
const layoutContext = useMaybeLayoutContext()
|
||||
|
||||
const autoManageSubscription = useFeatureContext()?.autoSubscription
|
||||
@@ -218,65 +161,6 @@ export const ParticipantTile: (
|
||||
participant={trackReference.participant}
|
||||
/>
|
||||
</div>
|
||||
{showDecryptionError && !isScreenShare && (
|
||||
<div
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
zIndex: '0 !important',
|
||||
pointerEvents: 'none',
|
||||
})}
|
||||
>
|
||||
<ParticipantPlaceholder
|
||||
participant={trackReference.participant}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '2.5rem',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '0.6rem 1rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '0.3rem',
|
||||
maxWidth: '85%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
color: '#f87171',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<RiLockFill size={14} />
|
||||
<span>Decryption failed</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
color: '#d1d5db',
|
||||
fontSize: '0.75rem',
|
||||
textAlign: 'center',
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
Check that you and this person are using the correct
|
||||
meeting link. If they are the only one you can't see,
|
||||
the issue is likely on their side.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!disableMetadata && (
|
||||
<div className="lk-participant-metadata">
|
||||
<HStack gap={0.25}>
|
||||
@@ -331,59 +215,15 @@ export const ParticipantTile: (
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isEncryptedRoom && !isScreenShare ? (
|
||||
<Button
|
||||
variant="greyscale"
|
||||
size="sm"
|
||||
tooltip={badgeTooltip}
|
||||
aria-label={badgeTooltip}
|
||||
onPress={() => setIsFingerprintOpen(true)}
|
||||
className={css({
|
||||
display: 'inline-flex !important',
|
||||
alignItems: 'center !important',
|
||||
gap: '0.15rem !important',
|
||||
padding: '0.1rem 0.15rem !important',
|
||||
minWidth: 'auto !important',
|
||||
height: 'auto !important',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
borderRadius: '0.25rem !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
color: 'inherit !important',
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.15) !important',
|
||||
},
|
||||
})}
|
||||
>
|
||||
{(isEncrypted || isEncryptedRoom) && (
|
||||
<EncryptionBadge
|
||||
isEncrypted={true}
|
||||
trustLevel={trustLevel}
|
||||
/>
|
||||
)}
|
||||
<div className="lk-participant-name-wrapper">
|
||||
<ParticipantName
|
||||
isScreenShare={isScreenShare}
|
||||
participant={trackReference.participant}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
{(isEncrypted || isEncryptedRoom) && !isScreenShare && (
|
||||
<EncryptionBadge
|
||||
isEncrypted={true}
|
||||
trustLevel={trustLevel}
|
||||
/>
|
||||
)}
|
||||
<div className="lk-participant-name-wrapper">
|
||||
<ParticipantName
|
||||
isScreenShare={isScreenShare}
|
||||
participant={trackReference.participant}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
{isEncrypted && !isScreenShare && (
|
||||
<LockLockedIcon style={{ marginRight: '0.25rem' }} />
|
||||
)}
|
||||
<div className="lk-participant-name-wrapper">
|
||||
<ParticipantName
|
||||
isScreenShare={isScreenShare}
|
||||
participant={trackReference.participant}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</HStack>
|
||||
<ConnectionQualityIndicator className="lk-participant-metadata-item" />
|
||||
@@ -406,20 +246,6 @@ export const ParticipantTile: (
|
||||
),
|
||||
})}
|
||||
</KeyboardShortcutHint>
|
||||
{isEncryptedRoom && (
|
||||
<EncryptionIdentityDialog
|
||||
isOpen={isIdentityOpen}
|
||||
onOpenChange={setIsFingerprintOpen}
|
||||
participantName={trackReference.participant.name || trackReference.participant.identity}
|
||||
participantEmail={participantAttrs?.email}
|
||||
suiteUserId={participantAttrs?.suite_user_id}
|
||||
isAuthenticated={participantAttrs?.is_authenticated === 'true'}
|
||||
encryptionMode={roomData?.encryption_mode}
|
||||
isSelf={trackReference.participant.isLocal}
|
||||
preloadedFingerprint={participantFingerprint}
|
||||
preloadedFingerprintStatus={fingerprintStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -14,6 +14,7 @@ import { Admin } from './Admin'
|
||||
import { Tools } from './Tools'
|
||||
import { Info } from './Info'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
|
||||
|
||||
type StyledSidePanelProps = {
|
||||
title: string
|
||||
@@ -25,6 +26,7 @@ type StyledSidePanelProps = {
|
||||
isSubmenu: boolean
|
||||
onBack: () => void
|
||||
backButtonLabel: string
|
||||
isReactionToolbarOpen?: boolean
|
||||
}
|
||||
|
||||
const StyledSidePanel = ({
|
||||
@@ -33,6 +35,7 @@ const StyledSidePanel = ({
|
||||
children,
|
||||
onClose,
|
||||
isClosed,
|
||||
isReactionToolbarOpen,
|
||||
closeButtonTooltip,
|
||||
isSubmenu = false,
|
||||
onBack,
|
||||
@@ -51,17 +54,23 @@ const StyledSidePanel = ({
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
margin: '1.5rem 1.5rem 1.5rem 0',
|
||||
margin: 'var(--sizes-room-side-panel-margin)',
|
||||
marginLeft: 0,
|
||||
marginBottom: 0,
|
||||
padding: 0,
|
||||
gap: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: '80px',
|
||||
width: '360px',
|
||||
width: 'var(--sizes-room-side-panel)',
|
||||
transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
|
||||
})}
|
||||
style={{
|
||||
transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
|
||||
transform: isClosed
|
||||
? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
|
||||
: 'none',
|
||||
bottom: isReactionToolbarOpen
|
||||
? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
|
||||
: 'var(--sizes-room-control-bar)',
|
||||
}}
|
||||
aria-hidden={isClosed}
|
||||
aria-label={ariaLabel}
|
||||
@@ -151,6 +160,8 @@ export const SidePanel = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
|
||||
const title = t(`heading.${activeSubPanelId || activePanelId}`)
|
||||
|
||||
const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()
|
||||
|
||||
return (
|
||||
<StyledSidePanel
|
||||
title={title}
|
||||
@@ -164,6 +175,7 @@ export const SidePanel = () => {
|
||||
})}
|
||||
isClosed={!isSidePanelOpen}
|
||||
isSubmenu={isSubPanelOpen}
|
||||
isReactionToolbarOpen={isReactionToolbarOpen}
|
||||
backButtonLabel={t('backToTools')}
|
||||
onBack={() => (layoutStore.activeSubPanelId = null)}
|
||||
>
|
||||
|
||||
@@ -12,16 +12,12 @@ import {
|
||||
ScreenRecordingSidePanel,
|
||||
} from '@/features/recording'
|
||||
import { useConfig } from '@/api/useConfig'
|
||||
import { useRoomData } from '../hooks/useRoomData'
|
||||
import { isEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
import { RiLockLine } from '@remixicon/react'
|
||||
|
||||
export interface ToolsButtonProps {
|
||||
icon: ReactNode
|
||||
title: string
|
||||
description: string
|
||||
onPress: () => void
|
||||
isDisabled?: boolean
|
||||
}
|
||||
|
||||
const ToolButton = ({
|
||||
@@ -29,11 +25,9 @@ const ToolButton = ({
|
||||
title,
|
||||
description,
|
||||
onPress,
|
||||
isDisabled,
|
||||
}: ToolsButtonProps) => {
|
||||
return (
|
||||
<RACButton
|
||||
isDisabled={isDisabled}
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
@@ -45,14 +39,10 @@ const ToolButton = ({
|
||||
width: 'full',
|
||||
backgroundColor: 'gray.50',
|
||||
textAlign: 'start',
|
||||
'&[data-hovered]:not([data-disabled])': {
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'primary.50',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
'&[data-disabled]': {
|
||||
opacity: 0.5,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
})}
|
||||
onPress={onPress}
|
||||
>
|
||||
@@ -142,9 +132,6 @@ export const Tools = () => {
|
||||
break
|
||||
}
|
||||
|
||||
const roomData = useRoomData()
|
||||
const encrypted = isEncryptedRoom(roomData)
|
||||
|
||||
return (
|
||||
<Div
|
||||
display="flex"
|
||||
@@ -179,33 +166,12 @@ export const Tools = () => {
|
||||
</A>
|
||||
)}
|
||||
</Text>
|
||||
{encrypted && (
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
alignItems: 'start',
|
||||
padding: '0.6rem 0.75rem',
|
||||
backgroundColor: '#fffbeb',
|
||||
borderRadius: '0.5rem',
|
||||
border: '1px solid #fde68a',
|
||||
marginBottom: '0.5rem',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
<RiLockLine size={16} color="#d97706" className={css({ flexShrink: 0, marginTop: '0.1rem' })} />
|
||||
<Text variant="note" className={css({ fontSize: '0.8rem', color: '#92400e' })}>
|
||||
{t('encryptedDisabled')}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
{isTranscriptEnabled && (
|
||||
<ToolButton
|
||||
icon={<Icon type="symbols" name="speech_to_text" />}
|
||||
title={t('tools.transcript.title')}
|
||||
description={t('tools.transcript.body')}
|
||||
onPress={() => openTranscript()}
|
||||
isDisabled={encrypted}
|
||||
/>
|
||||
)}
|
||||
{isScreenRecordingEnabled && (
|
||||
@@ -214,7 +180,6 @@ export const Tools = () => {
|
||||
title={t('tools.screenRecording.title')}
|
||||
description={t('tools.screenRecording.body')}
|
||||
onPress={() => openScreenRecording()}
|
||||
isDisabled={encrypted}
|
||||
/>
|
||||
)}
|
||||
</Div>
|
||||
|
||||
@@ -37,6 +37,7 @@ export const ChatToggle = ({
|
||||
aria-label={t(tooltipLabel)}
|
||||
tooltip={t(tooltipLabel)}
|
||||
isSelected={isChatOpen}
|
||||
aria-expanded={isChatOpen}
|
||||
onPress={(e) => {
|
||||
toggleChat()
|
||||
onPress?.(e)
|
||||
|
||||
@@ -27,6 +27,7 @@ export const InfoToggle = ({
|
||||
aria-label={t(tooltipLabel)}
|
||||
tooltip={t(tooltipLabel)}
|
||||
isSelected={isInfoOpen}
|
||||
aria-expanded={isInfoOpen}
|
||||
onPress={(e) => {
|
||||
toggleInfo()
|
||||
onPress?.(e)
|
||||
|
||||
+1
-5
@@ -5,22 +5,18 @@ import { menuRecipe } from '@/primitives/menuRecipe'
|
||||
import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
|
||||
import { RecordingMode, useHasRecordingAccess } from '@/features/recording'
|
||||
import { FeatureFlags } from '@/features/analytics/enums'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom as checkEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
|
||||
export const ScreenRecordingMenuItem = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
|
||||
const { isScreenRecordingOpen, openScreenRecording, toggleTools } =
|
||||
useSidePanel()
|
||||
const roomData = useRoomData()
|
||||
|
||||
const hasScreenRecordingAccess = useHasRecordingAccess(
|
||||
RecordingMode.ScreenRecording,
|
||||
FeatureFlags.ScreenRecording
|
||||
)
|
||||
|
||||
// Recording not available in encrypted rooms
|
||||
if (!hasScreenRecordingAccess || checkEncryptedRoom(roomData)) return null
|
||||
if (!hasScreenRecordingAccess) return null
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
|
||||
+1
-5
@@ -5,21 +5,17 @@ import { menuRecipe } from '@/primitives/menuRecipe'
|
||||
import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
|
||||
import { RecordingMode, useHasRecordingAccess } from '@/features/recording'
|
||||
import { FeatureFlags } from '@/features/analytics/enums'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom as checkEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
|
||||
export const TranscriptMenuItem = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
|
||||
const { isTranscriptOpen, openTranscript, toggleTools } = useSidePanel()
|
||||
const roomData = useRoomData()
|
||||
|
||||
const hasTranscriptAccess = useHasRecordingAccess(
|
||||
RecordingMode.Transcript,
|
||||
FeatureFlags.Transcript
|
||||
)
|
||||
|
||||
// Recording/transcription not available in encrypted rooms
|
||||
if (!hasTranscriptAccess || checkEncryptedRoom(roomData)) return null
|
||||
if (!hasTranscriptAccess) return null
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
|
||||
+23
-125
@@ -21,13 +21,6 @@ import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
|
||||
import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
|
||||
import { ParticipantMenuButton } from '../../ParticipantMenu/ParticipantMenuButton'
|
||||
import { PinBadge } from './PinBadge'
|
||||
import { EncryptionBadge, EncryptionIdentityDialog } from '@/features/encryption'
|
||||
import { useParticipantTrustLevel } from '@/features/encryption/useParticipantTrustLevel'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom as isEncryptedRoomFn } from '@/features/rooms/api/ApiRoom'
|
||||
import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
|
||||
import { useUser } from '@/features/auth'
|
||||
import { TooltipWrapper } from '@/primitives/TooltipWrapper'
|
||||
|
||||
type MicIndicatorProps = {
|
||||
participant: Participant
|
||||
@@ -104,16 +97,7 @@ export const ParticipantListItem = ({
|
||||
participant,
|
||||
}: ParticipantListItemProps) => {
|
||||
const { t } = useTranslation('rooms')
|
||||
const roomData = useRoomData()
|
||||
const isEncryptedRoom = isEncryptedRoomFn(roomData)
|
||||
const isAdmin = useIsAdminOrOwner()
|
||||
const { isLoggedIn } = useUser()
|
||||
const { t: tEncBadge } = useTranslation('rooms', { keyPrefix: 'encryption.badge' })
|
||||
const [isIdentityOpen, setIsFingerprintOpen] = useState(false)
|
||||
const name = participant.name || participant.identity
|
||||
const attrs = participant.attributes as Record<string, string> | undefined
|
||||
const { trustLevel, fingerprintStatus, fingerprint } = useParticipantTrustLevel(attrs, roomData?.encryption_mode, isLocal(participant))
|
||||
const badgeTooltip = tEncBadge(trustLevel)
|
||||
return (
|
||||
<HStack
|
||||
role="listitem"
|
||||
@@ -134,131 +118,45 @@ export const ParticipantListItem = ({
|
||||
<PinBadge participant={participant} />
|
||||
</div>
|
||||
<VStack gap={0} alignItems="start">
|
||||
{isEncryptedRoom ? (
|
||||
<Button
|
||||
variant="greyscale"
|
||||
size="sm"
|
||||
tooltip={badgeTooltip}
|
||||
aria-label={badgeTooltip}
|
||||
onPress={() => setIsFingerprintOpen(true)}
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
userSelect: 'none',
|
||||
cursor: 'default',
|
||||
display: 'flex',
|
||||
})}
|
||||
>
|
||||
<span
|
||||
className={css({
|
||||
padding: '0.1rem 0.25rem !important',
|
||||
minWidth: 'auto !important',
|
||||
height: 'auto !important',
|
||||
gap: '0.15rem !important',
|
||||
borderRadius: '0.25rem !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
color: 'greyscale.900 !important',
|
||||
cursor: isEncryptedRoom ? 'pointer' : 'default',
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'greyscale.100 !important',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<EncryptionBadge
|
||||
isEncrypted={true}
|
||||
trustLevel={trustLevel}
|
||||
/>
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '120px',
|
||||
})}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
{isLocal(participant) && (
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({ whiteSpace: 'nowrap', flexShrink: 0 })}
|
||||
>
|
||||
({t('participants.you')})
|
||||
</Text>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
userSelect: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '150px',
|
||||
maxWidth: '120px',
|
||||
display: 'block',
|
||||
})}
|
||||
>
|
||||
{name}
|
||||
{isLocal(participant) && ` (${t('participants.you')})`}
|
||||
</Text>
|
||||
)}
|
||||
</span>
|
||||
{isLocal(participant) && (
|
||||
<span
|
||||
className={css({
|
||||
marginLeft: '.25rem',
|
||||
whiteSpace: 'nowrap',
|
||||
})}
|
||||
>
|
||||
({t('participants.you')})
|
||||
</span>
|
||||
)}
|
||||
</Text>
|
||||
{getParticipantIsRoomAdmin(participant) && (
|
||||
<Text variant="xsNote">{t('participants.host')}</Text>
|
||||
)}
|
||||
{/* Email is only in JWT for encrypted rooms (backend restriction).
|
||||
Additionally, only show to authenticated users in the UI — anonymous
|
||||
users in encrypted rooms could still extract it from LiveKit signaling
|
||||
but won't see it in the interface. See utils.py for details. */}
|
||||
{isEncryptedRoom && isLoggedIn && (() => {
|
||||
const email = participant.attributes?.is_authenticated === 'true' && participant.attributes?.email
|
||||
? participant.attributes.email
|
||||
: null
|
||||
const label = email || t('participants.anonymous')
|
||||
return (
|
||||
<Button
|
||||
variant="greyscale"
|
||||
size="sm"
|
||||
tooltip={email || undefined}
|
||||
aria-label={label}
|
||||
className={css({
|
||||
padding: '0 !important',
|
||||
minWidth: 'auto !important',
|
||||
height: 'auto !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
color: 'greyscale.500 !important',
|
||||
fontSize: '0.7rem !important',
|
||||
fontWeight: 'normal !important',
|
||||
width: '100%',
|
||||
minW: 0,
|
||||
justifyContent: 'flex-start !important',
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'transparent !important',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<span className={css({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
minWidth: 0,
|
||||
})}>
|
||||
{label}
|
||||
</span>
|
||||
</Button>
|
||||
)
|
||||
})()}
|
||||
</VStack>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<MicIndicator participant={participant} />
|
||||
<ParticipantMenuButton participant={participant} />
|
||||
</HStack>
|
||||
{isEncryptedRoom && (
|
||||
<EncryptionIdentityDialog
|
||||
isOpen={isIdentityOpen}
|
||||
onOpenChange={setIsFingerprintOpen}
|
||||
participantName={name}
|
||||
participantEmail={attrs?.email}
|
||||
suiteUserId={attrs?.suite_user_id}
|
||||
isAuthenticated={attrs?.is_authenticated === 'true'}
|
||||
encryptionMode={roomData?.encryption_mode}
|
||||
isSelf={isLocal(participant)}
|
||||
preloadedFingerprint={fingerprint}
|
||||
preloadedFingerprintStatus={fingerprintStatus}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
)
|
||||
}
|
||||
|
||||
+2
@@ -48,6 +48,7 @@ export const ParticipantsToggle = ({
|
||||
count: announcedCount,
|
||||
})}.`}
|
||||
isSelected={isParticipantsOpen}
|
||||
aria-expanded={isParticipantsOpen}
|
||||
onPress={(e) => {
|
||||
toggleParticipants()
|
||||
onPress?.(e)
|
||||
@@ -76,6 +77,7 @@ export const ParticipantsToggle = ({
|
||||
zIndex: 1,
|
||||
userSelect: 'none',
|
||||
})}
|
||||
aria-hidden={true}
|
||||
>
|
||||
{numParticipants < 100 ? (
|
||||
numParticipants || 1
|
||||
|
||||
+26
-141
@@ -1,15 +1,10 @@
|
||||
import { Button, Text } from '@/primitives'
|
||||
import { HStack, VStack } from '@/styled-system/jsx'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Avatar } from '@/components/Avatar'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
|
||||
import { isEncryptedRoom } from '@/features/rooms/api/ApiRoom'
|
||||
import { EncryptionBadge, EncryptionIdentityDialog } from '@/features/encryption'
|
||||
import { useParticipantTrustLevel, formatFingerprint } from '@/features/encryption/useParticipantTrustLevel'
|
||||
import { useState } from 'react'
|
||||
|
||||
export const WaitingParticipantListItem = ({
|
||||
participant,
|
||||
@@ -19,17 +14,6 @@ export const WaitingParticipantListItem = ({
|
||||
onAction: (participant: WaitingParticipant, allowEntry: boolean) => void
|
||||
}) => {
|
||||
const { t } = useTranslation('rooms')
|
||||
const roomData = useRoomData()
|
||||
const encryptedRoom = isEncryptedRoom(roomData)
|
||||
const { t: tBadge } = useTranslation('rooms', { keyPrefix: 'encryption.badge' })
|
||||
const [isIdentityOpen, setIsDialogOpen] = useState(false)
|
||||
// Build attributes-like object for the hook (waiting participants aren't in LiveKit yet)
|
||||
const waitingAttrs = {
|
||||
is_authenticated: participant.is_authenticated ? 'true' : 'false',
|
||||
suite_user_id: participant.suite_user_id || '',
|
||||
}
|
||||
const { trustLevel, fingerprintStatus, fingerprint } = useParticipantTrustLevel(waitingAttrs, roomData?.encryption_mode)
|
||||
const badgeTooltip = encryptedRoom ? tBadge(trustLevel) : undefined
|
||||
|
||||
return (
|
||||
<HStack
|
||||
@@ -46,123 +30,37 @@ export const WaitingParticipantListItem = ({
|
||||
className={css({
|
||||
flex: '1',
|
||||
minWidth: '0',
|
||||
gap: '0.35rem',
|
||||
})}
|
||||
>
|
||||
<Avatar name={participant.username} bgColor={participant.color} />
|
||||
<VStack gap={0} alignItems="start" className={css({ flex: 1, minWidth: 0 })}>
|
||||
{encryptedRoom ? (
|
||||
<Button
|
||||
variant="greyscale"
|
||||
size="sm"
|
||||
tooltip={badgeTooltip}
|
||||
aria-label={badgeTooltip}
|
||||
onPress={() => setIsDialogOpen(true)}
|
||||
className={css({
|
||||
padding: '0.1rem 0.25rem !important',
|
||||
minWidth: 'auto !important',
|
||||
height: 'auto !important',
|
||||
gap: '0.15rem !important',
|
||||
borderRadius: '0.25rem !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
color: 'greyscale.900 !important',
|
||||
cursor: 'pointer',
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'greyscale.100 !important',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<EncryptionBadge
|
||||
isEncrypted={true}
|
||||
trustLevel={trustLevel}
|
||||
/>
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
minWidth: 0,
|
||||
})}
|
||||
>
|
||||
{participant.username}
|
||||
</Text>
|
||||
</Button>
|
||||
) : (
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
userSelect: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
padding: '0.1rem 0.25rem',
|
||||
})}
|
||||
>
|
||||
{participant.username}
|
||||
</Text>
|
||||
)}
|
||||
{encryptedRoom && fingerprint && (
|
||||
<Text
|
||||
variant="sm"
|
||||
className={css({
|
||||
fontSize: '0.6rem',
|
||||
fontFamily: 'monospace',
|
||||
color: 'greyscale.400',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
paddingLeft: '0.25rem',
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
})}
|
||||
>
|
||||
{formatFingerprint(fingerprint)}
|
||||
</Text>
|
||||
)}
|
||||
{encryptedRoom && (() => {
|
||||
const email = participant.is_authenticated && participant.email
|
||||
? participant.email
|
||||
: null
|
||||
const label = email || t('participants.anonymous')
|
||||
return (
|
||||
<Button
|
||||
variant="greyscale"
|
||||
size="sm"
|
||||
tooltip={email || undefined}
|
||||
aria-label={label}
|
||||
className={css({
|
||||
padding: '0 0.25rem !important',
|
||||
minWidth: 'auto !important',
|
||||
height: 'auto !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
color: 'greyscale.500 !important',
|
||||
fontSize: '0.7rem !important',
|
||||
fontWeight: 'normal !important',
|
||||
width: '100%',
|
||||
minW: 0,
|
||||
justifyContent: 'flex-start !important',
|
||||
'&[data-hovered]': {
|
||||
backgroundColor: 'transparent !important',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<span className={css({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
minWidth: 0,
|
||||
})}>
|
||||
{label}
|
||||
</span>
|
||||
</Button>
|
||||
)
|
||||
})()}
|
||||
</VStack>
|
||||
<Text
|
||||
variant={'sm'}
|
||||
className={css({
|
||||
userSelect: 'none',
|
||||
cursor: 'default',
|
||||
display: 'flex',
|
||||
flex: '1',
|
||||
minWidth: '0',
|
||||
})}
|
||||
>
|
||||
<span
|
||||
className={css({
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
width: '100%',
|
||||
display: 'block',
|
||||
})}
|
||||
>
|
||||
{participant.username}
|
||||
</span>
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack
|
||||
gap="0.25rem"
|
||||
className={css({ flexShrink: '0' })}
|
||||
className={css({
|
||||
flexShrink: '0',
|
||||
})}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -185,19 +83,6 @@ export const WaitingParticipantListItem = ({
|
||||
<RiCloseLine />
|
||||
</Button>
|
||||
</HStack>
|
||||
{encryptedRoom && (
|
||||
<EncryptionIdentityDialog
|
||||
isOpen={isIdentityOpen}
|
||||
onOpenChange={setIsDialogOpen}
|
||||
participantName={participant.username}
|
||||
participantEmail={participant.email}
|
||||
suiteUserId={participant.suite_user_id}
|
||||
isAuthenticated={participant.is_authenticated}
|
||||
encryptionMode={roomData?.encryption_mode}
|
||||
preloadedFingerprint={fingerprint}
|
||||
preloadedFingerprintStatus={fingerprintStatus}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,161 +0,0 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiEmotionLine } from '@remixicon/react'
|
||||
import { useState, useRef } from 'react'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { useRoomContext } from '@livekit/components-react'
|
||||
import { ToggleButton, Button } from '@/primitives'
|
||||
import { NotificationType } from '@/features/notifications/NotificationType'
|
||||
import { NotificationPayload } from '@/features/notifications/NotificationPayload'
|
||||
import {
|
||||
ANIMATION_DURATION,
|
||||
ReactionPortals,
|
||||
} from '@/features/rooms/livekit/components/ReactionPortal'
|
||||
import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
|
||||
import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
|
||||
import {
|
||||
Popover as RACPopover,
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
} from 'react-aria-components'
|
||||
import { FocusScope } from '@react-aria/focus'
|
||||
import { Participant } from 'livekit-client'
|
||||
import useRateLimiter from '@/hooks/useRateLimiter'
|
||||
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export enum Emoji {
|
||||
THUMBS_UP = 'thumbs-up',
|
||||
THUMBS_DOWN = 'thumbs-down',
|
||||
CLAP = 'clapping-hands',
|
||||
HEART = 'red-heart',
|
||||
LAUGHING = 'face-with-tears-of-joy',
|
||||
SURPRISED = 'face-with-open-mouth',
|
||||
CELEBRATION = 'party-popper',
|
||||
PLEASE = 'folded-hands',
|
||||
}
|
||||
|
||||
export interface Reaction {
|
||||
id: number
|
||||
emoji: string
|
||||
participant: Participant
|
||||
}
|
||||
|
||||
export const ReactionsToggle = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
|
||||
const [reactions, setReactions] = useState<Reaction[]>([])
|
||||
const instanceIdRef = useRef(0)
|
||||
const room = useRoomContext()
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
useRegisterKeyboardShortcut({
|
||||
id: 'reaction',
|
||||
handler: () => setIsOpen((prev) => !prev),
|
||||
})
|
||||
|
||||
const sendReaction = async (emoji: string) => {
|
||||
const encoder = new TextEncoder()
|
||||
const payload: NotificationPayload = {
|
||||
type: NotificationType.ReactionReceived,
|
||||
data: {
|
||||
emoji: emoji,
|
||||
},
|
||||
}
|
||||
const data = encoder.encode(JSON.stringify(payload))
|
||||
await room.localParticipant.publishData(data, { reliable: true })
|
||||
|
||||
const newReaction = {
|
||||
id: instanceIdRef.current++,
|
||||
emoji,
|
||||
participant: room.localParticipant,
|
||||
}
|
||||
setReactions((prev) => [...prev, newReaction])
|
||||
|
||||
// Remove this reaction after animation
|
||||
setTimeout(() => {
|
||||
setReactions((prev) =>
|
||||
prev.filter((instance) => instance.id !== newReaction.id)
|
||||
)
|
||||
}, ANIMATION_DURATION)
|
||||
}
|
||||
|
||||
const debouncedSendReaction = useRateLimiter({
|
||||
callback: sendReaction,
|
||||
maxCalls: 10,
|
||||
windowMs: 1000,
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={css({ position: 'relative' })}>
|
||||
<DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
|
||||
<ToggleButton
|
||||
square
|
||||
variant="primaryDark"
|
||||
aria-label={t('button')}
|
||||
tooltip={t('button')}
|
||||
isSelected={isOpen}
|
||||
onChange={setIsOpen}
|
||||
>
|
||||
<RiEmotionLine />
|
||||
</ToggleButton>
|
||||
<RACPopover
|
||||
placement="top"
|
||||
offset={8}
|
||||
isNonModal
|
||||
shouldCloseOnInteractOutside={() => false}
|
||||
className={css({
|
||||
borderRadius: '8px',
|
||||
padding: '0.35rem',
|
||||
backgroundColor: 'primaryDark.50',
|
||||
'&[data-entering]': {
|
||||
animation: 'fade 200ms ease',
|
||||
},
|
||||
'&[data-exiting]': {
|
||||
animation: 'fade 200ms ease-in reverse',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Dialog className={css({ outline: 'none' })}>
|
||||
{/* eslint-disable-next-line jsx-a11y/no-autofocus -- FocusScope autoFocus is programmatic focus for overlays, not the HTML autofocus attribute */}
|
||||
<FocusScope contain autoFocus restoreFocus>
|
||||
<div
|
||||
role="toolbar"
|
||||
aria-orientation="horizontal"
|
||||
aria-label={t('button')}
|
||||
className={css({
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
})}
|
||||
>
|
||||
{Object.values(Emoji).map((emoji, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onPress={() => debouncedSendReaction(emoji)}
|
||||
aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
|
||||
variant="primaryTextDark"
|
||||
size="sm"
|
||||
square
|
||||
data-attr={`send-reaction-${emoji}`}
|
||||
>
|
||||
<img
|
||||
src={`/assets/reactions/${emoji}.png`}
|
||||
alt=""
|
||||
className={css({
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
})}
|
||||
/>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</FocusScope>
|
||||
</Dialog>
|
||||
</RACPopover>
|
||||
</DialogTrigger>
|
||||
</div>
|
||||
<ReactionPortals reactions={reactions} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -34,6 +34,7 @@ export const ToolsToggle = ({
|
||||
aria-label={t(tooltipLabel)}
|
||||
tooltip={t(tooltipLabel)}
|
||||
isSelected={isToolsOpen}
|
||||
aria-expanded={isToolsOpen}
|
||||
onPress={(e) => {
|
||||
toggleTools()
|
||||
onPress?.(e)
|
||||
|
||||
@@ -7,7 +7,7 @@ import { getRouteUrl } from '@/navigation/getRouteUrl'
|
||||
|
||||
const COPY_SUCCESS_TIMEOUT = 3000
|
||||
|
||||
export const useCopyRoomToClipboard = (room: ApiRoom | undefined, hashOverride?: string) => {
|
||||
export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
|
||||
const telephony = useTelephony()
|
||||
const { t } = useTranslation('global', { keyPrefix: 'clipboardContent' })
|
||||
|
||||
@@ -32,12 +32,8 @@ export const useCopyRoomToClipboard = (room: ApiRoom | undefined, hashOverride?:
|
||||
}, [isRoomUrlCopied])
|
||||
|
||||
const roomUrl = useMemo(() => {
|
||||
if (!room?.slug) return ''
|
||||
const base = getRouteUrl('room', room.slug)
|
||||
// In basic encrypted mode, the passphrase is in the URL hash
|
||||
const hash = hashOverride ? `#${hashOverride}` : window.location.hash
|
||||
return hash ? `${base}${hash}` : base
|
||||
}, [room?.slug, hashOverride])
|
||||
return room?.slug ? getRouteUrl('room', room.slug) : ''
|
||||
}, [room?.slug])
|
||||
|
||||
const hasTelephonyInfo = useMemo(() => {
|
||||
return telephony.enabled && room?.pin_code
|
||||
|
||||
@@ -4,6 +4,8 @@ import * as React from 'react'
|
||||
import { MobileControlBar } from './MobileControlBar'
|
||||
import { DesktopControlBar } from './DesktopControlBar'
|
||||
import { useIsMobile } from '@/utils/useIsMobile'
|
||||
import { ReactionsToolbar } from '@/features/reactions/components/toolbar/ReactionsToolbar'
|
||||
import { css } from '@/styled-system/css'
|
||||
|
||||
export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
onDeviceError?: (error: { source: Track.Source; error: Error }) => void
|
||||
@@ -16,10 +18,32 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
export function ControlBar({ onDeviceError }: ControlBarProps) {
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
if (isMobile) {
|
||||
return <MobileControlBar onDeviceError={onDeviceError} />
|
||||
}
|
||||
return <DesktopControlBar onDeviceError={onDeviceError} />
|
||||
return (
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
})}
|
||||
>
|
||||
<ReactionsToolbar />
|
||||
<div
|
||||
id="control-bar"
|
||||
className={css({
|
||||
zIndex: 100,
|
||||
})}
|
||||
>
|
||||
{isMobile ? (
|
||||
<MobileControlBar onDeviceError={onDeviceError} />
|
||||
) : (
|
||||
<DesktopControlBar onDeviceError={onDeviceError} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export type ControlBarAuxProps = Pick<ControlBarProps, 'onDeviceError'>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { ControlBarAuxProps } from './ControlBar'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { LeaveButton } from '../../components/controls/LeaveButton'
|
||||
import { Track } from 'livekit-client'
|
||||
import { ReactionsToggle } from '../../components/controls/ReactionsToggle'
|
||||
import { HandToggle } from '../../components/controls/HandToggle'
|
||||
import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
|
||||
import { SubtitlesToggle } from '../../components/controls/SubtitlesToggle'
|
||||
@@ -15,6 +14,8 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
|
||||
import { useFullScreen } from '../../hooks/useFullScreen'
|
||||
import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
|
||||
import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
|
||||
import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
|
||||
import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
|
||||
|
||||
export function DesktopControlBar({
|
||||
onDeviceError,
|
||||
@@ -48,11 +49,7 @@ export function DesktopControlBar({
|
||||
className={css({
|
||||
width: '100vw',
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
padding: '1.125rem',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
@@ -65,15 +62,7 @@ export function DesktopControlBar({
|
||||
marginLeft: '0.5rem',
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={css({
|
||||
flex: '1 1 33%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
gap: '0.65rem',
|
||||
})}
|
||||
>
|
||||
<ControlBarRegion>
|
||||
<AudioDevicesControl
|
||||
onDeviceError={(error) =>
|
||||
onDeviceError?.({ source: Track.Source.Microphone, error })
|
||||
@@ -97,7 +86,7 @@ export function DesktopControlBar({
|
||||
<OptionsButton />
|
||||
<LeaveButton />
|
||||
<StartMediaButton />
|
||||
</div>
|
||||
</ControlBarRegion>
|
||||
<MoreOptions parentElement={desktopControlBarEl} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -25,6 +25,7 @@ import { useConfig } from '@/api/useConfig'
|
||||
import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
|
||||
import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
|
||||
import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
|
||||
import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
|
||||
|
||||
export function MobileControlBar({
|
||||
onDeviceError,
|
||||
@@ -43,21 +44,11 @@ export function MobileControlBar({
|
||||
className={css({
|
||||
width: '100vw',
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
padding: '1.125rem',
|
||||
justifyContent: 'center',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '330px',
|
||||
})}
|
||||
>
|
||||
<ControlBarRegion mobile>
|
||||
<LeaveButton />
|
||||
<AudioDevicesControl
|
||||
onDeviceError={(error) =>
|
||||
@@ -82,7 +73,7 @@ export function MobileControlBar({
|
||||
>
|
||||
<RiMore2Line />
|
||||
</Button>
|
||||
</div>
|
||||
</ControlBarRegion>
|
||||
</div>
|
||||
<ResponsiveMenu
|
||||
isOpened={isMenuOpened}
|
||||
|
||||
@@ -73,7 +73,7 @@ export const MoreOptions = ({
|
||||
}) => {
|
||||
const { width: parentWidth } = useSize(parentElement)
|
||||
return (
|
||||
<div
|
||||
<nav
|
||||
className={css({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
@@ -88,6 +88,6 @@ export const MoreOptions = ({
|
||||
) : (
|
||||
<LateralMenu />
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -20,13 +20,9 @@ import {
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { ControlBar } from './ControlBar/ControlBar'
|
||||
import { styled } from '@/styled-system/jsx'
|
||||
import { cva } from '@/styled-system/css'
|
||||
import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
|
||||
import { FocusLayout } from '../components/FocusLayout'
|
||||
import { ParticipantTile } from '../components/ParticipantTile'
|
||||
import { SidePanel } from '../components/SidePanel'
|
||||
import { useSidePanel } from '../hooks/useSidePanel'
|
||||
import { RecordingProvider } from '@/features/recording'
|
||||
import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
|
||||
import { useConnectionObserver } from '../hooks/useConnectionObserver'
|
||||
@@ -37,36 +33,13 @@ import { useSettingsDialog } from '@/features/settings'
|
||||
import { SettingsDialogExtendedKey } from '@/features/settings/type'
|
||||
import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
|
||||
import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
|
||||
import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles'
|
||||
import { Subtitles } from '@/features/subtitle/component/Subtitles'
|
||||
import { CarouselLayout } from '../components/layout/CarouselLayout'
|
||||
import { GridLayout } from '../components/layout/GridLayout'
|
||||
import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
|
||||
import { EncryptedMeetingBanner } from '@/features/encryption/EncryptedMeetingBanner'
|
||||
import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
|
||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||
|
||||
const LayoutWrapper = styled(
|
||||
'div',
|
||||
cva({
|
||||
base: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
transition: 'height .5s cubic-bezier(0.4,0,0.2,1) 5ms',
|
||||
},
|
||||
variants: {
|
||||
areSubtitlesOpen: {
|
||||
true: {
|
||||
height: 'calc(100% - 12rem)',
|
||||
},
|
||||
false: {
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
)
|
||||
import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
|
||||
import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
|
||||
import { GridLayout } from '@/features/layout/components/GridLayout'
|
||||
import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
|
||||
|
||||
/**
|
||||
* @public
|
||||
@@ -254,9 +227,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
|
||||
])
|
||||
/* eslint-enable react-hooks/exhaustive-deps */
|
||||
|
||||
const { isSidePanelOpen } = useSidePanel()
|
||||
const { areSubtitlesOpen } = useSubtitles()
|
||||
|
||||
const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
|
||||
|
||||
return (
|
||||
@@ -277,58 +247,35 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
|
||||
onClose={() => setIsShareErrorVisible(false)}
|
||||
/>
|
||||
<IsIdleDisconnectModal />
|
||||
<EncryptedMeetingBanner />
|
||||
<div
|
||||
// todo - extract these magic values into constant
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: isSidePanelOpen
|
||||
? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
|
||||
: `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
|
||||
transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
|
||||
maxHeight: '100%',
|
||||
}}
|
||||
>
|
||||
<LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
|
||||
<RoomContentArea>
|
||||
{!focusTrack ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
className="lk-grid-layout-wrapper"
|
||||
style={{ height: 'auto' }}
|
||||
>
|
||||
{!focusTrack ? (
|
||||
<div
|
||||
className="lk-grid-layout-wrapper"
|
||||
style={{ height: 'auto' }}
|
||||
>
|
||||
<GridLayout tracks={tracks} style={{ padding: 0 }}>
|
||||
<ParticipantTile />
|
||||
</GridLayout>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="lk-focus-layout-wrapper"
|
||||
style={{ height: 'auto' }}
|
||||
>
|
||||
<FocusLayoutContainer style={{ padding: 0 }}>
|
||||
<CarouselLayout
|
||||
tracks={carouselTracks}
|
||||
style={{
|
||||
minWidth: '200px',
|
||||
}}
|
||||
>
|
||||
<ParticipantTile />
|
||||
</CarouselLayout>
|
||||
{focusTrack && <FocusLayout trackRef={focusTrack} />}
|
||||
</FocusLayoutContainer>
|
||||
</div>
|
||||
)}
|
||||
<GridLayout tracks={tracks} style={{ padding: 0 }}>
|
||||
<ParticipantTile />
|
||||
</GridLayout>
|
||||
</div>
|
||||
</LayoutWrapper>
|
||||
<Subtitles />
|
||||
<MainNotificationToast />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="lk-focus-layout-wrapper"
|
||||
style={{ height: 'auto' }}
|
||||
>
|
||||
<FocusLayoutContainer style={{ padding: 0 }}>
|
||||
<CarouselLayout
|
||||
tracks={carouselTracks}
|
||||
style={{
|
||||
minWidth: '200px',
|
||||
}}
|
||||
>
|
||||
<ParticipantTile />
|
||||
</CarouselLayout>
|
||||
{focusTrack && <FocusLayout trackRef={focusTrack} />}
|
||||
</FocusLayoutContainer>
|
||||
</div>
|
||||
)}
|
||||
</RoomContentArea>
|
||||
<ControlBar
|
||||
onDeviceError={(e) => {
|
||||
console.error(e)
|
||||
@@ -348,6 +295,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
|
||||
<ConnectionStateToast />
|
||||
<RecordingProvider />
|
||||
<SettingsDialogProvider />
|
||||
<ReactionPortals />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user