✨(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,17 +1,18 @@
 # 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
+FROM base as back-builder
 
 WORKDIR /builder
 
@@ -23,7 +24,7 @@ RUN mkdir /install && \
 
 
 # ---- mails ----
-FROM node:20 AS mail-builder
+FROM node:20 as mail-builder
 
 COPY ./src/mail /mail/app
 
@@ -34,12 +35,15 @@ RUN yarn install --frozen-lockfile && \
 
 
 # ---- static link collector ----
-FROM base AS link-collector
+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
@@ -58,18 +62,21 @@ RUN DJANGO_CONFIGURATION=Build DJANGO_JWT_PRIVATE_SIGNING_KEY=Dummy \
 RUN rdfind -makesymlinks true -followsymlinks true -makeresultsfile false ${MEET_STATIC_ROOT}
 
 # ---- Core application image ----
-FROM base AS core
+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
@@ -93,13 +100,15 @@ WORKDIR /app
 ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
 
 # ---- Development image ----
-FROM core AS backend-development
+FROM core as backend-development
 
 # Switch back to the root user to install development dependencies
 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
@@ -119,7 +128,7 @@ ENV DB_HOST=postgresql \
 CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
 
 # ---- Production image ----
-FROM core AS backend-production
+FROM core as backend-production
 
 ARG MEET_STATIC_ROOT=/data/static
 

Makefile

@@ -302,7 +302,6 @@ build-k8s-cluster: ## build the kubernetes cluster using kind
 .PHONY: build-k8s-cluster
 
 start-tilt: ## start the kubernetes cluster using kind
-	kubectl config set-context --current --namespace=meet
 	tilt up -f ./bin/Tiltfile
 .PHONY: build-k8s-cluster
 

bin/_config.sh

@@ -5,7 +5,8 @@ set -eo pipefail
 REPO_DIR="$(cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd)"
 UNSET_USER=0
 
-COMPOSE_FILE="${REPO_DIR}/compose.yml"
+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/start-kind.sh

@@ -97,41 +97,6 @@ data:
     help: "https://kind.sigs.k8s.io/docs/user/local-registry/"
 EOF
 
-cat <<EOF | kubectl apply -f -
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: coredns
-  namespace: kube-system
-data:
-  Corefile: |
-    .:53 {
-        errors
-        health {
-          lameduck 5s
-        }
-        ready
-        kubernetes cluster.local in-addr.arpa ip6.arpa {
-          pods insecure
-          fallthrough in-addr.arpa ip6.arpa
-          ttl 30
-        }
-        prometheus :9153
-        forward . /etc/resolv.conf {
-          max_concurrent 1000
-        }
-        rewrite stop {
-          name regex (.*).127.0.0.1.nip.io ingress-nginx-controller.ingress-nginx.svc.cluster.local answer auto
-        }
-        cache 30
-        loop
-        reload
-        loadbalance
-    }
-EOF
-
-kubectl -n kube-system rollout restart deployments/coredns
-
 echo "6. Install ingress-nginx"
 kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml
 kubectl -n ingress-nginx create secret tls mkcert --key /tmp/127.0.0.1.nip.io+1-key.pem --cert /tmp/127.0.0.1.nip.io+1.pem

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

docker-compose.yml

@@ -1,3 +1,4 @@
+version: '3.8'
 
 services:
   postgresql:

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/.pylintrc

@@ -447,10 +447,10 @@ max-bool-expr=5
 max-branches=12
 
 # Maximum number of locals for function / method body
-max-locals=20
+max-locals=15
 
 # Maximum number of parents for a class (see R0901).
-max-parents=10
+max-parents=7
 
 # Maximum number of public methods for a class (see R0904).
 max-public-methods=20

src/backend/core/admin.py

@@ -77,18 +77,3 @@ class RoomAdmin(admin.ModelAdmin):
     """Room admin interface declaration."""
 
     inlines = (ResourceAccessInline,)
-
-
-class RecordingAccessInline(admin.TabularInline):
-    """Inline admin class for recording accesses."""
-
-    model = models.RecordingAccess
-    extra = 0
-
-
-@admin.register(models.Recording)
-class RecordingAdmin(admin.ModelAdmin):
-    """Recording admin interface declaration."""
-
-    inlines = (RecordingAccessInline,)
-    list_display = ("id", "status", "room", "created_at", "worker_id")

src/backend/core/analytics.py

@@ -0,0 +1,58 @@
+"""
+Meet analytics class.
+"""
+
+import uuid
+
+from django.conf import settings
+
+from june import analytics as jAnalytics
+
+
+class Analytics:
+    """Analytics integration
+
+    This class wraps the June analytics code to avoid coupling our code directly
+    with this third-party library. By doing so, we create a generic interface
+    for analytics that can be easily modified or replaced in the future.
+    """
+
+    def __init__(self):
+        key = getattr(settings, "ANALYTICS_KEY", None)
+
+        if key is not None:
+            jAnalytics.write_key = key
+
+        self._enabled = key is not None
+
+    def _is_anonymous_user(self, user):
+        """Check if the user is anonymous."""
+        return user is None or user.is_anonymous
+
+    def identify(self, user, **kwargs):
+        """Identify a user"""
+
+        if self._is_anonymous_user(user) or not self._enabled:
+            return
+
+        traits = kwargs.pop("traits", {})
+        traits.update({"email": user.email_anonymized})
+
+        jAnalytics.identify(user_id=user.sub, traits=traits, **kwargs)
+
+    def track(self, user, **kwargs):
+        """Track an event"""
+
+        if not self._enabled:
+            return
+
+        event_data = {}
+        if self._is_anonymous_user(user):
+            event_data["anonymous_id"] = str(uuid.uuid4())
+        else:
+            event_data["user_id"] = user.sub
+
+        jAnalytics.track(**event_data, **kwargs)
+
+
+analytics = Analytics()

src/backend/core/api/permissions.py

@@ -65,11 +65,15 @@ class RoomPermissions(permissions.BasePermission):
         return obj.is_administrator(user)
 
 
-class ResourceAccessPermission(IsAuthenticated):
+class ResourceAccessPermission(permissions.BasePermission):
     """
     Permissions for a room that can only be updated by room administrators.
     """
 
+    def has_permission(self, request, view):
+        """Only allow authenticated users."""
+        return request.user.is_authenticated
+
     def has_object_permission(self, request, view, obj):
         """
         Check that the logged-in user is administrator of the linked room.
@@ -79,11 +83,3 @@ class ResourceAccessPermission(IsAuthenticated):
             return obj.user == user
 
         return obj.resource.is_administrator(user)
-
-
-class HasAbilityPermission(IsAuthenticated):
-    """Permission class for access objects."""
-
-    def has_object_permission(self, request, view, obj):
-        """Check permission for a given object."""
-        return obj.get_abilities(request.user).get(view.action, False)

src/backend/core/api/serializers.py

@@ -87,15 +87,6 @@ class NestedResourceAccessSerializer(ResourceAccessSerializer):
     user = UserSerializer(read_only=True)
 
 
-class ListRoomSerializer(serializers.ModelSerializer):
-    """Serialize Room model for a list API endpoint."""
-
-    class Meta:
-        model = models.Room
-        fields = ["id", "name", "slug", "is_public"]
-        read_only_fields = ["id", "slug"]
-
-
 class RoomSerializer(serializers.ModelSerializer):
     """Serialize Room model for the API."""
 
@@ -132,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"],
@@ -145,14 +136,3 @@ class RoomSerializer(serializers.ModelSerializer):
         output["is_administrable"] = is_admin
 
         return output
-
-
-class RecordingSerializer(serializers.ModelSerializer):
-    """Serialize Recording for the API."""
-
-    room = ListRoomSerializer(read_only=True)
-
-    class Meta:
-        model = models.Recording
-        fields = ["id", "room", "created_at", "updated_at", "status"]
-        read_only_fields = fields

src/backend/core/api/viewsets.py

@@ -20,6 +20,7 @@ from rest_framework import (
 
 from core import models, utils
 
+from ..analytics import analytics
 from . import permissions, serializers
 
 # pylint: disable=too-many-ancestors
@@ -185,6 +186,13 @@ class RoomViewSet(
         """
         try:
             instance = self.get_object()
+
+            analytics.track(
+                user=self.request.user,
+                event="Get Room",
+                properties={"slug": instance.slug},
+            )
+
         except Http404:
             if not settings.ALLOW_UNREGISTERED_ROOMS:
                 raise
@@ -233,6 +241,14 @@ class RoomViewSet(
             role=models.RoleChoices.OWNER,
         )
 
+        analytics.track(
+            user=self.request.user,
+            event="Create Room",
+            properties={
+                "slug": room.slug,
+            },
+        )
+
 
 class ResourceAccessListModelMixin:
     """List mixin for resource access API."""
@@ -277,27 +293,3 @@ class ResourceAccessViewSet(
     permission_classes = [permissions.ResourceAccessPermission]
     queryset = models.ResourceAccess.objects.all()
     serializer_class = serializers.ResourceAccessSerializer
-
-
-class RecordingViewSet(
-    mixins.DestroyModelMixin,
-    mixins.ListModelMixin,
-    viewsets.GenericViewSet,
-):
-    """
-    API endpoints to access and perform actions on recordings.
-    """
-
-    pagination_class = Pagination
-    permission_classes = [permissions.HasAbilityPermission]
-    queryset = models.Recording.objects.all()
-    serializer_class = serializers.RecordingSerializer
-
-    def get_queryset(self):
-        """Restrict recordings to the user's ones."""
-        user = self.request.user
-        return (
-            super()
-            .get_queryset()
-            .filter(Q(accesses__user=user) | Q(accesses__team__in=user.get_teams()))
-        )

src/backend/core/authentication/backends.py

@@ -10,6 +10,8 @@ from mozilla_django_oidc.auth import (
 
 from core.models import User
 
+from ..analytics import analytics
+
 
 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
     """Custom OpenID Connect (OIDC) Authentication Backend.
@@ -79,6 +81,7 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
             else:
                 user = None
 
+        analytics.identify(user=user)
         return user
 
     def create_user(self, claims):

src/backend/core/authentication/views.py

@@ -22,6 +22,8 @@ from mozilla_django_oidc.views import (
     OIDCLogoutView as MozillaOIDCOIDCLogoutView,
 )
 
+from ..analytics import analytics
+
 
 class OIDCLogoutView(MozillaOIDCOIDCLogoutView):
     """Custom logout view for handling OpenID Connect (OIDC) logout flow.
@@ -98,6 +100,10 @@ class OIDCLogoutView(MozillaOIDCOIDCLogoutView):
 
         logout_url = self.redirect_url
 
+        analytics.track(
+            user=request.user,
+            event="Signed Out",
+        )
         if request.user.is_authenticated:
             logout_url = self.construct_oidc_logout_url(request)
 

src/backend/core/factories.py

@@ -65,48 +65,3 @@ class RoomFactory(ResourceFactory):
 
     name = factory.Faker("catch_phrase")
     slug = factory.LazyAttribute(lambda o: slugify(o.name))
-
-
-class RecordingFactory(factory.django.DjangoModelFactory):
-    """Create fake recording for testing."""
-
-    class Meta:
-        model = models.Recording
-
-    room = factory.SubFactory(RoomFactory)
-    status = models.RecordingStatusChoices.INITIATED
-    worker_id = None
-
-    @factory.post_generation
-    def users(self, create, extracted, **kwargs):
-        """Add users to recording from a given list of users with or without roles."""
-        if create and extracted:
-            for item in extracted:
-                if isinstance(item, models.User):
-                    UserRecordingAccessFactory(recording=self, user=item)
-                else:
-                    UserRecordingAccessFactory(
-                        recording=self, user=item[0], role=item[1]
-                    )
-
-
-class UserRecordingAccessFactory(factory.django.DjangoModelFactory):
-    """Create fake recording user accesses for testing."""
-
-    class Meta:
-        model = models.RecordingAccess
-
-    recording = factory.SubFactory(RecordingFactory)
-    user = factory.SubFactory(UserFactory)
-    role = factory.fuzzy.FuzzyChoice(models.RoleChoices.values)
-
-
-class TeamRecordingAccessFactory(factory.django.DjangoModelFactory):
-    """Create fake recording team accesses for testing."""
-
-    class Meta:
-        model = models.RecordingAccess
-
-    recording = factory.SubFactory(RecordingFactory)
-    team = factory.Sequence(lambda n: f"team{n}")
-    role = factory.fuzzy.FuzzyChoice(models.RoleChoices.values)

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/migrations/0005_recording_recordingaccess_and_more.py

@@ -1,67 +0,0 @@
-# Generated by Django 5.1.1 on 2024-11-06 14:31
-
-import django.db.models.deletion
-import uuid
-from django.conf import settings
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0004_alter_user_language'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='Recording',
-            fields=[
-                ('id', models.UUIDField(default=uuid.uuid4, editable=False, help_text='primary key for the record as UUID', primary_key=True, serialize=False, verbose_name='id')),
-                ('created_at', models.DateTimeField(auto_now_add=True, help_text='date and time at which a record was created', verbose_name='created on')),
-                ('updated_at', models.DateTimeField(auto_now=True, help_text='date and time at which a record was last updated', verbose_name='updated on')),
-                ('status', models.CharField(choices=[('initiated', 'Initiated'), ('active', 'Active'), ('stopped', 'Stopped'), ('saved', 'Saved'), ('aborted', 'Aborted'), ('failed_to_start', 'Failed to Start'), ('failed_to_stop', 'Failed to Stop')], default='initiated', max_length=20)),
-                ('worker_id', models.CharField(blank=True, help_text='Enter an identifier for the worker recording.This ID is retained even when the worker stops, allowing for easy tracking.', max_length=255, null=True, verbose_name='Worker ID')),
-                ('room', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='recordings', to='core.room', verbose_name='Room')),
-            ],
-            options={
-                'verbose_name': 'Recording',
-                'verbose_name_plural': 'Recordings',
-                'db_table': 'meet_recording',
-                'ordering': ('-created_at',),
-            },
-        ),
-        migrations.CreateModel(
-            name='RecordingAccess',
-            fields=[
-                ('id', models.UUIDField(default=uuid.uuid4, editable=False, help_text='primary key for the record as UUID', primary_key=True, serialize=False, verbose_name='id')),
-                ('created_at', models.DateTimeField(auto_now_add=True, help_text='date and time at which a record was created', verbose_name='created on')),
-                ('updated_at', models.DateTimeField(auto_now=True, help_text='date and time at which a record was last updated', verbose_name='updated on')),
-                ('team', models.CharField(blank=True, max_length=100)),
-                ('role', models.CharField(choices=[('member', 'Member'), ('administrator', 'Administrator'), ('owner', 'Owner')], default='member', max_length=20)),
-                ('recording', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='accesses', to='core.recording')),
-                ('user', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
-            ],
-            options={
-                'verbose_name': 'Recording/user relation',
-                'verbose_name_plural': 'Recording/user relations',
-                'db_table': 'meet_recording_access',
-                'ordering': ('-created_at',),
-            },
-        ),
-        migrations.AddConstraint(
-            model_name='recording',
-            constraint=models.UniqueConstraint(condition=models.Q(('status__in', ['active', 'initiated'])), fields=('room',), name='unique_initiated_or_active_recording_per_room'),
-        ),
-        migrations.AddConstraint(
-            model_name='recordingaccess',
-            constraint=models.UniqueConstraint(condition=models.Q(('user__isnull', False)), fields=('user', 'recording'), name='unique_recording_user', violation_error_message='This user is already in this recording.'),
-        ),
-        migrations.AddConstraint(
-            model_name='recordingaccess',
-            constraint=models.UniqueConstraint(condition=models.Q(('team__gt', '')), fields=('team', 'recording'), name='unique_recording_team', violation_error_message='This team is already in this recording.'),
-        ),
-        migrations.AddConstraint(
-            model_name='recordingaccess',
-            constraint=models.CheckConstraint(condition=models.Q(models.Q(('team', ''), ('user__isnull', False)), models.Q(('team__gt', ''), ('user__isnull', True)), _connector='OR'), name='check_recording_access_either_user_or_team', violation_error_message='Either user or team must be set, not both.'),
-        ),
-    ]

