✨(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?

.github/workflows/docker-hub.yml

@@ -1,5 +1,4 @@
 name: Docker Hub Workflow
-run-name: Docker Hub Workflow
 
 on:
   workflow_dispatch:
@@ -49,15 +48,9 @@ jobs:
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        with:
-          docker-build-args: '--target backend-production -f Dockerfile'
-          docker-image-name: 'docker.io/lasuite/meet-backend:${{ github.sha }}'
       -
         name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           target: backend-production
@@ -99,15 +92,9 @@ jobs:
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        with:
-          docker-build-args: '-f src/frontend/Dockerfile --target frontend-production'
-          docker-image-name: 'docker.io/lasuite/meet-frontend:${{ github.sha }}'
       -
         name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./src/frontend/Dockerfile

.github/workflows/helmfile-linter.yml

@@ -1,22 +0,0 @@
-name: Helmfile lint
-run-name: Helmfile lint
-
-on:
-  pull_request:
-    branches:
-      - 'main'
-
-jobs:
-  helmfile-lint:
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/helmfile/helmfile:latest
-    steps:
-      -
-        uses: numerique-gouv/action-helmfile-lint@main
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          age-key: ${{ secrets.SOPS_PRIVATE }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          helmfile-src: "src/helm"
-          repositories: "meet,secrets"

.sops.yaml

@@ -8,5 +8,3 @@ creation_rules:
       - age1tl80n23wq6zxegupwn70ew0yp225ua5v4dk800x7g2w6pvlxz46qk592pa #marie
       - age1qy04neuzwpasmvljqrcvhwnf0kz5cpyteze38c8avp0czewskasszv9pyw #argocd
       - age18fgn6j2vwwswqcpv9xpcehq8mrf9zs2sglwkamp3tzwx8d9jq9jsrskrk9 #manuuu
-      - age1hm2hsfgjezpsc3k0y5w5feq9t8vl3seq04qjhgt6ztd6403wfvpsgxu09m # github-repo
-      - age1hnhuzj96ktkhpyygvmz0x9h8mfvssz7ss6emmukags644mdhf4msajk93r # Samuel Paccoud

Dockerfile

@@ -1,14 +1,15 @@
 # Django Meet
 
 # ---- base image to inherit from ----
-FROM python:3.12.6-alpine3.20 as base
+FROM python:3.10-slim-bullseye as base
 
 # Upgrade pip to its latest release to speed up dependencies installation
-RUN python -m pip install --upgrade pip setuptools
+RUN python -m pip install --upgrade pip
 
 # Upgrade system packages to install security updates
-RUN apk update && \
-  apk upgrade
+RUN apt-get update && \
+  apt-get -y upgrade && \
+  rm -rf /var/lib/apt/lists/*
 
 # ---- Back-end builder image ----
 FROM base as back-builder
@@ -37,9 +38,12 @@ RUN yarn install --frozen-lockfile && \
 FROM base as link-collector
 ARG MEET_STATIC_ROOT=/data/static
 
-RUN apk add \
-  pango \
-  rdfind
+# Install libpangocairo & rdfind
+RUN apt-get update && \
+    apt-get install -y \
+      libpangocairo-1.0-0 \
+      rdfind && \
+    rm -rf /var/lib/apt/lists/*
 
 # Copy installed python dependencies
 COPY --from=back-builder /install /usr/local
@@ -62,14 +66,17 @@ FROM base as core
 
 ENV PYTHONUNBUFFERED=1
 
-RUN apk add \
-  gettext \
-  cairo \
-  libffi-dev \
-  gdk-pixbuf \
-  pango \
-  shared-mime-info
-
+# Install required system libs
+RUN apt-get update && \
+    apt-get install -y \
+      gettext \
+      libcairo2 \
+      libffi-dev \
+      libgdk-pixbuf2.0-0 \
+      libpango-1.0-0 \
+      libpangocairo-1.0-0 \
+      shared-mime-info && \
+  rm -rf /var/lib/apt/lists/*
 
 # Copy entrypoint
 COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
@@ -99,7 +106,9 @@ FROM core as backend-development
 USER root:root
 
 # Install psql
-RUN apk add postgresql-client
+RUN apt-get update && \
+    apt-get install -y postgresql-client && \
+    rm -rf /var/lib/apt/lists/*
 
 # Uninstall Meet and re-install it in editable mode along with development
 # dependencies

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 "$@"

bin/validate-helm-configuration.sh

@@ -1,13 +0,0 @@
-#!/bin/bash
-
-set -e
-
-HELMFILE=src/helm/helmfile.yaml
-
-environments=$(awk '/environments:/ {flag=1; next} flag && NF {print} !NF {flag=0}' "$HELMFILE" | grep -E '^[[:space:]]{2}[a-zA-Z]+' | sed 's/^[[:space:]]*//;s/:.*//')
-
-for env in $environments; do
-	echo "################### $env lint ###################"
-	helmfile -e $env -f src/helm/helmfile.yaml lint || exit 1
-	echo -e "\n"
-done

renovate.json

@@ -13,9 +13,7 @@
       "enabled": false,
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
-      "matchPackageNames": [
-        "eslint"
-      ]
+      "matchPackageNames": []
     }
   ]
 }

scripts/updatekeys.sh

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

src/backend/core/api/demo.py

