✨(join) add audio output selection

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

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

bin/_config.sh

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

bin/state

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

bin/terraform

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

renovate.json

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

scripts/updatekeys.sh

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

src/backend/core/api/serializers.py

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

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

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

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

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

src/backend/core/models.py

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

src/backend/core/utils.py

@@ -2,11 +2,6 @@
 Utils functions used in the core app
 """
 
-# ruff: noqa:S311
-
-import hashlib
-import json
-import random
 from typing import Optional
 from uuid import uuid4
 
@@ -15,30 +10,8 @@ from django.conf import settings
 from livekit.api import AccessToken, VideoGrants
 
 
-def generate_color(identity: str) -> str:
-    """Generates a consistent HSL color based on a given identity string.
-
-    The function seeds the random generator with the identity's hash,
-    ensuring consistent color output. The HSL format allows fine-tuned control
-    over saturation and lightness, empirically adjusted to produce visually
-    appealing and distinct colors. HSL is preferred over hex to constrain the color
-    range and ensure predictability.
-    """
-
-    # ruff: noqa:S324
-    identity_hash = hashlib.sha1(identity.encode("utf-8"))
-    # Keep only hash's last 16 bits, collisions are not a concern
-    seed = int(identity_hash.hexdigest(), 16) & 0xFFFF
-    random.seed(seed)
-    hue = random.randint(0, 360)
-    saturation = random.randint(50, 75)
-    lightness = random.randint(25, 60)
-
-    return f"hsl({hue}, {saturation}%, {lightness}%)"
-
-
 def generate_token(room: str, user, username: Optional[str] = None) -> str:
-    """Generate a LiveKit access token for a user in a specific room.
+    """Generate a Livekit access token for a user in a specific room.
 
     Args:
         room (str): The name of the room.
@@ -49,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"
@@ -258,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"
@@ -276,7 +273,6 @@ class Base(Configuration):
     # Easy thumbnails
     THUMBNAIL_EXTENSION = "webp"
     THUMBNAIL_TRANSPARENCY_EXTENSION = "webp"
-    THUMBNAIL_DEFAULT_STORAGE_ALIAS = "default"
     THUMBNAIL_ALIASES = {}
 
     # Celery
@@ -517,11 +513,7 @@ class Production(Base):
     """
 
     # Security
-    ALLOWED_HOSTS = [
-        *values.ListValue([], environ_name="ALLOWED_HOSTS"),
-        gethostbyname(gethostname()),
-    ]
-
+    ALLOWED_HOSTS = values.ListValue(None)
     CSRF_TRUSTED_ORIGINS = values.ListValue([])
     SECURE_BROWSER_XSS_FILTER = True
     SECURE_CONTENT_TYPE_NOSNIFF = True

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.6"
+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,28 +36,28 @@ dependencies = [
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.1",
+    "django==5.0.7",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
-    "easy_thumbnails==2.10",
-    "factory_boy==3.3.1",
+    "easy_thumbnails==2.9",
+    "factory_boy==3.3.0",
     "freezegun==1.5.1",
-    "gunicorn==23.0.0",
+    "gunicorn==22.0.0",
     "jsonschema==4.23.0",
     "june-analytics-python==2.3.0",
-    "markdown==3.7",
+    "markdown==3.6",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.2",
+    "psycopg[binary]==3.2.1",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.14.0",
+    "sentry-sdk==2.12.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
     "mozilla-django-oidc==4.0.1",
-    "livekit-api==0.7.0",
+    "livekit-api==0.6.0",
 ]
 
 [project.urls]
@@ -71,18 +71,18 @@ dev = [
     "django-extensions==3.2.3",
     "drf-spectacular-sidecar==2024.7.1",
     "ipdb==0.13.13",
-    "ipython==8.27.0",
+    "ipython==8.26.0",
     "pyfakefs==5.6.0",
     "pylint-django==2.5.5",
-    "pylint==3.2.7",
+    "pylint==3.2.6",
     "pytest-cov==5.0.0",
-    "pytest-django==4.9.0",
-    "pytest==8.3.3",
+    "pytest-django==4.8.0",
+    "pytest==8.3.2",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.5",
-    "types-requests==2.32.0.20240914",
+    "ruff==0.5.6",
+    "types-requests==2.32.0.20240712",
 ]
 
 [tool.setuptools]

