♻️(tilt) use hem dev-backend chart

Use the helm dev-backend chart to share the backend across all projects
🔥(backend) remove demo data generation from tilt migration job
2026-07-27 04:09:26 +00:00 · 2025-09-02 16:53:34 +02:00 · 2025-08-25 17:23:58 +02:00 · 2025-08-25 17:23:58 +02:00 · 2025-08-25 17:23:58 +02:00 · 2025-08-24 23:39:41 +02:00
176 changed files with 7907 additions and 4214 deletions
@@ -1,35 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    tags:
-      - 'preprod'
-      - 'production'
-
-
-jobs:
-  notify-argocd:
-    runs-on: ubuntu-latest
-    steps:
-      -
-        name: Checkout repository
-        uses: actions/checkout@v4
-      -
-        name: Call argocd github webhook
-        run: |
-          data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_WEBHOOK_SECRET }}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_WEBHOOK_URL }}
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_PRODUCTION_WEBHOOK_SECRET }}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ secrets.ARGOCD_PRODUCTION_WEBHOOK_URL }}
-
-  start-test-on-preprod:
-    needs:
-      - notify-argocd
-    runs-on: ubuntu-latest
-    if: startsWith(github.event.ref, 'refs/tags/preprod')
-    steps:
-      -
-        name: Debug
-        run: |
-          echo "Start test when preprod is ready"
@@ -82,6 +82,7 @@ jobs:
        uses: actions/setup-python@v5
        with:
          python-version: "3.13"
+          cache: "pip"
      - name: Install development dependencies
        run: pip install --user .[dev]
      - name: Check code formatting with ruff
@@ -186,6 +187,7 @@ jobs:
        uses: actions/setup-python@v5
        with:
          python-version: "3.13"
+          cache: "pip"

      - name: Install development dependencies
        run: pip install --user .[dev]
@@ -33,9 +33,9 @@ Powered by [LiveKit](https://livekit.io/), La Suite Meet offers Zoom-level perfo
 - Support for multiple screen sharing streams
 - Non-persistent, secure chat
 - End-to-end encryption (coming soon)
- Meeting recording (coming soon)
+- Meeting recording
 - Meeting transcription (currently in beta)
- Telephony integration (in development)
+- Telephony integration
 - Secure participation with robust authentication and access control
 - LiveKit Advances features including :
  - speaker detection 
@@ -111,6 +111,7 @@ Come help us make La Suite Meet even better. We're growing fast and [would love
 ## 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.

 ## License

@@ -85,6 +85,14 @@ clean_old_images('localhost:5001/meet-livekit')

 k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))