@@ -1,316 +0,0 @@
-
-from rest_framework.decorators import api_view
-from rest_framework.response import Response
-from minio import Minio
-from django.conf import settings
-import openai
-import logging
-from ..models import Room, RoleChoices
-
-import tempfile
-import os
-import smtplib
-import requests
-
-
-logger = logging.getLogger(__name__)
-
-
-def get_prompt(transcript, date):
-    return f"""
-
-    Audience: Coworkers.
- 
-    **Do:**
-    - Detect the language of the transcript and provide your entire response in the same language.
-    - If any part of the transcript is unclear or lacks detail, politely inform the user, specifying which areas need further clarification.
-    - Ensure the accuracy of all information and refrain from adding unverified details.
-    - Format the response using proper markdown and structured sections.
-    - Be concise and avoid repeating yourself between the sections.
-    - Be super precise on nickname
-    - Be a nit-picker
-    - Auto-evaluate your response
-    
-    **Don't:**
-    - Write something your are not sure.
-    - Write something that is not mention in the transcript.
-    - Don't make mistake while mentioning someone
-
-    **Task:**
-    Summarize the provided meeting transcript into clear and well-organized meeting minutes. The summary should be structured into the following sections, excluding irrelevant or inapplicable details:
-    
-    1. **Summary**: Write a  TL;DR of the meeting.
-    2. **Subjects Discussed**: List the key points or issues in bullet points.
-    4. **Next Steps**: Provide action items as bullet points, assigning each task to a responsible individual and including deadlines (if mentioned). Format action items as tickable checkboxes. Ensure every action is assigned and, if a deadline is provided, that it is clearly stated.
-    
-    **Transcript**:  
-    {transcript}
-    
-    **Response:**
-    
-    ### Summary [Translate this title based on the transcript’s language]
-    [Provide a brief overview of the key points discussed]
-       
-    ### Subjects Discussed [Translate this title based on the transcript’s language]
-    - [Summarize each topic concisely]
-     
-    ### Next Steps [Translate this title based on the transcript’s language]  
-    - [ ] Action item [Assign to the responsible individual(s) and include a deadline if applicable, follow this strict format: Action - List of owner(s), deadline.]
-         
-    """
-
-def get_room_and_owners(slug):
-    """Wip."""
-
-    try:
-        room = Room.objects.get(slug=slug)
-        owner_accesses = room.accesses.filter(role=RoleChoices.OWNER)
-        owners = [access.user for access in owner_accesses]
-
-        logger.info("Room %s has owners: %s", slug, owners)
-
-    except Room.DoesNotExist:
-        logger.error("Room with slug %s does not exist", slug)
-
-        owners = None
-        room = None
-
-    return room, owners
-
-
-def remove_temporary_file(path):
-    """Wip."""
-
-    if not path or not os.path.exists(path):
-        return
-
-    os.remove(path)
-    logger.info("Temporary file %s has been deleted.", path)
-
-def get_blocknote_content(summary):
-    """Wip."""
-
-    if not settings.BLOCKNOTE_CONVERTER_URL:
-        logger.error("BLOCKNOTE_CONVERTER_URL is not configured")
-        return None
-
-    headers = {
-        "Content-Type": "application/json"
-    }
-
-    data = {
-        "markdown": summary
-    }
-
-    logger.info("Converting summary in BlockNote.js…")
-    response = requests.post(settings.BLOCKNOTE_CONVERTER_URL, headers=headers, json=data)
-
-    if response.status_code != 200:
-        logger.error(f"Failed to convert summary. Status code: {response.status_code}")
-        return None
-
-    response_data = response.json()
-    if not 'content' in response_data:
-        logger.error(f"Content is missing: %s", response_data)
-        return None
-
-    content = response_data['content']
-    logger.info("Base64 content: %s", content)
-
-    return content
-
-
-
-def get_document_link(content, email):
-    """Wip."""
-
-    logger.info("Create a document for %s", email)
-
-    if not settings.DOCS_BASE_URL:
-        logger.error("DOCS_BASE_URL is not configured")
-        return None
-
-    headers = {
-        "Content-Type": "application/json"
-    }
-
-    data = {
-        "content": content,
-        "owner": email
-    }
-
-    logger.info("Querying docs…")
-    response = requests.post(f"{settings.DOCS_BASE_URL}/api/v1.0/summary/", headers=headers, json=data)
-
-    if response.status_code != 200:
-        logger.error(f"Failed to get document's id. Status code: {response.status_code}")
-        return None
-
-    response_data = response.json()
-    if not 'id' in response_data:
-        logger.error(f"ID is missing: %s", response_data)
-        return None
-
-    id = response_data['id']
-    logger.info("Document's id: %s", id)
-
-    return f"{settings.DOCS_BASE_URL}/docs/{id}/"
-
-
-def email_owner_with_summary(room, link, owner):
-    """Wip."""
-
-    logger.info("Emailing owner: %s", owner)
-
-    try:
-        room.email_summary(owners=[owner], link=link)
-    except smtplib.SMTPException:
-        logger.error("Error while emailing owner")
-
-def strip_room_slug(filename):
-    """Wip."""
-    return filename.split("_")[2].split(".")[0]
-
-def strip_room_date(filename):
-    """Wip."""
-    return filename.split("_")[1].split(".")[0]
-
-
-def get_minio_client():
-    """Wip."""
-
-    try:
-        return Minio(
-            settings.MINIO_URL,
-            access_key=settings.MINIO_ACCESS_KEY,
-            secret_key=settings.MINIO_SECRET_KEY,
-        )
-    except Exception as e:
-        logger.error("An error occurred while creating the Minio client %s: %s", settings.MINIO_URL, str(e))
-
-
-def download_temporary_file(minio_client, filename):
-    """Wip."""
-
-    temp_file_path = None
-
-    logger.info('downloading file %s', filename)
-
-    try:
-        audio_file_stream = minio_client.get_object(settings.MINIO_BUCKET, object_name=filename)
-
-        with tempfile.NamedTemporaryFile(delete=False, suffix='.ogg') as temp_audio_file:
-
-            for data in audio_file_stream.stream(32 * 1024):
-                temp_audio_file.write(data)
-
-            temp_file_path = temp_audio_file.name
-            logger.info('Temporary file created at %s', temp_file_path)
-
-        audio_file_stream.close()
-        audio_file_stream.release_conn()
-
-    except Exception as e:
-        logger.error("An error occurred while accessing the object: %s", str(e))
-
-    return temp_file_path
-
-
-# todo - discuss retry policy if the webhook fail
-@api_view(["POST"])
-def minio_webhook(request):
-
-    data = request.data
-
-    logger.info('Minio webhook sent %s', data)
-
-    record = data["Records"][0]
-    s3 = record['s3']
-    bucket = s3['bucket']
-    bucket_name = bucket['name']
-    object = s3['object']
-    filename = object['key']
-
-    if bucket_name != settings.MINIO_BUCKET:
-        logger.info('Not interested in this bucket: %s', bucket_name)
-        return Response("Not interested in this bucket")
-
-    if object['contentType'] != 'audio/ogg':
-        logger.info('Not interested in this file type: %s', object['contentType'])
-        return Response("Not interested in this file type")
-
-    room_slug = strip_room_slug(filename)
-    room_date = strip_room_date(filename)
-    logger.info('file received %s for room %s', filename, room_slug)
-
-    minio_client = get_minio_client()
-
-    temp_file_path = None
-    summary = None
-
-    try:
-        temp_file_path = download_temporary_file(minio_client, filename)
-
-        if settings.OPENAI_ENABLE and temp_file_path:
-            logger.info('Initiating OpenAI client …')
-            openai_client = openai.OpenAI(
-                api_key=settings.OPENAI_API_KEY,
-            )
-
-            with open(temp_file_path, "rb") as audio_file:
-                logger.info('Querying transcription …')
-                transcript = openai_client.audio.transcriptions.create(
-                    model="whisper-1",
-                    file=audio_file
-                )
-
-            logger.info('Transcript: \n  %s', transcript)
-            prompt = get_prompt(transcript.text, room_date)
-
-            logger.info('Prompt: \n %s', prompt)
-
-            summary_response = openai_client.chat.completions.create(
-                model="gpt-4o",
-                messages=[
-                    {"role": "system", "content": "You are a concise and structured assistant, that summarizes meeting transcripts."},
-                    {"role": "user", "content": prompt}
-                ],
-            )
-
-            summary = summary_response.choices[0].message.content
-            logger.info('Summary: \n %s', summary)
-
-    except Exception as e:
-        logger.error("An error occurred: %s", str(e))
-        raise
-
-    finally:
-        remove_temporary_file(temp_file_path)
-
-    if not summary:
-        logger.error("Empty summary.")
-        return Response("")
-
-    room, owners = get_room_and_owners(room_slug)
-
-    if not owners or not room:
-        logger.error("No owners in room %s", room_slug)
-        return Response("")
-
-    content = get_blocknote_content(summary)
-
-    if not content:
-        logger.error("Empty content.")
-        return Response("")
-
-    owner = owners[0]
-
-    link = get_document_link(content, owner.email)
-
-    if not link:
-        logger.error("Empty link.")
-        return Response("")
-
-    email_owner_with_summary(room, link, owner)
-
-    return Response("")

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

@@ -15,8 +15,6 @@ from django.utils.functional import lazy
 from django.utils.text import capfirst, slugify
 from django.utils.translation import gettext_lazy as _
 
-from django.template.loader import render_to_string
-
 from timezone_field import TimeZoneField
 
 logger = getLogger(__name__)
@@ -298,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."),
     )
@@ -327,24 +325,3 @@ class Room(Resource):
         else:
             raise ValidationError({"name": f'Room name "{self.name:s}" is reserved.'})
         super().clean_fields(exclude=exclude)
-
-
-    def email_summary(self, owners, link):
-        """Wip"""
-
-        template_vars = {
-            "title": "Votre résumé est prêt",
-            "link": link,
-            "room": self.slug,
-        }
-        msg_html = render_to_string("mail/html/summary.html", template_vars)
-        msg_plain = render_to_string("mail/text/invitation.txt", template_vars)
-
-        for owner in owners:
-            owner.email_user(
-                subject="Votre résumé est prêt",
-                from_email=settings.EMAIL_FROM,
-                message=msg_plain,
-                html_message=msg_html,
-                fail_silently=False,
-            )

src/backend/core/urls.py

@@ -5,7 +5,7 @@ from django.urls import include, path
 
 from rest_framework.routers import DefaultRouter
 
-from core.api import get_frontend_configuration, viewsets, demo
+from core.api import viewsets
 from core.authentication.urls import urlpatterns as oidc_urls
 
 # - Main endpoints
@@ -23,8 +23,6 @@ urlpatterns = [
             [
                 *router.urls,
                 *oidc_urls,
-                path("config/", get_frontend_configuration, name="config"),
-                path("minio-webhook/", demo.minio_webhook, name="demo"),
             ]
         ),
     ),

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"
@@ -251,19 +249,6 @@ class Base(Configuration):
         "REDOC_DIST": "SIDECAR",
     }
 
-    # Frontend
-    FRONTEND_CONFIGURATION = {
-        "analytics": values.DictValue(
-            {}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None
-        ),
-        "support": values.DictValue(
-            {}, environ_name="FRONTEND_SUPPORT", environ_prefix=None
-        ),
-        "silence_livekit_debug_logs": values.BooleanValue(
-            False, environ_name="FRONTEND_SILENCE_LIVEKIT_DEBUG", environ_prefix=None
-        ),
-    }
-
     # Mail
     EMAIL_BACKEND = values.Value("django.core.mail.backends.smtp.EmailBackend")
     EMAIL_HOST = values.Value(None)
@@ -271,7 +256,6 @@ class Base(Configuration):
     EMAIL_HOST_PASSWORD = values.Value(None)
     EMAIL_PORT = values.PositiveIntegerValue(None)
     EMAIL_USE_TLS = values.BooleanValue(False)
-    EMAIL_USE_SSL = values.BooleanValue(False)
     EMAIL_FROM = values.Value("from@example.com")
 
     AUTH_USER_MODEL = "core.User"
@@ -289,7 +273,6 @@ class Base(Configuration):
     # Easy thumbnails
     THUMBNAIL_EXTENSION = "webp"
     THUMBNAIL_TRANSPARENCY_EXTENSION = "webp"
-    THUMBNAIL_DEFAULT_STORAGE_ALIAS = "default"
     THUMBNAIL_ALIASES = {}
 
     # Celery
@@ -386,53 +369,6 @@ class Base(Configuration):
         None, environ_name="ANALYTICS_KEY", environ_prefix=None
     )
 