src/backend/core/models.py

@@ -4,7 +4,6 @@ Declare and configure the models for the Meet core application
 
 import uuid
 from logging import getLogger
-from typing import List
 
 from django.conf import settings
 from django.contrib.auth import models as auth_models
@@ -39,39 +38,6 @@ class RoleChoices(models.TextChoices):
         return role == cls.OWNER
 
 
-class RecordingStatusChoices(models.TextChoices):
-    """Enumeration of possible states for a recording operation."""
-
-    INITIATED = "initiated", _("Initiated")
-    ACTIVE = "active", _("Active")
-    STOPPED = "stopped", _("Stopped")
-    SAVED = "saved", _("Saved")
-    ABORTED = "aborted", _("Aborted")
-    FAILED_TO_START = "failed_to_start", _("Failed to Start")
-    FAILED_TO_STOP = "failed_to_stop", _("Failed to Stop")
-
-    @classmethod
-    def is_final(cls, status):
-        """Determine if the recording status represents a final state.
-
-        A final status indicates the recording flow has completed, either
-        successfully or unsuccessfully.
-        """
-
-        return status in {
-            cls.STOPPED,
-            cls.SAVED,
-            cls.ABORTED,
-            cls.FAILED_TO_START,
-            cls.FAILED_TO_STOP,
-        }
-
-    @classmethod
-    def is_unsuccessful(cls, status):
-        """Determine if the recording status represents an unsuccessful state."""
-        return status in {cls.ABORTED, cls.FAILED_TO_START, cls.FAILED_TO_STOP}
-
-
 class BaseModel(models.Model):
     """
     Serves as an abstract base model for other models, ensuring that records are validated
@@ -205,38 +171,10 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
         return f"***@{self.email.split('@')[1]}"
 
 
-def get_resource_roles(resource: models.Model, user: User) -> List[str]:
-    """
-    Get all roles assigned to a user for a specific resource, including team-based roles.
-
-    Args:
-        resource: The resource to check permissions for
-        user: The user to get roles for
-
-    Returns:
-        List of role strings assigned to the user
-    """
-    if not user.is_authenticated:
-        return []
-
-    # Use pre-annotated roles if available from viewset optimization
-    if hasattr(resource, "user_roles"):
-        return resource.user_roles or []
-
-    try:
-        return list(
-            resource.accesses.filter_user(user)
-            .values_list("role", flat=True)
-            .distinct()
-        )
-    except (IndexError, models.ObjectDoesNotExist):
-        return []
-
-
 class Resource(BaseModel):
     """Model to define access control"""
 
-    is_public = models.BooleanField(default=settings.RESOURCE_DEFAULT_IS_PUBLIC)
+    is_public = models.BooleanField(default=settings.DEFAULT_ROOM_IS_PUBLIC)
     users = models.ManyToManyField(
         User,
         through="ResourceAccess",
@@ -358,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."),
     )
@@ -387,206 +325,3 @@ class Room(Resource):
         else:
             raise ValidationError({"name": f'Room name "{self.name:s}" is reserved.'})
         super().clean_fields(exclude=exclude)
-
-
-class BaseAccessManager(models.Manager):
-    """Base manager for handling resource access control."""
-
-    def filter_user(self, user):
-        """Filter accesses for a given user, including both direct and team-based access."""
-        return self.filter(models.Q(user=user) | models.Q(team__in=user.get_teams()))
-
-
-class BaseAccess(BaseModel):
-    """Base model for accesses to handle resources."""
-
-    user = models.ForeignKey(
-        User,
-        on_delete=models.CASCADE,
-        null=True,
-        blank=True,
-    )
-    team = models.CharField(max_length=100, blank=True)
-    role = models.CharField(
-        max_length=20, choices=RoleChoices.choices, default=RoleChoices.MEMBER
-    )
-
-    objects = BaseAccessManager()
-
-    class Meta:
-        abstract = True
-
-    def _get_abilities(self, resource, user):
-        """
-        Compute and return abilities for a given user taking into account
-        the current state of the object.
-        """
-
-        roles = get_resource_roles(resource, user)
-
-        is_owner = RoleChoices.OWNER in roles
-        has_privileges = is_owner or RoleChoices.ADMIN in roles
-
-        # Default values for unprivileged users
-        set_role_to = set()
-        can_delete = False
-
-        # Special handling when modifying an owner's access
-        if self.role == RoleChoices.OWNER:
-            # Prevent orphaning the resource
-            can_delete = (
-                is_owner
-                and resource.accesses.filter(role=RoleChoices.OWNER).count() > 1
-            )
-            if can_delete:
-                set_role_to = {RoleChoices.ADMIN, RoleChoices.OWNER, RoleChoices.MEMBER}
-        elif has_privileges:
-            can_delete = True
-            set_role_to = {RoleChoices.ADMIN, RoleChoices.MEMBER}
-            if is_owner:
-                set_role_to.add(RoleChoices.OWNER)
-
-        # Remove the current role as we don't want to propose it as an option
-        set_role_to.discard(self.role)
-
-        return {
-            "destroy": can_delete,
-            "update": bool(set_role_to),
-            "partial_update": bool(set_role_to),
-            "retrieve": bool(roles),
-            "set_role_to": sorted(r.value for r in set_role_to),
-        }
-
-
-class Recording(BaseModel):
-    """Model for recordings that take place in a room"""
-
-    room = models.ForeignKey(
-        Room,
-        on_delete=models.CASCADE,
-        related_name="recordings",
-        verbose_name=_("Room"),
-    )
-    status = models.CharField(
-        max_length=20,
-        choices=RecordingStatusChoices.choices,
-        default=RecordingStatusChoices.INITIATED,
-    )
-    worker_id = models.CharField(
-        max_length=255,
-        null=True,
-        blank=True,
-        verbose_name=_("Worker ID"),
-        help_text=_(
-            "Enter an identifier for the worker recording."
-            "This ID is retained even when the worker stops, allowing for easy tracking."
-        ),
-    )
-
-    class Meta:
-        db_table = "meet_recording"
-        ordering = ("-created_at",)
-        verbose_name = _("Recording")
-        verbose_name_plural = _("Recordings")
-        constraints = [
-            models.UniqueConstraint(
-                fields=["room"],
-                condition=models.Q(
-                    status__in=[
-                        RecordingStatusChoices.ACTIVE,
-                        RecordingStatusChoices.INITIATED,
-                    ]
-                ),
-                name="unique_initiated_or_active_recording_per_room",
-            )
-        ]
-
-    def __str__(self):
-        return f"Recording {self.id} ({self.status})"
-
-    def get_abilities(self, user):
-        """Compute and return abilities for a given user on the recording."""
-
-        roles = set(get_resource_roles(self, user))
-
-        is_owner_or_admin = bool(
-            roles.intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
-        )
-
-        is_final_status = RecordingStatusChoices.is_final(self.status)
-
-        return {
-            "destroy": is_owner_or_admin and is_final_status,
-            "partial_update": False,
-            "retrieve": is_owner_or_admin,
-            "stop": is_owner_or_admin and not is_final_status,
-            "update": False,
-        }
-
-    def is_savable(self) -> bool:
-        """Determine if the recording can be saved based on its current status."""
-
-        is_unsuccessful = RecordingStatusChoices.is_unsuccessful(self.status)
-        is_already_saved = self.status == RecordingStatusChoices.SAVED
-
-        return not is_unsuccessful and not is_already_saved
-
-
-class RecordingAccess(BaseAccess):
-    """Relation model to give access to a recording for a user or a team with a role.
-
-    Recording Status Flow:
-    1. INITIATED: Initial state when recording is requested
-    2. ACTIVE: Recording is currently in progress
-    3. STOPPED: Recording has been stopped by user/system
-    4. SAVED: Recording has been successfully processed and stored
-
-    Error States:
-    - FAILED_TO_START: Worker failed to initialize recording
-    - FAILED_TO_STOP: Worker failed during stop operation
-    - ABORTED: Recording was terminated before completion
-
-    Warning: Worker failures may lead to database inconsistency between the actual
-    recording state and its status in the database.
-    """
-
-    recording = models.ForeignKey(
-        Recording,
-        on_delete=models.CASCADE,
-        related_name="accesses",
-    )
-
-    class Meta:
-        db_table = "meet_recording_access"
-        ordering = ("-created_at",)
-        verbose_name = _("Recording/user relation")
-        verbose_name_plural = _("Recording/user relations")
-        constraints = [
-            models.UniqueConstraint(
-                fields=["user", "recording"],
-                condition=models.Q(user__isnull=False),  # Exclude null users
-                name="unique_recording_user",
-                violation_error_message=_("This user is already in this recording."),
-            ),
-            models.UniqueConstraint(
-                fields=["team", "recording"],
-                condition=models.Q(team__gt=""),  # Exclude empty string teams
-                name="unique_recording_team",
-                violation_error_message=_("This team is already in this recording."),
-            ),
-            models.CheckConstraint(
-                condition=models.Q(user__isnull=False, team="")
-                | models.Q(user__isnull=True, team__gt=""),
-                name="check_recording_access_either_user_or_team",
-                violation_error_message=_("Either user or team must be set, not both."),
-            ),
-        ]
-
-    def __str__(self):
-        return f"{self.user!s} is {self.role:s} in {self.recording!s}"
-
-    def get_abilities(self, user):
-        """
-        Compute and return abilities for a given user on the recording access.
-        """
-        return self._get_abilities(self.recording, user)

src/backend/core/tests/recording/test_api_recordings_delete.py

@@ -1,114 +0,0 @@
-"""
-Test recordings API endpoints in the Meet core app: delete.
-"""
-
-import pytest
-from rest_framework.test import APIClient
-
-from ...factories import RecordingFactory, UserFactory, UserRecordingAccessFactory
-from ...models import Recording
-
-pytestmark = pytest.mark.django_db
-
-
-def test_api_recordings_delete_anonymous():
-    """Anonymous users should not be allowed to destroy a recording."""
-    recording = RecordingFactory()
-    client = APIClient()
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id!s}/",
-    )
-
-    assert response.status_code == 401
-    assert Recording.objects.count() == 1
-
-
-def test_api_recordings_delete_authenticated():
-    """
-    Authenticated users should not be allowed to delete a recording
-    from which they are not related.
-    """
-    recording = RecordingFactory()
-    user = UserFactory()
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id!s}/",
-    )
-
-    assert response.status_code == 404
-    assert Recording.objects.count() == 1
-
-
-def test_api_recordings_delete_members():
-    """
-    Authenticated users should not be allowed to delete a recording
-    from which they are only a member.
-    """
-
-    user = UserFactory()
-    access = UserRecordingAccessFactory(role="member", user=user)
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{access.recording.id}/",
-    )
-
-    assert response.status_code == 403
-    assert Recording.objects.count() == 1
-
-
-@pytest.mark.parametrize(
-    "role",
-    ["owner", "administrator"],
-)
-def test_api_recordings_delete_active(role):
-    """
-    Authenticated users cannot delete active recordings, even with deletion privileges.
-    """
-
-    user = UserFactory()
-
-    recording = RecordingFactory(status="active")
-    access = UserRecordingAccessFactory(role=role, user=user, recording=recording)
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{access.recording.id}/",
-    )
-
-    assert response.status_code == 403
-    assert Recording.objects.count() == 1
-
-
-@pytest.mark.parametrize(
-    "role",
-    ["owner", "administrator"],
-)
-def test_api_recordings_delete_final(role):
-    """
-    Authenticated users should not be allowed to delete an active recording
-    from which they are an admin or owner.
-    """
-
-    user = UserFactory()
-
-    recording = RecordingFactory(status="saved")
-    access = UserRecordingAccessFactory(role=role, user=user, recording=recording)
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{access.recording.id}/",
-    )
-
-    assert response.status_code == 204
-    assert Recording.objects.count() == 0

src/backend/core/tests/recording/test_api_recordings_list.py

@@ -1,180 +0,0 @@
-"""
-Test recordings API endpoints in the Meet core app: list.
-"""
-
-import operator
-from unittest import mock
-
-import pytest
-from rest_framework.pagination import PageNumberPagination
-from rest_framework.test import APIClient
-
-from core import factories
-
-pytestmark = pytest.mark.django_db
-
-
-def test_api_recordings_list_anonymous():
-    """Anonymous users should not be able to list recordings."""
-    factories.RecordingFactory()
-    response = APIClient().get("/api/v1.0/recordings/")
-
-    assert response.status_code == 401
-
-
-@pytest.mark.parametrize(
-    "role",
-    ["administrator", "member", "owner"],
-)
-def test_api_recordings_list_authenticated_direct(role):
-    """
-    Authenticated users listing recordings, should only see the recordings
-    to which they are related.
-    """
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    other_user = factories.UserFactory()
-
-    access = factories.UserRecordingAccessFactory(role=role, user=user)
-    factories.UserRecordingAccessFactory(user=other_user)
-
-    recording = access.recording
-    room = recording.room
-
-    response = client.get(
-        "/api/v1.0/recordings/",
-    )
-
-    assert response.status_code == 200
-    results = response.json()["results"]
-    assert len(results) == 1
-    expected_ids = {
-        str(recording.id),
-    }
-    result_ids = {result["id"] for result in results}
-    assert expected_ids == result_ids
-    assert results[0] == {
-        "id": str(recording.id),
-        "created_at": recording.created_at.isoformat().replace("+00:00", "Z"),
-        "room": {
-            "id": str(room.id),
-            "is_public": room.is_public,
-            "name": room.name,
-            "slug": room.slug,
-        },
-        "status": "initiated",
-        "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
-    }
-
-
-def test_api_recording_list_authenticated_via_team(mock_user_get_teams):
-    """
-    Authenticated users should be able to list recordings they are a
-    owner/administrator/member of via a team.
-    """
-    user = factories.UserFactory()
-
-    client = APIClient()
-    client.force_login(user)
-
-    mock_user_get_teams.return_value = ["team1", "team2", "unknown"]
-
-    recordings_team1 = [
-        access.recording
-        for access in factories.TeamRecordingAccessFactory.create_batch(2, team="team1")
-    ]
-    recordings_team2 = [
-        access.recording
-        for access in factories.TeamRecordingAccessFactory.create_batch(3, team="team2")
-    ]
-
-    expected_ids = {
-        str(recording.id) for recording in recordings_team1 + recordings_team2
-    }
-
-    response = client.get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    results = response.json()["results"]
-    assert len(results) == 5
-    results_id = {result["id"] for result in results}
-    assert expected_ids == results_id
-
-
-@mock.patch.object(PageNumberPagination, "get_page_size", return_value=2)
-def test_api_recordings_list_pagination(_mock_page_size):
-    """Pagination should work as expected."""
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    recording_ids = [
-        str(access.recording_id)
-        for access in factories.UserRecordingAccessFactory.create_batch(3, user=user)
-    ]
-
-    response = client.get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    content = response.json()
-    assert content["count"] == 3
-    assert content["next"] == "http://testserver/api/v1.0/recordings/?page=2"
-    assert content["previous"] is None
-
-    assert len(content["results"]) == 2
-    for item in content["results"]:
-        recording_ids.remove(item["id"])
-
-    # Get page 2
-    response = client.get(
-        "/api/v1.0/recordings/?page=2",
-    )
-
-    assert response.status_code == 200
-    content = response.json()
-
-    assert content["count"] == 3
-    assert content["next"] is None
-    assert content["previous"], "http://testserver/api/v1.0/recordings/"
-
-    assert len(content["results"]) == 1
-    recording_ids.remove(content["results"][0]["id"])
-    assert recording_ids == []
-
-
-def test_api_recordings_list_authenticated_distinct():
-    """A recording for a room with several related users should only be listed once."""
-    user = factories.UserFactory()
-    other_user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    recording = factories.RecordingFactory(users=[user, other_user])
-
-    response = client.get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    content = response.json()
-    assert len(content["results"]) == 1
-    assert content["results"][0]["id"] == str(recording.id)
-
-
-def test_api_recordings_list_ordering_default():
-    """Recordings should be ordered by descending "updated_at" by default"""
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    factories.RecordingFactory.create_batch(5, users=[user])
-
-    response = client.get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    results = response.json()["results"]
-    assert len(results) == 5
-
-    # Check that results are sorted by descending "updated_at" as expected
-    for i in range(4):
-        assert operator.ge(results[i]["updated_at"], results[i + 1]["updated_at"])

src/backend/core/tests/test_analytics.py

@@ -0,0 +1,132 @@
+"""
+Test for the Analytics class.
+"""
+
+# pylint: disable=W0212
+
+from unittest.mock import patch
+
+from django.contrib.auth.models import AnonymousUser
+from django.test.utils import override_settings
+
+import pytest
+
+from core.analytics import Analytics
+from core.factories import UserFactory
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture(name="mock_june_analytics")
+def _mock_june_analytics():
+    with patch("core.analytics.jAnalytics") as mock:
+        yield mock
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_init_enabled(mock_june_analytics):
+    """Should enable analytics and set the write key correctly when ANALYTICS_KEY is set."""
+    analytics = Analytics()
+    assert analytics._enabled is True
+    assert mock_june_analytics.write_key == "test_key"
+
+
+@override_settings(ANALYTICS_KEY=None)
+def test_analytics_init_disabled():
+    """Should disable analytics when ANALYTICS_KEY is not set."""
+    analytics = Analytics()
+    assert analytics._enabled is False
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_user(mock_june_analytics):
+    """Should identify a user with the correct traits when analytics is enabled."""
+    user = UserFactory(sub="12345", email="user@example.com")
+    analytics = Analytics()
+    analytics.identify(user)
+    mock_june_analytics.identify.assert_called_once_with(
+        user_id="12345", traits={"email": "***@example.com"}
+    )
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_user_with_traits(mock_june_analytics):
+    """Should identify a user with additional traits when analytics is enabled."""
+    user = UserFactory(sub="12345", email="user@example.com")
+    analytics = Analytics()
+    analytics.identify(user, traits={"email": "user@example.com", "foo": "foo"})
+    mock_june_analytics.identify.assert_called_once_with(
+        user_id="12345", traits={"email": "***@example.com", "foo": "foo"}
+    )
+
+
+@override_settings(ANALYTICS_KEY=None)
+def test_analytics_identify_not_enabled(mock_june_analytics):
+    """Should not call identify when analytics is not enabled."""
+    user = UserFactory(sub="12345", email="user@example.com")
+    analytics = Analytics()
+    analytics.identify(user)
+    mock_june_analytics.identify.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_no_user(mock_june_analytics):
+    """Should not call identify when the user is None."""
+    analytics = Analytics()
+    analytics.identify(None)
+    mock_june_analytics.identify.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_anonymous_user(mock_june_analytics):
+    """Should not call identify when the user is anonymous."""
+    user = AnonymousUser()
+    analytics = Analytics()
+    analytics.identify(user)
+    mock_june_analytics.identify.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_track_event(mock_june_analytics):
+    """Should track an event with the correct user and event details when analytics is enabled."""
+    user = UserFactory(sub="12345")
+    analytics = Analytics()
+    analytics.track(user, event="test_event", foo="foo")
+    mock_june_analytics.track.assert_called_once_with(
+        user_id="12345", event="test_event", foo="foo"
+    )
+
+
+@override_settings(ANALYTICS_KEY=None)
+def test_analytics_track_event_not_enabled(mock_june_analytics):
+    """Should not call track when analytics is not enabled."""
+    user = UserFactory(sub="12345")
+    analytics = Analytics()
+    analytics.track(user, event="test_event", foo="foo")
+
+    mock_june_analytics.track.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+@patch("uuid.uuid4", return_value="test_uuid4")
+def test_analytics_track_event_no_user(mock_uuid4, mock_june_analytics):
+    """Should track an event with a random anonymous user ID when the user is None."""
+    analytics = Analytics()
+    analytics.track(None, event="test_event", foo="foo")
+    mock_june_analytics.track.assert_called_once_with(
+        anonymous_id="test_uuid4", event="test_event", foo="foo"
+    )
+    mock_uuid4.assert_called_once()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+@patch("uuid.uuid4", return_value="test_uuid4")
+def test_analytics_track_event_anonymous_user(mock_uuid4, mock_june_analytics):
+    """Should track an event with a random anonymous user ID when the user is anonymous."""
+    user = AnonymousUser()
+    analytics = Analytics()
+    analytics.track(user, event="test_event", foo="foo")
+    mock_june_analytics.track.assert_called_once_with(
+        anonymous_id="test_uuid4", event="test_event", foo="foo"
+    )
+    mock_uuid4.assert_called_once()

src/backend/core/tests/test_models_recording.py

@@ -1,212 +0,0 @@
-"""
-Unit tests for the Recording model
-"""
-
-from django.core.exceptions import ValidationError
-
-import pytest
-
-from core.factories import (
-    RecordingFactory,
-    RoomFactory,
-    UserFactory,
-    UserRecordingAccessFactory,
-)
-from core.models import Recording, RecordingStatusChoices
-
-pytestmark = pytest.mark.django_db
-
-
-def test_models_recording_str():
-    """The str representation should be the recording ID."""
-    recording = RecordingFactory()
-    assert str(recording) == f"Recording {recording.id} (initiated)"
-
-
-def test_models_recording_ordering():
-    """Recordings should be returned ordered by created_at in descending order."""
-    RecordingFactory.create_batch(3)
-    recordings = Recording.objects.all()
-    assert recordings[0].created_at >= recordings[1].created_at
-    assert recordings[1].created_at >= recordings[2].created_at
-
-
-def test_models_recording_room_relationship():
-    """It should maintain proper relationship with room."""
-    room = RoomFactory()
-    recording = RecordingFactory(room=room)
-    assert recording.room == room
-    assert recording in room.recordings.all()
-
-
-def test_models_recording_default_status():
-    """A new recording should have INITIATED status by default."""
-    recording = RecordingFactory()
-    assert recording.status == RecordingStatusChoices.INITIATED
-
-
-def test_models_recording_unique_initiated_or_active_per_room():
-    """Only one initiated or active recording should be allowed per room."""
-    room = RoomFactory()
-    RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
-
-    with pytest.raises(ValidationError):
-        RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
-
-    with pytest.raises(ValidationError):
-        RecordingFactory(room=room, status=RecordingStatusChoices.INITIATED)
-
-
-def test_models_recording_multiple_finished_allowed():
-    """Multiple finished recordings should be allowed in the same room."""
-    room = RoomFactory()
-    RecordingFactory(room=room, status=RecordingStatusChoices.SAVED)
-    RecordingFactory(room=room, status=RecordingStatusChoices.SAVED)
-    assert room.recordings.count() == 2
-
-
-# Test get_abilities method
-
-
-@pytest.mark.parametrize(
-    "role",
-    ["owner", "administrator"],
-)
-def test_models_recording_get_abilities_privileges_active(role):
-    """Test abilities for active recording and privileged user."""
-
-    user = UserFactory()
-    access = UserRecordingAccessFactory(role=role, user=user)
-    access.recording.status = RecordingStatusChoices.ACTIVE
-    abilities = access.recording.get_abilities(user)
-
-    assert abilities == {
-        "destroy": False,  # Not final status
-        "partial_update": False,
-        "retrieve": True,  # Privileged users can always retrieve
-        "stop": True,  # Not final status, so can stop
-        "update": False,
-    }
-
-
-def test_models_recording_get_abilities_member_active():
-    """Test abilities for a user who is unprivileged."""
-
-    user = UserFactory()
-    access = UserRecordingAccessFactory(role="member", user=user)
-    access.recording.status = RecordingStatusChoices.ACTIVE
-    abilities = access.recording.get_abilities(user)
-
-    assert abilities == {
-        "destroy": False,
-        "partial_update": False,
-        "retrieve": False,
-        "stop": False,
-        "update": False,
-    }
-
-
-@pytest.mark.parametrize(
-    "role",
-    ["owner", "administrator"],
-)
-def test_models_recording_get_abilities_privileges_final(role):
-    """Test abilities for active recording and privileged user."""
-
-    user = UserFactory()
-    access = UserRecordingAccessFactory(role=role, user=user)
-    access.recording.status = RecordingStatusChoices.SAVED
-    abilities = access.recording.get_abilities(user)
-
-    assert abilities == {
-        "destroy": True,
-        "partial_update": False,
-        "retrieve": True,  # Privileged users can always retrieve
-        "stop": False,  # In final status, so can not stop
-        "update": False,
-    }
-
-
-def test_models_recording_get_abilities_member_final():
-    """Test abilities for a user who is unprivileged."""
-
-    user = UserFactory()
-    access = UserRecordingAccessFactory(role="member", user=user)
-    access.recording.status = RecordingStatusChoices.SAVED
-    abilities = access.recording.get_abilities(user)
-
-    assert abilities == {
-        "destroy": False,
-        "partial_update": False,
-        "retrieve": False,
-        "stop": False,
-        "update": False,
-    }
-
-
-# Test is_savable method
-
-
-def test_models_recording_is_savable_normal():
-    """Test is_savable for normal recording status."""
-    recording = RecordingFactory(status=RecordingStatusChoices.ACTIVE)
-    assert recording.is_savable() is True
-
-
-@pytest.mark.parametrize(
-    "status",
-    [
-        RecordingStatusChoices.FAILED_TO_STOP,
-        RecordingStatusChoices.FAILED_TO_START,
-        RecordingStatusChoices.ABORTED,
-    ],
-)
-def test_models_recording_is_savable_error(status):
-    """Test is_savable for error status."""
-    recording = RecordingFactory(status=status)
-    assert recording.is_savable() is False
-
-
-def test_models_recording_is_savable_already_saved():
-    """Test is_savable for already saved recording."""
-    recording = RecordingFactory(status=RecordingStatusChoices.SAVED)
-    assert recording.is_savable() is False
-
-
-# Test few corner cases
-
-
-def test_models_recording_worker_id_optional():
-    """Worker ID should be optional."""
-    recording = RecordingFactory(worker_id=None)
-    assert recording.worker_id is None
-
-    recording = RecordingFactory(worker_id="worker-123")
-    assert recording.worker_id == "worker-123"
-
-
-def test_models_recording_invalid_status():
-    """Test that setting an invalid status raises an error."""
-    recording = RecordingFactory()
-    recording.status = "INVALID_STATUS"
-    with pytest.raises(ValidationError):
-        recording.save()
-
-
-def test_models_recording_room_deletion():
-    """Test that deleting a room cascades to its recordings."""
-    room = RoomFactory()
-    recording = RecordingFactory(room=room)
-    room.delete()
-    assert not Recording.objects.filter(id=recording.id).exists()
-
-
-def test_models_recording_worker_id_very_long():
-    """Test worker_id with maximum length."""
-    long_id = "w" * 255
-    recording = RecordingFactory(worker_id=long_id)
-    assert recording.worker_id == long_id
-
-    too_long_id = "w" * 256
-    with pytest.raises(ValidationError):
-        RecordingFactory(worker_id=too_long_id)

src/backend/core/tests/test_models_recording_accesses.py

@@ -1,312 +0,0 @@
-"""
-Unit tests for the RecordingAccess model
-"""
-
-from django.contrib.auth.models import AnonymousUser
-from django.core.exceptions import ValidationError
-
-import pytest
-
-from core import factories
-
-pytestmark = pytest.mark.django_db
-
-
-def test_models_recording_accesses_str():
-    """
-    The str representation should include user email, recording ID and role.
-    """
-    user = factories.UserFactory(email="david.bowman@example.com")
-    access = factories.UserRecordingAccessFactory(
-        role="member",
-        user=user,
-    )
-    assert (
-        str(access)
-        == f"david.bowman@example.com is member in Recording {access.recording.id} (initiated)"
-    )
-
-
-def test_models_recording_accesses_unique_user():
-    """Recording accesses should be unique for a given couple of user and recording."""
-    access = factories.UserRecordingAccessFactory()
-
-    with pytest.raises(
-        ValidationError,
-        match="This user is already in this recording.",
-    ):
-        factories.UserRecordingAccessFactory(
-            user=access.user, recording=access.recording
-        )
-
-
-def test_models_recording_accesses_several_empty_teams():
-    """A recording can have several recording accesses with an empty team."""
-    access = factories.UserRecordingAccessFactory()
-    factories.UserRecordingAccessFactory(recording=access.recording)
-
-
-def test_models_recording_accesses_unique_team():
-    """Recording accesses should be unique for a given couple of team and recording."""
-    access = factories.TeamRecordingAccessFactory()
-
-    with pytest.raises(
-        ValidationError,
-        match="This team is already in this recording.",
-    ):
-        factories.TeamRecordingAccessFactory(
-            team=access.team, recording=access.recording
-        )
-
-
-def test_models_recording_accesses_several_null_users():
-    """A recording can have several recording accesses with a null user."""
-    access = factories.TeamRecordingAccessFactory()
-    factories.TeamRecordingAccessFactory(recording=access.recording)
-
-
-def test_models_recording_accesses_user_and_team_set():
-    """User and team can't both be set on a recording access."""
-    with pytest.raises(
-        ValidationError,
-        match="Either user or team must be set, not both.",
-    ):
-        factories.UserRecordingAccessFactory(team="my-team")
-
-
-def test_models_recording_accesses_user_and_team_empty():
-    """User and team can't both be empty on a recording access."""
-    with pytest.raises(
-        ValidationError,
-        match="Either user or team must be set, not both.",
-    ):
-        factories.UserRecordingAccessFactory(user=None)
-
-
-# get_abilities
-
-
-def test_models_recording_access_get_abilities_anonymous():
-    """Check abilities returned for an anonymous user."""
-    access = factories.UserRecordingAccessFactory()
-    abilities = access.get_abilities(AnonymousUser())
-    assert abilities == {
-        "destroy": False,
-        "retrieve": False,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }
-
-
-def test_models_recording_access_get_abilities_authenticated():
-    """Check abilities returned for an authenticated user."""
-    access = factories.UserRecordingAccessFactory()
-    user = factories.UserFactory()
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": False,
-        "retrieve": False,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }
-
-
-# - for owner
-
-
-def test_models_recording_access_get_abilities_for_owner_of_self_allowed():
-    """
-    Check abilities of self access for the owner of a recording when
-    there is more than one owner left.
-    """
-    access = factories.UserRecordingAccessFactory(role="owner")
-    factories.UserRecordingAccessFactory(recording=access.recording, role="owner")
-    abilities = access.get_abilities(access.user)
-    assert abilities == {
-        "destroy": True,
-        "retrieve": True,
-        "update": True,
-        "partial_update": True,
-        "set_role_to": ["administrator", "member"],
-    }
-
-
-def test_models_recording_access_get_abilities_for_owner_of_self_last():
-    """
-    Check abilities of self access for the owner of a recording when there is only one owner left.
-    """
-    access = factories.UserRecordingAccessFactory(role="owner")
-    abilities = access.get_abilities(access.user)
-    assert abilities == {
-        "destroy": False,
-        "retrieve": True,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }
-
-
-def test_models_recording_access_get_abilities_for_owner_of_owner():
-    """Check abilities of owner access for the owner of a recording."""
-    access = factories.UserRecordingAccessFactory(role="owner")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="owner"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": True,
-        "retrieve": True,
-        "update": True,
-        "partial_update": True,
-        "set_role_to": ["administrator", "member"],
-    }
-
-
-def test_models_recording_access_get_abilities_for_owner_of_administrator():
-    """Check abilities of administrator access for the owner of a recording."""
-    access = factories.UserRecordingAccessFactory(role="administrator")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="owner"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": True,
-        "retrieve": True,
-        "update": True,
-        "partial_update": True,
-        "set_role_to": ["member", "owner"],
-    }
-
-
-def test_models_recording_access_get_abilities_for_owner_of_member():
-    """Check abilities of member access for the owner of a recording."""
-    access = factories.UserRecordingAccessFactory(role="member")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="owner"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": True,
-        "retrieve": True,
-        "update": True,
-        "partial_update": True,
-        "set_role_to": ["administrator", "owner"],
-    }
-
-
-# - for administrator
-
-
-def test_models_recording_access_get_abilities_for_administrator_of_owner():
-    """Check abilities of owner access for the administrator of a recording."""
-    access = factories.UserRecordingAccessFactory(role="owner")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="administrator"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": False,
-        "retrieve": True,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }
-
-
-def test_models_recording_access_get_abilities_for_administrator_of_administrator():
-    """Check abilities of administrator access for the administrator of a recording."""
-    access = factories.UserRecordingAccessFactory(role="administrator")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="administrator"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": True,
-        "retrieve": True,
-        "update": True,
-        "partial_update": True,
-        "set_role_to": ["member"],
-    }
-
-
-def test_models_recording_access_get_abilities_for_administrator_of_member():
-    """Check abilities of member access for the administrator of a recording."""
-    access = factories.UserRecordingAccessFactory(role="member")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="administrator"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": True,
-        "retrieve": True,
-        "update": True,
-        "partial_update": True,
-        "set_role_to": ["administrator"],
-    }
-
-
-# - for member
-
-
-def test_models_recording_access_get_abilities_for_member_of_owner():
-    """Check abilities of owner access for the member of a recording."""
-    access = factories.UserRecordingAccessFactory(role="owner")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="member"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": False,
-        "retrieve": True,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }
-
-
-def test_models_recording_access_get_abilities_for_member_of_administrator():
-    """Check abilities of administrator access for the member of a recording."""
-    access = factories.UserRecordingAccessFactory(role="administrator")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="member"
-    ).user
-    abilities = access.get_abilities(user)
-    assert abilities == {
-        "destroy": False,
-        "retrieve": True,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }
-
-
-def test_models_recording_access_get_abilities_for_member_of_member_user(
-    django_assert_num_queries,
-):
-    """Check abilities of member access for the member of a recording."""
-    access = factories.UserRecordingAccessFactory(role="member")
-    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
-    user = factories.UserRecordingAccessFactory(
-        recording=access.recording, role="member"
-    ).user
-
-    with django_assert_num_queries(1):
-        abilities = access.get_abilities(user)
-
-    assert abilities == {
-        "destroy": False,
-        "retrieve": True,
-        "update": False,
-        "partial_update": False,
-        "set_role_to": [],
-    }

