✨(join) add audio output selection

new button to select audio output and pass it to the conference.

this is in its own commit because we might not want to add this directly
in the code: we can choose output in the join screen but not in the
conference screen for now. this might be a bit misleading and better to
not have it entirely for now?

bin/_config.sh

@@ -5,6 +5,7 @@ set -eo pipefail
 REPO_DIR="$(cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd)"
 UNSET_USER=0
 
+TERRAFORM_DIRECTORY="./env.d/terraform"
 COMPOSE_FILE="${REPO_DIR}/docker-compose.yml"
 COMPOSE_PROJECT="meet"
 
@@ -91,3 +92,66 @@ function _dc_exec() {
 function _django_manage() {
     _dc_run "app-dev" python manage.py "$@"
 }
+
+# _set_openstack_project: select an OpenStack project from the openrc files defined in the
+# terraform directory.
+#
+# usage: _set_openstack_project
+#
+# If necessary the script will prompt the user to choose a project from those available
+function _set_openstack_project() {
+
+    declare prompt
+    declare -a projects
+    declare -i default=1
+    declare -i choice=0
+    declare -i n_projects
+
+    # List projects by looking in the "./env.d/terraform" directory
+    # and store them in an array
+    read -r -a projects <<< "$(
+        find "${TERRAFORM_DIRECTORY}" -maxdepth 1 -mindepth 1 -type d |
+        sed 's|'"${TERRAFORM_DIRECTORY}\/"'||' |
+        xargs
+    )"
+    nb_projects=${#projects[@]}
+
+    if [[ ${nb_projects} -le 0 ]]; then
+        echo "There are no OpenStack projects defined..." >&2
+        echo "To add one, create a subdirectory in \"${TERRAFORM_DIRECTORY}\" with the name" \
+            "of your project and copy your \"openrc.sh\" file into it." >&2
+        exit 10
+    fi
+
+    if [[ ${nb_projects} -gt 1 ]]; then
+        prompt="Select an OpenStack project to target:\\n"
+        for (( i=0; i<nb_projects; i++ )); do
+            prompt+="[$((i+1))] ${projects[$i]}"
+            if [[ $((i+1)) -eq ${default} ]]; then
+                prompt+=" (default)"
+            fi
+            prompt+="\\n"
+        done
+        prompt+="If your OpenStack project is not listed, add it to the \"env.d/terraform\" directory.\\n"
+        prompt+="Your choice: "
+        read -r -p "$(echo -e "${prompt}")" choice
+
+        if [[ ${choice} -gt nb_projects ]]; then
+            (>&2 echo "Invalid choice ${choice} (should be <= ${nb_projects})")
+            exit 11
+        fi
+
+        if [[ ${choice} -le 0 ]]; then
+            choice=${default}
+        fi
+    fi
+
+    project=${projects[$((choice-1))]}
+    # Check that the openrc.sh file exists for this project
+    if [ ! -f "${TERRAFORM_DIRECTORY}/${project}/openrc.sh" ]; then
+        (>&2 echo "Missing \"openrc.sh\" file in \"${TERRAFORM_DIRECTORY}/${project}\". Check documentation.")
+        exit 12
+    fi
+
+    echo "${project}"
+}

bin/state

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+set -eo pipefail
+
+source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
+
+project=$(_set_openstack_project)
+echo "Using \"${project}\" project..."
+
+source "${TERRAFORM_DIRECTORY}/${project}/openrc.sh"
+
+# Run Terraform commands in the Hashicorp docker container via docker compose
+# shellcheck disable=SC2068
+DOCKER_USER="$(id -u):$(id -g)" \
+    PROJECT="${project}" \
+    docker compose run --rm \
+    -e OS_AUTH_URL \
+    -e OS_IDENTITY_API_VERSION \
+    -e OS_USER_DOMAIN_NAME \
+    -e OS_PROJECT_DOMAIN_NAME \
+    -e OS_TENANT_ID \
+    -e OS_TENANT_NAME \
+    -e OS_USERNAME \
+    -e OS_PASSWORD \
+    -e OS_REGION_NAME \
+    terraform-state "$@"

bin/terraform

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+set -eo pipefail
+
+source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
+
+project=$(_set_openstack_project)
+echo "Using \"${project}\" project..."
+
+source "${TERRAFORM_DIRECTORY}/${project}/openrc.sh"
+
+# Run Terraform commands in the Hashicorp docker container via docker compose
+# shellcheck disable=SC2068
+DOCKER_USER="$(id -u):$(id -g)" \
+    PROJECT="${project}" \
+    docker compose run --rm \
+    -e OS_AUTH_URL \
+    -e OS_IDENTITY_API_VERSION \
+    -e OS_USER_DOMAIN_NAME \
+    -e OS_PROJECT_DOMAIN_NAME \
+    -e OS_TENANT_ID \
+    -e OS_TENANT_NAME \
+    -e OS_USERNAME \
+    -e OS_PASSWORD \
+    -e OS_REGION_NAME \
+    -e TF_VAR_user_name \
+    terraform "$@"

scripts/updatekeys.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+find . -name "*.enc.*" -exec sops updatekeys -y {} \;

src/backend/core/api/serializers.py

@@ -123,7 +123,7 @@ class RoomSerializer(serializers.ModelSerializer):
         if role is not None or instance.is_public:
             slug = f"{instance.id!s}".replace("-", "")
 
-            username = request.query_params.get("username", None)
+            username = request.GET.get("username", None)
 
             output["livekit"] = {
                 "url": settings.LIVEKIT_CONFIGURATION["url"],

src/backend/core/migrations/0003_alter_room_configuration.py

@@ -1,18 +0,0 @@
-# Generated by Django 5.0.7 on 2024-08-07 14:38
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0002_create_pg_trgm_extension'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='room',
-            name='configuration',
-            field=models.JSONField(blank=True, default=dict, help_text='Values for Visio parameters to configure the room.', verbose_name='Visio room configuration'),
-        )
-    ]

src/backend/core/migrations/0004_alter_user_language.py

@@ -1,18 +0,0 @@
-# Generated by Django 5.0.7 on 2024-08-07 14:39
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0003_alter_room_configuration'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='user',
-            name='language',
-            field=models.CharField(choices="(('en-us', 'English'), ('fr-fr', 'French'))", default='en-us', help_text='The language in which the user wants to see the interface.', max_length=10, verbose_name='language'),
-        ),
-    ]

src/backend/core/models.py

@@ -296,7 +296,7 @@ class Room(Resource):
 
     configuration = models.JSONField(
         blank=True,
-        default=dict,
+        default={},
         verbose_name=_("Visio room configuration"),
         help_text=_("Values for Visio parameters to configure the room."),
     )

src/backend/core/utils.py

@@ -2,11 +2,6 @@
 Utils functions used in the core app
 """
 
-# ruff: noqa:S311
-
-import hashlib
-import json
-import random
 from typing import Optional
 from uuid import uuid4
 
@@ -15,30 +10,8 @@ from django.conf import settings
 from livekit.api import AccessToken, VideoGrants
 
 
-def generate_color(identity: str) -> str:
-    """Generates a consistent HSL color based on a given identity string.
-
-    The function seeds the random generator with the identity's hash,
-    ensuring consistent color output. The HSL format allows fine-tuned control
-    over saturation and lightness, empirically adjusted to produce visually
-    appealing and distinct colors. HSL is preferred over hex to constrain the color
-    range and ensure predictability.
-    """
-
-    # ruff: noqa:S324
-    identity_hash = hashlib.sha1(identity.encode("utf-8"))
-    # Keep only hash's last 16 bits, collisions are not a concern
-    seed = int(identity_hash.hexdigest(), 16) & 0xFFFF
-    random.seed(seed)
-    hue = random.randint(0, 360)
-    saturation = random.randint(50, 75)
-    lightness = random.randint(25, 60)
-
-    return f"hsl({hue}, {saturation}%, {lightness}%)"
-
-
 def generate_token(room: str, user, username: Optional[str] = None) -> str:
-    """Generate a LiveKit access token for a user in a specific room.
+    """Generate a Livekit access token for a user in a specific room.
 
     Args:
         room (str): The name of the room.
@@ -49,12 +22,10 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
     Returns:
         str: The LiveKit JWT access token.
     """
+
     video_grants = VideoGrants(
         room=room,
         room_join=True,
-        room_admin=True,
-        room_record=True,
-        can_update_own_metadata=True,
         can_publish_sources=[
             "camera",
             "microphone",
@@ -63,22 +34,18 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
         ],
     )
 
+    token = AccessToken(
+        api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
+        api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
+    ).with_grants(video_grants)
+
     if user.is_anonymous:
-        identity = str(uuid4())
+        token.with_identity(str(uuid4()))
         default_username = "Anonymous"
     else:
-        identity = str(user.sub)
+        token.with_identity(user.sub)
         default_username = str(user)
 
-    token = (
-        AccessToken(
-            api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
-            api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
-        )
-        .with_grants(video_grants)
-        .with_identity(identity)
-        .with_name(username or default_username)
-        .with_metadata(json.dumps({"color": generate_color(identity)}))
-    )
+    token.with_name(username or default_username)
 
     return token.to_jwt()

src/backend/meet/settings.py

@@ -12,7 +12,6 @@ https://docs.djangoproject.com/en/3.1/ref/settings/
 
 import json
 import os
-from socket import gethostbyname, gethostname
 
 from django.utils.translation import gettext_lazy as _
 
@@ -72,7 +71,6 @@ class Base(Configuration):
     # Security
     ALLOWED_HOSTS = values.ListValue([])
     SECRET_KEY = values.Value(None)
-    SILENCED_SYSTEM_CHECKS = values.ListValue([])
 
     # Application definition
     ROOT_URLCONF = "meet.urls"
@@ -275,7 +273,6 @@ class Base(Configuration):
     # Easy thumbnails
     THUMBNAIL_EXTENSION = "webp"
     THUMBNAIL_TRANSPARENCY_EXTENSION = "webp"
-    THUMBNAIL_DEFAULT_STORAGE_ALIAS = "default"
     THUMBNAIL_ALIASES = {}
 
     # Celery
