wip manually mute/unmute track

it makes more sense to have the arrow up as the menu open to the top

docs/examples/meet.values.yaml

@@ -35,6 +35,9 @@ 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

docs/installation.md

@@ -217,6 +217,9 @@ DB_NAME: meet
 DB_USER: dinum
 DB_PASSWORD: pass
 DB_PORT: 5432
+POSTGRES_DB: meet
+POSTGRES_USER: dinum
+POSTGRES_PASSWORD: pass
 ```
 
 ## Deployment
@@ -336,8 +339,6 @@ 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                                                                                                                                                         |

src/backend/core/api/__init__.py

@@ -52,7 +52,6 @@ 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,
         },
     }

src/backend/meet/settings.py

@@ -492,9 +492,6 @@ 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,

src/frontend/package-lock.json

@@ -17,7 +17,6 @@
         "@tanstack/react-query": "5.81.5",
         "@timephy/rnnoise-wasm": "1.0.0",
         "crisp-sdk-web": "1.0.25",
-        "derive-valtio": "0.2.0",
         "hoofd": "1.7.3",
         "humanize-duration": "3.33.0",
         "i18next": "25.3.1",
@@ -5295,15 +5294,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/derive-valtio": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/derive-valtio/-/derive-valtio-0.2.0.tgz",
-      "integrity": "sha512-6slhaFHtfaL3t5dLYaQt6s4G2xZymhu0Ktdl7OMeVk8+46RgR8ft6FL0Tr4F31W+yPH03nJe1SSP4JFy2hSMRA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "valtio": ">=2.0.0-rc.0"
-      }
-    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",

src/frontend/package.json

@@ -22,7 +22,6 @@
     "@tanstack/react-query": "5.81.5",
     "@timephy/rnnoise-wasm": "1.0.0",
     "crisp-sdk-web": "1.0.25",
-    "derive-valtio": "0.2.0",
     "hoofd": "1.7.3",
     "humanize-duration": "3.33.0",
     "i18next": "25.3.1",

src/frontend/src/api/useConfig.ts

@@ -39,7 +39,6 @@ export interface ApiConfig {
   manifest_link?: string
   livekit: {
     url: string
-    force_wss_protocol: boolean
     enable_firefox_proxy_workaround: boolean
   }
 }

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

@@ -1,187 +1,100 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Bold, Button, Dialog, type DialogProps, P, Text } from '@/primitives'
+import { 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 = ({
-  room,
+  roomId,
   ...dialogProps
-}: { room: null | ApiRoom } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('home', { keyPrefix: 'laterMeetingDialog' })
+}: { roomId: string } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('home')
+  const roomUrl = getRouteUrl('room', roomId)
 
-  const roomUrl = room && getRouteUrl('room', room?.slug)
-  const telephony = useTelephony()
+  const [isCopied, setIsCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
 
   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={!!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',
-              })}
-            >
+    <Dialog
+      isOpen={!!roomId}
+      {...dialogProps}
+      title={t('laterMeetingDialog.heading')}
+    >
+      <P>{t('laterMeetingDialog.description')}</P>
+      <Button
+        variant={isCopied ? 'success' : 'primary'}
+        size="sm"
+        fullWidth
+        aria-label={t('laterMeetingDialog.copy')}
+        style={{
+          justifyContent: 'start',
+        }}
+        onPress={() => {
+          navigator.clipboard.writeText(roomUrl)
+          setIsCopied(true)
+        }}
+        onHoverChange={setIsHovered}
+        data-attr="later-dialog-copy"
+      >
+        {isCopied ? (
+          <>
+            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+            {t('laterMeetingDialog.copied')}
+          </>
+        ) : (
+          <>
+            <RiFileCopyLine
+              size={18}
+              style={{ marginRight: '8px', minWidth: '18px' }}
+            />
+            {isHovered ? (
+              t('laterMeetingDialog.copy')
+            ) : (
               <div
-                className={css({
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                })}
-              >
-                <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>
-              <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',
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  userSelect: 'none',
+                  textWrap: 'nowrap',
                 }}
-                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',
-                  })}
-                />
+                {roomUrl.replace(/^https?:\/\//, '')}
               </div>
-              <Text variant="sm" style={{ marginTop: '1rem' }}>
-                {t('permissions')}
-              </Text>
-            </HStack>
-          )}
-        </>
-      )}
+            )}
+          </>
+        )}
+      </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>
     </Dialog>
   )
 }

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

@@ -18,7 +18,6 @@ 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 (
@@ -154,7 +153,7 @@ export const Home = () => {
   } = usePersistentUserChoices()
 
   const { mutateAsync: createRoom } = useCreateRoom()
-  const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)
+  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
   const { data } = useConfig()
 
@@ -203,7 +202,7 @@ export const Home = () => {
                       onAction={() => {
                         const slug = generateRoomId()
                         createRoom({ slug, username }).then((data) =>
-                          setLaterRoom(data)
+                          setLaterRoomId(data.slug)
                         )
                       }}
                       data-attr="create-option-later"
@@ -252,8 +251,8 @@ export const Home = () => {
           </RightColumn>
         </Columns>
         <LaterMeetingDialog
-          room={laterRoom}
-          onOpenChange={() => setLaterRoom(null)}
+          roomId={laterRoomId ?? ''}
+          onOpenChange={() => setLaterRoomId(null)}
         />
       </Screen>
     </UserAware>

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

@@ -18,6 +18,7 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
@@ -154,14 +155,17 @@ export const MainNotificationToast = () => {
 
   useEffect(() => {
     const handleNotificationReceived = (
-      changedAttributes: Record<string, string>,
+      prevMetadataStr: string | undefined,
       participant: Participant
     ) => {
       if (!participant) return
       if (isMobileBrowser()) return
       if (participant.isLocal) return
 
-      if (!('handRaisedAt' in changedAttributes)) return
+      const prevMetadata = safeParseMetadata(prevMetadataStr)
+      const metadata = safeParseMetadata(participant.metadata)
+
+      if (prevMetadata?.raised == metadata?.raised) return
 
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>
@@ -169,12 +173,12 @@ export const MainNotificationToast = () => {
           toast.content.type === NotificationType.HandRaised
       )
 
-      if (existingToast && !changedAttributes?.handRaisedAt) {
+      if (existingToast && prevMetadata.raised && !metadata.raised) {
         toastQueue.close(existingToast.key)
         return
       }
 
-      if (!existingToast && !!changedAttributes?.handRaisedAt) {
+      if (!existingToast && !prevMetadata.raised && metadata.raised) {
         triggerNotificationSound(NotificationType.HandRaised)
         toastQueue.add(
           {
@@ -186,13 +190,10 @@ export const MainNotificationToast = () => {
       }
     }
 
-    room.on(RoomEvent.ParticipantAttributesChanged, handleNotificationReceived)
+    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
 
     return () => {
-      room.off(
-        RoomEvent.ParticipantAttributesChanged,
-        handleNotificationReceived
-      )
+      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
     }
   }, [room, triggerNotificationSound])
 

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

@@ -10,8 +10,6 @@ import {
   MediaDeviceFailure,
   Room,
   RoomOptions,
-  supportsAdaptiveStream,
-  supportsDynacast,
 } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -86,13 +84,10 @@ export const Conference = ({
     retry: false,
   })
 
-  const isAdaptiveStreamSupported = supportsAdaptiveStream()
-  const isDynacastSupported = supportsDynacast()
-
   const roomOptions = useMemo((): RoomOptions => {
     return {
-      adaptiveStream: isAdaptiveStreamSupported,
-      dynacast: isDynacastSupported,
+      adaptiveStream: true,
+      dynacast: true,
       publishDefaults: {
         videoCodec: 'vp9',
       },
@@ -102,13 +97,15 @@ 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,
-    isAdaptiveStreamSupported,
-    isDynacastSupported,
+    userConfig.audioOutputDeviceId,
   ])
 
   const room = useMemo(() => new Room(roomOptions), [roomOptions])
@@ -167,20 +164,6 @@ 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.
@@ -204,7 +187,7 @@ export const Conference = ({
       <Screen header={false} footer={false}>
         <LiveKitRoom
           room={room}
-          serverUrl={serverUrl}
+          serverUrl={apiConfig?.livekit.url}
           token={data?.livekit?.token}
           connect={isConnectionWarmedUp}
           audio={userConfig.audioEnabled}
@@ -240,6 +223,7 @@ export const Conference = ({
             <InviteDialog
               isOpen={showInviteDialog}
               onOpenChange={setShowInviteDialog}
+              roomId={roomId}
               onClose={() => setShowInviteDialog(false)}
             />
           )}

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

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
+import { Div, Button, type DialogProps, P } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,13 +10,8 @@ import {
   RiFileCopyLine,
   RiSpam2Fill,
 } from '@remixicon/react'
-import { useMemo } from 'react'
+import { useEffect, useState } 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, {
@@ -39,27 +34,24 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
+export const InviteDialog = ({
+  roomId,
+  ...dialogProps
+}: { roomId: string } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('rooms')
+  const roomUrl = getRouteUrl('room', roomId)
 
-  const roomData = useRoomData()
-  const roomUrl = getRouteUrl('room', roomData?.slug)
+  const [isCopied, setIsCopied] = useState(false)
 
-  const telephony = useTelephony()
-
-  const isTelephonyReadyForUse = useMemo(() => {
-    return telephony?.enabled && roomData?.pin_code
-  }, [telephony?.enabled, roomData?.pin_code])
-
-  const {
-    isCopied,
-    copyRoomToClipboard,
-    isRoomUrlCopied,
-    copyRoomUrlToClipboard,
-  } = useCopyRoomToClipboard(roomData)
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
 
   return (
-    <StyledRACDialog {...props}>
+    <StyledRACDialog {...dialogProps}>
       {({ close }) => (
         <VStack
           alignItems="left"
@@ -68,7 +60,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
           style={{ maxWidth: '100%', overflow: 'hidden' }}
         >
           <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-            {t('heading')}
+            {t('shareDialog.heading')}
           </Heading>
           <Div position="absolute" top="5" right="5">
             <Button
@@ -76,7 +68,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
               variant="tertiaryText"
               size="xs"
               onPress={() => {
-                props.onClose?.()
+                dialogProps.onClose?.()
                 close()
               }}
               aria-label={t('closeDialog')}
@@ -84,125 +76,49 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
               <RiCloseLine />
             </Button>
           </Div>
-          <P>{t('description')}</P>
-          {isTelephonyReadyForUse ? (
+          <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>
             <div
               className={css({
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                marginTop: '0.5rem',
-                gap: '1rem',
-                overflow: 'hidden',
+                backgroundColor: 'primary.200',
+                borderRadius: '50%',
+                padding: '4px',
+                marginTop: '1rem',
               })}
             >
-              <div
+              <RiSpam2Fill
+                size={22}
                 className={css({
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
+                  fill: 'primary.500',
                 })}
-              >
-                <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>
-          ) : (
-            <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>
-          )}
+            <Text variant="sm" style={{ marginTop: '1rem' }}>
+              {t('shareDialog.permissions')}
+            </Text>
+          </HStack>
         </VStack>
       )}
     </StyledRACDialog>

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

@@ -1,9 +1,8 @@
 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 { LocalVideoTrack, Track } from 'livekit-client'
+import { LocalTrack, Track } from 'livekit-client'
 import { H } from '@/primitives/H'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
@@ -26,11 +25,10 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
-import { useSnapshot } from 'valtio'
-import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
-import { ToggleDevice } from './join/ToggleDevice'
-import { SelectDevice } from './join/SelectDevice'
-import { useResolveDefaultDeviceId } from '../livekit/hooks/useResolveDefaultDevice'
+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)
 
@@ -101,6 +99,7 @@ export const Join = ({
       audioEnabled,
       videoEnabled,
       audioDeviceId,
+      audioOutputDeviceId,
       videoDeviceId,
       processorSerialized,
       username,
@@ -108,12 +107,14 @@ export const Join = ({
     saveAudioInputEnabled,
     saveVideoInputEnabled,
     saveAudioInputDeviceId,
+    saveAudioOutputDeviceId,
     saveVideoInputDeviceId,
     saveUsername,
     saveProcessorSerialized,
   } = usePersistentUserChoices()
 
-  const tracks = usePreviewTracks(
+  // fix - permission issue, when permission not set doesn't refresh
+  const { videoTrack, audioTrack } = usePreviewTracks(
     {
       audio: { deviceId: audioDeviceId },
       video: {
@@ -125,26 +126,14 @@ export const Join = ({
     onError
   )
 
-  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]
-  )
-
-  // LiveKit by default populates device choices with "default" value.
-  // Instead, use the current device id used by the preview track as a default
-  useResolveDefaultDeviceId(audioDeviceId, audioTrack, saveAudioInputDeviceId)
-  useResolveDefaultDeviceId(videoDeviceId, videoTrack, saveVideoInputDeviceId)
+  const toggleTrack = (track: LocalTrack | undefined, isEnabled: boolean) => {
+    if (!track) return
+    if (isEnabled) {
+      track?.unmute()
+    } else {
+      track?.mute()
+    }
+  }
 
   const videoEl = useRef(null)
   const isVideoInitiated = useRef(false)
@@ -167,11 +156,7 @@ export const Join = ({
 
     return () => {
       videoTrack?.detach()
-      if (videoElement) {
-        videoElement.removeEventListener('loadedmetadata', handleVideoLoaded)
-        videoElement.style.opacity = '0'
-      }
-      isVideoInitiated.current = false
+      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
     }
   }, [videoTrack, videoEnabled])
 
@@ -233,48 +218,28 @@ export const Join = ({
     enterRoom()
   }
 
-  const permissions = useSnapshot(permissionsStore)
-
-  const isCameraDeniedOrPrompted =
-    permissions.isCameraDenied || permissions.isCameraPrompted
-
-  const isMicrophoneDeniedOrPrompted =
-    permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+  const { isCameraGranted, isMicrophoneGranted } = usePermissions()
 
   const hintMessage = useMemo(() => {
-    if (isCameraDeniedOrPrompted) {
-      return isMicrophoneDeniedOrPrompted
-        ? 'cameraAndMicNotGranted'
-        : 'cameraNotGranted'
+    if (!isCameraGranted) {
+      if (!isMicrophoneGranted) {
+        return 'cameraAndMicNotGranted'
+      }
+      return 'cameraNotGranted'
     }
+
     if (!videoEnabled) {
       return 'cameraDisabled'
     }
+
     if (!isVideoInitiated.current) {
       return 'cameraStarting'
     }
+
     if (videoTrack && videoEnabled) {
       return ''
     }
-  }, [
-    videoTrack,
-    videoEnabled,
-    isCameraDeniedOrPrompted,
-    isMicrophoneDeniedOrPrompted,
-  ])
-
-  const permissionsButtonLabel = useMemo(() => {
-    if (!isMicrophoneDeniedOrPrompted && !isCameraDeniedOrPrompted) {
-      return null
-    }
-    if (isCameraDeniedOrPrompted && isMicrophoneDeniedOrPrompted) {
-      return 'cameraAndMicNotGranted'
-    }
-    if (isCameraDeniedOrPrompted && !isMicrophoneDeniedOrPrompted) {
-      return 'cameraNotGranted'
-    }
-    return null
-  }, [isMicrophoneDeniedOrPrompted, isCameraDeniedOrPrompted])
+  }, [videoTrack, videoEnabled, isCameraGranted, isMicrophoneGranted])
 
   const renderWaitingState = () => {
     switch (status) {
@@ -327,6 +292,10 @@ export const Join = ({
             submitButtonProps={{
               fullWidth: true,
             }}
+            className={css({
+              width: '100%',
+              maxWidth: '340px',
+            })}
           >
             <VStack marginBottom={1}>
               <H lvl={1} margin="sm" centered>
@@ -336,7 +305,6 @@ export const Join = ({
                 type="text"
                 onChange={saveUsername}
                 label={t('usernameLabel')}
-                aria-label={t('usernameLabel')}
                 defaultValue={username}
                 validate={(value) => !value && t('errors.usernameEmpty')}
                 wrapperProps={{
@@ -410,28 +378,6 @@ export const Join = ({
                 alignItems: 'center',
               })}
             >
-              <div
-                className={css({
-                  position: 'absolute',
-                  top: 0,
-                  height: '5rem',
-                  width: '100%',
-                  backgroundImage:
-                    'linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%)',
-                  zIndex: 1,
-                })}
-              />
-              <div
-                className={css({
-                  position: 'absolute',
-                  bottom: 0,
-                  height: '5rem',
-                  width: '100%',
-                  backgroundImage:
-                    'linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%)',
-                  zIndex: 1,
-                })}
-              />
               <div
                 className={css({
                   position: 'relative',
@@ -453,7 +399,7 @@ export const Join = ({
                 >
                   <div
                     aria-label={t(
-                      `videoPreview.${videoEnabled ? 'enabled' : 'disabled'}`
+                      `videoPreview.${videoEnabled && isCameraGranted ? 'enabled' : 'disabled'}`
                     )}
                     role="status"
                     className={css({
@@ -482,7 +428,7 @@ export const Join = ({
                         height="720"
                         style={{
                           display:
-                            !videoEnabled || isCameraDeniedOrPrompted
+                            !videoEnabled || !isCameraGranted
                               ? 'none'
                               : undefined,
                         }}
@@ -511,7 +457,6 @@ export const Join = ({
                       alignItems: 'center',
                       padding: '0.24rem',
                       boxSizing: 'border-box',
-                      gap: '1rem',
                     })}
                   >
                     <p
@@ -524,42 +469,44 @@ export const Join = ({
                     >
                       {hintMessage && t(hintMessage)}
                     </p>
-                    {isCameraDeniedOrPrompted && (
-                      <Button
-                        size="sm"
-                        variant="tertiary"
-                        onPress={openPermissionsDialog}
-                      >
-                        {t(`permissionsButton.${permissionsButtonLabel}`)}
-                      </Button>
-                    )}
                   </div>
                 </div>
                 <div
                   className={css({
                     position: 'absolute',
+                    right: '50%',
                     bottom: '1rem',
                     zIndex: '1',
                     display: 'flex',
-                    gap: '1rem',
+                    gap: '1.5rem',
                     justifyContent: 'center',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
+                    marginRight: '-68px',
                   })}
                 >
-                  <ToggleDevice
+                  <ToggleDeviceJoin
                     source={Track.Source.Microphone}
                     initialState={audioEnabled}
                     track={audioTrack}
-                    onChange={(enabled) => saveAudioInputEnabled(enabled)}
-                    onDeviceError={(error) => console.error(error)}
+                    onChange={(value) => {
+                      toggleTrack(audioTrack, value)
+                      saveAudioInputEnabled(value)
+                    }}
                   />
-                  <ToggleDevice
+                  <ToggleDeviceJoin
                     source={Track.Source.Camera}
                     initialState={videoEnabled}
                     track={videoTrack}
-                    onChange={(enabled) => saveVideoInputEnabled(enabled)}
-                    onDeviceError={(error) => console.error(error)}
+                    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)
+                    }}
                   />
                 </div>
                 <div
@@ -581,19 +528,22 @@ export const Join = ({
             </div>
             <div
               className={css({
-                display: 'flex',
-                justifyContent: 'center',
-                gap: '2%',
-                width: '80%',
-                marginX: 'auto',
+                display: 'none',
+                sm: {
+                  display: 'flex',
+                  justifyContent: 'center',
+                  gap: '2%',
+                  width: '80%',
+                  marginX: 'auto',
+                },
               })}
             >
               <div
                 className={css({
-                  width: '50%',
+                  width: '30%',
                 })}
               >
-                <SelectDevice
+                <SelectDeviceJoin
                   kind="audioinput"
                   id={audioDeviceId}
                   onSubmit={saveAudioInputDeviceId}
@@ -601,10 +551,21 @@ export const Join = ({
               </div>
               <div
                 className={css({
-                  width: '50%',
+                  width: '30%',
                 })}
               >
-                <SelectDevice
+                <SelectDeviceJoin
+                  kind="audiooutput"
+                  id={audioOutputDeviceId}
+                  onSubmit={saveAudioOutputDeviceId}
+                />
+              </div>
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDeviceJoin
                   kind="videoinput"
                   id={videoDeviceId}
                   onSubmit={saveVideoInputDeviceId}

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

@@ -0,0 +1,90 @@
+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>
+  )
+}

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

@@ -1,112 +0,0 @@
-import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
-import { css } from '@/styled-system/css'
-import { Dialog, H } from '@/primitives'
-import { RiEqualizer2Line } from '@remixicon/react'
-import { useEffect, useMemo } from 'react'
-import { useSnapshot } from 'valtio'
-import { closePermissionsDialog, permissionsStore } from '@/stores/permissions'
-import { useTranslation } from 'react-i18next'
-import { injectIconIntoTranslation } from '@/utils/translation'
-import { isSafari } from '@/utils/livekit'
-
-/**
- * Singleton component - ensures permissions sync runs only once across the app.
- * WARNING: This component should only be instantiated once in the interface.
- * Multiple instances may cause unexpected behavior or performance issues.
- */
-export const Permissions = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
-
-  useWatchPermissions()
-
-  const permissions = useSnapshot(permissionsStore)
-
-  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])
-
-  const [descriptionBeforeIcon, descriptionAfterIcon] =
-    injectIconIntoTranslation(t('body.openMenu.others'))
-
-  useEffect(() => {
-    if (
-      permissions.isPermissionDialogOpen &&
-      permissions.isCameraGranted &&
-      permissions.isMicrophoneGranted
-    ) {
-      closePermissionsDialog()
-    }
-  }, [permissions])
-
-  const appTitle = `${import.meta.env.VITE_APP_TITLE}`
-
-  return (
-    <Dialog
-      isOpen={permissions.isPermissionDialogOpen}
-      role="dialog"
-      type="flex"
-      title=""
-      aria-label={t(`heading.${permissionLabel}`, {
-        appTitle,
-      })}
-      onClose={closePermissionsDialog}
-    >
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        })}
-      >
-        <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}`, {
-              appTitle,
-            })}
-          </H>
-          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
-            <li>
-              {isSafari() ? (
-                t('body.openMenu.safari', {
-                  appDomain: window.origin.replace('https://', ''),
-                })
-              ) : (
-                <>
-                  {descriptionBeforeIcon}
-                  <span
-                    style={{ display: 'inline-block', verticalAlign: 'middle' }}
-                  >
-                    <RiEqualizer2Line />
-                  </span>
-                  {descriptionAfterIcon}
-                </>
-              )}
-            </li>
-            <li>{t(`body.details.${permissionLabel}`)}</li>
-          </ol>
-        </div>
-      </div>
-    </Dialog>
-  )
-}

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

