wip

wip add store and hook to gloablly manage model openness when necessary
✨(frontend) display position of a raised hand in the queue
2025-08-01 17:48:40 +02:00 · 2025-08-01 17:47:42 +02:00 · 2025-08-01 16:54:24 +02:00 · 2025-08-01 16:54:24 +02:00 · 2025-08-01 16:54:24 +02:00 · 2025-08-01 16:53:36 +02:00
30 changed files with 444 additions and 89 deletions
@@ -35,9 +35,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    LIVEKIT_API_SECRET: secret
@@ -217,9 +217,6 @@ DB_NAME: meet
 DB_USER: dinum
 DB_PASSWORD: pass
 DB_PORT: 5432
-POSTGRES_DB: meet
-POSTGRES_USER: dinum
-POSTGRES_PASSWORD: pass
 ```

 ## Deployment
@@ -339,6 +336,8 @@ These are the environmental options available on meet backend.
 | LIVEKIT_API_SECRET                              | LiveKit API secret                                                                                                                                           |                                                                                                                                                               |
 | LIVEKIT_API_URL                                 | LiveKit API URL                                                                                                                                              |                                                                                                                                                               |
 | LIVEKIT_VERIFY_SSL                              | Verify SSL for LiveKit connections                                                                                                                           | true                                                                                                                                                          |
+| LIVEKIT_FORCE_WSS_PROTOCOL                      | Enables WSS protocol conversion for legacy browser compatibility (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs fail in WebSocket() constructor.    | false                                                                                                                                                         |
+| LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND         | Firefox-only connection warmup: pre-calls WebSocket endpoint (expecting 401) to initialize cache, resolving proxy/network connectivity issues.               | false                                                                                                                                                         |
 | RESOURCE_DEFAULT_ACCESS_LEVEL                   | Default resource access level for rooms                                                                                                                      | public                                                                                                                                                        |
 | ALLOW_UNREGISTERED_ROOMS                        | Allow usage of unregistered rooms                                                                                                                            | true                                                                                                                                                          |
 | RECORDING_ENABLE                                | Record meeting option                                                                                                                                        | false                                                                                                                                                         |
@@ -52,6 +52,7 @@ def get_frontend_configuration(request):
        },
        "livekit": {
            "url": settings.LIVEKIT_CONFIGURATION["url"],
+            "force_wss_protocol": settings.LIVEKIT_FORCE_WSS_PROTOCOL,
            "enable_firefox_proxy_workaround": settings.LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND,
        },
    }
@@ -492,6 +492,9 @@ class Base(Configuration):
        ),
        "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
    }
+    LIVEKIT_FORCE_WSS_PROTOCOL = values.BooleanValue(
+        False, environ_name="LIVEKIT_FORCE_WSS_PROTOCOL", environ_prefix=None
+    )
    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND = values.BooleanValue(
        environ_name="LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND",
        environ_prefix=None,
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
+  <defs>
+    <style>
+      .st0, .st1, .st2, .st3, .st4, .st5 {
+        fill: none;
+      }
+
+      .st6 {
+        fill: #6dd58c;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st9, .st10 {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st10 {
+        stroke-width: 3px;
+      }
+
+      .st6, .st1, .st7, .st8, .st4, .st5, .st10 {
+        stroke: #191c1e;
+      }
+
+      .st11, .st7, .st12, .st9 {
+        fill: #fff;
+      }
+
+      .st11, .st3 {
+        stroke: #000;
+        stroke-miterlimit: 10;
+      }
+
+      .st11, .st3, .st9 {
+        stroke-width: 5px;
+      }
+
+      .st2, .st9 {
+        stroke: #898989;
+      }
+
+      .st8 {
+        fill: #ff8669;
+      }
+
+      .st13 {
+        fill: #e3e3fb;
+      }
+
+      .st14 {
+        fill: #f7f7f7;
+      }
+
+      .st4, .st5 {
+        stroke-width: 4px;
+      }
+
+      .st5 {
+        stroke-linecap: square;
+      }
+
+      .st15 {
+        fill: #ca3632;
+      }
+
+      .st10 {
+        fill: #ffb929;
+      }
+    </style>
+  </defs>
+  <rect class="st12" x=".53" y=".53" width="1078.61" height="1080.36"/>
+  <path class="st12" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st1" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st12" d="M960.08,256.93h-110c-12.94,0-23.43-10.49-23.43-23.43v-71.56c0-12.94-10.48-23.43-23.42-23.44h-266.94c-12.94,0-23.43,10.49-23.43,23.44h0v71.56c0,12.94-10.49,23.43-23.43,23.43H120.5v137.62h839.58"/>
+  <path class="st8" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st10" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st6" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st1" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st7" d="M625.31,322.08h-27.15c-4.35,0-7.88,3.53-7.88,7.88h0v17.19c0,4.35,3.53,7.88,7.88,7.88h27.15c4.35,0,7.88-3.53,7.88-7.88h0v-17.19c0-4.35-3.53-7.88-7.88-7.88h0Z"/>
+  <path class="st12" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <path class="st1" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <g>
+    <ellipse class="st4" cx="707.63" cy="299.5" rx="18.37" ry="18.5"/>
+    <path class="st5" d="M624,299h63"/>
+    <circle class="st4" cx="643.5" cy="339.5" r="18.5"/>
+    <path class="st5" d="M728,339h-63"/>
+  </g>
+  <path class="st14" d="M192.29,138.5h767.79v118.43H120.5v-46.64c0-39.62,32.17-71.79,71.79-71.79h0Z"/>
+  <path class="st0" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st15" d="M382.41,636.74l39.92,39.92,13.47-13.47-188.53-188.53-13.47,13.47,11.35,11.35h-5.58c-5.26,0-9.52,4.26-9.52,9.52v133.31c0,5.26,4.26,9.52,9.52,9.52h133.31c5.26,0,9.52-4.26,9.52-9.52v-5.58h.01ZM363.37,617.69v15.1h-114.27v-114.27h15.1l99.17,99.17h0ZM439.55,633.17c0,2.02-1.19,3.6-2.78,4.33l-16.27-16.27v-75.65l-38.09,26.66v10.9l-19.04-19.04v-45.57h-45.57l-19.04-19.04h74.14c5.26,0,9.52,4.26,9.52,9.52v39.99l49.64-34.75c3.16-2.21,7.49.05,7.49,3.9v115.02h0Z"/>
+  <path class="st15" d="M375.25,866.34l43.58,43.58,12.93-12.93-180.97-180.97-12.93,12.93,51.25,51.25v14.49c0,25.24,20.46,45.7,45.7,45.7,4.41,0,8.67-.62,12.7-1.79l14.17,14.17c-8.17,3.79-17.28,5.9-26.87,5.9-32.23,0-58.9-23.84-63.33-54.84h-18.43c4.21,38.13,34.49,68.4,72.62,72.62v37.06h18.28v-37.06c11.28-1.25,21.87-4.77,31.3-10.11h0ZM330.71,821.81c-11.87-1.78-21.25-11.16-23.03-23.03l23.03,23.03ZM402.21,841.85l-13.18-13.18c4.65-7.4,7.82-15.82,9.11-24.84h18.43c-1.55,14.04-6.64,27.02-14.35,38.03h0ZM375.62,815.27l-14.15-14.15c.5-2.06.76-4.21.76-6.43v-36.56c0-15.14-12.28-27.42-27.42-27.42-11.83,0-21.91,7.49-25.76,17.99l-13.68-13.68c7.94-13.52,22.63-22.59,39.44-22.59,25.24,0,45.7,20.46,45.7,45.7v36.56c0,7.4-1.76,14.39-4.88,20.58h-.01Z"/>
+  <path d="M597.6,312.73c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM602.4,301.55c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM619.98,315.93h25.57v-6.39h-25.57v6.39ZM632.76,344.69c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM637.56,333.51c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM594.41,341.5v6.39h25.57v-6.39h-25.57Z"/>
+  <line class="st2" x1="960.08" y1="394.55" x2="836.91" y2="394.55"/>
+  <path class="st9" d="M527.76,394.55H120.5v-137.62h368.93c12.94,0,23.43-10.49,23.43-23.43v-71.56c0-12.95,10.49-23.44,23.43-23.44h266.94c12.94,0,23.43,10.5,23.42,23.44v71.56c0,2.09.27,4.12.79,6.05,1,3.77,2.92,7.17,5.51,9.94,4.28,4.58,10.37,7.44,17.13,7.44h110"/>
+  <path class="st13" d="M645.52,274.8h314.56v101.2h-314.56c-23.81,0-43.12-22.66-43.12-50.61h0c.01-27.94,19.31-50.59,43.12-50.59h0Z"/>
+  <g>
+    <path class="st13" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71h-181.11c-43.65,0-79.03-35.38-79.03-79.03,0-21.82,8.86-41.56,23.16-55.86,14.3-14.29,34.06-23.13,55.87-23.13h179.74c12.93,23.89,20.27,51.24,20.27,80.31Z"/>
+    <path d="M656.78,350.02v9.98h39.93v-9.98h-39.93ZM724.16,337.54c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.46,17.47,17.46,17.47-7.82,17.47-17.46-7.82-17.47-17.47-17.47ZM724.16,362.49c-4.13,0-7.49-3.35-7.49-7.48s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.36,7.48-7.49,7.48ZM696.71,300.11v9.98h39.93v-9.98h-39.93ZM669.26,287.63c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.47,17.47,17.47,17.47-7.82,17.47-17.47-7.82-17.47-17.47-17.47ZM669.26,312.59c-4.13,0-7.49-3.36-7.49-7.49s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.35,7.49-7.49,7.49Z"/>
+  </g>
+  <line class="st2" x1="813.4" y1="432.85" x2="551.26" y2="432.85"/>
+  <path class="st3" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71-5.35,10.32-11.74,20.02-19.02,28.96-30.98,38.03-78.19,62.32-131.07,62.32s-100.09-24.29-131.07-62.32c-23.7-29.09-37.92-66.22-37.92-106.67,0-93.33,75.66-168.99,168.99-168.99,64.26,0,120.15,35.87,148.72,88.68,12.93,23.89,20.27,51.24,20.27,80.31h0Z"/>
+  <polygon class="st11" points="705.12 406.95 681.79 637.91 746.21 597.51 802.28 751.56 852.2 733.39 796.14 579.34 871.46 568.88 705.12 406.95"/>
+</svg>
@@ -39,6 +39,7 @@ export interface ApiConfig {
  manifest_link?: string
  livekit: {
    url: string
+    force_wss_protocol: boolean
    enable_firefox_proxy_workaround: boolean
  }
 }
@@ -18,7 +18,6 @@ import {
  ANIMATION_DURATION,
  ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

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

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

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

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

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

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

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

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

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

+  const isAdaptiveStreamSupported = supportsAdaptiveStream()
+  const isDynacastSupported = supportsDynacast()
+
  const roomOptions = useMemo((): RoomOptions => {
    return {
-      adaptiveStream: true,
-      dynacast: true,
+      adaptiveStream: isAdaptiveStreamSupported,
+      dynacast: isDynacastSupported,
      publishDefaults: {
        videoCodec: 'vp9',
      },
@@ -94,7 +99,12 @@ export const Conference = ({
      },
    }
    // do not rely on the userConfig object directly as its reference may change on every render
-  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
+  }, [
+    userConfig.videoDeviceId,
+    userConfig.audioDeviceId,
+    isAdaptiveStreamSupported,
+    isDynacastSupported,
+  ])

  const room = useMemo(() => new Room(roomOptions), [roomOptions])

@@ -152,6 +162,20 @@ export const Conference = ({
    kind: null,
  })

+  /*
+   * Ensure stable WebSocket connection URL. This is critical for legacy browser compatibility
+   * (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs in WebSocket() constructor
+   *  may fail - the force_wss_protocol flag allows explicit WSS protocol conversion
+   */
+  const serverUrl = useMemo(() => {
+    const livekit_url = apiConfig?.livekit.url
+    if (!livekit_url) return
+    if (apiConfig?.livekit.force_wss_protocol) {
+      return livekit_url.replace('https://', 'wss://')
+    }
+    return livekit_url
+  }, [apiConfig?.livekit])
+
  const { t } = useTranslation('rooms')
  if (isCreateError) {
    // this error screen should be replaced by a proper waiting room for anonymous user.
@@ -175,7 +199,7 @@ export const Conference = ({
      <Screen header={false} footer={false}>
        <LiveKitRoom
          room={room}
-          serverUrl={apiConfig?.livekit.url}
+          serverUrl={serverUrl}
          token={data?.livekit?.token}
          connect={isConnectionWarmedUp}
          audio={userConfig.audioEnabled}
@@ -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>
+  )
+}
@@ -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),
+  }
+}
@@ -2,7 +2,6 @@ import { Participant } from 'livekit-client'
 import { fetchServerApi } from './fetchServerApi'
 import { buildServerApiUrl } from './buildServerApiUrl'
 import { useRoomData } from '../hooks/useRoomData'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'

 export const useLowerHandParticipant = () => {
  const data = useRoomData()
@@ -11,8 +10,12 @@ export const useLowerHandParticipant = () => {
    if (!data || !data?.livekit) {
      throw new Error('Room data is not available')
    }
-    const newMetadata = safeParseMetadata(participant.metadata) || {}
-    newMetadata.raised = !newMetadata.raised
+
+    const newAttributes = {
+      ...participant.attributes,
+      handRaisedAt: '',
+    }
+
    return fetchServerApi(
      buildServerApiUrl(
        data.livekit.url,
@@ -24,7 +27,7 @@ export const useLowerHandParticipant = () => {
        body: JSON.stringify({
          room: data.livekit.room,
          identity: participant.identity,
-          metadata: JSON.stringify(newMetadata),
+          attributes: newAttributes,
          permission: participant.permissions,
        }),
      }
@@ -22,7 +22,7 @@ import {
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
 import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '../hooks/useRaisedHand'
+import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
 import { HStack } from '@/styled-system/jsx'
 import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
@@ -97,6 +97,10 @@ export const ParticipantTile: (
    participant: trackReference.participant,
  })

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

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

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

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

  const { waitingParticipants, handleParticipantEntry } =
    useWaitingParticipants()
@@ -1,23 +1,58 @@
 import { LocalParticipant, Participant } from 'livekit-client'
-import { useParticipantInfo } from '@livekit/components-react'
+import {
+  useParticipantAttribute,
+  useParticipants,
+} from '@livekit/components-react'
 import { isLocal } from '@/utils/livekit'
+import { useMemo } from 'react'

 type useRaisedHandProps = {
  participant: Participant
 }

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

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

-  return { isHandRaised: parsedMetadata.raised ?? false, toggleRaisedHand }
+  return { isHandRaised, toggleRaisedHand }
 }
@@ -1,22 +0,0 @@
-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 {}
-  }
-}
@@ -51,6 +51,22 @@
      "body": "Niemand hat auf Ihre Anfrage reagiert"
    }
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} hat keine Berechtigung, Ihre Kamera zu verwenden",
+      "microphone": "{{app_title}} hat keine Berechtigung, Ihr Mikrofon zu verwenden",
+      "cameraAndMicrophone": "{{app_title}} hat keine Berechtigung, Ihr Mikrofon und Ihre Kamera zu verwenden",
+      "default": "{{app_title}} hat keine Berechtigung für bestimmte Zugriffe"
+    },
+    "body": {
+      "openMenu": "Klicken Sie auf das Einstellungssymbol {{icon_placeholder}} in der Adressleiste Ihres Browsers",
+      "details": {
+        "camera":  "Zugriff auf die Kamera erlauben",
+        "microphone": "Zugriff auf das Mikrofon erlauben",
+        "cameraAndMicrophone": "Zugriff auf Kamera und Mikrofon erlauben"
+      }
+    }
+  },
  "leaveRoomPrompt": "Dadurch verlassen Sie das Meeting.",
  "shareDialog": {
    "copy": "Meeting-Link kopieren",
@@ -51,6 +51,22 @@
      "body": "No one responded to your request"
    }
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} is not allowed to use your camera",
+      "microphone": "{{app_title}} is not allowed to use your microphone",
+      "cameraAndMicrophone": "{{app_title}} is not allowed to use your microphone or camera",
+      "default": "{{app_title}} is not allowed to use certain permissions"
+    },
+    "body": {
+      "openMenu": "Click the settings icon {{icon_placeholder}} in your browser's address bar",
+      "details": {
+        "camera":  "Allow access to the camera",
+        "microphone": "Allow access to the microphone",
+        "cameraAndMicrophone": "Allow access to the camera and microphone"
+      }
+    }
+  },
  "leaveRoomPrompt": "This will make you leave the meeting.",
  "shareDialog": {
    "copy": "Copy the meeting link",
@@ -51,6 +51,22 @@
      "body": "Personne n'a répondu à votre demande de participation à l'appel"
    }
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} n'est pas autorisé à utiliser votre caméra",
+      "microphone": "{{app_title}} n'est pas autorisé à utiliser votre micro",
+      "cameraAndMicrophone": "{{app_title}} n'est pas autorisé à utiliser votre micro ni votre caméra",
+      "default": "{{app_title}} n'est pas autorisé à utiliser certaines permissions"
+    },
+    "body": {
+      "openMenu": "Cliquez sur l'icône des paramètres {{icon_placeholder}} dans la barre d'adresse de votre navigateur",
+      "details": {
+        "camera":  "Autorisez l'accès à la caméra",
+        "microphone": "Autorisez l'accès au microphone",
+        "cameraAndMicrophone": "Autorisez l'accès à la caméra et au microphone"
+      }
+    }
+  },
  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
  "shareDialog": {
    "copy": "Copier le lien de la réunion",
@@ -51,6 +51,22 @@
      "body": "Niemand heeft gereageerd op uw verzoek om deel te nemen aan het gesprek"
    }
  },
+  "permissionErrorDialog": {
+    "heading": {
+      "camera":  "{{app_title}} heeft geen toestemming om je camera te gebruiken",
+      "microphone": "{{app_title}} heeft geen toestemming om je microfoon te gebruiken",
+      "cameraAndMicrophone": "{{app_title}} heeft geen toestemming om je microfoon en camera te gebruiken",
+      "default": "{{app_title}} heeft geen toestemming voor bepaalde rechten"
+    },
+    "body": {
+      "openMenu": "Klik op het instellingenpictogram {{icon_placeholder}} in de adresbalk van je browser",
+      "details": {
+        "camera":  "Sta toegang tot de camera toe",
+        "microphone": "Sta toegang tot de microfoon toe",
+        "cameraAndMicrophone": "Sta toegang tot de camera en microfoon toe"
+      }
+    }
+  },
  "leaveRoomPrompt": "Dat zal u de vergadering doen verlaten.",
  "shareDialog": {
    "copy": "Kopieer de vergaderlink",
@@ -0,0 +1,9 @@
+import { proxy } from 'valtio'
+
+export type ModalsState = {
+  permissions: boolean
+}
+
+export const modalsStore = proxy<ModalsState>({
+  permissions: false,
+})
@@ -40,9 +40,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    {{- with .Values.livekit.keys }}
@@ -40,9 +40,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    {{- with .Values.livekit.keys }}
@@ -52,6 +49,7 @@ backend:
    {{- end }}
    {{- end }}
    LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
+    LIVEKIT_FORCE_WSS_PROTOCOL: True
    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND: True
    ALLOW_UNREGISTERED_ROOMS: False
    FRONTEND_SILENCE_LIVEKIT_DEBUG: False
@@ -62,9 +62,6 @@ backend:
    DB_USER: dinum
    DB_PASSWORD: pass
    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
    REDIS_URL: redis://default:pass@redis-master:6379/1
    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
    {{- with .Values.livekit.keys }}
@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.9
+version: 0.0.10
@@ -21,6 +21,7 @@
 | `ingress.path`                                                               | Path to use for the Ingress                          | `/`                                                                |
 | `ingress.hosts`                                                              | Additional host to configure for the Ingress         | `[]`                                                               |
 | `ingress.tls.enabled`                                                        | Weather to enable TLS for the Ingress                | `true`                                                             |
+| `ingress.tls.secretName`                                                     | Secret name for TLS config                           | `nil`                                                              |
 | `ingress.tls.additional[].secretName`                                        | Secret name for additional TLS config                |                                                                    |
 | `ingress.tls.additional[].hosts[]`                                           | Hosts for additional TLS config                      |                                                                    |
 | `ingress.customBackends`                                                     | Add custom backends to ingress                       | `[]`                                                               |
@@ -30,6 +31,7 @@
 | `ingressAdmin.path`                                                          | Path to use for the Ingress                          | `/admin`                                                           |
 | `ingressAdmin.hosts`                                                         | Additional host to configure for the Ingress         | `[]`                                                               |
 | `ingressAdmin.tls.enabled`                                                   | Weather to enable TLS for the Ingress                | `true`                                                             |
+| `ingressAdmin.tls.secretName`                                                | Secret name for TLS config                           | `nil`                                                              |
 | `ingressAdmin.tls.additional[].secretName`                                   | Secret name for additional TLS config                |                                                                    |
 | `ingressAdmin.tls.additional[].hosts[]`                                      | Hosts for additional TLS config                      |                                                                    |
 | `ingressMedia.enabled`                                                       | whether to enable the Ingress or not                 | `false`                                                            |
@@ -163,6 +165,7 @@
 | `posthog.ingress.path`                 | URL path prefix for the ingress routes (e.g., /)            | `/`                       |
 | `posthog.ingress.hosts`                | Additional hostnames array to be included in the ingress    | `[]`                      |
 | `posthog.ingress.tls.enabled`          | Enable or disable TLS/HTTPS for the ingress                 | `true`                    |
+| `posthog.ingress.tls.secretName`       | Secret name for TLS config                                  | `nil`                     |
 | `posthog.ingress.tls.additional`       | Additional TLS configurations for extra hosts/certificates  | `[]`                      |
 | `posthog.ingress.customBackends`       | Custom backend service configurations for the ingress       | `[]`                      |
 | `posthog.ingress.annotations`          | Additional Kubernetes annotations to apply to the ingress   | `{}`                      |
@@ -172,6 +175,7 @@
 | `posthog.ingressAssets.path`           | URL path prefix for the ingress routes (e.g., /)            | `/static`                 |
 | `posthog.ingressAssets.hosts`          | Additional hostnames array to be included in the ingress    | `[]`                      |
 | `posthog.ingressAssets.tls.enabled`    | Enable or disable TLS/HTTPS for the ingress                 | `true`                    |
+| `posthog.ingressAssets.tls.secretName` | Secret name for TLS config                                  | `nil`                     |
 | `posthog.ingressAssets.tls.additional` | Additional TLS configurations for extra hosts/certificates  | `[]`                      |
 | `posthog.ingressAssets.customBackends` | Custom backend service configurations for the ingress       | `[]`                      |
 | `posthog.ingressAssets.annotations`    | Additional Kubernetes annotations to apply to the ingress   | `{}`                      |
@@ -29,7 +29,7 @@ spec:
  {{- if .Values.ingress.tls.enabled }}
  tls:
    {{- if .Values.ingress.host }}
-    - secretName: {{ $fullName }}-tls
+    - secretName: {{ .Values.ingress.tls.secretName | default (printf "%s-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.ingress.host | quote }}
    {{- end }}
@@ -30,6 +30,7 @@ spec:
  tls:
    {{- if .Values.ingressAdmin.host }}
    - secretName: {{ $fullName }}-tls
+    - secretName: {{ .Values.ingressAdmin.tls.secretName | default (printf "%s-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.ingressAdmin.host | quote }}
    {{- end }}
@@ -29,7 +29,7 @@ spec:
  {{- if .Values.posthog.ingress.tls.enabled }}
  tls:
    {{- if .Values.posthog.ingress.host }}
-    - secretName: {{ $fullName }}-posthog-tls
+    - secretName: {{ .Values.posthog.ingress.tls.secretName | default (printf "%s-posthog-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.posthog.ingress.host | quote }}
    {{- end }}
@@ -29,7 +29,7 @@ spec:
  {{- if .Values.posthog.ingressAssets.tls.enabled }}
  tls:
    {{- if .Values.posthog.ingressAssets.host }}
-    - secretName: {{ $fullName }}-posthog-tls
+    - secretName: {{ .Values.posthog.ingressAssets.tls.secretName | default (printf "%s-posthog-tls" $fullName) | quote }}
      hosts:
        - {{ .Values.posthog.ingressAssets.host | quote }}
    {{- end }}
@@ -38,10 +38,12 @@ ingress:
  hosts: []
  #  - chart-example.local
  ## @param ingress.tls.enabled Weather to enable TLS for the Ingress
+  ## @param ingress.tls.secretName Secret name for TLS config
  ## @skip ingress.tls.additional
  ## @extra ingress.tls.additional[].secretName Secret name for additional TLS config
  ## @extra ingress.tls.additional[].hosts[] Hosts for additional TLS config
  tls:
+    secretName: null
    enabled: true
    additional: []

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

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

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

@@ -380,6 +386,7 @@ posthog:
  ## @param posthog.ingressAssets.path URL path prefix for the ingress routes (e.g., /)
  ## @param posthog.ingressAssets.hosts Additional hostnames array to be included in the ingress
  ## @param posthog.ingressAssets.tls.enabled Enable or disable TLS/HTTPS for the ingress
+  ## @param posthog.ingressAssets.tls.secretName Secret name for TLS config
  ## @param posthog.ingressAssets.tls.additional Additional TLS configurations for extra hosts/certificates
  ## @param posthog.ingressAssets.customBackends Custom backend service configurations for the ingress
  ## @param posthog.ingressAssets.annotations Additional Kubernetes annotations to apply to the ingress
@@ -390,6 +397,7 @@ posthog:
    path: /static
    hosts: [ ]
    tls:
+      secretName: null
      enabled: true
      additional: [ ]
Author	SHA1	Message	Date
lebaudantoine	309333d1ba	wip	2025-08-01 17:48:40 +02:00
lebaudantoine	9384b31e20	wip add store and hook to gloablly manage model openness when necessary	2025-08-01 17:47:42 +02:00
lebaudantoine	965d823d08	✨(frontend) display position of a raised hand in the queue Users requested an enhanced visual indicator for raised hands on the participant tile. Most major video conferencing platforms display the position of a raised hand in the queue. This helps hosts quickly see who is requesting to speak, and in what order, without needing to open the full participant list. While a minor feature, this improvement is especially valuable for power user	2025-08-01 16:54:24 +02:00
lebaudantoine	1db189ace2	🚸(frontend) sort raised hand by order of arrival Previously, the participant list was sorted alphabetically by name. This unintentionally affected the raised hands list, which inherited the same sorting behavior. Users requested that raised hands be sorted by order of arrival. This simple change improves the UX by ensuring that raised hands are displayed in the correct order.	2025-08-01 16:54:24 +02:00
lebaudantoine	199e0908e9	♻️(frontend) refactor raised hand to rely on participant's attributes Previously managed participant hand raised using raw metadata. LiveKit introduced attributes concept, saves as metadata under hood but makes update/handling easier. Still pain that attributes must be strings, cannot pass boolean… Refactor whole app to use attributes instead of metadata for the raised hand feature. This commit might introduce regressions. I've double checked participant list side pannel and the notification features. Previously I persisted a boolean, I now persist the timestamp at which the hand was raised. This will be useful in upcoming commits, especially for sorting raised hands by order of arrival.	2025-08-01 16:54:24 +02:00
Jacques ROUSSEL	8518f83211	✨(helm) add the ability to configure tls secretName Yesterday during a deployment, we were unable to configure the tls secretName for ingress.	2025-08-01 16:53:36 +02:00
lebaudantoine	0240d85837	📝(backend) add Firefox proxy workaround parameter to installation guide Document LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND setting that enables connection warmup by pre-calling WebSocket endpoint to resolve proxy connectivity issues.	2025-08-01 16:23:22 +02:00
lebaudantoine	162896c93c	🩹(backend) allow enforcing WSS protocol to resolve browser compatibility The LiveKit API URL is necessary to interact with the API. It uses https protocol. Eplicit wss protocol is necessary in Websocket constructor for some older browsers. This resolves critical compatibility issues with legacy browsers (notably Firefox <124, Chrome <125, Edge <125) that lack support for HTTPS URLs in the WebSocket() constructor. Without explicit WSS URLs, WebSocket signaling connections may fail, crash, or be blocked entirely in these environments. The setting is optional and defaults to the current behavior when not specified, ensuring zero breaking changes for existing deployments.	2025-08-01 16:23:22 +02:00
Jacques ROUSSEL	483a219ac4	♻️(documentation) remove unused environment variables Yesterday during a deployment, we discovered that these variables are unused: POSTGRES_DB POSTGRES_USER POSTGRES_PASSWORD	2025-08-01 16:14:55 +02:00
lebaudantoine	1b26dea178	🐛(frontend) use feature detection for adaptiveStream and dynacast Replace hardcoded true values with supportsAdaptiveStream() and supportsDynacast() checks. LiveKit SDK supports broad browser range but requires specific APIs - modern features need explicit compatibility checks. Prevents enabling unsupported WebRTC features on incompatible browsers, which could led to a poor user experience. One alternative solution could be to install polyfills.	2025-08-01 15:46:17 +02:00