src/backend/core/urls.py

@@ -5,14 +5,13 @@ from django.urls import include, path
 
 from rest_framework.routers import DefaultRouter
 
-from core.api import get_frontend_configuration, viewsets
+from core.api import viewsets
 from core.authentication.urls import urlpatterns as oidc_urls
 
 # - Main endpoints
 router = DefaultRouter()
 router.register("users", viewsets.UserViewSet, basename="users")
 router.register("rooms", viewsets.RoomViewSet, basename="rooms")
-router.register("recordings", viewsets.RecordingViewSet, basename="recordings")
 router.register(
     "resource-accesses", viewsets.ResourceAccessViewSet, basename="resource_accesses"
 )
@@ -24,7 +23,6 @@ urlpatterns = [
             [
                 *router.urls,
                 *oidc_urls,
-                path("config/", get_frontend_configuration, name="config"),
             ]
         ),
     ),

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,11 +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,
-        can_update_own_metadata=True,
         can_publish_sources=[
             "camera",
             "microphone",
@@ -62,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"
@@ -119,25 +117,6 @@ class Base(Configuration):
         },
     }
 
-    # Media
-    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,
-    )
-
     # Internationalization
     # https://docs.djangoproject.com/en/3.1/topics/i18n/
 
@@ -270,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)
@@ -290,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"
@@ -308,7 +273,6 @@ class Base(Configuration):
     # Easy thumbnails
     THUMBNAIL_EXTENSION = "webp"
     THUMBNAIL_TRANSPARENCY_EXTENSION = "webp"