@@ -0,0 +1,113 @@
+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)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,33 @@
+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,
+      }}
+    />
+  )
+}

src/frontend/src/features/rooms/components/join/SelectDevice.tsx

@@ -1,115 +0,0 @@
-import {
-  RemixiconComponentType,
-  RiMicLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-import { useMemo } from 'react'
-import { Select } from '@/primitives/Select'
-import { useSnapshot } from 'valtio'
-import { permissionsStore } from '@/stores/permissions'
-
-type DeviceItems = Array<{ value: string; label: string }>
-
-type DeviceConfig = {
-  icon: RemixiconComponentType
-}
-
-type SelectDeviceProps = {
-  id?: string
-  onSubmit?: (id: string) => void
-  kind: MediaDeviceKind
-}
-
-type SelectDevicePermissionsProps = SelectDeviceProps & {
-  config: DeviceConfig
-}
-
-const SelectDevicePermissions = ({
-  id,
-  kind,
-  config,
-  onSubmit,
-}: SelectDevicePermissionsProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: kind, requestPermissions: true })
-
-  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')}
-      selectedKey={id || activeDeviceId}
-      onSelectionChange={(key) => {
-        onSubmit?.(key as string)
-        setActiveMediaDevice(key as string)
-      }}
-    />
-  )
-}
-
-export const SelectDevice = ({ id, onSubmit, kind }: SelectDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const permissions = useSnapshot(permissionsStore)
-
-  const config = useMemo<DeviceConfig | undefined>(() => {
-    switch (kind) {
-      case 'audioinput':
-        return {
-          icon: RiMicLine,
-        }
-      case 'videoinput':
-        return {
-          icon: RiVideoOnLine,
-        }
-    }
-  }, [kind])
-
-  const isPermissionDeniedOrPrompted = useMemo(() => {
-    if (kind == 'audioinput') {
-      return permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
-    }
-    if (kind == 'videoinput') {
-      return permissions.isCameraDenied || permissions.isCameraPrompted
-    }
-    return false
-  }, [kind, permissions])
-
-  if (!config) return null
-
-  if (isPermissionDeniedOrPrompted || permissions.isLoading) {
-    return (
-      <Select
-        aria-label={t(`${kind}.permissionsNeeded`)}
-        label=""
-        isDisabled={true}
-        items={[]}
-        iconComponent={config?.icon}
-        placeholder={t('selectDevice.permissionsNeeded')}
-      />
-    )
-  }
-
-  return (
-    <SelectDevicePermissions
-      id={id}
-      onSubmit={onSubmit}
-      kind={kind}
-      config={config}
-    />
-  )
-}

