🚀(paas) add PaaS deployment scripts, tested on Scalingo

♻️(frontend) refactor clipboard logic into dedicated reusable hook
Extract clipboard content logic from UI components into a separate custom hook to decouple interface elements from clipboard functionality. Creates a reusable hook that can better adapt to future UX changes without requiring modifications to individual UI components.
2025-08-08 10:40:12 +02:00 · 2025-08-07 12:51:03 +02:00 · 2025-08-07 12:51:03 +02:00 · 2025-08-07 12:51:03 +02:00 · 2025-08-07 12:51:03 +02:00 · 2025-08-07 12:51:03 +02:00
69 changed files with 1064 additions and 1596 deletions
@@ -0,0 +1,2 @@
+web: bin/buildpack_start.sh
+postdeploy: python manage.py migrate
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -o errexit    # always exit on error
+set -o pipefail   # don't ignore exit codes when piping output
+
+echo "-----> Running post-compile script"
+
+# Cleanup
+rm -rf docker docs env.d gitlint
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+set -o errexit    # always exit on error
+set -o pipefail   # don't ignore exit codes when piping output
+
+echo "-----> Running post-frontend script"
+
+# Move the frontend build to the nginx root and clean up
+mkdir -p build/
+mv src/frontend/dist build/frontend-out
+
+mv src/backend/* ./
+mv src/nginx/* ./
+
+echo "3.13" > .python-version
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Start the Django backend server
+gunicorn -b :8000 meet.wsgi:application --log-file - &
+
+# Start the Nginx server
+bin/run &
+
+# if the current shell is killed, also terminate all its children     
+trap "pkill SIGTERM -P $$" SIGTERM                            
+
+# wait for a single child to finish,                               
+wait -n                                                  
+# then kill all the other tasks                          
+pkill -P $$
@@ -35,9 +35,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    LIVEKIT_API_SECRET: secret
@@ -217,9 +217,6 @@ DB_NAME: meet
 DB_USER: dinum
 DB_PASSWORD: pass
 DB_PORT: 5432
-POSTGRES_DB: meet
-POSTGRES_USER: dinum
-POSTGRES_PASSWORD: pass
 ```

 ## Deployment
@@ -339,6 +336,8 @@ These are the environmental options available on meet backend.
 | LIVEKIT_API_SECRET                              | LiveKit API secret                                                                                                                                           |                                                                                                                                                               |
 | LIVEKIT_API_URL                                 | LiveKit API URL                                                                                                                                              |                                                                                                                                                               |
 | LIVEKIT_VERIFY_SSL                              | Verify SSL for LiveKit connections                                                                                                                           | true                                                                                                                                                          |
+| LIVEKIT_FORCE_WSS_PROTOCOL                      | Enables WSS protocol conversion for legacy browser compatibility (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs fail in WebSocket() constructor.    | false                                                                                                                                                         |
+| LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND         | Firefox-only connection warmup: pre-calls WebSocket endpoint (expecting 401) to initialize cache, resolving proxy/network connectivity issues.               | false                                                                                                                                                         |
 | RESOURCE_DEFAULT_ACCESS_LEVEL                   | Default resource access level for rooms                                                                                                                      | public                                                                                                                                                        |
 | ALLOW_UNREGISTERED_ROOMS                        | Allow usage of unregistered rooms                                                                                                                            | true                                                                                                                                                          |
 | RECORDING_ENABLE                                | Record meeting option                                                                                                                                        | false                                                                                                                                                         |
@@ -52,6 +52,7 @@ def get_frontend_configuration(request):
        },
        "livekit": {
            "url": settings.LIVEKIT_CONFIGURATION["url"],
+            "force_wss_protocol": settings.LIVEKIT_FORCE_WSS_PROTOCOL,
            "enable_firefox_proxy_workaround": settings.LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND,
        },
    }
@@ -11,11 +11,12 @@ https://docs.djangoproject.com/en/3.1/ref/settings/
 """

 import json
-from os import path
+from os import environ, path
 from socket import gethostbyname, gethostname

 from django.utils.translation import gettext_lazy as _

+import dj_database_url
 import sentry_sdk
 from configurations import Configuration, values
 from lasuite.configuration.values import SecretFileValue
@@ -86,7 +87,9 @@ class Base(Configuration):

    # Database
    DATABASES = {
-        "default": {
+        "default": dj_database_url.config()
+        if environ.get("DATABASE_URL")
+        else {
            "ENGINE": values.Value(
                "django.db.backends.postgresql_psycopg2",
                environ_name="DB_ENGINE",
@@ -492,6 +495,9 @@ class Base(Configuration):
        ),
        "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
    }
+    LIVEKIT_FORCE_WSS_PROTOCOL = values.BooleanValue(
+        False, environ_name="LIVEKIT_FORCE_WSS_PROTOCOL", environ_prefix=None
+    )
    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND = values.BooleanValue(
        environ_name="LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND",
        environ_prefix=None,
@@ -29,6 +29,7 @@ dependencies = [
    "Brotli==1.1.0",
    "brevo-python==1.1.2",
    "celery[redis]==5.5.3",
+    "dj-database-url==2.3.0",
    "django-configurations==2.5.1",
    "django-cors-headers==4.7.0",
    "django-countries==7.6.1",
@@ -0,0 +1,7 @@
+#!/usr/bin/env python
+"""Setup file for the impress module. All configuration stands in the setup.cfg file."""
+# coding: utf-8
+
+from setuptools import setup
+
+setup()
@@ -1,109 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
-  <defs>
-    <style>
-      .st0, .st1, .st2, .st3, .st4, .st5 {
-        fill: none;
-      }
-
-      .st6 {
-        fill: #6dd58c;
-      }
-
-      .st6, .st1, .st2, .st7, .st8, .st9, .st10 {
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-
-      .st6, .st1, .st2, .st7, .st8, .st10 {
-        stroke-width: 3px;
-      }
-
-      .st6, .st1, .st7, .st8, .st4, .st5, .st10 {
-        stroke: #191c1e;
-      }
-
-      .st11, .st7, .st12, .st9 {
-        fill: #fff;
-      }
-
-      .st11, .st3 {
-        stroke: #000;
-        stroke-miterlimit: 10;
-      }
-
-      .st11, .st3, .st9 {
-        stroke-width: 5px;
-      }
-
-      .st2, .st9 {
-        stroke: #898989;
-      }
-
-      .st8 {
-        fill: #ff8669;
-      }
-
-      .st13 {
-        fill: #e3e3fb;
-      }
-
-      .st14 {
-        fill: #f7f7f7;
-      }
-
-      .st4, .st5 {
-        stroke-width: 4px;
-      }
-
-      .st5 {
-        stroke-linecap: square;
-      }
-
-      .st15 {
-        fill: #ca3632;
-      }
-
-      .st10 {
-        fill: #ffb929;
-      }
-    </style>
-  </defs>
-  <rect class="st12" x=".53" y=".53" width="1078.61" height="1080.36"/>
-  <path class="st12" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
-  <path class="st1" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
-  <path class="st12" d="M960.08,256.93h-110c-12.94,0-23.43-10.49-23.43-23.43v-71.56c0-12.94-10.48-23.43-23.42-23.44h-266.94c-12.94,0-23.43,10.49-23.43,23.44h0v71.56c0,12.94-10.49,23.43-23.43,23.43H120.5v137.62h839.58"/>
-  <path class="st8" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
-  <path class="st10" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
-  <path class="st6" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
-  <path class="st1" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
-  <path class="st7" d="M625.31,322.08h-27.15c-4.35,0-7.88,3.53-7.88,7.88h0v17.19c0,4.35,3.53,7.88,7.88,7.88h27.15c4.35,0,7.88-3.53,7.88-7.88h0v-17.19c0-4.35-3.53-7.88-7.88-7.88h0Z"/>
-  <path class="st12" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
-  <path class="st1" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
-  <g>
-    <ellipse class="st4" cx="707.63" cy="299.5" rx="18.37" ry="18.5"/>
-    <path class="st5" d="M624,299h63"/>
-    <circle class="st4" cx="643.5" cy="339.5" r="18.5"/>
-    <path class="st5" d="M728,339h-63"/>
-  </g>
-  <path class="st14" d="M192.29,138.5h767.79v118.43H120.5v-46.64c0-39.62,32.17-71.79,71.79-71.79h0Z"/>
-  <path class="st0" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
-  <path class="st2" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
-  <path class="st2" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
-  <path class="st2" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
-  <path class="st2" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
-  <path class="st2" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
-  <path class="st15" d="M382.41,636.74l39.92,39.92,13.47-13.47-188.53-188.53-13.47,13.47,11.35,11.35h-5.58c-5.26,0-9.52,4.26-9.52,9.52v133.31c0,5.26,4.26,9.52,9.52,9.52h133.31c5.26,0,9.52-4.26,9.52-9.52v-5.58h.01ZM363.37,617.69v15.1h-114.27v-114.27h15.1l99.17,99.17h0ZM439.55,633.17c0,2.02-1.19,3.6-2.78,4.33l-16.27-16.27v-75.65l-38.09,26.66v10.9l-19.04-19.04v-45.57h-45.57l-19.04-19.04h74.14c5.26,0,9.52,4.26,9.52,9.52v39.99l49.64-34.75c3.16-2.21,7.49.05,7.49,3.9v115.02h0Z"/>
-  <path class="st15" d="M375.25,866.34l43.58,43.58,12.93-12.93-180.97-180.97-12.93,12.93,51.25,51.25v14.49c0,25.24,20.46,45.7,45.7,45.7,4.41,0,8.67-.62,12.7-1.79l14.17,14.17c-8.17,3.79-17.28,5.9-26.87,5.9-32.23,0-58.9-23.84-63.33-54.84h-18.43c4.21,38.13,34.49,68.4,72.62,72.62v37.06h18.28v-37.06c11.28-1.25,21.87-4.77,31.3-10.11h0ZM330.71,821.81c-11.87-1.78-21.25-11.16-23.03-23.03l23.03,23.03ZM402.21,841.85l-13.18-13.18c4.65-7.4,7.82-15.82,9.11-24.84h18.43c-1.55,14.04-6.64,27.02-14.35,38.03h0ZM375.62,815.27l-14.15-14.15c.5-2.06.76-4.21.76-6.43v-36.56c0-15.14-12.28-27.42-27.42-27.42-11.83,0-21.91,7.49-25.76,17.99l-13.68-13.68c7.94-13.52,22.63-22.59,39.44-22.59,25.24,0,45.7,20.46,45.7,45.7v36.56c0,7.4-1.76,14.39-4.88,20.58h-.01Z"/>
-  <path d="M597.6,312.73c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM602.4,301.55c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM619.98,315.93h25.57v-6.39h-25.57v6.39ZM632.76,344.69c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM637.56,333.51c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM594.41,341.5v6.39h25.57v-6.39h-25.57Z"/>
-  <line class="st2" x1="960.08" y1="394.55" x2="836.91" y2="394.55"/>
-  <path class="st9" d="M527.76,394.55H120.5v-137.62h368.93c12.94,0,23.43-10.49,23.43-23.43v-71.56c0-12.95,10.49-23.44,23.43-23.44h266.94c12.94,0,23.43,10.5,23.42,23.44v71.56c0,2.09.27,4.12.79,6.05,1,3.77,2.92,7.17,5.51,9.94,4.28,4.58,10.37,7.44,17.13,7.44h110"/>
-  <path class="st13" d="M645.52,274.8h314.56v101.2h-314.56c-23.81,0-43.12-22.66-43.12-50.61h0c.01-27.94,19.31-50.59,43.12-50.59h0Z"/>
-  <g>
-    <path class="st13" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71h-181.11c-43.65,0-79.03-35.38-79.03-79.03,0-21.82,8.86-41.56,23.16-55.86,14.3-14.29,34.06-23.13,55.87-23.13h179.74c12.93,23.89,20.27,51.24,20.27,80.31Z"/>
-    <path d="M656.78,350.02v9.98h39.93v-9.98h-39.93ZM724.16,337.54c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.46,17.47,17.46,17.47-7.82,17.47-17.46-7.82-17.47-17.47-17.47ZM724.16,362.49c-4.13,0-7.49-3.35-7.49-7.48s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.36,7.48-7.49,7.48ZM696.71,300.11v9.98h39.93v-9.98h-39.93ZM669.26,287.63c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.47,17.47,17.47,17.47-7.82,17.47-17.47-7.82-17.47-17.47-17.47ZM669.26,312.59c-4.13,0-7.49-3.36-7.49-7.49s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.35,7.49-7.49,7.49Z"/>
-  </g>
-  <line class="st2" x1="813.4" y1="432.85" x2="551.26" y2="432.85"/>
-  <path class="st3" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71-5.35,10.32-11.74,20.02-19.02,28.96-30.98,38.03-78.19,62.32-131.07,62.32s-100.09-24.29-131.07-62.32c-23.7-29.09-37.92-66.22-37.92-106.67,0-93.33,75.66-168.99,168.99-168.99,64.26,0,120.15,35.87,148.72,88.68,12.93,23.89,20.27,51.24,20.27,80.31h0Z"/>
-  <polygon class="st11" points="705.12 406.95 681.79 637.91 746.21 597.51 802.28 751.56 852.2 733.39 796.14 579.34 871.46 568.88 705.12 406.95"/>
-</svg>
@@ -39,6 +39,7 @@ export interface ApiConfig {
  manifest_link?: string
  livekit: {
    url: string
+    force_wss_protocol: boolean
    enable_firefox_proxy_workaround: boolean
  }
 }
@@ -1,100 +1,187 @@
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
+import { Bold, Button, Dialog, type DialogProps, P, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
 import { css } from '@/styled-system/css'
+import { ApiAccessLevel, ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'

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

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

  const [isHovered, setIsHovered] = useState(false)

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

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

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

  const { data } = useConfig()

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

 export const MainNotificationToast = () => {
  const room = useRoomContext()
@@ -155,17 +154,14 @@ export const MainNotificationToast = () => {

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

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

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

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

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

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

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

@@ -10,6 +10,8 @@ import {
  MediaDeviceFailure,
  Room,
  RoomOptions,
+  supportsAdaptiveStream,
+  supportsDynacast,
 } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -84,10 +86,13 @@ export const Conference = ({
    retry: false,
  })

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

  const room = useMemo(() => new Room(roomOptions), [roomOptions])
@@ -164,6 +167,20 @@ export const Conference = ({
    kind: null,
  })

+  /*
+   * Ensure stable WebSocket connection URL. This is critical for legacy browser compatibility
+   * (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs in WebSocket() constructor
+   *  may fail - the force_wss_protocol flag allows explicit WSS protocol conversion
+   */
+  const serverUrl = useMemo(() => {
+    const livekit_url = apiConfig?.livekit.url
+    if (!livekit_url) return
+    if (apiConfig?.livekit.force_wss_protocol) {
+      return livekit_url.replace('https://', 'wss://')
+    }
+    return livekit_url
+  }, [apiConfig?.livekit])
+
  const { t } = useTranslation('rooms')
  if (isCreateError) {
    // this error screen should be replaced by a proper waiting room for anonymous user.
@@ -187,7 +204,7 @@ export const Conference = ({
      <Screen header={false} footer={false}>
        <LiveKitRoom
          room={room}
-          serverUrl={apiConfig?.livekit.url}
+          serverUrl={serverUrl}
          token={data?.livekit?.token}
          connect={isConnectionWarmedUp}
          audio={userConfig.audioEnabled}
@@ -223,7 +240,6 @@ export const Conference = ({
            <InviteDialog
              isOpen={showInviteDialog}
              onOpenChange={setShowInviteDialog}
-              roomId={roomId}
              onClose={() => setShowInviteDialog(false)}
            />
          )}
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P } from '@/primitives'
+import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,8 +10,13 @@ import {
  RiFileCopyLine,
  RiSpam2Fill,
 } from '@remixicon/react'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { css } from '@/styled-system/css'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'

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

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

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

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

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

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

@@ -73,14 +71,36 @@ const Effects = ({
        </Text>
        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
      </Dialog>
-      <Button
-        variant="whiteCircle"
-        onPress={openDialog}
-        tooltip={t('description')}
-        aria-label={t('description')}
+      <div
+        className={css({
+          position: 'absolute',
+          right: 0,
+          bottom: '0',
+          padding: '1rem',
+          zIndex: '1',
+        })}
      >
-        <RiImageCircleAiFill size={24} />
-      </Button>
+        <Button
+          variant="whiteCircle"
+          onPress={openDialog}
+          tooltip={t('description')}
+          aria-label={t('description')}
+        >
+          <RiImageCircleAiFill size={24} />
+        </Button>
+      </div>
+      <div
+        className={css({
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '20%',
+          backgroundImage:
+            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
+          borderBottomRadius: '1rem',
+        })}
+      />
    </>
  )
 }
@@ -99,7 +119,6 @@ export const Join = ({
      audioEnabled,
      videoEnabled,
      audioDeviceId,
-      audioOutputDeviceId,
      videoDeviceId,
      processorSerialized,
      username,
@@ -107,14 +126,12 @@ export const Join = ({
    saveAudioInputEnabled,
    saveVideoInputEnabled,
    saveAudioInputDeviceId,
-    saveAudioOutputDeviceId,
    saveVideoInputDeviceId,
    saveUsername,
    saveProcessorSerialized,
  } = usePersistentUserChoices()

-  // fix - permission issue, when permission not set doesn't refresh
-  const { videoTrack, audioTrack } = usePreviewTracks(
+  const tracks = usePreviewTracks(
    {
      audio: { deviceId: audioDeviceId },
      video: {
@@ -126,24 +143,29 @@ export const Join = ({
    onError
  )

-  const toggleTrack = (track: LocalTrack | undefined, isEnabled: boolean) => {
-    if (!track) return
-    if (isEnabled) {
-      track?.unmute()
-    } else {
-      track?.mute()
-    }
-  }
+  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 LocalVideoTrack,
+    [tracks]
+  )

  const videoEl = useRef(null)
-  const isVideoInitiated = useRef(false)

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

    const handleVideoLoaded = () => {
      if (videoElement) {
-        isVideoInitiated.current = true
        videoElement.style.opacity = '1'
      }
    }
@@ -218,29 +240,6 @@ export const Join = ({
    enterRoom()
  }

-  const { isCameraGranted, isMicrophoneGranted } = usePermissions()
-
-  const hintMessage = useMemo(() => {
-    if (!isCameraGranted) {
-      if (!isMicrophoneGranted) {
-        return 'cameraAndMicNotGranted'
-      }
-      return 'cameraNotGranted'
-    }
-
-    if (!videoEnabled) {
-      return 'cameraDisabled'
-    }
-
-    if (!isVideoInitiated.current) {
-      return 'cameraStarting'
-    }
-
-    if (videoTrack && videoEnabled) {
-      return ''
-    }
-  }, [videoTrack, videoEnabled, isCameraGranted, isMicrophoneGranted])
-
  const renderWaitingState = () => {
    switch (status) {
      case ApiLobbyStatus.TIMEOUT:
@@ -292,10 +291,6 @@ export const Join = ({
            submitButtonProps={{
              fullWidth: true,
            }}
-            className={css({
-              width: '100%',
-              maxWidth: '340px',
-            })}
          >
            <VStack marginBottom={1}>
              <H lvl={1} margin="sm" centered>
@@ -327,264 +322,145 @@ export const Join = ({
      <div
        className={css({
          display: 'flex',
+          alignItems: 'flex-start',
          justifyContent: 'center',
-          alignItems: 'center',
-          width: '100%',
-          flexDirection: 'column',
          flexGrow: 1,
-          gap: { base: '1rem', sm: '2rem', lg: 0 },
          lg: {
-            flexDirection: 'row',
+            alignItems: 'center',
          },
        })}
      >
        <div
          className={css({
            display: 'flex',
+            height: 'auto',
            alignItems: 'center',
            justifyContent: 'center',
-            width: '100%',
+            gap: '2rem',
+            padding: '0 2rem',
+            flexDirection: 'column',
            minWidth: 0,
-            maxWidth: '764px',
+            width: '100%',
            lg: {
-              height: '540px',
-              flexGrow: 1,
+              flexDirection: 'row',
+              width: 'auto',
+              height: '570px',
            },
          })}
        >
          <div
            className={css({
-              display: 'inline-flex',
-              flexDirection: 'column',
-              flexGrow: 1,
-              minWidth: 0,
-              flexShrink: { base: 0, sm: 1 },
+              width: '100%',
+              lg: {
+                width: '740px',
+              },
            })}
          >
            <div
              className={css({
                borderRadius: '1rem',
-                flex: '0 1',
-                minWidth: '320px',
-                margin: {
-                  base: '0.5rem',
-                  sm: '1rem',
-                  lg: '1rem 0.5rem 1rem 1rem',
-                },
                overflow: 'hidden',
                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
+                width: '100%',
+                height: 'auto',
+                aspectRatio: 16 / 9,
+                '--tw-shadow':
+                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
+                '--tw-shadow-colored':
+                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
+                boxShadow:
+                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
+                backgroundColor: 'black',
              })}
            >
-              <div
-                className={css({
-                  position: 'relative',
-                  width: '100%',
-                  height: 'fit-content',
-                  aspectRatio: '16 / 9',
-                })}
-              >
-                <div
+              {videoTrack && videoEnabled ? (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <video
+                  ref={videoEl}
+                  width="1280"
+                  height="720"
                  className={css({
-                    backgroundColor: 'black',
-                    position: 'absolute',
-                    boxSizing: 'border-box',
-                    top: 0,
+                    display: 'block',
                    width: '100%',
                    height: '100%',
-                    overflow: 'hidden',
+                    objectFit: 'cover',
+                    transform: 'rotateY(180deg)',
+                    opacity: 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    borderRadius: '1rem',
                  })}
-                >
-                  <div
-                    aria-label={t(
-                      `videoPreview.${videoEnabled && isCameraGranted ? 'enabled' : 'disabled'}`
-                    )}
-                    role="status"
-                    className={css({
-                      position: 'absolute',
-                      top: 0,
-                      width: '100%',
-                    })}
-                  >
-                    <div
-                      className={css({
-                        width: '100%',
-                        height: 'auto',
-                        aspectRatio: '16 / 9',
-                        overflow: 'hidden',
-                        position: 'absolute',
-                        top: '-2px',
-                        left: '-2px',
-                        pointerEvents: 'none',
-                        transform: 'scale(1.02)',
-                      })}
-                    >
-                      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-                      <video
-                        ref={videoEl}
-                        width="1280"
-                        height="720"
-                        style={{
-                          display:
-                            !videoEnabled || !isCameraGranted
-                              ? 'none'
-                              : undefined,
-                        }}
-                        className={css({
-                          position: 'absolute',
-                          transform: 'rotateY(180deg)',
-                          opacity: 0,
-                          height: '100%',
-                          transition: 'opacity 0.3s ease-in-out',
-                          objectFit: 'cover',
-                        })}
-                        disablePictureInPicture
-                        disableRemotePlayback
-                      />
-                    </div>
-                  </div>
-                  <div
-                    role="alert"
-                    className={css({
-                      display: 'flex',
-                      flexDirection: 'column',
-                      height: '100%',
-                      width: '100%',
-                      justifyContent: 'center',
-                      textAlign: 'center',
-                      alignItems: 'center',
-                      padding: '0.24rem',
-                      boxSizing: 'border-box',
-                    })}
-                  >
-                    <p
-                      className={css({
-                        fontWeight: '400',
-                        fontSize: { base: '1rem', sm: '1.25rem', lg: '1.5rem' },
-                        textWrap: 'balance',
-                        color: 'white',
-                      })}
-                    >
-                      {hintMessage && t(hintMessage)}
-                    </p>
-                  </div>
-                </div>
+                  disablePictureInPicture
+                  disableRemotePlayback
+                />
+              ) : (
                <div
                  className={css({
-                    position: 'absolute',
-                    right: '50%',
-                    bottom: '1rem',
-                    zIndex: '1',
+                    width: '100%',
+                    height: '100%',
+                    color: 'white',
                    display: 'flex',
-                    gap: '1.5rem',
                    justifyContent: 'center',
-                    marginRight: '-68px',
+                    alignItems: 'center',
                  })}
                >
-                  <ToggleDeviceJoin
-                    source={Track.Source.Microphone}
-                    initialState={audioEnabled}
-                    track={audioTrack}
-                    onChange={(value) => {
-                      toggleTrack(audioTrack, value)
-                      saveAudioInputEnabled(value)
-                    }}
-                  />
-                  <ToggleDeviceJoin
-                    source={Track.Source.Camera}
-                    initialState={videoEnabled}
-                    track={videoTrack}
-                    onChange={(value) => {
-                      const videoElement =
-                        videoEl.current as HTMLVideoElement | null
-
-                      if (isVideoInitiated.current && !value && videoElement) {
-                        isVideoInitiated.current = false
-                        videoElement.style.opacity = '0'
-                      }
-                      toggleTrack(videoTrack, value)
-                      saveVideoInputEnabled(value)
-                    }}
-                  />
+                  <p
+                    className={css({
+                      fontSize: '24px',
+                      fontWeight: '300',
+                    })}
+                  >
+                    {!videoEnabled && t('cameraDisabled')}
+                    {videoEnabled && !videoTrack && t('cameraStarting')}
+                  </p>
                </div>
-                <div
-                  className={css({
-                    position: 'absolute',
-                    right: '1rem',
-                    bottom: '1rem',
-                    zIndex: '1',
-                  })}
-                >
-                  <Effects
-                    videoTrack={videoTrack}
-                    onSubmit={(processor) =>
-                      saveProcessorSerialized(processor?.serialize())
-                    }
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className={css({
-                display: 'none',
-                sm: {
-                  display: 'flex',
-                  justifyContent: 'center',
-                  gap: '2%',
-                  width: '80%',
-                  marginX: 'auto',
-                },
-              })}
-            >
-              <div
-                className={css({
-                  width: '30%',
-                })}
-              >
-                <SelectDeviceJoin
-                  kind="audioinput"
-                  id={audioDeviceId}
-                  onSubmit={saveAudioInputDeviceId}
-                />
-              </div>
-              <div
-                className={css({
-                  width: '30%',
-                })}
-              >
-                <SelectDeviceJoin
-                  kind="audiooutput"
-                  id={audioOutputDeviceId}
-                  onSubmit={saveAudioOutputDeviceId}
-                />
-              </div>
-              <div
-                className={css({
-                  width: '30%',
-                })}
-              >
-                <SelectDeviceJoin
-                  kind="videoinput"
-                  id={videoDeviceId}
-                  onSubmit={saveVideoInputDeviceId}
-                />
-              </div>
+              )}
+              <Effects
+                videoTrack={videoTrack}
+                onSubmit={(processor) =>
+                  saveProcessorSerialized(processor?.serialize())
+                }
+              />
            </div>
+            <HStack justify="center" padding={1.5}>
+              <SelectToggleDevice
+                source={Track.Source.Microphone}
+                initialState={audioEnabled}
+                track={audioTrack}
+                initialDeviceId={audioDeviceId}
+                onChange={(enabled) => saveAudioInputEnabled(enabled)}
+                onDeviceError={(error) => console.error(error)}
+                onActiveDeviceChange={(deviceId) =>
+                  saveAudioInputDeviceId(deviceId ?? '')
+                }
+                variant="tertiary"
+              />
+              <SelectToggleDevice
+                source={Track.Source.Camera}
+                initialState={videoEnabled}
+                track={videoTrack}
+                initialDeviceId={videoDeviceId}
+                onChange={(enabled) => saveVideoInputEnabled(enabled)}
+                onDeviceError={(error) => console.error(error)}
+                onActiveDeviceChange={(deviceId) =>
+                  saveVideoInputDeviceId(deviceId ?? '')
+                }
+                variant="tertiary"
+              />
+            </HStack>
+          </div>
+          <div
+            className={css({
+              width: '100%',
+              flexShrink: 0,
+              padding: '0',
+              sm: {
+                width: '448px',
+                padding: '0 3rem 9rem 3rem',
+              },
+            })}
+          >
+            {renderWaitingState()}
          </div>
-        </div>
-        <div
-          className={css({
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            flex: '0 0 448px',
-            position: 'relative',
-            margin: '1rem 1rem 1rem 0.5rem',
-          })}
-        >
-          {renderWaitingState()}
        </div>
      </div>
    </Screen>
@@ -1,90 +0,0 @@
-import { Dialog, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { css } from '@/styled-system/css'
-import { HStack } from '@/styled-system/jsx'
-import { RiEqualizer2Line } from '@remixicon/react'
-import { useEffect, useMemo } from 'react'
-import { usePermissions } from '../hooks/usePermissions'
-import { useModal } from '../hooks/useModal'
-
-export const PermissionErrorModal = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
-  const permissions = usePermissions()
-  const { isOpen, close } = useModal('permissions')
-
-  useEffect(() => {
-    if (
-      isOpen() &&
-      permissions.isCameraGranted &&
-      permissions.isMicrophoneGranted
-    ) {
-      close()
-    }
-  }, [permissions, isOpen, close])
-
-  // Use to split the translation in half to inject an inline icon
-  const icon_placeholder = 'ICON_PLACEHOLDER'
-  const [openMenuFirstPart, openMenuSecondPart] = t('body.openMenu', {
-    icon_placeholder,
-  }).split(icon_placeholder)
-
-  const permissionLabel = useMemo(() => {
-    if (permissions.isMicrophoneDenied && permissions.isCameraDenied) {
-      return 'cameraAndMicrophone'
-    } else if (permissions.isCameraDenied) {
-      return 'camera'
-    } else if (permissions.isMicrophoneDenied) {
-      return 'microphone'
-    } else {
-      return 'default'
-    }
-  }, [permissions])
-
-  return (
-    <Dialog
-      isOpen={isOpen()}
-      role="dialog"
-      type="flex"
-      title={''}
-      aria-label={t(`heading.${permissionLabel}`, {
-        app_title: `${import.meta.env.VITE_APP_TITLE}`,
-      })}
-      onClose={() => close()}
-    >
-      <HStack>
-        <img
-          src="/assets/camera_mic_permission.svg"
-          alt=""
-          className={css({
-            minWidth: '290px',
-            minHeight: '290px',
-            maxWidth: '290px',
-          })}
-        />
-        <div
-          className={css({
-            maxWidth: '400px',
-          })}
-        >
-          <H lvl={2}>
-            {t(`heading.${permissionLabel}`, {
-              app_title: `${import.meta.env.VITE_APP_TITLE}`,
-            })}
-          </H>
-          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
-            <li>
-              {openMenuFirstPart}
-              <span
-                style={{ display: 'inline-block', verticalAlign: 'middle' }}
-              >
-                <RiEqualizer2Line />
-              </span>
-              {openMenuSecondPart}
-            </li>
-            <li>{t(`body.details.${permissionLabel}`)}</li>
-          </ol>
-        </div>
-      </HStack>
-    </Dialog>
-  )
-}
@@ -1,113 +0,0 @@
-import {
-  RemixiconComponentType,
-  RiMicLine,
-  RiVideoOnLine,
-  RiVolumeDownLine,
-} from '@remixicon/react'
-import { Select } from '@/primitives/Select.tsx'
-import { useMemo } from 'react'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { usePermissions } from '@/features/rooms/hooks/usePermissions'
-
-type DeviceItems = Array<{ value: string; label: string }>
-
-type DeviceConfig = {
-  icon: RemixiconComponentType
-  isGranted: boolean
-}
-
-type SelectDeviceJoinProps = {
-  id?: string
-  onSubmit?: (id: string) => void
-  kind: MediaDeviceKind
-}
-
-export const SelectDeviceJoin = ({ kind, ...props }: SelectDeviceJoinProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const { isMicrophoneGranted, isCameraGranted } = usePermissions()
-
-  const config = useMemo<DeviceConfig>(() => {
-    switch (kind) {
-      case 'audioinput':
-        return {
-          icon: RiMicLine,
-          isGranted: isMicrophoneGranted,
-        }
-      case 'audiooutput':
-        return {
-          icon: RiVolumeDownLine,
-          isGranted: isMicrophoneGranted,
-        }
-      case 'videoinput':
-        return {
-          icon: RiVideoOnLine,
-          isGranted: isCameraGranted,
-        }
-    }
-  }, [kind, isMicrophoneGranted, isCameraGranted])
-
-  if (!config.isGranted) {
-    return (
-      <Select
-        aria-label={'selector disabled - permissions are needed'}
-        label=""
-        items={[]}
-        isDisabled={true}
-        iconComponent={config.icon}
-        placeholder={t('selectDevice.permissionNeeded')}
-      />
-    )
-  }
-
-  return <SelectDeviceJoinActive {...props} kind={kind} config={config} />
-}
-
-type SelectDeviceJoinActiveProps = {
-  config: DeviceConfig
-} & SelectDeviceJoinProps
-
-const SelectDeviceJoinActive = ({
-  id,
-  onSubmit,
-  kind,
-  config,
-}: SelectDeviceJoinActiveProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const getDefaultSelectedKey = (items: DeviceItems) => {
-    if (!items || items.length === 0) return
-    const defaultItem =
-      items.find((item) => item.value === 'default') || items[0]
-    return defaultItem.value
-  }
-
-  const {
-    devices: devices,
-    activeDeviceId: activeDeviceId,
-    setActiveMediaDevice: setActiveMediaDevice,
-  } = useMediaDeviceSelect({ kind, requestPermissions: false })
-
-  const items: DeviceItems = devices
-    .filter((d) => !!d.deviceId)
-    .map((d) => ({
-      value: d.deviceId,
-      label: d.label,
-    }))
-
-  return (
-    <Select
-      aria-label={t(`${kind}.choose`)}
-      label=""
-      isDisabled={items.length == 0}
-      items={items}
-      iconComponent={config?.icon}
-      placeholder={t('selectDevice.loading')}
-      defaultSelectedKey={id || activeDeviceId || getDefaultSelectedKey(items)}
-      onSelectionChange={(key) => {
-        onSubmit?.(key as string)
-        setActiveMediaDevice(key as string)
-      }}
-    />
-  )
-}
@@ -1,33 +0,0 @@
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
-import { SelectToggleDeviceProps } from '@/features/rooms/livekit/components/controls/SelectToggleDevice'
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice'
-import {
-  SelectToggleSource,
-  ToggleSource,
-} from '@/features/rooms/livekit/types/SelectToggleDevice'
-import { SELECT_TOGGLE_DEVICE_CONFIG } from '@/features/rooms/livekit/config/SelectToggleDevice'
-
-type ToggleDeviceJoinProps<T extends ToggleSource> = UseTrackToggleProps<T> &
-  Pick<SelectToggleDeviceProps<T>, 'track' | 'source' | 'variant'>
-
-export const ToggleDeviceJoin = <T extends ToggleSource>(
-  props: ToggleDeviceJoinProps<T>
-) => {
-  const config = SELECT_TOGGLE_DEVICE_CONFIG[props.source as SelectToggleSource]
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-
-  const trackProps = useTrackToggle(props)
-
-  return (
-    <ToggleDevice
-      {...trackProps}
-      config={config}
-      variant="whiteCircle"
-      toggleButtonProps={{
-        groupPosition: undefined,
-      }}
-    />
-  )
-}
@@ -1,22 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { ModalsState, modalsStore } from '@/stores/modals'
-
-interface UseModalReturn {
-  isOpen: () => boolean
-  open: () => void
-  close: () => void
-}
-
-export const useModal = (name: keyof ModalsState): UseModalReturn => {
-  const modalsSnap = useSnapshot(modalsStore)
-
-  const isOpen = (): boolean => {
-    return modalsSnap[name] as boolean
-  }
-
-  return {
-    isOpen,
-    open: () => (modalsStore[name] = true),
-    close: () => (modalsStore[name] = false),
-  }
-}
@@ -1,66 +0,0 @@
-import { useEffect } from 'react'
-import { permissionStore } from '@/stores/permissions.ts'
-import { useSnapshot } from 'valtio'
-
-export const usePermissionsSync = () => {
-  useEffect(() => {
-    // fixme - on safari, 'change' event is not trigger
-    // fixme - prevent error on old browsers
-    const checkPermissions = async () => {
-      try {
-        const [cameraPermission, microphonePermission] = await Promise.all([
-          navigator.permissions.query({ name: 'camera' }),
-          navigator.permissions.query({ name: 'microphone' }),
-        ])
-        permissionStore.cameraPermission = cameraPermission.state
-        permissionStore.microphonePermission = microphonePermission.state
-
-        const handleCameraChange = (e: Event) => {
-          const target = e.target as PermissionStatus
-          permissionStore.cameraPermission = target.state
-        }
-
-        const handleMicrophoneChange = (e: Event) => {
-          const target = e.target as PermissionStatus
-          permissionStore.microphonePermission = target.state
-        }
-
-        if (!cameraPermission.onchange) {
-          cameraPermission.addEventListener('change', handleCameraChange)
-        }
-        if (!microphonePermission.onchange) {
-          microphonePermission.addEventListener(
-            'change',
-            handleMicrophoneChange
-          )
-        }
-
-        return () => {
-          cameraPermission.removeEventListener('change', handleCameraChange)
-          microphonePermission.removeEventListener(
-            'change',
-            handleMicrophoneChange
-          )
-        }
-      } catch (error) {
-        console.error('Error checking permissions:', error)
-      }
-    }
-    checkPermissions()
-  }, [])
-}
-
-export const usePermissions = () => {
-  const permissionSnap = useSnapshot(permissionStore)
-
-  return {
-    cameraPermission: permissionSnap.cameraPermission,
-    microphonePermission: permissionSnap.microphonePermission,
-    isCameraDenied: permissionSnap.cameraPermission == 'denied',
-    isCameraPrompted: permissionSnap.cameraPermission == 'prompt',
-    isCameraGranted: permissionSnap.cameraPermission == 'granted',
-    isMicrophoneDenied: permissionSnap.microphonePermission == 'denied',
-    isMicrophonePrompted: permissionSnap.microphonePermission == 'prompt',
-    isMicrophoneGranted: permissionSnap.microphonePermission == 'granted',
-  }
-}
@@ -1,173 +0,0 @@
-import {
-  AudioCaptureOptions,
-  createLocalTracks,
-  CreateLocalTracksOptions,
-  LocalAudioTrack,
-  LocalTrack,
-  LocalVideoTrack,
-  Mutex,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
-import { useEffect, useMemo, useRef, useState } from 'react'
-
-function roomOptionsStringifyReplacer(key: string, val: unknown) {
-  if (key === 'processor') {
-    return undefined
-  }
-  if (key === 'e2ee' && val) {
-    return 'e2ee-enabled'
-  }
-  return val
-}
-
-export function usePreviewTracks(
-  options: CreateLocalTracksOptions,
-  onError?: (err: Error) => void
-) {
-  const trackLock = useMemo(() => {
-    return new Mutex()
-  }, [])
-
-  const videoTrackLock = useMemo(() => {
-    return new Mutex()
-  }, [])
-
-  const audioTrackLock = useMemo(() => {
-    return new Mutex()
-  }, [])
-
-  const isInitiated = useRef(false)
-
-  const videoTrackRef = useRef<LocalVideoTrack | undefined>()
-  const audioTrackRef = useRef<LocalAudioTrack | undefined>()
-
-  const [videoTrack, setVideoTrack] = useState<LocalVideoTrack | undefined>()
-  const [audioTrack, setAudioTrack] = useState<LocalAudioTrack | undefined>()
-
-  const extractTracks = (tracks: LocalTrack[]) => {
-    const video = tracks.find(
-      (track): track is LocalVideoTrack => track.kind === Track.Kind.Video
-    )
-    const audio = tracks.find(
-      (track): track is LocalAudioTrack => track.kind === Track.Kind.Audio
-    )
-
-    return { video, audio }
-  }
-
-  useEffect(() => {
-    if (isInitiated.current) {
-      return
-    }
-    let needsCleanup = false
-    let localTracks: Array<LocalTrack> = []
-    trackLock.lock().then(async (unlock) => {
-      try {
-        if (options.audio || options.video) {
-          localTracks = await createLocalTracks(options)
-
-          if (needsCleanup) {
-            localTracks.forEach((tr) => tr.stop())
-          } else {
-            const { audio, video } = extractTracks(localTracks)
-            isInitiated.current = true
-            setVideoTrack(video)
-            videoTrackRef.current = video
-            setAudioTrack(audio)
-            audioTrackRef.current = audio
-          }
-        }
-      } catch (e: unknown) {
-        if (onError && e instanceof Error) {
-          onError(e)
-        } else {
-          console.error(e)
-        }
-      } finally {
-        unlock()
-      }
-    })
-
-    return () => {
-      if (isInitiated.current) {
-        return
-      }
-      needsCleanup = true
-      localTracks.forEach((track) => {
-        track.stop()
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(options, roomOptionsStringifyReplacer),
-    onError,
-    trackLock,
-  ])
-
-  const videoOptions = options?.video
-
-  useEffect(() => {
-    if (!isInitiated.current) {
-      return
-    }
-    videoTrackLock.lock().then(async (unlock) => {
-      try {
-        if (!videoOptions) return
-        await videoTrackRef.current?.restartTrack(
-          videoOptions as VideoCaptureOptions
-        )
-      } catch (e: unknown) {
-        if (onError && e instanceof Error) {
-          onError(e)
-        } else {
-          console.error(e)
-        }
-      } finally {
-        unlock()
-      }
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(videoOptions, roomOptionsStringifyReplacer),
-    onError,
-    videoTrackLock,
-  ])
-
-  const audioOptions = options?.audio
-
-  useEffect(() => {
-    if (!isInitiated.current) {
-      return
-    }
-    audioTrackLock.lock().then(async (unlock) => {
-      try {
-        if (!audioOptions) return
-        await audioTrackRef.current?.restartTrack(
-          audioOptions as AudioCaptureOptions
-        )
-      } catch (e: unknown) {
-        if (onError && e instanceof Error) {
-          onError(e)
-        } else {
-          console.error(e)
-        }
-      } finally {
-        unlock()
-      }
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(audioOptions, roomOptionsStringifyReplacer),
-    onError,
-    audioTrackLock,
-  ])
-
-  return {
-    videoTrack,
-    audioTrack,
-  }
-}
@@ -2,7 +2,6 @@ import { Participant } from 'livekit-client'
 import { fetchServerApi } from './fetchServerApi'
 import { buildServerApiUrl } from './buildServerApiUrl'
 import { useRoomData } from '../hooks/useRoomData'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

 export const useLowerHandParticipant = () => {
  const data = useRoomData()
@@ -11,8 +10,12 @@ export const useLowerHandParticipant = () => {
    if (!data || !data?.livekit) {
      throw new Error('Room data is not available')
    }
-    const newMetadata = safeParseMetadata(participant.metadata) || {}
-    newMetadata.raised = !newMetadata.raised
+
+    const newAttributes = {
+      ...participant.attributes,
+      handRaisedAt: '',
+    }
+
    return fetchServerApi(
      buildServerApiUrl(
        data.livekit.url,
@@ -24,7 +27,7 @@ export const useLowerHandParticipant = () => {
        body: JSON.stringify({
          room: data.livekit.room,
          identity: participant.identity,
-          metadata: JSON.stringify(newMetadata),
+          attributes: newAttributes,
          permission: participant.permissions,
        }),
      }
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -8,24 +8,22 @@ import { getRouteUrl } from '@/navigation/getRouteUrl'
 import { useRoomData } from '../hooks/useRoomData'
 import { formatPinCode } from '../../utils/telephony'
 import { useTelephony } from '../hooks/useTelephony'
+import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'

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

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

  const telephony = useTelephony()

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

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

  return (
@@ -141,24 +145,32 @@ export const ParticipantTile: (
                      style={{
                        padding: '0.1rem 0.25rem',
                        backgroundColor:
-                          isHandRaised && !isScreenShare ? 'white' : undefined,
+                          isHandRaised && !isScreenShare
+                            ? firstInQueue
+                              ? '#fde047'
+                              : 'white'
+                            : undefined,
                        color:
                          isHandRaised && !isScreenShare ? 'black' : undefined,
                        transition: 'background 200ms ease, color 400ms ease',
                      }}
                    >
                      {isHandRaised && !isScreenShare && (
-                        <RiHand
-                          color="black"
-                          size={16}
-                          style={{
-                            marginRight: '0.4rem',
-                            minWidth: '16px',
-                            animationDuration: '300ms',
-                            animationName: 'wave_hand',
-                            animationIterationCount: '2',
-                          }}
-                        />
+                        <>
+                          <span>{positionInQueue}</span>
+                          <RiHand
+                            color="black"
+                            size={16}
+                            style={{
+                              marginRight: '0.4rem',
+                              marginLeft: '0.1rem',
+                              minWidth: '16px',
+                              animationDuration: '300ms',
+                              animationName: 'wave_hand',
+                              animationIterationCount: '2',
+                            }}
+                          />
+                        </>
                      )}
                      {isScreenShare && (
                        <ScreenShareIcon
@@ -11,7 +11,6 @@ import { WaitingParticipantListItem } from './WaitingParticipantListItem'
 import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
 import { Participant } from 'livekit-client'
 import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

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

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

  const { waitingParticipants, handleParticipantEntry } =
    useWaitingParticipants()
@@ -5,7 +5,14 @@ import {
  UseTrackToggleProps,
 } from '@livekit/components-react'
 import { Button, Menu, MenuList } from '@/primitives'
-import { RiArrowUpSLine } from '@remixicon/react'
+import {
+  RemixiconComponentType,
+  RiArrowDownSLine,
+  RiMicLine,
+  RiMicOffLine,
+  RiVideoOffLine,
+  RiVideoOnLine,
+} from '@remixicon/react'
 import {
  LocalAudioTrack,
  LocalVideoTrack,
@@ -13,19 +20,59 @@ import {
  VideoCaptureOptions,
 } from 'livekit-client'

-import { ToggleDevice } from './ToggleDevice'
+import { Shortcut } from '@/features/shortcuts/types'
+
+import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { useEffect } from 'react'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../blur'
-import {
-  SelectToggleSource,
-  ToggleSource,
-} from '../../types/SelectToggleDevice'
-import { SELECT_TOGGLE_DEVICE_CONFIG } from '../../config/SelectToggleDevice'

-export type SelectToggleDeviceProps<T extends ToggleSource> =
+export type ToggleSource = Exclude<
+  Track.Source,
+  Track.Source.ScreenShareAudio | Track.Source.Unknown
+>
+
+type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
+
+export type SelectToggleDeviceConfig = {
+  kind: MediaDeviceKind
+  iconOn: RemixiconComponentType
+  iconOff: RemixiconComponentType
+  shortcut?: Shortcut
+  longPress?: Shortcut
+}
+
+type SelectToggleDeviceConfigMap = {
+  [key in SelectToggleSource]: SelectToggleDeviceConfig
+}
+
+const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
+  [Track.Source.Microphone]: {
+    kind: 'audioinput',
+    iconOn: RiMicLine,
+    iconOff: RiMicOffLine,
+    shortcut: {
+      key: 'd',
+      ctrlKey: true,
+    },
+    longPress: {
+      key: 'Space',
+    },
+  },
+  [Track.Source.Camera]: {
+    kind: 'videoinput',
+    iconOn: RiVideoOnLine,
+    iconOff: RiVideoOffLine,
+    shortcut: {
+      key: 'e',
+      ctrlKey: true,
+    },
+  },
+}
+
+type SelectToggleDeviceProps<T extends ToggleSource> =
  UseTrackToggleProps<T> & {
    track?: LocalAudioTrack | LocalVideoTrack | undefined
    initialDeviceId?: string
@@ -45,7 +92,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
  menuVariant = 'light',
  ...props
 }: SelectToggleDeviceProps<T>) => {
-  const config = SELECT_TOGGLE_DEVICE_CONFIG[props.source]
+  const config = selectToggleDeviceConfig[props.source]
  if (!config) {
    throw new Error('Invalid source')
  }
@@ -131,7 +178,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
            square
            variant={trackProps.enabled ? variant : 'error2'}
          >
-            <RiArrowUpSLine />
+            <RiArrowDownSLine />
          </Button>
          <MenuList
            items={devices.map((d) => ({
@@ -3,6 +3,7 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { useMemo, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
+import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
@@ -12,10 +13,6 @@ import {
 } from '@livekit/components-react'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { SelectToggleDeviceConfig } from '../../types/SelectToggleDevice'
-import { css } from '@/styled-system/css'
-import { usePermissions } from '@/features/rooms/hooks/usePermissions'
-import { useModal } from '@/features/rooms/hooks/useModal'

 export type ToggleDeviceProps = {
  enabled: boolean
@@ -34,7 +31,6 @@ export const ToggleDevice = ({
 }: ToggleDeviceProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })

-  const { open } = useModal('permissions')
  const { kind, shortcut, iconOn, iconOff, longPress } = config

  const [pushToTalk, setPushToTalk] = useState(false)
@@ -50,78 +46,36 @@ export const ToggleDevice = ({
    setPushToTalk(false)
  }

-  const permissions = usePermissions()
-
-  const isPermissionDeniedOrPrompted = useMemo(() => {
-    switch (config.kind) {
-      case 'audioinput':
-        return (
-          permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
-        )
-      case 'videoinput':
-        return permissions.isCameraDenied || permissions.isCameraPrompted
-    }
-  }, [permissions, config.kind])
-
  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
  useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })

-  const isEnabledAndPermitted = enabled && !isPermissionDeniedOrPrompted
-
  const toggleLabel = useMemo(() => {
-    const label = t(isEnabledAndPermitted ? 'disable' : 'enable', {
+    const label = t(enabled ? 'disable' : 'enable', {
      keyPrefix: `join.${kind}`,
    })
    return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [isEnabledAndPermitted, kind, shortcut, t])
+  }, [enabled, kind, shortcut, t])

-  const Icon = isEnabledAndPermitted ? iconOn : iconOff
+  const Icon = enabled ? iconOn : iconOff

  const context = useMaybeRoomContext()
  if (kind === 'audioinput' && pushToTalk && context) {
    return <ActiveSpeakerWrapper />
  }

-  const errorVariant = variant == 'whiteCircle' ? 'errorCircle' : 'error2'
-
  return (
-    <div
-      className={css({
-        position: 'relative',
-      })}
+    <ToggleButton
+      isSelected={!enabled}
+      variant={enabled ? variant : 'error2'}
+      shySelected
+      onPress={() => toggle()}
+      aria-label={toggleLabel}
+      tooltip={toggleLabel}
+      groupPosition="left"
+      {...toggleButtonProps}
    >
-      <ToggleButton
-        isSelected={!enabled}
-        variant={isEnabledAndPermitted ? variant : errorVariant}
-        shySelected
-        onPress={() => (isPermissionDeniedOrPrompted ? open() : toggle())}
-        aria-label={toggleLabel}
-        tooltip={toggleLabel}
-        groupPosition="left"
-        {...toggleButtonProps}
-      >
-        <Icon />
-      </ToggleButton>
-      {isPermissionDeniedOrPrompted && (
-        <span
-          className={css({
-            position: 'absolute',
-            height: '1.25rem',
-            width: '1.25rem',
-            backgroundColor: 'amber.400',
-            top: variant == 'whiteCircle' ? '-1px' : '-5px',
-            left: variant == 'whiteCircle' ? '-2px' : '-5px',
-            borderRadius: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            fontWeight: 'bold',
-          })}
-        >
-          !
-        </span>
-      )}
-    </div>
+      <Icon />
+    </ToggleButton>
  )
 }

@@ -1,5 +1,5 @@
 import { LocalVideoTrack, Track } from 'livekit-client'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
  BackgroundProcessorFactory,
@@ -8,16 +8,16 @@ import {
  BackgroundOptions,
 } from '../blur'
 import { css } from '@/styled-system/css'
-import { Text, P, ToggleButton, H, Button } from '@/primitives'
+import { Text, P, ToggleButton, H } from '@/primitives'
 import { styled } from '@/styled-system/jsx'
 import { BlurOn } from '@/components/icons/BlurOn'
 import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
 import { useTrackToggle } from '@livekit/components-react'
+import { Loader } from '@/primitives/Loader'
+import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
 import { RiProhibited2Line } from '@remixicon/react'
 import { FunnyEffects } from './FunnyEffects'
 import { useHasFunnyEffectsAccess } from '../../hooks/useHasFunnyEffectsAccess'
-import { usePermissions } from '@/features/rooms/hooks/usePermissions'
-import { useModal } from '@/features/rooms/hooks/useModal'

 enum BlurRadius {
  NONE = 0,
@@ -37,7 +37,7 @@ const Information = styled('div', {
 })

 export type EffectsConfigurationProps = {
-  videoTrack?: LocalVideoTrack
+  videoTrack: LocalVideoTrack
  onSubmit?: (processor?: BackgroundProcessorInterface) => void
  layout?: 'vertical' | 'horizontal'
 }
@@ -50,20 +50,10 @@ export const EffectsConfiguration = ({
  const videoRef = useRef<HTMLVideoElement>(null)
  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
  const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
-
-  const { isCameraGranted } = usePermissions()
-  const { open } = useModal('permissions')
-
  const [processorPending, setProcessorPending] = useState(false)
-
+  const processorPendingReveal = useSyncAfterDelay(processorPending)
  const hasFunnyEffectsAccess = useHasFunnyEffectsAccess()

-  // Note: videoTrack.getProcessor() will return undefined during a transition
-  // but our selectedProcessor state maintains the intended value
-  const [selectedProcessor, setSelectedProcessor] = useState(
-    videoTrack?.getProcessor()
-  )
-
  useEffect(() => {
    const videoElement = videoRef.current
    if (!videoElement) return
@@ -73,13 +63,12 @@ export const EffectsConfiguration = ({

    return () => {
      if (!videoElement) return
-      videoTrack?.detach(videoElement)
+      videoTrack.detach(videoElement)
    }
  }, [videoTrack, videoTrack?.isMuted])

  const clearEffect = async () => {
-    await videoTrack?.stopProcessor()
-    setSelectedProcessor(undefined)
+    await videoTrack.stopProcessor()
    onSubmit?.(undefined)
  }

@@ -103,6 +92,7 @@ export const EffectsConfiguration = ({
      await toggle(true, {
        processor: newProcessorTmp,
      })
+      setTimeout(() => setProcessorPending(false))
      return
    }

@@ -110,10 +100,9 @@ export const EffectsConfiguration = ({
      await toggle(true)
    }

-    const processor = videoTrack?.getProcessor() as BackgroundProcessorInterface
+    const processor = getProcessor()
    try {
      if (isSelected(type, options)) {
-        setSelectedProcessor(undefined)
        // Stop processor.
        await clearEffect()
      } else if (!processor || processor.serialize().type !== type) {
@@ -129,27 +118,28 @@ export const EffectsConfiguration = ({
        if (!BackgroundProcessorFactory.hasModernApiSupport()) {
          await videoTrack.stopProcessor()
        }
-
        await videoTrack.setProcessor(newProcessor)
-        setSelectedProcessor(newProcessor)
        onSubmit?.(newProcessor)
      } else {
        // Update processor.
        processor?.update(options)
        // We want to trigger onSubmit when options changes so the parent component is aware of it.
        onSubmit?.(processor)
-        setSelectedProcessor(processor)
      }
    } catch (error) {
      console.error('Error applying effect:', error)
    } finally {
-      setProcessorPending(false)
+      // Without setTimeout the DOM is not refreshing when updating the options.
+      setTimeout(() => setProcessorPending(false))
    }
  }

+  const getProcessor = () => {
+    return videoTrack?.getProcessor() as BackgroundProcessorInterface
+  }
+
  const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
-    if (!selectedProcessor) return false
-    const processor = selectedProcessor as BackgroundProcessorInterface
+    const processor = getProcessor()
    const processorSerialized = processor?.serialize()
    return (
      !!processor &&
@@ -162,11 +152,6 @@ export const EffectsConfiguration = ({
    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
  }

-  const isDisabled = useMemo(
-    () => processorPending || videoTrack?.isMuted || !isCameraGranted,
-    [processorPending, videoTrack, isCameraGranted]
-  )
-
  return (
    <div
      className={css(
@@ -180,7 +165,7 @@ export const EffectsConfiguration = ({
              display: 'flex',
              gap: '1.5rem',
              flexDirection: 'column',
-              lg: {
+              md: {
                flexDirection: 'row',
                overflow: 'hidden',
              },
@@ -190,65 +175,31 @@ export const EffectsConfiguration = ({
      <div
        className={css({
          width: '100%',
+          aspectRatio: 16 / 9,
          position: 'relative',
        })}
      >
        {videoTrack && !videoTrack.isMuted ? (
          <video
            ref={videoRef}
+            width="100%"
            muted
-            className={css(
-              layout === 'vertical'
-                ? {
-                    height: '175px',
-                    width: '100%',
-                  }
-                : {
-                    minHeight: '175px',
-                    maxWidth: '600px',
-                    width: '100%',
-                    objectFit: 'cover',
-                    sm: {
-                      aspectRatio: 16 / 9,
-                    },
-                    lg: {
-                      maxWidth: '100%',
-                    },
-                  }
-            )}
            style={{
              transform: 'rotateY(180deg)',
+              [layout === 'vertical' ? 'height' : 'minHeight']: '175px',
              borderRadius: '8px',
            }}
          />
        ) : (
          <div
            style={{
+              width: '100%',
+              height: '100%',
              display: 'flex',
              backgroundColor: 'black',
              justifyContent: 'center',
              flexDirection: 'column',
-              borderRadius: '8px',
            }}
-            className={css(
-              layout === 'vertical'
-                ? {
-                    height: '175px',
-                    width: '100%',
-                  }
-                : {
-                    minHeight: '175px',
-                    maxWidth: '600px',
-                    width: '100%',
-                    objectFit: 'cover',
-                    sm: {
-                      aspectRatio: 16 / 9,
-                    },
-                    lg: {
-                      maxWidth: '100%',
-                    },
-                  }
-            )}
          >
            <P
              style={{
@@ -258,23 +209,19 @@ export const EffectsConfiguration = ({
                marginBottom: 0,
              }}
            >
-              {t(isCameraGranted ? 'activateCamera' : 'permissionsCamera')}
+              {t('activateCamera')}
            </P>
-            <Button
-              size="sm"
-              variant="tertiary"
-              onPress={async () => (isCameraGranted ? await toggle() : open())}
-              aria-label={t(
-                isCameraGranted ? 'activateButton' : 'permissionsButton'
-              )}
-              className={css({
-                width: 'fit-content',
-                marginX: 'auto',
-                marginTop: '1rem',
-              })}
-            >
-              {t(isCameraGranted ? 'activateButton' : 'permissionsButton')}
-            </Button>
+          </div>
+        )}
+        {processorPendingReveal && (
+          <div
+            className={css({
+              position: 'absolute',
+              right: '8px',
+              bottom: '8px',
+            })}
+          >
+            <Loader />
          </div>
        )}
      </div>
@@ -295,7 +242,7 @@ export const EffectsConfiguration = ({
        {hasFunnyEffectsAccess && (
          <FunnyEffects
            videoTrack={videoTrack}
-            isPending={processorPending}
+            isPending={processorPendingReveal}
            onPending={setProcessorPending}
          />
        )}
@@ -323,8 +270,8 @@ export const EffectsConfiguration = ({
                  onPress={async () => {
                    await clearEffect()
                  }}
-                  isSelected={!selectedProcessor}
-                  isDisabled={isDisabled}
+                  isSelected={!getProcessor()}
+                  isDisabled={processorPendingReveal}
                >
                  <RiProhibited2Line />
                </ToggleButton>
@@ -336,7 +283,7 @@ export const EffectsConfiguration = ({
                  tooltip={tooltipLabel(ProcessorType.BLUR, {
                    blurRadius: BlurRadius.LIGHT,
                  })}
-                  isDisabled={isDisabled}
+                  isDisabled={processorPendingReveal}
                  onChange={async () =>
                    await toggleEffect(ProcessorType.BLUR, {
                      blurRadius: BlurRadius.LIGHT,
@@ -357,7 +304,7 @@ export const EffectsConfiguration = ({
                  tooltip={tooltipLabel(ProcessorType.BLUR, {
                    blurRadius: BlurRadius.NORMAL,
                  })}
-                  isDisabled={isDisabled}
+                  isDisabled={processorPendingReveal}
                  onChange={async () =>
                    await toggleEffect(ProcessorType.BLUR, {
                      blurRadius: BlurRadius.NORMAL,
@@ -405,7 +352,7 @@ export const EffectsConfiguration = ({
                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
                          imagePath,
                        })}
-                        isDisabled={isDisabled}
+                        isDisabled={processorPendingReveal}
                        onChange={async () =>
                          await toggleEffect(ProcessorType.VIRTUAL, {
                            imagePath,
@@ -7,7 +7,7 @@ import { FaceLandmarksProcessor } from '../blur/FaceLandmarksProcessor'
 import { LocalVideoTrack } from 'livekit-client'

 export type FunnyEffectsProps = {
-  videoTrack?: LocalVideoTrack
+  videoTrack: LocalVideoTrack
  isPending?: boolean
  onPending: (value: boolean) => void
 }
@@ -47,12 +47,12 @@ export const FunnyEffects = ({

    try {
      if (!newOptions.showGlasses && !newOptions.showFrench) {
-        await videoTrack?.stopProcessor()
+        await videoTrack.stopProcessor()
      } else if (options.showGlasses || options.showFrench) {
        await processor?.update(newOptions)
      } else {
        const newProcessor = new FaceLandmarksProcessor(newOptions)
-        await videoTrack?.setProcessor(newProcessor)
+        await videoTrack.setProcessor(newProcessor)
      }
    } catch (e) {
      console.error('could not update processor', e)
@@ -1,33 +0,0 @@
-import { Track } from 'livekit-client'
-import { SelectToggleDeviceConfigMap } from '../types/SelectToggleDevice'
-
-import {
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-
-export const SELECT_TOGGLE_DEVICE_CONFIG: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
@@ -0,0 +1,79 @@
+import { useTelephony } from './useTelephony'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useMemo, useState } from 'react'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+
+const COPY_SUCCESS_TIMEOUT = 3000
+
+export const useCopyRoomToClipboard = (room: ApiRoom | undefined) => {
+  const telephony = useTelephony()
+  const { t } = useTranslation('global', { keyPrefix: 'clipboardContent' })
+
+  const [isCopied, setIsCopied] = useState(false)
+  const [isRoomUrlCopied, setIsRoomUrlCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), COPY_SUCCESS_TIMEOUT)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
+
+  useEffect(() => {
+    if (isRoomUrlCopied) {
+      const timeout = setTimeout(
+        () => setIsRoomUrlCopied(false),
+        COPY_SUCCESS_TIMEOUT
+      )
+      return () => clearTimeout(timeout)
+    }
+  }, [isRoomUrlCopied])
+
+  const roomUrl = useMemo(() => {
+    return room?.slug ? getRouteUrl('room', room.slug) : ''
+  }, [room?.slug])
+
+  const hasTelephonyInfo = useMemo(() => {
+    return telephony.enabled && room?.pin_code
+  }, [telephony.enabled, room?.pin_code])
+
+  const content = useMemo(() => {
+    if (!roomUrl || !room) return ''
+    if (!hasTelephonyInfo) return roomUrl
+
+    return [
+      t('url', { roomUrl }),
+      t('numberAndPin', {
+        phoneNumber: telephony?.internationalPhoneNumber,
+        pinCode: formatPinCode(room.pin_code),
+      }),
+    ].join('\n')
+  }, [roomUrl, hasTelephonyInfo, telephony, room, t])
+
+  const copyRoomToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setIsCopied(true)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const copyRoomUrlToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(roomUrl)
+      setIsRoomUrlCopied(true)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  }
+}
@@ -16,9 +16,6 @@ export function usePersistentUserChoices() {
    saveAudioInputDeviceId: (deviceId: string) => {
      userChoicesStore.audioDeviceId = deviceId
    },
-    saveAudioOutputDeviceId: (deviceId: string) => {
-      userChoicesStore.audioOutputDeviceId = deviceId
-    },
    saveVideoInputDeviceId: (deviceId: string) => {
      userChoicesStore.videoDeviceId = deviceId
    },
@@ -1,23 +1,58 @@
 import { LocalParticipant, Participant } from 'livekit-client'
-import { useParticipantInfo } from '@livekit/components-react'
+import {
+  useParticipantAttribute,
+  useParticipants,
+} from '@livekit/components-react'
 import { isLocal } from '@/utils/livekit'
+import { useMemo } from 'react'

 type useRaisedHandProps = {
  participant: Participant
 }

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

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

-  return { isHandRaised: parsedMetadata.raised ?? false, toggleRaisedHand }
+  return { isHandRaised, toggleRaisedHand }
 }
@@ -1,22 +0,0 @@
-import { Track } from 'livekit-client'
-import { RemixiconComponentType } from '@remixicon/react'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-export type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-export type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
@@ -1,23 +1,14 @@
-import { ReactNode, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useLocation, useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
-import { PermissionErrorModal } from '../components/PermissionErrorModal'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 import {
  isRoomValid,
  normalizeRoomId,
 } from '@/features/rooms/utils/isRoomValid'
-import { usePermissionsSync } from '@/features/rooms/hooks/usePermissions'
-
-const BaseRoom = ({ children }: { children: ReactNode }) => (
-  <UserAware>
-    <PermissionErrorModal />
-    {children}
-  </UserAware>
-)

 export const Room = () => {
  const { isLoggedIn } = useUser()
@@ -30,7 +21,6 @@ export const Room = () => {
  const skipJoinScreen = isLoggedIn && mode === 'create'

  useKeyboardShortcuts()
-  usePermissionsSync()

  const clearRouterState = () => {
    if (window?.history?.state) {
@@ -57,19 +47,19 @@ export const Room = () => {

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

  return (
-    <BaseRoom>
+    <UserAware>
      <Conference
        initialRoomData={initialRoomData}
        roomId={roomId}
        mode={mode}
      />
-    </BaseRoom>
+    </UserAware>
  )
 }
@@ -1,22 +0,0 @@
-export const safeParseMetadata = (
-  metadataStr: string | null | undefined
-): Record<string, unknown> => {
-  if (!metadataStr) {
-    return {}
-  }
-
-  try {
-    const parsed = JSON.parse(metadataStr)
-
-    // Ensure the result is an object
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-      console.warn('Metadata parsed to non-object value:', parsed)
-      return {}
-    }
-
-    return parsed as Record<string, unknown>
-  } catch (error) {
-    console.error('Failed to parse metadata:', error)
-    return {}
-  }
-}
@@ -19,5 +19,5 @@ export const parseConfigPhoneNumber = (
 }

 export function formatPinCode(pinCode?: string) {
-  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')} #`
+  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')}#`
 }
@@ -95,7 +95,6 @@ export const AudioTab = ({ id }: AudioTabProps) => {
    userChoices: { noiseReductionEnabled },
    saveAudioInputDeviceId,
    saveNoiseReductionEnabled,
-    saveAudioOutputDeviceId,
  } = usePersistentUserChoices()

  const isSpeaking = useIsSpeaking(localParticipant)
@@ -184,10 +183,9 @@ export const AudioTab = ({ id }: AudioTabProps) => {
            defaultSelectedKey={
              activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
            }
-            onSelectionChange={async (key) => {
+            onSelectionChange={async (key) =>
              setActiveMediaDeviceOut(key as string)
-              saveAudioOutputDeviceId(key as string)
-            }}
+            }
            {...disabledProps}
            style={{
              minWidth: 0,
@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * If value stays truthy for more than waitFor ms, syncValue takes the value of value.
+ * @param value
+ * @param waitFor
+ * @returns
+ */
+export function useSyncAfterDelay<T>(value: T, waitFor: number = 300) {
+  const valueRef = useRef(value)
+  const timeoutRef = useRef<NodeJS.Timeout>()
+  const [syncValue, setSyncValue] = useState<T>()
+
+  useEffect(() => {
+    valueRef.current = value
+    if (value) {
+      if (!timeoutRef.current) {
+        timeoutRef.current = setTimeout(() => {
+          setSyncValue(valueRef.current)
+          timeoutRef.current = undefined
+        }, waitFor)
+      }
+    } else {
+      setSyncValue(value)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return syncValue
+}
@@ -51,5 +51,9 @@
      "ariaLabel": "Hinweis schließen",
      "label": "OK"
    }
+  },
+  "clipboardContent": {
+    "url": "Um an der Videokonferenz teilzunehmen, klicken Sie auf diesen Link: {{roomUrl}}",
+    "numberAndPin": "Um telefonisch teilzunehmen, wählen Sie {{phoneNumber}} und geben Sie diesen Code ein: {{pinCode}}"
  }
 }
@@ -19,10 +19,15 @@
  },
  "laterMeetingDialog": {
    "heading": "Ihre Zugangsdaten",
-    "description": "Senden Sie diesen Link an die Personen, die Sie zum Meeting einladen möchten. Sie können ohne ProConnect teilnehmen.",
-    "copy": "Meeting-Link kopieren",
-    "copied": "Link in die Zwischenablage kopiert",
-    "permissions": "Personen mit diesem Link benötigen keine Genehmigung, um diesem Meeting beizutreten."
+    "description": "Teilen Sie diese Informationen mit den Gästen. Sie können dem Meeting beitreten, ohne sich anmelden zu müssen. Dieses Meeting ist dauerhaft und kann wiederverwendet werden.",
+    "permissions": "Personen mit diesem Link benötigen keine Genehmigung, um diesem Meeting beizutreten.",
+    "copy": "Informationen kopieren",
+    "copied": "Informationen kopiert",
+    "copyUrl": "Meeting-Link kopieren",
+    "phone": {
+      "call": "Rufen Sie an:",
+      "pinCode": "Code:"
+    }
  },
  "introSlider": {
    "previous": {
@@ -8,10 +8,6 @@
    "back": "Dem Meeting erneut beitreten"
  },
  "join": {
-    "selectDevice": {
-      "loading": "Lädt…",
-      "permissionNeeded": "Genehmigung erforderlich"
-    },
    "videoinput": {
      "choose": "Kamera auswählen",
      "disable": "Kamera deaktivieren",
@@ -25,9 +21,6 @@
      "enable": "Mikrofon aktivieren",
      "label": "Mikrofon"
    },
-    "audiooutput": {
-      "choose": "Lautsprecher auswählen"
-    },
    "effects": {
      "description": "Effekte anwenden",
      "title": "Effekte",
@@ -43,14 +36,8 @@
    "errors": {
      "usernameEmpty": "Ihr Name darf nicht leer sein"
    },
-    "cameraDisabled": "Die Kamera ist deaktiviert",
-    "cameraStarting": "Die Kamera wird gestartet…",
-    "cameraNotGranted": "Möchten Sie, dass andere Sie während der Besprechung sehen können?",
-    "cameraAndMicNotGranted": "Möchten Sie, dass andere Sie während der Besprechung sehen und hören können?",
-    "videoPreview": {
-      "enabled": "Videovorschau aktiviert",
-      "disabled": "Videovorschau deaktiviert"
-    },
+    "cameraDisabled": "Kamera ist deaktiviert.",
+    "cameraStarting": "Kamera wird gestartet.",
    "waiting": {
      "title": "Beitrittsanfrage wird gesendet...",
      "body": "Sie können diesem Anruf beitreten, sobald jemand Sie autorisiert"
@@ -64,30 +51,18 @@
      "body": "Niemand hat auf Ihre Anfrage reagiert"
    }
  },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera":  "{{app_title}} hat keine Berechtigung, Ihre Kamera zu verwenden",
-      "microphone": "{{app_title}} hat keine Berechtigung, Ihr Mikrofon zu verwenden",
-      "cameraAndMicrophone": "{{app_title}} hat keine Berechtigung, Ihr Mikrofon und Ihre Kamera zu verwenden",
-      "default": "{{app_title}} hat keine Berechtigung für bestimmte Zugriffe"
-    },
-    "body": {
-      "openMenu": "Klicken Sie auf das Einstellungssymbol {{icon_placeholder}} in der Adressleiste Ihres Browsers",
-      "details": {
-        "camera":  "Zugriff auf die Kamera erlauben",
-        "microphone": "Zugriff auf das Mikrofon erlauben",
-        "cameraAndMicrophone": "Zugriff auf Kamera und Mikrofon erlauben"
-      }
-    }
-  },
  "leaveRoomPrompt": "Dadurch verlassen Sie das Meeting.",
  "shareDialog": {
-    "copy": "Meeting-Link kopieren",
-    "copyButton": "Link kopieren",
-    "copied": "Link in die Zwischenablage kopiert",
+    "copy": "Informationen kopieren",
+    "copyUrl": "Link kopieren",
+    "copied": "Informationen kopiert",
    "heading": "Ihr Meeting ist bereit",
    "description": "Teilen Sie diesen Link mit Personen, die Sie zum Meeting einladen möchten.",
-    "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten."
+    "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten.",
+    "phone": {
+      "call": "Rufen Sie an:",
+      "pinCode": "Code:"
+    }
  },
  "mediaErrorDialog": {
    "DeviceInUse": {
@@ -183,10 +158,7 @@
    }
  },
  "effects": {
-    "activateCamera": "Kamera ist aus.",
-    "activateButton": "Kamera einschalten",
-    "permissionsCamera": "Bitte erlauben Sie der App den Zugriff auf Ihre Kamera, um fortzufahren.",
-    "permissionsButton": "Kamerazugriff erlauben",
+    "activateCamera": "Ihre Kamera ist deaktiviert. Wählen Sie eine Option, um sie zu aktivieren.",
    "notAvailable": "Videoeffekte werden bald in Ihrem Browser verfügbar sein. Wir arbeiten daran! In der Zwischenzeit können Sie Google Chrome für die beste Leistung oder Firefox verwenden :(",
    "heading": "Unschärfe",
    "clear": "Effekt deaktivieren",
@@ -258,9 +230,9 @@
    "roomInformation": {
      "title": "Verbindungsinformationen",
      "button": {
-        "ariaLabel": "Kopiere deine Meeting-Adresse",
-        "copy": "Adresse kopieren",
-        "copied": "Adresse kopiert"
+        "ariaLabel": "Kopieren Sie die Informationen aus Ihrer Besprechung",
+        "copy": "Informationen kopieren",
+        "copied": "Informationen kopiert"
      },
      "phone": {
        "call": "Rufen Sie an:",
@@ -51,5 +51,9 @@
      "ariaLabel": "Close the suggestion",
      "label": "OK"
    }
+  },
+  "clipboardContent": {
+    "url": "To join the video conference, click on this link: {{roomUrl}}",
+    "numberAndPin": "To join by phone, dial {{phoneNumber}} and enter this code: {{pinCode}}"
  }
 }
@@ -19,10 +19,15 @@
  },
  "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 ProConnect.",
-    "copy": "Copy the meeting link",
-    "copied": "Link copied to clipboard",
-    "permissions": "People with this link do not need your permission to join this meeting."
+    "description": "Share this information with the guests. They will be able to join the meeting without needing to sign in. This meeting is permanent and can be reused.",
+    "permissions": "People with this link do not need your permission to join this meeting.",
+    "copy": "Copy information",
+    "copied": "Information copied to clipboard",
+    "copyUrl": "Copy the meeting link",
+    "phone": {
+      "call": "Call:",
+      "pinCode": "Code:"
+    }
  },
  "introSlider": {
    "previous": {
@@ -8,10 +8,6 @@
    "back": "Rejoin the meeting"
  },
  "join": {
-    "selectDevice": {
-      "loading": "Loading…",
-      "permissionNeeded": "Permission needed"
-    },
    "videoinput": {
      "choose": "Select camera",
      "disable": "Disable camera",
@@ -25,9 +21,6 @@
      "enable": "Enable microphone",
      "label": "Microphone"
    },
-    "audiooutput": {
-      "choose": "Select speakers"
-    },
    "effects": {
      "description": "Apply effects",
      "title": "Effects",
@@ -43,14 +36,8 @@
    "errors": {
      "usernameEmpty": "Your name cannot be empty"
    },
-    "cameraDisabled": "The camera is disabled",
-    "cameraStarting": "The camera is starting…",
-    "cameraNotGranted": "Do you want others to be able to see you during the meeting?",
-    "cameraAndMicNotGranted": "Do you want others to be able to see and hear you during the meeting?",
-    "videoPreview": {
-      "enabled": "Video preview enabled",
-      "disabled": "Video preview disabled"
-    },
+    "cameraDisabled": "Camera is disabled.",
+    "cameraStarting": "Camera is starting.",
    "waiting": {
      "title": "Requesting to join...",
      "body": "You will be able to join this call when someone authorizes you"
@@ -64,30 +51,18 @@
      "body": "No one responded to your request"
    }
  },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera":  "{{app_title}} is not allowed to use your camera",
-      "microphone": "{{app_title}} is not allowed to use your microphone",
-      "cameraAndMicrophone": "{{app_title}} is not allowed to use your microphone or camera",
-      "default": "{{app_title}} is not allowed to use certain permissions"
-    },
-    "body": {
-      "openMenu": "Click the settings icon {{icon_placeholder}} in your browser's address bar",
-      "details": {
-        "camera":  "Allow access to the camera",
-        "microphone": "Allow access to the microphone",
-        "cameraAndMicrophone": "Allow access to the camera and microphone"
-      }
-    }
-  },
  "leaveRoomPrompt": "This will make you leave the meeting.",
  "shareDialog": {
-    "copy": "Copy the meeting link",
-    "copyButton": "Copy link",
-    "copied": "Link copied to clipboard",
+    "copy": "Copy information",
+    "copyUrl": "Copy link",
+    "copied": "Information copied to clipboard",
    "heading": "Your meeting is ready",
    "description": "Share this link with people you want to invite to the meeting.",
-    "permissions": "People with this link do not need your permission to join this meeting."
+    "permissions": "People with this link do not need your permission to join this meeting.",
+    "phone": {
+      "call": "Call:",
+      "pinCode": "Code:"
+    }
  },
  "mediaErrorDialog": {
    "DeviceInUse": {
@@ -183,10 +158,7 @@
    }
  },
  "effects": {
-    "activateCamera": "Your camera is disabled.",
-    "activateButton": "Turn on camera",
-    "permissionsCamera": "Please allow the app to access your camera to continue.",
-    "permissionsButton": "Allow camera access",
+    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
    "notAvailable": "Video effects will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
    "heading": "Blur",
    "clear": "Disable effect",
@@ -258,9 +230,9 @@
    "roomInformation": {
      "title": "Connection Information",
      "button": {
-        "ariaLabel": "Copy your meeting address",
-        "copy": "Copy address",
-        "copied": "Address copied"
+        "ariaLabel": "Copy the information from your meeting",
+        "copy": "Copy information",
+        "copied": "Information copied"
      },
      "phone": {
        "call": "Call:",
@@ -51,5 +51,9 @@
      "ariaLabel": "Fermer la suggestion",
      "label": "OK"
    }
+  },
+  "clipboardContent": {
+    "url": "Pour participer à la visioconférence, cliquez sur ce lien : {{roomUrl}}",
+    "numberAndPin": "Pour participer par téléphone, composez le {{phoneNumber}} et saisissez ce code : {{pinCode}}"
  }
 }
@@ -19,10 +19,15 @@
  },
  "laterMeetingDialog": {
    "heading": "Vos informations de connexion",
-    "description": "Envoyez ce lien aux personnes que vous souhaitez inviter à la réunion. Ils pourront la rejoindre sans ProConnect.",
-    "copy": "Copier le lien de la réunion",
-    "copied": "Lien copié dans le presse-papiers",
-    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."
+    "description": "Partagez ces informations avec les invités. Ils pourront rejoindre la réunion sans avoir besoin de se connecter. Cette réunion est permanente et peut être réutilisée.",
+    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion.",
+    "copy": "Copier les informations",
+    "copied": "Copiées dans le presse-papiers",
+    "copyUrl": "Copier le lien de la réunion",
+    "phone": {
+      "call": "Appelez le :",
+      "pinCode": "Code :"
+    }
  },
  "introSlider": {
    "previous": {
@@ -8,10 +8,6 @@
    "back": "Réintégrer la réunion"
  },
  "join": {
-    "selectDevice": {
-      "loading": "Chargement…",
-      "permissionNeeded": "Autorisations nécessaires"
-    },
    "videoinput": {
      "choose": "Choisir la webcam",
      "disable": "Désactiver la webcam",
@@ -25,9 +21,6 @@
      "enable": "Activer le micro",
      "label": "Microphone"
    },
-    "audiooutput": {
-      "choose": "Choisir le haut parleur"
-    },
    "heading": "Rejoindre la réunion ?",
    "effects": {
      "description": "Effets d'arrière plan",
@@ -43,14 +36,8 @@
    "errors": {
      "usernameEmpty": "Votre nom ne peut pas être vide"
    },
-    "cameraDisabled": "La caméra est désactivée",
-    "cameraStarting": "La caméra va démarrer…",
-    "cameraNotGranted": "Souhaitez-vous que les autres puissent vous voir pendant la réunion ?",
-    "cameraAndMicNotGranted": "Souhaitez-vous que les autres puissent vous voir et vous entendre pendant la réunion ?",
-    "videoPreview": {
-      "enabled": "Apercu vidéo activé",
-      "disabled": "Apercu vidéo désactivé"
-    },
+    "cameraDisabled": "La caméra est désactivée.",
+    "cameraStarting": "La caméra va démarrer.",
    "waiting": {
      "title": "Demande de participation…",
      "body": "Vous pourrez participer à cet appel lorsque quelqu'un vous y autorisera"
@@ -64,30 +51,18 @@
      "body": "Personne n'a répondu à votre demande de participation à l'appel"
    }
  },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera":  "{{app_title}} n'est pas autorisé à utiliser votre caméra",
-      "microphone": "{{app_title}} n'est pas autorisé à utiliser votre micro",
-      "cameraAndMicrophone": "{{app_title}} n'est pas autorisé à utiliser votre micro ni votre caméra",
-      "default": "{{app_title}} n'est pas autorisé à utiliser certaines permissions"
-    },
-    "body": {
-      "openMenu": "Cliquez sur l'icône des paramètres {{icon_placeholder}} dans la barre d'adresse de votre navigateur",
-      "details": {
-        "camera":  "Autorisez l'accès à la caméra",
-        "microphone": "Autorisez l'accès au microphone",
-        "cameraAndMicrophone": "Autorisez l'accès à la caméra et au microphone"
-      }
-    }
-  },
  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
  "shareDialog": {
-    "copy": "Copier le lien de la réunion",
-    "copyButton": "Copier le lien",
-    "copied": "Lien copié dans le presse-papiers",
+    "copy": "Copier les informations",
+    "copyUrl": "Copier le lien",
+    "copied": "Copiées dans le presse-papiers",
    "heading": "Votre réunion est prête",
-    "description": "Partagez ce lien avec les personnes que vous souhaitez inviter à la réunion.",
-    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."
+    "description": "Partagez ces informations avec les personnes que vous souhaitez inviter à la réunion.",
+    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion.",
+    "phone": {
+      "call": "Appelez le :",
+      "pinCode": "Code :"
+    }
  },
  "mediaErrorDialog": {
    "DeviceInUse": {
@@ -183,10 +158,7 @@
    }
  },
  "effects": {
-    "activateCamera": "Caméra désactivée.",
-    "activateButton": "Activer la caméra",
-    "permissionsCamera": "Veuillez autoriser l'application à accéder à votre caméra pour continuer.",
-    "permissionsButton": "Autoriser l'accès à la caméra",
+    "activateCamera": "Votre caméra est désactivée. Choisissez une option pour l'activer.",
    "notAvailable": "Les effets vidéo seront bientôt disponibles sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour de meilleures performances ou Firefox :(",
    "heading": "Flou",
    "clear": "Désactiver l'effect",
@@ -258,9 +230,9 @@
    "roomInformation": {
      "title": "Informations de connexions",
      "button": {
-        "ariaLabel": "Copier l'adresse de votre réunion",
-        "copy": "Copier l'adresse",
-        "copied": "Adresse copiée"
+        "ariaLabel": "Copier les informations de votre réunion",
+        "copy": "Copier les informations",
+        "copied": "Informations copiées"
      },
      "phone": {
        "call": "Appelez le :",
@@ -50,5 +50,9 @@
      "ariaLabel": "Sluit de suggestie",
      "label": "OK"
    }
+  },
+  "clipboardContent": {
+    "url": "Klik op deze link om deel te nemen aan de videoconferentie: {{roomUrl}}",
+    "numberAndPin": "Bel {{phoneNumber}} en voer deze code in om telefonisch deel te nemen: {{pinCode}}"
  }
 }
@@ -19,10 +19,15 @@
  },
  "laterMeetingDialog": {
    "heading": "Uw verbindingsgegevens",
-    "description": "Stuur deze link naar de mensen die u wilt uitnodigen voor de vergadering. Zij kunnen deelnemen zonder ProConnect.",
-    "copy": "Kopieer de vergaderlink",
-    "copied": "Link gekopieerd naar klembord",
-    "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering."
+    "description": "Deel deze informatie met de genodigden. Zij kunnen deelnemen aan de vergadering zonder zich aan te melden. Deze vergadering is permanent en kan hergebruikt worden.",
+    "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering.",
+    "copy": "Informatie kopiëren",
+    "copied": "Informatie gekopieerd",
+    "copyUrl": "Kopieer de vergaderlink",
+    "phone": {
+      "call": "Bel:",
+      "pinCode": "Code:"
+    }
  },
  "introSlider": {
    "previous": {
@@ -8,10 +8,6 @@
    "back": "Sluit weer bij de vergadering aan"
  },
  "join": {
-    "selectDevice": {
-      "loading": "Laden…",
-      "permissionNeeded": "Toestemming vereist"
-    },
    "videoinput": {
      "choose": "Selecteer camera",
      "disable": "Camera uitschakelen",
@@ -25,9 +21,6 @@
      "enable": "Microfoon dempen opheffen",
      "label": "Microfoon"
    },
-    "audiooutput": {
-      "choose": "Selecteer luidsprekers"
-    },
    "effects": {
      "description": "Pas effecten toe",
      "title": "Effecten",
@@ -43,14 +36,8 @@
    "errors": {
      "usernameEmpty": "Uw naam kan niet leeg zijn"
    },
-    "cameraDisabled": "De camera is uitgeschakeld",
-    "cameraStarting": "De camera wordt gestart…",
-    "cameraNotGranted": "Wil je dat anderen je kunnen zien tijdens de vergadering?",
-    "cameraAndMicNotGranted": "Wil je dat anderen je kunnen zien en horen tijdens de vergadering?",
-    "videoPreview": {
-      "enabled": "Videovoorbeeld ingeschakeld",
-      "disabled": "Videovoorbeeld uitgeschakeld"
-    },
+    "cameraDisabled": "Camera is uitgeschakeld.",
+    "cameraStarting": "Camera wordt ingeschakeld.",
    "waiting": {
      "title": "Verzoek tot deelname...",
      "body": "U kunt deelnemen aan dit gesprek wanneer iemand u toestemming geeft"
@@ -64,30 +51,18 @@
      "body": "Niemand heeft gereageerd op uw verzoek om deel te nemen aan het gesprek"
    }
  },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera":  "{{app_title}} heeft geen toestemming om je camera te gebruiken",
-      "microphone": "{{app_title}} heeft geen toestemming om je microfoon te gebruiken",
-      "cameraAndMicrophone": "{{app_title}} heeft geen toestemming om je microfoon en camera te gebruiken",
-      "default": "{{app_title}} heeft geen toestemming voor bepaalde rechten"
-    },
-    "body": {
-      "openMenu": "Klik op het instellingenpictogram {{icon_placeholder}} in de adresbalk van je browser",
-      "details": {
-        "camera":  "Sta toegang tot de camera toe",
-        "microphone": "Sta toegang tot de microfoon toe",
-        "cameraAndMicrophone": "Sta toegang tot de camera en microfoon toe"
-      }
-    }
-  },
  "leaveRoomPrompt": "Dat zal u de vergadering doen verlaten.",
  "shareDialog": {
-    "copy": "Kopieer de vergaderlink",
-    "copyButton": "Kopieerlink",
-    "copied": "Link gekopieerd naar het klembord",
+    "copy": "Informatie kopiëren",
+    "copyUrl": "Kopieerlink",
+    "copied": "Informatie gekopieerd",
    "heading": "Uw vergadering is klaar",
    "description": "Deel deze link met mensen die u wilt uitnodigen voor de vergadering.",
-    "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering."
+    "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering.",
+    "phone": {
+      "call": "Bel:",
+      "pinCode": "Code:"
+    }
  },
  "mediaErrorDialog": {
    "DeviceInUse": {
@@ -183,10 +158,7 @@
    }
  },
  "effects": {
-    "activateCamera": "Camera is uit.",
-    "activateButton": "Camera inschakelen",
-    "permissionsCamera": "Sta de app toe om toegang te krijgen tot je camera om door te gaan.",
-    "permissionsButton": "Toegang tot camera toestaan",
+    "activateCamera": "Uw camera is uitgeschakeld. Kies een optie om deze in te schakelen.",
    "notAvailable": "Video-effecten zijn binnenkort beschikbaar in uw browser. We werken eraan! In de tussentijd kunt u Google Chrome gebruiken voor de beste prestaties of Firefox :(",
    "heading": "Vervaging",
    "clear": "Effect uitschakelen",
@@ -258,9 +230,9 @@
    "roomInformation": {
      "title": "Verbindingsinformatie",
      "button": {
-        "ariaLabel": "Kopieer je vergaderadres",
-        "copy": "Adres kopiëren",
-        "copied": "Adres gekopieerd"
+        "ariaLabel": "Kopieer de informatie van uw vergadering",
+        "copy": "Informatie kopiëren",
+        "copied": "Informatie gekopieerd"
      },
      "phone": {
        "call": "Bel:",
@@ -68,6 +68,7 @@ export const buttonRecipe = cva({
      },
      secondaryText: {
        backgroundColor: 'transparent',
+        fontWeight: 'medium !important',
        color: 'primary.800',
        '&[data-hovered]': {
          backgroundColor: 'greyscale.100',
@@ -228,20 +229,6 @@ export const buttonRecipe = cva({
          color: 'error.200',
        },
      },
-      errorCircle: {
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        backgroundColor: 'error.500',
-        color: 'white',
-        '&[data-hovered]': {
-          backgroundColor: 'error.600',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'error.700',
-          color: 'error.200',
-        },
-      },
      error2: {
        backgroundColor: 'error.200',
        color: 'error.900',
@@ -1,9 +0,0 @@
-import { proxy } from 'valtio'
-
-export type ModalsState = {
-  permissions: boolean
-}
-
-export const modalsStore = proxy<ModalsState>({
-  permissions: false,
-})
@@ -1,13 +0,0 @@
-import { proxy } from 'valtio'
-
-type PermissionState = undefined | 'granted' | 'prompt' | 'denied'
-
-type State = {
-  cameraPermission: PermissionState
-  microphonePermission: PermissionState
-}
-
-export const permissionStore = proxy<State>({
-  cameraPermission: undefined,
-  microphonePermission: undefined,
-})
@@ -9,13 +9,11 @@ import {
 export type LocalUserChoices = LocalUserChoicesLK & {
  processorSerialized?: ProcessorSerialized
  noiseReductionEnabled?: boolean
-  audioOutputDeviceId?: string
 }

 function getUserChoicesState(): LocalUserChoices {
  return {
    noiseReductionEnabled: false,
-    audioOutputDeviceId: 'default',
    ...loadUserChoices(),
  }
 }
@@ -40,9 +40,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    {{- with .Values.livekit.keys }}
@@ -40,9 +40,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    {{- with .Values.livekit.keys }}
@@ -52,6 +49,7 @@ backend:
    {{- end }}
    {{- end }}
    LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
+    LIVEKIT_FORCE_WSS_PROTOCOL: True
    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND: True
    ALLOW_UNREGISTERED_ROOMS: False
    FRONTEND_SILENCE_LIVEKIT_DEBUG: False
@@ -71,6 +69,8 @@ backend:
    SUMMARY_SERVICE_API_TOKEN: password
    SCREEN_RECORDING_BASE_URL: https://meet.127.0.0.1.nip.io/recordings
    ROOM_TELEPHONY_ENABLED: True
+    ROOM_TELEPHONY_DEFAULT_COUNTRY: 'FR'
+    ROOM_TELEPHONY_PHONE_NUMBER: '+33901020304'
    SSL_CERT_FILE: /usr/local/lib/python3.13/site-packages/certifi/cacert.pem


@@ -62,9 +62,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    {{- with .Values.livekit.keys }}
@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.9
+version: 0.0.10
@@ -21,6 +21,7 @@
 | `ingress.path`                                                               | Path to use for the Ingress                          | `/`                                                                |
 | `ingress.hosts`                                                              | Additional host to configure for the Ingress         | `[]`                                                               |
 | `ingress.tls.enabled`                                                        | Weather to enable TLS for the Ingress                | `true`                                                             |
+| `ingress.tls.secretName`                                                     | Secret name for TLS config                           | `nil`                                                              |
 | `ingress.tls.additional[].secretName`                                        | Secret name for additional TLS config                |                                                                    |
 | `ingress.tls.additional[].hosts[]`                                           | Hosts for additional TLS config                      |                                                                    |
 | `ingress.customBackends`                                                     | Add custom backends to ingress                       | `[]`                                                               |
@@ -30,6 +31,7 @@
 | `ingressAdmin.path`                                                          | Path to use for the Ingress                          | `/admin`                                                           |
 | `ingressAdmin.hosts`                                                         | Additional host to configure for the Ingress         | `[]`                                                               |
 | `ingressAdmin.tls.enabled`                                                   | Weather to enable TLS for the Ingress                | `true`                                                             |
+| `ingressAdmin.tls.secretName`                                                | Secret name for TLS config                           | `nil`                                                              |
 | `ingressAdmin.tls.additional[].secretName`                                   | Secret name for additional TLS config                |                                                                    |
 | `ingressAdmin.tls.additional[].hosts[]`                                      | Hosts for additional TLS config                      |                                                                    |
 | `ingressMedia.enabled`                                                       | whether to enable the Ingress or not                 | `false`                                                            |
@@ -163,6 +165,7 @@
 | `posthog.ingress.path`                 | URL path prefix for the ingress routes (e.g., /)            | `/`                       |
 | `posthog.ingress.hosts`                | Additional hostnames array to be included in the ingress    | `[]`                      |
 | `posthog.ingress.tls.enabled`          | Enable or disable TLS/HTTPS for the ingress                 | `true`                    |
+| `posthog.ingress.tls.secretName`       | Secret name for TLS config                                  | `nil`                     |
 | `posthog.ingress.tls.additional`       | Additional TLS configurations for extra hosts/certificates  | `[]`                      |
 | `posthog.ingress.customBackends`       | Custom backend service configurations for the ingress       | `[]`                      |
 | `posthog.ingress.annotations`          | Additional Kubernetes annotations to apply to the ingress   | `{}`                      |
@@ -172,6 +175,7 @@
 | `posthog.ingressAssets.path`           | URL path prefix for the ingress routes (e.g., /)            | `/static`                 |
 | `posthog.ingressAssets.hosts`          | Additional hostnames array to be included in the ingress    | `[]`                      |
 | `posthog.ingressAssets.tls.enabled`    | Enable or disable TLS/HTTPS for the ingress                 | `true`                    |
+| `posthog.ingressAssets.tls.secretName` | Secret name for TLS config                                  | `nil`                     |
 | `posthog.ingressAssets.tls.additional` | Additional TLS configurations for extra hosts/certificates  | `[]`                      |
 | `posthog.ingressAssets.customBackends` | Custom backend service configurations for the ingress       | `[]`                      |
 | `posthog.ingressAssets.annotations`    | Additional Kubernetes annotations to apply to the ingress   | `{}`                      |
@@ -29,7 +29,7 @@ spec:
  {{- if .Values.ingress.tls.enabled }}
  tls:
    {{- if .Values.ingress.host }}
-    - secretName: {{ $fullName }}-tls
+    - secretName: {{ .Values.ingress.tls.secretName | default (printf "%s-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.ingress.host | quote }}
    {{- end }}
@@ -30,6 +30,7 @@ spec:
  tls:
    {{- if .Values.ingressAdmin.host }}
    - secretName: {{ $fullName }}-tls
+    - secretName: {{ .Values.ingressAdmin.tls.secretName | default (printf "%s-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.ingressAdmin.host | quote }}
    {{- end }}
@@ -29,7 +29,7 @@ spec:
  {{- if .Values.posthog.ingress.tls.enabled }}
  tls:
    {{- if .Values.posthog.ingress.host }}
-    - secretName: {{ $fullName }}-posthog-tls
+    - secretName: {{ .Values.posthog.ingress.tls.secretName | default (printf "%s-posthog-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.posthog.ingress.host | quote }}
    {{- end }}
@@ -29,7 +29,7 @@ spec:
  {{- if .Values.posthog.ingressAssets.tls.enabled }}
  tls:
    {{- if .Values.posthog.ingressAssets.host }}
-    - secretName: {{ $fullName }}-posthog-tls
+    - secretName: {{ .Values.posthog.ingressAssets.tls.secretName | default (printf "%s-posthog-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.posthog.ingressAssets.host | quote }}
    {{- end }}
@@ -38,10 +38,12 @@ ingress:
  hosts: []
  #  - chart-example.local
  ## @param ingress.tls.enabled Weather to enable TLS for the Ingress
+  ## @param ingress.tls.secretName Secret name for TLS config
  ## @skip ingress.tls.additional
  ## @extra ingress.tls.additional[].secretName Secret name for additional TLS config
  ## @extra ingress.tls.additional[].hosts[] Hosts for additional TLS config
  tls:
+    secretName: null
    enabled: true
    additional: []

@@ -62,10 +64,12 @@ ingressAdmin:
  hosts: [ ]
  #  - chart-example.local
  ## @param ingressAdmin.tls.enabled Weather to enable TLS for the Ingress
+  ## @param ingressAdmin.tls.secretName Secret name for TLS config
  ## @skip ingressAdmin.tls.additional
  ## @extra ingressAdmin.tls.additional[].secretName Secret name for additional TLS config
  ## @extra ingressAdmin.tls.additional[].hosts[] Hosts for additional TLS config
  tls:
+    secretName: null
    enabled: true
    additional: []

@@ -87,8 +91,8 @@ ingressMedia:
  ## @extra ingressMedia.tls.additional[].secretName Secret name for additional TLS config
  ## @extra ingressMedia.tls.additional[].hosts[] Hosts for additional TLS config
  tls:
-    enabled: true
    secretName: null
+    enabled: true
    additional: []

  ## @param ingressMedia.annotations.nginx.ingress.kubernetes.io/auth-url
@@ -358,6 +362,7 @@ posthog:
  ## @param posthog.ingress.path URL path prefix for the ingress routes (e.g., /)
  ## @param posthog.ingress.hosts Additional hostnames array to be included in the ingress
  ## @param posthog.ingress.tls.enabled Enable or disable TLS/HTTPS for the ingress
+  ## @param posthog.ingress.tls.secretName Secret name for TLS config
  ## @param posthog.ingress.tls.additional Additional TLS configurations for extra hosts/certificates
  ## @param posthog.ingress.customBackends Custom backend service configurations for the ingress
  ## @param posthog.ingress.annotations Additional Kubernetes annotations to apply to the ingress
@@ -368,6 +373,7 @@ posthog:
    path: /
    hosts: [ ]
    tls:
+      secretName: null
      enabled: true
      additional: [ ]

@@ -380,6 +386,7 @@ posthog:
  ## @param posthog.ingressAssets.path URL path prefix for the ingress routes (e.g., /)
  ## @param posthog.ingressAssets.hosts Additional hostnames array to be included in the ingress
  ## @param posthog.ingressAssets.tls.enabled Enable or disable TLS/HTTPS for the ingress
+  ## @param posthog.ingressAssets.tls.secretName Secret name for TLS config
  ## @param posthog.ingressAssets.tls.additional Additional TLS configurations for extra hosts/certificates
  ## @param posthog.ingressAssets.customBackends Custom backend service configurations for the ingress
  ## @param posthog.ingressAssets.annotations Additional Kubernetes annotations to apply to the ingress
@@ -390,6 +397,7 @@ posthog:
    path: /static
    hosts: [ ]
    tls:
+      secretName: null
      enabled: true
      additional: [ ]

@@ -0,0 +1,50 @@
+
+upstream backend_server {
+	server localhost:8000 fail_timeout=0;
+}
+
+server {
+  listen <%= ENV["PORT"] %>;
+  server_name _;
+  server_tokens off;
+
+  root /app/build/frontend-out;
+
+  # Django rest framework
+  location ^~ /api/ {
+      proxy_set_header X-Forwarded-Proto https;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+      proxy_redirect off;
+      proxy_pass http://backend_server;
+  }
+
+  # Django admin
+  location ^~ /admin/ {
+      proxy_set_header X-Forwarded-Proto https;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+      proxy_redirect off;
+      proxy_pass http://backend_server;
+  }
+
+  # Serve static files with caching
+  location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+      expires 30d;
+      add_header Cache-Control "public, max-age=2592000";
+  }
+
+  # Serve static files
+  location / {
+      try_files $uri $uri/ /index.html;
+      # Add no-cache headers
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      add_header Pragma "no-cache";  # HTTP 1.0 header for backward compatibility
+      add_header Expires 0;
+  }
+
+  # Optionally, handle 404 errors by redirecting to index.html
+  error_page 404 =200 /index.html;
+}
Author	SHA1	Message	Date
Sylvain Zimmer	c7fdd7c317	🚀(paas) add PaaS deployment scripts, tested on Scalingo	2025-08-08 10:40:12 +02:00
lebaudantoine	201069aa4c	♻️(frontend) refactor clipboard logic into dedicated reusable hook Extract clipboard content logic from UI components into a separate custom hook to decouple interface elements from clipboard functionality. Creates a reusable hook that can better adapt to future UX changes without requiring modifications to individual UI components.	2025-08-07 12:51:03 +02:00
lebaudantoine	b6a5b1a805	🎨(frontend) remove space between PIN digits and # symbol Update PIN formatting to remove space before the # symbol to clearly indicate that # is part of the complete PIN code. Improves user understanding that the hash symbol is an integral part of the PIN entry sequence, not a separate element.	2025-08-07 12:51:03 +02:00
lebaudantoine	f3af637fd6	✨(frontend) add telephony info to encourage phone participation Add telephony information to the share dialog when available to help users take advantage of the newly introduced phone join feature. Promotes phone participation as an alternative connection method when users need it, improving meeting accessibility and user adoption of telephony capabilities.	2025-08-07 12:51:03 +02:00
lebaudantoine	de3a5aa404	💄(frontend) update secondaryText button variant to medium font weight Change secondaryText button style from default to medium font weight for improved visual comfort and better readability. I haven't tested this change with Marianne.	2025-08-07 12:51:03 +02:00
lebaudantoine	5e9d20e685	🐛(frontend) fix public room warning showing for all rooms Remove incorrect public room warning that was always displayed regardless of room privacy settings. Warning should only appear for genuinely public rooms since the lobby system introduction changed room privacy behavior. Prevents user confusion about room privacy settings.	2025-08-07 12:51:03 +02:00
lebaudantoine	b54445739a	✨(frontend) add telephony info to meeting dialog with layout stability Add telephony information display to the later meeting dialog while preserving existing layout when telephony is disabled. Prevent layout shift on modal close by collapsing all modal content immediately when room becomes undefined. Critical enhancement for users creating meeting links to have complete connection information available.	2025-08-07 12:51:03 +02:00
lebaudantoine	7c67bacd94	🚸(frontend) fix locale issues and improve meeting dialog copywriting Remove ProConnect mentions from frontend locale and enhance the meeting dialog description text to clearly explain that meeting links are permanent and persistent. Improves user understanding of meeting link permanence and cleans up branding references.	2025-08-07 12:51:03 +02:00
lebaudantoine	1fd1b184ee	💬(frontend) update wording from "room address" to "room information" Change UI text to use "room information" instead of "room address" to better reflect the functionality whether copying just the meeting link or complete meeting details.	2025-08-07 12:51:03 +02:00
lebaudantoine	adb517a336	🎨(frontend) harmonize room info sidepanel display with meeting dialog Remove protocol prefix from room URLs in the information sidepanel to match the syntax used in the meeting dialog. This creates consistent URL display formatting across both UI components for better user experience.	2025-08-07 12:51:03 +02:00
lebaudantoine	eec9ff9f26	🚸(frontend) fix copy to include all meeting info from side panel Rework clipboard functionality to copy complete meeting information when users click the copy button in the information side panel. Previously only partial data was copied, causing user confusion. Now includes all relevant meeting details as expected. Improves user experience by meeting user expectations for copy behavior.	2025-08-07 12:51:03 +02:00
lebaudantoine	e0258a1765	🔧(tilt) configure telephony in tilt stack for development Add default telephony configuration to the tilt stack to enable development workflow around authentication features. Note: This is a fake/mock configuration and is not functional for production use. It's intended solely for development purposes.	2025-08-07 12:51:03 +02:00
lebaudantoine	872ce1ecc6	✨(frontend) add icon support to select primitive component Enhance select component by adding icon display capability for better visual representation of options.	2025-08-01 17:45:48 +02:00
lebaudantoine	e2c3b745ca	🩹(frontend) avoid video glitch on the prejoin while init a processor We've introduced simplifications that improve performance, enhance ux, and contribute to the overall perception of experience quality. Previously, our processor handling was overly complex. LiveKit allows us to set a processor before starting the local video preview track, which eliminates the black blink glitch that appeared when loading the join component with a default processor. This change prevents the unnecessary stopping and restarting of the local video track. I'm glad this issue is now resolved. We also simplified component communication by avoiding props drilling. Now, we use a single flag to indicate when the user is ready to enter the room. This significantly reduces the complexity of props passed through components.	2025-08-01 17:40:11 +02:00
lebaudantoine	965d823d08	✨(frontend) display position of a raised hand in the queue Users requested an enhanced visual indicator for raised hands on the participant tile. Most major video conferencing platforms display the position of a raised hand in the queue. This helps hosts quickly see who is requesting to speak, and in what order, without needing to open the full participant list. While a minor feature, this improvement is especially valuable for power user	2025-08-01 16:54:24 +02:00
lebaudantoine	1db189ace2	🚸(frontend) sort raised hand by order of arrival Previously, the participant list was sorted alphabetically by name. This unintentionally affected the raised hands list, which inherited the same sorting behavior. Users requested that raised hands be sorted by order of arrival. This simple change improves the UX by ensuring that raised hands are displayed in the correct order.	2025-08-01 16:54:24 +02:00
lebaudantoine	199e0908e9	♻️(frontend) refactor raised hand to rely on participant's attributes Previously managed participant hand raised using raw metadata. LiveKit introduced attributes concept, saves as metadata under hood but makes update/handling easier. Still pain that attributes must be strings, cannot pass boolean… Refactor whole app to use attributes instead of metadata for the raised hand feature. This commit might introduce regressions. I've double checked participant list side pannel and the notification features. Previously I persisted a boolean, I now persist the timestamp at which the hand was raised. This will be useful in upcoming commits, especially for sorting raised hands by order of arrival.	2025-08-01 16:54:24 +02:00
Jacques ROUSSEL	8518f83211	✨(helm) add the ability to configure tls secretName Yesterday during a deployment, we were unable to configure the tls secretName for ingress.	2025-08-01 16:53:36 +02:00
lebaudantoine	0240d85837	📝(backend) add Firefox proxy workaround parameter to installation guide Document LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND setting that enables connection warmup by pre-calling WebSocket endpoint to resolve proxy connectivity issues.	2025-08-01 16:23:22 +02:00
lebaudantoine	162896c93c	🩹(backend) allow enforcing WSS protocol to resolve browser compatibility The LiveKit API URL is necessary to interact with the API. It uses https protocol. Eplicit wss protocol is necessary in Websocket constructor for some older browsers. This resolves critical compatibility issues with legacy browsers (notably Firefox <124, Chrome <125, Edge <125) that lack support for HTTPS URLs in the WebSocket() constructor. Without explicit WSS URLs, WebSocket signaling connections may fail, crash, or be blocked entirely in these environments. The setting is optional and defaults to the current behavior when not specified, ensuring zero breaking changes for existing deployments.	2025-08-01 16:23:22 +02:00
Jacques ROUSSEL	483a219ac4	♻️(documentation) remove unused environment variables Yesterday during a deployment, we discovered that these variables are unused: POSTGRES_DB POSTGRES_USER POSTGRES_PASSWORD	2025-08-01 16:14:55 +02:00
lebaudantoine	1b26dea178	🐛(frontend) use feature detection for adaptiveStream and dynacast Replace hardcoded true values with supportsAdaptiveStream() and supportsDynacast() checks. LiveKit SDK supports broad browser range but requires specific APIs - modern features need explicit compatibility checks. Prevents enabling unsupported WebRTC features on incompatible browsers, which could led to a poor user experience. One alternative solution could be to install polyfills.	2025-08-01 15:46:17 +02:00