📦️(frontend) vendor GridLayout to use react-hook useSize

Replace livekit's modern-only useSize hook with react-hook implementation
that includes polyfill support for older browsers. Will update remaining
layout components in subsequent commits.

Also, it now enables us to fix the pagination controls.

src/backend/core/services/lobby.py

@@ -212,7 +212,7 @@ class LobbyService:
 
         try:
             utils.notify_participants(
-                room_name=room_id,
+                room_name=str(room_id),
                 notification_data={
                     "type": settings.LOBBY_NOTIFICATION_TYPE,
                 },

src/backend/core/tests/services/test_lobby.py

@@ -442,7 +442,7 @@ def test_enter_success(
         timeout=settings.LOBBY_WAITING_TIMEOUT,
     )
     mock_notify.assert_called_once_with(
-        room_name=room.id, notification_data={"type": "participantWaiting"}
+        room_name=str(room.id), notification_data={"type": "participantWaiting"}
     )
 
 

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.29"
+version = "0.1.30"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/frontend/package-lock.json

@@ -1,18 +1,19 @@
 {
   "name": "meet",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.29",
+      "version": "0.1.30",
       "dependencies": {
         "@livekit/components-react": "2.9.13",
         "@livekit/components-styles": "1.1.6",
         "@livekit/track-processors": "0.5.7",
         "@pandacss/preset-panda": "0.54.0",
         "@react-aria/toast": "3.0.5",
+        "@react-hook/size": "2.1.2",
         "@remixicon/react": "4.6.0",
         "@tanstack/react-query": "5.81.5",
         "@timephy/rnnoise-wasm": "1.0.0",
@@ -1210,6 +1211,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@livekit/components-core": {
       "version": "0.12.8",
       "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.12.8.tgz",
@@ -2701,6 +2708,51 @@
         "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
+    "node_modules/@react-hook/latest": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
+      "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/passive-layout-effect": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
+      "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/resize-observer": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz",
+      "integrity": "sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1",
+        "@react-hook/latest": "^1.0.2",
+        "@react-hook/passive-layout-effect": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/size": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@react-hook/size/-/size-2.1.2.tgz",
+      "integrity": "sha512-BmE5asyRDxSuQ9p14FUKJ0iBRgV9cROjqNG9jT/EjCM+xHha1HVqbPoT+14FQg1K7xIydabClCibUY4+1tw/iw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-hook/passive-layout-effect": "^1.2.0",
+        "@react-hook/resize-observer": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/@react-stately/autocomplete": {
       "version": "3.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/@react-stately/autocomplete/-/autocomplete-3.0.0-beta.2.tgz",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.29",
+  "version": "0.1.30",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -18,6 +18,7 @@
     "@livekit/track-processors": "0.5.7",
     "@pandacss/preset-panda": "0.54.0",
     "@react-aria/toast": "3.0.5",
+    "@react-hook/size": "2.1.2",
     "@remixicon/react": "4.6.0",
     "@tanstack/react-query": "5.81.5",
     "@timephy/rnnoise-wasm": "1.0.0",

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

@@ -7,6 +7,8 @@ import {
   MediaDeviceFailure,
   Room,
   RoomOptions,
+  supportsAdaptiveStream,
+  supportsDynacast,
 } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -74,8 +76,8 @@ export const Conference = ({
 
   const roomOptions = useMemo((): RoomOptions => {
     return {
-      adaptiveStream: true,
-      dynacast: true,
+      adaptiveStream: supportsAdaptiveStream(),
+      dynacast: supportsDynacast(),
       publishDefaults: {
         videoCodec: 'vp9',
       },

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

@@ -4,9 +4,9 @@ import { useMemo, useRef } from 'react'
 import { ScreenSharePreferenceStore } from '@/stores/ScreenSharePreferences'
 import { useSnapshot } from 'valtio'
 import { useLocalParticipant } from '@livekit/components-react'
-import { useSize } from '../hooks/useResizeObserver'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { useTranslation } from 'react-i18next'
+import useSize from '@react-hook/size'
 
 export const FullScreenShareWarning = ({
   trackReference,
@@ -16,7 +16,7 @@ export const FullScreenShareWarning = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'fullScreenWarning' })
 
   const warningContainerRef = useRef<HTMLDivElement>(null)
-  const { width: containerWidth } = useSize(warningContainerRef)
+  const containerWidth = useSize(warningContainerRef)[0]
   const { localParticipant } = useLocalParticipant()
   const screenSharePreferences = useSnapshot(ScreenSharePreferenceStore)
 

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

@@ -3,8 +3,8 @@ import { styled } from '@/styled-system/jsx'
 import { Avatar } from '@/components/Avatar'
 import { useIsSpeaking } from '@livekit/components-react'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useMemo, useRef } from 'react'
+import useSize from '@react-hook/size'
 
 const StyledParticipantPlaceHolder = styled('div', {
   base: {
@@ -28,7 +28,7 @@ export const ParticipantPlaceholder = ({
   const participantColor = getParticipantColor(participant)
 
   const placeholderEl = useRef<HTMLDivElement>(null)
-  const { width, height } = useSize(placeholderEl)
+  const [width, height] = useSize(placeholderEl)
 
   const minDimension = Math.min(width, height)
   const avatarSize = useMemo(

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

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { createInteractingObservable } from '@livekit/components-core'
+import { usePagination } from '@livekit/components-react'
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
+
+export interface PaginationControlProps
+  extends Pick<
+    ReturnType<typeof usePagination>,
+    'totalPageCount' | 'nextPage' | 'prevPage' | 'currentPage'
+  > {
+  /** Reference to an HTML element that holds the pages, while interacting (`mouseover`)
+   *  with it, the pagination controls will appear for a while. */
+  pagesContainer?: React.RefObject<HTMLElement>
+}
+
+export function PaginationControl({
+  totalPageCount,
+  nextPage,
+  prevPage,
+  currentPage,
+  pagesContainer: connectedElement,
+}: PaginationControlProps) {
+  const [interactive, setInteractive] = React.useState(false)
+  React.useEffect(() => {
+    let subscription:
+      | ReturnType<ReturnType<typeof createInteractingObservable>['subscribe']>
+      | undefined
+    if (connectedElement) {
+      subscription = createInteractingObservable(
+        connectedElement.current,
+        2000
+      ).subscribe(setInteractive)
+    }
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe()
+      }
+    }
+  }, [connectedElement])
+
+  return (
+    <div
+      className="lk-pagination-control"
+      data-lk-user-interaction={interactive}
+    >
+      <button className="lk-button" onClick={prevPage}>
+        <RiArrowLeftSLine />
+      </button>
+      <span className="lk-pagination-count">{`${currentPage} of ${totalPageCount}`}</span>
+      <button className="lk-button" onClick={nextPage}>
+        <RiArrowRightSLine />
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+export interface PaginationIndicatorProps {
+  totalPageCount: number
+  currentPage: number
+}
+
+export const PaginationIndicator: (
+  props: PaginationIndicatorProps & React.RefAttributes<HTMLDivElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  PaginationIndicatorProps
+>(function PaginationIndicator(
+  { totalPageCount, currentPage }: PaginationIndicatorProps,
+  ref
+) {
+  const bubbles = new Array(totalPageCount).fill('').map((_, index) => {
+    if (index + 1 === currentPage) {
+      return <span data-lk-active key={index} />
+    } else {
+      return <span key={index} />
+    }
+  })
+
+  return (
+    <div ref={ref} className="lk-pagination-indicator">
+      {bubbles}
+    </div>
+  )
+})

src/frontend/src/features/rooms/livekit/components/layout/CarouselLayout.tsx

@@ -0,0 +1,92 @@
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { getScrollBarWidth } from '@livekit/components-core'
+import * as React from 'react'
+import { TrackLoop, useVisualStableUpdate } from '@livekit/components-react'
+import useSize from '@react-hook/size'
+
+const MIN_HEIGHT = 130
+const MIN_WIDTH = 140
+const MIN_VISIBLE_TILES = 1
+const ASPECT_RATIO = 16 / 10
+const ASPECT_RATIO_INVERT = (1 - ASPECT_RATIO) * -1
+
+/** @public */
+export interface CarouselLayoutProps
+  extends React.HTMLAttributes<HTMLMediaElement> {
+  tracks: TrackReferenceOrPlaceholder[]
+  children: React.ReactNode
+  /** Place the tiles vertically or horizontally next to each other.
+   * If undefined orientation is guessed by the dimensions of the container. */
+  orientation?: 'vertical' | 'horizontal'
+}
+
+/**
+ * The `CarouselLayout` component displays a list of tracks in a scroll container.
+ * It will display as many tiles as possible and overflow the rest.
+ * @remarks
+ * To ensure visual stability when tiles are reordered due to track updates,
+ * the component uses the `useVisualStableUpdate` hook.
+ * @example
+ * ```tsx
+ * const tracks = useTracks([Track.Source.Camera]);
+ * <CarouselLayout tracks={tracks}>
+ *   <ParticipantTile />
+ * </CarouselLayout>
+ * ```
+ * @public
+ */
+export function CarouselLayout({
+  tracks,
+  orientation,
+  ...props
+}: CarouselLayoutProps) {
+  const asideEl = React.useRef<HTMLDivElement>(null)
+  const [prevTiles, setPrevTiles] = React.useState(0)
+  const [width, height] = useSize(asideEl)
+  const carouselOrientation = orientation
+    ? orientation
+    : height >= width
+      ? 'vertical'
+      : 'horizontal'
+
+  const tileSpan =
+    carouselOrientation === 'vertical'
+      ? Math.max(width * ASPECT_RATIO_INVERT, MIN_HEIGHT)
+      : Math.max(height * ASPECT_RATIO, MIN_WIDTH)
+  const scrollBarWidth = getScrollBarWidth()
+
+  const tilesThatFit =
+    carouselOrientation === 'vertical'
+      ? Math.max((height - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
+      : Math.max((width - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
+
+  let maxVisibleTiles = Math.round(tilesThatFit)
+  if (Math.abs(tilesThatFit - prevTiles) < 0.5) {
+    maxVisibleTiles = Math.round(prevTiles)
+  } else if (prevTiles !== tilesThatFit) {
+    setPrevTiles(tilesThatFit)
+  }
+
+  const sortedTiles = useVisualStableUpdate(tracks, maxVisibleTiles)
+
+  React.useLayoutEffect(() => {
+    if (asideEl.current) {
+      asideEl.current.dataset.lkOrientation = carouselOrientation
+      asideEl.current.style.setProperty(
+        '--lk-max-visible-tiles',
+        maxVisibleTiles.toString()
+      )
+    }
+  }, [maxVisibleTiles, carouselOrientation])
+
+  return (
+    <aside
+      key={carouselOrientation}
+      className="lk-carousel"
+      ref={asideEl}
+      {...props}
+    >
+      <TrackLoop tracks={sortedTiles}>{props.children}</TrackLoop>
+    </aside>
+  )
+}

src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import {
+  TrackLoop,
+  usePagination,
+  UseParticipantsOptions,
+  useSwipe,
+} from '@livekit/components-react'
+import { mergeProps } from '@/utils/mergeProps'
+import { PaginationIndicator } from '../controls/PaginationIndicator'
+import { useGridLayout } from '../../hooks/useGridLayout'
+import { PaginationControl } from '../controls/PaginationControl'
+
+/** @public */
+export interface GridLayoutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<UseParticipantsOptions, 'updateOnlyOn'> {
+  children: React.ReactNode
+  tracks: TrackReferenceOrPlaceholder[]
+}
+
+/**
+ * The `GridLayout` component displays the nested participants in a grid where every participants has the same size.
+ * It also supports pagination if there are more participants than the grid can display.
+ * @remarks
+ * To ensure visual stability when tiles are reordered due to track updates,
+ * the component uses the `useVisualStableUpdate` hook.
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <GridLayout tracks={tracks}>
+ *     <ParticipantTile />
+ *   </GridLayout>
+ * <LiveKitRoom>
+ * ```
+ * @public
+ */
+export function GridLayout({ tracks, ...props }: GridLayoutProps) {
+  const gridEl = React.createRef<HTMLDivElement>()
+
+  const elementProps = React.useMemo(
+    () => mergeProps(props, { className: 'lk-grid-layout' }),
+    [props]
+  )
+  const { layout } = useGridLayout(gridEl, tracks.length)
+  const pagination = usePagination(layout.maxTiles, tracks)
+
+  useSwipe(gridEl, {
+    onLeftSwipe: pagination.nextPage,
+    onRightSwipe: pagination.prevPage,
+  })
+
+  return (
+    <div
+      ref={gridEl}
+      data-lk-pagination={pagination.totalPageCount > 1}
+      {...elementProps}
+    >
+      <TrackLoop tracks={pagination.tracks}>{props.children}</TrackLoop>
+      {tracks.length > layout.maxTiles && (
+        <>
+          <PaginationIndicator
+            totalPageCount={pagination.totalPageCount}
+            currentPage={pagination.currentPage}
+          />
+          <PaginationControl pagesContainer={gridEl} {...pagination} />
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+import { GRID_LAYOUTS, selectGridLayout } from '@livekit/components-core'
+import type {
+  GridLayoutDefinition,
+  GridLayoutInfo,
+} from '@livekit/components-core'
+import * as React from 'react'
+import useSize from '@react-hook/size'
+
+/**
+ * The `useGridLayout` hook tries to select the best layout to fit all tiles.
+ * If the available screen space is not enough, it will reduce the number of maximum visible
+ * tiles and select a layout that still works visually within the given limitations.
+ * As the order of tiles changes over time, the hook tries to keep visual updates to a minimum
+ * while trying to display important tiles such as speaking participants or screen shares.
+ *
+ * @example
+ * ```tsx
+ * const { layout } = useGridLayout(gridElement, trackCount);
+ * ```
+ * @public
+ */
+export function useGridLayout(
+  /** HTML element that contains the grid. */
+  gridElement: React.RefObject<HTMLDivElement>,
+  /** Count of tracks that should get layed out */
+  trackCount: number,
+  options: {
+    gridLayouts?: GridLayoutDefinition[]
+  } = {}
+): { layout: GridLayoutInfo; containerWidth: number; containerHeight: number } {
+  const gridLayouts = options.gridLayouts ?? GRID_LAYOUTS
+  const [width, height] = useSize(gridElement)
+  const layout = selectGridLayout(gridLayouts, trackCount, width, height)
+
+  React.useEffect(() => {
+    if (gridElement.current && layout) {
+      gridElement.current.style.setProperty(
+        '--lk-col-count',
+        layout?.columns.toString()
+      )
+      gridElement.current.style.setProperty(
+        '--lk-row-count',
+        layout?.rows.toString()
+      )
+    }
+  }, [gridElement, layout])
+
+  return {
+    layout,
+    containerWidth: width,
+    containerHeight: height,
+  }
+}

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

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

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

@@ -4,13 +4,13 @@ import { ParticipantsToggle } from '../../components/controls/Participants/Parti
 import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { InfoToggle } from '../../components/controls/InfoToggle'
 import { AdminToggle } from '../../components/AdminToggle'
-import { useSize } from '../../hooks/useResizeObserver'
 import { useState, RefObject } from 'react'
 import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
 import { Button } from '@/primitives'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import useSize from '@react-hook/size'
 
 const CONTROL_BAR_BREAKPOINT = 1100
 
@@ -70,7 +70,7 @@ export const MoreOptions = ({
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const { width: parentWidth } = useSize(parentElement)
+  const parentWidth = useSize(parentElement)[0]
   return (
     <div
       className={css({

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

@@ -9,7 +9,6 @@ import { RoomEvent, Track } from 'livekit-client'
 import * as React from 'react'
 import { useState } from 'react'
 import {
-  CarouselLayout,
   ConnectionStateToast,
   FocusLayoutContainer,
   GridLayout,
@@ -32,6 +31,7 @@ import { RecordingStateToast } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
+import { CarouselLayout } from '../components/layout/CarouselLayout'
 
 const LayoutWrapper = styled(
   'div',

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

@@ -10,6 +10,10 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
   const { user, isLoggedIn, logout } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
   return (
     <Dialog title={t('dialog.heading')} {...props}>
       <H lvl={2}>{t('account.heading')}</H>
@@ -18,7 +22,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
           <P>
             <Trans
               i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name ?? user?.email }}
+              values={{ user: userDisplay }}
               components={[<Badge />]}
             />
           </P>

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

@@ -14,8 +14,8 @@ import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
 import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useRef } from 'react'
+import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -51,8 +51,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   const { t } = useTranslation('settings')
 
   const dialogEl = useRef<HTMLDivElement>(null)
-  const { width } = useSize(dialogEl)
-  const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel
+  const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel
 
   return (
     <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">

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

@@ -18,6 +18,10 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
   const room = useRoomContext()
   const { user, isLoggedIn, logout } = useUser()
   const [name, setName] = useState(room?.localParticipant.name ?? '')
+  const userDisplay =
+    user?.full_name && user?.email
+      ? `${user.full_name} (${user.email})`
+      : user?.email
 
   const handleOnSubmit = () => {
     if (room) room.localParticipant.setName(name)
@@ -37,7 +41,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
         value={name}
         onChange={setName}
         validate={(value) => {
-          return !value ? <p>{'Votre Nom ne peut pas être vide'}</p> : null
+          return !value ? <p>{t('account.nameError')}</p> : null
         }}
       />
       <H lvl={2}>{t('account.authentication')}</H>
@@ -46,7 +50,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
           <P>
             <Trans
               i18nKey="settings:account.currentlyLoggedAs"
-              values={{ user: user?.full_name || user?.email }}
+              values={{ user: userDisplay }}
               components={[<Badge />]}
             />
           </P>

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

@@ -1,4 +1,4 @@
-import { DialogProps, Field, H, Switch } from '@/primitives'
+import { DialogProps, Field, H, Switch, Text } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -174,7 +174,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
       </RowWrapper>
       {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
         To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
-      {!isSafari() && (
+      {!isSafari() ? (
         <RowWrapper heading={t('audio.speakers.heading')}>
           <Field
             type="select"
@@ -193,6 +193,13 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           />
           <SoundTester />
         </RowWrapper>
+      ) : (
+        <RowWrapper heading={t('audio.speakers.heading')}>
+          <Text variant="warning" margin="md">
+            {t('audio.speakers.safariWarning')}
+          </Text>
+          <div />
+        </RowWrapper>
       )}
       {noiseReductionAvailable && (
         <RowWrapper heading={t('audio.noiseReduction.heading')} beta>

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

@@ -7,7 +7,7 @@ export const initializeSupportSession = (user: ApiUser) => {
   if (!Crisp.isCrispInjected()) return
   const { id, email } = user
   Crisp.setTokenId(`meet-${id}`)
-  Crisp.user.setEmail(email)
+  if (email) Crisp.user.setEmail(email)
 }
 
 export const terminateSupportSession = () => {

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

@@ -4,7 +4,8 @@
     "heading": "Konto",
     "youAreNotLoggedIn": "Sie sind nicht angemeldet.",
     "nameLabel": "Ihr Name",
-    "authentication": "Authentifizierung"
+    "authentication": "Authentifizierung",
+    "nameError": "Ihr Name darf nicht leer sein"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Lautsprecher",
       "label": "Wählen Sie Ihre Audioausgabe",
       "test": "Testen",
-      "ongoingTest": "Soundtest läuft…"
+      "ongoingTest": "Soundtest läuft…",
+      "safariWarning": "Die Lautsprecherauswahl ist auf Safari aufgrund von Browser-Einschränkungen noch nicht verfügbar."
     },
     "permissionsRequired": "Berechtigungen erforderlich"
   },

src/frontend/src/locales/en/settings.json

@@ -4,7 +4,8 @@
     "heading": "Account",
     "youAreNotLoggedIn": "You are not logged in.",
     "nameLabel": "Your Name",
-    "authentication": "Authentication"
+    "authentication": "Authentication",
+    "nameError": "Your name cannot be empty"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Speakers",
       "label": "Select your audio output",
       "test": "Test",
-      "ongoingTest": "Testing sound…"
+      "ongoingTest": "Testing sound…",
+      "safariWarning": "Speaker selection is not available yet on Safari due to browser limitations."
     },
     "permissionsRequired": "Permissions required"
   },

src/frontend/src/locales/fr/settings.json

@@ -4,7 +4,8 @@
     "heading": "Compte",
     "youAreNotLoggedIn": "Vous n'êtes pas connecté.",
     "nameLabel": "Votre Nom",
-    "authentication": "Authentification"
+    "authentication": "Authentification",
+    "nameError": "Votre Nom ne peut pas être vide"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Haut-parleurs",
       "label": "Sélectionner votre sortie audio",
       "test": "Tester",
-      "ongoingTest": "Test du son…"
+      "ongoingTest": "Test du son…",
+      "safariWarning": "La sélection du haut-parleur n'est pas encore disponible sur Safari en raison de limitations du navigateur."
     },
     "permissionsRequired": "Autorisations nécessaires"
   },

src/frontend/src/locales/nl/settings.json

@@ -4,7 +4,8 @@
     "heading": "Account",
     "youAreNotLoggedIn": "U bent niet ingelogd.",
     "nameLabel": "Uw naam",
-    "authentication": "Authenticatie"
+    "authentication": "Authenticatie",
+    "nameError": "Uw naam mag niet leeg zijn"
   },
   "audio": {
     "microphone": {
@@ -24,7 +25,8 @@
       "heading": "Luidsprekers",
       "label": "Selecteer uw audio-uitvoer",
       "test": "Test",
-      "ongoingTest": "Testgeluid ..."
+      "ongoingTest": "Testgeluid ...",
+      "safariWarning": "Luidsprekerselectie is nog niet beschikbaar op Safari vanwege browserbeperkingen."
     },
     "permissionsRequired": "Machtigingen vereist"
   },

src/frontend/src/primitives/Text.tsx

@@ -53,6 +53,9 @@ export const text = cva({
       note: {
         color: 'default.subtle-text',
       },
+      warning: {
+        color: 'danger.subtle-text',
+      },
       smNote: {
         color: 'default.subtle-text',
         textStyle: 'sm',

src/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "0.1.29",
+      "version": "0.1.30",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.5.4",

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {

src/sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sdk",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "0.1.29",
+      "version": "0.1.30",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "author": "",
   "license": "ISC",
   "description": "",

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "0.1.29"
+version = "0.1.30"
 dependencies = [
     "fastapi[standard]>=0.105.0",
     "uvicorn>=0.24.0",

src/summary/summary/core/analytics.py

@@ -107,12 +107,13 @@ class MetadataManager:
             "retries": 0,
         }
 
-        _required_args_count = 4
+        _required_args_count = 7
         if len(task_args) != _required_args_count:
             logger.error("Invalid number of arguments.")
             return
 
-        filename, email, _, received_at = task_args
+        filename, email, _, received_at, *_ = task_args
+
         initial_metadata = {
             **initial_metadata,
             "filename": filename,

src/summary/summary/core/celery_config.py

@@ -0,0 +1,12 @@
+"""Celery Config."""
+
+# https://github.com/danihodovic/celery-exporter
+# Enable task events for Prometheus monitoring via celery-exporter.
+
+# worker_send_task_events: Sends task lifecycle events (e.g., started, succeeded),
+# allowing the exporter to track task execution metrics and durations.
+worker_send_task_events = True
+
+# task_send_sent_event: Sends an event when a task is dispatched to the broker,
+# enabling full lifecycle tracking from submission to completion (including queue time).
+task_send_sent_event = True

src/summary/summary/core/celery_worker.py

@@ -37,6 +37,8 @@ celery = Celery(
     broker_connection_retry_on_startup=True,
 )
 
+celery.config_from_object("summary.core.celery_config")
+
 if settings.sentry_dsn and settings.sentry_is_enabled:
 
     @signals.celeryd_init.connect