src/frontend/src/features/rooms/components/join/ToggleDevice.tsx

@@ -1,78 +0,0 @@
-import { UseTrackToggleProps } from '@livekit/components-react'
-import { ToggleDevice as BaseToggleDevice } from '../../livekit/components/controls/ToggleDevice'
-import {
-  TOGGLE_DEVICE_CONFIG,
-  ToggleSource,
-} from '../../livekit/config/ToggleDeviceConfig'
-import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useCallback, useMemo, useState } from 'react'
-import { useSnapshot } from 'valtio'
-import { permissionsStore } from '@/stores/permissions'
-
-type ToggleDeviceProps<T extends ToggleSource> = UseTrackToggleProps<T> & {
-  track?: LocalAudioTrack | LocalVideoTrack
-  source: ToggleSource
-  variant?: NonNullable<ButtonRecipeProps>['variant']
-}
-
-export const ToggleDevice = <T extends ToggleSource>({
-  track,
-  onChange,
-  ...props
-}: ToggleDeviceProps<T>) => {
-  const config = TOGGLE_DEVICE_CONFIG[props.source]
-
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-
-  const [isTrackEnabled, setIsTrackEnabled] = useState(
-    props.initialState ?? false
-  )
-
-  const permissions = useSnapshot(permissionsStore)
-
-  const isPermissionDeniedOrPrompted = useMemo(() => {
-    if (config.kind == 'audioinput') {
-      return permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
-    }
-    if (config.kind == 'videoinput') {
-      return permissions.isCameraDenied || permissions.isCameraPrompted
-    }
-  }, [config, permissions])
-
-  const toggle = useCallback(async () => {
-    if (!track) {
-      console.error('Track is undefined.')
-      return
-    }
-    try {
-      if (isTrackEnabled) {
-        await track.mute()
-        setIsTrackEnabled(false)
-        onChange?.(false, true)
-      } else {
-        await track.unmute()
-        setIsTrackEnabled(true)
-        onChange?.(true, true)
-      }
-    } catch (error) {
-      console.error('Failed to toggle track:', error)
-    }
-  }, [track, onChange, isTrackEnabled])
-
-  return (
-    <BaseToggleDevice
-      enabled={isTrackEnabled}
-      isPermissionDeniedOrPrompted={isPermissionDeniedOrPrompted}
-      toggle={toggle}
-      config={config}
-      variant="whiteCircle"
-      errorVariant="errorCircle"
-      toggleButtonProps={{
-        groupPosition: undefined,
-      }}
-    />
-  )
-}

src/frontend/src/features/rooms/hooks/useModal.ts

@@ -0,0 +1,22 @@
+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),
+  }
+}

src/frontend/src/features/rooms/hooks/usePermissions.ts

@@ -0,0 +1,66 @@
+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',
+  }
+}

src/frontend/src/features/rooms/hooks/usePreviewTracks.ts

@@ -0,0 +1,173 @@
+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,
+  }
+}

src/frontend/src/features/rooms/hooks/useWatchPermissions.ts