+k8s_resource('meet-backend', resource_deps=['dev-backend-redis', 'dev-backend-keycloak', 'dev-backend-postgres', 'livekit-livekit-server', 'dev-backend-minio:statefulset'])
+k8s_resource('meet-backend-migrate', resource_deps=['dev-backend-postgres'])
+k8s_resource('livekit-livekit-server', resource_deps=['dev-backend-redis'])
+k8s_resource('livekit-livekit-server-test-connection', resource_deps=['livekit-livekit-server'])
+k8s_resource('meet-backend-createsuperuser', resource_deps=['meet-backend-migrate'])
+k8s_resource('dev-backend-keycloak', resource_deps=['dev-backend-keycloak-pg'])
+k8s_resource('livekit-egress', resource_deps=['livekit-livekit-server'])
+
 migration = '''
 set -eu
 # get k8s pod name from tilt resource name
@@ -11,15 +11,21 @@ RUN npm ci
 COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/ .

-### ---- Front-end builder image ----
+# ---- Front-end builder image ----
 FROM frontend-deps AS meet-builder

 WORKDIR /home/frontend

 ENV VITE_APP_TITLE="Visio"
+ENV VITE_BUILD_SOURCEMAP="true"

 RUN npm run build

+# Inject PostHog sourcemap metadata into the built assets
+# This metadata is essential for correctly mapping errors to source maps in production
+RUN set -e && \
+    npx @posthog/cli sourcemap inject --directory ./dist/assets
+
 COPY ./docker/dinum-frontend/dinum-styles.css \
    ./dist/assets/

@@ -35,9 +35,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    LIVEKIT_API_SECRET: secret
@@ -1,6 +1,6 @@
 # Installation on a k8s cluster

-This document is a step-by-step guide that describes how to install Visio on a k8s cluster without AI features.
+This document is a step-by-step guide that describes how to install LaSuite Meet on a k8s cluster without AI features.

 ## Prerequisites for a kubernetes setup

@@ -114,7 +114,7 @@ Please remember that \*.127.0.0.1.nip.io will always resolve to 127.0.0.1, excep

 ### What will you use to authenticate your users ?

-Visio uses OIDC, so if you already have an OIDC provider, obtain the necessary information to use it. In the next step, we will see how to configure Django (and thus Visio) to use it. If you do not have a provider, we will show you how to deploy a local Keycloak instance (this is not a production deployment, just a demo).
+LaSuite Meet uses OIDC, so if you already have an OIDC provider, obtain the necessary information to use it. In the next step, we will see how to configure Django (and thus LaSuite Meet) to use it. If you do not have a provider, we will show you how to deploy a local Keycloak instance (this is not a production deployment, just a demo).

 If you haven't run the script **bin/start-kind.sh**, you'll need to manually create the namespace by running the following command:

@@ -134,6 +134,8 @@ keycloak-0              1/1     Running   0          6m48s
 keycloak-postgresql-0   1/1     Running   0          6m48s
 ```

+In your OIDC provider, set LaSuite Meet's redirect URI to `https://.../api/v1.0/callback/` where `...` should be replaced with the domain name LaSuite Meet is hosted on.
+
 From here the important information you will need are :

 ```
@@ -152,7 +154,7 @@ You can find these values in **examples/keycloak.values.yaml**

 ### Find livekit server connexion values

-Visio use livekit for streaming part so if you have a livekit provider, obtain the necessary information to use it. If you do not have a provider, you can install a livekit testing environment as follows:
+LaSuite Meet use livekit for streaming part so if you have a livekit provider, obtain the necessary information to use it. If you do not have a provider, you can install a livekit testing environment as follows:

 Livekit need a redis (and meet too) so we will start by deploying a redis :

@@ -194,7 +196,7 @@ CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1

 ### Find postgresql connexion values

-Visio uses a postgresql db as backend so if you have a provider, obtain the necessary information to use it. If you do not have, you can install a postgresql testing environment as follows:
+LaSuite Meet uses a postgresql db as backend so if you have a provider, obtain the necessary information to use it. If you do not have, you can install a postgresql testing environment as follows:

 ```
 $ helm install postgresql oci://registry-1.docker.io/bitnamicharts/postgresql -f examples/postgresql.values.yaml
@@ -215,14 +217,11 @@ DB_NAME: meet
 DB_USER: dinum
 DB_PASSWORD: pass
 DB_PORT: 5432
-POSTGRES_DB: meet
-POSTGRES_USER: dinum
-POSTGRES_PASSWORD: pass
 ```

 ## Deployment

-Now you are ready to deploy Visio without AI. AI required more dependencies (Openai-compliant API, LiveKit Egress, Cold storage and a docs deployment to push resumes). To deploy meet you need to provide all previous information to the helm chart.
+Now you are ready to deploy LaSuite Meet without AI. AI required more dependencies (Openai-compliant API, LiveKit Egress, Cold storage and a docs deployment to push resumes). To deploy meet you need to provide all previous information to the helm chart.

 ```
 $ helm repo add meet https://suitenumerique.github.io/meet/
@@ -243,123 +242,129 @@ meet                     <none>   meet.127.0.0.1.nip.io       localhost   80, 44
 meet-admin               <none>   meet.127.0.0.1.nip.io       localhost   80, 443   52m
 ```

-You can use Visio on https://meet.127.0.0.1.nip.io from the local device. The provisioning user in keycloak is meet/meet.
+You can use LaSuite Meet on https://meet.127.0.0.1.nip.io from the local device. The provisioning user in keycloak is meet/meet.

 ## All options

 These are the environmental options available on meet backend.

-| Option                                          | Description                                                                                                                                                | default                                                                                                                                                       |
-| ----------------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| DATA_DIR                                        | Data directory location                                                                                                                                    | /data                                                                                                                                                         |
-| DJANGO_ALLOWED_HOSTS                            | Hosts that are allowed                                                                                                                                     | []                                                                                                                                                            |
-| DJANGO_SECRET_KEY                               | Secret key used for Django security                                                                                                                        |                                                                                                                                                               |
-| DJANGO_SILENCED_SYSTEM_CHECKS                   | Silence Django system checks                                                                                                                               | []                                                                                                                                                            |
-| DJANGO_ALLOW_UNSECURE_USER_LISTING              | Allow unsecure user listing                                                                                                                                | false                                                                                                                                                         |
-| DB_ENGINE                                       | Database engine used                                                                                                                                       | django.db.backends.postgresql_psycopg2                                                                                                                        |
-| DB_NAME                                         | Name of the database                                                                                                                                       | meet                                                                                                                                                          |
-| DB_USER                                         | User used to connect to database                                                                                                                           | dinum                                                                                                                                                         |
-| DB_PASSWORD                                     | Password used to connect to the database                                                                                                                   | pass                                                                                                                                                          |
-| DB_HOST                                         | Hostname of the database                                                                                                                                   | localhost                                                                                                                                                     |
-| DB_PORT                                         | Port to connect to database                                                                                                                                | 5432                                                                                                                                                          |
-| STORAGES_STATICFILES_BACKEND                    | Static file serving engine                                                                                                                                 | whitenoise.storage.CompressedManifestStaticFilesStorage                                                                                                       |
-| AWS_S3_ENDPOINT_URL                             | S3 host endpoint                                                                                                                                           |                                                                                                                                                               |
-| AWS_S3_ACCESS_KEY_ID                            | S3 access key                                                                                                                                              |                                                                                                                                                               |
-| AWS_S3_SECRET_ACCESS_KEY                        | S3 secret key                                                                                                                                              |                                                                                                                                                               |
-| AWS_S3_REGION_NAME                              | S3 region                                                                                                                                                  |                                                                                                                                                               |
-| AWS_STORAGE_BUCKET_NAME                         | S3 bucket name                                                                                                                                             | meet-media-storage                                                                                                                                            |
-| DJANGO_LANGUAGE_CODE                            | Default language                                                                                                                                           | en-us                                                                                                                                                         |
-| REDIS_URL                                       | Redis endpoint                                                                                                                                             | redis://redis:6379/1                                                                                                                                          |
-| SESSION_COOKIE_AGE                              | Session cookie expiration in seconds                                                                                                                       | 43200 (12 hours)                                                                                                                                              |
-| REQUEST_ENTRY_THROTTLE_RATES                    | Entry request throttle rates                                                                                                                               | 150/minute                                                                                                                                                    |
-| CREATION_CALLBACK_THROTTLE_RATES                | Creation callback throttle rates                                                                                                                           | 600/minute                                                                                                                                                    |
-| SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | Enable Django deploy check                                                                                                                                 | false                                                                                                                                                         |
-| CSRF_TRUSTED_ORIGINS                            | CSRF trusted origins list                                                                                                                                  | []                                                                                                                                                            |
-| FRONTEND_CUSTOM_CSS_URL                         | URL of an additional CSS file to load in the frontend app. If set, a `<link>` tag with this URL as href is added to the `<head>` of the frontend app       |                                                                                                                                                               |
-| FRONTEND_ANALYTICS                              | Analytics information                                                                                                                                      | {}                                                                                                                                                            |
-| FRONTEND_SUPPORT                                | Crisp frontend support configuration, also you can pass help articles, with `help_article_transcript`, `help_article_recording`, `help_article_more_tools` | {}                                                                                                                                                            |
-| FRONTEND_TRANSCRIPT                             | Frontend transcription configuration, you can pass a beta form, with `form_beta_users`                                                                     | {}                                                                                                                                                            |
-| FRONTEND_MANIFEST_LINK                          | Link to the "Learn more" button on the homepage                                                                                                            | {}                                                                                                                                                            |
-| FRONTEND_SILENCE_LIVEKIT_DEBUG                  | Silence LiveKit debug logs                                                                                                                                 | false                                                                                                                                                         |
-| FRONTEND_IS_SILENT_LOGIN_ENABLED                | Enable silent login feature                                                                                                                                | true                                                                                                                                                          |
-| FRONTEND_FEEDBACK                               | Frontend feedback configuration                                                                                                                            | {}                                                                                                                                                            |
-| FRONTEND_USE_FRENCH_GOV_FOOTER                  | Show the French government footer in the homepage                                                                                                          | false                                                                                                                                                         |
-| FRONTEND_USE_PROCONNECT_BUTTON                  | Show a "Login with ProConnect" button in the homepage instead of a "Login" button                                                                          | false                                                                                                                                                         |
-| DJANGO_EMAIL_BACKEND                            | Email backend library                                                                                                                                      | django.core.mail.backends.smtp.EmailBackend                                                                                                                   |
-| DJANGO_EMAIL_HOST                               | Host of the email server                                                                                                                                   |                                                                                                                                                               |
-| DJANGO_EMAIL_HOST_USER                          | User to connect to the email server                                                                                                                        |                                                                                                                                                               |
-| DJANGO_EMAIL_HOST_PASSWORD                      | Password to connect to the email server                                                                                                                    |                                                                                                                                                               |
-| DJANGO_EMAIL_PORT                               | Port to connect to the email server                                                                                                                        |                                                                                                                                                               |
-| DJANGO_EMAIL_USE_TLS                            | Enable TLS on email connection                                                                                                                             | false                                                                                                                                                         |
-| DJANGO_EMAIL_USE_SSL                            | Enable SSL on email connection                                                                                                                             | false                                                                                                                                                         |
-| DJANGO_EMAIL_FROM                               | Email from account                                                                                                                                         | from@example.com                                                                                                                                              |
-| EMAIL_BRAND_NAME                                | Email branding name                                                                                                                                        |                                                                                                                                                               |
-| EMAIL_SUPPORT_EMAIL                             | Support email address                                                                                                                                      |                                                                                                                                                               |
-| EMAIL_LOGO_IMG                                  | Email logo image                                                                                                                                           |                                                                                                                                                               |
-| EMAIL_DOMAIN                                    | Email domain                                                                                                                                               |                                                                                                                                                               |
-| EMAIL_APP_BASE_URL                              | Email app base URL                                                                                                                                         |                                                                                                                                                               |
-| DJANGO_CORS_ALLOW_ALL_ORIGINS                   | Allow all CORS origins                                                                                                                                     | false                                                                                                                                                         |
-| DJANGO_CORS_ALLOWED_ORIGINS                     | Origins to allow (string list)                                                                                                                             | []                                                                                                                                                            |
-| DJANGO_CORS_ALLOWED_ORIGIN_REGEXES              | Origins to allow (regex patterns)                                                                                                                          | []                                                                                                                                                            |
-| SENTRY_DSN                                      | Sentry server DSN                                                                                                                                          |                                                                                                                                                               |
-| DJANGO_CELERY_BROKER_URL                        | Celery broker host                                                                                                                                         | redis://redis:6379/0                                                                                                                                          |
-| DJANGO_CELERY_BROKER_TRANSPORT_OPTIONS          | Celery broker options                                                                                                                                      | {}                                                                                                                                                            |
-| OIDC_CREATE_USER                                | Create OIDC user if not exists                                                                                                                             | true                                                                                                                                                          |
-| OIDC_VERIFY_SSL                                 | Verify SSL for OIDC                                                                                                                                        | true                                                                                                                                                          |
-| OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION       | Fallback to email for identification                                                                                                                       | false                                                                                                                                                         |
-| OIDC_RP_SIGN_ALGO                               | Token verification algorithm used by OIDC                                                                                                                  | RS256                                                                                                                                                         |
-| OIDC_RP_CLIENT_ID                               | OIDC client ID                                                                                                                                             | meet                                                                                                                                                          |
-| OIDC_RP_CLIENT_SECRET                           | OIDC client secret                                                                                                                                         |                                                                                                                                                               |
-| OIDC_OP_JWKS_ENDPOINT                           | OIDC endpoint for JWKS                                                                                                                                     |                                                                                                                                                               |
-| OIDC_OP_AUTHORIZATION_ENDPOINT                  | OIDC endpoint for authorization                                                                                                                            |                                                                                                                                                               |
-| OIDC_OP_TOKEN_ENDPOINT                          | OIDC endpoint for token                                                                                                                                    |                                                                                                                                                               |
-| OIDC_OP_USER_ENDPOINT                           | OIDC endpoint for user                                                                                                                                     |                                                                                                                                                               |
-| OIDC_OP_USER_ENDPOINT_FORMAT                    | OIDC endpoint format (AUTO, JWT, JSON)                                                                                                                     | AUTO                                                                                                                                                          |
-| OIDC_OP_LOGOUT_ENDPOINT                         | OIDC endpoint for logout                                                                                                                                   |                                                                                                                                                               |
-| OIDC_AUTH_REQUEST_EXTRA_PARAMS                  | Extra parameters for OIDC request                                                                                                                          | {}                                                                                                                                                            |
-| OIDC_RP_SCOPES                                  | OIDC scopes                                                                                                                                                | openid email                                                                                                                                                  |
-| OIDC_USE_NONCE                                  | Use nonce for OIDC                                                                                                                                         | true                                                                                                                                                          |
-| OIDC_REDIRECT_REQUIRE_HTTPS                     | Require HTTPS for OIDC                                                                                                                                     | false                                                                                                                                                         |
-| OIDC_REDIRECT_ALLOWED_HOSTS                     | Allowed redirect hosts for OIDC                                                                                                                            | []                                                                                                                                                            |
-| OIDC_STORE_ID_TOKEN                             | Store OIDC ID token                                                                                                                                        | true                                                                                                                                                          |
-| OIDC_REDIRECT_FIELD_NAME                        | Redirect field for OIDC                                                                                                                                    | returnTo                                                                                                                                                      |
-| OIDC_USERINFO_FULLNAME_FIELDS                   | Full name claim from OIDC token                                                                                                                            | ["given_name", "usual_name"]                                                                                                                                  |
-| OIDC_USERINFO_SHORTNAME_FIELD                   | Short name claim from OIDC token                                                                                                                           | given_name                                                                                                                                                    |
-| OIDC_USERINFO_ESSENTIAL_CLAIMS                  | Required claims from OIDC token                                                                                                                            | []                                                                                                                                                            |
-| LOGIN_REDIRECT_URL                              | Login redirect URL                                                                                                                                         |                                                                                                                                                               |
-| LOGIN_REDIRECT_URL_FAILURE                      | Login redirect URL for failure                                                                                                                             |                                                                                                                                                               |
-| LOGOUT_REDIRECT_URL                             | URL to redirect to on logout                                                                                                                               |                                                                                                                                                               |
-| ALLOW_LOGOUT_GET_METHOD                         | Allow logout through GET method                                                                                                                            | true                                                                                                                                                          |
-| LIVEKIT_API_KEY                                 | LiveKit API key                                                                                                                                            |                                                                                                                                                               |
-| LIVEKIT_API_SECRET                              | LiveKit API secret                                                                                                                                         |                                                                                                                                                               |
-| LIVEKIT_API_URL                                 | LiveKit API URL                                                                                                                                            |                                                                                                                                                               |
-| LIVEKIT_VERIFY_SSL                              | Verify SSL for LiveKit connections                                                                                                                         | true                                                                                                                                                          |
-| RESOURCE_DEFAULT_ACCESS_LEVEL                   | Default resource access level for rooms                                                                                                                    | public                                                                                                                                                        |
-| ALLOW_UNREGISTERED_ROOMS                        | Allow usage of unregistered rooms                                                                                                                          | true                                                                                                                                                          |
-| RECORDING_ENABLE                                | Record meeting option                                                                                                                                      | false                                                                                                                                                         |
-| RECORDING_OUTPUT_FOLDER                         | Folder to store meetings                                                                                                                                   | recordings                                                                                                                                                    |
-| RECORDING_WORKER_CLASSES                        | Worker classes for recording                                                                                                                               | {"screen_recording": "core.recording.worker.services.VideoCompositeEgressService","transcript": "core.recording.worker.services.AudioCompositeEgressService"} |
-| RECORDING_EVENT_PARSER_CLASS                    | Storage event engine for recording                                                                                                                         | core.recording.event.parsers.MinioParser                                                                                                                      |
-| RECORDING_ENABLE_STORAGE_EVENT_AUTH             | Enable storage event authorization                                                                                                                         | true                                                                                                                                                          |
-| RECORDING_STORAGE_EVENT_ENABLE                  | Enable recording storage events                                                                                                                            | false                                                                                                                                                         |
-| RECORDING_STORAGE_EVENT_TOKEN                   | Recording storage event token                                                                                                                              |                                                                                                                                                               |
-| RECORDING_EXPIRATION_DAYS                       | Recording expiration in days                                                                                                                               |                                                                                                                                                               |
-| SCREEN_RECORDING_BASE_URL                       | Screen recording base URL                                                                                                                                  |                                                                                                                                                               |
-| SUMMARY_SERVICE_ENDPOINT                        | Summary service endpoint                                                                                                                                   |                                                                                                                                                               |
-| SUMMARY_SERVICE_API_TOKEN                       | API token for summary service                                                                                                                              |                                                                                                                                                               |
-| SIGNUP_NEW_USER_TO_MARKETING_EMAIL              | Signup users to marketing emails                                                                                                                           | false                                                                                                                                                         |
-| MARKETING_SERVICE_CLASS                         | Marketing service class                                                                                                                                    | core.services.marketing.BrevoMarketingService                                                                                                                 |
-| BREVO_API_KEY                                   | Brevo API key for marketing emails                                                                                                                         |                                                                                                                                                               |
-| BREVO_API_CONTACT_LIST_IDS                      | Brevo API contact list IDs                                                                                                                                 | []                                                                                                                                                            |
-| DJANGO_BREVO_API_CONTACT_ATTRIBUTES             | Brevo contact attributes                                                                                                                                   | {"VISIO_USER": true}                                                                                                                                          |
-| BREVO_API_TIMEOUT                               | Brevo timeout in seconds                                                                                                                                   | 1                                                                                                                                                             |
-| LOBBY_KEY_PREFIX                                | Lobby key prefix                                                                                                                                           | room_lobby                                                                                                                                                    |
-| LOBBY_WAITING_TIMEOUT                           | Lobby waiting timeout in seconds                                                                                                                           | 3                                                                                                                                                             |
-| LOBBY_DENIED_TIMEOUT                            | Lobby deny timeout in seconds                                                                                                                              | 5                                                                                                                                                             |
-| LOBBY_ACCEPTED_TIMEOUT                          | Lobby accept timeout in seconds                                                                                                                            | 21600 (6 hours)                                                                                                                                               |
-| LOBBY_NOTIFICATION_TYPE                         | Lobby notification types                                                                                                                                   | participantWaiting                                                                                                                                            |
-| LOBBY_COOKIE_NAME                               | Lobby cookie name                                                                                                                                          | lobbyParticipantId                                                                                                                                            |
-| ROOM_CREATION_CALLBACK_CACHE_TIMEOUT            | Room creation callback cache timeout                                                                                                                       | 600 (10 minutes)                                                                                                                                              |
-| ROOM_TELEPHONY_ENABLED                          | Enable SIP telephony feature                                                                                                                               | false                                                                                                                                                         |
-| ROOM_TELEPHONY_PIN_LENGTH                       | Telephony PIN length                                                                                                                                       | 10                                                                                                                                                            |
-| ROOM_TELEPHONY_PIN_MAX_RETRIES                  | Telephony PIN maximum retries                                                                                                                              | 5                                                                                                                                                             |
+| Option                                          | Description                                                                                                                                                  | default                                                                                                                                                       |
+|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| DATA_DIR                                        | Data directory location                                                                                                                                      | /data                                                                                                                                                         |
+| DJANGO_ALLOWED_HOSTS                            | Hosts that are allowed                                                                                                                                       | []                                                                                                                                                            |
+| DJANGO_SECRET_KEY                               | Secret key used for Django security                                                                                                                          |                                                                                                                                                               |
+| DJANGO_SILENCED_SYSTEM_CHECKS                   | Silence Django system checks                                                                                                                                 | []                                                                                                                                                            |
+| DJANGO_ALLOW_UNSECURE_USER_LISTING              | Allow unsecure user listing                                                                                                                                  | false                                                                                                                                                         |
+| DB_ENGINE                                       | Database engine used                                                                                                                                         | django.db.backends.postgresql_psycopg2                                                                                                                        |
+| DB_NAME                                         | Name of the database                                                                                                                                         | meet                                                                                                                                                          |
+| DB_USER                                         | User used to connect to database                                                                                                                             | dinum                                                                                                                                                         |
+| DB_PASSWORD                                     | Password used to connect to the database                                                                                                                     | pass                                                                                                                                                          |
+| DB_HOST                                         | Hostname of the database                                                                                                                                     | localhost                                                                                                                                                     |
+| DB_PORT                                         | Port to connect to database                                                                                                                                  | 5432                                                                                                                                                          |
+| STORAGES_STATICFILES_BACKEND                    | Static file serving engine                                                                                                                                   | whitenoise.storage.CompressedManifestStaticFilesStorage                                                                                                       |
+| AWS_S3_ENDPOINT_URL                             | S3 host endpoint                                                                                                                                             |                                                                                                                                                               |
+| AWS_S3_ACCESS_KEY_ID                            | S3 access key                                                                                                                                                |                                                                                                                                                               |
+| AWS_S3_SECRET_ACCESS_KEY                        | S3 secret key                                                                                                                                                |                                                                                                                                                               |
+| AWS_S3_REGION_NAME                              | S3 region                                                                                                                                                    |                                                                                                                                                               |
+| AWS_STORAGE_BUCKET_NAME                         | S3 bucket name                                                                                                                                               | meet-media-storage                                                                                                                                            |
+| DJANGO_LANGUAGE_CODE                            | Default language                                                                                                                                             | en-us                                                                                                                                                         |
+| REDIS_URL                                       | Redis endpoint                                                                                                                                               | redis://redis:6379/1                                                                                                                                          |
+| SESSION_COOKIE_AGE                              | Session cookie expiration in seconds                                                                                                                         | 43200 (12 hours)                                                                                                                                              |
+| REQUEST_ENTRY_THROTTLE_RATES                    | Entry request throttle rates                                                                                                                                 | 150/minute                                                                                                                                                    |
+| CREATION_CALLBACK_THROTTLE_RATES                | Creation callback throttle rates                                                                                                                             | 600/minute                                                                                                                                                    |
+| SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | Enable Django deploy check                                                                                                                                   | false                                                                                                                                                         |
+| CSRF_TRUSTED_ORIGINS                            | CSRF trusted origins list                                                                                                                                    | []                                                                                                                                                            |
+| FRONTEND_CUSTOM_CSS_URL                         | URL of an additional CSS file to load in the frontend app. If set, a `<link>` tag with this URL as href is added to the `<head>` of the frontend app         |                                                                                                                                                               |
+| FRONTEND_ANALYTICS                              | Analytics information                                                                                                                                        | {}                                                                                                                                                            |
+| FRONTEND_SUPPORT                                | Crisp frontend support configuration, also you can pass help articles, with `help_article_transcript`, `help_article_recording`, `help_article_more_tools`   | {}                                                                                                                                                            |
+| FRONTEND_TRANSCRIPT                             | Frontend transcription configuration, you can pass a beta form, with `form_beta_users`                                                                       | {}                                                                                                                                                            |
+| FRONTEND_MANIFEST_LINK                          | Link to the "Learn more" button on the homepage                                                                                                              | {}                                                                                                                                                            |
+| FRONTEND_SILENCE_LIVEKIT_DEBUG                  | Silence LiveKit debug logs                                                                                                                                   | false                                                                                                                                                         |
+| FRONTEND_IS_SILENT_LOGIN_ENABLED                | Enable silent login feature                                                                                                                                  | true                                                                                                                                                          |
+| FRONTEND_FEEDBACK                               | Frontend feedback configuration                                                                                                                              | {}                                                                                                                                                            |
+| FRONTEND_USE_FRENCH_GOV_FOOTER                  | Show the French government footer in the homepage                                                                                                            | false                                                                                                                                                         |
+| FRONTEND_USE_PROCONNECT_BUTTON                  | Show a "Login with ProConnect" button in the homepage instead of a "Login" button                                                                            | false                                                                                                                                                         |
+| DJANGO_EMAIL_BACKEND                            | Email backend library                                                                                                                                        | django.core.mail.backends.smtp.EmailBackend                                                                                                                   |
+| DJANGO_EMAIL_HOST                               | Host of the email server                                                                                                                                     |                                                                                                                                                               |
+| DJANGO_EMAIL_HOST_USER                          | User to connect to the email server                                                                                                                          |                                                                                                                                                               |
+| DJANGO_EMAIL_HOST_PASSWORD                      | Password to connect to the email server                                                                                                                      |                                                                                                                                                               |
+| DJANGO_EMAIL_PORT                               | Port to connect to the email server                                                                                                                          |                                                                                                                                                               |
+| DJANGO_EMAIL_USE_TLS                            | Enable TLS on email connection                                                                                                                               | false                                                                                                                                                         |
+| DJANGO_EMAIL_USE_SSL                            | Enable SSL on email connection                                                                                                                               | false                                                                                                                                                         |
+| DJANGO_EMAIL_FROM                               | Email from account                                                                                                                                           | from@example.com                                                                                                                                              |
+| EMAIL_BRAND_NAME                                | Email branding name                                                                                                                                          |                                                                                                                                                               |
+| EMAIL_SUPPORT_EMAIL                             | Support email address                                                                                                                                        |                                                                                                                                                               |
+| EMAIL_LOGO_IMG                                  | Email logo image                                                                                                                                             |                                                                                                                                                               |
+| EMAIL_DOMAIN                                    | Email domain                                                                                                                                                 |                                                                                                                                                               |
+| EMAIL_APP_BASE_URL                              | Email app base URL                                                                                                                                           |                                                                                                                                                               |
+| DJANGO_CORS_ALLOW_ALL_ORIGINS                   | Allow all CORS origins                                                                                                                                       | false                                                                                                                                                         |
+| DJANGO_CORS_ALLOWED_ORIGINS                     | Origins to allow (string list)                                                                                                                               | []                                                                                                                                                            |
+| DJANGO_CORS_ALLOWED_ORIGIN_REGEXES              | Origins to allow (regex patterns)                                                                                                                            | []                                                                                                                                                            |
+| SENTRY_DSN                                      | Sentry server DSN                                                                                                                                            |                                                                                                                                                               |
+| DJANGO_CELERY_BROKER_URL                        | Celery broker host                                                                                                                                           | redis://redis:6379/0                                                                                                                                          |
+| DJANGO_CELERY_BROKER_TRANSPORT_OPTIONS          | Celery broker options                                                                                                                                        | {}                                                                                                                                                            |
+| OIDC_CREATE_USER                                | Create OIDC user if not exists                                                                                                                               | true                                                                                                                                                          |
+| OIDC_VERIFY_SSL                                 | Verify SSL for OIDC                                                                                                                                          | true                                                                                                                                                          |
+| OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION       | Fallback to email for identification                                                                                                                         | false                                                                                                                                                         |
+| OIDC_RP_SIGN_ALGO                               | Token verification algorithm used by OIDC                                                                                                                    | RS256                                                                                                                                                         |
+| OIDC_RP_CLIENT_ID                               | OIDC client ID                                                                                                                                               | meet                                                                                                                                                          |
+| OIDC_RP_CLIENT_SECRET                           | OIDC client secret                                                                                                                                           |                                                                                                                                                               |
+| OIDC_OP_JWKS_ENDPOINT                           | OIDC endpoint for JWKS                                                                                                                                       |                                                                                                                                                               |
+| OIDC_OP_AUTHORIZATION_ENDPOINT                  | OIDC endpoint for authorization                                                                                                                              |                                                                                                                                                               |
+| OIDC_OP_TOKEN_ENDPOINT                          | OIDC endpoint for token                                                                                                                                      |                                                                                                                                                               |
+| OIDC_OP_USER_ENDPOINT                           | OIDC endpoint for user                                                                                                                                       |                                                                                                                                                               |
+| OIDC_OP_USER_ENDPOINT_FORMAT                    | OIDC endpoint format (AUTO, JWT, JSON)                                                                                                                       | AUTO                                                                                                                                                          |
+| OIDC_OP_LOGOUT_ENDPOINT                         | OIDC endpoint for logout                                                                                                                                     |                                                                                                                                                               |
+| OIDC_AUTH_REQUEST_EXTRA_PARAMS                  | Extra parameters for OIDC request                                                                                                                            | {}                                                                                                                                                            |
+| OIDC_RP_SCOPES                                  | OIDC scopes                                                                                                                                                  | openid email                                                                                                                                                  |
+| OIDC_USE_NONCE                                  | Use nonce for OIDC                                                                                                                                           | true                                                                                                                                                          |
+| OIDC_REDIRECT_REQUIRE_HTTPS                     | Require HTTPS for OIDC                                                                                                                                       | false                                                                                                                                                         |
+| OIDC_REDIRECT_ALLOWED_HOSTS                     | Allowed redirect hosts for OIDC                                                                                                                              | []                                                                                                                                                            |
+| OIDC_STORE_ID_TOKEN                             | Store OIDC ID token                                                                                                                                          | true                                                                                                                                                          |
+| OIDC_REDIRECT_FIELD_NAME                        | Redirect field for OIDC                                                                                                                                      | returnTo                                                                                                                                                      |
+| OIDC_USERINFO_FULLNAME_FIELDS                   | Full name claim from OIDC token                                                                                                                              | ["given_name", "usual_name"]                                                                                                                                  |
+| OIDC_USERINFO_SHORTNAME_FIELD                   | Short name claim from OIDC token                                                                                                                             | given_name                                                                                                                                                    |
+| OIDC_USERINFO_ESSENTIAL_CLAIMS                  | Required claims from OIDC token                                                                                                                              | []                                                                                                                                                            |
+| OIDC_USE_PKCE                                   | Enable the use of PKCE (Proof Key for Code Exchange) during the OAuth 2.0 authorization code flow. Recommended for enhanced security.                        | False                                                                                                                                                         |
+| OIDC_PKCE_CODE_CHALLENGE_METHOD                 | Method used to generate the PKCE code challenge. Common values include S256 and plain. Refer to the mozilla-django-oidc documentation for supported options. | S256                                                                                                                                                          |
+| OIDC_PKCE_CODE_VERIFIER_SIZE                    | Length of the random string used as the PKCE code verifier. Must be an integer between 43 and 128, inclusive.                                                | 64                                                                                                                                                            |
+| LOGIN_REDIRECT_URL                              | Login redirect URL                                                                                                                                           |                                                                                                                                                               |
+| LOGIN_REDIRECT_URL_FAILURE                      | Login redirect URL for failure                                                                                                                               |                                                                                                                                                               |
+| LOGOUT_REDIRECT_URL                             | URL to redirect to on logout                                                                                                                                 |                                                                                                                                                               |
+| ALLOW_LOGOUT_GET_METHOD                         | Allow logout through GET method                                                                                                                              | true                                                                                                                                                          |
+| LIVEKIT_API_KEY                                 | LiveKit API key                                                                                                                                              |                                                                                                                                                               |
+| LIVEKIT_API_SECRET                              | LiveKit API secret                                                                                                                                           |                                                                                                                                                               |
+| LIVEKIT_API_URL                                 | LiveKit API URL                                                                                                                                              |                                                                                                                                                               |
+| LIVEKIT_VERIFY_SSL                              | Verify SSL for LiveKit connections                                                                                                                           | true                                                                                                                                                          |
+| LIVEKIT_FORCE_WSS_PROTOCOL                      | Enables WSS protocol conversion for legacy browser compatibility (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs fail in WebSocket() constructor.    | false                                                                                                                                                         |
+| LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND         | Firefox-only connection warmup: pre-calls WebSocket endpoint (expecting 401) to initialize cache, resolving proxy/network connectivity issues.               | false                                                                                                                                                         |
+| RESOURCE_DEFAULT_ACCESS_LEVEL                   | Default resource access level for rooms                                                                                                                      | public                                                                                                                                                        |
+| ALLOW_UNREGISTERED_ROOMS                        | Allow usage of unregistered rooms                                                                                                                            | true                                                                                                                                                          |
+| RECORDING_ENABLE                                | Record meeting option                                                                                                                                        | false                                                                                                                                                         |
+| RECORDING_OUTPUT_FOLDER                         | Folder to store meetings                                                                                                                                     | recordings                                                                                                                                                    |
+| RECORDING_WORKER_CLASSES                        | Worker classes for recording                                                                                                                                 | {"screen_recording": "core.recording.worker.services.VideoCompositeEgressService","transcript": "core.recording.worker.services.AudioCompositeEgressService"} |
+| RECORDING_EVENT_PARSER_CLASS                    | Storage event engine for recording                                                                                                                           | core.recording.event.parsers.MinioParser                                                                                                                      |
+| RECORDING_ENABLE_STORAGE_EVENT_AUTH             | Enable storage event authorization                                                                                                                           | true                                                                                                                                                          |
+| RECORDING_STORAGE_EVENT_ENABLE                  | Enable recording storage events                                                                                                                              | false                                                                                                                                                         |
+| RECORDING_STORAGE_EVENT_TOKEN                   | Recording storage event token                                                                                                                                |                                                                                                                                                               |
+| RECORDING_EXPIRATION_DAYS                       | Recording expiration in days                                                                                                                                 |                                                                                                                                                               |
+| RECORDING_MAX_DURATION                          | Maximum recording duration in milliseconds. Must match LiveKit Egress configuration exactly.                                                                 |                                                                                                                                                               |
+| SCREEN_RECORDING_BASE_URL                       | Screen recording base URL                                                                                                                                    |                                                                                                                                                               |
+| SUMMARY_SERVICE_ENDPOINT                        | Summary service endpoint                                                                                                                                     |                                                                                                                                                               |
+| SUMMARY_SERVICE_API_TOKEN                       | API token for summary service                                                                                                                                |                                                                                                                                                               |
+| SIGNUP_NEW_USER_TO_MARKETING_EMAIL              | Signup users to marketing emails                                                                                                                             | false                                                                                                                                                         |
+| MARKETING_SERVICE_CLASS                         | Marketing service class                                                                                                                                      | core.services.marketing.BrevoMarketingService                                                                                                                 |
+| BREVO_API_KEY                                   | Brevo API key for marketing emails                                                                                                                           |                                                                                                                                                               |
+| BREVO_API_CONTACT_LIST_IDS                      | Brevo API contact list IDs                                                                                                                                   | []                                                                                                                                                            |
+| DJANGO_BREVO_API_CONTACT_ATTRIBUTES             | Brevo contact attributes                                                                                                                                     | {"VISIO_USER": true}                                                                                                                                          |
+| BREVO_API_TIMEOUT                               | Brevo timeout in seconds                                                                                                                                     | 1                                                                                                                                                             |
+| LOBBY_KEY_PREFIX                                | Lobby key prefix                                                                                                                                             | room_lobby                                                                                                                                                    |
+| LOBBY_WAITING_TIMEOUT                           | Lobby waiting timeout in seconds                                                                                                                             | 3                                                                                                                                                             |
+| LOBBY_DENIED_TIMEOUT                            | Lobby deny timeout in seconds                                                                                                                                | 5                                                                                                                                                             |
+| LOBBY_ACCEPTED_TIMEOUT                          | Lobby accept timeout in seconds                                                                                                                              | 21600 (6 hours)                                                                                                                                               |
+| LOBBY_NOTIFICATION_TYPE                         | Lobby notification types                                                                                                                                     | participantWaiting                                                                                                                                            |
+| LOBBY_COOKIE_NAME                               | Lobby cookie name                                                                                                                                            | lobbyParticipantId                                                                                                                                            |
+| ROOM_CREATION_CALLBACK_CACHE_TIMEOUT            | Room creation callback cache timeout                                                                                                                         | 600 (10 minutes)                                                                                                                                              |
+| ROOM_TELEPHONY_ENABLED                          | Enable SIP telephony feature                                                                                                                                 | false                                                                                                                                                         |
+| ROOM_TELEPHONY_PIN_LENGTH                       | Telephony PIN length                                                                                                                                         | 10                                                                                                                                                            |
+| ROOM_TELEPHONY_PIN_MAX_RETRIES                  | Telephony PIN maximum retries                                                                                                                                | 5                                                                                                                                                             |
@@ -41,6 +41,19 @@ def get_frontend_configuration(request):
            "is_enabled": settings.RECORDING_ENABLE,
            "available_modes": settings.RECORDING_WORKER_CLASSES.keys(),
            "expiration_days": settings.RECORDING_EXPIRATION_DAYS,
+            "max_duration": settings.RECORDING_MAX_DURATION,
+        },
+        "telephony": {
+            "enabled": settings.ROOM_TELEPHONY_ENABLED,
+            "phone_number": settings.ROOM_TELEPHONY_PHONE_NUMBER
+            if settings.ROOM_TELEPHONY_ENABLED
+            else None,
+            "default_country": settings.ROOM_TELEPHONY_DEFAULT_COUNTRY,
+        },
+        "livekit": {
+            "url": settings.LIVEKIT_CONFIGURATION["url"],
+            "force_wss_protocol": settings.LIVEKIT_FORCE_WSS_PROTOCOL,
+            "enable_firefox_proxy_workaround": settings.LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND,
        },
    }
    frontend_configuration.update(settings.FRONTEND_CONFIGURATION)
@@ -107,8 +107,8 @@ class RoomSerializer(serializers.ModelSerializer):

    class Meta:
        model = models.Room
-        fields = ["id", "name", "slug", "configuration", "access_level"]
-        read_only_fields = ["id", "slug"]
+        fields = ["id", "name", "slug", "configuration", "access_level", "pin_code"]
+        read_only_fields = ["id", "slug", "pin_code"]

    def to_representation(self, instance):
        """
@@ -136,6 +136,13 @@ class NotificationService:
            "filename": recording.key,
            "email": owner_access.user.email,
            "sub": owner_access.user.sub,
+            "room": recording.room.name,
+            "recording_date": recording.created_at.astimezone(
+                owner_access.user.timezone
+            ).strftime("%Y-%m-%d"),
+            "recording_time": recording.created_at.astimezone(
+                owner_access.user.timezone
+            ).strftime("%H:%M"),
        }

        headers = {
@@ -0,0 +1,49 @@
+"""Recording-related LiveKit Events Service"""
+
+from logging import getLogger
+
+from core import models, utils
+
+logger = getLogger(__name__)
+
+
+class RecordingEventsError(Exception):
+    """Recording event handling fails."""
+
+
+class RecordingEventsService:
+    """Handles recording-related Livekit webhook events."""
+
+    @staticmethod
+    def handle_limit_reached(recording):
+        """Stop recording and notify participants when limit is reached."""
+
+        recording.status = models.RecordingStatusChoices.STOPPED
+        recording.save()
+
+        notification_mapping = {
+            models.RecordingModeChoices.SCREEN_RECORDING: "screenRecordingLimitReached",
+            models.RecordingModeChoices.TRANSCRIPT: "transcriptionLimitReached",
+        }
+
+        notification_type = notification_mapping.get(recording.mode)
+        if not notification_type:
+            return
+
+        try:
+            utils.notify_participants(
+                room_name=str(recording.room.id),
+                notification_data={"type": notification_type},
+            )
+        except utils.NotificationError as e:
+            logger.exception(
+                "Failed to notify participants about recording limit reached: "
+                "room=%s, recording_id=%s, mode=%s",
+                recording.room.id,
+                recording.id,
+                recording.mode,
+            )
+            raise RecordingEventsError(
+                f"Failed to notify participants in room '{recording.room.id}' about "
+                f"recording limit reached (recording_id={recording.id})"
+            ) from e
@@ -1,13 +1,25 @@
 """LiveKit Events Service"""

+# pylint: disable=E1101
+
 import uuid
 from enum import Enum
+from logging import getLogger

 from django.conf import settings

 from livekit import api

+from core import models
+from core.recording.services.recording_events import (
+    RecordingEventsError,
+    RecordingEventsService,
+)
+
 from .lobby import LobbyService
+from .telephony import TelephonyException, TelephonyService
+
+logger = getLogger(__name__)


 class LiveKitWebhookError(Exception):
@@ -77,6 +89,8 @@ class LiveKitEventsService:
        )
        self.webhook_receiver = api.WebhookReceiver(token_verifier)
        self.lobby_service = LobbyService()
+        self.telephony_service = TelephonyService()
+        self.recording_events = RecordingEventsService()

    def receive(self, request):
        """Process webhook and route to appropriate handler."""
@@ -108,10 +122,77 @@ class LiveKitEventsService:
        # pylint: disable=not-callable
        handler(data)

-    def _handle_room_finished(self, data):
-        """Handle 'room_finished' event."""
+    def _handle_egress_ended(self, data):
+        """Handle 'egress_ended' event."""
+
+        try:
+            recording = models.Recording.objects.get(
+                worker_id=data.egress_info.egress_id
+            )
+        except models.Recording.DoesNotExist as err:
+            raise ActionFailedError(
+                f"Recording with worker ID {data.egress_info.egress_id} does not exist"
+            ) from err
+
+        if (
+            data.egress_info.status == api.EgressStatus.EGRESS_LIMIT_REACHED
+            and recording.status == models.RecordingStatusChoices.ACTIVE
+        ):
+            try:
+                self.recording_events.handle_limit_reached(recording)
+            except RecordingEventsError as e:
+                raise ActionFailedError(
+                    f"Failed to process limit reached event for recording {recording}"
+                ) from e
+
+    def _handle_room_started(self, data):
+        """Handle 'room_started' event."""
+
        try:
            room_id = uuid.UUID(data.room.name)
+        except ValueError as e:
+            logger.warning(
+                "Ignoring room event: room name '%s' is not a valid UUID format.",
+                data.room.name,
+            )
+            raise ActionFailedError("Failed to process room started event") from e
+
+        try:
+            room = models.Room.objects.get(id=room_id)
+        except models.Room.DoesNotExist as err:
+            raise ActionFailedError(f"Room with ID {room_id} does not exist") from err
+
+        if settings.ROOM_TELEPHONY_ENABLED:
+            try:
+                self.telephony_service.create_dispatch_rule(room)
+            except TelephonyException as e:
+                raise ActionFailedError(
+                    f"Failed to create telephony dispatch rule for room {room_id}"
+                ) from e
+
+    def _handle_room_finished(self, data):
+        """Handle 'room_finished' event."""
+
+        try:
+            room_id = uuid.UUID(data.room.name)
+        except ValueError as e:
+            logger.warning(
+                "Ignoring room event: room name '%s' is not a valid UUID format.",
+                data.room.name,
+            )
+            raise ActionFailedError("Failed to process room finished event") from e
+
+        if settings.ROOM_TELEPHONY_ENABLED:
+            try:
+                self.telephony_service.delete_dispatch_rule(room_id)
+            except TelephonyException as e:
+                raise ActionFailedError(
+                    f"Failed to delete telephony dispatch rule for room {room_id}"
+                ) from e
+
+        try:
            self.lobby_service.clear_room_cache(room_id)
        except Exception as e:
-            raise ActionFailedError("Failed to process room finished event") from e
+            raise ActionFailedError(
+                f"Failed to clear room cache for room {room_id}"
+            ) from e
@@ -1,6 +1,5 @@
 """Lobby Service"""

-import json
 import logging
 import uuid
 from dataclasses import dataclass
@@ -11,13 +10,6 @@ from uuid import UUID
 from django.conf import settings
 from django.core.cache import cache

-from asgiref.sync import async_to_sync
-from livekit.api import (  # pylint: disable=E0611
-    ListRoomsRequest,
-    SendDataRequest,
-    TwirpError,
-)
-
 from core import models, utils

 logger = logging.getLogger(__name__)
@@ -46,10 +38,6 @@ class LobbyParticipantNotFound(LobbyError):
    """Raised when participant is not found."""


-class LobbyNotificationError(LobbyError):
-    """Raised when LiveKit notification fails."""
-
-
@dataclass
 class LobbyParticipant:
    """Participant in a lobby system."""
@@ -211,9 +199,6 @@ class LobbyService:

        Create a new participant entry in waiting status and notify room
        participants of the new entry request.
-
-        Raises:
-            LobbyNotificationError: If room notification fails
        """

        color = utils.generate_color(participant_id)
@@ -226,10 +211,15 @@ class LobbyService:
        )

        try:
-            self.notify_participants(room_id=room_id)
-        except LobbyNotificationError:
+            utils.notify_participants(
+                room_name=str(room_id),
+                notification_data={
+                    "type": settings.LOBBY_NOTIFICATION_TYPE,
+                },
+            )
+        except utils.NotificationError:
            # If room not created yet, there is no participants to notify
-            pass
+            logger.exception("Failed to notify room participants")

        cache_key = self._get_cache_key(room_id, participant_id)
        cache.set(
@@ -334,44 +324,6 @@ class LobbyService:
        participant.status = status
        cache.set(cache_key, participant.to_dict(), timeout=timeout)

-    @async_to_sync
-    async def notify_participants(self, room_id: UUID):
-        """Notify room participants about a new waiting participant using LiveKit.
-
-        Raises:
-            LobbyNotificationError: If notification fails to send
-        """
-
-        notification_data = {
-            "type": settings.LOBBY_NOTIFICATION_TYPE,
-        }
-
-        lkapi = utils.create_livekit_client()
-
-        try:
-            room_response = await lkapi.room.list_rooms(
-                ListRoomsRequest(
-                    names=[str(room_id)],
-                )
-            )
-
-            # Check if the room exists
-            if not room_response.rooms:
-                return
-
-            await lkapi.room.send_data(
-                SendDataRequest(
-                    room=str(room_id),
-                    data=json.dumps(notification_data).encode("utf-8"),
-                    kind="RELIABLE",
-                )
-            )
-        except TwirpError as e:
-            logger.exception("Failed to notify room participants")
-            raise LobbyNotificationError("Failed to notify room participants") from e
-        finally:
-            await lkapi.aclose()
-
    def clear_room_cache(self, room_id: UUID) -> None:
        """Clear all participant entries from the cache for a specific room."""

@@ -0,0 +1,124 @@
+"""Telephony service for managing SIP dispatch rules for room access."""
+
+from logging import getLogger
+
+from asgiref.sync import async_to_sync
+from livekit.api import TwirpError
+from livekit.protocol.sip import (
+    CreateSIPDispatchRuleRequest,
+    DeleteSIPDispatchRuleRequest,
+    ListSIPDispatchRuleRequest,
+    SIPDispatchRule,
+    SIPDispatchRuleDirect,
+)
+
+from core import utils
+
+logger = getLogger(__name__)
+
+
+class TelephonyException(Exception):
+    """Exception raised when telephony operations fail."""
+
+
+class TelephonyService:
+    """Service for managing participant access through the telephony system (SIP)."""
+
+    def _rule_name(self, room_id):
+        """Generate the rule name for a room based on its ID."""
+        return f"SIP_{str(room_id)}"
+
+    @async_to_sync
+    async def create_dispatch_rule(self, room):
+        """Create a SIP inbound dispatch rule for direct room routing.
+
+        Configures telephony to route incoming SIP calls directly to the specified room
+        using the room's ID and PIN code for authentication.
+        """
+
+        direct_rule = SIPDispatchRule(
+            dispatch_rule_direct=SIPDispatchRuleDirect(
+                room_name=str(room.id), pin=str(room.pin_code)
+            )
+        )
+
+        request = CreateSIPDispatchRuleRequest(
+            rule=direct_rule, name=self._rule_name(room.id)
+        )
+
+        lkapi = utils.create_livekit_client()
+
+        try:
+            await lkapi.sip.create_sip_dispatch_rule(create=request)
+        except TwirpError as e:
+            logger.exception(
+                "Unexpected error creating dispatch rule for room %s", room.id
+            )
+            raise TelephonyException("Could not create dispatch rule") from e
+
+        finally:
+            await lkapi.aclose()
+
+    async def _list_dispatch_rules_ids(self, room_id):
+        """List SIP dispatch rule IDs for a specific room.
+
+        Fetches all existing SIP dispatch rules and filters them by room name
+        since LiveKit API doesn't support server-side filtering by 'room_name'.
+        This approach is acceptable for moderate scale but may need refactoring
+        for high-volume scenarios.
+
+        Note:
+            Feature request for server-side filtering: livekit/sip#405
+        """
+
+        lkapi = utils.create_livekit_client()
+
+        try:
+            existing_rules = await lkapi.sip.list_sip_dispatch_rule(
+                list=ListSIPDispatchRuleRequest()
+            )
+        except TwirpError as e:
+            logger.exception("Failed to list dispatch rules for room %s", room_id)
+            raise TelephonyException("Could not list dispatch rules") from e
+        finally:
+            await lkapi.aclose()
+
+        if not existing_rules or not existing_rules.items:
+            return []
+
+        rule_name = self._rule_name(room_id)
+
+        return [
+            existing_rule.sip_dispatch_rule_id
+            for existing_rule in existing_rules.items
+            if existing_rule.name == rule_name
+        ]
+
+    @async_to_sync
+    async def delete_dispatch_rule(self, room_id):
+        """Delete all SIP inbound dispatch rules associated with a specific room."""
+
+        rules_ids = await self._list_dispatch_rules_ids(room_id)
+
+        if not rules_ids:
+            logger.info("No dispatch rules found for room %s", room_id)
+            return False
+
+        if len(rules_ids) > 1:
+            logger.error("Multiple dispatch rules found for room %s", room_id)
+
+        lkapi = utils.create_livekit_client()
+        try:
+            for rule_id in rules_ids:
+                await lkapi.sip.delete_sip_dispatch_rule(
+                    delete=DeleteSIPDispatchRuleRequest(sip_dispatch_rule_id=rule_id)
+                )
+
+            return True
+
+        except TwirpError as e:
+            logger.exception("Failed to delete dispatch rules for room %s", room_id)
+            raise TelephonyException("Could not delete dispatch rules") from e
+
+        finally:
+            await lkapi.aclose()
@@ -0,0 +1,72 @@
+"""
+Test RecordingEventsService service.
+"""
+
+# pylint: disable=W0621
+
+from unittest import mock
+
+import pytest
+
+from core.factories import RecordingFactory
+from core.recording.services.recording_events import (
+    RecordingEventsError,
+    RecordingEventsService,
+)
+from core.utils import NotificationError
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def service():
+    """Initialize RecordingEventsService."""
+    return RecordingEventsService()
+
+
+@pytest.mark.parametrize(
+    ("mode", "notification_type"),
+    (
+        ("screen_recording", "screenRecordingLimitReached"),
+        ("transcript", "transcriptionLimitReached"),
+    ),
+)
+@mock.patch("core.utils.notify_participants")
+def test_handle_limit_reached_success(mock_notify, mode, notification_type, service):
+    """Test handle_limit_reached stops recording and notifies participants."""
+
+    recording = RecordingFactory(status="active", mode=mode)
+    service.handle_limit_reached(recording)
+
+    assert recording.status == "stopped"
+    mock_notify.assert_called_once_with(
+        room_name=str(recording.room.id), notification_data={"type": notification_type}
+    )
+
+
+@pytest.mark.parametrize(
+    ("mode", "notification_type"),
+    (
+        ("screen_recording", "screenRecordingLimitReached"),
+        ("transcript", "transcriptionLimitReached"),
+    ),
+)
+@mock.patch("core.utils.notify_participants")
+def test_handle_limit_reached_error(mock_notify, mode, notification_type, service):
+    """Test handle_limit_reached raises RecordingEventsError when notification fails."""
+
+    mock_notify.side_effect = NotificationError("Error notifying")
+
+    recording = RecordingFactory(status="active", mode=mode)
+
+    with pytest.raises(
+        RecordingEventsError,
+        match=r"Failed to notify participants in room '.+' "
+        r"about recording limit reached \(recording_id=.+\)",
+    ):
+        service.handle_limit_reached(recording)
+
+    assert recording.status == "stopped"
+    mock_notify.assert_called_once_with(
+        room_name=str(recording.room.id), notification_data={"type": notification_type}
+    )
@@ -37,7 +37,7 @@ def test_request_entry_anonymous(settings):
    assert not lobby_keys

    with (
-        mock.patch.object(LobbyService, "notify_participants", return_value=None),
+        mock.patch.object(utils, "notify_participants", return_value=None),
        mock.patch.object(utils, "generate_color", return_value="mocked-color"),
    ):
        response = client.post(
@@ -86,7 +86,7 @@ def test_request_entry_authenticated_user(settings):
    assert not lobby_keys

    with (
-        mock.patch.object(LobbyService, "notify_participants", return_value=None),
+        mock.patch.object(utils, "notify_participants", return_value=None),
        mock.patch.object(utils, "generate_color", return_value="mocked-color"),
    ):
        response = client.post(
@@ -156,7 +156,7 @@ def test_request_entry_with_existing_participants(settings):

    # Mock external service calls to isolate the test
    with (
-        mock.patch.object(LobbyService, "notify_participants", return_value=None),
+        mock.patch.object(utils, "notify_participants", return_value=None),
        mock.patch.object(utils, "generate_color", return_value="mocked-color"),
    ):
        # Make request as a new anonymous user
@@ -205,7 +205,7 @@ def test_request_entry_public_room(settings):
    assert not lobby_keys

    with (
-        mock.patch.object(LobbyService, "notify_participants", return_value=None),
+        mock.patch.object(utils, "notify_participants", return_value=None),
        mock.patch.object(
            LobbyService, "_get_or_create_participant_id", return_value="123"
        ),
@@ -255,7 +255,7 @@ def test_request_entry_authenticated_user_public_room(settings):
    assert not lobby_keys

    with (
-        mock.patch.object(LobbyService, "notify_participants", return_value=None),
+        mock.patch.object(utils, "notify_participants", return_value=None),
        mock.patch.object(
            LobbyService,
            "_get_or_create_participant_id",
@@ -315,7 +315,7 @@ def test_request_entry_waiting_participant_public_room(settings):
    client.cookies.load({"mocked-cookie": "2f7f162fe7d1421b90e702bfbfbf8def"})

    with (
-        mock.patch.object(LobbyService, "notify_participants", return_value=None),
+        mock.patch.object(utils, "notify_participants", return_value=None),
        mock.patch.object(
            utils, "generate_livekit_config", return_value={"token": "test-token"}
        ),
@@ -32,6 +32,7 @@ def test_api_rooms_retrieve_anonymous_private_pk():
        "id": str(room.id),
        "is_administrable": False,
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -51,6 +52,7 @@ def test_api_rooms_retrieve_anonymous_trusted_pk():
        "id": str(room.id),
        "is_administrable": False,
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -69,6 +71,7 @@ def test_api_rooms_retrieve_anonymous_private_pk_no_dashes():
        "id": str(room.id),
        "is_administrable": False,
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -85,6 +88,7 @@ def test_api_rooms_retrieve_anonymous_private_slug():
        "id": str(room.id),
        "is_administrable": False,
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -101,6 +105,7 @@ def test_api_rooms_retrieve_anonymous_private_slug_not_normalized():
        "id": str(room.id),
        "is_administrable": False,
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -209,6 +214,7 @@ def test_api_rooms_retrieve_anonymous_public(mock_token):
            "token": "foo",
        },
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -251,6 +257,7 @@ def test_api_rooms_retrieve_authenticated_public(mock_token):
            "token": "foo",
        },
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -295,6 +302,7 @@ def test_api_rooms_retrieve_authenticated_trusted(mock_token):
            "token": "foo",
        },
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -324,6 +332,7 @@ def test_api_rooms_retrieve_authenticated():
        "id": str(room.id),
        "is_administrable": False,
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -372,6 +381,7 @@ def test_api_rooms_retrieve_members(mock_token, django_assert_num_queries, setti
            "token": "foo",
        },
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -458,6 +468,7 @@ def test_api_rooms_retrieve_administrators(
            "token": "foo",
        },
        "name": room.name,
+        "pin_code": room.pin_code,
        "slug": room.slug,
    }

@@ -143,7 +143,7 @@ def test_handled_event_type(

 def test_unhandled_event_type(client, mock_livekit_config):
    """Should return 200 for event types that have no handler."""
-    event_data = json.dumps({"event": "room_started"})
+    event_data = json.dumps({"event": "participant_joined"})

    hash64 = base64.b64encode(hashlib.sha256(event_data.encode()).digest()).decode()
    token = api.AccessToken(
@@ -1,13 +1,16 @@
 """
 Test LiveKitEvents service.
 """
-# pylint: disable=W0621,W0613, W0212
+# pylint: disable=W0621,W0613, W0212, E0611

 import uuid
 from unittest import mock

 import pytest
+from livekit.api import EgressStatus

+from core.factories import RecordingFactory, RoomFactory
+from core.recording.services.recording_events import RecordingEventsService
 from core.services.livekit_events import (
    ActionFailedError,
    AuthenticationError,
@@ -17,6 +20,8 @@ from core.services.livekit_events import (
    api,
 )
 from core.services.lobby import LobbyService
+from core.services.telephony import TelephonyException, TelephonyService
+from core.utils import NotificationError

 pytestmark = pytest.mark.django_db

@@ -53,45 +58,253 @@ def test_initialization(
    mock_token_verifier.assert_called_once_with(api_key, api_secret)
    mock_webhook_receiver.assert_called_once_with(mock_token_verifier.return_value)
    assert isinstance(service.lobby_service, LobbyService)
+    assert isinstance(service.telephony_service, TelephonyService)
+    assert isinstance(service.recording_events, RecordingEventsService)
+
+
+@pytest.mark.parametrize(
+    ("mode", "notification_type"),
+    (
+        ("screen_recording", "screenRecordingLimitReached"),
+        ("transcript", "transcriptionLimitReached"),
+    ),
+)
+@mock.patch("core.utils.notify_participants")
+def test_handle_egress_ended_success(mock_notify, mode, notification_type, service):
+    """Should successfully stop recording and notifies all participant."""
+
+    recording = RecordingFactory(worker_id="worker-1", mode=mode, status="active")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = recording.worker_id
+    mock_data.egress_info.status = EgressStatus.EGRESS_LIMIT_REACHED
+
+    service._handle_egress_ended(mock_data)
+
+    mock_notify.assert_called_once_with(
+        room_name=str(recording.room.id), notification_data={"type": notification_type}
+    )
+
+    recording.refresh_from_db()
+    assert recording.status == "stopped"
+
+
+@mock.patch("core.utils.notify_participants")
+def test_handle_egress_ended_notification_fails(mock_notify, service):
+    """Should raise ActionFailedError when notification fails but still stop recording."""
+
+    recording = RecordingFactory(worker_id="worker-1", status="active")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = recording.worker_id
+    mock_data.egress_info.status = EgressStatus.EGRESS_LIMIT_REACHED
+
+    mock_notify.side_effect = NotificationError("Error notifying")
+
+    with pytest.raises(
+        ActionFailedError,
+        match=r"Failed to process limit reached event for recording .+",
+    ):
+        service._handle_egress_ended(mock_data)
+
+    recording.refresh_from_db()
+    assert recording.status == "stopped"
+
+
+@mock.patch("core.utils.notify_participants")
+def test_handle_egress_ended_recording_not_found(mock_notify, service):
+    """Should raise ActionFailedError when recording doesn't exist."""
+
+    recording = RecordingFactory(worker_id="worker-1", status="active")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = "worker-2"
+    mock_data.egress_info.status = EgressStatus.EGRESS_LIMIT_REACHED
+
+    with pytest.raises(
+        ActionFailedError, match=r"Recording with worker ID .+ does not exist"
+    ):
+        service._handle_egress_ended(mock_data)
+
+    mock_notify.assert_not_called()
+
+    recording.refresh_from_db()
+    assert recording.status == "active"
+
+
+@mock.patch("core.utils.notify_participants")
+def test_handle_egress_ended_recording_not_active(mock_notify, service):
+    """Should ignore non-active recordings."""
+
+    recording = RecordingFactory(worker_id="worker-1", status="failed_to_stop")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = "worker-1"
+    mock_data.egress_info.status = EgressStatus.EGRESS_LIMIT_REACHED
+
+    service._handle_egress_ended(mock_data)
+
+    mock_notify.assert_not_called()
+
+    recording.refresh_from_db()
+    assert recording.status == "failed_to_stop"
+
+
+@mock.patch("core.utils.notify_participants")
+def test_handle_egress_ended_recording_not_limit_reached(mock_notify, service):
+    """Should ignore egress non-limit-reached statuses."""
+
+    recording = RecordingFactory(worker_id="worker-1", status="stopped")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = "worker-1"
+    mock_data.egress_info.status = EgressStatus.EGRESS_COMPLETE
+
+    service._handle_egress_ended(mock_data)
+
+    mock_notify.assert_not_called()
+    assert recording.status == "stopped"


@mock.patch.object(LobbyService, "clear_room_cache")
-def test_handle_room_finished(mock_clear_cache, service):
-    """Should clear lobby cache when room is finished."""
-
+@mock.patch.object(TelephonyService, "delete_dispatch_rule")
+def test_handle_room_finished_clears_cache_and_deletes_dispatch_rule(
+    mock_delete_dispatch_rule, mock_clear_cache, service, settings
+):
+    """Should clear lobby cache and delete telephony dispatch rule when room finishes."""
+    settings.ROOM_TELEPHONY_ENABLED = True
    mock_room_name = uuid.uuid4()
-
    mock_data = mock.MagicMock()
    mock_data.room.name = str(mock_room_name)

    service._handle_room_finished(mock_data)

+    mock_delete_dispatch_rule.assert_called_once_with(mock_room_name)
+    mock_clear_cache.assert_called_once_with(mock_room_name)
+
+
+@mock.patch.object(LobbyService, "clear_room_cache")
+@mock.patch.object(TelephonyService, "delete_dispatch_rule")
+def test_handle_room_finished_skips_telephony_when_disabled(
+    mock_delete_dispatch_rule, mock_clear_cache, service, settings
+):
+    """Should clear lobby cache but skip dispatch rule deletion when telephony is disabled."""
+    settings.ROOM_TELEPHONY_ENABLED = False
+    mock_room_name = uuid.uuid4()
+    mock_data = mock.MagicMock()
+    mock_data.room.name = str(mock_room_name)
+
+    service._handle_room_finished(mock_data)
+
+    mock_delete_dispatch_rule.assert_not_called()
    mock_clear_cache.assert_called_once_with(mock_room_name)


@mock.patch.object(
    LobbyService, "clear_room_cache", side_effect=Exception("Test error")
 )
-def test_handle_room_finished_error(mock_clear_cache, service):
-    """Should raise ActionFailedError when processing fails."""
+@mock.patch.object(TelephonyService, "delete_dispatch_rule")
+def test_handle_room_finished_raises_error_when_cache_clearing_fails(
+    mock_delete_dispatch_rule, mock_clear_cache, service, settings
+):
+    """Should raise ActionFailedError when lobby cache clearing fails when room finishes."""
+    settings.ROOM_TELEPHONY_ENABLED = True
    mock_data = mock.MagicMock()
    mock_data.room.name = "00000000-0000-0000-0000-000000000000"
-    with pytest.raises(
-        ActionFailedError, match="Failed to process room finished event"
-    ):
+
+    expected_error = (
+        "Failed to clear room cache for room 00000000-0000-0000-0000-000000000000"
+    )
+
+    with pytest.raises(ActionFailedError, match=expected_error):
        service._handle_room_finished(mock_data)

+    mock_delete_dispatch_rule.assert_called_once_with(
+        uuid.UUID("00000000-0000-0000-0000-000000000000")
+    )

-def test_handle_room_finished_invalid_room_name(service):
-    """Should raise ActionFailedError when processing fails."""
+
+@mock.patch.object(LobbyService, "clear_room_cache")
+@mock.patch.object(
+    TelephonyService,
+    "delete_dispatch_rule",
+    side_effect=TelephonyException("Test error"),
+)
+def test_handle_room_finished_raises_error_when_telephony_deletion_fails(
+    mock_delete_dispatch_rule, mock_clear_cache, service, settings
+):
+    """Should raise ActionFailedError when dispatch rule deletion fails when room finishes."""
+    settings.ROOM_TELEPHONY_ENABLED = True
+    mock_data = mock.MagicMock()
+    mock_data.room.name = "00000000-0000-0000-0000-000000000000"
+
+    expected_error = (
+        "Failed to delete telephony dispatch rule for room "
+        "00000000-0000-0000-0000-000000000000"
+    )
+
+    with pytest.raises(ActionFailedError, match=expected_error):
+        service._handle_room_finished(mock_data)
+
+    mock_clear_cache.assert_not_called()
+
+
+def test_handle_room_finished_raises_error_for_invalid_room_name(service):
+    """Should raise ActionFailedError when room name format is invalid when room finishes."""
    mock_data = mock.MagicMock()
    mock_data.room.name = "invalid"
+
    with pytest.raises(
        ActionFailedError, match="Failed to process room finished event"
    ):
        service._handle_room_finished(mock_data)


+@mock.patch.object(TelephonyService, "create_dispatch_rule")
+def test_handle_room_started_creates_dispatch_rule_successfully(
+    mock_create_dispatch_rule, service, settings
+):
+    """Should create telephony dispatch rule when room starts successfully."""
+    settings.ROOM_TELEPHONY_ENABLED = True
+    room = RoomFactory()
+    mock_data = mock.MagicMock()
+    mock_data.room.name = str(room.id)
+
+    service._handle_room_started(mock_data)
+
+    mock_create_dispatch_rule.assert_called_once_with(room)
+
+
+@mock.patch.object(TelephonyService, "create_dispatch_rule")
+def test_handle_room_started_skips_dispatch_rule_when_telephony_disabled(
+    mock_create_dispatch_rule, service, settings
+):
+    """Should skip creating telephony dispatch rule when telephony is disabled during room start."""
+    settings.ROOM_TELEPHONY_ENABLED = False
+    room = RoomFactory()
+    mock_data = mock.MagicMock()
+    mock_data.room.name = str(room.id)
+
+    service._handle_room_started(mock_data)
+
+    mock_create_dispatch_rule.assert_not_called()
+
+
+def test_handle_room_started_raises_error_for_invalid_room_name(service):
+    """Should raise ActionFailedError when room name format is invalid  when room starts."""
+    mock_data = mock.MagicMock()
+    mock_data.room.name = "invalid"
+
+    with pytest.raises(ActionFailedError, match="Failed to process room started event"):
+        service._handle_room_started(mock_data)
+
+
+def test_handle_room_started_raises_error_for_nonexistent_room(service):
+    """Should raise ActionFailedError when a room starts that doesn't exist in the database."""
+    mock_data = mock.MagicMock()
+    mock_data.room.name = str(uuid.uuid4())
+
+    expected_error = f"Room with ID {mock_data.room.name} does not exist"
+
+    with pytest.raises(ActionFailedError, match=expected_error):
+        service._handle_room_started(mock_data)
+
+
@mock.patch.object(
    api.WebhookReceiver, "receive", side_effect=Exception("Invalid payload")
 )
@@ -5,7 +5,6 @@ Test lobby service.
 # pylint: disable=W0621,W0613, W0212, R0913
 # ruff: noqa: PLR0913

-import json
 import uuid
 from unittest import mock

@@ -14,18 +13,17 @@ from django.core.cache import cache
 from django.http import HttpResponse

 import pytest
-from livekit.api import TwirpError

 from core.factories import RoomFactory
 from core.models import RoomAccessLevel
 from core.services.lobby import (
-    LobbyNotificationError,
    LobbyParticipant,
    LobbyParticipantNotFound,
    LobbyParticipantParsingError,
    LobbyParticipantStatus,
    LobbyService,
 )
+from core.utils import NotificationError

 pytestmark = pytest.mark.django_db

@@ -414,7 +412,7 @@ def test_refresh_waiting_status(mock_cache, lobby_service, participant_id):
 # pylint: disable=R0917
@mock.patch("core.services.lobby.cache")
@mock.patch("core.utils.generate_color")
-@mock.patch("core.services.lobby.LobbyService.notify_participants")
+@mock.patch("core.utils.notify_participants")
 def test_enter_success(
    mock_notify,
    mock_generate_color,
@@ -443,13 +441,15 @@ def test_enter_success(
        participant.to_dict(),
        timeout=settings.LOBBY_WAITING_TIMEOUT,
    )
-    mock_notify.assert_called_once_with(room_id=room.id)
+    mock_notify.assert_called_once_with(
+        room_name=str(room.id), notification_data={"type": "participantWaiting"}
+    )


 # pylint: disable=R0917
@mock.patch("core.services.lobby.cache")
@mock.patch("core.utils.generate_color")
-@mock.patch("core.services.lobby.LobbyService.notify_participants")
+@mock.patch("core.utils.notify_participants")
 def test_enter_with_notification_error(
    mock_notify,
    mock_generate_color,
@@ -460,7 +460,7 @@ def test_enter_with_notification_error(
 ):
    """Test participant entry with notification error."""
    mock_generate_color.return_value = "#123456"
-    mock_notify.side_effect = LobbyNotificationError("Error notifying")
+    mock_notify.side_effect = NotificationError("Error notifying")
    lobby_service._get_cache_key = mock.Mock(return_value="mocked_cache_key")

    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
@@ -776,116 +776,6 @@ def test_update_participant_status_success(mock_cache, lobby_service, participan
    lobby_service._get_cache_key.assert_called_once_with(room.id, participant_id)


-@mock.patch("core.utils.create_livekit_client")
-def test_notify_participants_success_no_room(mock_create_livekit_client, lobby_service):
-    """Test the notify_participants method when the LiveKit room doesn't exist yet."""
-
-    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
-
-    # Set up the mock LiveKitAPI and its behavior
-    mock_api_instance = mock.Mock()
-    mock_api_instance.room = mock.Mock()
-    mock_api_instance.room.send_data = mock.AsyncMock()
-
-    # Create a proper response object with an empty rooms list
-    class MockResponse:
-        """LiveKit API response mock with empty rooms list."""
-
-        rooms = []
-
-    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
-    mock_api_instance.aclose = mock.AsyncMock()
-    mock_create_livekit_client.return_value = mock_api_instance
-
-    # Act
-    lobby_service.notify_participants(room.id)
-
-    # Verify that the service checked for existing rooms
-    mock_api_instance.room.list_rooms.assert_called_once()
-
-    # Verify the send_data method was not called since no room exists
-    mock_api_instance.room.send_data.assert_not_called()
-
-    # Verify the connection was properly closed
-    mock_api_instance.aclose.assert_called_once()
-
-
-@mock.patch("core.utils.create_livekit_client")
-def test_notify_participants_success(mock_create_livekit_client, lobby_service):
-    """Test successful participant notification."""
-    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
-    # Set up the mock LiveKitAPI and its behavior
-    mock_api_instance = mock.Mock()
-    mock_api_instance.room = mock.Mock()
-    mock_api_instance.room.send_data = mock.AsyncMock()
-
-    class MockResponse:
-        """LiveKit API response mock with non-empty rooms list."""
-
-        rooms = ["room-1"]
-
-    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
-
-    mock_api_instance.aclose = mock.AsyncMock()
-    mock_create_livekit_client.return_value = mock_api_instance
-
-    # Call the function
-    lobby_service.notify_participants(room.id)
-
-    # Verify that the service checked for existing rooms
-    mock_api_instance.room.list_rooms.assert_called_once()
-
-    # Verify the send_data method was called
-    mock_api_instance.room.send_data.assert_called_once()
-    send_data_request = mock_api_instance.room.send_data.call_args[0][0]
-    assert send_data_request.room == str(room.id)
-    assert (
-        json.loads(send_data_request.data.decode("utf-8"))["type"]
-        == settings.LOBBY_NOTIFICATION_TYPE
-    )
-    assert send_data_request.kind == 0  # RELIABLE mode in Livekit protocol
-
-    # Verify aclose was called
-    mock_api_instance.aclose.assert_called_once()
-
-
-@mock.patch("core.utils.create_livekit_client")
-def test_notify_participants_error(mock_create_livekit_client, lobby_service):
-    """Test participant notification with API error."""
-    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
-    # Set up the mock LiveKitAPI and its behavior
-    mock_api_instance = mock.Mock()
-    mock_api_instance.room = mock.Mock()
-    mock_api_instance.room.send_data = mock.AsyncMock(
-        side_effect=TwirpError(msg="test error", code=123, status=123)
-    )
-
-    class MockResponse:
-        """LiveKit API response mock with non-empty rooms list."""
-
-        rooms = ["room-1"]
-
-    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
-
-    mock_api_instance.aclose = mock.AsyncMock()
-    mock_create_livekit_client.return_value = mock_api_instance
-
-    # Call the function and expect an exception
-    with pytest.raises(
-        LobbyNotificationError, match="Failed to notify room participants"
-    ):
-        lobby_service.notify_participants(room.id)
-
-    # Verify that the service checked for existing rooms
-    mock_api_instance.room.list_rooms.assert_called_once()
-
-    # Verify send_data was called
-    mock_api_instance.room.send_data.assert_called_once()
-
-    # Verify aclose was still called after the exception
-    mock_api_instance.aclose.assert_called_once()
-
-
 def test_clear_room_cache(settings, lobby_service):
    """Test clearing room cache actually removes entries from cache."""

@@ -0,0 +1,305 @@
+"""
+Test telephony service.
+"""
+
+# pylint: disable=W0212
+
+from unittest import mock
+
+import pytest
+from asgiref.sync import async_to_sync
+from livekit.api import TwirpError
+from livekit.protocol.sip import (
+    CreateSIPDispatchRuleRequest,
+    DeleteSIPDispatchRuleRequest,
+    ListSIPDispatchRuleRequest,
+    ListSIPDispatchRuleResponse,
+    SIPDispatchRule,
+    SIPDispatchRuleInfo,
+)
+
+from core.factories import RoomFactory
+from core.models import RoomAccessLevel
+from core.services.telephony import TelephonyException, TelephonyService
+
+pytestmark = pytest.mark.django_db
+
+
+def create_mock_livekit_client():
+    """Factory for creating LiveKit client mock."""
+    mock_api = mock.Mock()
+    mock_api.sip = mock.Mock()
+    mock_api.aclose = mock.AsyncMock()
+    return mock_api
+
+
+def test_rule_name():
+    """Test rule name generation."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+    rule_name = telephony_service._rule_name(room.id)
+
+    assert rule_name == f"SIP_{str(room.id)}"
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_create_dispatch_rule_success(mock_client_factory):
+    """Test successful dispatch rule creation."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.create_sip_dispatch_rule = mock.AsyncMock()
+    mock_client_factory.return_value = mock_api
+
+    telephony_service.create_dispatch_rule(room)
+
+    mock_api.sip.create_sip_dispatch_rule.assert_called_once()
+    create_request = mock_api.sip.create_sip_dispatch_rule.call_args[1]["create"]
+
+    assert isinstance(create_request, CreateSIPDispatchRuleRequest)
+    assert create_request.name == f"SIP_{str(room.id)}"
+    assert create_request.rule.dispatch_rule_direct.room_name == str(room.id)
+    assert create_request.rule.dispatch_rule_direct.pin == str(room.pin_code)
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_create_dispatch_rule_api_failure(mock_client_factory):
+    """Test dispatch rule creation when API fails."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.create_sip_dispatch_rule = mock.AsyncMock(
+        side_effect=TwirpError(msg="Internal server error", code=500, status=500)
+    )
+    mock_client_factory.return_value = mock_api
+
+    with pytest.raises(TelephonyException, match="Could not create dispatch rule"):
+        telephony_service.create_dispatch_rule(room)
+
+    mock_api.sip.create_sip_dispatch_rule.assert_called_once()
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_list_dispatch_rules_ids_success(mock_client_factory):
+    """Test successful listing of dispatch rule IDs."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_rules = [
+        SIPDispatchRuleInfo(
+            sip_dispatch_rule_id="rule-1",
+            name=f"SIP_{str(room.id)}",
+            rule=SIPDispatchRule(),
+        ),
+        SIPDispatchRuleInfo(
+            sip_dispatch_rule_id="rule-2", name="OTHER_RULE", rule=SIPDispatchRule()
+        ),
+        SIPDispatchRuleInfo(
+            sip_dispatch_rule_id="rule-3",
+            name=f"SIP_{str(room.id)}",
+            rule=SIPDispatchRule(),
+        ),
+    ]
+
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.list_sip_dispatch_rule = mock.AsyncMock(
+        return_value=ListSIPDispatchRuleResponse(items=mock_rules)
+    )
+    mock_client_factory.return_value = mock_api
+
+    result = async_to_sync(telephony_service._list_dispatch_rules_ids)(room.id)
+
+    assert len(result) == 2
+    assert "rule-1" in result
+    assert "rule-3" in result
+    assert "rule-2" not in result
+
+    mock_api.sip.list_sip_dispatch_rule.assert_called_once()
+    list_request = mock_api.sip.list_sip_dispatch_rule.call_args[1]["list"]
+    assert isinstance(list_request, ListSIPDispatchRuleRequest)
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_list_dispatch_rules_ids_empty_response(mock_client_factory):
+    """Test listing dispatch rule IDs when no rules exist."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.list_sip_dispatch_rule = mock.AsyncMock(
+        return_value=ListSIPDispatchRuleResponse(items=[])
+    )
+    mock_client_factory.return_value = mock_api
+
+    result = async_to_sync(telephony_service._list_dispatch_rules_ids)(room.id)
+
+    assert result == []
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_list_dispatch_rules_ids_no_matching_rules(mock_client_factory):
+    """Test listing dispatch rule IDs when no rules match the room."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_rules = [
+        SIPDispatchRuleInfo(
+            sip_dispatch_rule_id="rule-1", name="OTHER_RULE_1", rule=SIPDispatchRule()
+        ),
+        SIPDispatchRuleInfo(
+            sip_dispatch_rule_id="rule-2", name="OTHER_RULE_2", rule=SIPDispatchRule()
+        ),
+    ]
+
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.list_sip_dispatch_rule = mock.AsyncMock(
+        return_value=ListSIPDispatchRuleResponse(items=mock_rules)
+    )
+    mock_client_factory.return_value = mock_api
+
+    result = async_to_sync(telephony_service._list_dispatch_rules_ids)(room.id)
+
+    assert result == []
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_list_dispatch_rules_ids_api_failure(mock_client_factory):
+    """Test listing dispatch rule IDs when API fails."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.list_sip_dispatch_rule = mock.AsyncMock(
+        side_effect=TwirpError(msg="Internal server error", code=500, status=500)
+    )
+    mock_client_factory.return_value = mock_api
+
+    with pytest.raises(TelephonyException, match="Could not list dispatch rules"):
+        async_to_sync(telephony_service._list_dispatch_rules_ids)(room.id)
+
+    mock_api.sip.list_sip_dispatch_rule.assert_called_once()
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.services.telephony.TelephonyService._list_dispatch_rules_ids")
+@mock.patch("core.utils.create_livekit_client")
+def test_delete_dispatch_rule_no_rules(mock_client_factory, mock_list_rules):
+    """Test deleting dispatch rules when no rules exist."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_list_rules.return_value = []
+
+    result = telephony_service.delete_dispatch_rule(room.id)
+
+    assert result is False
+    mock_list_rules.assert_called_once_with(room.id)
+    mock_client_factory.assert_not_called()
+
+
+@mock.patch("core.services.telephony.TelephonyService._list_dispatch_rules_ids")
+@mock.patch("core.utils.create_livekit_client")
+def test_delete_dispatch_rule_single_rule(mock_client_factory, mock_list_rules):
+    """Test deleting a single dispatch rule."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_list_rules.return_value = ["rule-1"]
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.delete_sip_dispatch_rule = mock.AsyncMock()
+    mock_client_factory.return_value = mock_api
+
+    result = telephony_service.delete_dispatch_rule(room.id)
+
+    assert result is True
+    mock_api.sip.delete_sip_dispatch_rule.assert_called_once()
+    delete_request = mock_api.sip.delete_sip_dispatch_rule.call_args[1]["delete"]
+    assert isinstance(delete_request, DeleteSIPDispatchRuleRequest)
+    assert delete_request.sip_dispatch_rule_id == "rule-1"
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.services.telephony.TelephonyService._list_dispatch_rules_ids")
+@mock.patch("core.utils.create_livekit_client")
+def test_delete_dispatch_rule_multiple_rules(mock_client_factory, mock_list_rules):
+    """Test deleting multiple dispatch rules."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_list_rules.return_value = ["rule-1", "rule-2", "rule-3"]
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.delete_sip_dispatch_rule = mock.AsyncMock()
+    mock_client_factory.return_value = mock_api
+
+    result = telephony_service.delete_dispatch_rule(room.id)
+
+    assert result is True
+    assert mock_api.sip.delete_sip_dispatch_rule.call_count == 3
+
+    deleted_rule_ids = [
+        call_args[1]["delete"].sip_dispatch_rule_id
+        for call_args in mock_api.sip.delete_sip_dispatch_rule.call_args_list
+    ]
+    assert all(
+        rule_id in deleted_rule_ids for rule_id in ["rule-1", "rule-2", "rule-3"]
+    )
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.services.telephony.TelephonyService._list_dispatch_rules_ids")
+@mock.patch("core.utils.create_livekit_client")
+def test_delete_dispatch_rule_partial_failure(mock_client_factory, mock_list_rules):
+    """Test deleting multiple dispatch rules when one deletion fails."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_list_rules.return_value = ["rule-1", "rule-2", "rule-3"]
+    mock_api = create_mock_livekit_client()
+
+    call_count = 0
+
+    def delete_side_effect(*args, **kwargs):
+        nonlocal call_count
+        if call_count == 0:
+            call_count += 1
+            return None
+        raise TwirpError(msg="Deletion failed", code=500, status=500)
+
+    mock_api.sip.delete_sip_dispatch_rule = mock.AsyncMock(
+        side_effect=delete_side_effect
+    )
+    mock_client_factory.return_value = mock_api
+
+    with pytest.raises(TelephonyException, match="Could not delete dispatch rules"):
+        telephony_service.delete_dispatch_rule(room.id)
+
+    assert mock_api.sip.delete_sip_dispatch_rule.call_count == 2
+    mock_api.aclose.assert_called_once()
+
+
+@mock.patch("core.services.telephony.TelephonyService._list_dispatch_rules_ids")
+@mock.patch("core.utils.create_livekit_client")
+def test_delete_dispatch_rule_api_failure(mock_client_factory, mock_list_rules):
+    """Test deleting dispatch rules when API fails immediately."""
+    telephony_service = TelephonyService()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED, pin_code="1234")
+
+    mock_list_rules.return_value = ["rule-1"]
+    mock_api = create_mock_livekit_client()
+    mock_api.sip.delete_sip_dispatch_rule = mock.AsyncMock(
+        side_effect=TwirpError(msg="Internal server error", code=500, status=500)
+    )
+    mock_client_factory.return_value = mock_api
+
+    with pytest.raises(TelephonyException, match="Could not delete dispatch rules"):
+        telephony_service.delete_dispatch_rule(room.id)
+
+    mock_api.sip.delete_sip_dispatch_rule.assert_called_once()
+    mock_api.aclose.assert_called_once()
@@ -2,9 +2,13 @@
 Test utils functions
 """

+import json
 from unittest import mock

-from core.utils import create_livekit_client
+import pytest
+from livekit.api import TwirpError
+
+from core.utils import NotificationError, create_livekit_client, notify_participants


@mock.patch("asyncio.get_running_loop")
@@ -60,3 +64,105 @@ def test_create_livekit_client_custom_configuration(
    create_livekit_client(custom_configuration)

    mock_livekit_api.assert_called_once_with(**custom_configuration, session=None)
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_notify_participants_error(mock_create_livekit_client):
+    """Test participant notification with API error."""
+
+    # Set up the mock LiveKitAPI and its behavior
+    mock_api_instance = mock.Mock()
+    mock_api_instance.room = mock.Mock()
+    mock_api_instance.room.send_data = mock.AsyncMock(
+        side_effect=TwirpError(msg="test error", code=123, status=123)
+    )
+
+    class MockResponse:
+        """LiveKit API response mock with non-empty rooms list."""
+
+        rooms = ["room-1"]
+
+    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
+
+    mock_api_instance.aclose = mock.AsyncMock()
+    mock_create_livekit_client.return_value = mock_api_instance
+
+    # Call the function and expect an exception
+    with pytest.raises(NotificationError, match="Failed to notify room participants"):
+        notify_participants(room_name="room-number-1", notification_data={"foo": "foo"})
+
+    # Verify that the service checked for existing rooms
+    mock_api_instance.room.list_rooms.assert_called_once()
+
+    # Verify send_data was called
+    mock_api_instance.room.send_data.assert_called_once()
+
+    # Verify aclose was still called after the exception
+    mock_api_instance.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_notify_participants_success_no_room(mock_create_livekit_client):
+    """Test the notify_participants function when the LiveKit room doesn't exist."""
+
+    # Set up the mock LiveKitAPI and its behavior
+    mock_api_instance = mock.Mock()
+    mock_api_instance.room = mock.Mock()
+    mock_api_instance.room.send_data = mock.AsyncMock()
+
+    # Create a proper response object with an empty rooms list
+    class MockResponse:
+        """LiveKit API response mock with empty rooms list."""
+
+        rooms = []
+
+    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
+    mock_api_instance.aclose = mock.AsyncMock()
+    mock_create_livekit_client.return_value = mock_api_instance
+
+    notify_participants(room_name="room-number-1", notification_data={"foo": "foo"})
+
+    # Verify that the service checked for existing rooms
+    mock_api_instance.room.list_rooms.assert_called_once()
+
+    # Verify the send_data method was not called since no room exists
+    mock_api_instance.room.send_data.assert_not_called()
+
+    # Verify the connection was properly closed
+    mock_api_instance.aclose.assert_called_once()
+
+
+@mock.patch("core.utils.create_livekit_client")
+def test_notify_participants_success(mock_create_livekit_client):
+    """Test successful participant notification."""
+
+    # Set up the mock LiveKitAPI and its behavior
+    mock_api_instance = mock.Mock()
+    mock_api_instance.room = mock.Mock()
+    mock_api_instance.room.send_data = mock.AsyncMock()
+
+    class MockResponse:
+        """LiveKit API response mock with non-empty rooms list."""
+
+        rooms = ["room-1"]
+
+    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
+
+    mock_api_instance.aclose = mock.AsyncMock()
+    mock_create_livekit_client.return_value = mock_api_instance
+
+    # Call the function
+    notify_participants(room_name="room-number-1", notification_data={"foo": "foo"})
+
+    # Verify that the service checked for existing rooms
+    mock_api_instance.room.list_rooms.assert_called_once()
+
+    # Verify the send_data method was called
+    mock_api_instance.room.send_data.assert_called_once()
+    send_data_request = mock_api_instance.room.send_data.call_args[0][0]
+    assert send_data_request.room == "room-number-1"
+    assert json.loads(send_data_request.data.decode("utf-8")) == {"foo": "foo"}
+    assert send_data_request.kind == 0  # RELIABLE mode in Livekit protocol
+
+    # Verify aclose was called
+    mock_api_instance.aclose.assert_called_once()
@@ -15,7 +15,15 @@ from django.core.files.storage import default_storage

 import aiohttp
 import botocore
-from livekit.api import AccessToken, LiveKitAPI, VideoGrants
+from asgiref.sync import async_to_sync
+from livekit.api import (  # pylint: disable=E0611
+    AccessToken,
+    ListRoomsRequest,
+    LiveKitAPI,
+    SendDataRequest,
+    TwirpError,
+    VideoGrants,
+)


 def generate_color(identity: str) -> str:
@@ -158,3 +166,37 @@ def create_livekit_client(custom_configuration=None):
    configuration = custom_configuration or settings.LIVEKIT_CONFIGURATION

    return LiveKitAPI(session=custom_session, **configuration)
+
+
+class NotificationError(Exception):
+    """Notification delivery to room participants fails."""
+
+
+@async_to_sync
+async def notify_participants(room_name: str, notification_data: dict):
+    """Send notification data to all participants in a LiveKit room."""
+
+    lkapi = create_livekit_client()
+
+    try:
+        room_response = await lkapi.room.list_rooms(
+            ListRoomsRequest(
+                names=[room_name],
+            )
+        )
+
+        # Check if the room exists
+        if not room_response.rooms:
+            return
+
+        await lkapi.room.send_data(
+            SendDataRequest(
+                room=room_name,
+                data=json.dumps(notification_data).encode("utf-8"),
+                kind="RELIABLE",
+            )
+        )
+    except TwirpError as e:
+        raise NotificationError("Failed to notify room participants") from e
+    finally:
+        await lkapi.aclose()
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-05-26 10:50+0000\n"
+"POT-Creation-Date: 2025-07-11 11:33+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -29,15 +29,15 @@ msgstr "Berechtigungen"
 msgid "Important dates"
 msgstr "Wichtige Daten"

-#: core/admin.py:143
+#: core/admin.py:147
 msgid "No owner"
 msgstr "Kein Eigentümer"

-#: core/admin.py:146
+#: core/admin.py:150
 msgid "Multiple owners"
 msgstr "Mehrere Eigentümer"

-#: core/api/serializers.py:63
+#: core/api/serializers.py:67
 msgid "You must be administrator or owner of a room to add accesses to it."
 msgstr ""
 "Sie müssen Administrator oder Eigentümer eines Raums sein, um Zugriffe "
@@ -251,7 +251,8 @@ msgstr "PIN-Code für den Raum"

 #: core/models.py:392
 msgid "Unique n-digit code that identifies this room in telephony mode."
-msgstr "Eindeutiger n-stelliger Code, der diesen Raum im Telephonmodus identifiziert."
+msgstr ""
+"Eindeutiger n-stelliger Code, der diesen Raum im Telephonmodus identifiziert."

 #: core/models.py:398 core/models.py:552
 msgid "Room"
@@ -366,9 +367,9 @@ msgid "Make sure you have a stable internet connection"
 msgstr "Stellen Sie sicher, dass Sie eine stabile Internetverbindung haben"

 #: core/templates/mail/html/invitation.html:248
-#: core/templates/mail/html/screen_recording.html:240
+#: core/templates/mail/html/screen_recording.html:245
 #: core/templates/mail/text/invitation.txt:21
-#: core/templates/mail/text/screen_recording.txt:22
+#: core/templates/mail/text/screen_recording.txt:23
 #, python-format
 msgid " Thank you for using %(brandname)s. "
 msgstr " Vielen Dank für die Nutzung von %(brandname)s. "
@@ -394,33 +395,41 @@ msgstr ""
 msgid " The recording will expire in %(days)s days. "
 msgstr " Die Aufzeichnung wird in %(days)s Tagen ablaufen. "

-#: core/templates/mail/html/screen_recording.html:201
-#: core/templates/mail/text/screen_recording.txt:10
+#: core/templates/mail/html/screen_recording.html:200
+#: core/templates/mail/text/screen_recording.txt:9
+msgid ""
+" Sharing the recording via link is not yet available. Only organizers can "
+"download it. "
+msgstr ""
+" Die Freigabe der Aufzeichnung per Link ist noch nicht verfügbar. Nur Organisatoren können sie herunterladen. "
+
+#: core/templates/mail/html/screen_recording.html:206
+#: core/templates/mail/text/screen_recording.txt:11
 msgid "To keep this recording permanently:"
 msgstr "So speichern Sie diese Aufzeichnung dauerhaft:"

-#: core/templates/mail/html/screen_recording.html:203
-#: core/templates/mail/text/screen_recording.txt:12
+#: core/templates/mail/html/screen_recording.html:208
+#: core/templates/mail/text/screen_recording.txt:13
 msgid "Click the \"Open\" button below "
 msgstr "Klicken Sie auf den Button „Öffnen“ unten "

-#: core/templates/mail/html/screen_recording.html:204
-#: core/templates/mail/text/screen_recording.txt:13
+#: core/templates/mail/html/screen_recording.html:209
+#: core/templates/mail/text/screen_recording.txt:14
 msgid "Use the \"Download\" button in the interface "
 msgstr "Verwenden Sie den Button „Herunterladen“ in der Oberfläche "

-#: core/templates/mail/html/screen_recording.html:205
-#: core/templates/mail/text/screen_recording.txt:14
+#: core/templates/mail/html/screen_recording.html:210
+#: core/templates/mail/text/screen_recording.txt:15
 msgid "Save the file to your preferred location"
 msgstr "Speichern Sie die Datei an einem gewünschten Ort"

-#: core/templates/mail/html/screen_recording.html:216
-#: core/templates/mail/text/screen_recording.txt:16
+#: core/templates/mail/html/screen_recording.html:221
+#: core/templates/mail/text/screen_recording.txt:17
 msgid "Open"
 msgstr "Öffnen"

-#: core/templates/mail/html/screen_recording.html:225
-#: core/templates/mail/text/screen_recording.txt:18
+#: core/templates/mail/html/screen_recording.html:230
+#: core/templates/mail/text/screen_recording.txt:19
 #, python-format
 msgid ""
 " If you have any questions or need assistance, please contact our support "
@@ -429,18 +438,18 @@ msgstr ""
 " Wenn Sie Fragen haben oder Unterstützung benötigen, wenden Sie sich bitte "
 "an unser Support-Team unter %(support_email)s. "

-#: meet/settings.py:162
+#: meet/settings.py:163
 msgid "English"
 msgstr "Englisch"

-#: meet/settings.py:163
+#: meet/settings.py:164
 msgid "French"
 msgstr "Französisch"

-#: meet/settings.py:164
+#: meet/settings.py:165
 msgid "Dutch"
 msgstr "Niederländisch"

-#: meet/settings.py:165
+#: meet/settings.py:166
 msgid "German"
 msgstr "Deutsch"
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-05-26 10:50+0000\n"
+"POT-Creation-Date: 2025-07-11 11:33+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -29,15 +29,15 @@ msgstr "Permissions"
 msgid "Important dates"
 msgstr "Important dates"

-#: core/admin.py:143
+#: core/admin.py:147
 msgid "No owner"
 msgstr "No owner"

-#: core/admin.py:146
+#: core/admin.py:150
 msgid "Multiple owners"
 msgstr "Multiple owners"

-#: core/api/serializers.py:63
+#: core/api/serializers.py:67
 msgid "You must be administrator or owner of a room to add accesses to it."
 msgstr "You must be administrator or owner of a room to add accesses to it."

@@ -361,9 +361,9 @@ msgid "Make sure you have a stable internet connection"
 msgstr "Make sure you have a stable internet connection"

 #: core/templates/mail/html/invitation.html:248
-#: core/templates/mail/html/screen_recording.html:240
+#: core/templates/mail/html/screen_recording.html:245
 #: core/templates/mail/text/invitation.txt:21
-#: core/templates/mail/text/screen_recording.txt:22
+#: core/templates/mail/text/screen_recording.txt:23
 #, python-format
 msgid " Thank you for using %(brandname)s. "
 msgstr " Thank you for using %(brandname)s. "
@@ -389,33 +389,42 @@ msgstr ""
 msgid " The recording will expire in %(days)s days. "
 msgstr " The recording will expire in %(days)s days. "

-#: core/templates/mail/html/screen_recording.html:201
-#: core/templates/mail/text/screen_recording.txt:10
+#: core/templates/mail/html/screen_recording.html:200
+#: core/templates/mail/text/screen_recording.txt:9
+msgid ""
+" Sharing the recording via link is not yet available. Only organizers can "
+"download it. "
+msgstr ""
+" Sharing the recording via link is not yet available. Only organizers can "
+"download it. "
+
+#: core/templates/mail/html/screen_recording.html:206
+#: core/templates/mail/text/screen_recording.txt:11
 msgid "To keep this recording permanently:"
 msgstr "To keep this recording permanently:"

-#: core/templates/mail/html/screen_recording.html:203
-#: core/templates/mail/text/screen_recording.txt:12
+#: core/templates/mail/html/screen_recording.html:208
+#: core/templates/mail/text/screen_recording.txt:13
 msgid "Click the \"Open\" button below "
 msgstr "Click the \"Open\" button below "

-#: core/templates/mail/html/screen_recording.html:204
-#: core/templates/mail/text/screen_recording.txt:13
+#: core/templates/mail/html/screen_recording.html:209
+#: core/templates/mail/text/screen_recording.txt:14
 msgid "Use the \"Download\" button in the interface "
 msgstr "Use the \"Download\" button in the interface "

-#: core/templates/mail/html/screen_recording.html:205
-#: core/templates/mail/text/screen_recording.txt:14
+#: core/templates/mail/html/screen_recording.html:210
+#: core/templates/mail/text/screen_recording.txt:15
 msgid "Save the file to your preferred location"
 msgstr "Save the file to your preferred location"

-#: core/templates/mail/html/screen_recording.html:216
-#: core/templates/mail/text/screen_recording.txt:16
+#: core/templates/mail/html/screen_recording.html:221
+#: core/templates/mail/text/screen_recording.txt:17
 msgid "Open"
 msgstr "Open"

-#: core/templates/mail/html/screen_recording.html:225
-#: core/templates/mail/text/screen_recording.txt:18
+#: core/templates/mail/html/screen_recording.html:230
+#: core/templates/mail/text/screen_recording.txt:19
 #, python-format
 msgid ""
 " If you have any questions or need assistance, please contact our support "
@@ -424,18 +433,18 @@ msgstr ""
 " If you have any questions or need assistance, please contact our support "
 "team at %(support_email)s. "

-#: meet/settings.py:162
+#: meet/settings.py:163
 msgid "English"
 msgstr "English"

-#: meet/settings.py:163
+#: meet/settings.py:164
 msgid "French"
 msgstr "French"

-#: meet/settings.py:164
+#: meet/settings.py:165
 msgid "Dutch"
 msgstr "Dutch"

-#: meet/settings.py:165
+#: meet/settings.py:166
 msgid "German"
 msgstr "German"
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-05-26 10:50+0000\n"
+"POT-Creation-Date: 2025-07-11 11:33+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: antoine.lebaud@mail.numerique.gouv.fr\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -29,15 +29,15 @@ msgstr "Permissions"
 msgid "Important dates"
 msgstr "Dates importantes"

-#: core/admin.py:143
+#: core/admin.py:147
 msgid "No owner"
 msgstr "Pas de propriétaire"

-#: core/admin.py:146
+#: core/admin.py:150
 msgid "Multiple owners"
 msgstr "Plusieurs propriétaires"

-#: core/api/serializers.py:63
+#: core/api/serializers.py:67
 msgid "You must be administrator or owner of a room to add accesses to it."
 msgstr ""
 "Vous devez être administrateur ou propriétaire d'une salle pour y ajouter "
@@ -138,8 +138,8 @@ msgid ""
 "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/"
 "_ characters."
 msgstr ""
-"Entrez un sub valide. Cette valeur ne peut contenir que des lettres, "
-"des chiffres et les caractères @/./+/-/_."
+"Entrez un sub valide. Cette valeur ne peut contenir que des lettres, des "
+"chiffres et les caractères @/./+/-/_."

 #: core/models.py:144
 msgid "sub"
@@ -252,7 +252,8 @@ msgstr "Code PIN de la salle"

 #: core/models.py:392
 msgid "Unique n-digit code that identifies this room in telephony mode."
-msgstr "Code unique à n chiffres qui identifie cette salle en mode téléphonique."
+msgstr ""
+"Code unique à n chiffres qui identifie cette salle en mode téléphonique."

 #: core/models.py:398 core/models.py:552
 msgid "Room"
@@ -271,9 +272,8 @@ msgid ""
 "Enter an identifier for the worker recording.This ID is retained even when "
 "the worker stops, allowing for easy tracking."
 msgstr ""
-"Entrez un identifiant pour l'enregistrement du Worker. Cet identifiant "
-"est conservé même lorsque le Worker s'arrête, permettant un suivi "
-"facile."
+"Entrez un identifiant pour l'enregistrement du Worker. Cet identifiant est "
+"conservé même lorsque le Worker s'arrête, permettant un suivi facile."

 #: core/models.py:573
 msgid "Recording mode"
@@ -367,9 +367,9 @@ msgid "Make sure you have a stable internet connection"
 msgstr "Assurez-vous d'avoir une connexion Internet stable"

 #: core/templates/mail/html/invitation.html:248
-#: core/templates/mail/html/screen_recording.html:240
+#: core/templates/mail/html/screen_recording.html:245
 #: core/templates/mail/text/invitation.txt:21
-#: core/templates/mail/text/screen_recording.txt:22
+#: core/templates/mail/text/screen_recording.txt:23
 #, python-format
 msgid " Thank you for using %(brandname)s. "
 msgstr " Merci d'utiliser %(brandname)s. "
@@ -395,33 +395,41 @@ msgstr ""
 msgid " The recording will expire in %(days)s days. "
 msgstr " L'enregistrement expirera dans %(days)s jours. "

-#: core/templates/mail/html/screen_recording.html:201
-#: core/templates/mail/text/screen_recording.txt:10
+#: core/templates/mail/html/screen_recording.html:200
+#: core/templates/mail/text/screen_recording.txt:9
+msgid ""
+" Sharing the recording via link is not yet available. Only organizers can "
+"download it. "
+msgstr ""
+"Le partage de l'enregistrement via lien n'est pas encore disponible. Seuls les organisateurs peuvent le télécharger."
+
+#: core/templates/mail/html/screen_recording.html:206
+#: core/templates/mail/text/screen_recording.txt:11
 msgid "To keep this recording permanently:"
 msgstr "Pour conserver cet enregistrement de façon permanente :"

-#: core/templates/mail/html/screen_recording.html:203
-#: core/templates/mail/text/screen_recording.txt:12
+#: core/templates/mail/html/screen_recording.html:208
+#: core/templates/mail/text/screen_recording.txt:13
 msgid "Click the \"Open\" button below "
 msgstr "Cliquez sur le bouton \"Ouvrir\" ci-dessous "

-#: core/templates/mail/html/screen_recording.html:204
-#: core/templates/mail/text/screen_recording.txt:13
+#: core/templates/mail/html/screen_recording.html:209
+#: core/templates/mail/text/screen_recording.txt:14
 msgid "Use the \"Download\" button in the interface "
 msgstr "Utilisez le bouton \"Télécharger\" dans l'interface "

-#: core/templates/mail/html/screen_recording.html:205
-#: core/templates/mail/text/screen_recording.txt:14
+#: core/templates/mail/html/screen_recording.html:210
+#: core/templates/mail/text/screen_recording.txt:15
 msgid "Save the file to your preferred location"
 msgstr "Enregistrez le fichier à l'emplacement de votre choix"

-#: core/templates/mail/html/screen_recording.html:216
-#: core/templates/mail/text/screen_recording.txt:16
+#: core/templates/mail/html/screen_recording.html:221
+#: core/templates/mail/text/screen_recording.txt:17
 msgid "Open"
 msgstr "Ouvrir"

-#: core/templates/mail/html/screen_recording.html:225
-#: core/templates/mail/text/screen_recording.txt:18
+#: core/templates/mail/html/screen_recording.html:230
+#: core/templates/mail/text/screen_recording.txt:19
 #, python-format
 msgid ""
 " If you have any questions or need assistance, please contact our support "
@@ -430,18 +438,18 @@ msgstr ""
 " Si vous avez des questions ou besoin d'assistance, veuillez contacter notre "
 "équipe d'assistance à %(support_email)s. "

-#: meet/settings.py:162
+#: meet/settings.py:163
 msgid "English"
 msgstr "Anglais"

-#: meet/settings.py:163
+#: meet/settings.py:164
 msgid "French"
 msgstr "Français"

-#: meet/settings.py:164
+#: meet/settings.py:165
 msgid "Dutch"
 msgstr "Néerlandais"

-#: meet/settings.py:165
+#: meet/settings.py:166
 msgid "German"
 msgstr "Allemand"
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-05-26 10:50+0000\n"
+"POT-Creation-Date: 2025-07-11 11:33+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -29,15 +29,15 @@ msgstr "Rechten"
 msgid "Important dates"
 msgstr "Belangrijke datums"

-#: core/admin.py:143
+#: core/admin.py:147
 msgid "No owner"
 msgstr "Geen eigenaar"

-#: core/admin.py:146
+#: core/admin.py:150
 msgid "Multiple owners"
 msgstr "Meerdere eigenaren"

-#: core/api/serializers.py:63
+#: core/api/serializers.py:67
 msgid "You must be administrator or owner of a room to add accesses to it."
 msgstr ""
 "Je moet beheerder of eigenaar van een ruimte zijn om toegang toe te voegen."
@@ -247,7 +247,8 @@ msgstr "Pincode van de kamer"

 #: core/models.py:392
 msgid "Unique n-digit code that identifies this room in telephony mode."
-msgstr "Unieke n-cijferige code die deze kamer identificeert in telefonie-modus."
+msgstr ""
+"Unieke n-cijferige code die deze kamer identificeert in telefonie-modus."

 #: core/models.py:398 core/models.py:552
 msgid "Room"
@@ -361,9 +362,9 @@ msgid "Make sure you have a stable internet connection"
 msgstr "Zorg ervoor dat je een stabiele internetverbinding hebt"

 #: core/templates/mail/html/invitation.html:248
-#: core/templates/mail/html/screen_recording.html:240
+#: core/templates/mail/html/screen_recording.html:245
 #: core/templates/mail/text/invitation.txt:21
-#: core/templates/mail/text/screen_recording.txt:22
+#: core/templates/mail/text/screen_recording.txt:23
 #, python-format
 msgid " Thank you for using %(brandname)s. "
 msgstr " Bedankt voor het gebruik van %(brandname)s. "
@@ -389,33 +390,41 @@ msgstr ""
 msgid " The recording will expire in %(days)s days. "
 msgstr " De opname verloopt over %(days)s dagen. "

-#: core/templates/mail/html/screen_recording.html:201
-#: core/templates/mail/text/screen_recording.txt:10
+#: core/templates/mail/html/screen_recording.html:200
+#: core/templates/mail/text/screen_recording.txt:9
+msgid ""
+" Sharing the recording via link is not yet available. Only organizers can "
+"download it. "
+msgstr ""
+"Het delen van de opname via een link is nog niet beschikbaar. Alleen organisatoren kunnen deze downloaden."
+
+#: core/templates/mail/html/screen_recording.html:206
+#: core/templates/mail/text/screen_recording.txt:11
 msgid "To keep this recording permanently:"
 msgstr "Om deze opname permanent te bewaren:"

-#: core/templates/mail/html/screen_recording.html:203
-#: core/templates/mail/text/screen_recording.txt:12
+#: core/templates/mail/html/screen_recording.html:208
+#: core/templates/mail/text/screen_recording.txt:13
 msgid "Click the \"Open\" button below "
 msgstr "Klik op de \"Openen\"-knop hieronder "

-#: core/templates/mail/html/screen_recording.html:204
-#: core/templates/mail/text/screen_recording.txt:13
+#: core/templates/mail/html/screen_recording.html:209
+#: core/templates/mail/text/screen_recording.txt:14
 msgid "Use the \"Download\" button in the interface "
 msgstr "Gebruik de \"Download\"-knop in de interface "

-#: core/templates/mail/html/screen_recording.html:205
-#: core/templates/mail/text/screen_recording.txt:14
+#: core/templates/mail/html/screen_recording.html:210
+#: core/templates/mail/text/screen_recording.txt:15
 msgid "Save the file to your preferred location"
 msgstr "Sla het bestand op naar je gewenste locatie"

-#: core/templates/mail/html/screen_recording.html:216
-#: core/templates/mail/text/screen_recording.txt:16
+#: core/templates/mail/html/screen_recording.html:221
+#: core/templates/mail/text/screen_recording.txt:17
 msgid "Open"
 msgstr "Openen"

-#: core/templates/mail/html/screen_recording.html:225
-#: core/templates/mail/text/screen_recording.txt:18
+#: core/templates/mail/html/screen_recording.html:230
+#: core/templates/mail/text/screen_recording.txt:19
 #, python-format
 msgid ""
 " If you have any questions or need assistance, please contact our support "
@@ -424,18 +433,18 @@ msgstr ""
 " Als je vragen hebt of hulp nodig hebt, neem dan contact op met ons support "
 "team via %(support_email)s. "

-#: meet/settings.py:162
+#: meet/settings.py:163
 msgid "English"
 msgstr "Engels"

-#: meet/settings.py:163
+#: meet/settings.py:164
 msgid "French"
 msgstr "Frans"

-#: meet/settings.py:164
+#: meet/settings.py:165
 msgid "Dutch"
 msgstr "Nederlands"

-#: meet/settings.py:165
+#: meet/settings.py:166
 msgid "German"
 msgstr "Duits"
@@ -430,6 +430,17 @@ class Base(Configuration):
    OIDC_RP_SCOPES = values.Value(
        "openid email", environ_name="OIDC_RP_SCOPES", environ_prefix=None
    )
+    OIDC_USE_PKCE = values.BooleanValue(
+        default=False, environ_name="OIDC_USE_PKCE", environ_prefix=None
+    )
+    OIDC_PKCE_CODE_CHALLENGE_METHOD = values.Value(
+        default="S256",
+        environ_name="OIDC_PKCE_CODE_CHALLENGE_METHOD",
+        environ_prefix=None,
+    )
+    OIDC_PKCE_CODE_VERIFIER_SIZE = values.IntegerValue(
+        default=64, environ_name="OIDC_PKCE_CODE_VERIFIER_SIZE", environ_prefix=None
+    )
    LOGIN_REDIRECT_URL = values.Value(
        None, environ_name="LOGIN_REDIRECT_URL", environ_prefix=None
    )
@@ -481,6 +492,14 @@ class Base(Configuration):
        ),
        "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
    }
+    LIVEKIT_FORCE_WSS_PROTOCOL = values.BooleanValue(
+        False, environ_name="LIVEKIT_FORCE_WSS_PROTOCOL", environ_prefix=None
+    )
+    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND = values.BooleanValue(
+        environ_name="LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND",
+        environ_prefix=None,
+        default=False,
+    )
    LIVEKIT_VERIFY_SSL = values.BooleanValue(
        True, environ_name="LIVEKIT_VERIFY_SSL", environ_prefix=None
    )
@@ -525,6 +544,11 @@ class Base(Configuration):
    RECORDING_EXPIRATION_DAYS = values.IntegerValue(
        None, environ_name="RECORDING_EXPIRATION_DAYS", environ_prefix=None
    )
+    # Recording max duration in milliseconds - must be synced with LiveKit Egress configuration
+    # Set to None for no max duration
+    RECORDING_MAX_DURATION = values.IntegerValue(
+        None, environ_name="RECORDING_MAX_DURATION", environ_prefix=None
+    )
    SUMMARY_SERVICE_ENDPOINT = values.Value(
        None, environ_name="SUMMARY_SERVICE_ENDPOINT", environ_prefix=None
    )
@@ -609,6 +633,16 @@ class Base(Configuration):
        environ_name="ROOM_TELEPHONY_PIN_MAX_RETRIES",
        environ_prefix=None,
    )
+    ROOM_TELEPHONY_PHONE_NUMBER = values.Value(
+        None,
+        environ_name="ROOM_TELEPHONY_PHONE_NUMBER",
+        environ_prefix=None,
+    )
+    ROOM_TELEPHONY_DEFAULT_COUNTRY = values.Value(
+        "US",
+        environ_name="ROOM_TELEPHONY_DEFAULT_COUNTRY",
+        environ_prefix=None,
+    )

    # pylint: disable=invalid-name
    @property
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name = "meet"
-version = "0.1.27"
+version = "0.1.33"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
    "Development Status :: 5 - Production/Stable",
@@ -1,7 +1,7 @@
 {
  "name": "meet",
  "private": true,
-  "version": "0.1.27",
+  "version": "0.1.33",
  "type": "module",
  "scripts": {
    "dev": "panda codegen && vite",
@@ -13,49 +13,54 @@
    "check": "prettier --check ./src"
  },
  "dependencies": {
-    "@livekit/components-react": "2.9.12",
+    "@livekit/components-react": "2.9.13",
    "@livekit/components-styles": "1.1.6",
    "@livekit/track-processors": "0.5.7",
-    "@pandacss/preset-panda": "0.53.6",
-    "@react-aria/toast": "3.0.2",
+    "@pandacss/preset-panda": "0.54.0",
+    "@react-aria/toast": "3.0.5",
+    "@react-types/overlays": "3.9.0",
    "@remixicon/react": "4.6.0",
-    "@tanstack/react-query": "5.76.0",
+    "@tanstack/react-query": "5.81.5",
    "@timephy/rnnoise-wasm": "1.0.0",
    "crisp-sdk-web": "1.0.25",
+    "derive-valtio": "0.2.0",
    "hoofd": "1.7.3",
-    "i18next": "25.1.2",
-    "i18next-browser-languagedetector": "8.1.0",
+    "humanize-duration": "3.33.0",
+    "i18next": "25.3.1",
+    "i18next-browser-languagedetector": "8.2.0",
    "i18next-parser": "9.3.0",
    "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.13.8",
-    "posthog-js": "1.240.6",
+    "libphonenumber-js": "1.12.10",
+    "livekit-client": "2.15.5",
+    "posthog-js": "1.256.2",
    "react": "18.3.1",
-    "react-aria-components": "1.8.0",
+    "react-aria-components": "1.10.1",
    "react-dom": "18.3.1",
    "react-i18next": "15.1.1",
    "use-sound": "5.0.0",
    "valtio": "2.1.5",
-    "wouter": "3.7.0"
+    "wouter": "3.7.1"
  },
  "devDependencies": {
-    "@pandacss/dev": "0.53.6",
-    "@tanstack/eslint-plugin-query": "5.74.7",
-    "@tanstack/react-query-devtools": "5.76.0",
-    "@types/node": "22.15.17",
+    "@pandacss/dev": "0.54.0",
+    "@tanstack/eslint-plugin-query": "5.81.2",
+    "@tanstack/react-query-devtools": "5.81.5",
+    "@types/humanize-duration": "3.27.4",
+    "@types/node": "22.16.0",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.32.0",
-    "@typescript-eslint/parser": "8.32.0",
-    "@vitejs/plugin-react": "4.4.1",
+    "@typescript-eslint/eslint-plugin": "8.35.1",
+    "@typescript-eslint/parser": "8.35.1",
+    "@vitejs/plugin-react": "4.6.0",
    "eslint": "8.57.0",
    "eslint-config-prettier": "10.1.5",
    "eslint-plugin-jsx-a11y": "6.10.2",
    "eslint-plugin-react-hooks": "5.2.0",
    "eslint-plugin-react-refresh": "0.4.20",
-    "postcss": "8.5.3",
-    "prettier": "3.5.3",
+    "postcss": "8.5.6",
+    "prettier": "3.6.2",
    "typescript": "5.8.3",
-    "vite": "6.2.7",
+    "vite": "7.0.2",
    "vite-tsconfig-paths": "5.1.4"
  }
 }
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
+  <defs>
+    <style>
+      .st0, .st1, .st2, .st3, .st4, .st5 {
+        fill: none;
+      }
+
+      .st6 {
+        fill: #6dd58c;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st9, .st10 {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st10 {
+        stroke-width: 3px;
+      }
+
+      .st6, .st1, .st7, .st8, .st4, .st5, .st10 {
+        stroke: #191c1e;
+      }
+
+      .st11, .st7, .st12, .st9 {
+        fill: #fff;
+      }
+
+      .st11, .st3 {
+        stroke: #000;
+        stroke-miterlimit: 10;
+      }
+
+      .st11, .st3, .st9 {
+        stroke-width: 5px;
+      }
+
+      .st2, .st9 {
+        stroke: #898989;
+      }
+
+      .st8 {
+        fill: #ff8669;
+      }
+
+      .st13 {
+        fill: #e3e3fb;
+      }
+
+      .st14 {
+        fill: #f7f7f7;
+      }
+
+      .st4, .st5 {
+        stroke-width: 4px;
+      }
+
+      .st5 {
+        stroke-linecap: square;
+      }
+
+      .st15 {
+        fill: #ca3632;
+      }
+
+      .st10 {
+        fill: #ffb929;
+      }
+    </style>
+  </defs>
+  <rect class="st12" x=".53" y=".53" width="1078.61" height="1080.36"/>
+  <path class="st12" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st1" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st12" d="M960.08,256.93h-110c-12.94,0-23.43-10.49-23.43-23.43v-71.56c0-12.94-10.48-23.43-23.42-23.44h-266.94c-12.94,0-23.43,10.49-23.43,23.44h0v71.56c0,12.94-10.49,23.43-23.43,23.43H120.5v137.62h839.58"/>
+  <path class="st8" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st10" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st6" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st1" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st7" d="M625.31,322.08h-27.15c-4.35,0-7.88,3.53-7.88,7.88h0v17.19c0,4.35,3.53,7.88,7.88,7.88h27.15c4.35,0,7.88-3.53,7.88-7.88h0v-17.19c0-4.35-3.53-7.88-7.88-7.88h0Z"/>
+  <path class="st12" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <path class="st1" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <g>
+    <ellipse class="st4" cx="707.63" cy="299.5" rx="18.37" ry="18.5"/>
+    <path class="st5" d="M624,299h63"/>
+    <circle class="st4" cx="643.5" cy="339.5" r="18.5"/>
+    <path class="st5" d="M728,339h-63"/>
+  </g>
+  <path class="st14" d="M192.29,138.5h767.79v118.43H120.5v-46.64c0-39.62,32.17-71.79,71.79-71.79h0Z"/>
+  <path class="st0" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st15" d="M382.41,636.74l39.92,39.92,13.47-13.47-188.53-188.53-13.47,13.47,11.35,11.35h-5.58c-5.26,0-9.52,4.26-9.52,9.52v133.31c0,5.26,4.26,9.52,9.52,9.52h133.31c5.26,0,9.52-4.26,9.52-9.52v-5.58h.01ZM363.37,617.69v15.1h-114.27v-114.27h15.1l99.17,99.17h0ZM439.55,633.17c0,2.02-1.19,3.6-2.78,4.33l-16.27-16.27v-75.65l-38.09,26.66v10.9l-19.04-19.04v-45.57h-45.57l-19.04-19.04h74.14c5.26,0,9.52,4.26,9.52,9.52v39.99l49.64-34.75c3.16-2.21,7.49.05,7.49,3.9v115.02h0Z"/>
+  <path class="st15" d="M375.25,866.34l43.58,43.58,12.93-12.93-180.97-180.97-12.93,12.93,51.25,51.25v14.49c0,25.24,20.46,45.7,45.7,45.7,4.41,0,8.67-.62,12.7-1.79l14.17,14.17c-8.17,3.79-17.28,5.9-26.87,5.9-32.23,0-58.9-23.84-63.33-54.84h-18.43c4.21,38.13,34.49,68.4,72.62,72.62v37.06h18.28v-37.06c11.28-1.25,21.87-4.77,31.3-10.11h0ZM330.71,821.81c-11.87-1.78-21.25-11.16-23.03-23.03l23.03,23.03ZM402.21,841.85l-13.18-13.18c4.65-7.4,7.82-15.82,9.11-24.84h18.43c-1.55,14.04-6.64,27.02-14.35,38.03h0ZM375.62,815.27l-14.15-14.15c.5-2.06.76-4.21.76-6.43v-36.56c0-15.14-12.28-27.42-27.42-27.42-11.83,0-21.91,7.49-25.76,17.99l-13.68-13.68c7.94-13.52,22.63-22.59,39.44-22.59,25.24,0,45.7,20.46,45.7,45.7v36.56c0,7.4-1.76,14.39-4.88,20.58h-.01Z"/>
+  <path d="M597.6,312.73c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM602.4,301.55c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM619.98,315.93h25.57v-6.39h-25.57v6.39ZM632.76,344.69c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM637.56,333.51c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM594.41,341.5v6.39h25.57v-6.39h-25.57Z"/>
+  <line class="st2" x1="960.08" y1="394.55" x2="836.91" y2="394.55"/>
+  <path class="st9" d="M527.76,394.55H120.5v-137.62h368.93c12.94,0,23.43-10.49,23.43-23.43v-71.56c0-12.95,10.49-23.44,23.43-23.44h266.94c12.94,0,23.43,10.5,23.42,23.44v71.56c0,2.09.27,4.12.79,6.05,1,3.77,2.92,7.17,5.51,9.94,4.28,4.58,10.37,7.44,17.13,7.44h110"/>
+  <path class="st13" d="M645.52,274.8h314.56v101.2h-314.56c-23.81,0-43.12-22.66-43.12-50.61h0c.01-27.94,19.31-50.59,43.12-50.59h0Z"/>
+  <g>
+    <path class="st13" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71h-181.11c-43.65,0-79.03-35.38-79.03-79.03,0-21.82,8.86-41.56,23.16-55.86,14.3-14.29,34.06-23.13,55.87-23.13h179.74c12.93,23.89,20.27,51.24,20.27,80.31Z"/>
+    <path d="M656.78,350.02v9.98h39.93v-9.98h-39.93ZM724.16,337.54c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.46,17.47,17.46,17.47-7.82,17.47-17.46-7.82-17.47-17.47-17.47ZM724.16,362.49c-4.13,0-7.49-3.35-7.49-7.48s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.36,7.48-7.49,7.48ZM696.71,300.11v9.98h39.93v-9.98h-39.93ZM669.26,287.63c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.47,17.47,17.47,17.47-7.82,17.47-17.47-7.82-17.47-17.47-17.47ZM669.26,312.59c-4.13,0-7.49-3.36-7.49-7.49s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.35,7.49-7.49,7.49Z"/>
+  </g>
+  <line class="st2" x1="813.4" y1="432.85" x2="551.26" y2="432.85"/>
+  <path class="st3" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71-5.35,10.32-11.74,20.02-19.02,28.96-30.98,38.03-78.19,62.32-131.07,62.32s-100.09-24.29-131.07-62.32c-23.7-29.09-37.92-66.22-37.92-106.67,0-93.33,75.66-168.99,168.99-168.99,64.26,0,120.15,35.87,148.72,88.68,12.93,23.89,20.27,51.24,20.27,80.31h0Z"/>
+  <polygon class="st11" points="705.12 406.95 681.79 637.91 746.21 597.51 802.28 751.56 852.2 733.39 796.14 579.34 871.46 568.88 705.12 406.95"/>
+</svg>
@@ -29,8 +29,19 @@ export interface ApiConfig {
    is_enabled?: boolean
    available_modes?: RecordingMode[]
    expiration_days?: number
+    max_duration?: number
+  }
+  telephony: {
+    enabled: boolean
+    phone_number?: string
+    default_country?: string
  }
  manifest_link?: string
+  livekit: {
+    url: string
+    force_wss_protocol: boolean
+    enable_firefox_proxy_workaround: boolean
+  }
 }

 const fetchConfig = (): Promise<ApiConfig> => {
@@ -1,100 +1,187 @@
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
+import { Bold, Button, Dialog, type DialogProps, P, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
 import { css } from '@/styled-system/css'
+import { ApiAccessLevel, ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'

 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
-  roomId,
+  room,
  ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('home')
-  const roomUrl = getRouteUrl('room', roomId)
+}: { room: null | ApiRoom } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('home', { keyPrefix: 'laterMeetingDialog' })

-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
+  const roomUrl = room && getRouteUrl('room', room?.slug)
+  const telephony = useTelephony()

  const [isHovered, setIsHovered] = useState(false)

+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && room?.pin_code
+  }, [telephony?.enabled, room?.pin_code])
+
+  const {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  } = useCopyRoomToClipboard(room || undefined)
+
  return (
-    <Dialog
-      isOpen={!!roomId}
-      {...dialogProps}
-      title={t('laterMeetingDialog.heading')}
-    >
-      <P>{t('laterMeetingDialog.description')}</P>
-      <Button
-        variant={isCopied ? 'success' : 'primary'}
-        size="sm"
-        fullWidth
-        aria-label={t('laterMeetingDialog.copy')}
-        style={{
-          justifyContent: 'start',
-        }}
-        onPress={() => {
-          navigator.clipboard.writeText(roomUrl)
-          setIsCopied(true)
-        }}
-        onHoverChange={setIsHovered}
-        data-attr="later-dialog-copy"
-      >
-        {isCopied ? (
-          <>
-            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-            {t('laterMeetingDialog.copied')}
-          </>
-        ) : (
-          <>
-            <RiFileCopyLine
-              size={18}
-              style={{ marginRight: '8px', minWidth: '18px' }}
-            />
-            {isHovered ? (
-              t('laterMeetingDialog.copy')
-            ) : (
+    <Dialog isOpen={!!room} {...dialogProps} title={t('heading')}>
+      <P>{t('description')}</P>
+      {!!roomUrl && (
+        <>
+          {isTelephonyReadyForUse ? (
+            <div
+              className={css({
+                width: '100%',
+                backgroundColor: 'gray.50',
+                borderRadius: '0.75rem',
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '1.75rem 1.5rem',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
+              })}
+            >
              <div
-                style={{
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  userSelect: 'none',
-                  textWrap: 'nowrap',
-                }}
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                })}
              >
-                {roomUrl.replace(/^https?:\/\//, '')}
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                  </Button>
+                )}
              </div>
-            )}
-          </>
-        )}
-      </Button>
-      <HStack>
-        <div
-          className={css({
-            backgroundColor: 'primary.200',
-            borderRadius: '50%',
-            padding: '4px',
-            marginTop: '1rem',
-          })}
-        >
-          <RiSpam2Fill
-            size={22}
-            className={css({
-              fill: 'primary.500',
-            })}
-          />
-        </div>
-        <Text variant="sm" style={{ marginTop: '1rem' }}>
-          {t('laterMeetingDialog.permissions')}
-        </Text>
-      </HStack>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(room?.pin_code)}
+                </Text>
+              </div>
+              <Button
+                variant={isCopied ? 'success' : 'tertiaryText'}
+                size="sm"
+                fullWidth
+                aria-label={t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="later-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant={isCopied ? 'success' : 'primary'}
+              size="sm"
+              fullWidth
+              aria-label={t('copy')}
+              style={{
+                justifyContent: 'start',
+              }}
+              onPress={copyRoomToClipboard}
+              onHoverChange={setIsHovered}
+              data-attr="later-dialog-copy"
+            >
+              {isCopied ? (
+                <>
+                  <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                  {t('copied')}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine
+                    size={18}
+                    style={{ marginRight: '8px', minWidth: '18px' }}
+                  />
+                  {isHovered ? (
+                    t('copy')
+                  ) : (
+                    <div
+                      style={{
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        userSelect: 'none',
+                        textWrap: 'nowrap',
+                      }}
+                    >
+                      {roomUrl?.replace(/^https?:\/\//, '')}
+                    </div>
+                  )}
+                </>
+              )}
+            </Button>
+          )}
+          {room?.access_level == ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
+                className={css({
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
+                })}
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
+        </>
+      )}
    </Dialog>
  )
 }
@@ -18,6 +18,7 @@ import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'

 const Columns = ({ children }: { children?: ReactNode }) => {
  return (
@@ -153,7 +154,7 @@ export const Home = () => {
  } = usePersistentUserChoices()

  const { mutateAsync: createRoom } = useCreateRoom()
-  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
+  const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)

  const { data } = useConfig()

@@ -202,7 +203,7 @@ export const Home = () => {
                      onAction={() => {
                        const slug = generateRoomId()
                        createRoom({ slug, username }).then((data) =>
-                          setLaterRoomId(data.slug)
+                          setLaterRoom(data)
                        )
                      }}
                      data-attr="create-option-later"
@@ -251,8 +252,8 @@ export const Home = () => {
          </RightColumn>
        </Columns>
        <LaterMeetingDialog
-          roomId={laterRoomId ?? ''}
-          onOpenChange={() => setLaterRoomId(null)}
+          room={laterRoom}
+          onOpenChange={() => setLaterRoom(null)}
        />
      </Screen>
    </UserAware>
@@ -18,7 +18,6 @@ import {
  ANIMATION_DURATION,
  ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

 export const MainNotificationToast = () => {
  const room = useRoomContext()
@@ -72,26 +71,31 @@ export const MainNotificationToast = () => {
    ) => {
      const notification = decodeNotificationDataReceived(payload)

-      if (!participant || !notification) return
+      if (!notification) return

      switch (notification.type) {
        case NotificationType.ParticipantMuted:
-          toastQueue.add(
-            {
-              participant,
-              type: NotificationType.ParticipantMuted,
-            },
-            { timeout: NotificationDuration.ALERT }
-          )
+          if (participant) {
+            toastQueue.add(
+              {
+                participant,
+                type: NotificationType.ParticipantMuted,
+              },
+              { timeout: NotificationDuration.ALERT }
+            )
+          }
+
          break
        case NotificationType.ReactionReceived:
-          if (notification.data?.emoji)
+          if (notification.data?.emoji && participant)
            handleEmoji(notification.data.emoji, participant)
          break
        case NotificationType.TranscriptionStarted:
        case NotificationType.TranscriptionStopped:
        case NotificationType.ScreenRecordingStarted:
        case NotificationType.ScreenRecordingStopped:
+        case NotificationType.TranscriptionLimitReached:
+        case NotificationType.ScreenRecordingLimitReached:
          toastQueue.add(
            {
              participant,
@@ -151,17 +155,14 @@ export const MainNotificationToast = () => {

  useEffect(() => {
    const handleNotificationReceived = (
-      prevMetadataStr: string | undefined,
+      changedAttributes: Record<string, string>,
      participant: Participant
    ) => {
      if (!participant) return
      if (isMobileBrowser()) return
      if (participant.isLocal) return

-      const prevMetadata = safeParseMetadata(prevMetadataStr)
-      const metadata = safeParseMetadata(participant.metadata)
-
-      if (prevMetadata?.raised == metadata?.raised) return
+      if (!('handRaisedAt' in changedAttributes)) return

      const existingToast = toastQueue.visibleToasts.find(
        (toast) =>
@@ -169,12 +170,12 @@ export const MainNotificationToast = () => {
          toast.content.type === NotificationType.HandRaised
      )

-      if (existingToast && prevMetadata.raised && !metadata.raised) {
+      if (existingToast && !changedAttributes?.handRaisedAt) {
        toastQueue.close(existingToast.key)
        return
      }

-      if (!existingToast && !prevMetadata.raised && metadata.raised) {
+      if (!existingToast && !!changedAttributes?.handRaisedAt) {
        triggerNotificationSound(NotificationType.HandRaised)
        toastQueue.add(
          {
@@ -186,10 +187,13 @@ export const MainNotificationToast = () => {
      }
    }

-    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+    room.on(RoomEvent.ParticipantAttributesChanged, handleNotificationReceived)

    return () => {
-      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+      room.off(
+        RoomEvent.ParticipantAttributesChanged,
+        handleNotificationReceived
+      )
    }
  }, [room, triggerNotificationSound])

@@ -8,7 +8,9 @@ export enum NotificationType {
  ParticipantWaiting = 'participantWaiting',
  TranscriptionStarted = 'transcriptionStarted',
  TranscriptionStopped = 'transcriptionStopped',
+  TranscriptionLimitReached = 'transcriptionLimitReached',
  ScreenRecordingStarted = 'screenRecordingStarted',
  ScreenRecordingStopped = 'screenRecordingStopped',
+  ScreenRecordingLimitReached = 'screenRecordingLimitReached',
  RecordingSaving = 'recordingSaving',
 }
@@ -19,10 +19,14 @@ export function ToastAnyRecording({ state, ...props }: ToastProps) {
        return 'transcript.started'
      case NotificationType.TranscriptionStopped:
        return 'transcript.stopped'
+      case NotificationType.TranscriptionLimitReached:
+        return 'transcript.limitReached'
      case NotificationType.ScreenRecordingStarted:
        return 'screenRecording.started'
      case NotificationType.ScreenRecordingStopped:
        return 'screenRecording.stopped'
+      case NotificationType.ScreenRecordingLimitReached:
+        return 'screenRecording.limitReached'
      default:
        return
    }
@@ -40,7 +44,7 @@ export function ToastAnyRecording({ state, ...props }: ToastProps) {
        gap={0}
      >
        {t(key, {
-          name: participant.name,
+          name: participant?.name,
        })}
      </HStack>
    </StyledToastContainer>
@@ -29,6 +29,9 @@ export function ToastJoined({ state, ...props }: ToastProps) {
  )
  const layoutContext = useMaybeLayoutContext()
  const participant = props.toast.content.participant
+
+  if (!participant) return
+
  const trackReference = {
    participant,
    publication: participant.getTrackPublication(Source.Camera),
@@ -27,7 +27,7 @@ export function ToastMessageReceived({ state, ...props }: ToastProps) {
    }
  }, [isChatOpen, toast, state])

-  if (isChatOpen) return null
+  if (isChatOpen || !participant) return null

  return (
    <StyledToastContainer {...toastProps} ref={ref}>
@@ -10,6 +10,9 @@ export function ToastMuted({ state, ...props }: ToastProps) {
  const ref = useRef(null)
  const { toastProps, contentProps } = useToast(props, state, ref)
  const participant = props.toast.content.participant
+
+  if (!participant) return
+
  return (
    <StyledToastContainer {...toastProps} ref={ref}>
      <HStack
@@ -5,7 +5,7 @@ import { Participant } from 'livekit-client'
 import { NotificationType } from '../NotificationType'

 export interface ToastData {
-  participant: Participant
+  participant?: Participant
  type: NotificationType
  message?: string
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,6 +20,8 @@ export function ToastRaised({ state, ...props }: ToastProps) {
  const participant = props.toast.content.participant
  const { isParticipantsOpen, toggleParticipants } = useSidePanel()

+  if (!participant) return
+
  return (
    <StyledToastContainer {...toastProps} ref={ref}>
      <HStack
@@ -40,8 +40,10 @@ const renderToast = (

    case NotificationType.TranscriptionStarted:
    case NotificationType.TranscriptionStopped:
+    case NotificationType.TranscriptionLimitReached:
    case NotificationType.ScreenRecordingStarted:
    case NotificationType.ScreenRecordingStopped:
+    case NotificationType.ScreenRecordingLimitReached:
      return <ToastAnyRecording key={toast.key} toast={toast} state={state} />

    case NotificationType.RecordingSaving:
@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Dialog, P } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+import { useConfig } from '@/api/useConfig'
+import humanizeDuration from 'humanize-duration'
+
+export const LimitReachedAlertDialog = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) => {
+  const { t, i18n } = useTranslation('rooms', {
+    keyPrefix: 'recordingStateToast.limitReachedAlert',
+  })
+  const { data } = useConfig()
+  return (
+    <Dialog isOpen={isOpen} role="alertdialog" title={t('title')}>
+      <P>
+        {t('description', {
+          duration_message: data?.recording?.max_duration
+            ? t('durationMessage', {
+                duration: humanizeDuration(data?.recording?.max_duration, {
+                  language: i18n.language,
+                }),
+              })
+            : '',
+        })}
+      </P>
+      <HStack gap={1}>
+        <Button variant="text" size="sm" onPress={onClose}>
+          {t('button')}
+        </Button>
+      </HStack>
+    </Dialog>
+  )
+}
@@ -1,11 +1,11 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio/index'
+import { useSnapshot } from 'valtio'
 import { useRoomContext } from '@livekit/components-react'
 import { Spinner } from '@/primitives/Spinner'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Text } from '@/primitives'
-import { RemoteParticipant, RoomEvent } from 'livekit-client'
+import { RoomEvent } from 'livekit-client'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
@@ -18,14 +18,18 @@ import {
 import { FeatureFlags } from '@/features/analytics/enums'
 import { Button as RACButton } from 'react-aria-components'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { LimitReachedAlertDialog } from './LimitReachedAlertDialog'

 export const RecordingStateToast = () => {
  const { t } = useTranslation('rooms', {
    keyPrefix: 'recordingStateToast',
  })
  const room = useRoomContext()
+  const isAdminOrOwner = useIsAdminOrOwner()

  const { openTranscript, openScreenRecording } = useSidePanel()
+  const [isAlertOpen, setIsAlertOpen] = useState(false)

  const recordingSnap = useSnapshot(recordingStore)

@@ -53,13 +57,10 @@ export const RecordingStateToast = () => {
  }, [room.isRecording])

  useEffect(() => {
-    const handleDataReceived = (
-      payload: Uint8Array,
-      participant?: RemoteParticipant
-    ) => {
+    const handleDataReceived = (payload: Uint8Array) => {
      const notification = decodeNotificationDataReceived(payload)

-      if (!participant || !notification) return
+      if (!notification) return

      switch (notification.type) {
        case NotificationType.TranscriptionStarted:
@@ -68,12 +69,20 @@ export const RecordingStateToast = () => {
        case NotificationType.TranscriptionStopped:
          recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
          break
+        case NotificationType.TranscriptionLimitReached:
+          if (isAdminOrOwner) setIsAlertOpen(true)
+          recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
+          break
        case NotificationType.ScreenRecordingStarted:
          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTING
          break
        case NotificationType.ScreenRecordingStopped:
          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
          break
+        case NotificationType.ScreenRecordingLimitReached:
+          if (isAdminOrOwner) setIsAlertOpen(true)
+          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
+          break
        default:
          return
      }
@@ -100,7 +109,7 @@ export const RecordingStateToast = () => {
      room.off(RoomEvent.DataReceived, handleDataReceived)
      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
    }
-  }, [room, recordingSnap])
+  }, [room, recordingSnap, setIsAlertOpen, isAdminOrOwner])

  const key = useMemo(() => {
    switch (recordingSnap.status) {
@@ -119,7 +128,14 @@ export const RecordingStateToast = () => {
    }
  }, [recordingSnap])

-  if (!key) return
+  if (!key)
+    return isAdminOrOwner ? (
+      <LimitReachedAlertDialog
+        isOpen={isAlertOpen}
+        onClose={() => setIsAlertOpen(false)}
+        aria-label="Recording limit exceeded"
+      />
+    ) : null

  const isStarted = key?.includes('started')

@@ -14,6 +14,28 @@ import { fetchRecording } from '../api/fetchRecording'
 import { RecordingStatus } from '@/features/recording'
 import { useConfig } from '@/api/useConfig'

+const BetaBadge = () => (
+  <span
+    className={css({
+      content: '"Beta"',
+      display: 'block',
+      letterSpacing: '-0.02rem',
+      padding: '0 0.25rem',
+      backgroundColor: 'primary.100',
+      color: '#0063CB',
+      fontSize: '14px',
+      fontWeight: 500,
+      margin: '0 0.3125rem',
+      lineHeight: '1rem',
+      borderRadius: '4px',
+      width: 'fit-content',
+      height: 'fit-content',
+    })}
+  >
+    Beta
+  </span>
+)
+
 export const RecordingDownload = () => {
  const { t } = useTranslation('recording')
  const { data: configData } = useConfig()
@@ -27,11 +49,11 @@ export const RecordingDownload = () => {
    enabled: !!recordingId,
  })

-  if (isLoading || !data || isAuthLoading) {
+  if (isLoggedIn === undefined || isAuthLoading) {
    return <LoadingScreen />
  }

-  if (!isLoggedIn) {
+  if (isLoggedIn === false && !isAuthLoading) {
    return (
      <ErrorScreen
        title={t('authentication.title')}
@@ -40,7 +62,11 @@ export const RecordingDownload = () => {
    )
  }

-  if (isError) {
+  if (isLoading) {
+    return <LoadingScreen />
+  }
+
+  if (isError || !data) {
    return <ErrorScreen title={t('error.title')} body={t('error.body')} />
  }

@@ -103,6 +129,28 @@ export const RecordingDownload = () => {
            >
              {t('success.button')}
            </LinkButton>
+            <div
+              className={css({
+                backgroundColor: 'greyscale.50',
+                borderRadius: '5px',
+                paddingY: '1rem',
+                paddingX: '1rem',
+                maxWidth: '80%',
+                marginTop: '1rem',
+                display: 'flex',
+                flexDirection: 'column',
+              })}
+            >
+              <Text
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                })}
+              >
+                {t('success.warning.title')} <BetaBadge />
+              </Text>
+              <Text variant="smNote">{t('success.warning.body')}</Text>
+            </div>
          </VStack>
        </Center>
      </Screen>
@@ -14,6 +14,7 @@ export type ApiRoom = {
  id: string
  name: string
  slug: string
+  pin_code: string
  is_administrable: boolean
  access_level: ApiAccessLevel
  livekit?: ApiLiveKit
@@ -1,8 +1,19 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
-import { Room, RoomOptions } from 'livekit-client'
+import {
+  LiveKitRoom,
+  usePersistentUserChoices,
+} from '@livekit/components-react'
+import {
+  DisconnectReason,
+  MediaDeviceFailure,
+  Room,
+  RoomOptions,
+  supportsAdaptiveStream,
+  supportsDynacast,
+  VideoPresets,
+} from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
 import { Screen } from '@/layout/Screen'
@@ -13,27 +24,38 @@ import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 import { VideoConference } from '../livekit/prefabs/VideoConference'
-import posthog from 'posthog-js'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
+import { navigateTo } from '@/navigation/navigateTo'
+import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
+import { usePostHog } from 'posthog-js/react'
+import { useConfig } from '@/api/useConfig'
+import { isFireFox } from '@/utils/livekit'

 export const Conference = ({
  roomId,
-  userConfig,
  initialRoomData,
  mode = 'join',
 }: {
  roomId: string
-  userConfig: LocalUserChoices
  mode?: 'join' | 'create'
  initialRoomData?: ApiRoom
 }) => {
+  const posthog = usePostHog()
+  const { data: apiConfig } = useConfig()
+
+  const { userChoices: userConfig } = usePersistentUserChoices() as {
+    userChoices: LocalUserChoices
+  }
+
  useEffect(() => {
    posthog.capture('visit-room', { slug: roomId })
-  }, [roomId])
+  }, [roomId, posthog])
  const fetchKey = [keys.room, roomId]

+  const [isConnectionWarmedUp, setIsConnectionWarmedUp] = useState(false)
+
  const {
    mutateAsync: createRoom,
    status: createStatus,
@@ -65,26 +87,108 @@ export const Conference = ({
    retry: false,
  })

+  const isAdaptiveStreamSupported = supportsAdaptiveStream()
+  const isDynacastSupported = supportsDynacast()
+
  const roomOptions = useMemo((): RoomOptions => {
    return {
-      adaptiveStream: true,
-      dynacast: true,
+      adaptiveStream: isAdaptiveStreamSupported,
+      dynacast: isDynacastSupported,
      publishDefaults: {
        videoCodec: 'vp9',
      },
      videoCaptureDefaults: {
        deviceId: userConfig.videoDeviceId ?? undefined,
+        resolution: userConfig.videoPublishResolution
+          ? VideoPresets[userConfig.videoPublishResolution].resolution
+          : undefined,
      },
      audioCaptureDefaults: {
        deviceId: userConfig.audioDeviceId ?? undefined,
      },
+      audioOutput: {
+        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+      },
    }
    // do not rely on the userConfig object directly as its reference may change on every render
-  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
+  }, [
+    userConfig.videoDeviceId,
+    userConfig.videoPublishResolution,
+    userConfig.audioDeviceId,
+    userConfig.audioOutputDeviceId,
+    isAdaptiveStreamSupported,
+    isDynacastSupported,
+  ])

  const room = useMemo(() => new Room(roomOptions), [roomOptions])

+  useEffect(() => {
+    /**
+     * Warm up connection to LiveKit server before joining room
+     * This prefetch helps reduce initial connection latency by establishing
+     * an early HTTP connection to the WebRTC signaling server
+     *
+     * It should cache DNS and TLS keys.
+     */
+    const prepareConnection = async () => {
+      if (!apiConfig || isConnectionWarmedUp) return
+      await room.prepareConnection(apiConfig.livekit.url)
+
+      if (isFireFox() && apiConfig.livekit.enable_firefox_proxy_workaround) {
+        try {
+          const wssUrl =
+            apiConfig.livekit.url
+              .replace('https://', 'wss://')
+              .replace(/\/$/, '') + '/rtc'
+
+          /**
+           * FIREFOX + PROXY WORKAROUND:
+           *
+           * Issue: On Firefox behind proxy configurations, WebSocket signaling fails to establish.
+           * Symptom: Client receives HTTP 200 instead of expected 101 (Switching Protocols).
+           * Root Cause: Certificate/security issue where the initial request is considered unsecure.
+           *
+           * Solution: Pre-establish a WebSocket connection to the signaling server, which fails.
+           * This "primes" the connection, allowing subsequent WebSocket establishments to work correctly.
+           *
+           * Note: This issue is reproducible on LiveKit's demo app.
+           * Reference: livekit-examples/meet/issues/466
+           */
+          const ws = new WebSocket(wssUrl)
+          // 401 unauthorized response is expected
+          ws.onerror = () => ws.readyState <= 1 && ws.close()
+        } catch (e) {
+          console.debug('Firefox WebSocket workaround failed.', e)
+        }
+      }
+
+      setIsConnectionWarmedUp(true)
+    }
+    prepareConnection()
+  }, [room, apiConfig, isConnectionWarmedUp])
+
  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
+  const [mediaDeviceError, setMediaDeviceError] = useState<{
+    error: MediaDeviceFailure | null
+    kind: MediaDeviceKind | null
+  }>({
+    error: null,
+    kind: null,
+  })
+
+  /*
+   * 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) {
@@ -109,9 +213,9 @@ export const Conference = ({
      <Screen header={false} footer={false}>
        <LiveKitRoom
          room={room}
-          serverUrl={data?.livekit?.url}
+          serverUrl={serverUrl}
          token={data?.livekit?.token}
-          connect={true}
+          connect={isConnectionWarmedUp}
          audio={userConfig.audioEnabled}
          video={
            userConfig.videoEnabled && {
@@ -124,16 +228,34 @@ export const Conference = ({
          className={css({
            backgroundColor: 'primaryDark.50 !important',
          })}
+          onError={(e) => {
+            posthog.captureException(e)
+          }}
+          onDisconnected={(e) => {
+            if (e == DisconnectReason.CLIENT_INITIATED) {
+              navigateTo('feedback', { duplicateIdentity: false })
+            } else if (e == DisconnectReason.DUPLICATE_IDENTITY) {
+              navigateTo('feedback', { duplicateIdentity: true })
+            }
+          }}
+          onMediaDeviceFailure={(e, kind) => {
+            if (e == MediaDeviceFailure.DeviceInUse && !!kind) {
+              setMediaDeviceError({ error: e, kind })
+            }
+          }}
        >
          <VideoConference />
          {showInviteDialog && (
            <InviteDialog
              isOpen={showInviteDialog}
              onOpenChange={setShowInviteDialog}
-              roomId={roomId}
              onClose={() => setShowInviteDialog(false)}
            />
          )}
+          <MediaDeviceErrorAlert
+            {...mediaDeviceError}
+            onClose={() => setMediaDeviceError({ error: null, kind: null })}
+          />
        </LiveKitRoom>
      </Screen>
    </QueryAware>
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P } from '@/primitives'
+import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,8 +10,13 @@ import {
  RiFileCopyLine,
  RiSpam2Fill,
 } from '@remixicon/react'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { css } from '@/styled-system/css'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'

 // fixme - extract in a proper primitive this dialog without overlay
 const StyledRACDialog = styled(Dialog, {
@@ -34,24 +39,27 @@ const StyledRACDialog = styled(Dialog, {
  },
 })

-export const InviteDialog = ({
-  roomId,
-  ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('rooms')
-  const roomUrl = getRouteUrl('room', roomId)
+export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })

-  const [isCopied, setIsCopied] = useState(false)
+  const roomData = useRoomData()
+  const roomUrl = getRouteUrl('room', roomData?.slug)

-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
+  const telephony = useTelephony()
+
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && roomData?.pin_code
+  }, [telephony?.enabled, roomData?.pin_code])
+
+  const {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  } = useCopyRoomToClipboard(roomData)

  return (
-    <StyledRACDialog {...dialogProps}>
+    <StyledRACDialog {...props}>
      {({ close }) => (
        <VStack
          alignItems="left"
@@ -60,7 +68,7 @@ export const InviteDialog = ({
          style={{ maxWidth: '100%', overflow: 'hidden' }}
        >
          <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-            {t('shareDialog.heading')}
+            {t('heading')}
          </Heading>
          <Div position="absolute" top="5" right="5">
            <Button
@@ -68,7 +76,7 @@ export const InviteDialog = ({
              variant="tertiaryText"
              size="xs"
              onPress={() => {
-                dialogProps.onClose?.()
+                props.onClose?.()
                close()
              }}
              aria-label={t('closeDialog')}
@@ -76,49 +84,125 @@ export const InviteDialog = ({
              <RiCloseLine />
            </Button>
          </Div>
-          <P>{t('shareDialog.description')}</P>
-          <Button
-            variant={isCopied ? 'success' : 'tertiary'}
-            fullWidth
-            aria-label={t('shareDialog.copy')}
-            onPress={() => {
-              navigator.clipboard.writeText(roomUrl)
-              setIsCopied(true)
-            }}
-            data-attr="share-dialog-copy"
-          >
-            {isCopied ? (
-              <>
-                <RiCheckLine size={24} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copied')}
-              </>
-            ) : (
-              <>
-                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copyButton')}
-              </>
-            )}
-          </Button>
-          <HStack>
+          <P>{t('description')}</P>
+          {isTelephonyReadyForUse ? (
            <div
              className={css({
-                backgroundColor: 'primary.200',
-                borderRadius: '50%',
-                padding: '4px',
-                marginTop: '1rem',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
              })}
            >
-              <RiSpam2Fill
-                size={22}
+              <div
                className={css({
-                  fill: 'primary.500',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                })}
-              />
+              >
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && roomUrl && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                  </Button>
+                )}
+              </div>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(roomData?.pin_code)}
+                </Text>
+              </div>
+              <Button
+                variant={isCopied ? 'success' : 'secondaryText'}
+                size="sm"
+                fullWidth
+                aria-label={t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="share-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
            </div>
-            <Text variant="sm" style={{ marginTop: '1rem' }}>
-              {t('shareDialog.permissions')}
-            </Text>
-          </HStack>
+          ) : (
+            <Button
+              variant={isCopied ? 'success' : 'tertiary'}
+              fullWidth
+              aria-label={t('copy')}
+              onPress={copyRoomToClipboard}
+              data-attr="share-dialog-copy"
+            >
+              {isCopied ? (
+                <>
+                  <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copied')}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copyUrl')}
+                </>
+              )}
+            </Button>
+          )}
+          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
+                className={css({
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
+                })}
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
        </VStack>
      )}
    </StyledRACDialog>
@@ -2,19 +2,26 @@ import { useTranslation } from 'react-i18next'
 import { usePreviewTracks } from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { LocalVideoTrack, Track } from 'livekit-client'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  createLocalVideoTrack,
+  createLocalAudioTrack,
+  LocalAudioTrack,
+  LocalVideoTrack,
+  Track,
+} from 'livekit-client'
 import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
-import { HStack, VStack } from '@/styled-system/jsx'
+import { VStack } from '@/styled-system/jsx'
 import { Heading } from 'react-aria-components'
 import { RiImageCircleAiFill } from '@remixicon/react'
 import {
  EffectsConfiguration,
  EffectsConfigurationProps,
 } from '../livekit/components/effects/EffectsConfiguration'
+import { SelectDevice } from '../livekit/components/controls/Device/SelectDevice'
+import { ToggleDevice } from '../livekit/components/controls/Device/ToggleDevice'
 import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { isMobileBrowser } from '@livekit/components-core'
@@ -27,7 +34,11 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
-import { LocalUserChoices } from '@/stores/userChoices'
+import { openPermissionsDialog } from '@/stores/permissions'
+import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
+import { isSafari } from '@/utils/livekit'
+import type { LocalUserChoices } from '@/stores/userChoices'
+import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'

 const onError = (e: Error) => console.error('ERROR', e)

@@ -72,45 +83,23 @@ const Effects = ({
        </Text>
        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
      </Dialog>
-      <div
-        className={css({
-          position: 'absolute',
-          right: 0,
-          bottom: '0',
-          padding: '1rem',
-          zIndex: '1',
-        })}
+      <Button
+        variant="whiteCircle"
+        onPress={openDialog}
+        tooltip={t('description')}
+        aria-label={t('description')}
      >
-        <Button
-          variant="whiteCircle"
-          onPress={openDialog}
-          tooltip={t('description')}
-          aria-label={t('description')}
-        >
-          <RiImageCircleAiFill size={24} />
-        </Button>
-      </div>
-      <div
-        className={css({
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: '20%',
-          backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
-          borderBottomRadius: '1rem',
-        })}
-      />
+        <RiImageCircleAiFill size={24} />
+      </Button>
    </>
  )
 }

 export const Join = ({
-  onSubmit,
+  enterRoom,
  roomId,
 }: {
-  onSubmit: (choices: LocalUserChoices) => void
+  enterRoom: () => void
  roomId: string
 }) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
@@ -120,11 +109,13 @@ export const Join = ({
      audioEnabled,
      videoEnabled,
      audioDeviceId,
+      audioOutputDeviceId,
      videoDeviceId,
      processorSerialized,
      username,
    },
    saveAudioInputEnabled,
+    saveAudioOutputDeviceId,
    saveVideoInputEnabled,
    saveAudioInputDeviceId,
    saveVideoInputDeviceId,
@@ -132,28 +123,44 @@ export const Join = ({
    saveProcessorSerialized,
  } = usePersistentUserChoices()

-  const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(processorSerialized)
-  )
+  const initialUserChoices = useRef<LocalUserChoices | null>(null)

-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
+  if (initialUserChoices.current === null) {
+    initialUserChoices.current = {
+      audioEnabled,
+      videoEnabled,
+      audioDeviceId,
+      audioOutputDeviceId,
+      videoDeviceId,
+      processorSerialized,
+      username,
+    }
+  }

  const tracks = usePreviewTracks(
    {
-      audio: { deviceId: audioDeviceId },
-      video: { deviceId: videoDeviceId },
+      audio: !!initialUserChoices.current &&
+        initialUserChoices.current?.audioEnabled && {
+          deviceId: initialUserChoices.current.audioDeviceId,
+        },
+      video: !!initialUserChoices.current &&
+        initialUserChoices.current?.videoEnabled && {
+          deviceId: initialUserChoices.current.videoDeviceId,
+          processor:
+            BackgroundProcessorFactory.deserializeProcessor(
+              processorSerialized
+            ),
+        },
    },
    onError
  )

-  const videoTrack = useMemo(
+  const [dynamicVideoTrack, setDynamicVideoTrack] =
+    useState<LocalVideoTrack | null>(null)
+  const [dynamicAudioTrack, setDynamicAudioTrack] =
+    useState<LocalAudioTrack | null>(null)
+
+  const previewVideoTrack = useMemo(
    () =>
      tracks?.filter(
        (track) => track.kind === Track.Kind.Video
@@ -161,56 +168,129 @@ export const Join = ({
    [tracks]
  )

-  const audioTrack = useMemo(
+  const previewAudioTrack = useMemo(
    () =>
      tracks?.filter(
        (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalVideoTrack,
+      )[0] as LocalAudioTrack,
    [tracks]
  )

+  /*
+   * Dynamic track creation strategy: Only create a dynamic track if the user initially disabled audio/video
+   * but now wants to enable it. This is a "just-in-time" acquisition pattern where we create the track
+   * on-demand. We avoid creating tracks when the user explicitly requested them to be disabled.
+   */
+  useEffect(() => {
+    const createVideoTrack = async () => {
+      try {
+        const track = await createLocalVideoTrack({
+          deviceId: { exact: videoDeviceId },
+          processor:
+            BackgroundProcessorFactory.deserializeProcessor(
+              processorSerialized
+            ),
+        })
+        setDynamicVideoTrack(track)
+      } catch (error) {
+        onError(error as Error)
+      }
+    }
+
+    if (
+      videoEnabled &&
+      !initialUserChoices.current?.videoEnabled &&
+      !previewVideoTrack &&
+      !dynamicVideoTrack
+    ) {
+      createVideoTrack()
+    }
+  }, [
+    videoEnabled,
+    videoDeviceId,
+    processorSerialized,
+    previewVideoTrack,
+    dynamicVideoTrack,
+  ])
+
+  useEffect(() => {
+    const createAudioTrack = async () => {
+      try {
+        const track = await createLocalAudioTrack({
+          deviceId: { exact: audioDeviceId },
+        })
+        setDynamicAudioTrack(track)
+      } catch (error) {
+        onError(error as Error)
+      }
+    }
+    if (
+      audioEnabled &&
+      !initialUserChoices.current?.audioEnabled &&
+      !previewAudioTrack &&
+      !dynamicAudioTrack
+    ) {
+      createAudioTrack()
+    }
+  }, [audioEnabled, audioDeviceId, previewAudioTrack, dynamicAudioTrack])
+
+  // Cleanup dynamic tracks
+  useEffect(() => {
+    return () => {
+      dynamicVideoTrack?.stop()
+    }
+  }, [dynamicVideoTrack])
+  useEffect(() => {
+    return () => {
+      dynamicAudioTrack?.stop()
+    }
+  }, [dynamicAudioTrack])
+
+  // Final tracks (dynamic takes precedence over preview)
+  const videoTrack = dynamicVideoTrack || previewVideoTrack
+  const audioTrack = dynamicAudioTrack || previewAudioTrack
+
+  // LiveKit by default populates device choices with "default" value.
+  // Instead, use the current device id used by the preview track as a default
+  useResolveInitiallyDefaultDeviceId(
+    audioDeviceId,
+    audioTrack,
+    saveAudioInputDeviceId
+  )
+  useResolveInitiallyDefaultDeviceId(
+    videoDeviceId,
+    videoTrack,
+    saveVideoInputDeviceId
+  )
+
  const videoEl = useRef(null)
+  const isVideoInitiated = useRef(false)

  useEffect(() => {
    const videoElement = videoEl.current as HTMLVideoElement | null

    const handleVideoLoaded = () => {
      if (videoElement) {
+        isVideoInitiated.current = true
        videoElement.style.opacity = '1'
      }
    }

    if (videoElement && videoTrack && videoEnabled) {
-      videoTrack.unmute()
      videoTrack.attach(videoElement)
      videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
    }

    return () => {
      videoTrack?.detach()
-      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
+      if (videoElement) {
+        videoElement.removeEventListener('loadedmetadata', handleVideoLoaded)
+        videoElement.style.opacity = '0'
+      }
+      isVideoInitiated.current = false
    }
  }, [videoTrack, videoEnabled])

-  const enterRoom = useCallback(() => {
-    onSubmit({
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      videoDeviceId,
-      username,
-      processorSerialized: processor?.serialize(),
-    })
-  }, [
-    onSubmit,
-    audioEnabled,
-    videoEnabled,
-    audioDeviceId,
-    videoDeviceId,
-    username,
-    processor,
-  ])
-
  // Room data strategy:
  // 1. Initial fetch is performed to check access and get LiveKit configuration
  // 2. Data remains valid for 6 hours to avoid unnecessary refetches
@@ -269,15 +349,43 @@ export const Join = ({
    enterRoom()
  }

-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
+  const isCameraDeniedOrPrompted = useCannotUseDevice('videoinput')
+  const isMicrophoneDeniedOrPrompted = useCannotUseDevice('audioinput')
+
+  const hintMessage = useMemo(() => {
+    if (isCameraDeniedOrPrompted) {
+      return isMicrophoneDeniedOrPrompted
+        ? 'cameraAndMicNotGranted'
+        : 'cameraNotGranted'
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
+    if (!videoEnabled) {
+      return 'cameraDisabled'
+    }
+    if (!isVideoInitiated.current) {
+      return 'cameraStarting'
+    }
+    if (videoTrack && videoEnabled) {
+      return ''
+    }
+  }, [
+    videoTrack,
+    videoEnabled,
+    isCameraDeniedOrPrompted,
+    isMicrophoneDeniedOrPrompted,
+  ])
+
+  const permissionsButtonLabel = useMemo(() => {
+    if (!isMicrophoneDeniedOrPrompted && !isCameraDeniedOrPrompted) {
+      return null
+    }
+    if (isCameraDeniedOrPrompted && isMicrophoneDeniedOrPrompted) {
+      return 'cameraAndMicNotGranted'
+    }
+    if (isCameraDeniedOrPrompted && !isMicrophoneDeniedOrPrompted) {
+      return 'cameraNotGranted'
+    }
+    return null
+  }, [isMicrophoneDeniedOrPrompted, isCameraDeniedOrPrompted])

  const renderWaitingState = () => {
    switch (status) {
@@ -339,6 +447,7 @@ export const Join = ({
                type="text"
                onChange={saveUsername}
                label={t('usernameLabel')}
+                aria-label={t('usernameLabel')}
                defaultValue={username}
                validate={(value) => !value && t('errors.usernameEmpty')}
                wrapperProps={{
@@ -361,141 +470,315 @@ export const Join = ({
      <div
        className={css({
          display: 'flex',
-          alignItems: 'flex-start',
          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          flexDirection: 'column',
          flexGrow: 1,
+          gap: { base: '1rem', sm: '2rem', lg: 0 },
          lg: {
-            alignItems: 'center',
+            flexDirection: 'row',
          },
        })}
      >
        <div
          className={css({
            display: 'flex',
-            height: 'auto',
            alignItems: 'center',
            justifyContent: 'center',
-            gap: '2rem',
-            padding: '0 2rem',
-            flexDirection: 'column',
-            minWidth: 0,
            width: '100%',
+            minWidth: 0,
+            maxWidth: '764px',
            lg: {
-              flexDirection: 'row',
-              width: 'auto',
-              height: '570px',
+              height: '540px',
+              flexGrow: 1,
            },
          })}
        >
          <div
            className={css({
-              width: '100%',
-              lg: {
-                width: '740px',
-              },
+              display: 'inline-flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              minWidth: 0,
+              flexShrink: { base: 0, sm: 1 },
            })}
          >
            <div
              className={css({
                borderRadius: '1rem',
+                flex: '0 1',
+                minWidth: '320px',
+                margin: {
+                  base: '0.5rem',
+                  sm: '1rem',
+                  lg: '1rem 0.5rem 1rem 1rem',
+                },
                overflow: 'hidden',
                position: 'relative',
-                width: '100%',
-                height: 'auto',
-                aspectRatio: 16 / 9,
-                '--tw-shadow':
-                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
-                '--tw-shadow-colored':
-                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
-                boxShadow:
-                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
-                backgroundColor: 'black',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
              })}
            >
-              {videoTrack && videoEnabled ? (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video
-                  ref={videoEl}
-                  width="1280"
-                  height="720"
-                  className={css({
-                    display: 'block',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                    opacity: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                    borderRadius: '1rem',
-                  })}
-                  disablePictureInPicture
-                  disableRemotePlayback
-                />
-              ) : (
+              <div
+                className={css({
+                  position: 'absolute',
+                  top: 0,
+                  height: '5rem',
+                  width: '100%',
+                  backgroundImage:
+                    'linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%)',
+                  zIndex: 1,
+                })}
+              />
+              <div
+                className={css({
+                  position: 'absolute',
+                  bottom: 0,
+                  height: '5rem',
+                  width: '100%',
+                  backgroundImage:
+                    'linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%)',
+                  zIndex: 1,
+                })}
+              />
+              <div
+                className={css({
+                  position: 'relative',
+                  width: '100%',
+                  height: 'fit-content',
+                  aspectRatio: '16 / 9',
+                })}
+              >
                <div
                  className={css({
+                    backgroundColor: 'black',
+                    position: 'absolute',
+                    boxSizing: 'border-box',
+                    top: 0,
                    width: '100%',
                    height: '100%',
-                    color: 'white',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                    overflow: 'hidden',
                  })}
                >
-                  <p
+                  <div
+                    aria-label={t(
+                      `videoPreview.${videoEnabled ? 'enabled' : 'disabled'}`
+                    )}
+                    role="status"
                    className={css({
-                      fontSize: '24px',
-                      fontWeight: '300',
+                      position: 'absolute',
+                      top: 0,
+                      width: '100%',
                    })}
                  >
-                    {!videoEnabled && t('cameraDisabled')}
-                    {videoEnabled && !videoTrack && t('cameraStarting')}
-                  </p>
+                    <div
+                      className={css({
+                        width: '100%',
+                        height: 'auto',
+                        aspectRatio: '16 / 9',
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: '-2px',
+                        left: '-2px',
+                        pointerEvents: 'none',
+                        transform: 'scale(1.02)',
+                      })}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                      <video
+                        ref={videoEl}
+                        width="1280"
+                        height="720"
+                        style={{
+                          display:
+                            !videoEnabled || isCameraDeniedOrPrompted
+                              ? 'none'
+                              : undefined,
+                        }}
+                        className={css({
+                          position: 'absolute',
+                          transform: 'rotateY(180deg)',
+                          opacity: 0,
+                          height: '100%',
+                          transition: 'opacity 0.3s ease-in-out',
+                          objectFit: 'cover',
+                        })}
+                        disablePictureInPicture
+                        disableRemotePlayback
+                      />
+                    </div>
+                  </div>
+                  <div
+                    role="alert"
+                    className={css({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      height: '100%',
+                      width: '100%',
+                      justifyContent: 'center',
+                      textAlign: 'center',
+                      alignItems: 'center',
+                      padding: '0.24rem',
+                      boxSizing: 'border-box',
+                      gap: '1rem',
+                    })}
+                  >
+                    <p
+                      className={css({
+                        fontWeight: '400',
+                        fontSize: { base: '1rem', sm: '1.25rem', lg: '1.5rem' },
+                        textWrap: 'balance',
+                        color: 'white',
+                      })}
+                    >
+                      {hintMessage && t(hintMessage)}
+                    </p>
+                    {isCameraDeniedOrPrompted && (
+                      <Button
+                        size="sm"
+                        variant="tertiary"
+                        onPress={openPermissionsDialog}
+                      >
+                        {t(`permissionsButton.${permissionsButtonLabel}`)}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    bottom: '1rem',
+                    zIndex: '1',
+                    display: 'flex',
+                    gap: '1rem',
+                    justifyContent: 'center',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                  })}
+                >
+                  <ToggleDevice
+                    kind="audioinput"
+                    context="join"
+                    enabled={audioEnabled}
+                    toggle={async () => {
+                      saveAudioInputEnabled(!audioEnabled)
+                      if (audioEnabled) {
+                        await audioTrack?.mute()
+                      } else {
+                        await audioTrack?.unmute()
+                      }
+                    }}
+                  />
+                  <ToggleDevice
+                    kind="videoinput"
+                    context="join"
+                    enabled={videoEnabled}
+                    toggle={async () => {
+                      saveVideoInputEnabled(!videoEnabled)
+                      if (videoEnabled) {
+                        await videoTrack?.mute()
+                      } else {
+                        await videoTrack?.unmute()
+                      }
+                    }}
+                  />
+                </div>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    right: '1rem',
+                    bottom: '1rem',
+                    zIndex: '1',
+                  })}
+                >
+                  <Effects
+                    videoTrack={videoTrack}
+                    onSubmit={(processor) =>
+                      saveProcessorSerialized(processor?.serialize())
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className={css({
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '2%',
+                width: '80%',
+                marginX: 'auto',
+              })}
+            >
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDevice
+                  kind="audioinput"
+                  id={audioDeviceId}
+                  onSubmit={async (id) => {
+                    try {
+                      saveAudioInputDeviceId(id)
+                      if (audioTrack) {
+                        await audioTrack.setDeviceId({ exact: id })
+                      }
+                    } catch (err) {
+                      console.error('Failed to switch microphone device', err)
+                    }
+                  }}
+                />
+              </div>
+              {!isSafari() && (
+                <div
+                  className={css({
+                    width: '30%',
+                  })}
+                >
+                  <SelectDevice
+                    kind="audiooutput"
+                    id={audioOutputDeviceId}
+                    onSubmit={saveAudioOutputDeviceId}
+                  />
                </div>
              )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDevice
+                  kind="videoinput"
+                  id={videoDeviceId}
+                  onSubmit={async (id) => {
+                    try {
+                      saveVideoInputDeviceId(id)
+                      if (videoTrack) {
+                        await await videoTrack.setDeviceId({ exact: id })
+                      }
+                    } catch (err) {
+                      console.error('Failed to switch camera device', err)
+                    }
+                  }}
+                />
+              </div>
            </div>
-            <HStack justify="center" padding={1.5}>
-              <SelectToggleDevice
-                source={Track.Source.Microphone}
-                initialState={audioEnabled}
-                track={audioTrack}
-                initialDeviceId={audioDeviceId}
-                onChange={(enabled) => saveAudioInputEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  saveAudioInputDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-              <SelectToggleDevice
-                source={Track.Source.Camera}
-                initialState={videoEnabled}
-                track={videoTrack}
-                initialDeviceId={videoDeviceId}
-                onChange={(enabled) => saveVideoInputEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  saveVideoInputDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-            </HStack>
-          </div>
-          <div
-            className={css({
-              width: '100%',
-              flexShrink: 0,
-              padding: '0',
-              sm: {
-                width: '448px',
-                padding: '0 3rem 9rem 3rem',
-              },
-            })}
-          >
-            {renderWaitingState()}
          </div>
        </div>
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flex: '0 0 448px',
+            position: 'relative',
+            margin: '1rem 1rem 1rem 0.5rem',
+          })}
+        >
+          {renderWaitingState()}
+        </div>
      </div>
    </Screen>
  )
@@ -0,0 +1,33 @@
+import { MediaDeviceFailure } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+import { Button, Dialog, P } from '@/primitives'
+
+export type MediaDeviceErrorAlertProps = {
+  error?: MediaDeviceFailure | null
+  kind?: MediaDeviceKind | null
+  onClose: () => void
+}
+
+export const MediaDeviceErrorAlert = ({
+  error,
+  kind,
+  onClose,
+}: MediaDeviceErrorAlertProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'mediaErrorDialog' })
+
+  if (!error || !kind) return
+
+  return (
+    <Dialog
+      role="alertdialog"
+      isOpen={!!error}
+      onClose={onClose}
+      title={t(`${error}.title.${kind}`)}
+    >
+      <P>{t(`${error}.body.${kind}`)}</P>
+      <Button variant="text" size="sm" onPress={onClose}>
+        {t('close')}
+      </Button>
+    </Dialog>
+  )
+}
@@ -0,0 +1,112 @@
+import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
+import { css } from '@/styled-system/css'
+import { Dialog, H } from '@/primitives'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { useEffect, useMemo } from 'react'
+import { useSnapshot } from 'valtio'
+import { closePermissionsDialog, permissionsStore } from '@/stores/permissions'
+import { useTranslation } from 'react-i18next'
+import { injectIconIntoTranslation } from '@/utils/translation'
+import { isSafari } from '@/utils/livekit'
+
+/**
+ * Singleton component - ensures permissions sync runs only once across the app.
+ * WARNING: This component should only be instantiated once in the interface.
+ * Multiple instances may cause unexpected behavior or performance issues.
+ */
+export const Permissions = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
+
+  useWatchPermissions()
+
+  const permissions = useSnapshot(permissionsStore)
+
+  const permissionLabel = useMemo(() => {
+    if (permissions.isMicrophoneDenied && permissions.isCameraDenied) {
+      return 'cameraAndMicrophone'
+    } else if (permissions.isCameraDenied) {
+      return 'camera'
+    } else if (permissions.isMicrophoneDenied) {
+      return 'microphone'
+    } else {
+      return 'default'
+    }
+  }, [permissions])
+
+  const [descriptionBeforeIcon, descriptionAfterIcon] =
+    injectIconIntoTranslation(t('body.openMenu.others'))
+
+  useEffect(() => {
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isCameraGranted &&
+      permissions.isMicrophoneGranted
+    ) {
+      closePermissionsDialog()
+    }
+  }, [permissions])
+
+  const appTitle = `${import.meta.env.VITE_APP_TITLE}`
+
+  return (
+    <Dialog
+      isOpen={permissions.isPermissionDialogOpen}
+      role="dialog"
+      type="flex"
+      title=""
+      aria-label={t(`heading.${permissionLabel}`, {
+        appTitle,
+      })}
+      onClose={closePermissionsDialog}
+    >
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        <img
+          src="/assets/camera_mic_permission.svg"
+          alt=""
+          className={css({
+            minWidth: '290px',
+            minHeight: '290px',
+            maxWidth: '290px',
+          })}
+        />
+        <div
+          className={css({
+            maxWidth: '400px',
+          })}
+        >
+          <H lvl={2}>
+            {t(`heading.${permissionLabel}`, {
+              appTitle,
+            })}
+          </H>
+          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
+            <li>
+              {isSafari() ? (
+                t('body.openMenu.safari', {
+                  appDomain: window.origin.replace('https://', ''),
+                })
+              ) : (
+                <>
+                  {descriptionBeforeIcon}
+                  <span
+                    style={{ display: 'inline-block', verticalAlign: 'middle' }}
+                  >
+                    <RiEqualizer2Line />
+                  </span>
+                  {descriptionAfterIcon}
+                </>
+              )}
+            </li>
+            <li>{t(`body.details.${permissionLabel}`)}</li>
+          </ol>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
@@ -0,0 +1,160 @@
+import { useEffect } from 'react'
+import { permissionsStore } from '@/stores/permissions'
+import { isSafari } from '@/utils/livekit'
+
+const POLLING_TIME = 500
+
+export const useWatchPermissions = () => {
+  useEffect(() => {
+    let cleanup: (() => void) | undefined
+    let intervalId: NodeJS.Timeout | undefined
+    let isCancelled = false
+
+    const checkPermissions = async () => {
+      try {
+        if (!navigator.permissions) {
+          if (!isCancelled) {
+            permissionsStore.cameraPermission = 'unavailable'
+            permissionsStore.microphonePermission = 'unavailable'
+          }
+          return
+        }
+
+        const [cameraPermission, microphonePermission] = await Promise.all([
+          navigator.permissions.query({ name: 'camera' }),
+          navigator.permissions.query({ name: 'microphone' }),
+        ])
+
+        if (isCancelled) return
+
+        /**
+         * Safari Permission API Limitation Workaround
+         *
+         * Safari has a known issue where permission change events are not reliably fired
+         * when users interact with permission prompts. This is documented in Apple's forums:
+         * https://developer.apple.com/forums/thread/757353
+         *
+         * The problem:
+         * - When permissions are in 'prompt' state, Safari may not trigger 'change' events
+         * - Users can grant/deny permissions through system prompts, but our listeners won't detect it
+         * - This leaves the UI in an inconsistent state showing outdated permission status
+         *
+         * The solution:
+         * - Manually poll the Permissions API every 500ms when either permission is in 'prompt' state
+         * - Continue polling until both permissions are no longer in 'prompt' state
+         * - This ensures we catch permission changes even when Safari fails to fire events
+         *
+         * This polling is Safari-specific and only activates when needed to minimize performance impact.
+         */
+        if (
+          isSafari() &&
+          (cameraPermission.state === 'prompt' ||
+            microphonePermission.state === 'prompt')
+        ) {
+          // Start polling every 1 second if either permission is in 'prompt' state
+          if (!intervalId) {
+            intervalId = setInterval(async () => {
+              try {
+                const [updatedCamera, updatedMicrophone] = await Promise.all([
+                  navigator.permissions.query({ name: 'camera' }),
+                  navigator.permissions.query({ name: 'microphone' }),
+                ])
+
+                if (isCancelled) return
+
+                const cameraChanged =
+                  permissionsStore.cameraPermission !== updatedCamera.state
+                const microphoneChanged =
+                  permissionsStore.microphonePermission !==
+                  updatedMicrophone.state
+
+                if (cameraChanged) {
+                  permissionsStore.cameraPermission = updatedCamera.state
+                }
+
+                if (microphoneChanged) {
+                  permissionsStore.microphonePermission =
+                    updatedMicrophone.state
+                }
+
+                if (
+                  updatedCamera.state !== 'prompt' &&
+                  updatedMicrophone.state !== 'prompt'
+                ) {
+                  if (intervalId) {
+                    clearInterval(intervalId)
+                    intervalId = undefined
+                  }
+                }
+              } catch (error) {
+                if (!isCancelled) {
+                  console.error('Error polling permissions:', error)
+                }
+              }
+            }, POLLING_TIME)
+          }
+        }
+
+        permissionsStore.cameraPermission = cameraPermission.state
+        permissionsStore.microphonePermission = microphonePermission.state
+
+        const handleCameraChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionsStore.cameraPermission = target.state
+
+          if (
+            intervalId &&
+            target.state !== 'prompt' &&
+            microphonePermission.state !== 'prompt'
+          ) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+
+        const handleMicrophoneChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionsStore.microphonePermission = target.state
+
+          if (
+            intervalId &&
+            target.state !== 'prompt' &&
+            microphonePermission.state !== 'prompt'
+          ) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+
+        cameraPermission.addEventListener('change', handleCameraChange)
+        microphonePermission.addEventListener('change', handleMicrophoneChange)
+
+        cleanup = () => {
+          cameraPermission.removeEventListener('change', handleCameraChange)
+          microphonePermission.removeEventListener(
+            'change',
+            handleMicrophoneChange
+          )
+          if (intervalId) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          console.error('Error checking permissions:', error)
+        }
+      } finally {
+        if (!isCancelled) {
+          permissionsStore.isLoading = false
+        }
+      }
+    }
+    checkPermissions()
+
+    return () => {
+      isCancelled = true
+      cleanup?.()
+    }
+  }, [])
+}
@@ -2,7 +2,6 @@ import { Participant } from 'livekit-client'
 import { fetchServerApi } from './fetchServerApi'
 import { buildServerApiUrl } from './buildServerApiUrl'
 import { useRoomData } from '../hooks/useRoomData'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

 export const useLowerHandParticipant = () => {
  const data = useRoomData()
@@ -11,8 +10,12 @@ export const useLowerHandParticipant = () => {
    if (!data || !data?.livekit) {
      throw new Error('Room data is not available')
    }
-    const newMetadata = safeParseMetadata(participant.metadata) || {}
-    newMetadata.raised = !newMetadata.raised
+
+    const newAttributes = {
+      ...participant.attributes,
+      handRaisedAt: '',
+    }
+
    return fetchServerApi(
      buildServerApiUrl(
        data.livekit.url,
@@ -24,7 +27,7 @@ export const useLowerHandParticipant = () => {
        body: JSON.stringify({
          room: data.livekit.room,
          identity: participant.identity,
-          metadata: JSON.stringify(newMetadata),
+          attributes: newAttributes,
          permission: participant.permissions,
        }),
      }
@@ -1,7 +1,7 @@
 import { css } from '@/styled-system/css'
 import { Button, Text } from '@/primitives'
 import { useMemo, useRef } from 'react'
-import { ScreenSharePreferenceStore } from '@/stores/ScreenSharePreferences'
+import { screenSharePreferenceStore } from '@/stores/screenSharePreferences'
 import { useSnapshot } from 'valtio'
 import { useLocalParticipant } from '@livekit/components-react'
 import { useSize } from '../hooks/useResizeObserver'
@@ -18,7 +18,7 @@ export const FullScreenShareWarning = ({
  const warningContainerRef = useRef<HTMLDivElement>(null)
  const { width: containerWidth } = useSize(warningContainerRef)
  const { localParticipant } = useLocalParticipant()
-  const screenSharePreferences = useSnapshot(ScreenSharePreferenceStore)
+  const screenSharePreferences = useSnapshot(screenSharePreferenceStore)

  const isFullScreenSharing = useMemo(() => {
    if (trackReference?.source !== 'screen_share') return false
@@ -62,7 +62,7 @@ export const FullScreenShareWarning = ({
  }

  const handleDismissWarning = () => {
-    ScreenSharePreferenceStore.enabled = false
+    screenSharePreferenceStore.enabled = false
  }

  if (!shouldShowWarning) return null
@@ -1,27 +1,29 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
-import { Button, Div, Text } from '@/primitives'
+import { Bold, Button, Div, Text } from '@/primitives'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
 import { useRoomData } from '../hooks/useRoomData'
+import { formatPinCode } from '../../utils/telephony'
+import { useTelephony } from '../hooks/useTelephony'
+import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'

 export const Info = () => {
  const { t } = useTranslation('rooms', { keyPrefix: 'info' })

-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
-
  const data = useRoomData()
  const roomUrl = getRouteUrl('room', data?.slug)

+  const telephony = useTelephony()
+
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && data?.pin_code
+  }, [telephony?.enabled, data?.pin_code])
+
+  const { isCopied, copyRoomToClipboard } = useCopyRoomToClipboard(data)
+
  return (
    <Div
      display="flex"
@@ -41,17 +43,34 @@ export const Info = () => {
        >
          {t('roomInformation.title')}
        </Text>
-        <Text as="p" variant="xsNote" wrap="pretty">
-          {roomUrl}
-        </Text>
+        <div
+          className={css({
+            gap: '0.15rem',
+            display: 'flex',
+            flexDirection: 'column',
+          })}
+        >
+          <Text as="p" variant="xsNote" wrap="pretty">
+            {roomUrl.replace(/^https?:\/\//, '')}
+          </Text>
+          {isTelephonyReadyForUse && (
+            <>
+              <Text as="p" variant="xsNote" wrap="pretty">
+                <Bold>{t('roomInformation.phone.call')}</Bold> (
+                {telephony?.country}) {telephony?.internationalPhoneNumber}
+              </Text>
+              <Text as="p" variant="xsNote" wrap="pretty">
+                <Bold>{t('roomInformation.phone.pinCode')}</Bold>{' '}
+                {formatPinCode(data?.pin_code)}
+              </Text>
+            </>
+          )}
+        </div>
        <Button
          size="sm"
          variant={isCopied ? 'success' : 'tertiaryText'}
          aria-label={t('roomInformation.button.ariaLabel')}
-          onPress={() => {
-            navigator.clipboard.writeText(roomUrl)
-            setIsCopied(true)
-          }}
+          onPress={copyRoomToClipboard}
          data-attr="copy-info-sidepannel"
          style={{
            marginLeft: '-8px',
@@ -22,7 +22,7 @@ import {
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
 import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '../hooks/useRaisedHand'
+import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
 import { HStack } from '@/styled-system/jsx'
 import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
@@ -97,6 +97,10 @@ export const ParticipantTile: (
    participant: trackReference.participant,
  })

+  const { positionInQueue, firstInQueue } = useRaisedHandPosition({
+    participant: trackReference.participant,
+  })
+
  const isScreenShare = trackReference.source != Track.Source.Camera

  return (
@@ -141,24 +145,32 @@ export const ParticipantTile: (
                      style={{
                        padding: '0.1rem 0.25rem',
                        backgroundColor:
-                          isHandRaised && !isScreenShare ? 'white' : undefined,
+                          isHandRaised && !isScreenShare
+                            ? firstInQueue
+                              ? '#fde047'
+                              : 'white'
+                            : undefined,
                        color:
                          isHandRaised && !isScreenShare ? 'black' : undefined,
                        transition: 'background 200ms ease, color 400ms ease',
                      }}
                    >
                      {isHandRaised && !isScreenShare && (
-                        <RiHand
-                          color="black"
-                          size={16}
-                          style={{
-                            marginRight: '0.4rem',
-                            minWidth: '16px',
-                            animationDuration: '300ms',
-                            animationName: 'wave_hand',
-                            animationIterationCount: '2',
-                          }}
-                        />
+                        <>
+                          <span>{positionInQueue}</span>
+                          <RiHand
+                            color="black"
+                            size={16}
+                            style={{
+                              marginRight: '0.4rem',
+                              marginLeft: '0.1rem',
+                              minWidth: '16px',
+                              animationDuration: '300ms',
+                              animationName: 'wave_hand',
+                              animationIterationCount: '2',
+                            }}
+                          />
+                        </>
                      )}
                      {isScreenShare && (
                        <ScreenShareIcon
@@ -0,0 +1,130 @@
+import { useTranslation } from 'react-i18next'
+import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
+import { Button, Popover } from '@/primitives'
+import { RiArrowUpSLine } from '@remixicon/react'
+import { Track } from 'livekit-client'
+
+import { ToggleDevice } from './ToggleDevice'
+import { css } from '@/styled-system/css'
+import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
+import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import Source = Track.Source
+import * as React from 'react'
+import { SelectDevice } from './SelectDevice'
+import { SettingsButton } from './SettingsButton'
+import { SettingsDialogExtendedKey } from '@/features/settings/type'
+
+type AudioDevicesControlProps = Omit<
+  UseTrackToggleProps<Source.Microphone>,
+  'source' | 'onChange'
+> & {
+  hideMenu?: boolean
+}
+
+export const AudioDevicesControl = ({
+  hideMenu,
+  ...props
+}: AudioDevicesControlProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+
+  const {
+    userChoices: { audioDeviceId, audioOutputDeviceId },
+    saveAudioInputDeviceId,
+    saveAudioInputEnabled,
+    saveAudioOutputDeviceId,
+  } = usePersistentUserChoices()
+
+  const onChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const trackProps = useTrackToggle({
+    source: Source.Microphone,
+    onChange,
+    ...props,
+  })
+
+  const kind = 'audioinput'
+  const cannotUseDevice = useCannotUseDevice(kind)
+  const selectLabel = t(`settings.${SettingsDialogExtendedKey.AUDIO}`)
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        gap: '1px',
+      })}
+    >
+      <ToggleDevice
+        {...trackProps}
+        kind={kind}
+        toggle={trackProps.toggle as () => Promise<void>}
+        overrideToggleButtonProps={{
+          ...(hideMenu
+            ? {
+                groupPosition: undefined,
+              }
+            : {}),
+        }}
+      />
+      {!hideMenu && (
+        <Popover variant="dark" withArrow={false}>
+          <Button
+            tooltip={selectLabel}
+            aria-label={selectLabel}
+            groupPosition="right"
+            square
+            variant={
+              trackProps.enabled && !cannotUseDevice ? 'primaryDark' : 'error2'
+            }
+          >
+            <RiArrowUpSLine />
+          </Button>
+          {({ close }) => (
+            <div
+              className={css({
+                maxWidth: '36rem',
+                padding: '0.15rem',
+                display: 'flex',
+                gap: '0.5rem',
+              })}
+            >
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind={kind}
+                  id={audioDeviceId}
+                  onSubmit={saveAudioInputDeviceId}
+                />
+              </div>
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind="audiooutput"
+                  id={audioOutputDeviceId}
+                  onSubmit={saveAudioOutputDeviceId}
+                />
+              </div>
+              <SettingsButton
+                settingTab={SettingsDialogExtendedKey.AUDIO}
+                onPress={close}
+              />
+            </div>
+          )}
+        </Popover>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,47 @@
+import { Button } from '@/primitives'
+import { RiErrorWarningFill } from '@remixicon/react'
+import { openPermissionsDialog } from '@/stores/permissions'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+
+export const PermissionNeededButton = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'permissionsButton' })
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        bottom: 'auto',
+        left: '-.55rem',
+        top: '-.55rem',
+        zIndex: 1,
+      })}
+    >
+      <Button
+        aria-label={t('ariaLabel')}
+        tooltip={t('tooltip')}
+        onPress={openPermissionsDialog}
+        variant="permission"
+      >
+        <div
+          className={css({
+            position: 'relative',
+            zIndex: 2,
+          })}
+        >
+          <RiErrorWarningFill size={28} />
+        </div>
+        <div
+          className={css({
+            width: '18px',
+            height: '18px',
+            position: 'absolute',
+            top: '4px',
+            left: '4px',
+            backgroundColor: 'black',
+            borderRadius: '100%',
+          })}
+        />
+      </Button>
+    </div>
+  )
+}
@@ -0,0 +1,123 @@
+import { useTranslation } from 'react-i18next'
+import { useMediaDeviceSelect } from '@livekit/components-react'
+import { useEffect, useMemo } from 'react'
+import { Select, SelectProps } from '@/primitives/Select'
+import { Placement } from '@react-types/overlays'
+import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useDeviceIcons } from '@/features/rooms/livekit/hooks/useDeviceIcons'
+
+type DeviceItems = Array<{ value: string; label: string }>
+
+type SelectDeviceContext = {
+  variant?: 'light' | 'dark'
+  placement?: Placement
+}
+
+type SelectDeviceProps = {
+  id?: string
+  onSubmit?: (id: string) => void
+  kind: MediaDeviceKind
+  context?: 'join' | 'room'
+}
+
+type SelectDevicePermissionsProps<T> = SelectDeviceProps &
+  Pick<SelectProps<T>, 'placement' | 'variant' | 'iconComponent'>
+
+const SelectDevicePermissions = <T extends string | number>({
+  id,
+  kind,
+  onSubmit,
+  iconComponent,
+  ...props
+}: SelectDevicePermissionsProps<T>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+
+  const { devices, activeDeviceId, setActiveMediaDevice } =
+    useMediaDeviceSelect({ kind: kind, requestPermissions: true })
+
+  const items: DeviceItems = devices
+    .filter((d) => !!d.deviceId)
+    .map((d) => ({
+      value: d.deviceId,
+      label: d.label,
+    }))
+
+  /**
+   * FALLBACK AUDIO OUTPUT DEVICE SELECTION
+   * Auto-selects the only available audio output device when currently on 'default'
+   */
+  useEffect(() => {
+    if (
+      kind !== 'audiooutput' ||
+      items.length !== 1 ||
+      items[0].value === 'default' ||
+      activeDeviceId !== 'default'
+    )
+      return
+    onSubmit?.(items[0].value)
+    setActiveMediaDevice(items[0].value)
+  }, [items, onSubmit, kind, setActiveMediaDevice, activeDeviceId])
+
+  const selectedKey = id || activeDeviceId
+
+  return (
+    <Select
+      aria-label={t(`${kind}.choose`)}
+      label=""
+      isDisabled={items.length === 0}
+      items={items}
+      iconComponent={iconComponent}
+      placeholder={items.length === 0 ? t('loading') : t('select')}
+      selectedKey={selectedKey}
+      onSelectionChange={(key) => {
+        if (key === selectedKey) return
+        onSubmit?.(key as string)
+        setActiveMediaDevice(key as string)
+      }}
+      {...props}
+    />
+  )
+}
+
+export const SelectDevice = ({
+  id,
+  onSubmit,
+  kind,
+  context = 'join',
+}: SelectDeviceProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+
+  const contextProps = useMemo<SelectDeviceContext>(() => {
+    if (context == 'room') {
+      return { variant: 'dark', placement: 'top' }
+    }
+    return {}
+  }, [context])
+
+  const deviceIcons = useDeviceIcons(kind)
+  const cannotUseDevice = useCannotUseDevice(kind)
+
+  if (cannotUseDevice) {
+    return (
+      <Select
+        aria-label={t(`${kind}.permissionsNeeded`)}
+        label=""
+        isDisabled={true}
+        items={[]}
+        placeholder={t('permissionsNeeded')}
+        iconComponent={deviceIcons.select}
+        {...contextProps}
+      />
+    )
+  }
+
+  return (
+    <SelectDevicePermissions
+      id={id}
+      onSubmit={onSubmit}
+      kind={kind}
+      iconComponent={deviceIcons.select}
+      {...contextProps}
+    />
+  )
+}
@@ -0,0 +1,32 @@
+import { Button } from '@/primitives'
+import { RiSettings3Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { SettingsDialogExtendedKey } from '@/features/settings/type'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+
+export const SettingsButton = ({
+  settingTab,
+  onPress,
+}: {
+  settingTab: SettingsDialogExtendedKey
+  onPress?: () => void
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const { openSettingsDialog } = useSettingsDialog()
+
+  return (
+    <Button
+      size="sm"
+      square
+      tooltip={t(`settings.${settingTab}`)}
+      aria-label={t(`settings.${settingTab}`)}
+      variant="primaryDark"
+      onPress={() => {
+        openSettingsDialog(settingTab)
+        onPress?.()
+      }}
+    >
+      <RiSettings3Line size={24} />
+    </Button>
+  )
+}
@@ -0,0 +1,142 @@
+import { ToggleButton } from '@/primitives'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useMemo, useState } from 'react'
+import { appendShortcutLabel } from '@/features/shortcuts/utils'
+import { useTranslation } from 'react-i18next'
+import { PermissionNeededButton } from './PermissionNeededButton'
+import useLongPress from '@/features/shortcuts/useLongPress'
+import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
+import {
+  useIsSpeaking,
+  useLocalParticipant,
+  useMaybeRoomContext,
+} from '@livekit/components-react'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { openPermissionsDialog } from '@/stores/permissions'
+import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useDeviceIcons } from '../../../hooks/useDeviceIcons'
+import { useDeviceShortcut } from '../../../hooks/useDeviceShortcut'
+import { ToggleSource, CaptureOptionsBySource } from '@livekit/components-core'
+
+type ToggleDeviceStyleProps = {
+  variant?: NonNullable<ButtonRecipeProps>['variant']
+  errorVariant?: NonNullable<ButtonRecipeProps>['variant']
+  toggleButtonProps?: Partial<ToggleButtonProps>
+}
+
+export type ToggleDeviceProps<T extends ToggleSource> = {
+  enabled: boolean
+  toggle: (
+    forceState?: boolean,
+    captureOptions?: CaptureOptionsBySource<T>
+  ) => Promise<void | boolean | undefined>
+  context?: 'room' | 'join'
+  kind: 'audioinput' | 'videoinput'
+  overrideToggleButtonProps?: Partial<ToggleButtonProps>
+}
+
+export const ToggleDevice = <T extends ToggleSource>({
+  kind,
+  enabled,
+  toggle,
+  context = 'room',
+  overrideToggleButtonProps,
+}: ToggleDeviceProps<T>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+
+  const {
+    variant,
+    errorVariant,
+    toggleButtonProps: computedToggleButtonProps,
+  } = useMemo<ToggleDeviceStyleProps>(() => {
+    if (context === 'join') {
+      return {
+        variant: 'whiteCircle',
+        errorVariant: 'errorCircle',
+        toggleButtonProps: {
+          groupPosition: undefined,
+        },
+      } as ToggleDeviceStyleProps
+    }
+    return {
+      variant: 'primaryDark',
+      errorVariant: 'error2',
+      toggleButtonProps: {
+        groupPosition: 'left',
+      },
+    } as ToggleDeviceStyleProps
+  }, [context])
+
+  const [pushToTalk, setPushToTalk] = useState(false)
+
+  const onKeyDown = () => {
+    if (pushToTalk || enabled) return
+    toggle()
+    setPushToTalk(true)
+  }
+  const onKeyUp = () => {
+    if (!pushToTalk) return
+    toggle()
+    setPushToTalk(false)
+  }
+
+  const deviceIcons = useDeviceIcons(kind)
+  const cannotUseDevice = useCannotUseDevice(kind)
+  const deviceShortcut = useDeviceShortcut(kind)
+
+  useRegisterKeyboardShortcut({
+    shortcut: deviceShortcut,
+    handler: async () => await toggle(),
+    isDisabled: cannotUseDevice,
+  })
+  useLongPress({
+    keyCode: kind === 'audioinput' ? 'Space' : undefined,
+    onKeyDown,
+    onKeyUp,
+    isDisabled: cannotUseDevice,
+  })
+
+  const toggleLabel = useMemo(() => {
+    const label = t(enabled ? 'disable' : 'enable', {
+      keyPrefix: `selectDevice.${kind}`,
+    })
+    return deviceShortcut ? appendShortcutLabel(label, deviceShortcut) : label
+  }, [enabled, kind, deviceShortcut, t])
+
+  const Icon =
+    enabled && !cannotUseDevice ? deviceIcons.toggleOn : deviceIcons.toggleOff
+
+  const roomContext = useMaybeRoomContext()
+  if (kind === 'audioinput' && pushToTalk && roomContext) {
+    return <ActiveSpeakerWrapper />
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {cannotUseDevice && <PermissionNeededButton />}
+      <ToggleButton
+        isSelected={!enabled}
+        variant={enabled && !cannotUseDevice ? variant : errorVariant}
+        shySelected
+        onPress={() => (cannotUseDevice ? openPermissionsDialog() : toggle())}
+        aria-label={toggleLabel}
+        tooltip={
+          cannotUseDevice
+            ? t('tooltip', { keyPrefix: 'permissionsButton' })
+            : toggleLabel
+        }
+        {...computedToggleButtonProps}
+        {...overrideToggleButtonProps}
+      >
+        <Icon />
+      </ToggleButton>
+    </div>
+  )
+}
+
+const ActiveSpeakerWrapper = () => {
+  const { localParticipant } = useLocalParticipant()
+  const isSpeaking = useIsSpeaking(localParticipant)
+  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
+}
@@ -0,0 +1,164 @@
+import { useTranslation } from 'react-i18next'
+import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
+import { Button, Popover } from '@/primitives'
+import { RiArrowUpSLine, RiImageCircleAiFill } from '@remixicon/react'
+import { Track, VideoCaptureOptions } from 'livekit-client'
+
+import { ToggleDevice } from './ToggleDevice'
+import { css } from '@/styled-system/css'
+import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
+import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { BackgroundProcessorFactory } from '../../blur'
+import Source = Track.Source
+import * as React from 'react'
+import { SelectDevice } from './SelectDevice'
+import { SettingsButton } from './SettingsButton'
+import { SettingsDialogExtendedKey } from '@/features/settings/type'
+
+const EffectsButton = ({ onPress }: { onPress: () => void }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const { isEffectsOpen, toggleEffects } = useSidePanel()
+  return (
+    <Button
+      size="sm"
+      square
+      tooltip={t('effects')}
+      aria-label={t('effects')}
+      variant="primaryDark"
+      onPress={() => {
+        if (!isEffectsOpen) toggleEffects()
+        onPress()
+      }}
+    >
+      <RiImageCircleAiFill size={24} />
+    </Button>
+  )
+}
+
+type VideoDeviceControlProps = Omit<
+  UseTrackToggleProps<Source.Camera>,
+  'source' | 'onChange'
+> & {
+  hideMenu?: boolean
+}
+
+export const VideoDeviceControl = ({
+  hideMenu,
+  ...props
+}: VideoDeviceControlProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+
+  const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } =
+    usePersistentUserChoices()
+
+  const onChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  const trackProps = useTrackToggle({
+    source: Source.Camera,
+    onChange,
+    ...props,
+  })
+
+  const kind = 'videoinput'
+  const cannotUseDevice = useCannotUseDevice(kind)
+
+  const toggleWithProcessor = async () => {
+    /**
+     * We need to make sure that we apply the in-memory processor when re-enabling the camera.
+     * Before, we had the following bug:
+     * 1 - Configure a processor on join screen
+     * 2 - Turn off camera on join screen
+     * 3 - Join the room
+     * 4 - Turn on the camera
+     * 5 - No processor is applied to the camera
+     * Expected: The processor is applied.
+     *
+     * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
+     */
+    const processor = BackgroundProcessorFactory.deserializeProcessor(
+      userChoices.processorSerialized
+    )
+
+    const toggle = trackProps.toggle as (
+      forceState: boolean,
+      captureOptions: VideoCaptureOptions
+    ) => Promise<void>
+
+    await toggle(!trackProps.enabled, {
+      processor: processor,
+    } as VideoCaptureOptions)
+  }
+
+  const selectLabel = t(`settings.${SettingsDialogExtendedKey.VIDEO}`)
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        gap: '1px',
+      })}
+    >
+      <ToggleDevice
+        {...trackProps}
+        kind={kind}
+        toggle={toggleWithProcessor}
+        overrideToggleButtonProps={{
+          ...(hideMenu
+            ? {
+                groupPosition: undefined,
+              }
+            : {}),
+        }}
+      />
+      {!hideMenu && (
+        <Popover variant="dark" withArrow={false}>
+          <Button
+            tooltip={selectLabel}
+            aria-label={selectLabel}
+            groupPosition="right"
+            square
+            variant={
+              trackProps.enabled && !cannotUseDevice ? 'primaryDark' : 'error2'
+            }
+          >
+            <RiArrowUpSLine />
+          </Button>
+          {({ close }) => (
+            <div
+              className={css({
+                maxWidth: '36rem',
+                padding: '0.15rem',
+                display: 'flex',
+                gap: '0.5rem',
+              })}
+            >
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind={kind}
+                  id={userChoices.videoDeviceId}
+                  onSubmit={saveVideoInputDeviceId}
+                />
+              </div>
+              <EffectsButton onPress={close} />
+              <SettingsButton
+                settingTab={SettingsDialogExtendedKey.VIDEO}
+                onPress={close}
+              />
+            </div>
+          )}
+        </Popover>
+      )}
+    </div>
+  )
+}
@@ -1,6 +1,5 @@
 import { useConnectionState, useRoomContext } from '@livekit/components-react'
 import { Button } from '@/primitives'
-import { navigateTo } from '@/navigation/navigateTo'
 import { RiPhoneFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ConnectionState } from 'livekit-client'
@@ -21,9 +20,6 @@ export const LeaveButton = () => {
          .catch((e) =>
            console.error('An error occurred while disconnecting:', e)
          )
-          .finally(() => {
-            navigateTo('feedback')
-          })
      }}
      data-attr="controls-leave"
    >
@@ -2,16 +2,16 @@ import { RiSettings3Line } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSettingsDialog } from '../SettingsDialogContext'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'

 export const SettingsMenuItem = () => {
  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { setDialogOpen } = useSettingsDialog()
+  const { openSettingsDialog } = useSettingsDialog()

  return (
    <MenuItem
      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => setDialogOpen(true)}
+      onAction={() => openSettingsDialog()}
    >
      <RiSettings3Line size={20} />
      {t('settings')}
@@ -11,7 +11,6 @@ import { WaitingParticipantListItem } from './WaitingParticipantListItem'
 import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
 import { Participant } from 'livekit-client'
 import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
@@ -35,10 +34,15 @@ export const ParticipantsList = () => {
    ...sortedRemoteParticipants,
  ]

-  const raisedHandParticipants = participants.filter((participant) => {
-    const data = safeParseMetadata(participant.metadata)
-    return data.raised
-  })
+  const raisedHandParticipants = participants
+    .filter((participant) => !!participant.attributes.handRaisedAt)
+    .sort((a, b) => {
+      const dateA = new Date(a.attributes.handRaisedAt)
+      const dateB = new Date(b.attributes.handRaisedAt)
+      const timeA = isNaN(dateA.getTime()) ? 0 : dateA.getTime()
+      const timeB = isNaN(dateB.getTime()) ? 0 : dateB.getTime()
+      return timeA - timeB
+    })

  const { waitingParticipants, handleParticipantEntry } =
    useWaitingParticipants()
@@ -1,199 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import {
-  useMediaDeviceSelect,
-  useTrackToggle,
-  UseTrackToggleProps,
-} from '@livekit/components-react'
-import { Button, Menu, MenuList } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
-
-import { Shortcut } from '@/features/shortcuts/types'
-
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
-import { css } from '@/styled-system/css'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useEffect } from 'react'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../blur'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
-
-type SelectToggleDeviceProps<T extends ToggleSource> =
-  UseTrackToggleProps<T> & {
-    track?: LocalAudioTrack | LocalVideoTrack | undefined
-    initialDeviceId?: string
-    onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
-    variant?: NonNullable<ButtonRecipeProps>['variant']
-    menuVariant?: 'dark' | 'light'
-    hideMenu?: boolean
-  }
-
-export const SelectToggleDevice = <T extends ToggleSource>({
-  track,
-  initialDeviceId,
-  onActiveDeviceChange,
-  hideMenu,
-  variant = 'primaryDark',
-  menuVariant = 'light',
-  ...props
-}: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const trackProps = useTrackToggle(props)
-
-  const { userChoices } = usePersistentUserChoices()
-
-  const toggle = () => {
-    if (props.source === Track.Source.Camera) {
-      /**
-       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-       * Before, we had the following bug:
-       * 1 - Configure a processor on join screen
-       * 2 - Turn off camera on join screen
-       * 3 - Join the room
-       * 4 - Turn on the camera
-       * 5 - No processor is applied to the camera
-       * Expected: The processor is applied.
-       *
-       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-       */
-      const processor = BackgroundProcessorFactory.deserializeProcessor(
-        userChoices.processorSerialized
-      )
-
-      const toggle = trackProps.toggle as (
-        forceState: boolean,
-        captureOptions: VideoCaptureOptions
-      ) => Promise<void>
-
-      toggle(!trackProps.enabled, {
-        processor: processor,
-      } as VideoCaptureOptions)
-    } else {
-      trackProps.toggle()
-    }
-  }
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind, track })
-
-  /**
-   * When providing only track outside of a room context, activeDeviceId is undefined.
-   * So we need to initialize it with the initialDeviceId.
-   * nb: I don't understand why useMediaDeviceSelect cannot infer it from track device id.
-   */
-  useEffect(() => {
-    if (initialDeviceId !== undefined) {
-      setActiveMediaDevice(initialDeviceId)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setActiveMediaDevice])
-
-  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        gap: '1px',
-      })}
-    >
-      <ToggleDevice
-        {...trackProps}
-        config={config}
-        variant={variant}
-        toggle={toggle}
-        toggleButtonProps={{
-          ...(hideMenu
-            ? {
-                groupPosition: undefined,
-              }
-            : {}),
-        }}
-      />
-      {!hideMenu && (
-        <Menu variant={menuVariant}>
-          <Button
-            tooltip={selectLabel}
-            aria-label={selectLabel}
-            groupPosition="right"
-            square
-            variant={trackProps.enabled ? variant : 'error2'}
-          >
-            <RiArrowDownSLine />
-          </Button>
-          <MenuList
-            items={devices.map((d) => ({
-              value: d.deviceId,
-              label: d.label,
-            }))}
-            selectedItem={activeDeviceId}
-            onAction={(value) => {
-              setActiveMediaDevice(value as string)
-              onActiveDeviceChange(value as string)
-            }}
-            variant={menuVariant}
-          />
-        </Menu>
-      )}
-    </div>
-  )
-}
@@ -1,36 +0,0 @@
-import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
-import React, { createContext, useContext, useState } from 'react'
-
-const SettingsDialogContext = createContext<
-  | {
-      dialogOpen: boolean
-      setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>
-    }
-  | undefined
->(undefined)
-
-export const SettingsDialogProvider: React.FC<{
-  children: React.ReactNode
-}> = ({ children }) => {
-  const [dialogOpen, setDialogOpen] = useState(false)
-  return (
-    <SettingsDialogContext.Provider value={{ dialogOpen, setDialogOpen }}>
-      {children}
-      <SettingsDialogExtended
-        isOpen={dialogOpen}
-        onOpenChange={(v) => !v && setDialogOpen(false)}
-      />
-    </SettingsDialogContext.Provider>
-  )
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const useSettingsDialog = () => {
-  const context = useContext(SettingsDialogContext)
-  if (!context) {
-    throw new Error(
-      'useSettingsDialog must be used within a SettingsDialogProvider'
-    )
-  }
-  return context
-}
@@ -1,86 +0,0 @@
-import { ToggleButton } from '@/primitives'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useMemo, useState } from 'react'
-import { appendShortcutLabel } from '@/features/shortcuts/utils'
-import { useTranslation } from 'react-i18next'
-import { SelectToggleDeviceConfig } from './SelectToggleDevice'
-import useLongPress from '@/features/shortcuts/useLongPress'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import {
-  useIsSpeaking,
-  useLocalParticipant,
-  useMaybeRoomContext,
-} from '@livekit/components-react'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-
-export type ToggleDeviceProps = {
-  enabled: boolean
-  toggle: () => void
-  config: SelectToggleDeviceConfig
-  variant?: NonNullable<ButtonRecipeProps>['variant']
-  toggleButtonProps?: Partial<ToggleButtonProps>
-}
-
-export const ToggleDevice = ({
-  config,
-  enabled,
-  toggle,
-  variant = 'primaryDark',
-  toggleButtonProps,
-}: ToggleDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const { kind, shortcut, iconOn, iconOff, longPress } = config
-
-  const [pushToTalk, setPushToTalk] = useState(false)
-
-  const onKeyDown = () => {
-    if (pushToTalk || enabled) return
-    toggle()
-    setPushToTalk(true)
-  }
-  const onKeyUp = () => {
-    if (!pushToTalk) return
-    toggle()
-    setPushToTalk(false)
-  }
-
-  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
-  useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })
-
-  const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `join.${kind}`,
-    })
-    return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [enabled, kind, shortcut, t])
-
-  const Icon = enabled ? iconOn : iconOff
-
-  const context = useMaybeRoomContext()
-  if (kind === 'audioinput' && pushToTalk && context) {
-    return <ActiveSpeakerWrapper />
-  }
-
-  return (
-    <ToggleButton
-      isSelected={!enabled}
-      variant={enabled ? variant : 'error2'}
-      shySelected
-      onPress={() => toggle()}
-      aria-label={toggleLabel}
-      tooltip={toggleLabel}
-      groupPosition="left"
-      {...toggleButtonProps}
-    >
-      <Icon />
-    </ToggleButton>
-  )
-}
-
-const ActiveSpeakerWrapper = () => {
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-}
@@ -0,0 +1,35 @@
+import { useSnapshot } from 'valtio'
+import { useMemo } from 'react'
+import { permissionsStore } from '@/stores/permissions'
+
+export const useCannotUseDevice = (kind: MediaDeviceKind) => {
+  const {
+    isLoading,
+    isMicrophoneDenied,
+    isMicrophonePrompted,
+    isCameraDenied,
+    isCameraPrompted,
+  } = useSnapshot(permissionsStore)
+
+  return useMemo(() => {
+    if (isLoading) return true
+
+    switch (kind) {
+      case 'audioinput':
+      case 'audiooutput': // audiooutput uses microphone permissions
+        return isMicrophoneDenied || isMicrophonePrompted
+      case 'videoinput':
+        return isCameraDenied || isCameraPrompted
+
+      default:
+        return false
+    }
+  }, [
+    kind,
+    isLoading,
+    isMicrophoneDenied,
+    isMicrophonePrompted,
+    isCameraDenied,
+    isCameraPrompted,
+  ])
+}
@@ -0,0 +1,79 @@
+import { useTelephony } from './useTelephony'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useMemo, useState } from 'react'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+
+const COPY_SUCCESS_TIMEOUT = 3000
+
+export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
+  const telephony = useTelephony()
+  const { t } = useTranslation('global', { keyPrefix: 'clipboardContent' })
+
+  const [isCopied, setIsCopied] = useState(false)
+  const [isRoomUrlCopied, setIsRoomUrlCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), COPY_SUCCESS_TIMEOUT)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
+
+  useEffect(() => {
+    if (isRoomUrlCopied) {
+      const timeout = setTimeout(
+        () => setIsRoomUrlCopied(false),
+        COPY_SUCCESS_TIMEOUT
+      )
+      return () => clearTimeout(timeout)
+    }
+  }, [isRoomUrlCopied])
+
+  const roomUrl = useMemo(() => {
+    return room?.slug ? getRouteUrl('room', room.slug) : ''
+  }, [room?.slug])
+
+  const hasTelephonyInfo = useMemo(() => {
+    return telephony.enabled && room?.pin_code
+  }, [telephony.enabled, room?.pin_code])
+
+  const content = useMemo(() => {
+    if (!roomUrl || !room) return ''
+    if (!hasTelephonyInfo) return roomUrl
+
+    return [
+      t('url', { roomUrl }),
+      t('numberAndPin', {
+        phoneNumber: telephony?.internationalPhoneNumber,
+        pinCode: formatPinCode(room.pin_code),
+      }),
+    ].join('\n')
+  }, [roomUrl, hasTelephonyInfo, telephony, room, t])
+
+  const copyRoomToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setIsCopied(true)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const copyRoomUrlToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(roomUrl)
+      setIsRoomUrlCopied(true)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  }
+}
@@ -0,0 +1,37 @@
+import {
+  RemixiconComponentType,
+  RiMicLine,
+  RiMicOffLine,
+  RiVideoOffLine,
+  RiVideoOnLine,
+  RiVolumeDownLine,
+  RiVolumeMuteLine,
+} from '@remixicon/react'
+
+export interface DeviceIcons {
+  toggleOn: RemixiconComponentType
+  toggleOff: RemixiconComponentType
+  select: RemixiconComponentType
+}
+
+const ICONS: Record<MediaDeviceKind | 'default', DeviceIcons> = {
+  audioinput: {
+    toggleOn: RiMicLine,
+    toggleOff: RiMicOffLine,
+    select: RiMicLine,
+  },
+  videoinput: {
+    toggleOn: RiVideoOnLine,
+    toggleOff: RiVideoOffLine,
+    select: RiVideoOnLine,
+  },
+  audiooutput: {
+    toggleOn: RiVolumeDownLine,
+    toggleOff: RiVolumeMuteLine,
+    select: RiVolumeDownLine,
+  },
+  default: { toggleOn: RiMicLine, toggleOff: RiMicOffLine, select: RiMicLine },
+}
+
+export const useDeviceIcons = (kind: MediaDeviceKind): DeviceIcons =>
+  ICONS[kind] ?? ICONS.default
@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { Shortcut } from '@/features/shortcuts/types'
+
+export const useDeviceShortcut = (kind: MediaDeviceKind) => {
+  return useMemo<Shortcut | undefined>(() => {
+    switch (kind) {
+      case 'audioinput':
+        return {
+          key: 'e',
+          ctrlKey: true,
+        }
+      case 'videoinput':
+        return {
+          key: 'd',
+          ctrlKey: true,
+        }
+      default:
+        return undefined
+    }
+  }, [kind])
+}
@@ -4,7 +4,7 @@ import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalytics
 import { isMobileBrowser } from '@livekit/components-core'

 export const useNoiseReductionAvailable = () => {
-  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.faceLandmarks)
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.noiseReduction)
  const isAnalyticsEnabled = useIsAnalyticsEnabled()

  const isMobile = isMobileBrowser()
@@ -1,6 +1,8 @@
 import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
+import type { VideoResolution } from '@/stores/userChoices'
 import { ProcessorSerialized } from '@/features/rooms/livekit/components/blur'
+import type { VideoQuality } from 'livekit-client'

 export function usePersistentUserChoices() {
  const userChoicesSnap = useSnapshot(userChoicesStore)
@@ -16,9 +18,18 @@ export function usePersistentUserChoices() {
    saveAudioInputDeviceId: (deviceId: string) => {
      userChoicesStore.audioDeviceId = deviceId
    },
+    saveAudioOutputDeviceId: (deviceId: string) => {
+      userChoicesStore.audioOutputDeviceId = deviceId
+    },
    saveVideoInputDeviceId: (deviceId: string) => {
      userChoicesStore.videoDeviceId = deviceId
    },
+    saveVideoPublishResolution: (resolution: VideoResolution) => {
+      userChoicesStore.videoPublishResolution = resolution
+    },
+    saveVideoSubscribeQuality: (quality: VideoQuality) => {
+      userChoicesStore.videoSubscribeQuality = quality
+    },
    saveUsername: (username: string) => {
      userChoicesStore.username = username
    },
@@ -1,23 +1,58 @@
 import { LocalParticipant, Participant } from 'livekit-client'
-import { useParticipantInfo } from '@livekit/components-react'
+import {
+  useParticipantAttribute,
+  useParticipants,
+} from '@livekit/components-react'
 import { isLocal } from '@/utils/livekit'
+import { useMemo } from 'react'

 type useRaisedHandProps = {
  participant: Participant
 }

-export function useRaisedHand({ participant }: useRaisedHandProps) {
-  // fixme - refactor this part to rely on attributes
-  const { metadata } = useParticipantInfo({ participant })
-  const parsedMetadata = JSON.parse(metadata ?? '{}')
+export function useRaisedHandPosition({ participant }: useRaisedHandProps) {
+  const { isHandRaised } = useRaisedHand({ participant })

-  const toggleRaisedHand = () => {
-    if (isLocal(participant)) {
-      parsedMetadata.raised = !parsedMetadata.raised
-      const localParticipant = participant as LocalParticipant
-      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
+  const participants = useParticipants()
+
+  const positionInQueue = useMemo(() => {
+    if (!isHandRaised) return
+
+    return (
+      participants
+        .filter((p) => !!p.attributes.handRaisedAt)
+        .sort((a, b) => {
+          const dateA = new Date(a.attributes.handRaisedAt)
+          const dateB = new Date(b.attributes.handRaisedAt)
+          return dateA.getTime() - dateB.getTime()
+        })
+        .findIndex((p) => p.identity === participant.identity) + 1
+    )
+  }, [participants, participant, isHandRaised])
+
+  return {
+    positionInQueue,
+    firstInQueue: positionInQueue == 1,
+  }
+}
+
+export function useRaisedHand({ participant }: useRaisedHandProps) {
+  const handRaisedAtAttribute = useParticipantAttribute('handRaisedAt', {
+    participant,
+  })
+
+  const isHandRaised = !!handRaisedAtAttribute
+
+  const toggleRaisedHand = async () => {
+    if (!isLocal(participant)) return
+    const localParticipant = participant as LocalParticipant
+
+    const attributes: Record<string, string> = {
+      handRaisedAt: !isHandRaised ? new Date().toISOString() : '',
    }
+
+    await localParticipant.setAttributes(attributes)
  }

-  return { isHandRaised: parsedMetadata.raised ?? false, toggleRaisedHand }
+  return { isHandRaised, toggleRaisedHand }
 }
@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react'
+
+export const useResolveInitiallyDefaultDeviceId = <
+  T extends { getDeviceId(): Promise<string | undefined> },
+>(
+  currentId: string,
+  track: T | undefined,
+  save: (id: string) => void
+) => {
+  const isInitiated = useRef(false)
+  useEffect(() => {
+    if (currentId !== 'default' || !track || isInitiated.current) return
+    const resolveDefaultDeviceId = async () => {
+      const actualDeviceId = await track.getDeviceId()
+      if (actualDeviceId && actualDeviceId !== 'default') {
+        isInitiated.current = true
+        save(actualDeviceId)
+      }
+    }
+    resolveDefaultDeviceId()
+  }, [currentId, track, save])
+}
@@ -0,0 +1,20 @@
+import { useConfig } from '@/api/useConfig.ts'
+import { useMemo } from 'react'
+import { parseConfigPhoneNumber } from '../../utils/telephony'
+
+export const useTelephony = () => {
+  const { data } = useConfig()
+
+  const parsedPhoneNumber = useMemo(() => {
+    return parseConfigPhoneNumber(
+      data?.telephony?.phone_number,
+      data?.telephony?.default_country
+    )
+  }, [data?.telephony])
+
+  return {
+    enabled: data?.telephony?.enabled && parsedPhoneNumber,
+    country: parsedPhoneNumber?.country,
+    internationalPhoneNumber: parsedPhoneNumber?.formatInternational(),
+  }
+}
@@ -0,0 +1,51 @@
+import { useEffect } from 'react'
+import { usePersistentUserChoices } from './usePersistentUserChoices'
+import { useRoomContext } from '@livekit/components-react'
+import {
+  RemoteParticipant,
+  RemoteTrackPublication,
+  RoomEvent,
+  Track,
+  VideoQuality,
+} from 'livekit-client'
+
+/**
+ * This hook sets initial video quality for new participants as they join.
+ * LiveKit doesn't allow handling video quality preferences at the room level.
+ */
+export const useVideoResolutionSubscription = () => {
+  const {
+    userChoices: { videoSubscribeQuality },
+  } = usePersistentUserChoices()
+
+  const room = useRoomContext()
+
+  useEffect(() => {
+    if (!room) return
+    const handleTrackPublished = (
+      publication: RemoteTrackPublication,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _participant: RemoteParticipant
+    ) => {
+      // By default, the maximum quality is set to high
+      if (
+        videoSubscribeQuality === undefined ||
+        videoSubscribeQuality === VideoQuality.HIGH
+      )
+        return
+
+      if (
+        publication.kind === Track.Kind.Video &&
+        publication.source !== Track.Source.ScreenShare
+      ) {
+        publication.setVideoQuality(videoSubscribeQuality)
+      }
+    }
+
+    room.on(RoomEvent.TrackPublished, handleTrackPublished)
+
+    return () => {
+      room.off(RoomEvent.TrackPublished, handleTrackPublished)
+    }
+  }, [room, videoSubscribeQuality])
+}
@@ -3,98 +3,23 @@ import * as React from 'react'

 import { MobileControlBar } from './MobileControlBar'
 import { DesktopControlBar } from './DesktopControlBar'
-import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
 import { useIsMobile } from '@/utils/useIsMobile'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'

-/** @public */
-export type ControlBarControls = {
-  microphone?: boolean
-  camera?: boolean
-  chat?: boolean
-  screenShare?: boolean
-  leave?: boolean
-  settings?: boolean
-}
-
-/** @public */
 export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
-  variation?: 'minimal' | 'verbose' | 'textOnly'
-  controls?: ControlBarControls
-  /**
-   * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
-   * @defaultValue true
-   * @alpha
-   */
-  saveUserChoices?: boolean
 }

 /**
 * The `ControlBar` prefab gives the user the basic user interface to control their
 * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
- *
- * @remarks
- * This component is build with other LiveKit components like `TrackToggle`,
- * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <ControlBar />
- * </LiveKitRoom>
- * ```
- * @public
 */
 export function ControlBar({ onDeviceError }: ControlBarProps) {
-  const {
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  } = usePersistentUserChoices()
-
-  const microphoneOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
-    [saveAudioInputEnabled]
-  )
-
-  const cameraOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
-    [saveVideoInputEnabled]
-  )
-
-  const barProps = {
-    onDeviceError,
-    microphoneOnChange,
-    cameraOnChange,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  }
-
  const isMobile = useIsMobile()

-  return (
-    <SettingsDialogProvider>
-      {isMobile ? (
-        <MobileControlBar {...barProps} />
-      ) : (
-        <DesktopControlBar {...barProps} />
-      )}
-    </SettingsDialogProvider>
-  )
+  if (isMobile) {
+    return <MobileControlBar onDeviceError={onDeviceError} />
+  }
+  return <DesktopControlBar onDeviceError={onDeviceError} />
 }

-export interface ControlBarAuxProps {
-  onDeviceError: ControlBarProps['onDeviceError']
-  microphoneOnChange: (
-    enabled: boolean,
-    isUserInitiated: boolean
-  ) => void | null
-  cameraOnChange: (enabled: boolean, isUserInitiated: boolean) => void | null
-  saveAudioInputDeviceId: (deviceId: string) => void
-  saveVideoInputDeviceId: (deviceId: string) => void
-}
+export type ControlBarAuxProps = Pick<ControlBarProps, 'onDeviceError'>
@@ -2,7 +2,6 @@ import { supportsScreenSharing } from '@livekit/components-core'
 import { ControlBarAuxProps } from './ControlBar'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
-import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
 import { Track } from 'livekit-client'
 import { ReactionsToggle } from '../../components/controls/ReactionsToggle'
 import { HandToggle } from '../../components/controls/HandToggle'
@@ -11,14 +10,12 @@ import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
 import { useRef } from 'react'
+import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
+import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'

 export function DesktopControlBar({
  onDeviceError,
-  microphoneOnChange,
-  cameraOnChange,
-  saveAudioInputDeviceId,
-  saveVideoInputDeviceId,
-}: ControlBarAuxProps) {
+}: Readonly<ControlBarAuxProps>) {
  const browserSupportsScreenSharing = supportsScreenSharing()
  const desktopControlBarEl = useRef<HTMLDivElement>(null)
  return (
@@ -53,27 +50,15 @@ export function DesktopControlBar({
          gap: '0.65rem',
        })}
      >
-        <SelectToggleDevice
-          source={Track.Source.Microphone}
-          onChange={microphoneOnChange}
+        <AudioDevicesControl
          onDeviceError={(error) =>
            onDeviceError?.({ source: Track.Source.Microphone, error })
          }
-          onActiveDeviceChange={(deviceId) =>
-            saveAudioInputDeviceId(deviceId ?? '')
-          }
-          menuVariant="dark"
        />
-        <SelectToggleDevice
-          source={Track.Source.Camera}
-          onChange={cameraOnChange}
+        <VideoDeviceControl
          onDeviceError={(error) =>
            onDeviceError?.({ source: Track.Source.Camera, error })
          }
-          onActiveDeviceChange={(deviceId) =>
-            saveVideoInputDeviceId(deviceId ?? '')
-          }
-          menuVariant="dark"
        />
        <ReactionsToggle />
        {browserSupportsScreenSharing && (
@@ -4,7 +4,6 @@ import { ControlBarAuxProps } from './ControlBar'
 import React from 'react'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
-import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
 import { Track } from 'livekit-client'
 import { HandToggle } from '../../components/controls/HandToggle'
 import { Button } from '@/primitives/Button'
@@ -19,24 +18,22 @@ import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
-import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
 import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'
 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'

 export function MobileControlBar({
  onDeviceError,
-  microphoneOnChange,
-  cameraOnChange,
-  saveAudioInputDeviceId,
-  saveVideoInputDeviceId,
-}: ControlBarAuxProps) {
+}: Readonly<ControlBarAuxProps>) {
  const { t } = useTranslation('rooms')
  const [isMenuOpened, setIsMenuOpened] = React.useState(false)
  const browserSupportsScreenSharing = supportsScreenSharing()
  const { toggleEffects } = useSidePanel()
-  const { setDialogOpen } = useSettingsDialog()
+  const { openSettingsDialog } = useSettingsDialog()

  const { data } = useConfig()

@@ -62,27 +59,15 @@ export function MobileControlBar({
          })}
        >
          <LeaveButton />
-          <SelectToggleDevice
-            source={Track.Source.Microphone}
-            onChange={microphoneOnChange}
+          <AudioDevicesControl
            onDeviceError={(error) =>
              onDeviceError?.({ source: Track.Source.Microphone, error })
            }
-            onActiveDeviceChange={(deviceId) =>
-              saveAudioInputDeviceId(deviceId ?? '')
-            }
-            hideMenu={true}
          />
-          <SelectToggleDevice
-            source={Track.Source.Camera}
-            onChange={cameraOnChange}
+          <VideoDeviceControl
            onDeviceError={(error) =>
              onDeviceError?.({ source: Track.Source.Camera, error })
            }
-            onActiveDeviceChange={(deviceId) =>
-              saveVideoInputDeviceId(deviceId ?? '')
-            }
-            hideMenu={true}
          />
          <HandToggle />
          <Button
@@ -167,7 +152,7 @@ export function MobileControlBar({
            )}
            <Button
              onPress={() => {
-                setDialogOpen(true)
+                openSettingsDialog()
                setIsMenuOpened(false)
              }}
              variant="primaryTextDark"
@@ -32,6 +32,8 @@ import { RecordingStateToast } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
+import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
+import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'

 const LayoutWrapper = styled(
  'div',
@@ -77,6 +79,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
    React.useRef<TrackReferenceOrPlaceholder | null>(null)

  useConnectionObserver()
+  useVideoResolutionSubscription()

  const tracks = useTracks(
    [
@@ -238,6 +241,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
      <RoomAudioRenderer />
      <ConnectionStateToast />
      <RecordingStateToast />
+      <SettingsDialogProvider />
    </div>
  )
 }
@@ -3,7 +3,7 @@ import { Button } from '@/primitives'
 import { Screen } from '@/layout/Screen'
 import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
 import { Rating } from '@/features/rooms/components/Rating.tsx'
-import { useLocation } from 'wouter'
+import { useLocation, useSearchParams } from 'wouter'

 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -16,17 +16,25 @@ const Heading = styled('h1', {
    lineHeight: '2.5rem',
    letterSpacing: '0',
    paddingBottom: '2rem',
+    textAlign: 'center',
  },
 })

 export const FeedbackRoute = () => {
  const { t } = useTranslation('rooms')
  const [, setLocation] = useLocation()
+
+  const [searchParams] = useSearchParams()
+
  return (
    <Screen layout="centered" footer={false}>
      <Center>
        <VStack>
-          <Heading>{t('feedback.heading')}</Heading>
+          <Heading>
+            {t(
+              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
+            )}
+          </Heading>
          <HStack>
            <Button variant="secondary" onPress={() => window.history.back()}>
              {t('feedback.back')}
@@ -1,21 +1,28 @@
-import { useEffect, useState } from 'react'
-import { usePersistentUserChoices } from '@livekit/components-react'
+import { ReactNode, useEffect, useState } from 'react'
 import { useLocation, useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
+import { Permissions } from '../components/Permissions'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 import {
  isRoomValid,
  normalizeRoomId,
 } from '@/features/rooms/utils/isRoomValid'
-import { LocalUserChoices } from '@/stores/userChoices'
+
+const BaseRoom = ({ children }: { children: ReactNode }) => {
+  return (
+    <UserAware>
+      <Permissions />
+      {children}
+    </UserAware>
+  )
+}

 export const Room = () => {
  const { isLoggedIn } = useUser()
-  const { userChoices: existingUserChoices } = usePersistentUserChoices()
-  const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+  const [hasSubmittedEntry, setHasSubmittedEntry] = useState(false)

  const { roomId } = useParams()
  const [location, setLocation] = useLocation()
@@ -48,25 +55,21 @@ export const Room = () => {
    return <ErrorScreen />
  }

-  if (!userConfig && !skipJoinScreen) {
+  if (!hasSubmittedEntry && !skipJoinScreen) {
    return (
-      <UserAware>
-        <Join onSubmit={setUserConfig} roomId={roomId} />
-      </UserAware>
+      <BaseRoom>
+        <Join enterRoom={() => setHasSubmittedEntry(true)} roomId={roomId} />
+      </BaseRoom>
    )
  }

  return (
-    <UserAware>
+    <BaseRoom>
      <Conference
        initialRoomData={initialRoomData}
        roomId={roomId}
        mode={mode}
-        userConfig={{
-          ...existingUserChoices,
-          ...userConfig,
-        }}
      />
-    </UserAware>
+    </BaseRoom>
  )
 }
@@ -1,22 +0,0 @@
-export const safeParseMetadata = (
-  metadataStr: string | null | undefined
-): Record<string, unknown> => {
-  if (!metadataStr) {
-    return {}
-  }
-
-  try {
-    const parsed = JSON.parse(metadataStr)
-
-    // Ensure the result is an object
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-      console.warn('Metadata parsed to non-object value:', parsed)
-      return {}
-    }
-
-    return parsed as Record<string, unknown>
-  } catch (error) {
-    console.error('Failed to parse metadata:', error)
-    return {}
-  }
-}
@@ -0,0 +1,23 @@
+import { CountryCode, parsePhoneNumberWithError } from 'libphonenumber-js'
+
+export const parseConfigPhoneNumber = (
+  rawPhoneNumber?: string,
+  defaultCountry?: string
+) => {
+  if (!rawPhoneNumber || !defaultCountry) {
+    return null
+  }
+  try {
+    return parsePhoneNumberWithError(
+      rawPhoneNumber,
+      defaultCountry as CountryCode
+    )
+  } catch (error) {
+    console.warn('Invalid phone number format:', rawPhoneNumber, error)
+    return null
+  }
+}
+
+export function formatPinCode(pinCode?: string) {
+  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')}#`
+}
@@ -10,6 +10,10 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
  const { t, i18n } = useTranslation('settings')
  const { user, isLoggedIn, logout } = useUser()
  const { languagesList, currentLanguage } = useLanguageLabels()
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
  return (
    <Dialog title={t('dialog.heading')} {...props}>
      <H lvl={2}>{t('account.heading')}</H>
@@ -18,7 +22,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
          <P>
            <Trans
              i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name ?? user?.email }}
+              values={{ user: userDisplay }}
              components={[<Badge />]}
            />
          </P>
@@ -9,13 +9,16 @@ import {
  RiNotification3Line,
  RiSettings3Line,
  RiSpeakerLine,
+  RiVideoOnLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
 import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { VideoTab } from './tabs/VideoTab'
 import { useRef } from 'react'
+import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
+import { SettingsDialogExtendedKey } from '@/features/settings/type'

 const tabsStyle = css({
  maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -44,19 +47,24 @@ const tabPanelContainerStyle = css({
 export type SettingsDialogExtended = Pick<
  DialogProps,
  'isOpen' | 'onOpenChange'
->
+> & {
+  defaultSelectedTab?: SettingsDialogExtendedKey
+}

 export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
  // display only icon on small screen
  const { t } = useTranslation('settings')

  const dialogEl = useRef<HTMLDivElement>(null)
-  const { width } = useSize(dialogEl)
-  const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel
+  const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel

  return (
    <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
-      <Tabs orientation="vertical" className={tabsStyle}>
+      <Tabs
+        orientation="vertical"
+        className={tabsStyle}
+        defaultSelectedKey={props.defaultSelectedTab}
+      >
        <div
          className={tabListContainerStyle}
          style={{
@@ -70,30 +78,39 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
              {t('dialog.heading')}
            </Heading>
          )}
-          <TabList border={false} aria-label="Chat log orientation example">
-            <Tab icon highlight id="1">
+          <TabList border={false}>
+            <Tab icon highlight id={SettingsDialogExtendedKey.ACCOUNT}>
              <RiAccountCircleLine />
-              {isWideScreen && t('tabs.account')}
+              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.ACCOUNT}`)}
            </Tab>
-            <Tab icon highlight id="2">
+            <Tab icon highlight id={SettingsDialogExtendedKey.AUDIO}>
              <RiSpeakerLine />
-              {isWideScreen && t('tabs.audio')}
+              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.AUDIO}`)}
            </Tab>
-            <Tab icon highlight id="3">
+            <Tab icon highlight id={SettingsDialogExtendedKey.VIDEO}>
+              <RiVideoOnLine />
+              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.VIDEO}`)}
+            </Tab>
+            <Tab icon highlight id={SettingsDialogExtendedKey.GENERAL}>
              <RiSettings3Line />
-              {isWideScreen && t('tabs.general')}
+              {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.GENERAL}`)}
            </Tab>
-            <Tab icon highlight id="4">
+            <Tab icon highlight id={SettingsDialogExtendedKey.NOTIFICATIONS}>
              <RiNotification3Line />
-              {isWideScreen && t('tabs.notifications')}
+              {isWideScreen &&
+                t(`tabs.${SettingsDialogExtendedKey.NOTIFICATIONS}`)}
            </Tab>
          </TabList>
        </div>
        <div className={tabPanelContainerStyle}>
-          <AccountTab id="1" onOpenChange={props.onOpenChange} />
-          <AudioTab id="2" />
-          <GeneralTab id="3" />
-          <NotificationsTab id="4" />
+          <AccountTab
+            id={SettingsDialogExtendedKey.ACCOUNT}
+            onOpenChange={props.onOpenChange}
+          />
+          <AudioTab id={SettingsDialogExtendedKey.AUDIO} />
+          <VideoTab id={SettingsDialogExtendedKey.VIDEO} />
+          <GeneralTab id={SettingsDialogExtendedKey.GENERAL} />
+          <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
        </div>
      </Tabs>
    </Dialog>
@@ -0,0 +1,20 @@
+import { SettingsDialogExtended } from './SettingsDialogExtended'
+import { useSnapshot } from 'valtio'
+import { settingsStore } from '@/stores/settings'
+
+export const SettingsDialogProvider = () => {
+  const { areSettingsOpen, defaultSelectedTab } = useSnapshot(settingsStore)
+
+  return (
+    <SettingsDialogExtended
+      isOpen={areSettingsOpen}
+      defaultSelectedTab={defaultSelectedTab}
+      onOpenChange={(v) => {
+        if (!v && settingsStore.defaultSelectedTab) {
+          settingsStore.defaultSelectedTab = undefined
+        }
+        settingsStore.areSettingsOpen = v
+      }}
+    />
+  )
+}
@@ -18,6 +18,10 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
  const room = useRoomContext()
  const { user, isLoggedIn, logout } = useUser()
  const [name, setName] = useState(room?.localParticipant.name ?? '')
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email

  const handleOnSubmit = () => {
    if (room) room.localParticipant.setName(name)
@@ -37,7 +41,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
        value={name}
        onChange={setName}
        validate={(value) => {
-          return !value ? <p>{'Votre Nom ne peut pas être vide'}</p> : null
+          return !value ? <p>{t('account.nameError')}</p> : null
        }}
      />
      <H lvl={2}>{t('account.authentication')}</H>
@@ -46,7 +50,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
          <P>
            <Trans
              i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name || user?.email }}
+              values={{ user: userDisplay }}
              components={[<Badge />]}
            />
          </P>
@@ -1,4 +1,4 @@
-import { DialogProps, Field, H, Switch } from '@/primitives'
+import { DialogProps, Field, Switch, Text } from '@/primitives'

 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -9,78 +9,11 @@ import {
 import { isSafari } from '@/utils/livekit'
 import { useTranslation } from 'react-i18next'
 import { SoundTester } from '@/components/SoundTester'
-import { HStack } from '@/styled-system/jsx'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
-import { ReactNode } from 'react'
-import { css } from '@/styled-system/css'
-import posthog from 'posthog-js'
 import { useNoiseReductionAvailable } from '@/features/rooms/livekit/hooks/useNoiseReductionAvailable'
-
-type RowWrapperProps = {
-  heading: string
-  children: ReactNode[]
-  beta?: boolean
-}
-
-const BetaBadge = () => (
-  <span
-    className={css({
-      content: '"Beta"',
-      display: 'block',
-      letterSpacing: '-0.02rem',
-      padding: '0 0.25rem',
-      backgroundColor: '#E8EDFF',
-      color: '#0063CB',
-      fontSize: '12px',
-      fontWeight: 500,
-      margin: '0 0 0.9375rem 0.3125rem',
-      lineHeight: '1rem',
-      borderRadius: '4px',
-      width: 'fit-content',
-      height: 'fit-content',
-      marginTop: { base: '10px', sm: '5px' },
-    })}
-  >
-    Beta
-  </span>
-)
-
-const RowWrapper = ({ heading, children, beta }: RowWrapperProps) => {
-  return (
-    <>
-      <HStack>
-        <H lvl={2}>{heading}</H>
-        {beta && <BetaBadge />}
-      </HStack>
-      <HStack
-        gap={0}
-        style={{
-          flexWrap: 'wrap',
-        }}
-      >
-        <div
-          style={{
-            flex: '1 1 215px',
-            minWidth: 0,
-          }}
-        >
-          {children[0]}
-        </div>
-        <div
-          style={{
-            width: '10rem',
-            justifyContent: 'center',
-            display: 'flex',
-            paddingLeft: '1.5rem',
-          }}
-        >
-          {children[1]}
-        </div>
-      </HStack>
-    </>
-  )
-}
+import posthog from 'posthog-js'
+import { RowWrapper } from './layout/RowWrapper'

 export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
  Pick<TabPanelProps, 'id'>
@@ -92,24 +25,19 @@ export const AudioTab = ({ id }: AudioTabProps) => {
  const { localParticipant } = useRoomContext()

  const {
-    userChoices: { noiseReductionEnabled },
+    userChoices: { noiseReductionEnabled, audioDeviceId, audioOutputDeviceId },
    saveAudioInputDeviceId,
    saveNoiseReductionEnabled,
+    saveAudioOutputDeviceId,
  } = usePersistentUserChoices()

  const isSpeaking = useIsSpeaking(localParticipant)

-  const {
-    devices: devicesOut,
-    activeDeviceId: activeDeviceIdOut,
-    setActiveMediaDevice: setActiveMediaDeviceOut,
-  } = useMediaDeviceSelect({ kind: 'audiooutput' })
+  const { devices: devicesOut, setActiveMediaDevice: setActiveMediaDeviceOut } =
+    useMediaDeviceSelect({ kind: 'audiooutput' })

-  const {
-    devices: devicesIn,
-    activeDeviceId: activeDeviceIdIn,
-    setActiveMediaDevice: setActiveMediaDeviceIn,
-  } = useMediaDeviceSelect({ kind: 'audioinput' })
+  const { devices: devicesIn, setActiveMediaDevice: setActiveMediaDeviceIn } =
+    useMediaDeviceSelect({ kind: 'audioinput' })

  const itemsOut: DeviceItems = devicesOut.map((d) => ({
    value: d.deviceId,
@@ -134,15 +62,6 @@ export const AudioTab = ({ id }: AudioTabProps) => {
        defaultSelectedKey: undefined,
      }

-  // No API to directly query the default audio device; this function heuristically finds it.
-  // Returns the item with value 'default' if present; otherwise, returns the first item in the list.
-  const getDefaultSelectedKey = (items: DeviceItems) => {
-    if (!items || items.length === 0) return
-    const defaultItem =
-      items.find((item) => item.value === 'default') || items[0]
-    return defaultItem.value
-  }
-
  const noiseReductionAvailable = useNoiseReductionAvailable()

  return (
@@ -152,11 +71,9 @@ export const AudioTab = ({ id }: AudioTabProps) => {
          type="select"
          label={t('audio.microphone.label')}
          items={itemsIn}
-          defaultSelectedKey={
-            activeDeviceIdIn || getDefaultSelectedKey(itemsIn)
-          }
-          onSelectionChange={(key) => {
-            setActiveMediaDeviceIn(key as string)
+          selectedKey={audioDeviceId}
+          onSelectionChange={async (key) => {
+            await setActiveMediaDeviceIn(key as string)
            saveAudioInputDeviceId(key as string)
          }}
          {...disabledProps}
@@ -174,18 +91,17 @@ export const AudioTab = ({ id }: AudioTabProps) => {
      </RowWrapper>
      {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
        To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
-      {!isSafari() && (
+      {!isSafari() ? (
        <RowWrapper heading={t('audio.speakers.heading')}>
          <Field
            type="select"
            label={t('audio.speakers.label')}
            items={itemsOut}
-            defaultSelectedKey={
-              activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
-            }
-            onSelectionChange={async (key) =>
-              setActiveMediaDeviceOut(key as string)
-            }
+            selectedKey={audioOutputDeviceId}
+            onSelectionChange={async (key) => {
+              await setActiveMediaDeviceOut(key as string)
+              saveAudioOutputDeviceId(key as string)
+            }}
            {...disabledProps}
            style={{
              minWidth: 0,
@@ -193,6 +109,13 @@ export const AudioTab = ({ id }: AudioTabProps) => {
          />
          <SoundTester />
        </RowWrapper>
+      ) : (
+        <RowWrapper heading={t('audio.speakers.heading')}>
+          <Text variant="warning" margin="md">
+            {t('audio.speakers.safariWarning')}
+          </Text>
+          <div />
+        </RowWrapper>
      )}
      {noiseReductionAvailable && (
        <RowWrapper heading={t('audio.noiseReduction.heading')} beta>
@@ -0,0 +1,238 @@
+import { DialogProps, Field } from '@/primitives'
+
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { useMediaDeviceSelect, useRoomContext } from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
+import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
+import { useCallback, useEffect, useState } from 'react'
+import { css } from '@/styled-system/css'
+import {
+  createLocalVideoTrack,
+  LocalVideoTrack,
+  Track,
+  VideoPresets,
+  VideoQuality,
+} from 'livekit-client'
+import { BackgroundProcessorFactory } from '@/features/rooms/livekit/components/blur'
+import { VideoResolution } from '@/stores/userChoices'
+import { RowWrapper } from './layout/RowWrapper'
+
+export type VideoTabProps = Pick<DialogProps, 'onOpenChange'> &
+  Pick<TabPanelProps, 'id'>
+
+type DeviceItems = Array<{ value: string; label: string }>
+
+export const VideoTab = ({ id }: VideoTabProps) => {
+  const { t } = useTranslation('settings', { keyPrefix: 'video' })
+  const { localParticipant, remoteParticipants } = useRoomContext()
+
+  const {
+    userChoices: {
+      videoDeviceId,
+      processorSerialized,
+      videoPublishResolution,
+      videoSubscribeQuality,
+    },
+    saveVideoInputDeviceId,
+    saveVideoPublishResolution,
+    saveVideoSubscribeQuality,
+  } = usePersistentUserChoices()
+  const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
+    null
+  )
+
+  const videoCallbackRef = useCallback((element: HTMLVideoElement | null) => {
+    setVideoElement(element)
+  }, [])
+
+  const { devices: devicesIn, setActiveMediaDevice: setActiveMediaDeviceIn } =
+    useMediaDeviceSelect({ kind: 'videoinput' })
+
+  const itemsIn: DeviceItems = devicesIn.map((d) => ({
+    value: d.deviceId,
+    label: d.label,
+  }))
+
+  // The Permissions API is not fully supported in Firefox and Safari, and attempting to use it for camera permissions
+  // may raise an error. As a workaround, we infer camera permission status by checking if the list of camera input
+  // devices (devicesIn) is non-empty. If the list has one or more devices, we assume the user has granted camera access.
+  const isCamEnabled = devicesIn?.length > 0
+
+  const disabledProps = isCamEnabled
+    ? {}
+    : {
+        placeholder: t('permissionsRequired'),
+        isDisabled: true,
+      }
+
+  const handleVideoResolutionChange = async (key: 'h720' | 'h360' | 'h180') => {
+    const videoPublication = localParticipant.getTrackPublication(
+      Track.Source.Camera
+    )
+    const videoTrack = videoPublication?.track
+    if (videoTrack) {
+      saveVideoPublishResolution(key)
+      await videoTrack.restartTrack({
+        resolution: VideoPresets[key].resolution,
+        deviceId: { exact: videoDeviceId },
+        processor:
+          BackgroundProcessorFactory.deserializeProcessor(processorSerialized),
+      })
+    }
+  }
+
+  /**
+   * Updates video quality for all existing remote video tracks when user preference changes.
+   * LiveKit doesn't support setting video quality preferences at the room level for remote participants,
+   * so this function applies the selected quality to all existing remote video tracks.
+   * Hook useVideoResolutionSubscription updates quality preferences of new participants joining.
+   */
+  const updateExistingRemoteVideoQuality = (selectedQuality: VideoQuality) => {
+    remoteParticipants.forEach((participant) => {
+      participant.videoTrackPublications.forEach((publication) => {
+        if (publication.videoQuality !== selectedQuality) {
+          publication.setVideoQuality(selectedQuality)
+        }
+      })
+    })
+  }
+
+  useEffect(() => {
+    let videoTrack: LocalVideoTrack | null = null
+
+    const setUpVideoTrack = async () => {
+      if (videoElement) {
+        videoTrack = await createLocalVideoTrack({ deviceId: videoDeviceId })
+        videoTrack.attach(videoElement)
+      }
+    }
+
+    setUpVideoTrack()
+
+    return () => {
+      if (videoElement && videoTrack) {
+        videoTrack.detach()
+        videoTrack.stop()
+      }
+    }
+  }, [videoDeviceId, videoElement])
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <RowWrapper heading={t('camera.heading')}>
+        <Field
+          type="select"
+          label={t('camera.label')}
+          items={itemsIn}
+          selectedKey={videoDeviceId}
+          onSelectionChange={async (key) => {
+            await setActiveMediaDeviceIn(key as string)
+            saveVideoInputDeviceId(key as string)
+          }}
+          {...disabledProps}
+          style={{
+            width: '100%',
+          }}
+        />
+        <div
+          role="status"
+          aria-label={t(
+            `camera.previewAriaLabel.${localParticipant.isCameraEnabled ? 'enabled' : 'disabled'}`
+          )}
+        >
+          {localParticipant.isCameraEnabled ? (
+            <>
+              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+              <video
+                ref={videoCallbackRef}
+                width="160px"
+                height="56px"
+                style={{
+                  display: !localParticipant.isCameraEnabled
+                    ? 'none'
+                    : undefined,
+                }}
+                className={css({
+                  transform: 'rotateY(180deg)',
+                  height: '69px',
+                  width: '160px',
+                })}
+                disablePictureInPicture
+                disableRemotePlayback
+              />
+            </>
+          ) : (
+            <span
+              className={css({
+                display: 'flex',
+                justifyContent: 'center',
+                textAlign: 'center',
+              })}
+            >
+              {t('camera.disabled')}
+            </span>
+          )}
+        </div>
+      </RowWrapper>
+      <RowWrapper heading={t('resolution.heading')}>
+        <Field
+          type="select"
+          label={t('resolution.publish.label')}
+          items={[
+            {
+              value: 'h720',
+              label: `${t('resolution.publish.items.high')} (720p)`,
+            },
+            {
+              value: 'h360',
+              label: `${t('resolution.publish.items.medium')} (360p)`,
+            },
+            {
+              value: 'h180',
+              label: `${t('resolution.publish.items.low')} (180p)`,
+            },
+          ]}
+          selectedKey={videoPublishResolution}
+          onSelectionChange={async (key) => {
+            await handleVideoResolutionChange(key as VideoResolution)
+          }}
+          style={{
+            width: '100%',
+          }}
+        />
+        <></>
+      </RowWrapper>
+      <RowWrapper>
+        <Field
+          type="select"
+          label={t('resolution.subscribe.label')}
+          items={[
+            {
+              value: VideoQuality.HIGH.toString(),
+              label: t('resolution.subscribe.items.high'),
+            },
+            {
+              value: VideoQuality.MEDIUM.toString(),
+              label: t('resolution.subscribe.items.medium'),
+            },
+            {
+              value: VideoQuality.LOW.toString(),
+              label: t('resolution.subscribe.items.low'),
+            },
+          ]}
+          selectedKey={videoSubscribeQuality?.toString()}
+          onSelectionChange={(key) => {
+            if (key == undefined) return
+            const selectedQuality = Number(String(key))
+            saveVideoSubscribeQuality(selectedQuality)
+            updateExistingRemoteVideoQuality(selectedQuality)
+          }}
+          style={{
+            width: '100%',
+          }}
+        />
+        <></>
+      </RowWrapper>
+    </TabPanel>
+  )
+}
--- a/Show More
+++ b/Show More