-    THUMBNAIL_DEFAULT_STORAGE_ALIAS = "default"
     THUMBNAIL_ALIASES = {}
 
     # Celery
@@ -395,12 +359,15 @@ class Base(Configuration):
         ),
         "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
     }
-    RESOURCE_DEFAULT_IS_PUBLIC = values.BooleanValue(
-        True, environ_name="RESOURCE_DEFAULT_IS_PUBLIC", environ_prefix=None
+    DEFAULT_ROOM_IS_PUBLIC = values.BooleanValue(
+        True, environ_name="DEFAULT_ROOM_IS_PUBLIC", environ_prefix=None
     )
     ALLOW_UNREGISTERED_ROOMS = values.BooleanValue(
         True, environ_name="ALLOW_UNREGISTERED_ROOMS", environ_prefix=None
     )
+    ANALYTICS_KEY = values.Value(
+        None, environ_name="ANALYTICS_KEY", environ_prefix=None
+    )
 
     # pylint: disable=invalid-name
     @property
@@ -521,6 +488,8 @@ class Test(Base):
 
     CELERY_TASK_ALWAYS_EAGER = values.BooleanValue(True)
 
+    ANALYTICS_KEY = None
+
     def __init__(self):
         # pylint: disable=invalid-name
         self.INSTALLED_APPS += ["drf_spectacular_sidecar"]
@@ -544,11 +513,7 @@ class Production(Base):
     """
 
     # Security
-    ALLOWED_HOSTS = [
-        *values.ListValue([], environ_name="ALLOWED_HOSTS"),
-        gethostbyname(gethostname()),
-    ]
-
+    ALLOWED_HOSTS = values.ListValue(None)
     CSRF_TRUSTED_ORIGINS = values.ListValue([])
     SECURE_BROWSER_XSS_FILTER = True
     SECURE_CONTENT_TYPE_NOSNIFF = True
@@ -563,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,27 +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",
-    "gunicorn==23.0.0",
+    "easy_thumbnails==2.9",
+    "factory_boy==3.3.0",
+    "freezegun==1.5.1",
+    "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",
+    "livekit-api==0.6.0",
 ]
 
 [project.urls]
@@ -69,20 +70,19 @@ dependencies = [
 dev = [
     "django-extensions==3.2.3",
     "drf-spectacular-sidecar==2024.7.1",
-    "freezegun==1.5.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

@@ -1,4 +1,4 @@
-FROM node:20-alpine AS frontend-deps
+FROM node:20-alpine as frontend-deps
 
 WORKDIR /home/frontend/
 
@@ -11,11 +11,11 @@ COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/ .
 
 ### ---- Front-end builder image ----
-FROM frontend-deps AS meet
+FROM frontend-deps as meet
 
 WORKDIR /home/frontend
 
-FROM frontend-deps AS meet-dev
+FROM frontend-deps as meet-dev
 
 WORKDIR /home/frontend
 
@@ -25,14 +25,14 @@ CMD [ "npm", "run", "dev"]
 
 # Tilt will rebuild Meet target so, we dissociate meet and meet-builder
 # to avoid rebuilding the app at every changes.
-FROM meet AS meet-builder
+FROM meet as meet-builder
 
 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,10 +16,10 @@ 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.usernameLabel')}
+          userLabel={t('join.userLabel')}
         />
       </CenteredContent>
     </Screen>

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/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,58 +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'
-
-// @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>
-      </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/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>
-  )
-}