@@ -1,160 +0,0 @@
-import { useEffect } from 'react'
-import { permissionsStore } from '@/stores/permissions'
-import { isSafari } from '@/utils/livekit'
-
-const POLLING_TIME = 500
-
-export const useWatchPermissions = () => {
-  useEffect(() => {
-    let cleanup: (() => void) | undefined
-    let intervalId: NodeJS.Timeout | undefined
-    let isCancelled = false
-
-    const checkPermissions = async () => {
-      try {
-        if (!navigator.permissions) {
-          if (!isCancelled) {
-            permissionsStore.cameraPermission = 'unavailable'
-            permissionsStore.microphonePermission = 'unavailable'
-          }
-          return
-        }
-
-        const [cameraPermission, microphonePermission] = await Promise.all([
-          navigator.permissions.query({ name: 'camera' }),
-          navigator.permissions.query({ name: 'microphone' }),
-        ])
-
-        if (isCancelled) return
-
-        /**
-         * Safari Permission API Limitation Workaround
-         *
-         * Safari has a known issue where permission change events are not reliably fired
-         * when users interact with permission prompts. This is documented in Apple's forums:
-         * https://developer.apple.com/forums/thread/757353
-         *
-         * The problem:
-         * - When permissions are in 'prompt' state, Safari may not trigger 'change' events
-         * - Users can grant/deny permissions through system prompts, but our listeners won't detect it
-         * - This leaves the UI in an inconsistent state showing outdated permission status
-         *
-         * The solution:
-         * - Manually poll the Permissions API every 500ms when either permission is in 'prompt' state
-         * - Continue polling until both permissions are no longer in 'prompt' state
-         * - This ensures we catch permission changes even when Safari fails to fire events
-         *
-         * This polling is Safari-specific and only activates when needed to minimize performance impact.
-         */
-        if (
-          isSafari() &&
-          (cameraPermission.state === 'prompt' ||
-            microphonePermission.state === 'prompt')
-        ) {
-          // Start polling every 1 second if either permission is in 'prompt' state
-          if (!intervalId) {
-            intervalId = setInterval(async () => {
-              try {
-                const [updatedCamera, updatedMicrophone] = await Promise.all([
-                  navigator.permissions.query({ name: 'camera' }),
-                  navigator.permissions.query({ name: 'microphone' }),
-                ])
-
-                if (isCancelled) return
-
-                const cameraChanged =
-                  permissionsStore.cameraPermission !== updatedCamera.state
-                const microphoneChanged =
-                  permissionsStore.microphonePermission !==
-                  updatedMicrophone.state
-
-                if (cameraChanged) {
-                  permissionsStore.cameraPermission = updatedCamera.state
-                }
-
-                if (microphoneChanged) {
-                  permissionsStore.microphonePermission =
-                    updatedMicrophone.state
-                }
-
-                if (
-                  updatedCamera.state !== 'prompt' &&
-                  updatedMicrophone.state !== 'prompt'
-                ) {
-                  if (intervalId) {
-                    clearInterval(intervalId)
-                    intervalId = undefined
-                  }
-                }
-              } catch (error) {
-                if (!isCancelled) {
-                  console.error('Error polling permissions:', error)
-                }
-              }
-            }, POLLING_TIME)
-          }
-        }
-
-        permissionsStore.cameraPermission = cameraPermission.state
-        permissionsStore.microphonePermission = microphonePermission.state
-
-        const handleCameraChange = (e: Event) => {
-          const target = e.target as PermissionStatus
-          permissionsStore.cameraPermission = target.state
-
-          if (
-            intervalId &&
-            target.state !== 'prompt' &&
-            microphonePermission.state !== 'prompt'
-          ) {
-            clearInterval(intervalId)
-            intervalId = undefined
-          }
-        }
-
-        const handleMicrophoneChange = (e: Event) => {
-          const target = e.target as PermissionStatus
-          permissionsStore.microphonePermission = target.state
-
-          if (
-            intervalId &&
-            target.state !== 'prompt' &&
-            microphonePermission.state !== 'prompt'
-          ) {
-            clearInterval(intervalId)
-            intervalId = undefined
-          }
-        }
-
-        cameraPermission.addEventListener('change', handleCameraChange)
-        microphonePermission.addEventListener('change', handleMicrophoneChange)
-
-        cleanup = () => {
-          cameraPermission.removeEventListener('change', handleCameraChange)
-          microphonePermission.removeEventListener(
-            'change',
-            handleMicrophoneChange
-          )
-          if (intervalId) {
-            clearInterval(intervalId)
-            intervalId = undefined
-          }
-        }
-      } catch (error) {
-        if (!isCancelled) {
-          console.error('Error checking permissions:', error)
-        }
-      } finally {
-        if (!isCancelled) {
-          permissionsStore.isLoading = false
-        }
-      }
-    }
-    checkPermissions()
-
-    return () => {
-      isCancelled = true
-      cleanup?.()
-    }
-  }, [])
-}

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

@@ -2,6 +2,7 @@ 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()
@@ -10,12 +11,8 @@ export const useLowerHandParticipant = () => {
     if (!data || !data?.livekit) {
       throw new Error('Room data is not available')
     }
-
-    const newAttributes = {
-      ...participant.attributes,
-      handRaisedAt: '',
-    }
-
+    const newMetadata = safeParseMetadata(participant.metadata) || {}
+    newMetadata.raised = !newMetadata.raised
     return fetchServerApi(
       buildServerApiUrl(
         data.livekit.url,
@@ -27,7 +24,7 @@ export const useLowerHandParticipant = () => {
         body: JSON.stringify({
           room: data.livekit.room,
           identity: participant.identity,
-          attributes: newAttributes,
+          metadata: JSON.stringify(newMetadata),
           permission: participant.permissions,
         }),
       }

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

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useMemo } from 'react'
+import { useEffect, useState } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -8,22 +8,24 @@ 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"
@@ -51,9 +53,9 @@ export const Info = () => {
           })}
         >
           <Text as="p" variant="xsNote" wrap="pretty">