-    # todo - totally wip
-    AWS_S3_ENDPOINT_URL = values.Value(
-        environ_name="AWS_S3_ENDPOINT_URL", environ_prefix=None
-    )
-    AWS_S3_ACCESS_KEY_ID = values.Value(
-        environ_name="AWS_S3_ACCESS_KEY_ID", environ_prefix=None
-    )
-    AWS_S3_SECRET_ACCESS_KEY = values.Value(
-        environ_name="AWS_S3_SECRET_ACCESS_KEY", environ_prefix=None
-    )
-    AWS_S3_REGION_NAME = values.Value(
-        environ_name="AWS_S3_REGION_NAME", environ_prefix=None
-    )
-    AWS_STORAGE_BUCKET_NAME = values.Value(
-        "meet-media-storage",
-        environ_name="AWS_STORAGE_BUCKET_NAME",
-        environ_prefix=None,
-    )
-
-    OPENAI_API_KEY = values.Value(
-        None, environ_name="OPENAI_API_KEY", environ_prefix=None
-    )
-    OPENAI_ENABLE = values.BooleanValue(
-        True, environ_name="OPENAI_ENABLE", environ_prefix=None
-    )
-
-    # todo - totally wip
-    MINIO_ACCESS_KEY = values.Value(
-        None, environ_name="MINIO_ACCESS_KEY", environ_prefix=None
-    )
-    MINIO_SECRET_KEY = values.Value(
-        None, environ_name="MINIO_SECRET_KEY", environ_prefix=None
-    )
-    MINIO_URL = values.Value(
-        None, environ_name="MINIO_URL", environ_prefix=None
-    )
-    MINIO_BUCKET = values.Value(
-        'livekit-staging-livekit-egress', environ_name="MINIO_BUCKET", environ_prefix=None
-    )
-
-    BLOCKNOTE_CONVERTER_URL = values.Value(
-        'https://converter-blocknote.osc-fr1.scalingo.io/', environ_name="",  environ_prefix=None
-    )
-    DOCS_BASE_URL = values.Value(
-        'https://docs-ia.beta.numerique.gouv.fr', environ_name="",  environ_prefix=None
-    )
-
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):
@@ -576,26 +512,8 @@ class Production(Base):
     ALLOWED_HOSTS=["foo.com", "foo.fr"]
     """
 
-    LOGGING = {
-        "version": 1,
-        "disable_existing_loggers": False,
-        "handlers": {
-            "console": {
-                "class": "logging.StreamHandler",
-            },
-        },
-        "root": {
-            "handlers": ["console"],
-            "level": "INFO",
-        },
-    }
-
     # 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
@@ -610,14 +528,6 @@ class Production(Base):
     #
     # In other cases, you should comment the following line to avoid security issues.
     SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
-    SECURE_HSTS_SECONDS = 60
-    SECURE_HSTS_PRELOAD = True
-    SECURE_HSTS_INCLUDE_SUBDOMAINS = True
-    SECURE_SSL_REDIRECT = True
-    SECURE_REDIRECT_EXEMPT = [
-        "^__lbheartbeat__",
-        "^__heartbeat__",
-    ]
 
     # Modern browsers require to have the `secure` attribute on cookies with `Samesite=none`
     CSRF_COOKIE_SECURE = True

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.7"
+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.19",
+    "boto3==1.34.154",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -36,30 +36,28 @@ dependencies = [
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.1",
+    "django==5.0.7",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
-    "easy_thumbnails==2.10",
-    "factory_boy==3.3.1",
+    "easy_thumbnails==2.9",
+    "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.2",
+    "psycopg[binary]==3.2.1",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.14.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",
-    "minio==7.2.9",
-    "openai==1.51.2"
+    "livekit-api==0.6.0",
 ]
 
 [project.urls]
@@ -73,18 +71,18 @@ 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.9.0",
-    "pytest==8.3.3",
+    "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.5",
-    "types-requests==2.32.0.20240914",
+    "ruff==0.5.6",
+    "types-requests==2.32.0.20240712",
 ]
 
 [tool.setuptools]

src/frontend/Dockerfile

@@ -32,7 +32,7 @@ WORKDIR /home/frontend
 RUN npm run build
 
 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.26-alpine as frontend-production
+FROM nginxinc/nginx-unprivileged:1.25 as frontend-production
 
 # Un-privileged user running the application
 ARG DOCKER_USER

src/frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/play-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visio</title>
+    <title>Meet</title>
   </head>
   <body>
     <div id="root"></div>

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,48 +13,43 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.6.5",
-    "@livekit/components-styles": "1.1.3",
-    "@livekit/track-processors": "0.3.2",
-    "@pandacss/preset-panda": "0.46.1",
-    "@react-aria/toast": "3.0.0-beta.16",
+    "@livekit/components-react": "2.3.3",
+    "@livekit/components-styles": "1.0.12",
+    "@pandacss/preset-panda": "0.41.0",
     "@remixicon/react": "4.2.0",
-    "@tanstack/react-query": "5.59.4",
-    "crisp-sdk-web": "1.0.25",
+    "@tanstack/react-query": "5.49.2",
     "hoofd": "1.7.1",
-    "i18next": "23.15.2",
+    "i18next": "23.12.1",
     "i18next-browser-languagedetector": "8.0.0",
-    "i18next-parser": "9.0.2",
+    "i18next-parser": "9.0.0",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.5.7",
-    "posthog-js": "1.167.0",
-    "react": "18.3.1",
-    "react-aria-components": "1.4.0",
-    "react-dom": "18.3.1",
-    "react-i18next": "15.0.2",
-    "use-sound": "4.0.3",
-    "valtio": "2.0.0",
-    "wouter": "3.3.5"
+    "livekit-client": "2.3.1",
+    "react": "18.2.0",
+    "react-aria-components": "1.2.1",
+    "react-dom": "18.2.0",
+    "react-i18next": "14.1.3",
+    "valtio": "1.13.2",
+    "wouter": "3.3.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@tanstack/eslint-plugin-query": "5.59.2",
-    "@tanstack/react-query-devtools": "5.59.4",
-    "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
+    "@pandacss/dev": "0.41.0",
+    "@tanstack/eslint-plugin-query": "5.49.1",
+    "@tanstack/react-query-devtools": "5.49.2",
+    "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@typescript-eslint/eslint-plugin": "7.13.1",
+    "@typescript-eslint/parser": "7.13.1",
+    "@vitejs/plugin-react": "4.3.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.12",
-    "postcss": "8.4.47",
+    "eslint-plugin-react-refresh": "0.4.7",
+    "postcss": "8.4.39",
     "prettier": "3.3.3",
-    "typescript": "5.6.3",
-    "vite": "5.4.8",
-    "vite-tsconfig-paths": "5.0.1"
+    "typescript": "5.5.2",
+    "vite": "5.3.1",
+    "vite-tsconfig-paths": "4.3.2"
   }
 }

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: '25%' },
-        '25%': { height: '45%' },
-        '50%': { height: '20%' },
-        '100%': { height: '55%' },
-      },
-      active_speaker_small: {
-        '0%': { height: '20%' },
-        '25%': { height: '25%' },
-        '50%': { height: '18%' },
-        '100%': { height: '25%' },
-      },
-      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/App.tsx

@@ -11,15 +11,18 @@ import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
 import { routes } from './routes'
 import './i18n/init'
+import { silenceLiveKitLogs } from '@/utils/livekit.ts'
 import { queryClient } from '@/api/queryClient'
-import { AppInitialization } from '@/components/AppInitialization'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
+
+  const isProduction = import.meta.env.PROD
+  silenceLiveKitLogs(isProduction)
+
   return (
     <QueryClientProvider client={queryClient}>
-      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
           <Layout>

src/frontend/src/api/queryKeys.ts

@@ -1,5 +1,4 @@
 export const keys = {
   user: 'user',
   room: 'room',
-  config: 'config',
 }

src/frontend/src/api/useConfig.ts

@@ -1,26 +0,0 @@
-import { fetchApi } from './fetchApi'
-import { keys } from './queryKeys'
-import { useQuery } from '@tanstack/react-query'
-
-export interface ApiConfig {
-  analytics?: {
-    id: string
-    host: string
-  }
-  support?: {
-    id: string
-  }
-  silence_livekit_debug_logs?: boolean
-}
-
-const fetchConfig = (): Promise<ApiConfig> => {
-  return fetchApi<ApiConfig>(`config/`)
-}
-
-export const useConfig = () => {
-  return useQuery({
-    queryKey: [keys.config],
-    queryFn: fetchConfig,
-    staleTime: Infinity,
-  })
-}

src/frontend/src/components/AppInitialization.tsx

@@ -1,20 +0,0 @@
-import { silenceLiveKitLogs } from '@/utils/livekit'
-import { useConfig } from '@/api/useConfig'
-import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
-import { useSupport } from '@/features/support/hooks/useSupport'
-
-export const AppInitialization = () => {
-  const { data } = useConfig()
-
-  const {
-    analytics = {},
-    support = {},
-    silence_livekit_debug_logs = false,
-  } = data || {}
-
-  useAnalytics(analytics)
-  useSupport(support)
-  silenceLiveKitLogs(silence_livekit_debug_logs)
-
-  return null
-}

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/Feedback.tsx

@@ -1,12 +1,12 @@
+import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { LinkButton } from '@/primitives'
 
 export const Feedback = () => {
   const { t } = useTranslation()
   return (
-    <LinkButton
+    <Button
       href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
       variant="success"
       target="_blank"
@@ -20,6 +20,6 @@ export const Feedback = () => {
         className={css({ marginLeft: 0.5 })}
         aria-hidden="true"
       />
-    </LinkButton>
+    </Button>
   )
 }

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/analytics/hooks/useAnalytics.tsx

@@ -1,39 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'wouter'
-import posthog from 'posthog-js'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-export const startAnalyticsSession = (data: ApiUser) => {
-  if (posthog._isIdentified()) return
-  const { id, email } = data
-  posthog.identify(id, { email })
-}
-
-export const terminateAnalyticsSession = () => {
-  if (!posthog._isIdentified()) return
-  posthog.reset()
-}
-
-export type useAnalyticsProps = {
-  id?: string
-  host?: string
-}
-
-export const useAnalytics = ({ id, host }: useAnalyticsProps) => {
-  const [location] = useLocation()
-  useEffect(() => {
-    if (!id || !host) return
-    if (posthog.__loaded) return
-    posthog.init(id, {
-      api_host: host,
-      person_profiles: 'always',
-    })
-  }, [id, host])
-
-  // From PostHog tutorial on PageView tracking in a Single Page Application (SPA) context.
-  useEffect(() => {
-    posthog.capture('$pageview')
-  }, [location])
-
-  return null
-}

src/frontend/src/features/auth/api/fetchUser.ts

@@ -20,7 +20,7 @@ export const fetchUser = (): Promise<ApiUser | false> => {
           // make sure to not resolve the promise while trying to silent login
           // so that consumers of fetchUser don't think the work already ended
           if (canAttemptSilentLogin()) {
-            attemptSilentLogin(300)
+            attemptSilentLogin(3600)
           } else {
             resolve(false)
           }

src/frontend/src/features/auth/api/useUser.tsx

@@ -2,12 +2,9 @@ import { useQuery } from '@tanstack/react-query'
 import { keys } from '@/api/queryKeys'
 import { fetchUser } from './fetchUser'
 import { type ApiUser } from './ApiUser'
-import { useEffect } from 'react'
-import { startAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
-import { initializeSupportSession } from '@/features/support/hooks/useSupport'
 
 /**
- * returns info about currently logged-in user
+ * returns info about currently logged in user
  *
  * `isLoggedIn` is undefined while query is loading and true/false when it's done
  */
@@ -15,16 +12,9 @@ export const useUser = () => {
   const query = useQuery({
     queryKey: [keys.user],
     queryFn: fetchUser,
-    staleTime: Infinity,
+    staleTime: 1000 * 60 * 60, // 1 hour
   })
 
-  useEffect(() => {
-    if (query?.data) {
-      startAnalyticsSession(query.data)
-      initializeSupportSession(query.data)
-    }
-  }, [query.data])
-
   const isLoggedIn =
     query.status === 'success' ? query.data !== false : undefined
   const isLoggedOut = isLoggedIn === 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/JoinMeetingDialog.tsx

@@ -23,7 +23,7 @@ export const JoinMeetingDialog = () => {
           name="roomId"
           label={t('joinInputLabel')}
           description={t('joinInputExample', {
-            example: 'https://visio.numerique.gouv.fr/azer-tyu-qsdf',
+            example: 'https://meet.numerique.gouv.fr/azer-tyu-qsdf',
           })}
           validate={(value) => {
             return !isRoomValid(value.trim()) ? (

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

@@ -1,94 +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}
-        data-attr="later-dialog-copy"
-      >
-        {isCopied ? (
-          <>
-            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-            {t('laterMeetingDialog.copied')}
-          </>
-        ) : (
-          <>
-            <RiFileCopyLine
-              size={18}
-              style={{ marginRight: '8px', minWidth: '18px' }}
-            />
-            {isHovered ? (
-              t('laterMeetingDialog.copy')
-            ) : (
-              <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,31 +1,26 @@
 import { useTranslation } from 'react-i18next'
-import { DialogTrigger, MenuItem, Menu as RACMenu } from 'react-aria-components'
-import { Button, Menu, Text } from '@/primitives'
+import { DialogTrigger } from 'react-aria-components'
+import { Button, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { Centered } from '@/layout/Centered'
 import { generateRoomId } from '@/features/rooms'
-import { useUser, UserAware } from '@/features/auth'
+import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
-import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
-import { usePersistentUserChoices } from '@livekit/components-react'
-import { menuItemRecipe } from '@/primitives/menuItemRecipe'
-import { RiAddLine, RiLink } from '@remixicon/react'
-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>
@@ -42,64 +37,30 @@ export const Home = () => {
               {t('loginToCreateMeeting')}
             </Text>
           )}
-          <HStack gap="gutter" alignItems="start">
-            {isLoggedIn ? (
-              <Menu>
-                <Button variant="primary" data-attr="create-meeting">
-                  {t('createMeeting')}
-                </Button>
-                <RACMenu>
-                  <MenuItem
-                    className={menuItemRecipe({ icon: true })}
-                    onAction={async () => {
+          <HStack gap="gutter">
+            <Button
+              variant="primary"
+              onPress={
+                isLoggedIn
+                  ? async () => {
                       const slug = generateRoomId()
-                      createRoom({ slug, username }).then((data) =>
-                        navigateTo('room', data.slug, {
-                          state: { create: true, initialRoomData: data },
-                        })
-                      )
-                    }}
-                    data-attr="create-option-instant"
-                  >
-                    <RiAddLine size={18} />
-                    {t('createMenu.instantOption')}
-                  </MenuItem>
-                  <MenuItem
-                    className={menuItemRecipe({ icon: true })}
-                    onAction={() => {
-                      const slug = generateRoomId()
-                      createRoom({ slug, username }).then((data) =>
-                        setLaterRoomId(data.slug)
-                      )
-                    }}
-                    data-attr="create-option-later"
-                  >
-                    <RiLink size={18} />
-                    {t('createMenu.laterOption')}
-                  </MenuItem>
-                </RACMenu>
-              </Menu>
-            ) : (
-              <ProConnectButton />
-            )}
+                      await createRoom({ slug })
+                    }
+                  : undefined
+              }
+              href={isLoggedIn ? undefined : authUrl()}
+            >
+              {isLoggedIn ? t('createMeeting') : t('login', { ns: 'global' })}
+            </Button>
+
             <DialogTrigger>
-              <Button
-                variant="primary"
-                outline
-                style={{
-                  height: !isLoggedIn ? '56px' : undefined, // Temporary, Align with ProConnect Button fixed height
-                }}
-              >
+              <Button variant="primary" outline>
                 {t('joinMeeting')}
               </Button>
               <JoinMeetingDialog />
             </DialogTrigger>
           </HStack>
         </Centered>
-        <LaterMeetingDialog
-          roomId={laterRoomId || ''}
-          onOpenChange={() => setLaterRoomId(null)}
-        />
       </Screen>
     </UserAware>
   )

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

@@ -1,112 +0,0 @@
-import { useEffect } from 'react'
-import { useRoomContext } from '@livekit/components-react'
-import { Participant, 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 removeParticipantNotifications = (participant: Participant) => {
-      toastQueue.visibleToasts.forEach((toast) => {
-        if (toast.content.participant === participant) {
-          toastQueue.close(toast.key)
-        }
-      })
-    }
-    room.on(RoomEvent.ParticipantDisconnected, removeParticipantNotifications)
-    return () => {
-      room.off(
-        RoomEvent.ParticipantDisconnected,
-        removeParticipantNotifications
-      )
-    }
-  }, [room])
-
-  useEffect(() => {
-    const handleNotificationReceived = (
-      prevMetadataStr: string | undefined,
-      participant: Participant
-    ) => {
-      if (!participant) return
-      if (isMobileBrowser()) return
-      if (participant.isLocal) return
-
-      const prevMetadata = JSON.parse(prevMetadataStr || '{}')
-      const metadata = JSON.parse(participant.metadata || '{}')
-
-      if (prevMetadata.raised == metadata.raised) return
-
-      const existingToast = toastQueue.visibleToasts.find(
-        (toast) =>
-          toast.content.participant === participant &&
-          toast.content.type === NotificationType.Raised
-      )
-
-      if (existingToast && prevMetadata.raised && !metadata.raised) {
-        toastQueue.close(existingToast.key)
-        return
-      }
-
-      if (!existingToast && !prevMetadata.raised && metadata.raised) {
-        triggerNotificationSound(NotificationType.Raised)
-        toastQueue.add(
-          {
-            participant,
-            type: NotificationType.Raised,
-          },
-          { timeout: 5000 }
-        )
-      }
-    }
-
-    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
-
-    return () => {
-      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
-    }
-  }, [room, triggerNotificationSound])
-
-  useEffect(() => {
-    const closeAllToasts = () => {
-      toastQueue.visibleToasts.forEach(({ key }) => toastQueue.close(key))
-    }
-    room.on(RoomEvent.Disconnected, closeAllToasts)
-    return () => {
-      room.off(RoomEvent.Disconnected, closeAllToasts)
-    }
-  }, [room])
-
-  return (
-    <Div position="absolute" bottom={0} 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 { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-
-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 } = useSidePanel()
-
-  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,101 +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',
-  },
-  variants: {
-    pushToTalk: {
-      true: {
-        height: '46px',
-        width: '58px',
-        borderLeftRadius: 8,
-        borderRightRadius: 0,
-        backgroundColor: '#dbeafe',
-        border: '1px solid #3b82f6',
-        gap: '3px',
-      },
-    },
-  },
-})
-
-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_speaker_small',
-      },
-    },
-    pushToTalk: {
-      true: {
-        backgroundColor: 'primary',
-        width: '6px',
-        height: '6px',
-      },
-    },
-  },
-})
-
-export type ActiveSpeakerProps = {
-  isSpeaking: boolean
-  pushToTalk?: boolean
-}
-
-export const ActiveSpeaker = ({
-  isSpeaking,
-  pushToTalk,
-}: ActiveSpeakerProps) => {
-  return (
-    <StyledContainer pushToTalk={pushToTalk}>
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '300ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        style={{
-          animationDelay: '100ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '500ms',
-        }}
-      />
-    </StyledContainer>
-  )
-}

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

@@ -1,10 +1,15 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
+import {
+  formatChatMessageLinks,
+  LiveKitRoom,
+  VideoConference,
+} from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
+import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -12,9 +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 posthog from 'posthog-js'
+import { type SettingsState } from '@/features/settings'
 
 export const Conference = ({
   roomId,
@@ -23,13 +26,13 @@ export const Conference = ({
   mode = 'join',
 }: {
   roomId: string
-  userConfig: LocalUserChoices
+  userConfig: {
+    devices: SettingsState['devices']
+    username: SettingsState['username']
+  }
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
-  useEffect(() => {
-    posthog.capture('visit-room', { slug: roomId })
-  }, [roomId])
   const fetchKey = [keys.room, roomId, userConfig.username]
 
   const {
@@ -48,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({
@@ -56,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,
@@ -65,19 +68,45 @@ 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])
 
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
 
+  /**
+   * checks for actual click on the leave button instead of
+   * relying on LiveKitRoom onDisconnected because onDisconnected
+   * triggers even on page reload, it's not a user "onLeave" event really.
+   * Here we want to react to the user actually deciding to leave.
+   */
+  useEffect(() => {
+    const checkOnLeaveClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (target.classList.contains('lk-disconnect-button')) {
+        navigateTo('feedback')
+      }
+    }
+    document.body.addEventListener('click', checkOnLeaveClick)
+    return () => {
+      document.body.removeEventListener('click', checkOnLeaveClick)
+    }
+  }, [])
+
   const { t } = useTranslation('rooms')
   if (isCreateError) {
     // this error screen should be replaced by a proper waiting room for anonymous user.
@@ -91,16 +120,16 @@ 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 />
+          <VideoConference chatMessageFormatter={formatChatMessageLinks} />
           {showInviteDialog && (
             <InviteDialog
               isOpen={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,103 +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}
-            data-attr="share-dialog-copy"
           >
-            {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/components/Join.tsx

@@ -16,8 +16,8 @@ export const Join = ({
         <PreJoin
           persistUserChoices
           onSubmit={onSubmit}
-          micLabel={t('join.audioinput.label')}
-          camLabel={t('join.videoinput.label')}
+          micLabel={t('join.micLabel')}
+          camLabel={t('join.camlabel')}
           joinLabel={t('join.joinLabel')}
           userLabel={t('join.userLabel')}
         />

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

@@ -1,53 +0,0 @@
-import { useRoomContext } from '@livekit/components-react'
-import { useEffect, useState } from 'react'
-import { RoomEvent } from 'livekit-client'
-import { egressStore } from '@/stores/egress.ts'
-import { useSnapshot } from 'valtio'
-
-export const RecordingIndicator = () => {
-  const room = useRoomContext()
-  const [isRecording, setIsRecording] = useState(room.isRecording)
-
-  const egressSnap = useSnapshot(egressStore)
-  const egressIsStopping = egressSnap.egressIsStopping
-
-  useEffect(() => {
-    const handleRecordingStatusChanges = (isRecording: boolean) => {
-      if (!isRecording) {
-        egressStore.egressIsStopping = false
-      }
-
-      setIsRecording(isRecording)
-    }
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
-    return () => {
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
-    }
-  }, [room])
-
-  const getStatus = () => {
-    if (egressIsStopping) {
-      return 'saving recording'
-    }
-    if (isRecording) {
-      return 'recording'
-    }
-    if (!isRecording) {
-      return 'available'
-    }
-  }
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'column',
-        width: '100%',
-      }}
-    >
-      Room status: {getStatus()}
-    </div>
-  )
-}

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,19 +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) {
-      console.error('An error occurred while lowering hands :', 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/Effects.tsx

@@ -1,191 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { useLocalParticipant } from '@livekit/components-react'
-import { LocalVideoTrack } from 'livekit-client'
-import { Text, P, ToggleButton, Div, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import {
-  BackgroundBlur,
-  BackgroundOptions,
-  ProcessorWrapper,
-  BackgroundTransformer,
-} from '@livekit/track-processors'
-
-const Information = styled('div', {
-  base: {
-    backgroundColor: 'orange.50',
-    borderRadius: '4px',
-    padding: '0.75rem 0.75rem',
-    marginTop: '0.8rem',
-    alignItems: 'start',
-  },
-})
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-export const Effects = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
-  const { isCameraEnabled, cameraTrack, localParticipant } =
-    useLocalParticipant()
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [processorPending, setProcessorPending] = useState(false)
-
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-
-  const getProcessor = () => {
-    return localCameraTrack?.getProcessor() as ProcessorWrapper<BackgroundOptions>
-  }
-
-  const getBlurRadius = (): BlurRadius => {
-    const processor = getProcessor()
-    return (
-      (processor?.transformer as BackgroundTransformer)?.options?.blurRadius ||
-      BlurRadius.NONE
-    )
-  }
-
-  const toggleBlur = async (blurRadius: number) => {
-    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
-    if (!localCameraTrack) return
-
-    setProcessorPending(true)
-
-    const processor = getProcessor()
-    const currentBlurRadius = getBlurRadius()
-
-    try {
-      if (blurRadius == currentBlurRadius && processor) {
-        await localCameraTrack.stopProcessor()
-      } else if (!processor) {
-        await localCameraTrack.setProcessor(BackgroundBlur(blurRadius))
-      } else {
-        await processor?.updateTransformerOptions({ blurRadius })
-      }
-    } catch (error) {
-      console.error('Error applying blur:', error)
-    } finally {
-      setProcessorPending(false)
-    }
-  }
-
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
-
-    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
-    attachVideoTrack()
-
-    return () => {
-      if (!videoElement) return
-      localCameraTrack.detach(videoElement)
-    }
-  }, [localCameraTrack, isCameraEnabled])
-
-  const isSelected = (blurRadius: BlurRadius) => {
-    return isCameraEnabled && getBlurRadius() == blurRadius
-  }
-
-  const tooltipLabel = (blurRadius: BlurRadius) => {
-    return t(`blur.${isSelected(blurRadius) ? 'clear' : 'apply'}`)
-  }
-
-  return (
-    <VStack padding="0 1.5rem" overflowY="scroll">
-      {localCameraTrack && isCameraEnabled ? (
-        <video
-          ref={videoRef}
-          width="100%"
-          muted
-          style={{
-            transform: 'rotateY(180deg)',
-            minHeight: '175px',
-            borderRadius: '8px',
-          }}
-        />
-      ) : (
-        <div
-          style={{
-            width: '100%',
-            height: '174px',
-            display: 'flex',
-            backgroundColor: 'black',
-            justifyContent: 'center',
-            flexDirection: 'column',
-          }}
-        >
-          <P
-            style={{
-              color: 'white',
-              textAlign: 'center',
-              textWrap: 'balance',
-              marginBottom: 0,
-            }}
-          >
-            {t('activateCamera')}
-          </P>
-        </div>
-      )}
-      <Div
-        alignItems={'left'}
-        width={'100%'}
-        style={{
-          border: '1px solid #dadce0',
-          borderRadius: '8px',
-          margin: '0 .625rem',
-          padding: '0.5rem 1rem',
-        }}
-      >
-        <H
-          lvl={3}
-          style={{
-            marginBottom: '0.4rem',
-          }}
-        >
-          {t('heading')}
-        </H>
-        {ProcessorWrapper.isSupported ? (
-          <HStack>
-            <ToggleButton
-              size={'sm'}
-              legacyStyle
-              aria-label={tooltipLabel(BlurRadius.LIGHT)}
-              tooltip={tooltipLabel(BlurRadius.LIGHT)}
-              isDisabled={processorPending}
-              onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
-              isSelected={isSelected(BlurRadius.LIGHT)}
-            >
-              {t('blur.light')}
-            </ToggleButton>
-            <ToggleButton
-              size={'sm'}
-              legacyStyle
-              aria-label={tooltipLabel(BlurRadius.NORMAL)}
-              tooltip={tooltipLabel(BlurRadius.NORMAL)}
-              isDisabled={processorPending}
-              onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
-              isSelected={isSelected(BlurRadius.NORMAL)}
-            >
-              {t('blur.normal')}
-            </ToggleButton>
-          </HStack>
-        ) : (
-          <Text variant="sm">{t('notAvailable')}</Text>
-        )}
-        <Information>
-          <Text
-            variant="sm"
-            style={{
-              textWrap: 'balance',
-            }}
-          >
-            ⚠︎ {t('experimental')}
-          </Text>
-        </Information>
-      </Div>
-    </VStack>
-  )
-}

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/SidePanel.tsx

@@ -1,131 +0,0 @@
-import { layoutStore } from '@/stores/layout'
-import { css } from '@/styled-system/css'
-import { Heading } from 'react-aria-components'
-import { text } from '@/primitives/Text'
-import { Box, Button, Div } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { ReactNode } from 'react'
-import { Effects } from './Effects'
-import { Chat } from '../prefabs/Chat'
-
-type StyledSidePanelProps = {
-  title: string
-  children: ReactNode
-  onClose: () => void
-  isClosed: boolean
-  closeButtonTooltip: string
-}
-
-const StyledSidePanel = ({
-  title,
-  children,
-  onClose,
-  isClosed,
-  closeButtonTooltip,
-}: StyledSidePanelProps) => (
-  <Box
-    size="sm"
-    className={css({
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      margin: '1.5rem 1.5rem 1.5rem 0',
-      padding: 0,
-      gap: 0,
-      right: 0,
-      top: 0,
-      bottom: '80px',
-      width: '360px',
-      position: 'absolute',
-      transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
-    })}
-    style={{
-      transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
-    }}
-  >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      {title}
-    </Heading>
-    <Div
-      position="absolute"
-      top="5"
-      right="5"
-      style={{
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      <Button
-        invisible
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    {children}
-  </Box>
-)
-
-type PanelProps = {
-  isOpen: boolean
-  children: React.ReactNode
-}
-
-const Panel = ({ isOpen, children }: PanelProps) => (
-  <div
-    style={{
-      display: isOpen ? 'inherit' : 'none',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      flexGrow: 1,
-    }}
-  >
-    {children}
-  </div>
-)
-
-export const SidePanel = () => {
-  const {
-    activePanelId,
-    isParticipantsOpen,
-    isEffectsOpen,
-    isChatOpen,
-    isSidePanelOpen,
-  } = useSidePanel()
-  const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
-
-  return (
-    <StyledSidePanel
-      title={t(`heading.${activePanelId}`)}
-      onClose={() => (layoutStore.activePanelId = null)}
-      closeButtonTooltip={t('closeButton', {
-        content: t(`content.${activePanelId}`),
-      })}
-      isClosed={!isSidePanelOpen}
-    >
-      <Panel isOpen={isParticipantsOpen}>
-        <ParticipantsList />
-      </Panel>
-      <Panel isOpen={isEffectsOpen}>
-        <Effects />
-      </Panel>
-      <Panel isOpen={isChatOpen}>
-        <Chat />
-      </Panel>
-    </StyledSidePanel>
-  )
-}

src/frontend/src/features/rooms/livekit/components/chat/Entry.tsx

@@ -1,71 +0,0 @@
-import type { ReceivedChatMessage } from '@livekit/components-core'
-import * as React from 'react'
-import { css } from '@/styled-system/css'
-import { Text } from '@/primitives'
-import { MessageFormatter } from '@livekit/components-react'
-
-export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
-  entry: ReceivedChatMessage
-  hideMetadata?: boolean
-  messageFormatter?: MessageFormatter
-}
-
-export const ChatEntry: (
-  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
-  HTMLLIElement,
-  ChatEntryProps
->(function ChatEntry(
-  { entry, hideMetadata = false, messageFormatter, ...props }: ChatEntryProps,
-  ref
-) {
-  // Fixme - Livekit messageFormatter strips '\n' char
-  const formattedMessage = React.useMemo(() => {
-    return messageFormatter ? messageFormatter(entry.message) : entry.message
-  }, [entry.message, messageFormatter])
-  const time = new Date(entry.timestamp)
-  const locale = navigator ? navigator.language : 'en-US'
-
-  return (
-    <li
-      className={css({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      })}
-      ref={ref}
-      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
-      data-lk-message-origin={entry.from?.isLocal ? 'local' : 'remote'}
-      {...props}
-    >
-      {!hideMetadata && (
-        <span
-          className={css({
-            display: 'flex',
-            gap: '0.5rem',
-            paddingTop: '0.75rem',
-          })}
-        >
-          <Text bold={true} variant="sm">
-            {entry.from?.name ?? entry.from?.identity}
-          </Text>
-          <Text variant="sm" className={css({ color: 'gray.700' })}>
-            {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
-          </Text>
-        </span>
-      )}
-      <Text
-        variant="sm"
-        margin={false}
-        className={css({
-          '& .lk-chat-link': {
-            color: 'blue',
-            textDecoration: 'underline',
-          },
-        })}
-      >
-        {formattedMessage}
-      </Text>
-    </li>
-  )
-})

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -1,120 +0,0 @@
-import { Button } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
-import { RiSendPlane2Fill } from '@remixicon/react'
-import { useState, useEffect } from 'react'
-import { TextArea } from '@/primitives/TextArea'
-import { RefObject } from 'react'
-import { useTranslation } from 'react-i18next'
-
-const MAX_ROWS = 6
-
-interface ChatInputProps {
-  inputRef: RefObject<HTMLTextAreaElement>
-  onSubmit: (text: string) => void
-  isSending: boolean
-}
-
-export const ChatInput = ({
-  inputRef,
-  onSubmit,
-  isSending,
-}: ChatInputProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
-  const [text, setText] = useState('')
-  const [rows, setRows] = useState(1)
-
-  const handleSubmit = () => {
-    onSubmit(text)
-    setText('')
-  }
-
-  const isDisabled = !text.trim() || isSending
-
-  const submitOnEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
-    e.preventDefault()
-    if (!isDisabled) handleSubmit()
-  }
-
-  useEffect(() => {
-    const resize = () => {
-      if (!inputRef.current) return
-
-      const textAreaLineHeight = 20 // Adjust this value based on your TextArea's line height
-      const previousRows = inputRef.current.rows
-      inputRef.current.rows = 1
-
-      const currentRows = Math.floor(
-        inputRef.current.scrollHeight / textAreaLineHeight
-      )
-
-      if (currentRows === previousRows) {
-        inputRef.current.rows = currentRows
-      }
-
-      if (currentRows >= MAX_ROWS) {
-        inputRef.current.rows = MAX_ROWS
-        inputRef.current.scrollTop = inputRef.current.scrollHeight
-      }
-
-      if (currentRows < MAX_ROWS) {
-        inputRef.current.style.overflowY = 'hidden'
-      } else {
-        inputRef.current.style.overflowY = 'auto'
-      }
-
-      setRows(currentRows < MAX_ROWS ? currentRows : MAX_ROWS)
-    }
-
-    resize()
-  }, [text, inputRef])
-
-  return (
-    <HStack
-      style={{
-        margin: '0.75rem 0 1.5rem',
-        padding: '0.5rem',
-        backgroundColor: '#f3f4f6',
-        borderRadius: 4,
-      }}
-    >
-      <TextArea
-        ref={inputRef}
-        onKeyDown={(e) => {
-          e.stopPropagation()
-          submitOnEnter(e)
-        }}
-        onKeyUp={(e) => e.stopPropagation()}
-        placeholder={t('textArea.placeholder')}
-        value={text}
-        onChange={(e) => {
-          setText(e.target.value)
-        }}
-        rows={rows || 1}
-        style={{
-          border: 'none',
-          resize: 'none',
-          height: 'auto',
-          minHeight: `34px`,
-          lineHeight: 1.25,
-          padding: '7px 10px',
-          overflowY: 'hidden',
-        }}
-        placeholderStyle={'strong'}
-        spellCheck={false}
-        maxLength={500}
-        aria-label={t('textArea.label')}
-      />
-      <Button
-        square
-        invisible
-        size="sm"
-        onPress={handleSubmit}
-        isDisabled={isDisabled}
-        aria-label={t('button.label')}
-      >
-        <RiSendPlane2Fill />
-      </Button>
-    </HStack>
-  )
-}

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

@@ -1,52 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiChat1Line } from '@remixicon/react'
-import { useSnapshot } from 'valtio'
-import { css } from '@/styled-system/css'
-import { ToggleButton } from '@/primitives'
-import { chatStore } from '@/stores/chat'
-import { useSidePanel } from '../../hooks/useSidePanel'
-
-export const ChatToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
-
-  const chatSnap = useSnapshot(chatStore)
-
-  const { isChatOpen, toggleChat } = useSidePanel()
-  const tooltipLabel = isChatOpen ? 'open' : 'closed'
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isChatOpen}
-        onPress={() => toggleChat()}
-        data-attr={`controls-chat-${tooltipLabel}`}
-      >
-        <RiChat1Line />
-      </ToggleButton>
-      {!!chatSnap.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,38 +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'
-
-export const HandToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
-
-  const room = useRoomContext()
-  const { isHandRaised, toggleRaisedHand } = useRaisedHand({
-    participant: room.localParticipant,
-  })
-
-  const tooltipLabel = isHandRaised ? 'lower' : 'raise'
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isHandRaised}
-        onPress={() => toggleRaisedHand()}
-        data-attr={`controls-hand-${tooltipLabel}`}
-      >
-        <RiHand />
-      </ToggleButton>
-    </div>
-  )
-}

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

@@ -1,37 +0,0 @@
-import { useConnectionState, useRoomContext } from '@livekit/components-react'
-import { Button } from '@/primitives'
-import { navigateTo } from '@/navigation/navigateTo'
-import { RiPhoneFill } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { ConnectionState } from 'livekit-client'
-
-export const LeaveButton = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-  const room = useRoomContext()
-  const connectionState = useConnectionState(room)
-  return (
-    <Button
-      isDisabled={connectionState === ConnectionState.Disconnected}
-      variant={'danger'}
-      tooltip={t('leave')}
-      aria-label={t('leave')}
-      onPress={() => {
-        room
-          .disconnect(true)
-          .catch((e) =>
-            console.error('An error occurred while disconnecting:', e)
-          )
-          .finally(() => {
-            navigateTo('feedback')
-          })
-      }}
-      data-attr="controls-leave"
-    >
-      <RiPhoneFill
-        style={{
-          transform: 'rotate(135deg)',
-        }}
-      />
-    </Button>
-  )
-}

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,60 +0,0 @@
-import { menuItemRecipe } from '@/primitives/menuItemRecipe'
-import {
-  RiAccountBoxLine,
-  RiMegaphoneLine,
-  RiSettings3Line,
-} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from './OptionsButton'
-import { Separator } from '@/primitives/Separator'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { RecordingMenuItem } from '@/features/rooms/livekit/components/controls/Options/RecordingMenuItem'
-
-// @todo try refactoring it to use MenuList component
-export const OptionsMenuItems = ({
-  onOpenDialog,
-}: {
-  onOpenDialog: Dispatch<SetStateAction<DialogState>>
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
-  return (
-    <RACMenu
-      style={{
-        minWidth: '150px',
-        width: '300px',
-      }}
-    >
-      <Section>
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
-        <RecordingMenuItem />
-      </Section>
-      <Separator />
-      <Section>
-        <MenuItem
-          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-          target="_blank"
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiMegaphoneLine size={20} />
-          {t('feedbacks')}
-        </MenuItem>
-        <MenuItem
-          className={menuItemRecipe({ icon: true })}
-          onAction={() => onOpenDialog('settings')}
-        >
-          <RiSettings3Line size={20} />
-          {t('settings')}
-        </MenuItem>
-      </Section>
-    </RACMenu>
-  )
-}

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

@@ -1,52 +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.ts'
-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)
-      egressStore.egressIsStopping = 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} />
-          Arrêter l'enregistrement
-        </>
-      ) : (
-        <>
-          <RiRecordCircleLine size={18} />
-          Enregistrer la réunion
-        </>
-      )}
-    </MenuItem>
-  )
-}

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

@@ -1,82 +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 })}
-        data-attr="participants-lower-hand"
-      >
-        <RiHand />
-      </Button>
-    </HStack>
-  )
-}

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

@@ -1,27 +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)}
-      data-attr="participants-lower-hands"
-    >
-      {t('participants.lowerParticipantsHand')}
-    </Button>
-  )
-}

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

@@ -1,163 +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)
-        }
-        data-attr="participants-mute"
-      >
-        {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,76 +0,0 @@
-import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
-
-import { Div, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
-import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '../../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', { keyPrefix: 'participants' })
-
-  // 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()
-
-  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 (
-    <Div overflowY="scroll">
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: '#5f6368',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
-      >
-        {t('subheading').toUpperCase()}
-      </H>
-      {raisedHandParticipants.length > 0 && (
-        <Div marginBottom=".9375rem">
-          <ParticipantsCollapsableList
-            heading={t('raisedHands')}
-            participants={raisedHandParticipants}
-            renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
-            )}
-            action={() => (
-              <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
-          />
-        </Div>
-      )}
-      <ParticipantsCollapsableList
-        heading={t('contributors')}
-        participants={sortedParticipants}
-        renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
-        )}
-      />
-    </Div>
-  )
-}

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

@@ -1,68 +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 { useSidePanel } from '../../../hooks/useSidePanel'
-
-export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
-
-  /**
-   * 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 } = useSidePanel()
-
-  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isParticipantsOpen}
-        onPress={() => toggleParticipants()}
-        data-attr={`controls-participants-${tooltipLabel}`}
-      >
-        <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/ScreenShareToggle.tsx

@@ -1,56 +0,0 @@
-import { Div, ToggleButton } from '@/primitives'
-import { RiArrowUpLine, RiCloseFill, RiRectangleLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
-import { Track } from 'livekit-client'
-import React from 'react'
-
-export const ScreenShareToggle = (
-  props: Omit<
-    UseTrackToggleProps<Track.Source.ScreenShare>,
-    'source' | 'captureOptions'
-  >
-) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' })
-  const { buttonProps, enabled } = useTrackToggle({
-    ...props,
-    source: Track.Source.ScreenShare,
-    captureOptions: { audio: true, selfBrowserSurface: 'include' },
-  })
-
-  const tooltipLabel = enabled ? 'stop' : 'start'
-  const Icon = enabled ? RiCloseFill : RiArrowUpLine
-
-  // fixme - remove ToggleButton custom styles when we design a proper icon
-  return (
-    <ToggleButton
-      isSelected={enabled}
-      square
-      legacyStyle
-      tooltip={t(tooltipLabel)}
-      onPress={(e) =>
-        buttonProps.onClick?.(
-          e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>
-        )
-      }
-      style={{
-        maxWidth: '46px',
-        maxHeight: '46px',
-      }}
-      data-attr={`controls-screenshare-${tooltipLabel}`}
-    >
-      <Div position="relative">
-        <RiRectangleLine size={28} />
-        <Icon
-          size={16}
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}
-        />
-      </Div>
-    </ToggleButton>
-  )
-}

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

@@ -1,114 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import {
-  useMediaDeviceSelect,
-  useTrackToggle,
-  UseTrackToggleProps,
-} from '@livekit/components-react'
-import { HStack } from '@/styled-system/jsx'
-import { Button, Menu, MenuList } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import { Track } from 'livekit-client'
-
-import { Shortcut } from '@/features/shortcuts/types'
-
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
-
-type SelectToggleDeviceProps<T extends ToggleSource> =
-  UseTrackToggleProps<T> & {
-    onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
-  }
-
-export const SelectToggleDevice = <T extends ToggleSource>({
-  onActiveDeviceChange,
-  ...props
-}: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const trackProps = useTrackToggle(props)
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind })
-
-  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
-
-  return (
-    <HStack gap={0}>
-      <ToggleDevice {...trackProps} config={config} />
-      <Menu>
-        <Button
-          tooltip={selectLabel}
-          aria-label={selectLabel}
-          groupPosition="right"
-          square
-        >
-          <RiArrowDownSLine />
-        </Button>
-        <MenuList
-          items={devices.map((d) => ({
-            value: d.deviceId,
-            label: d.label,
-          }))}
-          selectedItem={activeDeviceId}
-          onAction={(value) => {
-            setActiveMediaDevice(value as string)
-            onActiveDeviceChange(value as string)
-          }}
-        />
-      </Menu>
-    </HStack>
-  )
-}

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/components/controls/ToggleDevice.tsx

@@ -1,71 +0,0 @@
-import { ToggleButton } from '@/primitives'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useMemo, useState } from 'react'
-import { appendShortcutLabel } from '@/features/shortcuts/utils'
-import { useTranslation } from 'react-i18next'
-import { SelectToggleDeviceConfig } from './SelectToggleDevice'
-import useLongPress from '@/features/shortcuts/useLongPress'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
-
-export type ToggleDeviceProps = {
-  enabled: boolean
-  toggle: () => void
-  config: SelectToggleDeviceConfig
-}
-
-export const ToggleDevice = ({
-  config,
-  enabled,
-  toggle,
-}: ToggleDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const { kind, shortcut, iconOn, iconOff, longPress } = config
-
-  const [pushToTalk, setPushToTalk] = useState(false)
-
-  const onKeyDown = () => {
-    if (pushToTalk || enabled) return
-    toggle()
-    setPushToTalk(true)
-  }
-  const onKeyUp = () => {
-    if (!pushToTalk) return
-    toggle()
-    setPushToTalk(false)
-  }
-
-  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
-  useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })
-
-  const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `join.${kind}`,
-    })
-    return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [enabled, kind, shortcut, t])
-
-  const Icon = enabled ? iconOn : iconOff
-
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  if (kind === 'audioinput' && pushToTalk) {
-    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-  }
-
-  return (
-    <ToggleButton
-      isSelected={enabled}
-      variant={enabled ? undefined : 'danger'}
-      toggledStyles={false}
-      onPress={() => toggle()}
-      aria-label={toggleLabel}
-      tooltip={toggleLabel}
-      groupPosition="left"
-    >
-      <Icon />
-    </ToggleButton>
-  )
-}

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.ts

@@ -1,23 +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) {
-  // fixme - refactor this part to rely on attributes
-  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/useSidePanel.ts

@@ -1,41 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
-
-export enum PanelId {
-  PARTICIPANTS = 'participants',
-  EFFECTS = 'effects',
-  CHAT = 'chat',
-}
-
-export const useSidePanel = () => {
-  const layoutSnap = useSnapshot(layoutStore)
-  const activePanelId = layoutSnap.activePanelId
-
-  const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
-  const isEffectsOpen = activePanelId == PanelId.EFFECTS
-  const isChatOpen = activePanelId == PanelId.CHAT
-  const isSidePanelOpen = !!activePanelId
-
-  const toggleParticipants = () => {
-    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
-  }
-
-  const toggleChat = () => {
-    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
-  }
-
-  const toggleEffects = () => {
-    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
-  }
-
-  return {
-    activePanelId,
-    toggleParticipants,
-    toggleChat,
-    toggleEffects,
-    isChatOpen,
-    isParticipantsOpen,
-    isEffectsOpen,
-    isSidePanelOpen,
-  }
-}

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

@@ -1,134 +0,0 @@
-import type { ChatMessage, ChatOptions } from '@livekit/components-core'
-import * as React from 'react'
-import {
-  formatChatMessageLinks,
-  useChat,
-  useParticipants,
-} from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { chatStore } from '@/stores/chat'
-import { Div, Text } from '@/primitives'
-import { ChatInput } from '../components/chat/Input'
-import { ChatEntry } from '../components/chat/Entry'
-import { useSidePanel } from '../hooks/useSidePanel'
-
-export interface ChatProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    ChatOptions {}
-
-/**
- * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants
- * in the room. Only users who are in the room at the time of dispatch will receive the message.
- */
-export function Chat({ ...props }: ChatProps) {
-  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
-
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
-  const ulRef = React.useRef<HTMLUListElement>(null)
-
-  const { send, chatMessages, isSending } = useChat()
-
-  const { isChatOpen } = useSidePanel()
-  const chatSnap = useSnapshot(chatStore)
-
-  // Use useParticipants hook to trigger a re-render when the participant list changes.
-  const participants = useParticipants()
-
-  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
-
-  async function handleSubmit(text: string) {
-    if (!send || !text) return
-    await send(text)
-    inputRef?.current?.focus()
-  }
-
-  React.useEffect(() => {
-    if (chatMessages.length > 0 && ulRef.current) {
-      ulRef.current?.scrollTo({ top: ulRef.current.scrollHeight })
-    }
-  }, [ulRef, chatMessages])
-
-  React.useEffect(() => {
-    if (chatMessages.length === 0) {
-      return
-    }
-    if (
-      isChatOpen &&
-      lastReadMsgAt.current !== chatMessages[chatMessages.length - 1]?.timestamp
-    ) {
-      lastReadMsgAt.current = chatMessages[chatMessages.length - 1]?.timestamp
-      chatStore.unreadMessages = 0
-      return
-    }
-
-    const unreadMessageCount = chatMessages.filter(
-      (msg) => !lastReadMsgAt.current || msg.timestamp > lastReadMsgAt.current
-    ).length
-
-    if (
-      unreadMessageCount > 0 &&
-      chatSnap.unreadMessages !== unreadMessageCount
-    ) {
-      chatStore.unreadMessages = unreadMessageCount
-    }
-  }, [chatMessages, chatSnap.unreadMessages, isChatOpen])
-
-  const renderedMessages = React.useMemo(() => {
-    return chatMessages.map((msg, idx, allMsg) => {
-      const hideMetadata =
-        idx >= 1 &&
-        msg.timestamp - allMsg[idx - 1].timestamp < 60_000 &&
-        allMsg[idx - 1].from === msg.from
-
-      return (
-        <ChatEntry
-          key={msg.id ?? idx}
-          hideMetadata={hideMetadata}
-          entry={msg}
-          messageFormatter={formatChatMessageLinks}
-        />
-      )
-    })
-    // This ensures that the chat message list is updated to reflect any changes in participant information.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatMessages, participants])
-
-  return (
-    <Div
-      display={'flex'}
-      padding={'0 1.5rem'}
-      flexGrow={1}
-      flexDirection={'column'}
-      minHeight={0}
-      {...props}
-    >
-      <Text
-        variant="sm"
-        style={{
-          padding: '0.75rem',
-          backgroundColor: '#f3f4f6',
-          borderRadius: 4,
-          marginBottom: '0.75rem',
-        }}
-      >
-        {t('disclaimer')}
-      </Text>
-      <Div
-        flexGrow={1}
-        flexDirection={'column'}
-        minHeight={0}
-        overflowY="scroll"
-      >
-        <ul className="lk-list lk-chat-messages" ref={ulRef}>
-          {renderedMessages}
-        </ul>
-      </Div>
-      <ChatInput
-        inputRef={inputRef}
-        onSubmit={(e) => handleSubmit(e)}
-        isSending={isSending}
-      />
-    </Div>
-  )
-}

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

@@ -1,156 +0,0 @@
-import { Track } from 'livekit-client'
-import * as React from 'react'
-
-import { supportsScreenSharing } from '@livekit/components-core'
-
-import {
-  useMaybeLayoutContext,
-  usePersistentUserChoices,
-} from '@livekit/components-react'
-
-import { StartMediaButton } from '../components/controls/StartMediaButton'
-import { useMediaQuery } from '../hooks/useMediaQuery'
-import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '../components/controls/ChatToggle'
-import { HandToggle } from '../components/controls/HandToggle'
-import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
-import { LeaveButton } from '../components/controls/LeaveButton'
-import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
-import { css } from '@/styled-system/css'
-
-/** @public */
-export type ControlBarControls = {
-  microphone?: boolean
-  camera?: boolean
-  chat?: boolean
-  screenShare?: boolean
-  leave?: boolean
-  settings?: boolean
-}
-
-/** @public */
-export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
-  variation?: 'minimal' | 'verbose' | 'textOnly'
-  controls?: ControlBarControls
-  /**
-   * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
-   * @defaultValue true
-   * @alpha
-   */
-  saveUserChoices?: boolean
-}
-
-/**
- * The `ControlBar` prefab gives the user the basic user interface to control their
- * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
- *
- * @remarks
- * This component is build with other LiveKit components like `TrackToggle`,
- * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <ControlBar />
- * </LiveKitRoom>
- * ```
- * @public
- */
-export function ControlBar({
-  variation,
-  saveUserChoices = true,
-  onDeviceError,
-}: ControlBarProps) {
-  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 browserSupportsScreenSharing = supportsScreenSharing()
-
-  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
-      className={css({
-        display: 'flex',
-        gap: '.5rem',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '.75rem',
-        borderTop: '1px solid var(--lk-border-color)',
-        maxHeight: 'var(--lk-control-bar-height)',
-        height: '80px',
-        position: 'absolute',
-        backgroundColor: '#d1d5db',
-        bottom: 0,
-        left: 0,
-        right: 0,
-      })}
-    >
-      <SelectToggleDevice
-        source={Track.Source.Microphone}
-        onChange={microphoneOnChange}
-        onDeviceError={(error) =>
-          onDeviceError?.({ source: Track.Source.Microphone, error })
-        }
-        onActiveDeviceChange={(deviceId) =>
-          saveAudioInputDeviceId(deviceId ?? '')
-        }
-      />
-      <SelectToggleDevice
-        source={Track.Source.Camera}
-        onChange={cameraOnChange}
-        onDeviceError={(error) =>
-          onDeviceError?.({ source: Track.Source.Camera, error })
-        }
-        onActiveDeviceChange={(deviceId) =>
-          saveVideoInputDeviceId(deviceId ?? '')
-        }
-      />
-      {browserSupportsScreenSharing && (
-        <ScreenShareToggle
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.ScreenShare, error })
-          }
-        />
-      )}
-      <HandToggle />
-      <ChatToggle />
-      <ParticipantsToggle />
-      <OptionsButton />
-      <LeaveButton />
-      <StartMediaButton />
-    </div>
-  )
-}