src/frontend/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.6",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,48 +13,43 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.5.4",
-    "@livekit/components-styles": "1.1.2",
-    "@livekit/track-processors": "0.3.2",
-    "@pandacss/preset-panda": "0.46.0",
-    "@react-aria/toast": "3.0.0-beta.15",
+    "@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.56.2",
-    "crisp-sdk-web": "1.0.25",
+    "@tanstack/react-query": "5.49.2",
     "hoofd": "1.7.1",
-    "i18next": "23.15.1",
+    "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.1",
-    "posthog-js": "1.161.5",
-    "react": "18.3.1",
-    "react-aria-components": "1.3.3",
-    "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.0",
-    "@tanstack/eslint-plugin-query": "5.56.1",
-    "@tanstack/react-query-devtools": "5.56.2",
-    "@types/node": "20.16.5",
-    "@types/react": "18.3.5",
+    "@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.5.0",
-    "@typescript-eslint/parser": "8.5.0",
+    "@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.2",
-    "vite": "5.4.5",
-    "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: '4px' },
-        '25%': { height: '8px' },
-        '50%': { height: '6px' },
-        '100%': { height: '16px' },
-      },
-      active_speake_small: {
-        '0%': { height: '4px' },
-        '25%': { height: '6px' },
-        '50%': { height: '4px' },
-        '100%': { height: '8px' },
-      },
-      wave_hand: {
-        '0%': { transform: 'rotate(0deg)' },
-        '20%': { transform: 'rotate(-20deg)' },
-        '80%': { transform: 'rotate(20deg)' },
-        '100%': { transform: 'rotate(0)' },
-      },
-      pulse_mic: {
-        '0%': { color: 'primary', opacity: '1' },
-        '50%': { color: 'primary', opacity: '0.8' },
-        '100%': { color: 'primary', opacity: '1' },
-      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/App.tsx

@@ -13,8 +13,6 @@ import { routes } from './routes'
 import './i18n/init'
 import { silenceLiveKitLogs } from '@/utils/livekit.ts'
 import { queryClient } from '@/api/queryClient'
-import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
-import { useSupport } from '@/features/support/hooks/useSupport'
 
 function App() {
   const { i18n } = useTranslation()
@@ -23,9 +21,6 @@ function App() {
   const isProduction = import.meta.env.PROD
   silenceLiveKitLogs(isProduction)
 
-  useAnalytics()
-  useSupport()
-
   return (
     <QueryClientProvider client={queryClient}>
       <Suspense fallback={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/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,42 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'wouter'
-import posthog from 'posthog-js'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-const ANALYTICS_ID = 'phc_RPYko028Oqtj0c9exLIWwrlrjLxSdxT0ntW0Lam4iom'
-const ANALYTICS_HOST = 'https://eu.i.posthog.com'
-
-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 const useAnalytics = () => {
-  const [location] = useLocation()
-
-  const isProduction = import.meta.env.PROD
-
-  useEffect(() => {
-    // We're on a free tier, so we need to limit the number of events we send to PostHog.
-    // Be frugal with event tracking, even though we could filter them out later if necessary.
-    if (!isProduction) return
-    if (posthog.__loaded) return
-    posthog.init(ANALYTICS_ID, {
-      api_host: ANALYTICS_HOST,
-      person_profiles: 'always',
-    })
-  }, [isProduction])
-
-  // 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/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
  */
@@ -18,13 +15,6 @@ export const useUser = () => {
     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 removeJoinNotification = (participant: Participant) => {
-      const existingToast = toastQueue.visibleToasts.find(
-        (toast) =>
-          toast.content.participant === participant &&
-          toast.content.type === NotificationType.Joined
-      )
-      if (existingToast) {
-        toastQueue.close(existingToast.key)
-      }
-    }
-    room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification)
-    return () => {
-      room.off(RoomEvent.ParticipantConnected, removeJoinNotification)
-    }
-  }, [room])
-
-  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={20} right={5} zIndex={1000}>
-      <ToastProvider />
-    </Div>
-  )
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,11 +4,12 @@ import { useTranslation } from 'react-i18next'
 import {
   formatChatMessageLinks,
   LiveKitRoom,
-  type LocalUserChoices,
+  VideoConference,
 } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 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'
@@ -16,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,
@@ -27,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 {
@@ -52,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({
@@ -60,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,
@@ -69,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.
@@ -95,14 +120,14 @@ export const Conference = ({
 
   return (
     <QueryAware status={isFetchError ? createStatus : fetchStatus}>
-      <Screen header={false}>
+      <Screen>
         <LiveKitRoom
           room={room}
           serverUrl={data?.livekit?.url}
           token={data?.livekit?.token}
           connect={true}
-          audio={userConfig.audioEnabled}
-          video={userConfig.videoEnabled}
+          audio={userConfig.devices.enableMic}
+          video={userConfig.devices.enableCamera}
         >
           <VideoConference chatMessageFormatter={formatChatMessageLinks} />
           {showInviteDialog && (

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

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

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

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

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

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

src/frontend/src/features/rooms/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">
-      {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,88 +0,0 @@
-import { useSnapshot } from 'valtio'
-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 { useWidgetInteraction } from '../hooks/useWidgetInteraction'
-import { ReactNode } from 'react'
-import { Effects } from './Effects'
-
-type StyledSidePanelProps = {
-  title: string
-  children: ReactNode
-  onClose: () => void
-  closeButtonTooltip: string
-}
-
-const StyledSidePanel = ({
-  title,
-  children,
-  onClose,
-  closeButtonTooltip,
-}: StyledSidePanelProps) => (
-  <Box
-    size="sm"
-    minWidth="360px"
-    className={css({
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      margin: '1.5rem 1.5rem 1.5rem 0',
-      padding: 0,
-      gap: 0,
-    })}
-  >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-      }}
-    >
-      {title}
-    </Heading>
-    <Div position="absolute" top="5" right="5">
-      <Button
-        invisible
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    <Div overflowY="scroll">{children}</Div>
-  </Box>
-)
-
-export const SidePanel = () => {
-  const layoutSnap = useSnapshot(layoutStore)
-  const sidePanel = layoutSnap.sidePanel
-
-  const { isParticipantsOpen, isEffectsOpen } = useWidgetInteraction()
-  const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
-
-  if (!sidePanel) {
-    return
-  }
-
-  return (
-    <StyledSidePanel
-      title={t(`heading.${sidePanel}`)}
-      onClose={() => (layoutStore.sidePanel = null)}
-      closeButtonTooltip={t('closeButton', {
-        content: t(`content.${sidePanel}`),
-      })}
-    >
-      {isParticipantsOpen && <ParticipantsList />}
-      {isEffectsOpen && <Effects />}
-    </StyledSidePanel>
-  )
-}

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

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

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

@@ -1,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,67 +0,0 @@
-import { menuItemRecipe } from '@/primitives/menuItemRecipe'
-import {
-  RiAccountBoxLine,
-  RiFeedbackLine,
-  RiQuestionLine,
-  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 { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
-
-// @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 } = useWidgetInteraction()
-  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://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
-          target="_blank"
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiQuestionLine size={20} />
-          {t('support')}
-        </MenuItem>
-        <MenuItem
-          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-          target="_blank"
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiFeedbackLine 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>
-  )
-}

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

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

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

@@ -1,83 +0,0 @@
-import { css } from '@/styled-system/css'
-import { allParticipantRoomEvents } from '@livekit/components-core'
-import { useParticipants } from '@livekit/components-react'
-
-import { Div, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
-import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '../../controls/Participants/LowerAllHandsButton'
-import { RoomEvent } from 'livekit-client'
-
-// TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
-export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
-
-  // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
-  // because the 'useLocalParticipant' hook does not update the participant's information when their
-  // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
-  const participants = useParticipants({
-    updateOnlyOn: [
-      RoomEvent.ParticipantNameChanged,
-      ...allParticipantRoomEvents,
-    ],
-  })
-
-  const sortedRemoteParticipants = participants
-    .slice(1)
-    .sort((participantA, participantB) => {
-      const nameA = participantA.name || participantA.identity
-      const nameB = participantB.name || participantB.identity
-      return nameA.localeCompare(nameB)
-    })
-
-  const sortedParticipants = [
-    participants[0], // first participant returned by the hook, is always the local one
-    ...sortedRemoteParticipants,
-  ]
-
-  const raisedHandParticipants = participants.filter((participant) => {
-    const data = JSON.parse(participant.metadata || '{}')
-    return data.raised
-  })
-
-  // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
-  return (
-    <>
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: '#5f6368',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
-      >
-        {t('subheading').toUpperCase()}
-      </H>
-      {raisedHandParticipants.length > 0 && (
-        <Div marginBottom=".9375rem">
-          <ParticipantsCollapsableList
-            heading={t('raisedHands')}
-            participants={raisedHandParticipants}
-            renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
-            )}
-            action={() => (
-              <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
-          />
-        </Div>
-      )}
-      <ParticipantsCollapsableList
-        heading={t('contributors')}
-        participants={sortedParticipants}
-        renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
-        )}
-      />
-    </>
-  )
-}

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

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

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

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

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

@@ -1,120 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import {
-  useMediaDeviceSelect,
-  useTrackToggle,
-  UseTrackToggleProps,
-} from '@livekit/components-react'
-import { HStack } from '@/styled-system/jsx'
-import { Button, Menu, MenuList, ToggleButton } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import { Track } from 'livekit-client'
-import React from 'react'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-  },
-}
-
-type SelectToggleDeviceProps<T extends ToggleSource> =
-  UseTrackToggleProps<T> & {
-    onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
-  }
-
-export const SelectToggleDevice = <T extends ToggleSource>({
-  onActiveDeviceChange,
-  ...props
-}: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const { buttonProps, enabled } = useTrackToggle(props)
-
-  const { kind, iconOn, iconOff } = config
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind })
-
-  const toggleLabel = t(enabled ? 'disable' : 'enable', {
-    keyPrefix: `join.${kind}`,
-  })
-
-  const selectLabel = t('choose', { keyPrefix: `join.${kind}` })
-  const Icon = enabled ? iconOn : iconOff
-
-  return (
-    <HStack gap={0}>
-      <ToggleButton
-        isSelected={enabled}
-        variant={enabled ? undefined : 'danger'}
-        toggledStyles={false}
-        onPress={(e) =>
-          buttonProps.onClick?.(
-            e as unknown as React.MouseEvent<HTMLButtonElement>
-          )
-        }
-        aria-label={toggleLabel}
-        tooltip={toggleLabel}
-        groupPosition="left"
-      >
-        <Icon />
-      </ToggleButton>
-      <Menu>
-        <Button
-          tooltip={selectLabel}
-          aria-label={selectLabel}
-          groupPosition="right"
-          square
-        >
-          <RiArrowDownSLine />
-        </Button>
-        <MenuList
-          items={devices.map((d) => ({
-            value: d.deviceId,
-            label: d.label,
-          }))}
-          selectedItem={activeDeviceId}
-          onAction={(value) => {
-            setActiveMediaDevice(value as string)
-            onActiveDeviceChange(value as string)
-          }}
-        />
-      </Menu>
-    </HStack>
-  )
-}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,46 +0,0 @@
-import { useLayoutContext } from '@livekit/components-react'
-import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
-
-export const useWidgetInteraction = () => {
-  const { dispatch, state } = useLayoutContext().widget
-
-  const layoutSnap = useSnapshot(layoutStore)
-  const sidePanel = layoutSnap.sidePanel
-
-  const isParticipantsOpen = sidePanel == 'participants'
-  const isEffectsOpen = sidePanel == 'effects'
-
-  const toggleParticipants = () => {
-    if (dispatch && state?.showChat) {
-      dispatch({ msg: 'toggle_chat' })
-    }
-    layoutStore.sidePanel = isParticipantsOpen ? null : 'participants'
-  }
-
-  const toggleChat = () => {
-    if (isParticipantsOpen) {
-      layoutStore.sidePanel = null
-    }
-    if (dispatch) {
-      dispatch({ msg: 'toggle_chat' })
-    }
-  }
-
-  const toggleEffects = () => {
-    if (dispatch && state?.showChat) {
-      dispatch({ msg: 'toggle_chat' })
-    }
-    layoutStore.sidePanel = isEffectsOpen ? null : 'effects'
-  }
-
-  return {
-    toggleParticipants,
-    toggleChat,
-    toggleEffects,
-    isChatOpen: state?.showChat,
-    unreadMessages: state?.unreadMessages,
-    isParticipantsOpen,
-    isEffectsOpen,
-  }
-}

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

@@ -1,143 +0,0 @@
-import { Track } from 'livekit-client'
-import * as React from 'react'
-
-import { supportsScreenSharing } from '@livekit/components-core'
-
-import {
-  useMaybeLayoutContext,
-  usePersistentUserChoices,
-} from '@livekit/components-react'
-
-import { mergeProps } from '@/utils/mergeProps.ts'
-import { StartMediaButton } from '../components/controls/StartMediaButton'
-import { useMediaQuery } from '../hooks/useMediaQuery'
-import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '../components/controls/ChatToggle'
-import { HandToggle } from '../components/controls/HandToggle'
-import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
-import { LeaveButton } from '../components/controls/LeaveButton'
-import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
-
-/** @public */
-export type ControlBarControls = {
-  microphone?: boolean
-  camera?: boolean
-  chat?: boolean
-  screenShare?: boolean
-  leave?: boolean
-  settings?: boolean
-}
-
-/** @public */
-export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
-  variation?: 'minimal' | 'verbose' | 'textOnly'
-  controls?: ControlBarControls
-  /**
-   * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
-   * @defaultValue true
-   * @alpha
-   */
-  saveUserChoices?: boolean
-}
-
-/**
- * The `ControlBar` prefab gives the user the basic user interface to control their
- * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
- *
- * @remarks
- * This component is build with other LiveKit components like `TrackToggle`,
- * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <ControlBar />
- * </LiveKitRoom>
- * ```
- * @public
- */
-export function ControlBar({
-  variation,
-  saveUserChoices = true,
-  onDeviceError,
-  ...props
-}: ControlBarProps) {
-  const [isChatOpen, setIsChatOpen] = React.useState(false)
-  const layoutContext = useMaybeLayoutContext()
-  React.useEffect(() => {
-    if (layoutContext?.widget.state?.showChat !== undefined) {
-      setIsChatOpen(layoutContext?.widget.state?.showChat)
-    }
-  }, [layoutContext?.widget.state?.showChat])
-
-  const isTooLittleSpace = useMediaQuery(
-    `(max-width: ${isChatOpen ? 1000 : 760}px)`
-  )
-
-  const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
-  variation ??= defaultVariation
-
-  const browserSupportsScreenSharing = supportsScreenSharing()
-
-  const htmlProps = mergeProps({ className: 'lk-control-bar' }, props)
-
-  const {
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
-
-  const microphoneOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
-    [saveAudioInputEnabled]
-  )
-
-  const cameraOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
-    [saveVideoInputEnabled]
-  )
-
-  return (
-    <div {...htmlProps}>
-      <SelectToggleDevice
-        source={Track.Source.Microphone}
-        onChange={microphoneOnChange}
-        onDeviceError={(error) =>
-          onDeviceError?.({ source: Track.Source.Microphone, error })
-        }
-        onActiveDeviceChange={(deviceId) =>
-          saveAudioInputDeviceId(deviceId ?? '')
-        }
-      />
-      <SelectToggleDevice
-        source={Track.Source.Camera}
-        onChange={cameraOnChange}
-        onDeviceError={(error) =>
-          onDeviceError?.({ source: Track.Source.Camera, error })
-        }
-        onActiveDeviceChange={(deviceId) =>
-          saveVideoInputDeviceId(deviceId ?? '')
-        }
-      />
-      {browserSupportsScreenSharing && (
-        <ScreenShareToggle
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.ScreenShare, error })
-          }
-        />
-      )}
-      <HandToggle />
-      <ChatToggle />
-      <ParticipantsToggle />
-      <OptionsButton />
-      <LeaveButton />
-      <StartMediaButton />
-    </div>
-  )
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,157 +0,0 @@
-import { DialogProps, Field, H } from '@/primitives'
-
-import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import {
-  useIsSpeaking,
-  useMediaDeviceSelect,
-  useRoomContext,
-} from '@livekit/components-react'
-import { isSafari } from '@/utils/livekit'
-import { useTranslation } from 'react-i18next'
-import { SoundTester } from '@/components/SoundTester'
-import { HStack } from '@/styled-system/jsx'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import { ReactNode } from 'react'
-
-type RowWrapperProps = {
-  heading: string
-  children: ReactNode[]
-}
-
-const RowWrapper = ({ heading, children }: RowWrapperProps) => {
-  return (
-    <>
-      <H lvl={2}>{heading}</H>
-      <HStack
-        gap={0}
-        style={{
-          flexWrap: 'wrap',
-        }}
-      >
-        <div
-          style={{
-            flex: '1 1 215px',
-            minWidth: 0,
-          }}
-        >
-          {children[0]}
-        </div>
-        <div
-          style={{
-            width: '10rem',
-            justifyContent: 'center',
-            display: 'flex',
-            paddingLeft: '1.5rem',
-          }}
-        >
-          {children[1]}
-        </div>
-      </HStack>
-    </>
-  )
-}
-
-export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
-  Pick<TabPanelProps, 'id'>
-
-type DeviceItems = Array<{ value: string; label: string }>
-
-export const AudioTab = ({ id }: AudioTabProps) => {
-  const { t } = useTranslation('settings')
-  const { localParticipant } = useRoomContext()
-
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  const {
-    devices: devicesOut,
-    activeDeviceId: activeDeviceIdOut,
-    setActiveMediaDevice: setActiveMediaDeviceOut,
-  } = useMediaDeviceSelect({ kind: 'audiooutput' })
-
-  const {
-    devices: devicesIn,
-    activeDeviceId: activeDeviceIdIn,
-    setActiveMediaDevice: setActiveMediaDeviceIn,
-  } = useMediaDeviceSelect({ kind: 'audioinput' })
-
-  const itemsOut: DeviceItems = devicesOut.map((d) => ({
-    value: d.deviceId,
-    label: d.label,
-  }))
-
-  const itemsIn: DeviceItems = devicesIn.map((d) => ({
-    value: d.deviceId,
-    label: d.label,
-  }))
-
-  // The Permissions API is not fully supported in Firefox and Safari, and attempting to use it for microphone permissions
-  // may raise an error. As a workaround, we infer microphone permission status by checking if the list of audio input
-  // devices (devicesIn) is non-empty. If the list has one or more devices, we assume the user has granted microphone access.
-  const isMicEnabled = devicesIn?.length > 0
-
-  const disabledProps = isMicEnabled
-    ? {}
-    : {
-        placeholder: t('audio.permissionsRequired'),
-        isDisabled: true,
-        defaultSelectedKey: undefined,
-      }
-
-  // No API to directly query the default audio device; this function heuristically finds it.
-  // Returns the item with value 'default' if present; otherwise, returns the first item in the list.
-  const getDefaultSelectedKey = (items: DeviceItems) => {
-    if (!items || items.length === 0) return
-    const defaultItem =
-      items.find((item) => item.value === 'default') || items[0]
-    return defaultItem.value
-  }
-
-  return (
-    <TabPanel padding={'md'} flex id={id}>
-      <RowWrapper heading={t('audio.microphone.heading')}>
-        <Field
-          type="select"
-          label={t('audio.microphone.label')}
-          items={itemsIn}
-          defaultSelectedKey={
-            activeDeviceIdIn || getDefaultSelectedKey(itemsIn)
-          }
-          onSelectionChange={(key) => setActiveMediaDeviceIn(key as string)}
-          {...disabledProps}
-          style={{
-            width: '100%',
-          }}
-        />
-        <>
-          {localParticipant.isMicrophoneEnabled ? (
-            <ActiveSpeaker isSpeaking={isSpeaking} />
-          ) : (
-            <span>Micro désactivé</span>
-          )}
-        </>
-      </RowWrapper>
-      {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
-        To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
-      {!isSafari() && (
-        <RowWrapper heading={t('audio.speakers.heading')}>
-          <Field
-            type="select"
-            label={t('audio.speakers.label')}
-            items={itemsOut}
-            defaultSelectedKey={
-              activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
-            }
-            onSelectionChange={async (key) =>
-              setActiveMediaDeviceOut(key as string)
-            }
-            {...disabledProps}
-            style={{
-              minWidth: 0,
-            }}
-          />
-          <SoundTester />
-        </RowWrapper>
-      )}
-    </TabPanel>
-  )
-}

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

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

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

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

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

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

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -1,33 +0,0 @@
-import { useEffect } from 'react'
-import { Crisp } from 'crisp-sdk-web'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-const SUPPORT_ID = '58ea6697-8eba-4492-bc59-ad6562585041'
-
-export const initializeSupportSession = (user: ApiUser) => {
-  if (!Crisp.isCrispInjected()) return
-  const { id, email } = user
-  Crisp.setTokenId(`meet-${id}`)
-  Crisp.user.setEmail(email)
-}
-
-export const terminateSupportSession = () => {
-  if (!Crisp.isCrispInjected()) return
-  Crisp.setTokenId()
-  Crisp.session.reset()
-}
-
-// Configure Crisp chat for real-time support across all pages.
-export const useSupport = () => {
-  useEffect(() => {
-    if (!SUPPORT_ID) {
-      console.warn('Crisp Website ID is not set')
-      return
-    }
-    if (Crisp.isCrispInjected()) return
-    Crisp.configure(SUPPORT_ID)
-    Crisp.setHideOnMobile(true)
-  }, [])
-
-  return null
-}

src/frontend/src/layout/Header.tsx

@@ -2,16 +2,13 @@ import { Link } from 'wouter'
 import { css } from '@/styled-system/css'
 import { Stack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
-import { Text, Button } from '@/primitives'
+import { A, Text, Button } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
-import { logoutUrl, useUser } from '@/features/auth'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/navigation/useMatchesRoute'
 import { Feedback } from '@/components/Feedback'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
-import { ProConnectButton } from '@/components/ProConnectButton'
-import { terminateAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
-import { terminateSupportSession } from '@/features/support/hooks/useSupport'
 
 export const Header = () => {
   const { t } = useTranslation()
@@ -66,7 +63,7 @@ export const Header = () => {
         <nav>
           <Stack gap={1} direction="row" align="center">
             {isLoggedIn === false && !isHome && (
-              <ProConnectButton hint={false} />
+              <A href={authUrl()}>{t('login')}</A>
             )}
             {!!user && (
               <Menu>
@@ -82,8 +79,6 @@ export const Header = () => {
                   items={[{ value: 'logout', label: t('logout') }]}
                   onAction={(value) => {
                     if (value === 'logout') {
-                      terminateAnalyticsSession()
-                      terminateSupportSession()
                       window.location.href = logoutUrl()
                     }
                   }}

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

@@ -1,5 +1,5 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "",
   "cancel": "",
   "closeDialog": "",
@@ -7,19 +7,11 @@
     "heading": ""
   },
   "feedbackAlert": "",
-  "forbidden": {
-    "heading": ""
-  },
   "loading": "",
   "loggedInUserTooltip": "",
-  "login": {
-    "buttonLabel": "",
-    "linkLabel": "",
-    "link": ""
-  },
+  "login": "Anmelden",
   "logout": "",
   "notFound": {
     "heading": ""
-  },
-  "submit": "OK"
+  }
 }

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

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

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

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

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

@@ -4,22 +4,19 @@
     "heading": ""
   },
   "join": {
-    "videoinput": {
-      "choose": "",
-      "disable": "",
-      "enable": "",
-      "label": "",
-      "placeholder": ""
-    },
-    "audioinput": {
-      "choose": "",
-      "disable": "",
-      "enable": "",
-      "label": ""
-    },
+    "cameraIsOff": "",
+    "cameraIsOn": "",
+    "cameraPlaceholder": "",
+    "camlabel": "",
+    "chooseCamera": "",
+    "chooseMic": "",
+    "chooseSpeaker": "",
     "heading": "",
     "joinLabel": "",
     "joinMeeting": "",
+    "micIsOff": "",
+    "micIsOn": "",
+    "micLabel": "",
     "toggleOff": "",
     "toggleOn": "",
     "userLabel": "",
@@ -28,91 +25,15 @@
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
-    "copy": "",
     "copied": "",
+    "copy": "",
     "heading": "",
-    "description": "",
-    "permissions": ""
+    "inputLabel": ""
   },
   "error": {
     "createRoom": {
       "heading": "",
       "body": ""
     }
-  },
-  "controls": {
-    "microphone": "",
-    "camera": "",
-    "shareScreen": "",
-    "stopScreenShare": "",
-    "chat": {
-      "open": "",
-      "closed": ""
-    },
-    "hand": {
-      "raise": "",
-      "lower": ""
-    },
-    "screenShare": {
-      "start": "",
-      "stop": ""
-    },
-    "leave": "",
-    "participants": {
-      "open": "",
-      "closed": ""
-    }
-  },
-  "options": {
-    "buttonLabel": "",
-    "items": {
-      "feedbacks": "",
-      "support": "",
-      "settings": "",
-      "username": "",
-      "effects": ""
-    }
-  },
-  "effects": {
-    "activateCamera": "",
-    "notAvailable": "",
-    "heading": "",
-    "blur": {
-      "light": "",
-      "normal": "",
-      "apply": "",
-      "clear": ""
-    },
-    "experimental": ""
-  },
-  "sidePanel": {
-    "heading": {
-      "participants": "",
-      "effects": ""
-    },
-    "content": {
-      "participants": "",
-      "effects": ""
-    },
-    "closeButton": ""
-  },
-  "participants": {
-    "subheading": "",
-    "contributors": "",
-    "collapsable": {
-      "open": "",
-      "close": ""
-    },
-    "you": "",
-    "muteYourself": "",
-    "muteParticipant": "",
-    "muteParticipantAlert": {
-      "description": "",
-      "confirm": "",
-      "cancel": ""
-    },
-    "raisedHands": "",
-    "lowerParticipantHand": "",
-    "lowerParticipantsHand": ""
   }
 }

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

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

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

@@ -1,25 +1,17 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "Back to homescreen",
   "cancel": "Cancel",
   "closeDialog": "Close dialog",
   "error": {
-    "heading": "An error occurred while loading the page"
+    "heading": "An error occured while loading the page"
   },
   "feedbackAlert": "Give us feedback",
-  "forbidden": {
-    "heading": "You don't have the permission to view this page"
-  },
   "loading": "Loading…",
   "loggedInUserTooltip": "Logged in as…",
-  "login": {
-    "buttonLabel": "Login with ProConnect",
-    "linkLabel": "What is ProConnect? - new tab",
-    "link": "What is ProConnect?"
-  },
+  "login": "Login",
   "logout": "Logout",
   "notFound": {
     "heading": "Page not found"
-  },
-  "submit": "OK"
+  }
 }

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

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

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

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