-            {roomUrl.replace(/^https?:\/\//, '')}
+            {roomUrl}
           </Text>
-          {isTelephonyReadyForUse && (
+          {telephony?.enabled && data?.pin_code && (
             <>
               <Text as="p" variant="xsNote" wrap="pretty">
                 <Bold>{t('roomInformation.phone.call')}</Bold> (
@@ -70,7 +72,10 @@ export const Info = () => {
           size="sm"
           variant={isCopied ? 'success' : 'tertiaryText'}
           aria-label={t('roomInformation.button.ariaLabel')}
-          onPress={copyRoomToClipboard}
+          onPress={() => {
+            navigator.clipboard.writeText(roomUrl)
+            setIsCopied(true)
+          }}
           data-attr="copy-info-sidepannel"
           style={{
             marginLeft: '-8px',

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

@@ -22,7 +22,7 @@ import {
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
 import { RiHand } from '@remixicon/react'
-import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
+import { useRaisedHand } from '../hooks/useRaisedHand'
 import { HStack } from '@/styled-system/jsx'
 import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
@@ -97,10 +97,6 @@ export const ParticipantTile: (
     participant: trackReference.participant,
   })
 
-  const { positionInQueue, firstInQueue } = useRaisedHandPosition({
-    participant: trackReference.participant,
-  })
-
   const isScreenShare = trackReference.source != Track.Source.Camera
 
   return (
@@ -145,32 +141,24 @@ export const ParticipantTile: (
                       style={{
                         padding: '0.1rem 0.25rem',
                         backgroundColor:
-                          isHandRaised && !isScreenShare
-                            ? firstInQueue
-                              ? '#fde047'
-                              : 'white'
-                            : undefined,
+                          isHandRaised && !isScreenShare ? 'white' : undefined,
                         color:
                           isHandRaised && !isScreenShare ? 'black' : undefined,
                         transition: 'background 200ms ease, color 400ms ease',
                       }}
                     >
                       {isHandRaised && !isScreenShare && (
-                        <>
-                          <span>{positionInQueue}</span>
-                          <RiHand
-                            color="black"
-                            size={16}
-                            style={{
-                              marginRight: '0.4rem',
-                              marginLeft: '0.1rem',
-                              minWidth: '16px',
-                              animationDuration: '300ms',
-                              animationName: 'wave_hand',
-                              animationIterationCount: '2',
-                            }}
-                          />
-                        </>
+                        <RiHand
+                          color="black"
+                          size={16}
+                          style={{
+                            marginRight: '0.4rem',
+                            minWidth: '16px',
+                            animationDuration: '300ms',
+                            animationName: 'wave_hand',
+                            animationIterationCount: '2',
+                          }}
+                        />
                       )}
                       {isScreenShare && (
                         <ScreenShareIcon

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

@@ -11,6 +11,7 @@ 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 = () => {
@@ -34,15 +35,10 @@ export const ParticipantsList = () => {
     ...sortedRemoteParticipants,
   ]
 
-  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 raisedHandParticipants = participants.filter((participant) => {
+    const data = safeParseMetadata(participant.metadata)
+    return data.raised
+  })
 
   const { waitingParticipants, handleParticipantEntry } =
     useWaitingParticipants()

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

@@ -1,47 +0,0 @@
-import { Button } from '@/primitives'
-import { RiErrorWarningFill } from '@remixicon/react'
-import { openPermissionsDialog } from '@/stores/permissions'
-import { css } from '@/styled-system/css'
-import { useTranslation } from 'react-i18next'
-
-export const PermissionNeededButton = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'permissionsButton' })
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        bottom: 'auto',
-        left: '-.55rem',
-        top: '-.55rem',
-        zIndex: 1,
-      })}
-    >
-      <Button
-        aria-label={t('ariaLabel')}
-        tooltip={t('tooltip')}
-        onPress={openPermissionsDialog}
-        variant="permission"
-      >
-        <div
-          className={css({
-            position: 'relative',
-            zIndex: 2,
-          })}
-        >
-          <RiErrorWarningFill size={28} />
-        </div>
-        <div
-          className={css({
-            width: '18px',
-            height: '18px',
-            position: 'absolute',
-            top: '4px',
-            left: '4px',
-            backgroundColor: 'black',
-            borderRadius: '100%',
-          })}
-        />
-      </Button>
-    </div>
-  )
-}

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

@@ -13,25 +13,24 @@ import {
   VideoCaptureOptions,
 } from 'livekit-client'
 
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
+import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../blur'
-import { useSnapshot } from 'valtio'
-import { permissionsStore } from '@/stores/permissions'
 import {
-  TOGGLE_DEVICE_CONFIG,
+  SelectToggleSource,
   ToggleSource,
-} from '../../config/ToggleDeviceConfig'
+} from '../../types/SelectToggleDevice'
+import { SELECT_TOGGLE_DEVICE_CONFIG } from '../../config/SelectToggleDevice'
 
-type SelectToggleDeviceProps<T extends ToggleSource> =
+export type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
-    track?: LocalAudioTrack | LocalVideoTrack
+    track?: LocalAudioTrack | LocalVideoTrack | undefined
     initialDeviceId?: string
     onActiveDeviceChange: (deviceId: string) => void
-    source: ToggleSource
+    source: SelectToggleSource
     variant?: NonNullable<ButtonRecipeProps>['variant']
     menuVariant?: 'dark' | 'light'
     hideMenu?: boolean
@@ -46,7 +45,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   menuVariant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
-  const config = TOGGLE_DEVICE_CONFIG[props.source]
+  const config = SELECT_TOGGLE_DEVICE_CONFIG[props.source]
   if (!config) {
     throw new Error('Invalid source')
   }
@@ -55,18 +54,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
 
   const { userChoices } = usePersistentUserChoices()
 
-  const permissions = useSnapshot(permissionsStore)
-  const isPermissionDeniedOrPrompted = useMemo(() => {
-    switch (config.kind) {
-      case 'audioinput':
-        return (
-          permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
-        )
-      case 'videoinput':
-        return permissions.isCameraDenied || permissions.isCameraPrompted
-    }
-  }, [permissions, config.kind])
-
   const toggle = () => {
     if (props.source === Track.Source.Camera) {
       /**
@@ -127,7 +114,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         config={config}
         variant={variant}
         toggle={toggle}
-        isPermissionDeniedOrPrompted={isPermissionDeniedOrPrompted}
         toggleButtonProps={{
           ...(hideMenu
             ? {
@@ -139,16 +125,11 @@ export const SelectToggleDevice = <T extends ToggleSource>({
       {!hideMenu && (
         <Menu variant={menuVariant}>
           <Button
-            isDisabled={isPermissionDeniedOrPrompted}
             tooltip={selectLabel}
             aria-label={selectLabel}
             groupPosition="right"
             square
-            variant={
-              trackProps.enabled && !isPermissionDeniedOrPrompted
-                ? variant
-                : 'error2'
-            }
+            variant={trackProps.enabled ? variant : 'error2'}
           >
             <RiArrowUpSLine />
           </Button>

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

@@ -3,7 +3,6 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { useMemo, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
-import { PermissionNeededButton } from './PermissionNeededButton'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
@@ -13,16 +12,16 @@ import {
 } from '@livekit/components-react'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { openPermissionsDialog } from '@/stores/permissions'
-import { ToggleDeviceConfig } from '../../config/ToggleDeviceConfig'
+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
-  isPermissionDeniedOrPrompted?: boolean
   toggle: () => void
-  config: ToggleDeviceConfig
+  config: SelectToggleDeviceConfig
   variant?: NonNullable<ButtonRecipeProps>['variant']
-  errorVariant?: NonNullable<ButtonRecipeProps>['variant']
   toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
@@ -31,12 +30,11 @@ export const ToggleDevice = ({
   enabled,
   toggle,
   variant = 'primaryDark',
-  errorVariant = 'error2',
   toggleButtonProps,
-  isPermissionDeniedOrPrompted,
 }: ToggleDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
+  const { open } = useModal('permissions')
   const { kind, shortcut, iconOn, iconOff, longPress } = config
 
   const [pushToTalk, setPushToTalk] = useState(false)
@@ -52,46 +50,77 @@ 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(enabled ? 'disable' : 'enable', {
+    const label = t(isEnabledAndPermitted ? 'disable' : 'enable', {
       keyPrefix: `join.${kind}`,
     })
     return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [enabled, kind, shortcut, t])
+  }, [isEnabledAndPermitted, kind, shortcut, t])
 
-  const Icon = enabled && !isPermissionDeniedOrPrompted ? iconOn : iconOff
+  const Icon = isEnabledAndPermitted ? iconOn : iconOff
 
   const context = useMaybeRoomContext()
   if (kind === 'audioinput' && pushToTalk && context) {
     return <ActiveSpeakerWrapper />
   }
 
+  const errorVariant = variant == 'whiteCircle' ? 'errorCircle' : 'error2'
+
   return (
-    <div style={{ position: 'relative' }}>
-      {isPermissionDeniedOrPrompted && <PermissionNeededButton />}
+    <div
+      className={css({
+        position: 'relative',
+      })}
+    >
       <ToggleButton
         isSelected={!enabled}
-        variant={
-          enabled && !isPermissionDeniedOrPrompted ? variant : errorVariant
-        }
+        variant={isEnabledAndPermitted ? variant : errorVariant}
         shySelected
-        onPress={() =>
-          isPermissionDeniedOrPrompted ? openPermissionsDialog() : toggle()
-        }
+        onPress={() => (isPermissionDeniedOrPrompted ? open() : toggle())}
         aria-label={toggleLabel}
-        tooltip={
-          isPermissionDeniedOrPrompted
-            ? t('tooltip', { keyPrefix: 'permissionsButton' })
-            : 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>
   )
 }

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -1,5 +1,5 @@
 import { LocalVideoTrack, Track } from 'livekit-client'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, 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 } from '@/primitives'
+import { Text, P, ToggleButton, H, Button } 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,10 +50,20 @@ 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
@@ -63,12 +73,13 @@ export const EffectsConfiguration = ({
 
     return () => {
       if (!videoElement) return
-      videoTrack.detach(videoElement)
+      videoTrack?.detach(videoElement)
     }
   }, [videoTrack, videoTrack?.isMuted])
 
   const clearEffect = async () => {
-    await videoTrack.stopProcessor()
+    await videoTrack?.stopProcessor()
+    setSelectedProcessor(undefined)
     onSubmit?.(undefined)
   }
 
@@ -92,7 +103,6 @@ export const EffectsConfiguration = ({
       await toggle(true, {
         processor: newProcessorTmp,
       })
-      setTimeout(() => setProcessorPending(false))
       return
     }
 
@@ -100,9 +110,10 @@ export const EffectsConfiguration = ({
       await toggle(true)
     }
 
-    const processor = getProcessor()
+    const processor = videoTrack?.getProcessor() as BackgroundProcessorInterface
     try {
       if (isSelected(type, options)) {
+        setSelectedProcessor(undefined)
         // Stop processor.
         await clearEffect()
       } else if (!processor || processor.serialize().type !== type) {
@@ -118,28 +129,27 @@ 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 {
-      // Without setTimeout the DOM is not refreshing when updating the options.
-      setTimeout(() => setProcessorPending(false))
+      setProcessorPending(false)
     }
   }
 
-  const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundProcessorInterface
-  }
-
   const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
-    const processor = getProcessor()
+    if (!selectedProcessor) return false
+    const processor = selectedProcessor as BackgroundProcessorInterface
     const processorSerialized = processor?.serialize()
     return (
       !!processor &&
@@ -152,6 +162,11 @@ 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(
@@ -165,7 +180,7 @@ export const EffectsConfiguration = ({
               display: 'flex',
               gap: '1.5rem',
               flexDirection: 'column',
-              md: {
+              lg: {
                 flexDirection: 'row',
                 overflow: 'hidden',
               },
@@ -175,31 +190,65 @@ 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={{
@@ -209,19 +258,23 @@ export const EffectsConfiguration = ({
                 marginBottom: 0,
               }}
             >
-              {t('activateCamera')}
+              {t(isCameraGranted ? 'activateCamera' : 'permissionsCamera')}
             </P>
-          </div>
-        )}
-        {processorPendingReveal && (
-          <div
-            className={css({
-              position: 'absolute',
-              right: '8px',
-              bottom: '8px',
-            })}
-          >
-            <Loader />
+            <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>
         )}
       </div>
@@ -242,7 +295,7 @@ export const EffectsConfiguration = ({
         {hasFunnyEffectsAccess && (
           <FunnyEffects
             videoTrack={videoTrack}
-            isPending={processorPendingReveal}
+            isPending={processorPending}
             onPending={setProcessorPending}
           />
         )}
@@ -270,8 +323,8 @@ export const EffectsConfiguration = ({
                   onPress={async () => {
                     await clearEffect()
                   }}
-                  isSelected={!getProcessor()}
-                  isDisabled={processorPendingReveal}
+                  isSelected={!selectedProcessor}
+                  isDisabled={isDisabled}
                 >
                   <RiProhibited2Line />
                 </ToggleButton>
@@ -283,7 +336,7 @@ export const EffectsConfiguration = ({
                   tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.LIGHT,
                   })}
-                  isDisabled={processorPendingReveal}
+                  isDisabled={isDisabled}
                   onChange={async () =>
                     await toggleEffect(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
@@ -304,7 +357,7 @@ export const EffectsConfiguration = ({
                   tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.NORMAL,
                   })}
-                  isDisabled={processorPendingReveal}
+                  isDisabled={isDisabled}
                   onChange={async () =>
                     await toggleEffect(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
@@ -352,7 +405,7 @@ export const EffectsConfiguration = ({
                         tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
                           imagePath,
                         })}
-                        isDisabled={processorPendingReveal}
+                        isDisabled={isDisabled}
                         onChange={async () =>
                           await toggleEffect(ProcessorType.VIRTUAL, {
                             imagePath,

src/frontend/src/features/rooms/livekit/components/effects/FunnyEffects.tsx

@@ -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)

src/frontend/src/features/rooms/livekit/config/SelectToggleDevice.ts

@@ -0,0 +1,33 @@
+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,
+    },
+  },
+}

src/frontend/src/features/rooms/livekit/config/ToggleDeviceConfig.ts

@@ -1,52 +0,0 @@
-import { Track } from 'livekit-client'
-import {
-  RemixiconComponentType,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  | Track.Source.ScreenShareAudio
-  | Track.Source.Unknown
-  | Track.Source.ScreenShare
->
-
-export type ToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type ToggleDeviceConfigMap = {
-  [key in ToggleSource]: ToggleDeviceConfig
-}
-
-export const TOGGLE_DEVICE_CONFIG = {
-  [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,
-    },
-  },
-} as const satisfies ToggleDeviceConfigMap

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

@@ -1,79 +0,0 @@
-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,
-  }
-}

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

@@ -16,6 +16,9 @@ export function usePersistentUserChoices() {
     saveAudioInputDeviceId: (deviceId: string) => {
       userChoicesStore.audioDeviceId = deviceId
     },
+    saveAudioOutputDeviceId: (deviceId: string) => {
+      userChoicesStore.audioOutputDeviceId = deviceId
+    },
     saveVideoInputDeviceId: (deviceId: string) => {
       userChoicesStore.videoDeviceId = deviceId
     },

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

@@ -1,58 +1,23 @@
 import { LocalParticipant, Participant } from 'livekit-client'
-import {
-  useParticipantAttribute,
-  useParticipants,
-} from '@livekit/components-react'
+import { useParticipantInfo } from '@livekit/components-react'
 import { isLocal } from '@/utils/livekit'
-import { useMemo } from 'react'
 
 type useRaisedHandProps = {
   participant: Participant
 }
 
-export function useRaisedHandPosition({ participant }: useRaisedHandProps) {
-  const { isHandRaised } = useRaisedHand({ participant })
-
-  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,
-  })
+  // fixme - refactor this part to rely on attributes
+  const { metadata } = useParticipantInfo({ participant })
+  const parsedMetadata = JSON.parse(metadata || '{}')
 
-  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() : '',
+  const toggleRaisedHand = () => {
+    if (isLocal(participant)) {
+      parsedMetadata.raised = !parsedMetadata.raised
+      const localParticipant = participant as LocalParticipant
+      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
     }
-
-    await localParticipant.setAttributes(attributes)
   }
 
-  return { isHandRaised, toggleRaisedHand }
+  return { isHandRaised: parsedMetadata.raised ?? false, toggleRaisedHand }
 }

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

@@ -1,18 +0,0 @@
-import { useEffect } from 'react'
-
-export const useResolveDefaultDeviceId = <
-  T extends { getDeviceId(): Promise<string | undefined> },
->(
-  currentId: string,
-  track: T | undefined,
-  save: (id: string) => void
-) => {
-  useEffect(() => {
-    if (currentId !== 'default' || !track) return
-    const resolveDefaultDeviceId = async () => {
-      const actualDeviceId = await track.getDeviceId()
-      if (actualDeviceId && actualDeviceId !== 'default') save(actualDeviceId)
-    }
-    resolveDefaultDeviceId()
-  }, [currentId, track, save])
-}

src/frontend/src/features/rooms/livekit/types/SelectToggleDevice.ts

@@ -0,0 +1,22 @@
+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
+}

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

@@ -4,21 +4,20 @@ import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
-import { Permissions } from '../components/Permissions'
+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 }) => {
-  return (
-    <UserAware>
-      <Permissions />
-      {children}
-    </UserAware>
-  )
-}
+const BaseRoom = ({ children }: { children: ReactNode }) => (
+  <UserAware>
+    <PermissionErrorModal />
+    {children}
+  </UserAware>
+)
 
 export const Room = () => {
   const { isLoggedIn } = useUser()
@@ -31,6 +30,7 @@ export const Room = () => {
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
   useKeyboardShortcuts()
+  usePermissionsSync()
 
   const clearRouterState = () => {
     if (window?.history?.state) {

src/frontend/src/features/rooms/utils/safeParseMetadata.tsx

@@ -0,0 +1,22 @@
+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 {}
+  }
+}

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

@@ -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')} #`
 }

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

@@ -95,6 +95,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
     userChoices: { noiseReductionEnabled },
     saveAudioInputDeviceId,
     saveNoiseReductionEnabled,
+    saveAudioOutputDeviceId,
   } = usePersistentUserChoices()
 
   const isSpeaking = useIsSpeaking(localParticipant)
@@ -183,9 +184,10 @@ 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,

src/frontend/src/hooks/useSyncAfterDelay.ts

@@ -1,30 +0,0 @@
-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
-}

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

@@ -51,9 +51,5 @@
       "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}}"
   }
 }

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

@@ -19,15 +19,10 @@
   },
   "laterMeetingDialog": {
     "heading": "Ihre Zugangsdaten",
-    "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:"
-    }
+    "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."
   },
   "introSlider": {
     "previous": {

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

@@ -9,12 +9,11 @@
   },
   "join": {
     "selectDevice": {
-      "loading": "Laden…",
-      "permissionsNeeded": "Genehmigung erforderlich"
+      "loading": "Lädt…",
+      "permissionNeeded": "Genehmigung erforderlich"
     },
     "videoinput": {
       "choose": "Kamera auswählen",
-      "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich",
       "disable": "Kamera deaktivieren",
       "enable": "Kamera aktivieren",
       "label": "Kamera",
@@ -22,11 +21,13 @@
     },
     "audioinput": {
       "choose": "Mikrofon auswählen",
-      "permissionsNeeded": "Mikrofon auswählen - genehmigung erforderlich",
       "disable": "Mikrofon deaktivieren",
       "enable": "Mikrofon aktivieren",
       "label": "Mikrofon"
     },
+    "audiooutput": {
+      "choose": "Lautsprecher auswählen"
+    },
     "effects": {
       "description": "Effekte anwenden",
       "title": "Effekte",
@@ -42,14 +43,10 @@
     "errors": {
       "usernameEmpty": "Ihr Name darf nicht leer sein"
     },
-    "cameraDisabled": "Kamera ist deaktiviert.",
-    "cameraStarting": "Kamera wird gestartet…",
+    "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?",
-    "permissionsButton": {
-      "cameraAndMicNotGranted": "Zugriff auf Kamera und Mikrofon erlauben",
-      "cameraNotGranted": "Zugriff auf Kamera erlauben"
-    },
     "videoPreview": {
       "enabled": "Videovorschau aktiviert",
       "disabled": "Videovorschau deaktiviert"
@@ -67,18 +64,30 @@
       "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": "Informationen kopieren",
-    "copyUrl": "Link kopieren",
-    "copied": "Informationen kopiert",
+    "copy": "Meeting-Link kopieren",
+    "copyButton": "Link kopieren",
+    "copied": "Link in die Zwischenablage 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.",
-    "phone": {
-      "call": "Rufen Sie an:",
-      "pinCode": "Code:"
-    }
+    "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten."
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -93,30 +102,6 @@
     },
     "close": "OK"
   },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera": "{{appTitle}} darf Ihre Kamera nicht verwenden",
-      "microphone": "{{appTitle}} darf Ihr Mikrofon nicht verwenden",
-      "cameraAndMicrophone": "{{appTitle}} darf weder Ihr Mikrofon noch Ihre Kamera verwenden",
-      "default": "{{appTitle}} hat keine Berechtigung für bestimmte Zugriffe"
-    },
-    "body": {
-      "openMenu": {
-        "others": "Klicken Sie auf das Einstellungen-Symbol ICON_PLACEHOLDER in der Adressleiste Ihres Browsers",
-        "safari": "Klicken Sie auf das Menü 'Safari' und öffnen Sie 'Einstellungen für {{appDomain}}'."
-      },
-      "details": {
-        "camera": "Zugriff auf die Kamera erlauben",
-        "microphone": "Zugriff auf das Mikrofon erlauben",
-        "cameraAndMicrophone": "Zugriff auf Kamera und Mikrofon erlauben",
-        "default": "Aktivieren Sie die erforderlichen Berechtigungen."
-      }
-    }
-  },
-  "permissionsButton": {
-    "tooltip": "Mehr Infos",
-    "ariaLabel": "Berechtigungsproblem. Mehr Infos anzeigen"
-  },
   "error": {
     "createRoom": {
       "heading": "Authentifizierung erforderlich",
@@ -198,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Ihre Kamera ist deaktiviert. Wählen Sie eine Option, um sie zu aktivieren.",
+    "activateCamera": "Kamera ist aus.",
+    "activateButton": "Kamera einschalten",
+    "permissionsCamera": "Bitte erlauben Sie der App den Zugriff auf Ihre Kamera, um fortzufahren.",
+    "permissionsButton": "Kamerazugriff erlauben",
     "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",
@@ -270,9 +258,9 @@
     "roomInformation": {
       "title": "Verbindungsinformationen",
       "button": {
-        "ariaLabel": "Kopieren Sie die Informationen aus Ihrer Besprechung",
-        "copy": "Informationen kopieren",
-        "copied": "Informationen kopiert"
+        "ariaLabel": "Kopiere deine Meeting-Adresse",
+        "copy": "Adresse kopieren",
+        "copied": "Adresse kopiert"
       },
       "phone": {
         "call": "Rufen Sie an:",

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

@@ -51,9 +51,5 @@
       "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}}"
   }
 }

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

@@ -19,15 +19,10 @@
   },
   "laterMeetingDialog": {
     "heading": "Your connection details",
-    "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:"
-    }
+    "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."
   },
   "introSlider": {
     "previous": {

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

@@ -10,11 +10,10 @@
   "join": {
     "selectDevice": {
       "loading": "Loading…",
-      "permissionsNeeded": "Permission needed"
+      "permissionNeeded": "Permission needed"
     },
     "videoinput": {
       "choose": "Select camera",
-      "permissionsNeeded": "Select camera - permission needed",
       "disable": "Disable camera",
       "enable": "Enable camera",
       "label": "Camera",
@@ -22,11 +21,13 @@
     },
     "audioinput": {
       "choose": "Select microphone",
-      "permissionsNeeded": "Select microphone - permission needed",
       "disable": "Disable microphone",
       "enable": "Enable microphone",
       "label": "Microphone"
     },
+    "audiooutput": {
+      "choose": "Select speakers"
+    },
     "effects": {
       "description": "Apply effects",
       "title": "Effects",
@@ -42,14 +43,10 @@
     "errors": {
       "usernameEmpty": "Your name cannot be empty"
     },
-    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting…",
-    "cameraNotGranted": "Would you like others to be able to see you during the meeting?",
-    "cameraAndMicNotGranted": "Would you like others to be able to see and hear you during the meeting?",
-    "permissionsButton": {
-      "cameraAndMicNotGranted": "Allow access to camera and microphone",
-      "cameraNotGranted": "Allow access to camera"
-    },
+    "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"
@@ -67,18 +64,30 @@
       "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 information",
-    "copyUrl": "Copy link",
-    "copied": "Information copied to clipboard",
+    "copy": "Copy the meeting link",
+    "copyButton": "Copy link",
+    "copied": "Link copied to clipboard",
     "heading": "Your meeting is ready",
     "description": "Share this link with people you want to invite to the meeting.",
-    "permissions": "People with this link do not need your permission to join this meeting.",
-    "phone": {
-      "call": "Call:",
-      "pinCode": "Code:"
-    }
+    "permissions": "People with this link do not need your permission to join this meeting."
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -93,30 +102,6 @@
     },
     "close": "OK"
   },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera": "{{appTitle}} is not allowed to use your camera",
-      "microphone": "{{appTitle}} is not allowed to use your microphone",
-      "cameraAndMicrophone": "{{appTitle}} is not allowed to use your microphone or camera",
-      "default": "{{appTitle}} is not allowed to use certain permissions"
-    },
-    "body": {
-      "openMenu": {
-        "others": "Click on the settings icon ICON_PLACEHOLDER in your browser’s address bar",
-        "safari": "Click the 'Safari' menu, and open 'Settings for {{appDomain}}'."
-      },
-      "details": {
-        "camera": "Allow access to the camera",
-        "microphone": "Allow access to the microphone",
-        "cameraAndMicrophone": "Allow access to the camera and microphone",
-        "default": "Enable the necessary permissions."
-      }
-    }
-  },
-  "permissionsButton": {
-    "tooltip": "More info",
-    "ariaLabel": "Permissions issue. Show more info"
-  },
   "error": {
     "createRoom": {
       "heading": "Authentication Required",
@@ -198,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
+    "activateCamera": "Your camera is disabled.",
+    "activateButton": "Turn on camera",
+    "permissionsCamera": "Please allow the app to access your camera to continue.",
+    "permissionsButton": "Allow camera access",
     "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",
@@ -270,9 +258,9 @@
     "roomInformation": {
       "title": "Connection Information",
       "button": {
-        "ariaLabel": "Copy the information from your meeting",
-        "copy": "Copy information",
-        "copied": "Information copied"
+        "ariaLabel": "Copy your meeting address",
+        "copy": "Copy address",
+        "copied": "Address copied"
       },
       "phone": {
         "call": "Call:",

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

@@ -51,9 +51,5 @@
       "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}}"
   }
 }

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

@@ -19,15 +19,10 @@
   },
   "laterMeetingDialog": {
     "heading": "Vos informations de connexion",
-    "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 :"
-    }
+    "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."
   },
   "introSlider": {
     "previous": {

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

@@ -10,11 +10,10 @@
   "join": {
     "selectDevice": {
       "loading": "Chargement…",
-      "permissionsNeeded": "Autorisations nécessaires"
+      "permissionNeeded": "Autorisations nécessaires"
     },
     "videoinput": {
       "choose": "Choisir la webcam",
-      "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
       "disable": "Désactiver la webcam",
       "enable": "Activer la webcam",
       "label": "Webcam",
@@ -22,11 +21,13 @@
     },
     "audioinput": {
       "choose": "Choisir le micro",
-      "permissionsNeeded": "Choisir le micro - autorisations nécessaires",
       "disable": "Désactiver le micro",
       "enable": "Activer le micro",
       "label": "Microphone"
     },
+    "audiooutput": {
+      "choose": "Choisir le haut parleur"
+    },
     "heading": "Rejoindre la réunion ?",
     "effects": {
       "description": "Effets d'arrière plan",
@@ -42,7 +43,7 @@
     "errors": {
       "usernameEmpty": "Votre nom ne peut pas être vide"
     },
-    "cameraDisabled": "La caméra est désactivée.",
+    "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 ?",
@@ -50,10 +51,6 @@
       "enabled": "Apercu vidéo activé",
       "disabled": "Apercu vidéo désactivé"
     },
-    "permissionsButton": {
-      "cameraAndMicNotGranted": "Autorisez l'accès à la caméra et au micro",
-      "cameraNotGranted": "Autorisez l'accès à la caméra"
-    },
     "waiting": {
       "title": "Demande de participation…",
       "body": "Vous pourrez participer à cet appel lorsque quelqu'un vous y autorisera"
@@ -67,18 +64,30 @@
       "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 les informations",
-    "copyUrl": "Copier le lien",
-    "copied": "Copiées dans le presse-papiers",
+    "copy": "Copier le lien de la réunion",
+    "copyButton": "Copier le lien",
+    "copied": "Lien copié dans le presse-papiers",
     "heading": "Votre réunion est prête",
-    "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 :"
-    }
+    "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."
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -93,30 +102,6 @@
     },
     "close": "OK"
   },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera": "{{appTitle}} n'est pas autorisé à utiliser votre caméra",
-      "microphone": "{{appTitle}} n'est pas autorisé à utiliser votre micro",
-      "cameraAndMicrophone": "{{appTitle}} n'est pas autorisé à utiliser votre micro ni votre caméra",
-      "default": "{{appTitle}} n'est pas autorisé à utiliser certaines fonctionnalités nécessaires."
-    },
-    "body": {
-      "openMenu": {
-        "others": "Cliquez sur l'icône des paramètres ICON_PLACEHOLDER dans la barre d'adresse de votre navigateur",
-        "safari": "Cliquez sur le menu \"Safari\", et ouvrez \"Paramètres pour {{appDomain}}\"."
-      },
-      "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",
-        "default": "Activez les autorisations nécessaires."
-      }
-    }
-  },
-  "permissionsButton": {
-    "tooltip": "Plus d'infos",
-    "ariaLabel": "Problème de permissions. Afficher plus d'infos"
-  },
   "error": {
     "createRoom": {
       "heading": "Authentification requise",
@@ -198,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Votre caméra est désactivée. Choisissez une option pour l'activer.",
+    "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",
     "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",
@@ -270,9 +258,9 @@
     "roomInformation": {
       "title": "Informations de connexions",
       "button": {
-        "ariaLabel": "Copier les informations de votre réunion",
-        "copy": "Copier les informations",
-        "copied": "Informations copiées"
+        "ariaLabel": "Copier l'adresse de votre réunion",
+        "copy": "Copier l'adresse",
+        "copied": "Adresse copiée"
       },
       "phone": {
         "call": "Appelez le :",

src/frontend/src/locales/nl/global.json

@@ -50,9 +50,5 @@
       "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}}"
   }
 }

src/frontend/src/locales/nl/home.json

@@ -19,15 +19,10 @@
   },
   "laterMeetingDialog": {
     "heading": "Uw verbindingsgegevens",
-    "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:"
-    }
+    "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."
   },
   "introSlider": {
     "previous": {

src/frontend/src/locales/nl/rooms.json

@@ -9,12 +9,11 @@
   },
   "join": {
     "selectDevice": {
-      "loading": "Bezig met laden…",
+      "loading": "Laden…",
       "permissionNeeded": "Toestemming vereist"
     },
     "videoinput": {
       "choose": "Selecteer camera",
-      "permissionNeeded": "Selecteer camera - Toestemming vereist",
       "disable": "Camera uitschakelen",
       "enable": "Camera inschakelen",
       "label": "Camera",
@@ -22,11 +21,13 @@
     },
     "audioinput": {
       "choose": "Selecteer microfoon",
-      "permissionNeeded": "Selecteer microfoon - Toestemming vereist",
       "disable": "Microfoon dempen",
       "enable": "Microfoon dempen opheffen",
       "label": "Microfoon"
     },
+    "audiooutput": {
+      "choose": "Selecteer luidsprekers"
+    },
     "effects": {
       "description": "Pas effecten toe",
       "title": "Effecten",
@@ -42,14 +43,10 @@
     "errors": {
       "usernameEmpty": "Uw naam kan niet leeg zijn"
     },
-    "cameraDisabled": "Camera is uitgeschakeld.",
-    "cameraStarting": "Camera wordt ingeschakeld…",
-    "cameraNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien?",
-    "cameraAndMicNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien en horen?",
-    "permissionsButton": {
-      "cameraAndMicNotGranted": "Toegang tot camera en microfoon toestaan",
-      "cameraNotGranted": "Toegang tot camera toestaan"
-    },
+    "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"
@@ -67,18 +64,30 @@
       "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": "Informatie kopiëren",
-    "copyUrl": "Kopieerlink",
-    "copied": "Informatie gekopieerd",
+    "copy": "Kopieer de vergaderlink",
+    "copyButton": "Kopieerlink",
+    "copied": "Link gekopieerd naar het klembord",
     "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.",
-    "phone": {
-      "call": "Bel:",
-      "pinCode": "Code:"
-    }
+    "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering."
   },
   "mediaErrorDialog": {
     "DeviceInUse": {
@@ -93,30 +102,6 @@
     },
     "close": "OK"
   },
-  "permissionErrorDialog": {
-    "heading": {
-      "camera": "{{appTitle}} mag uw camera niet gebruiken",
-      "microphone": "{{appTitle}} mag uw microfoon niet gebruiken",
-      "cameraAndMicrophone": "{{appTitle}} mag uw microfoon en camera niet gebruiken",
-      "default": "{{appTitle}} heeft geen toestemming voor bepaalde rechten"
-    },
-    "body": {
-      "openMenu": {
-        "others": "Klik op het instellingenpictogram ICON_PLACEHOLDER in de adresbalk van uw browser",
-        "safari": "Klik op het menu 'Safari' en open 'Instellingen voor {{appDomain}}'."
-      },
-      "details": {
-        "camera": "Toegang tot de camera toestaan",
-        "microphone": "Toegang tot de microfoon toestaan",
-        "cameraAndMicrophone": "Toegang tot camera en microfoon toestaan",
-        "default": "Schakel de vereiste machtigingen in."
-      }
-    }
-  },
-  "permissionsButton": {
-    "tooltip": "Meer info",
-    "ariaLabel": "Probleem met machtigingen. Meer info weergeven"
-  },
   "error": {
     "createRoom": {
       "heading": "Verificatie vereist",
@@ -198,7 +183,10 @@
     }
   },
   "effects": {
-    "activateCamera": "Uw camera is uitgeschakeld. Kies een optie om deze in te schakelen.",
+    "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",
     "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",
@@ -270,9 +258,9 @@
     "roomInformation": {
       "title": "Verbindingsinformatie",
       "button": {
-        "ariaLabel": "Kopieer de informatie van uw vergadering",
-        "copy": "Informatie kopiëren",
-        "copied": "Informatie gekopieerd"
+        "ariaLabel": "Kopieer je vergaderadres",
+        "copy": "Adres kopiëren",
+        "copied": "Adres gekopieerd"
       },
       "phone": {
         "call": "Bel:",

src/frontend/src/primitives/buttonRecipe.ts

@@ -68,7 +68,6 @@ export const buttonRecipe = cva({
       },
       secondaryText: {
         backgroundColor: 'transparent',
-        fontWeight: 'medium !important',
         color: 'primary.800',
         '&[data-hovered]': {
           backgroundColor: 'greyscale.100',
@@ -229,6 +228,20 @@ 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',
@@ -251,20 +264,6 @@ export const buttonRecipe = cva({
           color: 'error.300',
         },
       },
-      errorCircle: {
-        backgroundColor: 'error.500',
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        color: 'white',
-        '&[data-hovered]': {
-          backgroundColor: 'error.600',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'error.700',
-          color: 'error.200',
-        },
-      },
       // @TODO: better handling of colors… this is a mess
       success: {
         colorPalette: 'success',
@@ -284,20 +283,6 @@ export const buttonRecipe = cva({
           color: 'primary !important',
         },
       },
-      permission: {
-        position: 'relative',
-        // background: 'None !important',
-        borderRadius: '100%',
-        // border: 'none !important',
-        color: 'amber.500',
-        width: 'fit-content',
-        height: 'fit-content',
-        padding: '0 !important',
-        margin: '0 !important',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
     },
     invisible: {
       true: {

src/frontend/src/stores/modals.ts

@@ -0,0 +1,9 @@
+import { proxy } from 'valtio'
+
+export type ModalsState = {
+  permissions: boolean
+}
+
+export const modalsStore = proxy<ModalsState>({
+  permissions: false,
+})

src/frontend/src/stores/permissions.ts

@@ -1,61 +1,13 @@
 import { proxy } from 'valtio'
-import { derive } from 'derive-valtio'
 
-type PermissionState =
-  | undefined
-  | 'granted'
-  | 'prompt'
-  | 'denied'
-  | 'unavailable'
+type PermissionState = undefined | 'granted' | 'prompt' | 'denied'
 
-type BaseState = {
+type State = {
   cameraPermission: PermissionState
   microphonePermission: PermissionState
-  isLoading: boolean
-  isPermissionDialogOpen: boolean
 }
 
-type DerivedState = {
-  isCameraGranted: boolean
-  isMicrophoneGranted: boolean
-  isCameraDenied: boolean
-  isMicrophoneDenied: boolean
-  isCameraPrompted: boolean
-  isMicrophonePrompted: boolean
-}
-
-type State = BaseState & DerivedState
-
-export const permissionsStore = proxy<BaseState>({
+export const permissionStore = proxy<State>({
   cameraPermission: undefined,
   microphonePermission: undefined,
-  isLoading: true,
-  isPermissionDialogOpen: false,
-}) as State
-
-derive(
-  {
-    isCameraGranted: (get) =>
-      get(permissionsStore).cameraPermission == 'granted',
-    isMicrophoneGranted: (get) =>
-      get(permissionsStore).microphonePermission == 'granted',
-    isCameraDenied: (get) => get(permissionsStore).cameraPermission == 'denied',
-    isMicrophoneDenied: (get) =>
-      get(permissionsStore).microphonePermission == 'denied',
-    isCameraPrompted: (get) =>
-      get(permissionsStore).cameraPermission == 'prompt',
-    isMicrophonePrompted: (get) =>
-      get(permissionsStore).microphonePermission == 'prompt',
-  },
-  {
-    proxy: permissionsStore,
-  }
-)
-
-export const openPermissionsDialog = () => {
-  permissionsStore.isPermissionDialogOpen = true
-}
-
-export const closePermissionsDialog = () => {
-  permissionsStore.isPermissionDialogOpen = false
-}
+})

src/frontend/src/stores/userChoices.ts

@@ -9,11 +9,13 @@ import {
 export type LocalUserChoices = LocalUserChoicesLK & {
   processorSerialized?: ProcessorSerialized
   noiseReductionEnabled?: boolean
+  audioOutputDeviceId?: string
 }
 
 function getUserChoicesState(): LocalUserChoices {
   return {
     noiseReductionEnabled: false,
+    audioOutputDeviceId: 'default',
     ...loadUserChoices(),
   }
 }

src/frontend/src/utils/translation.ts

@@ -1,14 +0,0 @@
-/**
- * FRAGILE: Splits translated text on placeholder to inject icons inline.
- *
- * Fragile because:
- * - Relies on exact string matching - typos break it silently
- * - Translators may accidentally modify/remove placeholders
- * - No validation or error handling
- */
-export const injectIconIntoTranslation = (
-  translation: string,
-  placeholder: string = 'ICON_PLACEHOLDER'
-) => {
-  return translation.split(placeholder)
-}

src/helm/env.d/dev-dinum/values.meet.yaml.gotmpl

@@ -40,6 +40,9 @@ 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 }}

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -40,6 +40,9 @@ 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 }}
@@ -49,7 +52,6 @@ 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
@@ -69,8 +71,6 @@ 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
 
 

src/helm/env.d/dev/values.meet.yaml.gotmpl

@@ -62,6 +62,9 @@ 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 }}

src/helm/meet/Chart.yaml

@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.10
+version: 0.0.9

src/helm/meet/README.md

@@ -21,7 +21,6 @@
 | `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                       | `[]`                                                               |
@@ -31,7 +30,6 @@
 | `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`                                                            |
@@ -165,7 +163,6 @@
 | `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   | `{}`                      |
@@ -175,7 +172,6 @@
 | `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   | `{}`                      |

src/helm/meet/templates/ingress.yaml

@@ -29,7 +29,7 @@ spec:
   {{- if .Values.ingress.tls.enabled }}
   tls:
     {{- if .Values.ingress.host }}
-    - secretName: {{ .Values.ingress.tls.secretName | default (printf "%s-tls" $fullName) | quote }}
+    - secretName: {{ $fullName }}-tls
       hosts:
         - {{ .Values.ingress.host | quote }}
     {{- end }}

src/helm/meet/templates/ingress_admin.yaml

@@ -30,7 +30,6 @@ 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 }}

src/helm/meet/templates/ingress_posthog.yaml

@@ -29,7 +29,7 @@ spec:
   {{- if .Values.posthog.ingress.tls.enabled }}
   tls:
     {{- if .Values.posthog.ingress.host }}
-    - secretName: {{ .Values.posthog.ingress.tls.secretName | default (printf "%s-posthog-tls" $fullName) | quote }}
+    - secretName: {{ $fullName }}-posthog-tls
       hosts:
         - {{ .Values.posthog.ingress.host | quote }}
     {{- end }}

src/helm/meet/templates/ingress_posthog_assets.yaml

@@ -29,7 +29,7 @@ spec:
   {{- if .Values.posthog.ingressAssets.tls.enabled }}
   tls:
     {{- if .Values.posthog.ingressAssets.host }}
-    - secretName: {{ .Values.posthog.ingressAssets.tls.secretName | default (printf "%s-posthog-tls" $fullName) | quote }}
+    - secretName: {{ $fullName }}-posthog-tls
       hosts:
         - {{ .Values.posthog.ingressAssets.host | quote }}
     {{- end }}

src/helm/meet/values.yaml

@@ -38,12 +38,10 @@ 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: []
 
@@ -64,12 +62,10 @@ 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: []
 
@@ -91,8 +87,8 @@ ingressMedia:
   ## @extra ingressMedia.tls.additional[].secretName Secret name for additional TLS config
   ## @extra ingressMedia.tls.additional[].hosts[] Hosts for additional TLS config
   tls:
-    secretName: null
     enabled: true
+    secretName: null
     additional: []
 
   ## @param ingressMedia.annotations.nginx.ingress.kubernetes.io/auth-url
@@ -362,7 +358,6 @@ 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
@@ -373,7 +368,6 @@ posthog:
     path: /
     hosts: [ ]
     tls:
-      secretName: null
       enabled: true
       additional: [ ]
 
@@ -386,7 +380,6 @@ 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
@@ -397,7 +390,6 @@ posthog:
     path: /static
     hosts: [ ]
     tls:
-      secretName: null
       enabled: true
       additional: [ ]