@@ -516,11 +513,7 @@ class Production(Base):
     """
 
     # Security
-    ALLOWED_HOSTS = [
-        *values.ListValue([], environ_name="ALLOWED_HOSTS"),
-        gethostbyname(gethostname()),
-    ]
-
+    ALLOWED_HOSTS = values.ListValue(None)
     CSRF_TRUSTED_ORIGINS = values.ListValue([])
     SECURE_BROWSER_XSS_FILTER = True
     SECURE_CONTENT_TYPE_NOSNIFF = True

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.5"
+version = "0.1.3"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.10",
+    "boto3==1.34.154",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -36,28 +36,28 @@ dependencies = [
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1",
+    "django==5.0.7",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
     "easy_thumbnails==2.9",
-    "factory_boy==3.3.1",
+    "factory_boy==3.3.0",
     "freezegun==1.5.1",
-    "gunicorn==23.0.0",
+    "gunicorn==22.0.0",
     "jsonschema==4.23.0",
     "june-analytics-python==2.3.0",
-    "markdown==3.7",
+    "markdown==3.6",
     "nested-multipart-parser==1.5.0",
     "psycopg[binary]==3.2.1",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.13.0",
+    "sentry-sdk==2.12.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
     "mozilla-django-oidc==4.0.1",
-    "livekit-api==0.7.0",
+    "livekit-api==0.6.0",
 ]
 
 [project.urls]
@@ -71,17 +71,17 @@ dev = [
     "django-extensions==3.2.3",
     "drf-spectacular-sidecar==2024.7.1",
     "ipdb==0.13.13",
-    "ipython==8.27.0",
+    "ipython==8.26.0",
     "pyfakefs==5.6.0",
     "pylint-django==2.5.5",
-    "pylint==3.2.7",
+    "pylint==3.2.6",
     "pytest-cov==5.0.0",
     "pytest-django==4.8.0",
     "pytest==8.3.2",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.3",
+    "ruff==0.5.6",
     "types-requests==2.32.0.20240712",
 ]
 

src/frontend/package-lock.json

@@ -1,17 +1,16 @@
 {
   "name": "meet",
-  "version": "0.1.5",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.5",
+      "version": "0.1.3",
       "dependencies": {
         "@livekit/components-react": "2.3.3",
         "@livekit/components-styles": "1.0.12",
         "@pandacss/preset-panda": "0.41.0",
-        "@react-aria/toast": "3.0.0-beta.15",
         "@remixicon/react": "4.2.0",
         "@tanstack/react-query": "5.49.2",
         "hoofd": "1.7.1",
@@ -24,7 +23,6 @@
         "react-aria-components": "1.2.1",
         "react-dom": "18.2.0",
         "react-i18next": "14.1.3",
-        "use-sound": "^4.0.3",
         "valtio": "1.13.2",
         "wouter": "3.3.0"
       },
@@ -39,7 +37,7 @@
         "@typescript-eslint/parser": "7.13.1",
         "@vitejs/plugin-react": "4.3.1",
         "eslint": "8.57.0",
-        "eslint-config-prettier": "9.1.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-jsx-a11y": "6.9.0",
         "eslint-plugin-react-hooks": "4.6.2",
         "eslint-plugin-react-refresh": "0.4.7",
@@ -456,6 +454,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1109,9 +1108,9 @@
       "dev": true
     },
     "node_modules/@internationalized/date": {
-      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
-      "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz",
+      "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==",
       "dependencies": {
         "@swc/helpers": "^0.5.0"
       }
@@ -1973,35 +1972,35 @@
       }
     },
     "node_modules/@react-aria/i18n": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.12.2.tgz",
-      "integrity": "sha512-PvEyC6JWylTpe8dQEWqQwV6GiA+pbTxHQd//BxtMSapRW3JT9obObAnb/nFhj3HthkUvqHyj0oO1bfeN+mtD8A==",
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.11.1.tgz",
+      "integrity": "sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ==",
       "dependencies": {
-        "@internationalized/date": "^3.5.5",
+        "@internationalized/date": "^3.5.4",
         "@internationalized/message": "^3.1.4",
         "@internationalized/number": "^3.5.3",
         "@internationalized/string": "^3.2.3",
-        "@react-aria/ssr": "^3.9.5",
-        "@react-aria/utils": "^3.25.2",
-        "@react-types/shared": "^3.24.1",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
         "@swc/helpers": "^0.5.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-aria/interactions": {
-      "version": "3.22.2",
-      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.2.tgz",
-      "integrity": "sha512-xE/77fRVSlqHp2sfkrMeNLrqf2amF/RyuAS6T5oDJemRSgYM3UoxTbWjucPhfnoW7r32pFPHHgz4lbdX8xqD/g==",
+      "version": "3.21.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.3.tgz",
+      "integrity": "sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==",
       "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-aria/utils": "^3.25.2",
-        "@react-types/shared": "^3.24.1",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
         "@swc/helpers": "^0.5.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-aria/label": {
@@ -2017,20 +2016,6 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@react-aria/landmark": {
-      "version": "3.0.0-beta.15",
-      "resolved": "https://registry.npmjs.org/@react-aria/landmark/-/landmark-3.0.0-beta.15.tgz",
-      "integrity": "sha512-EEABy0IFzqoS7r11HoD2YwiGR5LFw4kWDFTFUFwJkRP5tHEzsrEgkKPSPJXScQr5m7tenV6j0/Zzl1+w1ki3lA==",
-      "dependencies": {
-        "@react-aria/utils": "^3.25.2",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@react-aria/link": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@react-aria/link/-/link-3.7.1.tgz",
@@ -2304,9 +2289,9 @@
       }
     },
     "node_modules/@react-aria/ssr": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
-      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",
+      "integrity": "sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==",
       "dependencies": {
         "@swc/helpers": "^0.5.0"
       },
@@ -2314,7 +2299,7 @@
         "node": ">= 12"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-aria/switch": {
@@ -2417,24 +2402,6 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@react-aria/toast": {
-      "version": "3.0.0-beta.15",
-      "resolved": "https://registry.npmjs.org/@react-aria/toast/-/toast-3.0.0-beta.15.tgz",
-      "integrity": "sha512-bg6ZXq4B5JYVt3GXVlf075tQOakcfumbDLnUMaijez4BhacuxF01+IvBPzAVEsARVNXfELoXa7Frb2K54Wgvtw==",
-      "dependencies": {
-        "@react-aria/i18n": "^3.12.2",
-        "@react-aria/interactions": "^3.22.2",
-        "@react-aria/landmark": "3.0.0-beta.15",
-        "@react-aria/utils": "^3.25.2",
-        "@react-stately/toast": "3.0.0-beta.5",
-        "@react-types/button": "^3.9.6",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@react-aria/toggle": {
       "version": "3.10.4",
       "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.10.4.tgz",
@@ -2503,18 +2470,18 @@
       }
     },
     "node_modules/@react-aria/utils": {
-      "version": "3.25.2",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.2.tgz",
-      "integrity": "sha512-GdIvG8GBJJZygB4L2QJP1Gabyn2mjFsha73I2wSe+o4DYeGWoJiMZRM06PyTIxLH4S7Sn7eVDtsSBfkc2VY/NA==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.24.1.tgz",
+      "integrity": "sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==",
       "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-stately/utils": "^3.10.3",
-        "@react-types/shared": "^3.24.1",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
         "@swc/helpers": "^0.5.0",
         "clsx": "^2.0.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-aria/visually-hidden": {
@@ -2860,18 +2827,6 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@react-stately/toast": {
-      "version": "3.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@react-stately/toast/-/toast-3.0.0-beta.5.tgz",
-      "integrity": "sha512-MEdQwcKsexlcJ4YQZ9cN5QSIqTlGGdgC5auzSKXXoq15DHuo4mtHfLzXPgcMDYOhOdmyphMto8Vt+21UL2FOrw==",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@react-stately/toggle": {
       "version": "3.7.4",
       "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.4.tgz",
@@ -2914,14 +2869,14 @@
       }
     },
     "node_modules/@react-stately/utils": {
-      "version": "3.10.3",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.3.tgz",
-      "integrity": "sha512-moClv7MlVSHpbYtQIkm0Cx+on8Pgt1XqtPx6fy9rQFb2DNc9u1G3AUVnqA17buOkH1vLxAtX4MedlxMWyRCYYA==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.1.tgz",
+      "integrity": "sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==",
       "dependencies": {
         "@swc/helpers": "^0.5.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-stately/virtualizer": {
@@ -2950,14 +2905,14 @@
       }
     },
     "node_modules/@react-types/button": {
-      "version": "3.9.6",
-      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.6.tgz",
-      "integrity": "sha512-8lA+D5JLbNyQikf8M/cPP2cji91aVTcqjrGpDqI7sQnaLFikM8eFR6l1ZWGtZS5MCcbfooko77ha35SYplSQvw==",
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.4.tgz",
+      "integrity": "sha512-raeQBJUxBp0axNF74TXB8/H50GY8Q3eV6cEKMbZFP1+Dzr09Ngv0tJBeW0ewAxAguNH5DRoMUAUGIXtSXskVdA==",
       "dependencies": {
-        "@react-types/shared": "^3.24.1"
+        "@react-types/shared": "^3.23.1"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-types/calendar": {
@@ -3167,11 +3122,11 @@
       }
     },
     "node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "version": "3.23.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.23.1.tgz",
+      "integrity": "sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@react-types/slider": {
@@ -6696,11 +6651,6 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "dev": true
     },
-    "node_modules/howler": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
-      "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w=="
-    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -10168,17 +10118,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-sound": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.3.tgz",
-      "integrity": "sha512-L205pEUFIrLsGYsCUKHQVCt0ajs//YQOFbEQeNwaWaqQj3y3st4SuR+rvpMHLmv8hgTcfUFlvMQawZNI3OE18w==",
-      "dependencies": {
-        "howler": "^2.1.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -16,7 +16,6 @@
     "@livekit/components-react": "2.3.3",
     "@livekit/components-styles": "1.0.12",
     "@pandacss/preset-panda": "0.41.0",
-    "@react-aria/toast": "3.0.0-beta.15",
     "@remixicon/react": "4.2.0",
     "@tanstack/react-query": "5.49.2",
     "hoofd": "1.7.1",
@@ -29,7 +28,6 @@
     "react-aria-components": "1.2.1",
     "react-dom": "18.2.0",
     "react-i18next": "14.1.3",
-    "use-sound": "4.0.3",
     "valtio": "1.13.2",
     "wouter": "3.3.0"
   },

src/frontend/panda.config.ts

@@ -58,34 +58,6 @@ const config: Config = {
         },
       },
       fade: { from: { opacity: 0 }, to: { opacity: 1 } },
-      pulse: {
-        '0%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0.7)' },
-        '75%': { boxShadow: '0 0 0 30px rgba(255, 255, 255, 0)' },
-        '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
-      },
-      active_speaker: {
-        '0%': { height: '4px' },
-        '25%': { height: '8px' },
-        '50%': { height: '6px' },
-        '100%': { height: '16px' },
-      },
-      active_speake_small: {
-        '0%': { height: '4px' },
-        '25%': { height: '6px' },
-        '50%': { height: '4px' },
-        '100%': { height: '8px' },
-      },
-      wave_hand: {
-        '0%': { transform: 'rotate(0deg)' },
-        '20%': { transform: 'rotate(-20deg)' },
-        '80%': { transform: 'rotate(20deg)' },
-        '100%': { transform: 'rotate(0)' },
-      },
-      pulse_mic: {
-        '0%': { color: 'primary', opacity: '1' },
-        '50%': { color: 'primary', opacity: '0.8' },
-        '100%': { color: 'primary', opacity: '1' },
-      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/components/Avatar.tsx

@@ -1,53 +0,0 @@
-import { cva, RecipeVariantProps } from '@/styled-system/css'
-import React from 'react'
-
-const avatar = cva({
-  base: {
-    backgroundColor: 'transparent',
-    color: 'white',
-    display: 'flex',
-    borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    userSelect: 'none',
-    cursor: 'default',
-    flexGrow: 0,
-    flexShrink: 0,
-  },
-  variants: {
-    context: {
-      list: {
-        width: '32px',
-        height: '32px',
-        fontSize: '1.25rem',
-      },
-      placeholder: {
-        width: '100%',
-        height: '100%',
-      },
-    },
-  },
-  defaultVariants: {
-    context: 'list',
-  },
-})
-
-export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
-  name?: string
-  bgColor?: string
-} & RecipeVariantProps<typeof avatar>
-
-export const Avatar = ({ name, bgColor, context, ...props }: AvatarProps) => {
-  const initial = name?.trim()?.charAt(0) || ''
-  return (
-    <div
-      style={{
-        backgroundColor: bgColor,
-      }}
-      className={avatar({ context })}
-      {...props}
-    >
-      {initial}
-    </div>
-  )
-}

src/frontend/src/components/SoundTester.tsx

@@ -1,52 +0,0 @@
-import { Button } from '@/primitives'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-
-export const SoundTester = () => {
-  const { t } = useTranslation('settings')
-  const [isPlaying, setIsPlaying] = useState(false)
-  const audioRef = useRef<HTMLAudioElement>(null)
-
-  const { activeDeviceId } = useMediaDeviceSelect({ kind: 'audiooutput' })
-
-  useEffect(() => {
-    const updateActiveId = async (deviceId: string) => {
-      try {
-        await audioRef?.current?.setSinkId(deviceId)
-      } catch (error) {
-        console.error(`Error setting sinkId: ${error}`)
-      }
-    }
-    updateActiveId(activeDeviceId)
-  }, [activeDeviceId])
-
-  // prevent pausing the sound
-  navigator.mediaSession.setActionHandler('pause', function () {})
-
-  return (
-    <>
-      <Button
-        invisible
-        onPress={() => {
-          audioRef?.current?.play()
-          setIsPlaying(true)
-        }}
-        size="sm"
-        isDisabled={isPlaying}
-        fullWidth
-        style={{
-          color: isPlaying ? 'var(--colors-primary)' : undefined,
-        }}
-      >
-        {isPlaying ? t('audio.speakers.ongoingTest') : t('audio.speakers.test')}
-      </Button>
-      {/* eslint-disable jsx-a11y/media-has-caption */}
-      <audio
-        ref={audioRef}
-        src="sounds/uprise.mp3"
-        onEnded={() => setIsPlaying(false)}
-      />
-    </>
-  )
-}

src/frontend/src/features/devices/index.ts

@@ -0,0 +1,2 @@
+export { useAudioOutputs } from './utils/useAudioOutputs'
+export { usePersistedMediaDeviceSelect } from './utils/usePersistedMediaDeviceSelect'

src/frontend/src/features/devices/utils/useAudioOutputs.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+
+const getOutputDevices = () => {
+  return navigator.mediaDevices
+    .getUserMedia({ audio: true, video: false })
+    .then(() => navigator.mediaDevices.enumerateDevices())
+    .then((devices) => devices.filter(({ kind }) => kind === 'audiooutput'))
+}
+
+/**
+ * custom hook to fetch audio outputs
+ *
+ * this is used instead of livekit's useMediaDevices because the livekit integrated one seems to request
+ * outputs in a weird order, resulting in empty results in firefox if we didn't ask for input before
+ */
+export const useAudioOutputs = () => {
+  const [audioOutputs, setAudioOutputs] = useState<MediaDeviceInfo[]>([])
+  useEffect(() => {
+    const retrieveOutputDevices = () => {
+      getOutputDevices()
+        .then(setAudioOutputs)
+        .catch((error) => {
+          console.error('Audio outputs retrieval error :', error)
+        })
+    }
+    retrieveOutputDevices()
+    const onDeviceChange = () => {
+      retrieveOutputDevices()
+    }
+    navigator?.mediaDevices?.addEventListener('devicechange', onDeviceChange)
+    return () => {
+      navigator.mediaDevices.removeEventListener('devicechange', onDeviceChange)
+    }
+  }, [])
+  return audioOutputs
+}

src/frontend/src/features/devices/utils/usePersistedMediaDeviceSelect.ts

@@ -0,0 +1,27 @@
+import { useMediaDeviceSelect } from '@livekit/components-react'
+import { settingsStore } from '@/features/settings'
+
+/**
+ * wrap livekit's useMediaDeviceSelect to automatically save in our devices state user selection
+ *
+ * note: audiooutput devices are not handled here as we dont use useMediaDeviceSelect for them
+ */
+export const usePersistedMediaDeviceSelect = (
+  ...args: Parameters<typeof useMediaDeviceSelect>
+): ReturnType<typeof useMediaDeviceSelect> => {
+  const results = useMediaDeviceSelect(...args)
+  const originalSetter = results.setActiveMediaDevice
+  results.setActiveMediaDevice = (
+    ...activeMediaDeviceArgs: Parameters<typeof results.setActiveMediaDevice>
+  ) => {
+    const id = activeMediaDeviceArgs[0]
+    if (args[0].kind === 'audioinput') {
+      settingsStore.devices.micDeviceId = id
+    }
+    if (args[0].kind === 'videoinput') {
+      settingsStore.devices.cameraDeviceId = id
+    }
+    return originalSetter(...activeMediaDeviceArgs)
+  }
+  return results
+}

src/frontend/src/features/home/components/LaterMeetingDialog.tsx

@@ -1,93 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
-import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
-
-// fixme - duplication with the InviteDialog
-export const LaterMeetingDialog = ({
-  roomId,
-  ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('home')
-  const roomUrl = getRouteUrl('room', roomId)
-
-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
-
-  const [isHovered, setIsHovered] = useState(false)
-
-  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}
-      >
-        {isCopied ? (
-          <>
-            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-            {t('laterMeetingDialog.copied')}
-          </>
-        ) : (
-          <>
-            <RiFileCopyLine
-              size={18}
-              style={{ marginRight: '8px', minWidth: '18px' }}
-            />
-            {isHovered ? (
-              t('laterMeetingDialog.copy')
-            ) : (
-              <div
-                style={{
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  userSelect: 'none',
-                  textWrap: 'nowrap',
-                }}
-              >
-                {roomUrl.replace(/^https?:\/\//, '')}
-              </div>
-            )}
-          </>
-        )}
-      </Button>
-      <HStack>
-        <div
-          style={{
-            backgroundColor: '#d9e5ff',
-            borderRadius: '50%',
-            padding: '4px',
-            marginTop: '1rem',
-          }}
-        >
-          <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
-        </div>
-        <Text variant="sm" style={{ marginTop: '1rem' }}>
-          {t('laterMeetingDialog.permissions')}
-        </Text>
-      </HStack>
-    </Dialog>
-  )
-}

src/frontend/src/features/home/routes/Home.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { DialogTrigger } from 'react-aria-components'
-import { Button, Menu, Text } from '@/primitives'
+import { Button, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
@@ -9,23 +9,18 @@ import { generateRoomId } from '@/features/rooms'
 import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { useCreateRoom } from '@/features/rooms'
-import { usePersistentUserChoices } from '@livekit/components-react'
-import { menuItemRecipe } from '@/primitives/menuItemRecipe'
-import { RiAddLine, RiLink } from '@remixicon/react'
-import { MenuItem, Menu as RACMenu } from 'react-aria-components'
-import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
-import { useState } from 'react'
 
 export const Home = () => {
   const { t } = useTranslation('home')
   const { isLoggedIn } = useUser()
 
-  const {
-    userChoices: { username },
-  } = usePersistentUserChoices()
-
-  const { mutateAsync: createRoom } = useCreateRoom()
-  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
+  const { mutateAsync: createRoom } = useCreateRoom({
+    onSuccess: (data) => {
+      navigateTo('room', data.slug, {
+        state: { create: true, initialRoomData: data },
+      })
+    },
+  })
 
   return (
     <UserAware>
@@ -43,43 +38,21 @@ export const Home = () => {
             </Text>
           )}
           <HStack gap="gutter">
-            {isLoggedIn ? (
-              <Menu>
-                <Button variant="primary">{t('createMeeting')}</Button>
-                <RACMenu>
-                  <MenuItem
-                    className={menuItemRecipe({ icon: true })}
-                    onAction={async () => {
+            <Button
+              variant="primary"
+              onPress={
+                isLoggedIn
+                  ? async () => {
                       const slug = generateRoomId()
-                      createRoom({ slug, username }).then((data) =>
-                        navigateTo('room', data.slug, {
-                          state: { create: true, initialRoomData: data },
-                        })
-                      )
-                    }}
-                  >
-                    <RiAddLine size={18} />
-                    {t('createMenu.instantOption')}
-                  </MenuItem>
-                  <MenuItem
-                    className={menuItemRecipe({ icon: true })}
-                    onAction={() => {
-                      const slug = generateRoomId()
-                      createRoom({ slug, username }).then((data) =>
-                        setLaterRoomId(data.slug)
-                      )
-                    }}
-                  >
-                    <RiLink size={18} />
-                    {t('createMenu.laterOption')}
-                  </MenuItem>
-                </RACMenu>
-              </Menu>
-            ) : (
-              <Button variant="primary" href={authUrl()}>
-                {t('login', { ns: 'global' })}
-              </Button>
-            )}
+                      await createRoom({ slug })
+                    }
+                  : undefined
+              }
+              href={isLoggedIn ? undefined : authUrl()}
+            >
+              {isLoggedIn ? t('createMeeting') : t('login', { ns: 'global' })}
+            </Button>
+
             <DialogTrigger>
               <Button variant="primary" outline>
                 {t('joinMeeting')}
@@ -88,10 +61,6 @@ export const Home = () => {
             </DialogTrigger>
           </HStack>
         </Centered>
-        <LaterMeetingDialog
-          roomId={laterRoomId || ''}
-          onOpenChange={() => setLaterRoomId(null)}
-        />
       </Screen>
     </UserAware>
   )

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,101 +0,0 @@
-import { useEffect } from 'react'
-import { useRoomContext } from '@livekit/components-react'
-import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
-import { ToastProvider, toastQueue } from './components/ToastProvider'
-import { NotificationType } from './NotificationType'
-import { Div } from '@/primitives'
-import { isMobileBrowser } from '@livekit/components-core'
-import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
-
-export const MainNotificationToast = () => {
-  const room = useRoomContext()
-  const { triggerNotificationSound } = useNotificationSound()
-
-  useEffect(() => {
-    const showJoinNotification = (participant: Participant) => {
-      if (isMobileBrowser()) {
-        return
-      }
-      triggerNotificationSound(NotificationType.Joined)
-      toastQueue.add(
-        {
-          participant,
-          type: NotificationType.Joined,
-        },
-        {
-          timeout: 5000,
-        }
-      )
-    }
-    room.on(RoomEvent.ParticipantConnected, showJoinNotification)
-    return () => {
-      room.off(RoomEvent.ParticipantConnected, showJoinNotification)
-    }
-  }, [room, triggerNotificationSound])
-
-  useEffect(() => {
-    const removeJoinNotification = (participant: Participant) => {
-      const existingToast = toastQueue.visibleToasts.find(
-        (toast) =>
-          toast.content.participant === participant &&
-          toast.content.type === NotificationType.Joined
-      )
-      if (existingToast) {
-        toastQueue.close(existingToast.key)
-      }
-    }
-    room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification)
-    return () => {
-      room.off(RoomEvent.ParticipantConnected, removeJoinNotification)
-    }
-  }, [room])
-
-  // fixme - close all related toasters when hands are lowered remotely
-  useEffect(() => {
-    const decoder = new TextDecoder()
-
-    const handleNotificationReceived = (
-      payload: Uint8Array,
-      participant?: RemoteParticipant
-    ) => {
-      if (!participant) {
-        return
-      }
-      if (isMobileBrowser()) {
-        return
-      }
-      const notification = decoder.decode(payload)
-      const existingToast = toastQueue.visibleToasts.find(
-        (toast) =>
-          toast.content.participant === participant &&
-          toast.content.type === NotificationType.Raised
-      )
-      if (existingToast && notification === NotificationType.Lowered) {
-        toastQueue.close(existingToast.key)
-        return
-      }
-      if (!existingToast && notification === NotificationType.Raised) {
-        triggerNotificationSound(NotificationType.Raised)
-        toastQueue.add(
-          {
-            participant,
-            type: NotificationType.Raised,
-          },
-          { timeout: 5000 }
-        )
-      }
-    }
-
-    room.on(RoomEvent.DataReceived, handleNotificationReceived)
-
-    return () => {
-      room.off(RoomEvent.DataReceived, handleNotificationReceived)
-    }
-  }, [room, triggerNotificationSound])
-
-  return (
-    <Div position="absolute" bottom={20} right={5} zIndex={1000}>
-      <ToastProvider />
-    </Div>
-  )
-}

src/frontend/src/features/notifications/NotificationType.ts

@@ -1,6 +0,0 @@
-export enum NotificationType {
-  Joined = 'joined',
-  Default = 'default',
-  Raised = 'raised',
-  Lowered = 'lowered',
-}

src/frontend/src/features/notifications/components/Toast.tsx

@@ -1,58 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { Button } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
-import { ToastState } from '@react-stately/toast'
-import { styled } from '@/styled-system/jsx'
-import { useRef } from 'react'
-import { ToastData } from './ToastProvider'
-import type { QueuedToast } from '@react-stately/toast'
-
-export const StyledToastContainer = styled('div', {
-  base: {
-    margin: 0.5,
-    boxShadow:
-      'rgba(0, 0, 0, 0.5) 0px 4px 8px 0px, rgba(0, 0, 0, 0.3) 0px 6px 20px 4px',
-    backgroundColor: '#494c4f',
-    color: 'white',
-    borderRadius: '8px',
-    '&[data-entering]': { animation: 'fade 200ms' },
-    '&[data-exiting]': { animation: 'fade 150ms reverse ease-in' },
-    width: 'fit-content',
-    marginLeft: 'auto',
-  },
-})
-
-const StyledToast = styled('div', {
-  base: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1rem',
-    padding: '10px',
-  },
-})
-
-export interface ToastProps {
-  key: string
-  toast: QueuedToast<ToastData>
-  state: ToastState<ToastData>
-}
-
-export function Toast({ state, ...props }: ToastProps) {
-  const ref = useRef(null)
-  const { toastProps, contentProps, closeButtonProps } = useToast(
-    props,
-    state,
-    ref
-  )
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <StyledToast>
-        <div {...contentProps}>{props.toast.content?.message} machine a</div>
-        <Button square size="sm" invisible {...closeButtonProps}>
-          <RiCloseLine color="white" />
-        </Button>
-      </StyledToast>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastJoined.tsx

@@ -1,73 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { useRef } from 'react'
-import { Button as RACButton } from 'react-aria-components'
-import { Track } from 'livekit-client'
-import Source = Track.Source
-
-import { useMaybeLayoutContext } from '@livekit/components-react'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { StyledToastContainer, ToastProps } from './Toast'
-import { HStack, styled } from '@/styled-system/jsx'
-import { Div } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-
-const ClickableToast = styled(RACButton, {
-  base: {
-    cursor: 'pointer',
-    display: 'flex',
-    borderRadius: 'inherit',
-  },
-})
-
-export function ToastJoined({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications')
-  const ref = useRef(null)
-  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
-    props,
-    state,
-    ref
-  )
-  const layoutContext = useMaybeLayoutContext()
-  const participant = props.toast.content.participant
-  const trackReference = {
-    participant,
-    publication: participant.getTrackPublication(Source.Camera),
-    source: Source.Camera,
-  }
-  const pinParticipant = () => {
-    layoutContext?.pin.dispatch?.({
-      msg: 'set_pin',
-      trackReference,
-    })
-  }
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <ClickableToast
-        ref={ref}
-        onPress={(e) => {
-          pinParticipant()
-          closeButtonProps.onPress?.(e)
-        }}
-      >
-        <HStack justify="center" alignItems="center" {...contentProps}>
-          <Div display="flex" overflow="hidden" width="128" height="72">
-            <ParticipantTile
-              trackRef={trackReference}
-              disableSpeakingIndicator={true}
-              disableMetadata={true}
-              style={{
-                borderRadius: '7px 0 0 7px',
-                width: '100%',
-              }}
-            />
-          </Div>
-          <Div padding={20} {...titleProps}>
-            {t('joined.description', {
-              name: participant.name || t('defaultName'),
-            })}
-          </Div>
-        </HStack>
-      </ClickableToast>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastProvider.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import { ToastQueue, useToastQueue } from '@react-stately/toast'
-import { ToastRegion } from './ToastRegion'
-import { Participant } from 'livekit-client'
-import { NotificationType } from '../NotificationType'
-
-export interface ToastData {
-  participant: Participant
-  type: NotificationType
-  message?: string
-}
-
-// Using a global queue for toasts allows for centralized management and queuing of notifications
-// from anywhere in the app, providing greater flexibility in complex scenarios.
-export const toastQueue = new ToastQueue<ToastData>({
-  maxVisibleToasts: 5,
-})
-
-export const ToastProvider = ({ ...props }) => {
-  const state = useToastQueue<ToastData>(toastQueue)
-  return (
-    <>
-      {state.visibleToasts.length > 0 && (
-        <ToastRegion {...props} state={state} />
-      )}
-    </>
-  )
-}

src/frontend/src/features/notifications/components/ToastRaised.tsx

@@ -1,66 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { useRef } from 'react'
-
-import { StyledToastContainer, ToastProps } from './Toast'
-import { HStack } from '@/styled-system/jsx'
-import { Button, Div } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine, RiHand } from '@remixicon/react'
-import { useWidgetInteraction } from '@/features/rooms/livekit/hooks/useWidgetInteraction'
-
-export function ToastRaised({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications')
-  const ref = useRef(null)
-  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
-    props,
-    state,
-    ref
-  )
-  const participant = props.toast.content.participant
-  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
-
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <HStack
-        justify="center"
-        alignItems="center"
-        {...contentProps}
-        padding={14}
-        gap={0}
-      >
-        <RiHand
-          color="white"
-          style={{
-            marginRight: '1rem',
-            animationDuration: '300ms',
-            animationName: 'wave_hand',
-            animationIterationCount: '2',
-          }}
-        />
-        <Div {...titleProps} marginRight={0.5}>
-          {t('raised.description', {
-            name: participant.name || t('defaultName'),
-          })}
-        </Div>
-        {!isParticipantsOpen && (
-          <Button
-            size="sm"
-            variant="text"
-            style={{
-              color: '#60a5fa',
-            }}
-            onPress={(e) => {
-              toggleParticipants()
-              closeButtonProps.onPress?.(e)
-            }}
-          >
-            {t('raised.cta')}
-          </Button>
-        )}
-        <Button square size="sm" invisible {...closeButtonProps}>
-          <RiCloseLine size={18} color="white" />
-        </Button>
-      </HStack>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -1,30 +0,0 @@
-import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
-import type { ToastState } from '@react-stately/toast'
-import { Toast } from './Toast'
-import { useRef } from 'react'
-import { NotificationType } from '../NotificationType'
-import { ToastJoined } from './ToastJoined'
-import { ToastData } from './ToastProvider'
-import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
-
-interface ToastRegionProps extends AriaToastRegionProps {
-  state: ToastState<ToastData>
-}
-
-export function ToastRegion({ state, ...props }: ToastRegionProps) {
-  const ref = useRef(null)
-  const { regionProps } = useToastRegion(props, state, ref)
-  return (
-    <div {...regionProps} ref={ref} className="toast-region">
-      {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.Joined) {
-          return <ToastJoined key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.Raised) {
-          return <ToastRaised key={toast.key} toast={toast} state={state} />
-        }
-        return <Toast key={toast.key} toast={toast} state={state} />
-      })}
-    </div>
-  )
-}

src/frontend/src/features/notifications/hooks/useSoundNotification.tsx

@@ -1,18 +0,0 @@
-import useSound from 'use-sound'
-
-// fixme - handle dynamic audio output changes
-export const useNotificationSound = () => {
-  const [play] = useSound('./sounds/notifications.mp3', {
-    sprite: {
-      joined: [0, 1150],
-      raised: [1400, 180],
-      message: [1580, 300],
-      waiting: [2039, 710],
-      success: [2740, 1304],
-    },
-  })
-  const triggerNotificationSound = (type: string) => {
-    play({ id: type })
-  }
-  return { triggerNotificationSound }
-}

src/frontend/src/features/rooms/api/createRoom.ts

@@ -5,14 +5,10 @@ import { ApiRoom } from './ApiRoom'
 
 export interface CreateRoomParams {
   slug: string
-  username?: string
 }
 
-const createRoom = ({
-  slug,
-  username = '',
-}: CreateRoomParams): Promise<ApiRoom> => {
-  return fetchApi(`rooms/?username=${encodeURIComponent(username)}`, {
+const createRoom = ({ slug }: CreateRoomParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/`, {
     method: 'POST',
     body: JSON.stringify({
       name: slug,

src/frontend/src/features/rooms/components/ActiveSpeaker.tsx

@@ -1,70 +0,0 @@
-import { styled } from '@/styled-system/jsx'
-
-const StyledContainer = styled('div', {
-  base: {
-    width: '24px',
-    height: '24px',
-    boxSizing: 'border-box',
-    backgroundColor: 'primary',
-    borderRadius: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '2px',
-  },
-})
-
-const StyledChild = styled('div', {
-  base: {
-    backgroundColor: 'white',
-    width: '4px',
-    height: '4px',
-    borderRadius: '4px',
-    animationDuration: '400ms',
-    animationName: 'active_speaker',
-    animationIterationCount: 'infinite',
-    animationDirection: 'alternate',
-  },
-  variants: {
-    active: {
-      true: {
-        animationIterationCount: 'infinite',
-      },
-      false: {
-        animationIterationCount: 0,
-      },
-    },
-    size: {
-      small: {
-        animationName: 'active_speake_small',
-      },
-    },
-  },
-})
-
-export const ActiveSpeaker = ({ isSpeaking }: { isSpeaking: boolean }) => {
-  return (
-    <StyledContainer>
-      <StyledChild
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '300ms',
-        }}
-      />
-      <StyledChild
-        active={isSpeaking}
-        style={{
-          animationDelay: '100ms',
-        }}
-      />
-      <StyledChild
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '500ms',
-        }}
-      />
-    </StyledContainer>
-  )
-}

src/frontend/src/features/rooms/components/Conference.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import {
   formatChatMessageLinks,
   LiveKitRoom,
-  type LocalUserChoices,
+  VideoConference,
 } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
@@ -17,8 +17,7 @@ import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
-
-import { VideoConference } from '../livekit/prefabs/VideoConference'
+import { type SettingsState } from '@/features/settings'
 
 export const Conference = ({
   roomId,
@@ -27,7 +26,10 @@ export const Conference = ({
   mode = 'join',
 }: {
   roomId: string
-  userConfig: LocalUserChoices
+  userConfig: {
+    devices: SettingsState['devices']
+    username: SettingsState['username']
+  }
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
@@ -49,7 +51,7 @@ export const Conference = ({
     data,
   } = useQuery({
     queryKey: fetchKey,
-    staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
+    enabled: !initialRoomData,
     initialData: initialRoomData,
     queryFn: () =>
       fetchRoom({
@@ -57,7 +59,7 @@ export const Conference = ({
         username: userConfig.username,
       }).catch((error) => {
         if (error.statusCode == '404') {
-          createRoom({ slug: roomId, username: userConfig.username })
+          createRoom({ slug: roomId })
         }
       }),
     retry: false,
@@ -66,14 +68,21 @@ export const Conference = ({
   const roomOptions = useMemo((): RoomOptions => {
     return {
       videoCaptureDefaults: {
-        deviceId: userConfig.videoDeviceId ?? undefined,
+        deviceId: userConfig.devices.cameraDeviceId ?? undefined,
       },
       audioCaptureDefaults: {
-        deviceId: userConfig.audioDeviceId ?? undefined,
+        deviceId: userConfig.devices.micDeviceId ?? undefined,
+      },
+      audioOutput: {
+        deviceId: userConfig.devices.speakerDeviceId ?? undefined,
       },
     }
     // do not rely on the userConfig object directly as its reference may change on every render
-  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
+  }, [
+    userConfig.devices.cameraDeviceId,
+    userConfig.devices.micDeviceId,
+    userConfig.devices.speakerDeviceId,
+  ])
 
   const room = useMemo(() => new Room(roomOptions), [roomOptions])
 
@@ -111,14 +120,14 @@ export const Conference = ({
 
   return (
     <QueryAware status={isFetchError ? createStatus : fetchStatus}>
-      <Screen header={false}>
+      <Screen>
         <LiveKitRoom
           room={room}
           serverUrl={data?.livekit?.url}
           token={data?.livekit?.token}
           connect={true}
-          audio={userConfig.audioEnabled}
-          video={userConfig.videoEnabled}
+          audio={userConfig.devices.enableMic}
+          video={userConfig.devices.enableCamera}
         >
           <VideoConference chatMessageFormatter={formatChatMessageLinks} />
           {showInviteDialog && (

src/frontend/src/features/rooms/components/HomemadeJoin.tsx

@@ -0,0 +1,358 @@
+import { Screen } from '@/layout/Screen'
+import {
+  Button,
+  Div,
+  Field,
+  Form,
+  H,
+  Menu,
+  MenuList,
+  ToggleButton,
+  VerticallyOffCenter,
+} from '@/primitives'
+import { Center, HStack, VStack } from '@/styled-system/jsx'
+import {
+  RiArrowDropDownLine,
+  RiMicLine,
+  RiMicOffLine,
+  RiVideoOffLine,
+  RiVideoOnLine,
+  RiVolumeUpLine,
+} from '@remixicon/react'
+import {
+  useMaybeRoomContext,
+  usePreviewTracks,
+} from '@livekit/components-react'
+import { Track, LocalVideoTrack, LocalAudioTrack } from 'livekit-client'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import {
+  usePersistedMediaDeviceSelect,
+  useAudioOutputs,
+} from '@/features/devices'
+import { settingsStore, type SettingsState } from '@/features/settings'
+import { css } from '@/styled-system/css'
+
+export const HomemadeJoin = ({
+  onSubmit,
+}: {
+  onSubmit: (choices: {
+    devices: SettingsState['devices']
+    username: SettingsState['username']
+  }) => void
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const settingsSnap = useSnapshot(settingsStore)
+  const [initialUserChoices] = useState({ ...settingsSnap.devices })
+
+  const tracks = usePreviewTracks({
+    audio: settingsSnap.devices.enableMic
+      ? { deviceId: initialUserChoices.micDeviceId }
+      : false,
+    video: settingsSnap.devices.enableCamera
+      ? { deviceId: initialUserChoices.cameraDeviceId }
+      : false,
+  })
+
+  const videoEl = useRef(null)
+  const videoTrack = useMemo(
+    () =>
+      tracks?.filter(
+        (track) => track.kind === Track.Kind.Video
+      )[0] as LocalVideoTrack,
+    [tracks]
+  )
+
+  const audioTrack = useMemo(
+    () =>
+      tracks?.filter(
+        (track) => track.kind === Track.Kind.Audio
+      )[0] as LocalAudioTrack,
+    [tracks]
+  )
+
+  useEffect(() => {
+    if (videoEl.current && videoTrack) {
+      videoTrack.unmute()
+      videoTrack.attach(videoEl.current)
+    }
+
+    return () => {
+      videoTrack?.detach()
+    }
+  }, [videoTrack])
+  const room = useMaybeRoomContext()
+
+  const {
+    devices: micDevices,
+    activeDeviceId: activeMicDeviceId,
+    setActiveMediaDevice: setActiveMicDevice,
+  } = usePersistedMediaDeviceSelect({
+    kind: 'audioinput',
+    room,
+    track: audioTrack,
+    requestPermissions: true,
+  })
+  const {
+    devices: cameraDevices,
+    activeDeviceId: activeCameraDeviceId,
+    setActiveMediaDevice: setActiveCameraDevice,
+  } = usePersistedMediaDeviceSelect({
+    kind: 'videoinput',
+    room,
+    track: videoTrack,
+    requestPermissions: true,
+  })
+  const speakerDevices = useAudioOutputs()
+
+  useEffect(() => {
+    if (settingsStore.devices.micDeviceId) {
+      setActiveMicDevice(settingsStore.devices.micDeviceId)
+    }
+    if (settingsStore.devices.cameraDeviceId) {
+      setActiveCameraDevice(settingsStore.devices.cameraDeviceId)
+    }
+  }, [setActiveCameraDevice, setActiveMicDevice])
+
+  return (
+    <Screen>
+      <VerticallyOffCenter>
+        <Div
+          className={css({
+            margin: 'auto',
+            flexWrap: 'wrap',
+            width: 'fit-content',
+            maxWidth: 'full',
+            display: 'flex',
+            gap: 2,
+            paddingX: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            lg: {
+              alignItems: 'stretch',
+              flexDirection: 'row',
+            },
+          })}
+        >
+          <VStack
+            className={css({
+              width: 'full',
+              maxWidth: '38rem',
+              margin: '0 auto',
+              alignItems: 'center',
+              flexShrink: '1',
+            })}
+          >
+            <Center
+              className={css({
+                width: '38rem',
+                maxWidth: 'full',
+                height: 'auto',
+                aspectRatio: '16 / 9',
+                background: 'gray.900',
+                color: 'white',
+                borderRadius: 16,
+                overflow: 'hidden',
+              })}
+            >
+              {videoTrack && settingsSnap.devices.enableCamera ? (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <video
+                  ref={videoEl}
+                  width="608"
+                  height="342"
+                  className={css({
+                    width: 'full',
+                    height: 'auto',
+                  })}
+                />
+              ) : (
+                settingsSnap.devices.enableCamera === false && (
+                  <p>{t('cameraPlaceholder')}</p>
+                )
+              )}
+            </Center>
+            <HStack gap={1} justify="center" flexWrap={'wrap'}>
+              {/* audio output dropdown */}
+              <Menu>
+                <Button
+                  tooltip={t('chooseSpeaker')}
+                  aria-label={t('chooseSpeaker')}
+                >
+                  <RiVolumeUpLine />
+                  <RiArrowDropDownLine />
+                </Button>
+                <MenuList
+                  items={speakerDevices.map((d) => ({
+                    value: d.deviceId,
+                    label: d.label,
+                  }))}
+                  selectedItem={settingsSnap.devices.speakerDeviceId}
+                  onAction={(value) => {
+                    settingsStore.devices.speakerDeviceId = value as string
+                  }}
+                />
+              </Menu>
+
+              {/* audio input toggle + dropdown */}
+              <HStack gap={0}>
+                <ToggleButton
+                  isSelected={settingsSnap.devices.enableMic}
+                  variant={
+                    settingsSnap.devices.enableMic ? undefined : 'danger'
+                  }
+                  toggledStyles={false}
+                  onChange={(enabled) =>
+                    (settingsStore.devices.enableMic = enabled)
+                  }
+                  aria-label={
+                    settingsSnap.devices.enableMic
+                      ? `${t('micIsOn')} ${t('toggleOff')}`
+                      : `${t('micIsOff')} ${t('toggleOn')}`
+                  }
+                  tooltip={
+                    settingsSnap.devices.enableMic ? (
+                      <>
+                        {t('micIsOn')}
+                        <br />
+                        {t('toggleOff')}
+                      </>
+                    ) : (
+                      <>
+                        {t('micIsOff')}
+                        <br />
+                        {t('toggleOn')}
+                      </>
+                    )
+                  }
+                  groupPosition="left"
+                >
+                  {settingsSnap.devices.enableMic ? (
+                    <RiMicLine />
+                  ) : (
+                    <RiMicOffLine />
+                  )}
+                </ToggleButton>
+                <Menu>
+                  <Button
+                    tooltip={t('chooseMic')}
+                    aria-label={t('chooseMic')}
+                    groupPosition="right"
+                    square
+                  >
+                    <RiArrowDropDownLine />
+                  </Button>
+                  <MenuList
+                    items={micDevices.map((d) => ({
+                      value: d.deviceId,
+                      label: d.label,
+                    }))}
+                    selectedItem={activeMicDeviceId}
+                    onAction={(value) => {
+                      setActiveMicDevice(value as string)
+                    }}
+                  />
+                </Menu>
+              </HStack>
+
+              {/* video toggle + dropdown */}
+              <HStack gap={0}>
+                <ToggleButton
+                  isSelected={settingsSnap.devices.enableCamera}
+                  variant={
+                    settingsSnap.devices.enableCamera ? undefined : 'danger'
+                  }
+                  toggledStyles={false}
+                  onChange={(enabled) =>
+                    (settingsStore.devices.enableCamera = enabled)
+                  }
+                  aria-label={
+                    settingsSnap.devices.enableMic
+                      ? `${t('cameraIsOn')} ${t('toggleOff')}`
+                      : `${t('cameraIsOff')} ${t('toggleOn')}`
+                  }
+                  tooltip={
+                    settingsSnap.devices.enableMic ? (
+                      <>
+                        {t('cameraIsOn')}
+                        <br />
+                        {t('toggleOff')}
+                      </>
+                    ) : (
+                      <>
+                        {t('cameraIsOff')}
+                        <br />
+                        {t('toggleOn')}
+                      </>
+                    )
+                  }
+                  groupPosition="left"
+                >
+                  {settingsSnap.devices.enableCamera ? (
+                    <RiVideoOnLine />
+                  ) : (
+                    <RiVideoOffLine />
+                  )}
+                </ToggleButton>
+                <Menu>
+                  <Button
+                    tooltip={t('chooseCamera')}
+                    aria-label={t('chooseCamera')}
+                    groupPosition="right"
+                    square
+                  >
+                    <RiArrowDropDownLine />
+                  </Button>
+                  <MenuList
+                    items={cameraDevices.map((d) => ({
+                      value: d.deviceId,
+                      label: d.label,
+                    }))}
+                    selectedItem={activeCameraDeviceId}
+                    onAction={(value) => {
+                      setActiveCameraDevice(value as string)
+                    }}
+                  />
+                </Menu>
+              </HStack>
+            </HStack>
+          </VStack>
+          <Div width="24rem" maxWidth="full" flexShrink="1">
+            <VerticallyOffCenter>
+              <Center>
+                <H lvl={1}>{t('heading')}</H>
+              </Center>
+              <Form
+                onSubmit={(data) => {
+                  settingsStore.username = (data.username as string).trim()
+                  onSubmit({
+                    devices: { ...settingsStore.devices },
+                    username: settingsStore.username,
+                  })
+                }}
+                submitLabel={t('joinMeeting')}
+                withSubmitButton={false}
+              >
+                <Field
+                  type="text"
+                  name="username"
+                  defaultValue={settingsSnap.username}
+                  label={t('usernameLabel')}
+                  description={t('usernameHint')}
+                  isRequired
+                />
+                <Center>
+                  <Button type="submit" variant="primary">
+                    {t('joinMeeting')}
+                  </Button>
+                </Center>
+              </Form>
+            </VerticallyOffCenter>
+          </Div>
+        </Div>
+      </VerticallyOffCenter>
+    </Screen>
+  )
+}

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -1,37 +1,8 @@
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P } from '@/primitives'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import { Heading, Dialog } from 'react-aria-components'
-import { Text, text } from '@/primitives/Text'
-import {
-  RiCheckLine,
-  RiCloseLine,
-  RiFileCopyLine,
-  RiSpam2Fill,
-} from '@remixicon/react'
-import { useEffect, useState } from 'react'
-
-// fixme - extract in a proper primitive this dialog without overlay
-const StyledRACDialog = styled(Dialog, {
-  base: {
-    position: 'fixed',
-    left: '0.75rem',
-    bottom: 80,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000,
-    width: '24.5rem',
-    borderRadius: '8px',
-    padding: '1.5rem',
-    boxShadow:
-      '0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15)',
-    backgroundColor: 'white',
-    '&[data-entering]': { animation: 'fade 200ms' },
-    '&[data-exiting]': { animation: 'fade 150ms reverse ease-in' },
-  },
-})
+import { Div, Button, Dialog, Input, type DialogProps } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
 
 export const InviteDialog = ({
   roomId,
@@ -40,102 +11,48 @@ export const InviteDialog = ({
   const { t } = useTranslation('rooms')
   const roomUrl = getRouteUrl('room', roomId)
 
-  const [isCopied, setIsCopied] = useState(false)
-
+  const copyLabel = t('shareDialog.copy')
+  const copiedLabel = t('shareDialog.copied')
+  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
   useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
+    if (copyLinkLabel == copiedLabel) {
+      const timeout = setTimeout(() => {
+        setCopyLinkLabel(copyLabel)
+      }, 5000)
+      return () => {
+        clearTimeout(timeout)
+      }
     }
-  }, [isCopied])
-
-  const [isHovered, setIsHovered] = useState(false)
+  }, [copyLinkLabel, copyLabel, copiedLabel])
 
   return (
-    <StyledRACDialog {...dialogProps}>
-      {({ close }) => (
-        <VStack
-          alignItems="left"
-          justify="start"
-          gap={0}
-          style={{ maxWidth: '100%', overflow: 'hidden' }}
-        >
-          <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-            {t('shareDialog.heading')}
-          </Heading>
-          <Div position="absolute" top="5" right="5">
-            <Button
-              invisible
-              size="xs"
-              onPress={() => {
-                dialogProps.onClose?.()
-                close()
-              }}
-              aria-label={t('closeDialog')}
-            >
-              <RiCloseLine />
-            </Button>
-          </Div>
-          <P>{t('shareDialog.description')}</P>
+    <Dialog {...dialogProps} title={t('shareDialog.heading')}>
+      <HStack alignItems="stretch" gap="gutter">
+        <Div flex="1">
+          <Input
+            type="text"
+            aria-label={t('shareDialog.inputLabel')}
+            value={roomUrl}
+            readOnly
+            onClick={(e) => {
+              e.currentTarget.select()
+            }}
+          />
+        </Div>
+        <Div minWidth="8rem">
           <Button
-            variant={isCopied ? 'success' : 'primary'}
+            variant="primary"
             size="sm"
             fullWidth
-            aria-label={t('shareDialog.copy')}
-            style={{
-              justifyContent: 'start',
-            }}
             onPress={() => {
               navigator.clipboard.writeText(roomUrl)
-              setIsCopied(true)
+              setCopyLinkLabel(copiedLabel)
             }}
-            onHoverChange={setIsHovered}
           >
-            {isCopied ? (
-              <>
-                <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copied')}
-              </>
-            ) : (
-              <>
-                <RiFileCopyLine
-                  size={18}
-                  style={{ marginRight: '8px', minWidth: '18px' }}
-                />
-                {isHovered ? (
-                  t('shareDialog.copy')
-                ) : (
-                  <div
-                    style={{
-                      textOverflow: 'ellipsis',
-                      overflow: 'hidden',
-                      userSelect: 'none',
-                      textWrap: 'nowrap',
-                    }}
-                  >
-                    {roomUrl.replace(/^https?:\/\//, '')}
-                  </div>
-                )}
-              </>
-            )}
+            {copyLinkLabel}
           </Button>
-          <HStack>
-            <div
-              style={{
-                backgroundColor: '#d9e5ff',
-                borderRadius: '50%',
-                padding: '4px',
-                marginTop: '1rem',
-              }}
-            >
-              <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
-            </div>
-            <Text variant="sm" style={{ marginTop: '1rem' }}>
-              {t('shareDialog.permissions')}
-            </Text>
-          </HStack>
-        </VStack>
-      )}
-    </StyledRACDialog>
+        </Div>
+      </HStack>
+    </Dialog>
   )
 }

src/frontend/src/features/rooms/livekit/api/buildServerApiUrl.ts

@@ -1,5 +0,0 @@
-export const buildServerApiUrl = (origin: string, path: string) => {
-  const sanitizedOrigin = origin.replace(/\/$/, '')
-  const sanitizedPath = path.replace(/^\//, '')
-  return `${sanitizedOrigin}/${sanitizedPath}`
-}

src/frontend/src/features/rooms/livekit/api/fetchServerApi.ts

@@ -1,21 +0,0 @@
-import { ApiError } from '@/api/ApiError'
-
-export const fetchServerApi = async <T = Record<string, unknown>>(
-  url: string,
-  token: string,
-  options?: RequestInit
-): Promise<T> => {
-  const response = await fetch(url, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-      ...options?.headers,
-    },
-  })
-  const result = await response.json()
-  if (!response.ok) {
-    throw new ApiError(response.status, result)
-  }
-  return result
-}

src/frontend/src/features/rooms/livekit/api/lowerHandParticipant.ts

@@ -1,33 +0,0 @@
-import { Participant } from 'livekit-client'
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
-
-export const useLowerHandParticipant = () => {
-  const data = useRoomData()
-
-  const lowerHandParticipant = (participant: Participant) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    const newMetadata = JSON.parse(participant.metadata || '{}')
-    newMetadata.raised = !newMetadata.raised
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        'twirp/livekit.RoomService/UpdateParticipant'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room: data.livekit.room,
-          identity: participant.identity,
-          metadata: JSON.stringify(newMetadata),
-          permission: participant.permissions,
-        }),
-      }
-    )
-  }
-  return { lowerHandParticipant }
-}

src/frontend/src/features/rooms/livekit/api/lowerHandParticipants.ts

@@ -1,18 +0,0 @@
-import { Participant } from 'livekit-client'
-import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant'
-
-export const useLowerHandParticipants = () => {
-  const { lowerHandParticipant } = useLowerHandParticipant()
-
-  const lowerHandParticipants = (participants: Array<Participant>) => {
-    try {
-      const promises = participants.map((participant) =>
-        lowerHandParticipant(participant)
-      )
-      return Promise.all(promises)
-    } catch (error) {
-      throw new Error('An error occurred while lowering hands.')
-    }
-  }
-  return { lowerHandParticipants }
-}

src/frontend/src/features/rooms/livekit/api/muteParticipant.ts

@@ -1,39 +0,0 @@
-import { Participant, Track } from 'livekit-client'
-import Source = Track.Source
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
-
-export const useMuteParticipant = () => {
-  const data = useRoomData()
-
-  const muteParticipant = (participant: Participant) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    const trackSid = participant.getTrackPublication(
-      Source.Microphone
-    )?.trackSid
-
-    if (!trackSid) {
-      throw new Error('Missing audio track')
-    }
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        'twirp/livekit.RoomService/MutePublishedTrack'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room: data.livekit.room,
-          identity: participant.identity,
-          muted: true,
-          track_sid: trackSid,
-        }),
-      }
-    )
-  }
-  return { muteParticipant }
-}

src/frontend/src/features/rooms/livekit/api/recordRoom.ts

@@ -1,56 +0,0 @@
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
-import { useParams } from 'wouter'
-
-export const useRecordRoom = () => {
-  const data = useRoomData()
-  const { roomId: roomSlug } = useParams()
-
-  const recordRoom = () => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    if (!roomSlug) {
-      throw new Error('Room ID is not available')
-    }
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        '/twirp/livekit.Egress/StartRoomCompositeEgress'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room_name: data.livekit.room,
-          audio_only: true,
-          file_outputs: [
-            {
-              file_extension: 'ogg',
-              filepath: `{room_name}_{time}_${roomSlug}`,
-            },
-          ],
-        }),
-      }
-    )
-  }
-
-  const stopRecordingRoom = (egressId: string) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    return fetchServerApi(
-      buildServerApiUrl(data.livekit.url, '/twirp/livekit.Egress/StopEgress'),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          egressId,
-        }),
-      }
-    )
-  }
-
-  return { recordRoom, stopRecordingRoom }
-}

src/frontend/src/features/rooms/livekit/components/FocusLayout.tsx

@@ -1,6 +0,0 @@
-import { ParticipantTile } from './ParticipantTile'
-import { FocusLayoutProps } from '@livekit/components-react'
-
-export function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps) {
-  return <ParticipantTile trackRef={trackRef} {...htmlProps} />
-}

src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx

@@ -1,26 +0,0 @@
-import { useTrackMutedIndicator } from '@livekit/components-react'
-import { Participant, Track } from 'livekit-client'
-import Source = Track.Source
-import { Div } from '@/primitives'
-import { RiMicOffFill } from '@remixicon/react'
-
-export const MutedMicIndicator = ({
-  participant,
-}: {
-  participant: Participant
-}) => {
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Source.Microphone,
-  })
-
-  if (!isMuted) {
-    return null
-  }
-
-  return (
-    <Div padding={0.25} backgroundColor="red" borderRadius="4px">
-      <RiMicOffFill size={16} color="white" />
-    </Div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx

@@ -1,63 +0,0 @@
-import { Participant } from 'livekit-client'
-import { styled } from '@/styled-system/jsx'
-import { Avatar } from '@/components/Avatar'
-import { useIsSpeaking } from '@livekit/components-react'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { useMemo, useRef } from 'react'
-
-const StyledParticipantPlaceHolder = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#3d4043', // fixme - copied from gmeet
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})
-
-type ParticipantPlaceholderProps = {
-  participant: Participant
-}
-
-export const ParticipantPlaceholder = ({
-  participant,
-}: ParticipantPlaceholderProps) => {
-  const isSpeaking = useIsSpeaking(participant)
-  const participantColor = getParticipantColor(participant)
-
-  const placeholderEl = useRef<HTMLDivElement>(null)
-  const { width, height } = useSize(placeholderEl)
-
-  const minDimension = Math.min(width, height)
-  const avatarSize = useMemo(
-    () => Math.min(Math.round(minDimension * 0.9), 160),
-    [minDimension]
-  )
-
-  const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
-
-  return (
-    <StyledParticipantPlaceHolder ref={placeholderEl}>
-      <div
-        style={{
-          borderRadius: '50%',
-          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
-          height: 'auto',
-          aspectRatio: '1/1',
-          width: '80%',
-          maxWidth: `${avatarSize}px`,
-          fontSize: `${initialSize}px`,
-        }}
-      >
-        {/*fixme - participant doesn't update on ParticipantNameChanged event */}
-        <Avatar
-          name={participant.name}
-          bgColor={participantColor}
-          context="placeholder"
-        />
-      </div>
-    </StyledParticipantPlaceHolder>
-  )
-}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -1,181 +0,0 @@
-import {
-  AudioTrack,
-  ConnectionQualityIndicator,
-  FocusToggle,
-  LockLockedIcon,
-  ParticipantName,
-  ParticipantTileProps,
-  ScreenShareIcon,
-  useEnsureTrackRef,
-  useFeatureContext,
-  useIsEncrypted,
-  useMaybeLayoutContext,
-  useMaybeTrackRefContext,
-  useParticipantTile,
-  VideoTrack,
-  TrackRefContext,
-  ParticipantContextIfNeeded,
-} from '@livekit/components-react'
-import React from 'react'
-import {
-  isTrackReference,
-  isTrackReferencePinned,
-  TrackReferenceOrPlaceholder,
-} from '@livekit/components-core'
-import { Track } from 'livekit-client'
-import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
-import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { HStack } from '@/styled-system/jsx'
-import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
-
-export function TrackRefContextIfNeeded(
-  props: React.PropsWithChildren<{
-    trackRef?: TrackReferenceOrPlaceholder
-  }>
-) {
-  const hasContext = !!useMaybeTrackRefContext()
-  return props.trackRef && !hasContext ? (
-    <TrackRefContext.Provider value={props.trackRef}>
-      {props.children}
-    </TrackRefContext.Provider>
-  ) : (
-    <>{props.children}</>
-  )
-}
-
-interface ParticipantTileExtendedProps extends ParticipantTileProps {
-  disableMetadata?: boolean
-}
-
-export const ParticipantTile: (
-  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
-  HTMLDivElement,
-  ParticipantTileExtendedProps
->(function ParticipantTile(
-  {
-    trackRef,
-    children,
-    onParticipantClick,
-    disableSpeakingIndicator,
-    disableMetadata,
-    ...htmlProps
-  }: ParticipantTileExtendedProps,
-  ref
-) {
-  const trackReference = useEnsureTrackRef(trackRef)
-
-  const { elementProps } = useParticipantTile<HTMLDivElement>({
-    htmlProps,
-    disableSpeakingIndicator,
-    onParticipantClick,
-    trackRef: trackReference,
-  })
-  const isEncrypted = useIsEncrypted(trackReference.participant)
-  const layoutContext = useMaybeLayoutContext()
-
-  const autoManageSubscription = useFeatureContext()?.autoSubscription
-
-  const handleSubscribe = React.useCallback(
-    (subscribed: boolean) => {
-      if (
-        trackReference.source &&
-        !subscribed &&
-        layoutContext &&
-        layoutContext.pin.dispatch &&
-        isTrackReferencePinned(trackReference, layoutContext.pin.state)
-      ) {
-        layoutContext.pin.dispatch({ msg: 'clear_pin' })
-      }
-    },
-    [trackReference, layoutContext]
-  )
-
-  const { isHandRaised } = useRaisedHand({
-    participant: trackReference.participant,
-  })
-
-  return (
-    <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
-      <TrackRefContextIfNeeded trackRef={trackReference}>
-        <ParticipantContextIfNeeded participant={trackReference.participant}>
-          {children ?? (
-            <>
-              {isTrackReference(trackReference) &&
-              (trackReference.publication?.kind === 'video' ||
-                trackReference.source === Track.Source.Camera ||
-                trackReference.source === Track.Source.ScreenShare) ? (
-                <VideoTrack
-                  trackRef={trackReference}
-                  onSubscriptionStatusChanged={handleSubscribe}
-                  manageSubscription={autoManageSubscription}
-                />
-              ) : (
-                isTrackReference(trackReference) && (
-                  <AudioTrack
-                    trackRef={trackReference}
-                    onSubscriptionStatusChanged={handleSubscribe}
-                  />
-                )
-              )}
-              <div className="lk-participant-placeholder">
-                <ParticipantPlaceholder
-                  participant={trackReference.participant}
-                />
-              </div>
-              {!disableMetadata && (
-                <div className="lk-participant-metadata">
-                  <HStack gap={0.25}>
-                    <MutedMicIndicator
-                      participant={trackReference.participant}
-                    />
-                    <div
-                      className="lk-participant-metadata-item"
-                      style={{
-                        minHeight: '24px',
-                        backgroundColor: isHandRaised ? 'white' : undefined,
-                        color: isHandRaised ? 'black' : undefined,
-                        transition: 'background 200ms ease, color 400ms ease',
-                      }}
-                    >
-                      {trackReference.source === Track.Source.Camera ? (
-                        <>
-                          {isHandRaised && (
-                            <RiHand
-                              color="black"
-                              size={16}
-                              style={{
-                                marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
-                                animationDuration: '300ms',
-                                animationName: 'wave_hand',
-                                animationIterationCount: '2',
-                              }}
-                            />
-                          )}
-                          {isEncrypted && (
-                            <LockLockedIcon
-                              style={{ marginRight: '0.25rem' }}
-                            />
-                          )}
-                          <ParticipantName />
-                        </>
-                      ) : (
-                        <>
-                          <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
-                          <ParticipantName>&apos;s screen</ParticipantName>
-                        </>
-                      )}
-                    </div>
-                  </HStack>
-                  <ConnectionQualityIndicator className="lk-participant-metadata-item" />
-                </div>
-              )}
-            </>
-          )}
-          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
-        </ParticipantContextIfNeeded>
-      </TrackRefContextIfNeeded>
-    </div>
-  )
-})

src/frontend/src/features/rooms/livekit/components/RecordingIndicator.tsx

@@ -1,32 +0,0 @@
-import { useRoomContext } from '@livekit/components-react'
-import { useEffect, useState } from 'react'
-import { RoomEvent } from 'livekit-client'
-
-export const RecordingIndicator = () => {
-  const room = useRoomContext()
-  const [isRecording, setIsRecording] = useState(room.isRecording)
-
-  useEffect(() => {
-    const handleRecordingStatusChanges = (isRecording: boolean) => {
-      setIsRecording(isRecording)
-    }
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
-    return () => {
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
-    }
-  }, [room])
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'column',
-        width: '100%',
-      }}
-    >
-      Room is recording: {isRecording ? 'yes' : 'no'}
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx

@@ -1,47 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiChat1Line } from '@remixicon/react'
-import { ToggleButton } from '@/primitives'
-import { css } from '@/styled-system/css'
-import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
-
-export const ChatToggle = () => {
-  const { t } = useTranslation('rooms')
-
-  const { isChatOpen, unreadMessages, toggleChat } = useWidgetInteraction()
-  const tooltipLabel = isChatOpen ? 'open' : 'closed'
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={t(`controls.chat.${tooltipLabel}`)}
-        tooltip={t(`controls.chat.${tooltipLabel}`)}
-        isSelected={isChatOpen}
-        onPress={() => toggleChat()}
-      >
-        <RiChat1Line />
-      </ToggleButton>
-      {!!unreadMessages && (
-        <div
-          className={css({
-            position: 'absolute',
-            top: '-.25rem',
-            right: '-.25rem',
-            width: '1rem',
-            height: '1rem',
-            backgroundColor: 'red',
-            borderRadius: '50%',
-            zIndex: 1,
-            border: '2px solid #d1d5db',
-          })}
-        />
-      )}
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -1,54 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiHand } from '@remixicon/react'
-import { ToggleButton } from '@/primitives'
-import { css } from '@/styled-system/css'
-import { useRoomContext } from '@livekit/components-react'
-import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { NotificationType } from '@/features/notifications/NotificationType'
-
-export const HandToggle = () => {
-  const { t } = useTranslation('rooms')
-
-  const room = useRoomContext()
-  const { isHandRaised, toggleRaisedHand } = useRaisedHand({
-    participant: room.localParticipant,
-  })
-
-  const label = isHandRaised
-    ? t('controls.hand.lower')
-    : t('controls.hand.raise')
-
-  const notifyOtherParticipants = (isHandRaised: boolean) => {
-    room.localParticipant.publishData(
-      new TextEncoder().encode(
-        !isHandRaised ? NotificationType.Raised : NotificationType.Lowered
-      ),
-      {
-        reliable: true,
-      }
-    )
-  }
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={label}
-        tooltip={label}
-        isSelected={isHandRaised}
-        onPress={() => {
-          notifyOtherParticipants(isHandRaised)
-          toggleRaisedHand()
-        }}
-      >
-        <RiHand />
-      </ToggleButton>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -1,33 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiMore2Line } from '@remixicon/react'
-import { Button, Menu } from '@/primitives'
-
-import { useState } from 'react'
-import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
-import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
-
-export type DialogState = 'username' | 'settings' | null
-
-export const OptionsButton = () => {
-  const { t } = useTranslation('rooms')
-  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
-  return (
-    <>
-      <Menu>
-        <Button
-          square
-          legacyStyle
-          aria-label={t('options.buttonLabel')}
-          tooltip={t('options.buttonLabel')}
-        >
-          <RiMore2Line />
-        </Button>
-        <OptionsMenuItems onOpenDialog={setDialogOpen} />
-      </Menu>
-      <SettingsDialogExtended
-        isOpen={dialogOpen === 'settings'}
-        onOpenChange={(v) => !v && setDialogOpen(null)}
-      />
-    </>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -1,54 +0,0 @@
-import { menuItemRecipe } from '@/primitives/menuItemRecipe'
-import {
-  RiFeedbackLine,
-  RiQuestionLine,
-  RiSettings3Line,
-} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
-import { RecordingMenuItem } from './RecordingMenuItem.tsx'
-
-// @todo try refactoring it to use MenuList component
-export const OptionsMenuItems = ({
-  onOpenDialog,
-}: {
-  onOpenDialog: Dispatch<SetStateAction<DialogState>>
-}) => {
-  const { t } = useTranslation('rooms')
-
-  return (
-    <RACMenu
-      style={{
-        minWidth: '150px',
-        width: '300px',
-      }}
-    >
-      <MenuItem
-        href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
-        target="_blank"
-        className={menuItemRecipe({ icon: true })}
-      >
-        <RiQuestionLine size={18} />
-        {t('options.items.support')}
-      </MenuItem>
-      <MenuItem
-        href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-        target="_blank"
-        className={menuItemRecipe({ icon: true })}
-      >
-        <RiFeedbackLine size={18} />
-        {t('options.items.feedbacks')}
-      </MenuItem>
-      <MenuItem
-        className={menuItemRecipe({ icon: true })}
-        onAction={() => onOpenDialog('settings')}
-      >
-        <RiSettings3Line size={18} />
-        {t('options.items.settings')}
-      </MenuItem>
-      <RecordingMenuItem />
-    </RACMenu>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/RecordingMenuItem.tsx

@@ -1,51 +0,0 @@
-import { MenuItem } from 'react-aria-components'
-import { menuItemRecipe } from '@/primitives/menuItemRecipe.ts'
-import { RiPauseCircleLine, RiRecordCircleLine } from '@remixicon/react'
-import { useRecordRoom } from '@/features/rooms/livekit/api/recordRoom.ts'
-import { useState } from 'react'
-import { egressStore } from '@/stores/egress.tsx'
-import { useSnapshot } from 'valtio'
-
-export const RecordingMenuItem = () => {
-  const { recordRoom, stopRecordingRoom } = useRecordRoom()
-
-  const egressSnap = useSnapshot(egressStore)
-  const egressId = egressSnap.egressId
-
-  const [isPending, setIsPending] = useState(false)
-
-  const handleAction = async () => {
-    if (egressId) {
-      setIsPending(true)
-      const response = await stopRecordingRoom(egressId)
-      console.log(response)
-      egressStore.egressId = undefined
-      setIsPending(false)
-    } else {
-      setIsPending(true)
-      const response = await recordRoom()
-      egressStore.egressId = response['egress_id'] as string
-      setIsPending(false)
-    }
-  }
-
-  return (
-    <MenuItem
-      isDisabled={isPending}
-      className={menuItemRecipe({ icon: true })}
-      onAction={handleAction}
-    >
-      {egressId ? (
-        <>
-          <RiPauseCircleLine size={18} />
-          Stop recording room
-        </>
-      ) : (
-        <>
-          <RiRecordCircleLine size={18} />
-          Record room
-        </>
-      )}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx

@@ -1,81 +0,0 @@
-import { css } from '@/styled-system/css'
-
-import { HStack } from '@/styled-system/jsx'
-import { Text } from '@/primitives/Text'
-import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/components/Avatar'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { Participant } from 'livekit-client'
-import { isLocal } from '@/utils/livekit'
-import { RiHand } from '@remixicon/react'
-import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant.ts'
-import { Button } from '@/primitives'
-
-type HandRaisedListItemProps = {
-  participant: Participant
-}
-
-export const HandRaisedListItem = ({
-  participant,
-}: HandRaisedListItemProps) => {
-  const { t } = useTranslation('rooms')
-  const name = participant.name || participant.identity
-
-  const { lowerHandParticipant } = useLowerHandParticipant()
-
-  return (
-    <HStack
-      role="listitem"
-      justify="space-between"
-      key={participant.identity}
-      id={participant.identity}
-      className={css({
-        padding: '0.25rem 0',
-        width: 'full',
-      })}
-    >
-      <HStack>
-        <Avatar name={name} bgColor={getParticipantColor(participant)} />
-        <Text
-          variant={'sm'}
-          className={css({
-            userSelect: 'none',
-            cursor: 'default',
-            display: 'flex',
-          })}
-        >
-          <span
-            className={css({
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '120px',
-              display: 'block',
-            })}
-          >
-            {name}
-          </span>
-          {isLocal(participant) && (
-            <span
-              className={css({
-                marginLeft: '.25rem',
-                whiteSpace: 'nowrap',
-              })}
-            >
-              ({t('participants.you')})
-            </span>
-          )}
-        </Text>
-      </HStack>
-      <Button
-        square
-        invisible
-        size="sm"
-        onPress={() => lowerHandParticipant(participant)}
-        tooltip={t('participants.lowerParticipantHand', { name })}
-      >
-        <RiHand />
-      </Button>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx

@@ -1,26 +0,0 @@
-import { Button } from '@/primitives'
-import { useLowerHandParticipants } from '@/features/rooms/livekit/api/lowerHandParticipants'
-import { useTranslation } from 'react-i18next'
-import { Participant } from 'livekit-client'
-
-type LowerAllHandsButtonProps = {
-  participants: Array<Participant>
-}
-
-export const LowerAllHandsButton = ({
-  participants,
-}: LowerAllHandsButtonProps) => {
-  const { lowerHandParticipants } = useLowerHandParticipants()
-  const { t } = useTranslation('rooms')
-  return (
-    <Button
-      aria-label={t('participants.lowerParticipantsHand')}
-      size="sm"
-      fullWidth
-      variant="text"
-      onPress={() => lowerHandParticipants(participants)}
-    >
-      {t('participants.lowerParticipantsHand')}
-    </Button>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -1,162 +0,0 @@
-import { css } from '@/styled-system/css'
-
-import { HStack } from '@/styled-system/jsx'
-import { Text } from '@/primitives/Text'
-import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/components/Avatar'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { Participant, Track } from 'livekit-client'
-import { isLocal } from '@/utils/livekit'
-import {
-  useIsSpeaking,
-  useTrackMutedIndicator,
-} from '@livekit/components-react'
-import Source = Track.Source
-import { RiMicFill, RiMicOffFill } from '@remixicon/react'
-import { Button, Dialog, P } from '@/primitives'
-import { useState } from 'react'
-import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
-
-const MuteAlertDialog = ({
-  isOpen,
-  onClose,
-  onSubmit,
-  name,
-}: {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-  name: string
-}) => {
-  const { t } = useTranslation('rooms')
-  return (
-    <Dialog isOpen={isOpen} role="alertdialog">
-      <P>{t('participants.muteParticipantAlert.description', { name })}</P>
-      <HStack gap={1}>
-        <Button variant="text" size="sm" onPress={onClose}>
-          {t('participants.muteParticipantAlert.cancel')}
-        </Button>
-        <Button variant="text" size="sm" onPress={onSubmit}>
-          {t('participants.muteParticipantAlert.confirm')}
-        </Button>
-      </HStack>
-    </Dialog>
-  )
-}
-
-type MicIndicatorProps = {
-  participant: Participant
-}
-
-const MicIndicator = ({ participant }: MicIndicatorProps) => {
-  const { t } = useTranslation('rooms')
-  const { muteParticipant } = useMuteParticipant()
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Source.Microphone,
-  })
-  const isSpeaking = useIsSpeaking(participant)
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
-  const name = participant.name || participant.identity
-
-  return (
-    <>
-      <Button
-        square
-        invisible
-        size="sm"
-        tooltip={
-          isLocal(participant)
-            ? t('participants.muteYourself')
-            : t('participants.muteParticipant', {
-                name,
-              })
-        }
-        isDisabled={isMuted}
-        onPress={() =>
-          !isMuted && isLocal(participant)
-            ? muteParticipant(participant)
-            : setIsAlertOpen(true)
-        }
-      >
-        {isMuted ? (
-          <RiMicOffFill color={'gray'} />
-        ) : (
-          <RiMicFill
-            style={{
-              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
-            }}
-          />
-        )}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
-  )
-}
-
-type ParticipantListItemProps = {
-  participant: Participant
-}
-
-export const ParticipantListItem = ({
-  participant,
-}: ParticipantListItemProps) => {
-  const { t } = useTranslation('rooms')
-  const name = participant.name || participant.identity
-  return (
-    <HStack
-      role="listitem"
-      justify="space-between"
-      key={participant.identity}
-      id={participant.identity}
-      className={css({
-        padding: '0.25rem 0',
-        width: 'full',
-      })}
-    >
-      <HStack>
-        <Avatar name={name} bgColor={getParticipantColor(participant)} />
-        <Text
-          variant={'sm'}
-          className={css({
-            userSelect: 'none',
-            cursor: 'default',
-            display: 'flex',
-          })}
-        >
-          <span
-            className={css({
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '120px',
-              display: 'block',
-            })}
-          >
-            {name}
-          </span>
-          {isLocal(participant) && (
-            <span
-              className={css({
-                marginLeft: '.25rem',
-                whiteSpace: 'nowrap',
-              })}
-            >
-              ({t('participants.you')})
-            </span>
-          )}
-        </Text>
-      </HStack>
-      <HStack>
-        <MicIndicator participant={participant} />
-      </HStack>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx

@@ -1,109 +0,0 @@
-import { useState } from 'react'
-import { css } from '@/styled-system/css'
-import { ToggleButton } from 'react-aria-components'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import { RiArrowUpSLine } from '@remixicon/react'
-import { Participant } from 'livekit-client'
-import { useTranslation } from 'react-i18next'
-
-const ToggleHeader = styled(ToggleButton, {
-  base: {
-    minHeight: '40px', //fixme hardcoded value
-    paddingRight: '.5rem',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    alignItems: 'center',
-    transition: 'background 200ms',
-    borderTopRadius: '7px',
-    '&[data-hovered]': {
-      backgroundColor: '#f5f5f5',
-    },
-  },
-})
-
-const Container = styled('div', {
-  base: {
-    border: '1px solid #dadce0',
-    borderRadius: '8px',
-    margin: '0 .625rem',
-  },
-})
-
-const ListContainer = styled(VStack, {
-  base: {
-    borderTop: '1px solid #dadce0',
-    alignItems: 'start',
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    minHeight: 0,
-    flexGrow: 1,
-    display: 'flex',
-    paddingY: '0.5rem',
-    paddingX: '1rem',
-    gap: 0,
-  },
-})
-
-type ParticipantsCollapsableListProps = {
-  heading: string
-  participants: Array<Participant>
-  renderParticipant: (participant: Participant) => JSX.Element
-  action?: () => JSX.Element
-}
-
-export const ParticipantsCollapsableList = ({
-  heading,
-  participants,
-  renderParticipant,
-  action,
-}: ParticipantsCollapsableListProps) => {
-  const { t } = useTranslation('rooms')
-  const [isOpen, setIsOpen] = useState(true)
-  const label = t(`participants.collapsable.${isOpen ? 'close' : 'open'}`, {
-    name: heading,
-  })
-  return (
-    <Container>
-      <ToggleHeader
-        isSelected={isOpen}
-        aria-label={label}
-        onPress={() => setIsOpen(!isOpen)}
-        style={{
-          borderRadius: !isOpen ? '7px' : undefined,
-        }}
-      >
-        <HStack
-          justify="space-between"
-          className={css({
-            margin: '0 1.25rem',
-            width: '100%',
-          })}
-        >
-          <div
-            className={css({
-              fontSize: '1rem',
-            })}
-          >
-            {heading}
-          </div>
-          <div>{participants?.length || 0}</div>
-        </HStack>
-        <RiArrowUpSLine
-          size={32}
-          style={{
-            transform: isOpen ? 'rotate(-180deg)' : undefined,
-            transition: 'transform 200ms',
-          }}
-        />
-      </ToggleHeader>
-      {isOpen && (
-        <ListContainer>
-          {action && action()}
-          {participants.map((participant) => renderParticipant(participant))}
-        </ListContainer>
-      )}
-    </Container>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -1,118 +0,0 @@
-import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
-
-import { Heading } from 'react-aria-components'
-import { Box, Button, Div, H } from '@/primitives'
-import { text } from '@/primitives/Text'
-import { RiCloseLine } from '@remixicon/react'
-import { participantsStore } from '@/stores/participants'
-import { useTranslation } from 'react-i18next'
-import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
-import { ParticipantListItem } from '@/features/rooms/livekit/components/controls/Participants/ParticipantListItem'
-import { ParticipantsCollapsableList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '@/features/rooms/livekit/components/controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '@/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton'
-
-// TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
-export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms')
-
-  // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
-  // because the 'useLocalParticipant' hook does not update the participant's information when their
-  // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
-  const participants = useParticipants({
-    updateOnlyOn: allParticipantRoomEvents,
-  })
-
-  const sortedRemoteParticipants = participants
-    .slice(1)
-    .sort((participantA, participantB) => {
-      const nameA = participantA.name || participantA.identity
-      const nameB = participantB.name || participantB.identity
-      return nameA.localeCompare(nameB)
-    })
-
-  const sortedParticipants = [
-    participants[0], // first participant returned by the hook, is always the local one
-    ...sortedRemoteParticipants,
-  ]
-
-  const raisedHandParticipants = participants.filter((participant) => {
-    const data = JSON.parse(participant.metadata || '{}')
-    return data.raised
-  })
-
-  // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
-  return (
-    <Box
-      size="sm"
-      minWidth="360px"
-      className={css({
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        margin: '1.5rem 1.5rem 1.5rem 0',
-        padding: 0,
-        gap: 0,
-      })}
-    >
-      <Heading
-        slot="title"
-        level={1}
-        className={text({ variant: 'h2' })}
-        style={{
-          paddingLeft: '1.5rem',
-          paddingTop: '1rem',
-        }}
-      >
-        {t('participants.heading')}
-      </Heading>
-      <Div position="absolute" top="5" right="5">
-        <Button
-          invisible
-          size="xs"
-          onPress={() => (participantsStore.showParticipants = false)}
-          aria-label={t('participants.closeButton')}
-          tooltip={t('participants.closeButton')}
-        >
-          <RiCloseLine />
-        </Button>
-      </Div>
-      <Div overflowY="scroll">
-        <H
-          lvl={2}
-          className={css({
-            fontSize: '0.875rem',
-            fontWeight: 'bold',
-            color: '#5f6368',
-            padding: '0 1.5rem',
-            marginBottom: '0.83em',
-          })}
-        >
-          {t('participants.subheading').toUpperCase()}
-        </H>
-        {raisedHandParticipants.length > 0 && (
-          <Div marginBottom=".9375rem">
-            <ParticipantsCollapsableList
-              heading={t('participants.raisedHands')}
-              participants={raisedHandParticipants}
-              renderParticipant={(participant) => (
-                <HandRaisedListItem participant={participant} />
-              )}
-              action={() => (
-                <LowerAllHandsButton participants={raisedHandParticipants} />
-              )}
-            />
-          </Div>
-        )}
-        <ParticipantsCollapsableList
-          heading={t('participants.contributors')}
-          participants={sortedParticipants}
-          renderParticipant={(participant) => (
-            <ParticipantListItem participant={participant} />
-          )}
-        />
-      </Div>
-    </Box>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -1,67 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
-import { ToggleButton } from '@/primitives'
-import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
-import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
-
-export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms')
-
-  /**
-   * Context could not be used due to inconsistent refresh behavior.
-   * The 'numParticipant' property on the room only updates when the room's metadata changes,
-   * resulting in a delay compared to the participant list's actual refresh rate.
-   */
-  const participants = useParticipants()
-  const numParticipants = participants?.length
-
-  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
-
-  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={t(`controls.participants.${tooltipLabel}`)}
-        tooltip={t(`controls.participants.${tooltipLabel}`)}
-        isSelected={isParticipantsOpen}
-        onPress={() => toggleParticipants()}
-      >
-        <RiGroupLine />
-      </ToggleButton>
-      <div
-        className={css({
-          position: 'absolute',
-          top: '-.25rem',
-          right: '-.25rem',
-          width: '1.25rem',
-          height: '1.25rem',
-          backgroundColor: 'gray',
-          borderRadius: '50%',
-          color: 'white',
-          fontSize: '0.75rem',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 1,
-          userSelect: 'none',
-        })}
-      >
-        {numParticipants < 100 ? (
-          numParticipants || 1
-        ) : (
-          <RiInfinityLine size={10} />
-        )}
-      </div>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/StartMediaButton.tsx

@@ -1,52 +0,0 @@
-import {
-  useRoomContext,
-  useStartAudio,
-  useStartVideo,
-} from '@livekit/components-react'
-import React from 'react'
-
-/** @public */
-export interface AllowMediaPlaybackProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  label?: string
-}
-
-/**
- * The `StartMediaButton` component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies.
- * To start media playback, the user must perform a user-initiated event such as clicking this button.
- * As soon as media playback starts, the button hides itself again.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <StartMediaButton label="Click to allow media playback" />
- * </LiveKitRoom>
- * ```
- *
- * @see Autoplay policy on MDN web docs: {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy}
- * @public
- */
-export const StartMediaButton: (
-  props: AllowMediaPlaybackProps & React.RefAttributes<HTMLButtonElement>
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
-  HTMLButtonElement,
-  AllowMediaPlaybackProps
->(function StartMediaButton({ label, ...props }: AllowMediaPlaybackProps, ref) {
-  const room = useRoomContext()
-  const { mergedProps: audioProps, canPlayAudio } = useStartAudio({
-    room,
-    props,
-  })
-  const { mergedProps, canPlayVideo } = useStartVideo({
-    room,
-    props: audioProps,
-  })
-  const { style, ...restProps } = mergedProps
-  style.display = canPlayAudio && canPlayVideo ? 'none' : 'block'
-
-  return (
-    <button ref={ref} style={style} {...restProps}>
-      {label ?? `Start ${!canPlayAudio ? 'Audio' : 'Video'}`}
-    </button>
-  )
-})

src/frontend/src/features/rooms/livekit/constants/events.ts

@@ -1,33 +0,0 @@
-import { RoomEvent } from 'livekit-client'
-
-// Issue: 'allRemoteParticipantRoomEvents' is not exposed or importable. One event is missing
-// to trigger the real-time update of participants when they change their name.
-// This code is duplicated from LiveKit.
-export const allRemoteParticipantRoomEvents = [
-  RoomEvent.ConnectionStateChanged,
-  RoomEvent.RoomMetadataChanged,
-
-  RoomEvent.ActiveSpeakersChanged,
-  RoomEvent.ConnectionQualityChanged,
-
-  RoomEvent.ParticipantConnected,
-  RoomEvent.ParticipantDisconnected,
-  RoomEvent.ParticipantPermissionsChanged,
-  RoomEvent.ParticipantMetadataChanged,
-  RoomEvent.ParticipantNameChanged, // This element is missing in LiveKit and causes problems
-
-  RoomEvent.TrackMuted,
-  RoomEvent.TrackUnmuted,
-  RoomEvent.TrackPublished,
-  RoomEvent.TrackUnpublished,
-  RoomEvent.TrackStreamStateChanged,
-  RoomEvent.TrackSubscriptionFailed,
-  RoomEvent.TrackSubscriptionPermissionChanged,
-  RoomEvent.TrackSubscriptionStatusChanged,
-]
-
-export const allParticipantRoomEvents = [
-  ...allRemoteParticipantRoomEvents,
-  RoomEvent.LocalTrackPublished,
-  RoomEvent.LocalTrackUnpublished,
-]

src/frontend/src/features/rooms/livekit/hooks/useMediaQuery.ts

@@ -1,46 +0,0 @@
-import * as React from 'react'
-/**
- * Implementation used from https://github.com/juliencrn/usehooks-ts
- *
- * @internal
- */
-export function useMediaQuery(query: string): boolean {
-  const getMatches = (query: string): boolean => {
-    // Prevents SSR issues
-    if (typeof window !== 'undefined') {
-      return window.matchMedia(query).matches
-    }
-    return false
-  }
-
-  const [matches, setMatches] = React.useState<boolean>(getMatches(query))
-
-  function handleChange() {
-    setMatches(getMatches(query))
-  }
-
-  React.useEffect(() => {
-    const matchMedia = window.matchMedia(query)
-
-    // Triggered at the first client-side load and if query changes
-    handleChange()
-
-    // Listen matchMedia
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange)
-    } else {
-      matchMedia.addEventListener('change', handleChange)
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange)
-      } else {
-        matchMedia.removeEventListener('change', handleChange)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query])
-
-  return matches
-}

src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx

@@ -1,22 +0,0 @@
-import { LocalParticipant, Participant } from 'livekit-client'
-import { useParticipantInfo } from '@livekit/components-react'
-import { isLocal } from '@/utils/livekit'
-
-type useRaisedHandProps = {
-  participant: Participant
-}
-
-export function useRaisedHand({ participant }: useRaisedHandProps) {
-  const { metadata } = useParticipantInfo({ participant })
-  const parsedMetadata = JSON.parse(metadata || '{}')
-
-  const toggleRaisedHand = () => {
-    if (isLocal(participant)) {
-      parsedMetadata.raised = !parsedMetadata.raised
-      const localParticipant = participant as LocalParticipant
-      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
-    }
-  }
-
-  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
-}

src/frontend/src/features/rooms/livekit/hooks/useResizeObserver.ts

@@ -1,127 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import * as React from 'react'
-
-const useLatest = <T>(current: T) => {
-  const storedValue = React.useRef(current)
-  React.useEffect(() => {
-    storedValue.current = current
-  })
-  return storedValue
-}
-
-/**
- * A React hook that fires a callback whenever ResizeObserver detects a change to its size
- * code extracted from https://github.com/jaredLunde/react-hook/blob/master/packages/resize-observer/src/index.tsx in order to not include the polyfill for resize-observer
- *
- * @internal
- */
-export function useResizeObserver<T extends HTMLElement>(
-  target: React.RefObject<T>,
-  callback: UseResizeObserverCallback
-) {
-  const resizeObserver = getResizeObserver()
-  const storedCallback = useLatest(callback)
-
-  React.useLayoutEffect(() => {
-    let didUnsubscribe = false
-
-    const targetEl = target.current
-    if (!targetEl) return
-
-    function cb(entry: ResizeObserverEntry, observer: ResizeObserver) {
-      if (didUnsubscribe) return
-      storedCallback.current(entry, observer)
-    }
-
-    resizeObserver?.subscribe(targetEl as HTMLElement, cb)
-
-    return () => {
-      didUnsubscribe = true
-      resizeObserver?.unsubscribe(targetEl as HTMLElement, cb)
-    }
-  }, [target.current, resizeObserver, storedCallback])
-
-  return resizeObserver?.observer
-}
-
-function createResizeObserver() {
-  let ticking = false
-  let allEntries: ResizeObserverEntry[] = []
-
-  const callbacks: Map<unknown, Array<UseResizeObserverCallback>> = new Map()
-
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  const observer = new ResizeObserver(
-    (entries: ResizeObserverEntry[], obs: ResizeObserver) => {
-      allEntries = allEntries.concat(entries)
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          const triggered = new Set<Element>()
-          for (let i = 0; i < allEntries.length; i++) {
-            if (triggered.has(allEntries[i].target)) continue
-            triggered.add(allEntries[i].target)
-            const cbs = callbacks.get(allEntries[i].target)
-            cbs?.forEach((cb) => cb(allEntries[i], obs))
-          }
-          allEntries = []
-          ticking = false
-        })
-      }
-      ticking = true
-    }
-  )
-
-  return {
-    observer,
-    subscribe(target: HTMLElement, callback: UseResizeObserverCallback) {
-      observer.observe(target)
-      const cbs = callbacks.get(target) ?? []
-      cbs.push(callback)
-      callbacks.set(target, cbs)
-    },
-    unsubscribe(target: HTMLElement, callback: UseResizeObserverCallback) {
-      const cbs = callbacks.get(target) ?? []
-      if (cbs.length === 1) {
-        observer.unobserve(target)
-        callbacks.delete(target)
-        return
-      }
-      const cbIndex = cbs.indexOf(callback)
-      if (cbIndex !== -1) cbs.splice(cbIndex, 1)
-      callbacks.set(target, cbs)
-    },
-  }
-}
-
-let _resizeObserver: ReturnType<typeof createResizeObserver>
-
-const getResizeObserver = () =>
-  !_resizeObserver
-    ? (_resizeObserver = createResizeObserver())
-    : _resizeObserver
-
-export type UseResizeObserverCallback = (
-  entry: ResizeObserverEntry,
-  observer: ResizeObserver
-) => unknown
-
-export const useSize = (target: React.RefObject<HTMLDivElement>) => {
-  const [size, setSize] = React.useState({ width: 0, height: 0 })
-  React.useLayoutEffect(() => {
-    if (target.current) {
-      const { width, height } = target.current.getBoundingClientRect()
-      setSize({ width, height })
-    }
-  }, [target.current])
-
-  const resizeCallback = React.useCallback(
-    (entry: ResizeObserverEntry) => setSize(entry.contentRect),
-    []
-  )
-  // Where the magic happens
-  useResizeObserver(target, resizeCallback)
-  return size
-}

src/frontend/src/features/rooms/livekit/hooks/useRoomData.ts

@@ -1,12 +0,0 @@
-import { ApiRoom } from '@/features/rooms/api/ApiRoom'
-import { useRoomContext } from '@livekit/components-react'
-import { useParams } from 'wouter'
-import { keys } from '@/api/queryKeys'
-import { queryClient } from '@/api/queryClient'
-
-export const useRoomData = (): ApiRoom | undefined => {
-  const room = useRoomContext()
-  const { roomId } = useParams()
-  const queryKey = [keys.room, roomId, room.localParticipant.name]
-  return queryClient.getQueryData<ApiRoom>(queryKey)
-}

src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts

@@ -1,34 +0,0 @@
-import { useLayoutContext } from '@livekit/components-react'
-import { useSnapshot } from 'valtio'
-import { participantsStore } from '@/stores/participants.ts'
-
-export const useWidgetInteraction = () => {
-  const { dispatch, state } = useLayoutContext().widget
-
-  const participantsSnap = useSnapshot(participantsStore)
-  const isParticipantsOpen = participantsSnap.showParticipants
-
-  const toggleParticipants = () => {
-    if (dispatch && state?.showChat) {
-      dispatch({ msg: 'toggle_chat' })
-    }
-    participantsStore.showParticipants = !isParticipantsOpen
-  }
-
-  const toggleChat = () => {
-    if (isParticipantsOpen) {
-      participantsStore.showParticipants = false
-    }
-    if (dispatch) {
-      dispatch({ msg: 'toggle_chat' })
-    }
-  }
-
-  return {
-    toggleParticipants,
-    toggleChat,
-    isChatOpen: state?.showChat,
-    unreadMessages: state?.unreadMessages,
-    isParticipantsOpen,
-  }
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -1,198 +0,0 @@
-import { Track } from 'livekit-client'
-import * as React from 'react'
-
-import { supportsScreenSharing } from '@livekit/components-core'
-
-import {
-  DisconnectButton,
-  LeaveIcon,
-  MediaDeviceMenu,
-  TrackToggle,
-  useMaybeLayoutContext,
-  usePersistentUserChoices,
-} from '@livekit/components-react'
-
-import { mergeProps } from '@/utils/mergeProps.ts'
-import { StartMediaButton } from '../components/controls/StartMediaButton'
-import { useMediaQuery } from '../hooks/useMediaQuery'
-import { useTranslation } from 'react-i18next'
-import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
-import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
-
-/** @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 enables 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({
-  variation,
-  saveUserChoices = true,
-  onDeviceError,
-  ...props
-}: ControlBarProps) {
-  const { t } = useTranslation('rooms')
-  const [isChatOpen, setIsChatOpen] = React.useState(false)
-  const layoutContext = useMaybeLayoutContext()
-  React.useEffect(() => {
-    if (layoutContext?.widget.state?.showChat !== undefined) {
-      setIsChatOpen(layoutContext?.widget.state?.showChat)
-    }
-  }, [layoutContext?.widget.state?.showChat])
-
-  const isTooLittleSpace = useMediaQuery(
-    `(max-width: ${isChatOpen ? 1000 : 760}px)`
-  )
-
-  const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
-  variation ??= defaultVariation
-
-  const showIcon = React.useMemo(
-    () => variation === 'minimal' || variation === 'verbose',
-    [variation]
-  )
-  const showText = React.useMemo(
-    () => variation === 'textOnly' || variation === 'verbose',
-    [variation]
-  )
-
-  const browserSupportsScreenSharing = supportsScreenSharing()
-
-  const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false)
-
-  const onScreenShareChange = React.useCallback(
-    (enabled: boolean) => {
-      setIsScreenShareEnabled(enabled)
-    },
-    [setIsScreenShareEnabled]
-  )
-
-  const htmlProps = mergeProps({ className: 'lk-control-bar' }, props)
-
-  const {
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
-
-  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]
-  )
-
-  return (
-    <div {...htmlProps}>
-      <div className="lk-button-group">
-        <TrackToggle
-          source={Track.Source.Microphone}
-          showIcon={showIcon}
-          onChange={microphoneOnChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.Microphone, error })
-          }
-        >
-          {showText && t('controls.microphone')}
-        </TrackToggle>
-        <div className="lk-button-group-menu">
-          <MediaDeviceMenu
-            kind="audioinput"
-            onActiveDeviceChange={(_kind, deviceId) =>
-              saveAudioInputDeviceId(deviceId ?? '')
-            }
-          />
-        </div>
-      </div>
-      <div className="lk-button-group">
-        <TrackToggle
-          source={Track.Source.Camera}
-          showIcon={showIcon}
-          onChange={cameraOnChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.Camera, error })
-          }
-        >
-          {showText && t('controls.camera')}
-        </TrackToggle>
-        <div className="lk-button-group-menu">
-          <MediaDeviceMenu
-            kind="videoinput"
-            onActiveDeviceChange={(_kind, deviceId) =>
-              saveVideoInputDeviceId(deviceId ?? '')
-            }
-          />
-        </div>
-      </div>
-      {browserSupportsScreenSharing && (
-        <TrackToggle
-          source={Track.Source.ScreenShare}
-          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
-          showIcon={showIcon}
-          onChange={onScreenShareChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.ScreenShare, error })
-          }
-        >
-          {showText &&
-            t(
-              isScreenShareEnabled
-                ? 'controls.stopScreenShare'
-                : 'controls.shareScreen'
-            )}
-        </TrackToggle>
-      )}
-      <HandToggle />
-      <ChatToggle />
-      <ParticipantsToggle />
-      <OptionsButton />
-      <DisconnectButton>
-        {showIcon && <LeaveIcon />}
-        {showText && t('controls.leave')}
-      </DisconnectButton>
-      <StartMediaButton />
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -1,238 +0,0 @@
-import type {
-  MessageDecoder,
-  MessageEncoder,
-  TrackReferenceOrPlaceholder,
-  WidgetState,
-} from '@livekit/components-core'
-import {
-  isEqualTrackRef,
-  isTrackReference,
-  isWeb,
-  log,
-} from '@livekit/components-core'
-import { RoomEvent, Track } from 'livekit-client'
-import * as React from 'react'
-
-import {
-  CarouselLayout,
-  ConnectionStateToast,
-  FocusLayoutContainer,
-  GridLayout,
-  LayoutContextProvider,
-  RoomAudioRenderer,
-  MessageFormatter,
-  usePinnedTracks,
-  useTracks,
-  useCreateLayoutContext,
-  Chat,
-} from '@livekit/components-react'
-
-import { ControlBar } from './ControlBar'
-import { styled } from '@/styled-system/jsx'
-import { cva } from '@/styled-system/css'
-import { ParticipantsList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsList'
-import { useSnapshot } from 'valtio'
-import { participantsStore } from '@/stores/participants'
-import { FocusLayout } from '../components/FocusLayout'
-import { ParticipantTile } from '../components/ParticipantTile'
-import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
-import { RecordingIndicator } from '@/features/rooms/livekit/components/RecordingIndicator.tsx'
-
-const LayoutWrapper = styled(
-  'div',
-  cva({
-    base: {
-      position: 'relative',
-      display: 'flex',
-      width: '100%',
-      height: 'calc(100% - var(--lk-control-bar-height))',
-    },
-  })
-)
-
-/**
- * @public
- */
-export interface VideoConferenceProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  chatMessageFormatter?: MessageFormatter
-  chatMessageEncoder?: MessageEncoder
-  chatMessageDecoder?: MessageDecoder
-  /** @alpha */
-  SettingsComponent?: React.ComponentType
-}
-
-/**
- * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
- * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
- * of participants, basic non-persistent chat, screen sharing, and more.
- *
- * @remarks
- * The component is implemented with other LiveKit components like `FocusContextProvider`,
- * `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
- * You can use this components as a starting point for your own custom video conferencing application.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <VideoConference />
- * <LiveKitRoom>
- * ```
- * @public
- */
-export function VideoConference({
-  chatMessageFormatter,
-  chatMessageDecoder,
-  chatMessageEncoder,
-  ...props
-}: VideoConferenceProps) {
-  const [widgetState, setWidgetState] = React.useState<WidgetState>({
-    showChat: false,
-    unreadMessages: 0,
-    showSettings: false,
-  })
-  const lastAutoFocusedScreenShareTrack =
-    React.useRef<TrackReferenceOrPlaceholder | null>(null)
-
-  const tracks = useTracks(
-    [
-      { source: Track.Source.Camera, withPlaceholder: true },
-      { source: Track.Source.ScreenShare, withPlaceholder: false },
-    ],
-    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
-  )
-
-  const widgetUpdate = (state: WidgetState) => {
-    log.debug('updating widget state', state)
-    setWidgetState(state)
-  }
-
-  const layoutContext = useCreateLayoutContext()
-
-  const screenShareTracks = tracks
-    .filter(isTrackReference)
-    .filter((track) => track.publication.source === Track.Source.ScreenShare)
-
-  const focusTrack = usePinnedTracks(layoutContext)?.[0]
-  const carouselTracks = tracks.filter(
-    (track) => !isEqualTrackRef(track, focusTrack)
-  )
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
-  React.useEffect(() => {
-    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
-    if (
-      screenShareTracks.some((track) => track.publication.isSubscribed) &&
-      lastAutoFocusedScreenShareTrack.current === null
-    ) {
-      log.debug('Auto set screen share focus:', {
-        newScreenShareTrack: screenShareTracks[0],
-      })
-      layoutContext.pin.dispatch?.({
-        msg: 'set_pin',
-        trackReference: screenShareTracks[0],
-      })
-      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
-    } else if (
-      lastAutoFocusedScreenShareTrack.current &&
-      !screenShareTracks.some(
-        (track) =>
-          track.publication.trackSid ===
-          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
-      )
-    ) {
-      log.debug('Auto clearing screen share focus.')
-      layoutContext.pin.dispatch?.({ msg: 'clear_pin' })
-      lastAutoFocusedScreenShareTrack.current = null
-    }
-    if (focusTrack && !isTrackReference(focusTrack)) {
-      const updatedFocusTrack = tracks.find(
-        (tr) =>
-          tr.participant.identity === focusTrack.participant.identity &&
-          tr.source === focusTrack.source
-      )
-      if (
-        updatedFocusTrack !== focusTrack &&
-        isTrackReference(updatedFocusTrack)
-      ) {
-        layoutContext.pin.dispatch?.({
-          msg: 'set_pin',
-          trackReference: updatedFocusTrack,
-        })
-      }
-    }
-  }, [
-    screenShareTracks
-      .map(
-        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
-      )
-      .join(),
-    focusTrack?.publication?.trackSid,
-    tracks,
-  ])
-  /* eslint-enable react-hooks/exhaustive-deps */
-
-  const participantsSnap = useSnapshot(participantsStore)
-  const showParticipants = participantsSnap.showParticipants
-
-  return (
-    <div className="lk-video-conference" {...props}>
-      {isWeb() && (
-        <LayoutContextProvider
-          value={layoutContext}
-          // onPinChange={handleFocusStateChange}
-          onWidgetChange={widgetUpdate}
-        >
-          <div className="lk-video-conference-inner">
-            <RecordingIndicator />
-            <LayoutWrapper>
-              <div
-                style={{ display: 'flex', position: 'relative', width: '100%' }}
-              >
-                {!focusTrack ? (
-                  <div
-                    className="lk-grid-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <GridLayout tracks={tracks}>
-                      <ParticipantTile />
-                    </GridLayout>
-                  </div>
-                ) : (
-                  <div
-                    className="lk-focus-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <FocusLayoutContainer>
-                      <CarouselLayout
-                        tracks={carouselTracks}
-                        style={{
-                          minWidth: '200px',
-                        }}
-                      >
-                        <ParticipantTile />
-                      </CarouselLayout>
-                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                    </FocusLayoutContainer>
-                  </div>
-                )}
-                <MainNotificationToast />
-              </div>
-              <Chat
-                style={{ display: widgetState.showChat ? 'grid' : 'none' }}
-                messageFormatter={chatMessageFormatter}
-                messageEncoder={chatMessageEncoder}
-                messageDecoder={chatMessageDecoder}
-              />
-              {showParticipants && <ParticipantsList />}
-            </LayoutWrapper>
-            <ControlBar />
-          </div>
-        </LayoutContextProvider>
-      )}
-      <RoomAudioRenderer />
-      <ConnectionStateToast />
-    </div>
-  )
-}

src/frontend/src/features/rooms/routes/Room.tsx

@@ -1,37 +1,29 @@
-import { useEffect, useState } from 'react'
-import {
-  usePersistentUserChoices,
-  type LocalUserChoices,
-} from '@livekit/components-react'
+import { useState } from 'react'
 import { 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 { HomemadeJoin } from '../components/HomemadeJoin'
+import { settingsStore, type SettingsState } from '@/features/settings'
+import { useSnapshot } from 'valtio'
 
 export const Room = () => {
   const { isLoggedIn } = useUser()
-  const { userChoices: existingUserChoices } = usePersistentUserChoices()
-  const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+  const settingsSnap = useSnapshot(settingsStore)
+  const existingUserConfig = {
+    username: settingsSnap.username,
+    devices: settingsSnap.devices,
+  }
+  const [userConfig, setUserConfig] = useState<null | {
+    username: SettingsState['username']
+    devices: SettingsState['devices']
+  }>(null)
 
   const { roomId } = useParams()
   const initialRoomData = history.state?.initialRoomData
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
-  const clearRouterState = () => {
-    if (window?.history?.state) {
-      window.history.replaceState({}, '')
-    }
-  }
-
-  useEffect(() => {
-    window.addEventListener('beforeunload', clearRouterState)
-    return () => {
-      window.removeEventListener('beforeunload', clearRouterState)
-    }
-  }, [])
-
   if (!roomId) {
     return <ErrorScreen />
   }
@@ -39,7 +31,7 @@ export const Room = () => {
   if (!userConfig && !skipJoinScreen) {
     return (
       <UserAware>
-        <Join onSubmit={setUserConfig} />
+        <HomemadeJoin onSubmit={setUserConfig} />
       </UserAware>
     )
   }
@@ -51,7 +43,7 @@ export const Room = () => {
         roomId={roomId}
         mode={mode}
         userConfig={{
-          ...existingUserChoices,
+          ...existingUserConfig,
           ...userConfig,
         }}
       />

src/frontend/src/features/rooms/utils/getParticipantColor.ts

@@ -1,11 +0,0 @@
-import { Participant } from 'livekit-client'
-
-export const getParticipantColor = (
-  participant: Participant
-): undefined | string => {
-  const { metadata } = participant
-  if (!metadata) {
-    return
-  }
-  return JSON.parse(metadata)['color']
-}

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -1,38 +1,12 @@
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives'
-import { authUrl, logoutUrl, useUser } from '@/features/auth'
+import { Dialog, Field, H } from '@/primitives'
 
-export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
-
-export const SettingsDialog = (props: SettingsDialogProps) => {
+export const SettingsDialog = () => {
   const { t, i18n } = useTranslation('settings')
-  const { user, isLoggedIn } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
   return (
-    <Dialog title={t('dialog.heading')} {...props}>
-      <H lvl={2}>{t('account.heading')}</H>
-      {isLoggedIn ? (
-        <>
-          <P>
-            <Trans
-              i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.email }}
-              components={[<Badge />]}
-            />
-          </P>
-          <P>
-            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
-          </P>
-        </>
-      ) : (
-        <>
-          <P>{t('account.youAreNotLoggedIn')}</P>
-          <P>
-            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
-          </P>
-        </>
-      )}
+    <Dialog title={t('dialog.heading')}>
       <H lvl={2}>{t('language.heading')}</H>
       <Field
         type="select"

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -1,94 +0,0 @@
-import { Dialog, type DialogProps } from '@/primitives'
-import { Tab, Tabs, TabList } from '@/primitives/Tabs.tsx'
-import { css } from '@/styled-system/css'
-import { text } from '@/primitives/Text.tsx'
-import { Heading } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import {
-  RiAccountCircleLine,
-  RiSettings3Line,
-  RiSpeakerLine,
-} from '@remixicon/react'
-import { AccountTab } from './tabs/AccountTab'
-import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
-import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { useRef } from 'react'
-
-const tabsStyle = css({
-  maxHeight: '40.625rem', // fixme size copied from meet settings modal
-  width: '50rem', // fixme size copied from meet settings modal
-  marginY: '-1rem', // fixme hacky solution to cancel modal padding
-  maxWidth: '100%',
-  overflow: 'hidden',
-  height: 'calc(100vh - 2rem)',
-})
-
-const tabListContainerStyle = css({
-  display: 'flex',
-  flexDirection: 'column',
-  borderRight: '1px solid lightGray', // fixme poor color management
-  paddingY: '1rem',
-  paddingRight: '1.5rem',
-})
-
-const tabPanelContainerStyle = css({
-  display: 'flex',
-  flexGrow: '1',
-  marginTop: '3.5rem',
-  minWidth: 0,
-})
-
-export type SettingsDialogExtended = Pick<
-  DialogProps,
-  'isOpen' | 'onOpenChange'
->
-
-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
-
-  return (
-    <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
-      <Tabs orientation="vertical" className={tabsStyle}>
-        <div
-          className={tabListContainerStyle}
-          style={{
-            flex: isWideScreen ? '0 0 16rem' : undefined,
-            paddingTop: !isWideScreen ? '64px' : undefined,
-            paddingRight: !isWideScreen ? '1rem' : undefined,
-          }}
-        >
-          {isWideScreen && (
-            <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
-              {t('dialog.heading')}
-            </Heading>
-          )}
-          <TabList border={false} aria-label="Chat log orientation example">
-            <Tab icon highlight id="1">
-              <RiAccountCircleLine />
-              {isWideScreen && t('tabs.account')}
-            </Tab>
-            <Tab icon highlight id="2">
-              <RiSpeakerLine />
-              {isWideScreen && t('tabs.audio')}
-            </Tab>
-            <Tab icon highlight id="3">
-              <RiSettings3Line />
-              {isWideScreen && t('tabs.general')}
-            </Tab>
-          </TabList>
-        </div>
-        <div className={tabPanelContainerStyle}>
-          <AccountTab id="1" onOpenChange={props.onOpenChange} />
-          <AudioTab id="2" />
-          <GeneralTab id="3" />
-        </div>
-      </Tabs>
-    </Dialog>
-  )
-}

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -1,81 +0,0 @@
-import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
-import { Trans, useTranslation } from 'react-i18next'
-import {
-  usePersistentUserChoices,
-  useRoomContext,
-} from '@livekit/components-react'
-import { authUrl, logoutUrl, useUser } from '@/features/auth'
-import { css } from '@/styled-system/css'
-import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import { HStack } from '@/styled-system/jsx'
-import { useState } from 'react'
-
-export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
-  Pick<TabPanelProps, 'id'>
-
-export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
-  const { t } = useTranslation('settings')
-  const { saveUsername } = usePersistentUserChoices()
-  const room = useRoomContext()
-  const { user, isLoggedIn } = useUser()
-  const [name, setName] = useState(room?.localParticipant.name || '')
-
-  const handleOnSubmit = () => {
-    if (room) room.localParticipant.setName(name)
-    saveUsername(name)
-    if (onOpenChange) onOpenChange(false)
-  }
-  const handleOnCancel = () => {
-    if (onOpenChange) onOpenChange(false)
-  }
-
-  return (
-    <TabPanel padding={'md'} flex id={id}>
-      <H lvl={2}>{t('account.heading')}</H>
-      <Field
-        type="text"
-        label={t('account.nameLabel')}
-        value={name}
-        onChange={setName}
-        validate={(value) => {
-          return !value ? <p>{'Votre Nom ne peut pas être vide'}</p> : null
-        }}
-      />
-      <H lvl={2}>{t('account.authentication')}</H>
-      {isLoggedIn ? (
-        <>
-          <P>
-            <Trans
-              i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.email }}
-              components={[<Badge />]}
-            />
-          </P>
-          <P>
-            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
-          </P>
-        </>
-      ) : (
-        <>
-          <P>{t('account.youAreNotLoggedIn')}</P>
-          <P>
-            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
-          </P>
-        </>
-      )}
-      <HStack
-        className={css({
-          marginTop: 'auto',
-          marginLeft: 'auto',
-        })}
-      >
-        <Button onPress={handleOnCancel}>
-          {t('cancel', { ns: 'global' })}
-        </Button>
-        <Button variant={'primary'} onPress={handleOnSubmit}>
-          {t('submit', { ns: 'global' })}
-        </Button>
-      </HStack>
-    </TabPanel>
-  )
-}

src/frontend/src/features/settings/components/tabs/AudioTab.tsx

@@ -1,157 +0,0 @@
-import { DialogProps, Field, H } from '@/primitives'
-
-import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import {
-  useIsSpeaking,
-  useMediaDeviceSelect,
-  useRoomContext,
-} from '@livekit/components-react'
-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 { ReactNode } from 'react'
-
-type RowWrapperProps = {
-  heading: string
-  children: ReactNode[]
-}
-
-const RowWrapper = ({ heading, children }: RowWrapperProps) => {
-  return (
-    <>
-      <H lvl={2}>{heading}</H>
-      <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>
-    </>
-  )
-}
-
-export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
-  Pick<TabPanelProps, 'id'>
-
-type DeviceItems = Array<{ value: string; label: string }>
-
-export const AudioTab = ({ id }: AudioTabProps) => {
-  const { t } = useTranslation('settings')
-  const { localParticipant } = useRoomContext()
-
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  const {
-    devices: devicesOut,
-    activeDeviceId: activeDeviceIdOut,
-    setActiveMediaDevice: setActiveMediaDeviceOut,
-  } = useMediaDeviceSelect({ kind: 'audiooutput' })
-
-  const {
-    devices: devicesIn,
-    activeDeviceId: activeDeviceIdIn,
-    setActiveMediaDevice: setActiveMediaDeviceIn,
-  } = useMediaDeviceSelect({ kind: 'audioinput' })
-
-  const itemsOut: DeviceItems = devicesOut.map((d) => ({
-    value: d.deviceId,
-    label: d.label,
-  }))
-
-  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 microphone permissions
-  // may raise an error. As a workaround, we infer microphone permission status by checking if the list of audio input
-  // devices (devicesIn) is non-empty. If the list has one or more devices, we assume the user has granted microphone access.
-  const isMicEnabled = devicesIn?.length > 0
-
-  const disabledProps = isMicEnabled
-    ? {}
-    : {
-        placeholder: t('audio.permissionsRequired'),
-        isDisabled: true,
-        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
-  }
-
-  return (
-    <TabPanel padding={'md'} flex id={id}>
-      <RowWrapper heading={t('audio.microphone.heading')}>
-        <Field
-          type="select"
-          label={t('audio.microphone.label')}
-          items={itemsIn}
-          defaultSelectedKey={
-            activeDeviceIdIn || getDefaultSelectedKey(itemsIn)
-          }
-          onSelectionChange={(key) => setActiveMediaDeviceIn(key as string)}
-          {...disabledProps}
-          style={{
-            width: '100%',
-          }}
-        />
-        <>
-          {localParticipant.isMicrophoneEnabled ? (
-            <ActiveSpeaker isSpeaking={isSpeaking} />
-          ) : (
-            <span>Micro désactivé</span>
-          )}
-        </>
-      </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() && (
-        <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)
-            }
-            {...disabledProps}
-            style={{
-              minWidth: 0,
-            }}
-          />
-          <SoundTester />
-        </RowWrapper>
-      )}
-    </TabPanel>
-  )
-}

src/frontend/src/features/settings/components/tabs/GeneralTab.tsx

@@ -1,26 +0,0 @@
-import { Field, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-
-export type GeneralTabProps = Pick<TabPanelProps, 'id'>
-
-export const GeneralTab = ({ id }: GeneralTabProps) => {
-  const { t, i18n } = useTranslation('settings')
-  const { languagesList, currentLanguage } = useLanguageLabels()
-
-  return (
-    <TabPanel padding={'md'} flex id={id}>
-      <H lvl={2}>{t('language.heading')}</H>
-      <Field
-        type="select"
-        label={t('language.label')}
-        items={languagesList}
-        defaultSelectedKey={currentLanguage.key}
-        onSelectionChange={(lang) => {
-          i18n.changeLanguage(lang as string)
-        }}
-      />
-    </TabPanel>
-  )
-}

src/frontend/src/features/settings/index.ts

@@ -1,2 +1,4 @@
 export { SettingsButton } from './components/SettingsButton'
 export { SettingsDialog } from './components/SettingsDialog'
+export { settingsStore } from './stores/settings'
+export { type SettingsState } from './stores/settings'

src/frontend/src/features/settings/stores/settings.ts

@@ -0,0 +1,50 @@
+import { proxy, subscribe } from 'valtio'
+import { devtools } from 'valtio/utils'
+
+export type SettingsState = {
+  username: string | undefined
+  devices: {
+    /**
+     * MediaDeviceInfo id
+     */
+    speakerDeviceId: string | undefined
+    /**
+     * MediaDeviceInfo id
+     */
+    micDeviceId: string | undefined
+    /**
+     * MediaDeviceInfo id
+     */
+    cameraDeviceId: string | undefined
+    enableMic: boolean
+    enableCamera: boolean
+  }
+}
+
+// sync the valtio store with localstorage data
+// @TODO: make it easier to have "persisted" stores as we will definitely use it quite often
+
+const localData = localStorage.getItem('meet.settings')
+
+export const settingsStore = proxy<SettingsState>(
+  localData
+    ? JSON.parse(localData)
+    : {
+        username: undefined,
+        devices: {
+          speakerDeviceId: undefined,
+          micDeviceId: undefined,
+          cameraDeviceId: undefined,
+          enableMic: false,
+          enableCamera: false,
+        },
+      }
+)
+
+subscribe(settingsStore, () => {
+  localStorage.setItem('meet.settings', JSON.stringify(settingsStore))
+})
+
+if (import.meta.env.DEV) {
+  devtools(settingsStore, { name: 'settings', enabled: true })
+}

src/frontend/src/locales/de/global.json

@@ -7,15 +7,11 @@
     "heading": ""
   },
   "feedbackAlert": "",
-  "forbidden": {
-    "heading": ""
-  },
   "loading": "",
   "loggedInUserTooltip": "",
   "login": "Anmelden",
   "logout": "",
   "notFound": {
     "heading": ""
-  },
-  "submit": "OK"
+  }
 }

src/frontend/src/locales/de/home.json

@@ -9,16 +9,5 @@
   "joinMeeting": "",
   "joinMeetingTipContent": "",
   "joinMeetingTipHeading": "",
-  "loginToCreateMeeting": "",
-  "createMenu": {
-    "laterOption": "",
-    "instantOption": ""
-  },
-  "laterMeetingDialog": {
-    "heading": "",
-    "description": "",
-    "copy": "",
-    "copied": "",
-    "permissions": ""
-  }
+  "loginToCreateMeeting": ""
 }

src/frontend/src/locales/de/notifications.json

@@ -1,10 +0,0 @@
-{
-  "defaultName": "",
-  "joined": {
-    "description": ""
-  },
-  "raised": {
-    "description": "",
-    "cta": ""
-  }
-}

src/frontend/src/locales/de/rooms.json

@@ -4,73 +4,36 @@
     "heading": ""
   },
   "join": {
+    "cameraIsOff": "",
+    "cameraIsOn": "",
+    "cameraPlaceholder": "",
     "camlabel": "",
+    "chooseCamera": "",
+    "chooseMic": "",
+    "chooseSpeaker": "",
     "heading": "",
     "joinLabel": "",
+    "joinMeeting": "",
+    "micIsOff": "",
+    "micIsOn": "",
     "micLabel": "",
-    "userLabel": ""
+    "toggleOff": "",
+    "toggleOn": "",
+    "userLabel": "",
+    "usernameHint": "",
+    "usernameLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
-    "copy": "",
     "copied": "",
+    "copy": "",
     "heading": "",
-    "description": "",
-    "permissions": ""
+    "inputLabel": ""
   },
   "error": {
     "createRoom": {
       "heading": "",
       "body": ""
     }
-  },
-  "controls": {
-    "microphone": "",
-    "camera": "",
-    "shareScreen": "",
-    "stopScreenShare": "",
-    "chat": {
-      "open": "",
-      "closed": ""
-    },
-    "hand": {
-      "raise": "",
-      "lower": ""
-    },
-    "leave": "",
-    "participants": {
-      "open": "",
-      "closed": ""
-    }
-  },
-  "options": {
-    "buttonLabel": "",
-    "items": {
-      "feedbacks": "",
-      "support": "",
-      "settings": "",
-      "username": ""
-    }
-  },
-  "participants": {
-    "heading": "",
-    "subheading": "",
-    "closeButton": "",
-    "contributors": "",
-    "collapsable": {
-      "open": "",
-      "close": ""
-    },
-    "you": "",
-    "muteYourself": "",
-    "muteParticipant": "",
-    "muteParticipantAlert": {
-      "description": "",
-      "confirm": "",
-      "cancel": ""
-    },
-    "raisedHands": "",
-    "lowerParticipantHand": "",
-    "lowerParticipantsHand": ""
   }
 }

src/frontend/src/locales/de/settings.json

@@ -1,24 +1,4 @@
 {
-  "account": {
-    "currentlyLoggedAs": "",
-    "heading": "",
-    "youAreNotLoggedIn": "",
-    "nameLabel": "",
-    "authentication": ""
-  },
-  "audio": {
-    "microphone": {
-      "heading": "",
-      "label": ""
-    },
-    "speakers": {
-      "heading": "",
-      "label": "",
-      "test": "",
-      "ongoingTest": ""
-    },
-    "permissionsRequired": ""
-  },
   "dialog": {
     "heading": ""
   },
@@ -26,10 +6,5 @@
     "heading": "",
     "label": ""
   },
-  "settingsButtonLabel": "",
-  "tabs": {
-    "account": "",
-    "audio": "",
-    "general": ""
-  }
+  "settingsButtonLabel": ""
 }

src/frontend/src/locales/en/global.json

@@ -7,15 +7,11 @@
     "heading": "An error occured while loading the page"
   },
   "feedbackAlert": "Give us feedback",
-  "forbidden": {
-    "heading": "You don't have the permission to view this page"
-  },
   "loading": "Loading…",
   "loggedInUserTooltip": "Logged in as…",
   "login": "Login",
   "logout": "Logout",
   "notFound": {
     "heading": "Page not found"
-  },
-  "submit": "OK"
+  }
 }

src/frontend/src/locales/en/home.json

@@ -9,16 +9,5 @@
   "joinMeeting": "Join a meeting",
   "joinMeetingTipContent": "You can join a meeting by pasting its full link in the browser's address bar.",
   "joinMeetingTipHeading": "Did you know?",
-  "loginToCreateMeeting": "Login to create a meeting",
-  "createMenu": {
-    "laterOption": "Create a meeting for a later date",
-    "instantOption": "Start an instant meeting"
-  },
-  "laterMeetingDialog": {
-    "heading": "Your connection details",
-    "description": "Send this link to the people you want to invite to the meeting. They will be able to join without Agent Connect.",
-    "copy": "Copy the meeting link",
-    "copied": "Link copied to clipboard",
-    "permissions": "People with this link do not need your permission to join this meeting."
-  }
+  "loginToCreateMeeting": "Login to create a meeting"
 }

src/frontend/src/locales/en/notifications.json

@@ -1,10 +0,0 @@
-{
-  "defaultName": "A contributor",
-  "joined": {
-    "description": "{{name}} has joined the room"
-  },
-  "raised": {
-    "description": "{{name}} has raised their hand.",
-    "cta": "Open waiting list"
-  }
-}

src/frontend/src/locales/en/rooms.json

@@ -4,73 +4,36 @@
     "heading": "Help us improve Meet"
   },
   "join": {
-    "camlabel": "Camera",
-    "heading": "Join the meeting",
-    "joinLabel": "Join",
-    "micLabel": "Microphone",
-    "userLabel": "Your name"
+    "cameraIsOff": "Camera is off.",
+    "cameraIsOn": "Camera is on.",
+    "cameraPlaceholder": "Turn on the camera to see the preview",
+    "camlabel": "",
+    "chooseCamera": "Select camera",
+    "chooseMic": "Select microphone",
+    "chooseSpeaker": "Select speakers",
+    "heading": "Verify your settings",
+    "joinLabel": "",
+    "joinMeeting": "Join meeting",
+    "micIsOff": "Microphone is off.",
+    "micIsOn": "Microphone is on.",
+    "micLabel": "",
+    "toggleOff": "Click to turn off",
+    "toggleOn": "Click to turn on",
+    "userLabel": "",
+    "usernameHint": "Shown to other participants",
+    "usernameLabel": "Your name"
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
-    "copy": "Copy the meeting link",
-    "copied": "Link copied to clipboard",
-    "heading": "Your meeting is ready",
-    "description": "Share this link with people you want to invite to the meeting.",
-    "permissions": "People with this link do not need your permission to join this meeting."
+    "copied": "Copied",
+    "copy": "Copy",
+    "heading": "Share the meeting link",
+    "inputLabel": "Meeting link"
   },
   "error": {
     "createRoom": {
       "heading": "Authentication Required",
       "body": "This room has not been created yet. Please authenticate to create it or wait for an authenticated user to do so."
     }
-  },
-  "controls": {
-    "microphone": "Microphone",
-    "camera": "Camera",
-    "shareScreen": "Share screen",
-    "stopScreenShare": "Stop screen share",
-    "chat": {
-      "open": "Close the chat",
-      "closed": "Open the chat"
-    },
-    "hand": {
-      "raise": "Raise hand",
-      "lower": "Lower hand"
-    },
-    "leave": "Leave",
-    "participants": {
-      "open": "Hide everyone",
-      "closed": "See everyone"
-    }
-  },
-  "options": {
-    "buttonLabel": "More Options",
-    "items": {
-      "feedbacks": "Give us feedbacks",
-      "support": "Get Help on Tchap",
-      "settings": "Settings",
-      "username": "Update Your Name"
-    }
-  },
-  "participants": {
-    "heading": "Participants",
-    "subheading": "In room",
-    "closeButton": "Hide participants",
-    "you": "You",
-    "contributors": "Contributors",
-    "collapsable": {
-      "open": "Open {{name}} list",
-      "close": "Close {{name}} list"
-    },
-    "muteYourself": "Close your mic",
-    "muteParticipant": "Close the mic of {{name}}",
-    "muteParticipantAlert": {
-      "description": "Mute {{name}} for all participants? {{name}} will be the only one who can unmute themselves.",
-      "confirm": "Mute",
-      "cancel": "Cancel"
-    },
-    "raisedHands": "Raised hands",
-    "lowerParticipantHand": "Lower {{name}}'s hand",
-    "lowerParticipantsHand": "Lower all hands"
   }
 }

src/frontend/src/locales/en/settings.json

@@ -1,24 +1,4 @@
 {
-  "account": {
-    "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
-    "heading": "Account",
-    "youAreNotLoggedIn": "You are not logged in.",
-    "nameLabel": "Votre Nom",
-    "authentication": "Authentication"
-  },
-  "audio": {
-    "microphone": {
-      "heading": "Microphone",
-      "label": "Select your audio input"
-    },
-    "speakers": {
-      "heading": "Speakers",
-      "label": "Select your audio output",
-      "test": "Test",
-      "ongoingTest": "Testing sound…"
-    },
-    "permissionsRequired": "Permissions required"
-  },
   "dialog": {
     "heading": "Settings"
   },
@@ -26,10 +6,5 @@
     "heading": "Language",
     "label": "Language"
   },
-  "settingsButtonLabel": "Settings",
-  "tabs": {
-    "account": "Profile",
-    "audio": "Audio",
-    "general": "General"
-  }
+  "settingsButtonLabel": "Settings"
 }

src/frontend/src/locales/fr/global.json

@@ -7,15 +7,11 @@
     "heading": "Une erreur est survenue lors du chargement de la page"
   },
   "feedbackAlert": "Donnez-nous votre avis",
-  "forbidden": {
-    "heading": "Accès interdit"
-  },
   "loading": "Chargement…",
   "loggedInUserTooltip": "Connecté en tant que…",
   "login": "Se connecter",
   "logout": "Se déconnecter",
   "notFound": {
     "heading": "Page introuvable"
-  },
-  "submit": "OK"
+  }
 }

src/frontend/src/locales/fr/home.json

@@ -9,16 +9,5 @@
   "joinMeeting": "Rejoindre une réunion",
   "joinMeetingTipContent": "Vous pouvez rejoindre une réunion en copiant directement son lien complet dans la barre d'adresse du navigateur.",
   "joinMeetingTipHeading": "Astuce",
-  "loginToCreateMeeting": "Connectez-vous pour créer une réunion",
-  "createMenu": {
-    "laterOption": "Créer une réunion pour une date ultérieure",
-    "instantOption": "Démarrer une réunion instantanée"
-  },
-  "laterMeetingDialog": {
-    "heading": "Vos informations de connexion",
-    "description": "Envoyez ce lien aux personnes que vous souhaitez inviter à la réunion. Ils pourront la rejoindre sans Agent Connect.",
-    "copy": "Copier le lien de la réunion",
-    "copied": "Lien copié dans le presse-papiers",
-    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."
-  }
+  "loginToCreateMeeting": "Connectez-vous pour créer une réunion"
 }

src/frontend/src/locales/fr/notifications.json

@@ -1,10 +0,0 @@
-{
-  "defaultName": "Un contributeur",
-  "joined": {
-    "description": "{{name}} participe à l'appel"
-  },
-  "raised": {
-    "description": "{{name}} a levé la main.",
-    "cta": "Ouvrir la file d'attente"
-  }
-}

src/frontend/src/locales/fr/rooms.json

@@ -4,73 +4,36 @@
     "heading": "Aidez-nous à améliorer Meet"
   },
   "join": {
-    "camlabel": "Webcam",
-    "heading": "Rejoindre la réunion",
-    "joinLabel": "Rejoindre",
-    "micLabel": "Micro",
-    "userLabel": "Votre nom"
+    "cameraIsOff": "Webcam coupée.",
+    "cameraIsOn": "Webcam activée.",
+    "cameraPlaceholder": "Activez la webcam pour prévisualiser l'affichage",
+    "camlabel": "",
+    "chooseCamera": "Choisir la webcam",
+    "chooseMic": "Choisir le micro",
+    "chooseSpeaker": "Choisir la sortie audio",
+    "heading": "Vérifiez vos paramètres",
+    "joinLabel": "",
+    "joinMeeting": "Rejoindre la réjoindre",
+    "micIsOff": "Micro coupé.",
+    "micIsOn": "Micro activé.",
+    "micLabel": "",
+    "toggleOff": "Cliquez pour désactiver",
+    "toggleOn": "Cliquez pour activer",
+    "userLabel": "",
+    "usernameHint": "Affiché aux autres participants",
+    "usernameLabel": "Votre nom"
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
-    "copy": "Copier le lien de la réunion",
-    "copied": "Lien copié dans le presse-papiers",
-    "heading": "Votre réunion est prête",
-    "description": "Partagez ce lien avec les personnes que vous souhaitez inviter à la réunion.",
-    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."
+    "copied": "Lien copié",
+    "copy": "Copier le lien",
+    "heading": "Partager le lien vers la réunion",
+    "inputLabel": "Lien vers la réunion"
   },
   "error": {
     "createRoom": {
       "heading": "Authentification requise",
       "body": "Cette réunion n'a pas encore été créée. Veuillez vous authentifier pour la créer ou attendre qu'un utilisateur authentifié le fasse."
     }
-  },
-  "controls": {
-    "microphone": "Microphone",
-    "camera": "Camera",
-    "shareScreen": "Partager l'écran",
-    "stopScreenShare": "Arrêter le partage",
-    "chat": {
-      "open": "Masquer le chat",
-      "closed": "Afficher le chat"
-    },
-    "hand": {
-      "raise": "Lever la main",
-      "lower": "Baisser la main"
-    },
-    "leave": "Quitter",
-    "participants": {
-      "open": "Masquer les participants",
-      "closed": "Afficher les participants"
-    }
-  },
-  "options": {
-    "buttonLabel": "Plus d'options",
-    "items": {
-      "feedbacks": "Partager votre avis",
-      "support": "Obtenir de l'aide sur Tchap",
-      "settings": "Paramètres",
-      "username": "Choisir votre nom"
-    }
-  },
-  "participants": {
-    "heading": "Participants",
-    "subheading": "Dans la réunion",
-    "closeButton": "Masquer les participants",
-    "you": "Vous",
-    "contributors": "Contributeurs",
-    "collapsable": {
-      "open": "Ouvrir la liste {{name}}",
-      "close": "Fermer la liste {{name}}"
-    },
-    "muteYourself": "Couper votre micro",
-    "muteParticipant": "Couper le micro de {{name}}",
-    "muteParticipantAlert": {
-      "description": "Couper le micro de {{name}} pour tous les participants ? {{name}} est la seule personne habilitée à réactiver son micro",
-      "confirm": "Couper le micro",
-      "cancel": "Annuler"
-    },
-    "raisedHands": "Mains levées",
-    "lowerParticipantHand": "Baisser la main de {{name}}",
-    "lowerParticipantsHand": "Baisser la main de tous les participants"
   }
 }

src/frontend/src/locales/fr/settings.json

@@ -1,24 +1,4 @@
 {
-  "account": {
-    "currentlyLoggedAs": "Vous êtes actuellement connecté en tant que <0>{{user}}</0>",
-    "heading": "Compte",
-    "youAreNotLoggedIn": "Vous n'êtes pas connecté.",
-    "nameLabel": "Votre Nom",
-    "authentication": "Authentification"
-  },
-  "audio": {
-    "microphone": {
-      "heading": "Micro",
-      "label": "Sélectionner votre entrée audio"
-    },
-    "speakers": {
-      "heading": "Haut-parleurs",
-      "label": "Sélectionner votre sortie audio",
-      "test": "Tester",
-      "ongoingTest": "Test du son…"
-    },
-    "permissionsRequired": "Autorisations nécessaires"
-  },
   "dialog": {
     "heading": "Paramètres"
   },
@@ -26,10 +6,5 @@
     "heading": "Langue",
     "label": "Langue de l'application"
   },
-  "settingsButtonLabel": "Paramètres",
-  "tabs": {
-    "account": "Profile",
-    "audio": "Audio",
-    "general": "Général"
-  }
+  "settingsButtonLabel": "Paramètres"
 }

src/frontend/src/primitives/Button.tsx

@@ -31,7 +31,6 @@ export const Button = ({
       </TooltipWrapper>
     )
   }
-
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACButton

src/frontend/src/primitives/Dialog.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react-aria-components'
 import { Div, Button, Box, VerticallyOffCenter } from '@/primitives'
 import { text } from './Text'
-import { MutableRefObject } from 'react'
 
 const StyledModalOverlay = styled(ModalOverlay, {
   base: {
@@ -29,7 +28,7 @@ const StyledModalOverlay = styled(ModalOverlay, {
   },
 })
 
-// disabled pointerEvents on the stuff surrounding the overlay is there so that clicking on the overlay to close the modal still works
+// disabled pointerEvents on the stuff surrouding the overlay is there so that clicking on the overlay to close the modal still works
 const StyledModal = styled(Modal, {
   base: {
     width: 'full',
@@ -49,7 +48,7 @@ const StyledRACDialog = styled(RACDialog, {
 })
 
 export type DialogProps = RACDialogProps & {
-  title?: string
+  title: string
   onClose?: () => void
   /**
    * use the Dialog as a controlled component
@@ -61,8 +60,6 @@ export type DialogProps = RACDialogProps & {
    * after user interaction
    */
   onOpenChange?: (isOpen: boolean) => void
-  type?: 'flex'
-  innerRef?: MutableRefObject<HTMLDivElement | null>
 }
 
 export const Dialog = ({
@@ -71,11 +68,9 @@ export const Dialog = ({
   onClose,
   isOpen,
   onOpenChange,
-  innerRef,
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
-  const boxType = dialogProps['type'] !== 'flex' ? 'dialog' : undefined
   return (
     <StyledModalOverlay
       isKeyboardDismissDisabled={isAlert}
@@ -94,35 +89,36 @@ export const Dialog = ({
         <StyledRACDialog {...dialogProps}>
           {({ close }) => (
             <VerticallyOffCenter>
-              <Div margin="auto" width="fit-content" maxWidth="full">
-                <Div margin="1rem" pointerEvents="auto">
-                  <Box size="sm" type={boxType} ref={innerRef}>
-                    {!!title && (
-                      <Heading
-                        slot="title"
-                        level={1}
-                        className={text({ variant: 'h1' })}
+              <Div
+                width="fit-content"
+                maxWidth="full"
+                margin="auto"
+                pointerEvents="auto"
+              >
+                <Box size="sm" type="dialog">
+                  <Heading
+                    slot="title"
+                    level={1}
+                    className={text({ variant: 'h1' })}
+                  >
+                    {title}
+                  </Heading>
+                  {typeof children === 'function'
+                    ? children({ close })
+                    : children}
+                  {!isAlert && (
+                    <Div position="absolute" top="0" right="0">
+                      <Button
+                        invisible
+                        size="xs"
+                        onPress={() => close()}
+                        aria-label={t('closeDialog')}
                       >
-                        {title}
-                      </Heading>
-                    )}
-                    {typeof children === 'function'
-                      ? children({ close })
-                      : children}
-                    {!isAlert && (
-                      <Div position="absolute" top="5" right="5">
-                        <Button
-                          invisible
-                          size="xs"
-                          onPress={() => close()}
-                          aria-label={t('closeDialog')}
-                        >
-                          <RiCloseLine />
-                        </Button>
-                      </Div>
-                    )}
-                  </Box>
-                </Div>
+                        <RiCloseLine />
+                      </Button>
+                    </Div>
+                  )}
+                </Box>
               </Div>
             </VerticallyOffCenter>
           )}

src/frontend/src/primitives/DialogContainer.tsx

@@ -0,0 +1,12 @@
+import { ReactNode, useContext } from 'react'
+import { OverlayTriggerStateContext } from 'react-aria-components'
+
+/**
+ * Small helper you can use as a wrapper of a <Dialog> component if you want to make sure it is not rendered when it is closed.
+ *
+ * Not required all the time, it's mostly helpful to avoid calling hooks of a child component that uses a Dialog.
+ */
+export const DialogContainer = ({ children }: { children: ReactNode }) => {
+  const state = useContext(OverlayTriggerStateContext)!
+  return state.isOpen ? children : null
+}

src/frontend/src/primitives/Field.tsx

@@ -23,7 +23,6 @@ import { Div } from './Div'
 const FieldWrapper = styled('div', {
   base: {
     marginBottom: 'textfield',
-    minWidth: 0,
   },
 })