🔖(patch) bump release to 0.1.12

Release a fix while calling Docs backend API.

Makefile

@@ -305,3 +305,6 @@ start-tilt: ## start the kubernetes cluster using kind
 	tilt up -f ./bin/Tiltfile
 .PHONY: build-k8s-cluster
 
+start-tilt-keycloak: ## start the kubernetes cluster using kind, without Pro Connect for authentication, use keycloak
+	DEV_ENV=dev-keycloak tilt up -f ./bin/Tiltfile
+.PHONY: build-k8s-cluster

README.md

@@ -118,6 +118,8 @@ $ make build-k8s-cluster
 Once the Kubernetes cluster is ready, start the application stack locally:
 ```shell
 $ make start-tilt
+or
+$ make start-tilt-keycloak # start stack without Pro Connect, use keycloak
 ```
 These commands set up and run your application environment using Tilt for local Kubernetes development.
 

bin/Tiltfile

@@ -38,7 +38,7 @@ docker_build(
     ]
 )
 
-k8s_yaml(local('cd ../src/helm && helmfile -n meet -e dev template .'))
+k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))
 
 migration = '''
 set -eu

src/backend/meet/settings.py

@@ -508,6 +508,7 @@ class Base(Configuration):
             scope = sentry_sdk.get_global_scope()
             scope.set_tag("application", "backend")
 
+
 class Build(Base):
     """Settings used when the application is built.
 

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.10"
+version = "0.1.12"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -48,7 +48,7 @@ dependencies = [
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
     "psycopg[binary]==3.2.3",
-    "PyJWT==2.10.0",
+    "PyJWT==2.10.1",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
     "sentry-sdk==2.19.2",

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.10",
+      "version": "0.1.12",
       "dependencies": {
         "@livekit/components-react": "2.6.9",
         "@livekit/components-styles": "1.1.4",
@@ -7702,9 +7702,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",

src/frontend/src/components/FeedbackBanner.tsx

@@ -2,9 +2,7 @@ import { css } from '@/styled-system/css'
 import { RiErrorWarningLine, RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Text, A } from '@/primitives'
-
-const GRIST_FORM =
-  'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4'
+import { GRIST_FORM } from '@/utils/constants'
 
 export const FeedbackBanner = () => {
   const { t } = useTranslation()

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

@@ -5,8 +5,12 @@ import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
 import { chatStore } from '@/stores/chat'
 import { useSidePanel } from '../../hooks/useSidePanel'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ChatToggle = () => {
+export const ChatToggle = ({
+  onPress,
+  ...props
+}: Partial<ToggleButtonProps>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
   const chatSnap = useSnapshot(chatStore)
@@ -27,8 +31,12 @@ export const ChatToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
-        onPress={() => toggleChat()}
+        onPress={(e) => {
+          toggleChat()
+          onPress?.(e)
+        }}
         data-attr={`controls-chat-${tooltipLabel}`}
+        {...props}
       >
         <RiChat1Line />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -1,16 +1,11 @@
 import { useTranslation } from 'react-i18next'
 import { RiMore2Line } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
-
-import { useState } from 'react'
 import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
-import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
-
-export type DialogState = 'username' | 'settings' | null
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
-  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
+
   return (
     <>
       <Menu>
@@ -22,12 +17,8 @@ export const OptionsButton = () => {
         >
           <RiMore2Line />
         </Button>
-        <OptionsMenuItems onOpenDialog={setDialogOpen} />
+        <OptionsMenuItems />
       </Menu>
-      <SettingsDialogExtended
-        isOpen={dialogOpen === 'settings'}
-        onOpenChange={(v) => !v && setDialogOpen(null)}
-      />
     </>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -5,20 +5,17 @@ import {
 } from '@remixicon/react'
 import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
-import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { useSettingsDialog } from '../SettingsDialogContext'
+import { GRIST_FORM } from '@/utils/constants'
 
 // @todo try refactoring it to use MenuList component
-export const OptionsMenuItems = ({
-  onOpenDialog,
-}: {
-  onOpenDialog: Dispatch<SetStateAction<DialogState>>
-}) => {
+export const OptionsMenuItems = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
   return (
     <RACMenu
       style={{
@@ -38,7 +35,7 @@ export const OptionsMenuItems = ({
       <Separator />
       <Section>
         <MenuItem
-          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+          href={GRIST_FORM}
           target="_blank"
           className={menuRecipe({ icon: true }).item}
         >
@@ -47,7 +44,7 @@ export const OptionsMenuItems = ({
         </MenuItem>
         <MenuItem
           className={menuRecipe({ icon: true }).item}
-          onAction={() => onOpenDialog('settings')}
+          onAction={() => setDialogOpen(true)}
         >
           <RiSettings3Line size={20} />
           {t('settings')}

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

@@ -4,8 +4,12 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ParticipantsToggle = () => {
+export const ParticipantsToggle = ({
+  onPress,
+  ...props
+}: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
 
   /**
@@ -33,8 +37,12 @@ export const ParticipantsToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isParticipantsOpen}
-        onPress={() => toggleParticipants()}
+        onPress={(e) => {
+          toggleParticipants()
+          onPress?.(e)
+        }}
         data-attr={`controls-participants-${tooltipLabel}`}
+        {...props}
       >
         <RiGroupLine />
       </ToggleButton>

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

@@ -4,13 +4,21 @@ import { useTranslation } from 'react-i18next'
 import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Track } from 'livekit-client'
 import React from 'react'
+import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ScreenShareToggle = (
-  props: Omit<
-    UseTrackToggleProps<Track.Source.ScreenShare>,
-    'source' | 'captureOptions'
-  >
-) => {
+type Props = Omit<
+  UseTrackToggleProps<Track.Source.ScreenShare>,
+  'source' | 'captureOptions'
+> &
+  Pick<NonNullable<ButtonRecipeProps>, 'variant'> &
+  ToggleButtonProps
+
+export const ScreenShareToggle = ({
+  variant = 'primaryDark',
+  onPress,
+  ...props
+}: Props) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' })
   const { buttonProps, enabled } = useTrackToggle({
     ...props,
@@ -26,18 +34,16 @@ export const ScreenShareToggle = (
     <ToggleButton
       isSelected={enabled}
       square
-      variant="primaryDark"
+      variant={variant}
       tooltip={t(tooltipLabel)}
-      onPress={(e) =>
+      onPress={(e) => {
         buttonProps.onClick?.(
           e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>
         )
-      }
-      style={{
-        maxWidth: '46px',
-        maxHeight: '46px',
+        onPress?.(e)
       }}
       data-attr={`controls-screenshare-${tooltipLabel}`}
+      {...props}
     >
       <Div position="relative">
         <RiRectangleLine size={28} />

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

@@ -0,0 +1,36 @@
+import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
+import React, { createContext, useContext, useState } from 'react'
+
+const SettingsDialogContext = createContext<
+  | {
+      dialogOpen: boolean
+      setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>
+    }
+  | undefined
+>(undefined)
+
+export const SettingsDialogProvider: React.FC<{
+  children: React.ReactNode
+}> = ({ children }) => {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  return (
+    <SettingsDialogContext.Provider value={{ dialogOpen, setDialogOpen }}>
+      {children}
+      <SettingsDialogExtended
+        isOpen={dialogOpen}
+        onOpenChange={(v) => !v && setDialogOpen(false)}
+      />
+    </SettingsDialogContext.Provider>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useSettingsDialog = () => {
+  const context = useContext(SettingsDialogContext)
+  if (!context) {
+    throw new Error(
+      'useSettingsDialog must be used within a SettingsDialogProvider'
+    )
+  }
+  return context
+}

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

@@ -3,8 +3,9 @@ import { RiQuestionLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const SupportToggle = () => {
+export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
   const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
 
@@ -32,8 +33,16 @@ export const SupportToggle = () => {
       tooltip={t('support')}
       aria-label={t('support')}
       isSelected={isOpened}
-      onPress={() => (isOpened ? Crisp.chat.close() : Crisp.chat.open())}
+      onPress={(e) => {
+        if (isOpened) {
+          Crisp.chat.close()
+        } else {
+          Crisp.chat.open()
+        }
+        onPress?.(e)
+      }}
       data-attr="controls-support"
+      {...props}
     >
       <RiQuestionLine />
     </ToggleButton>

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

@@ -4,8 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { useHasTranscriptAccess } from '../../hooks/useHasTranscriptAccess'
 import { css } from '@/styled-system/css'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const TranscriptToggle = () => {
+export const TranscriptToggle = ({
+  variant = 'primaryDark',
+  onPress,
+  ...props
+}: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
 
   const { isTranscriptOpen, toggleTranscript } = useSidePanel()
@@ -24,11 +29,15 @@ export const TranscriptToggle = () => {
     >
       <ToggleButton
         square
-        variant="primaryTextDark"
+        variant={variant}
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isTranscriptOpen}
-        onPress={() => toggleTranscript()}
+        onPress={(e) => {
+          toggleTranscript()
+          onPress?.(e)
+        }}
+        {...props}
       >
         <RiBardLine />
       </ToggleButton>

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

@@ -1,166 +0,0 @@
-import { Track } from 'livekit-client'
-import * as React from 'react'
-
-import { supportsScreenSharing } from '@livekit/components-core'
-
-import { usePersistentUserChoices } from '@livekit/components-react'
-
-import { StartMediaButton } from '../components/controls/StartMediaButton'
-import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '../components/controls/ChatToggle'
-import { HandToggle } from '../components/controls/HandToggle'
-import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
-import { LeaveButton } from '../components/controls/LeaveButton'
-import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
-import { SupportToggle } from '../components/controls/SupportToggle'
-import { TranscriptToggle } from '../components/controls/TranscriptToggle'
-
-import { css } from '@/styled-system/css'
-
-/** @public */
-export type ControlBarControls = {
-  microphone?: boolean
-  camera?: boolean
-  chat?: boolean
-  screenShare?: boolean
-  leave?: boolean
-  settings?: boolean
-}
-
-/** @public */
-export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
-  variation?: 'minimal' | 'verbose' | 'textOnly'
-  controls?: ControlBarControls
-  /**
-   * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
-   * @defaultValue true
-   * @alpha
-   */
-  saveUserChoices?: boolean
-}
-
-/**
- * The `ControlBar` prefab gives the user the basic user interface to control their
- * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
- *
- * @remarks
- * This component is build with other LiveKit components like `TrackToggle`,
- * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <ControlBar />
- * </LiveKitRoom>
- * ```
- * @public
- */
-export function ControlBar({
-  saveUserChoices = true,
-  onDeviceError,
-}: ControlBarProps) {
-  const browserSupportsScreenSharing = supportsScreenSharing()
-
-  const {
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
-
-  const microphoneOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
-    [saveAudioInputEnabled]
-  )
-
-  const cameraOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
-    [saveVideoInputEnabled]
-  )
-
-  return (
-    <div
-      className={css({
-        width: '100vw',
-        display: 'flex',
-        position: 'absolute',
-        padding: '1.125rem',
-        bottom: 0,
-        left: 0,
-        right: 0,
-      })}
-    >
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'flex-start',
-          flex: '1 1 33%',
-          alignItems: 'center',
-          gap: '0.5rem',
-          marginLeft: '0.5rem',
-        })}
-      ></div>
-      <div
-        className={css({
-          flex: '1 1 33%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          display: 'flex',
-          gap: '0.65rem',
-        })}
-      >
-        <SelectToggleDevice
-          source={Track.Source.Microphone}
-          onChange={microphoneOnChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.Microphone, error })
-          }
-          onActiveDeviceChange={(deviceId) =>
-            saveAudioInputDeviceId(deviceId ?? '')
-          }
-        />
-        <SelectToggleDevice
-          source={Track.Source.Camera}
-          onChange={cameraOnChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.Camera, error })
-          }
-          onActiveDeviceChange={(deviceId) =>
-            saveVideoInputDeviceId(deviceId ?? '')
-          }
-        />
-        {browserSupportsScreenSharing && (
-          <ScreenShareToggle
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.ScreenShare, error })
-            }
-          />
-        )}
-        <HandToggle />
-        <OptionsButton />
-        <LeaveButton />
-        <StartMediaButton />
-      </div>
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'flex-end',
-          flex: '1 1 33%',
-          alignItems: 'center',
-          gap: '0.5rem',
-          paddingRight: '0.25rem',
-        })}
-      >
-        <ChatToggle />
-        <ParticipantsToggle />
-        <TranscriptToggle />
-        <SupportToggle />
-      </div>
-    </div>
-  )
-}

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

@@ -0,0 +1,103 @@
+import { Track } from 'livekit-client'
+import * as React from 'react'
+import { usePersistentUserChoices } from '@livekit/components-react'
+
+import { MobileControlBar } from './MobileControlBar'
+import { DesktopControlBar } from './DesktopControlBar'
+import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
+import { useIsMobile } from '@/utils/useIsMobile'
+
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean
+  camera?: boolean
+  chat?: boolean
+  screenShare?: boolean
+  leave?: boolean
+  settings?: boolean
+}
+
+/** @public */
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
+  variation?: 'minimal' | 'verbose' | 'textOnly'
+  controls?: ControlBarControls
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enable the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean
+}
+
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function ControlBar({
+  saveUserChoices = true,
+  onDeviceError,
+}: ControlBarProps) {
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  const barProps = {
+    onDeviceError,
+    microphoneOnChange,
+    cameraOnChange,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  }
+
+  const isMobile = useIsMobile()
+
+  return (
+    <SettingsDialogProvider>
+      {isMobile ? (
+        <MobileControlBar {...barProps} />
+      ) : (
+        <DesktopControlBar {...barProps} />
+      )}
+    </SettingsDialogProvider>
+  )
+}
+
+export interface ControlBarAuxProps {
+  onDeviceError: ControlBarProps['onDeviceError']
+  microphoneOnChange: (
+    enabled: boolean,
+    isUserInitiated: boolean
+  ) => void | null
+  cameraOnChange: (enabled: boolean, isUserInitiated: boolean) => void | null
+  saveAudioInputDeviceId: (deviceId: string) => void
+  saveVideoInputDeviceId: (deviceId: string) => void
+}

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

@@ -0,0 +1,106 @@
+import { supportsScreenSharing } from '@livekit/components-core'
+import { ControlBarAuxProps } from './ControlBar'
+import { css } from '@/styled-system/css'
+import { LeaveButton } from '../../components/controls/LeaveButton'
+import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
+import { Track } from 'livekit-client'
+import { HandToggle } from '../../components/controls/HandToggle'
+import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
+import { OptionsButton } from '../../components/controls/Options/OptionsButton'
+import { StartMediaButton } from '../../components/controls/StartMediaButton'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+
+export function DesktopControlBar({
+  onDeviceError,
+  microphoneOnChange,
+  cameraOnChange,
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+}: ControlBarAuxProps) {
+  const browserSupportsScreenSharing = supportsScreenSharing()
+  return (
+    <>
+      <div
+        className={css({
+          width: '100vw',
+          display: 'flex',
+          position: 'absolute',
+          padding: '1.125rem',
+          bottom: 0,
+          left: 0,
+          right: 0,
+        })}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-start',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            marginLeft: '0.5rem',
+          })}
+        ></div>
+        <div
+          className={css({
+            flex: '1 1 33%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            gap: '0.65rem',
+          })}
+        >
+          <SelectToggleDevice
+            source={Track.Source.Microphone}
+            onChange={microphoneOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Microphone, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+          <SelectToggleDevice
+            source={Track.Source.Camera}
+            onChange={cameraOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Camera, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+          {browserSupportsScreenSharing && (
+            <ScreenShareToggle
+              onDeviceError={(error) =>
+                onDeviceError?.({ source: Track.Source.ScreenShare, error })
+              }
+            />
+          )}
+          <HandToggle />
+          <OptionsButton />
+          <LeaveButton />
+          <StartMediaButton />
+        </div>
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            paddingRight: '0.25rem',
+          })}
+        >
+          <ChatToggle />
+          <ParticipantsToggle />
+          <TranscriptToggle />
+          <SupportToggle />
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,182 @@
+import { supportsScreenSharing } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+import { ControlBarAuxProps } from './ControlBar'
+import React from 'react'
+import { css } from '@/styled-system/css'
+import { LeaveButton } from '../../components/controls/LeaveButton'
+import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
+import { Track } from 'livekit-client'
+import { HandToggle } from '../../components/controls/HandToggle'
+import { Button } from '@/primitives/Button'
+import {
+  RiAccountBoxLine,
+  RiMegaphoneLine,
+  RiMore2Line,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { LinkButton } from '@/primitives'
+import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
+import { ResponsiveMenu } from './ResponsiveMenu'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+
+export function MobileControlBar({
+  onDeviceError,
+  microphoneOnChange,
+  cameraOnChange,
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+}: ControlBarAuxProps) {
+  const { t } = useTranslation('rooms')
+  const [isMenuOpened, setIsMenuOpened] = React.useState(false)
+  const browserSupportsScreenSharing = supportsScreenSharing()
+  const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
+
+  return (
+    <>
+      <div
+        className={css({
+          width: '100vw',
+          display: 'flex',
+          position: 'absolute',
+          padding: '1.125rem',
+          justifyContent: 'center',
+          bottom: 0,
+          left: 0,
+          right: 0,
+        })}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '422px',
+          })}
+        >
+          <LeaveButton />
+          <SelectToggleDevice
+            source={Track.Source.Microphone}
+            onChange={microphoneOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Microphone, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+          <SelectToggleDevice
+            source={Track.Source.Camera}
+            onChange={cameraOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Camera, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+          <HandToggle />
+          <Button
+            square
+            variant="primaryDark"
+            aria-label={t('options.buttonLabel')}
+            tooltip={t('options.buttonLabel')}
+            onPress={() => setIsMenuOpened(true)}
+          >
+            <RiMore2Line />
+          </Button>
+        </div>
+      </div>
+      <ResponsiveMenu
+        isOpened={isMenuOpened}
+        onClosed={() => setIsMenuOpened(false)}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'center',
+          })}
+        >
+          <div
+            className={css({
+              flexGrow: 1,
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+              gridGap: '1rem',
+              '& > *': {
+                alignSelf: 'center',
+                justifySelf: 'center',
+              },
+            })}
+          >
+            {browserSupportsScreenSharing && (
+              <ScreenShareToggle
+                onDeviceError={(error) =>
+                  onDeviceError?.({ source: Track.Source.ScreenShare, error })
+                }
+                variant="primaryTextDark"
+                description={true}
+                onPress={() => setIsMenuOpened(false)}
+              />
+            )}
+            <ChatToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <ParticipantsToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <TranscriptToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <SupportToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <Button
+              onPress={() => {
+                toggleEffects()
+                setIsMenuOpened(false)
+              }}
+              variant="primaryTextDark"
+              aria-label={t('options.items.effects')}
+              tooltip={t('options.items.effects')}
+              description={true}
+            >
+              <RiAccountBoxLine size={20} />
+            </Button>
+            <LinkButton
+              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+              variant="primaryTextDark"
+              tooltip={t('options.items.feedbacks')}
+              aria-label={t('options.items.feedbacks')}
+              description={true}
+              target="_blank"
+              onPress={() => setIsMenuOpened(false)}
+            >
+              <RiMegaphoneLine size={20} />
+            </LinkButton>
+            <Button
+              onPress={() => {
+                setDialogOpen(true)
+                setIsMenuOpened(false)
+              }}
+              variant="primaryTextDark"
+              aria-label={t('options.items.settings')}
+              tooltip={t('options.items.settings')}
+              description={true}
+            >
+              <RiSettings3Line size={20} />
+            </Button>
+          </div>
+        </div>
+      </ResponsiveMenu>
+    </>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { css } from '@/styled-system/css'
+import { PropsWithChildren } from 'react'
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
+
+interface ResponsiveMenuProps extends PropsWithChildren {
+  isOpened: boolean
+  onClosed: () => void
+}
+
+export function ResponsiveMenu({
+  isOpened,
+  onClosed,
+  children,
+}: ResponsiveMenuProps) {
+  return (
+    <ModalOverlay
+      isDismissable
+      isOpen={isOpened}
+      onOpenChange={(isOpened) => {
+        if (!isOpened) {
+          onClosed()
+        }
+      }}
+      className={css({
+        width: '100vw',
+        height: 'var(--visual-viewport-height)',
+        zIndex: 100,
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        display: 'flex',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        padding: '1.5rem 1.5rem 1rem 1.5rem',
+        boxSizing: 'border-box',
+      })}
+    >
+      <Modal
+        className={css({
+          backgroundColor: 'primaryDark.200',
+          borderRadius: '20px',
+          flexGrow: 1,
+          padding: '1.5rem',
+          '&[data-entering]': {
+            animation: 'slide-full 200ms',
+          },
+          '&[data-exiting]': {
+            animation: 'slide-full 200ms reverse',
+          },
+        })}
+      >
+        <Dialog>{children}</Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}

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

@@ -20,7 +20,7 @@ import {
   useCreateLayoutContext,
 } from '@livekit/components-react'
 
-import { ControlBar } from './ControlBar'
+import { ControlBar } from './ControlBar/ControlBar'
 import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
 import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'

src/frontend/src/primitives/Button.tsx

@@ -5,10 +5,14 @@ import {
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const Button = ({
   tooltip,
@@ -22,7 +26,10 @@ export const Button = ({
       <RACButton
         className={buttonRecipe(variantProps)}
         {...(componentProps as RACButtonsProps)}
-      />
+      >
+        {componentProps.children as ReactNode}
+        {props.description && <span>{tooltip}</span>}
+      </RACButton>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/LinkButton.tsx

@@ -2,10 +2,14 @@ import { Link, LinkProps } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   LinkProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const LinkButton = ({
   tooltip,
@@ -16,7 +20,12 @@ export const LinkButton = ({
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <Link className={buttonRecipe(variantProps)} {...componentProps} />
+      <Link className={buttonRecipe(variantProps)} {...componentProps}>
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </Link>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/ToggleButton.tsx

@@ -1,9 +1,17 @@
 import {
   ToggleButton as RACToggleButton,
-  ToggleButtonProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
+
+export type ToggleButtonProps = RACToggleButtonProps &
+  ButtonRecipeProps &
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
@@ -12,14 +20,20 @@ export const ToggleButton = ({
   tooltip,
   tooltipType,
   ...props
-}: ToggleButtonProps & ButtonRecipeProps & TooltipWrapperProps) => {
+}: ToggleButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
         className={buttonRecipe(variantProps)}
-      />
+      >
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </RACToggleButton>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,9 +1,5 @@
 import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
-export type ButtonRecipe = typeof buttonRecipe
-
-export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
-
 export const buttonRecipe = cva({
   base: {
     display: 'flex',
@@ -222,6 +218,16 @@ export const buttonRecipe = cva({
     shySelected: {
       true: {},
     },
+    description: {
+      true: {
+        flexDirection: 'column',
+        gap: '0.5rem',
+        '& span': {
+          fontSize: '13px',
+          textAlign: 'center',
+        },
+      },
+    },
     // if the button is next to other ones to make a "button group", tell where the button is to handle radius
     groupPosition: {
       left: {
@@ -255,3 +261,7 @@ export const buttonRecipe = cva({
     variant: 'primary',
   },
 })
+
+export type ButtonRecipe = typeof buttonRecipe
+
+export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>

src/frontend/src/styles/index.css

@@ -29,3 +29,12 @@ body,
 body:has(.lk-video-conference) #crisp-chatbox > div > a {
   display: none !important;
 }
+
+@keyframes slide-full {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

src/frontend/src/utils/constants.ts

@@ -0,0 +1,2 @@
+export const GRIST_FORM =
+  'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4' as const

src/frontend/src/utils/useIsMobile.ts

@@ -0,0 +1,20 @@
+import { isMobileBrowser } from '@livekit/components-core'
+import { useEffect, useState } from 'react'
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(isMobileBrowser())
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(isMobileBrowser())
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return isMobile
+}

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

@@ -0,0 +1,43 @@
+replicaCount: 1
+terminationGracePeriodSeconds: 18000
+
+egress:
+  log_level: debug
+  ws_url: ws://livekit-livekit-server:80
+  insecure: true
+  enable_chrome_sandbox: true
+  {{- with .Values.livekit.keys }}
+  {{- range $key, $value := . }}
+  api_key: {{ $key }}
+  api_secret: {{ $value }}
+  {{- end }}
+  {{- end }}
+  redis:
+    address: redis-master:6379
+    password: pass
+  s3:
+    access_key: meet
+    secret: password
+    region: local
+    bucket: meet-media-storage
+    endpoint: http://minio:9000
+    force_path_style: true
+
+loadBalancer:
+  type: nginx
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /
+    nginx.ingress.kubernetes.io/ssl-redirect: "true"
+    cert-manager.io/cluster-issuer: "letsencrypt-prod"
+  tls:
+    - hosts:
+        - livekit-egress.127.0.0.1.nip.io
+      secretName: livekit-egress-dinum-cert
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 5
+
+nodeSelector: {}
+resources: {}

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

@@ -0,0 +1,40 @@
+replicaCount: 1
+terminationGracePeriodSeconds: 18000
+
+livekit:
+  log_level: debug
+  rtc:
+    use_external_ip: false
+    port_range_start: 50000
+    port_range_end: 60000
+    tcp_port: 7881
+  redis:
+    address: redis-master:6379
+    password: pass
+  keys:
+  turn:
+    enabled: true
+    udp_port: 443
+    domain: livekit.127.0.0.1.nip.io
+    loadBalancerAnnotations: {}
+
+
+loadBalancer:
+  type: nginx
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /
+    nginx.ingress.kubernetes.io/ssl-redirect: "true"
+    cert-manager.io/cluster-issuer: "letsencrypt-prod"
+  tls:
+    - hosts:
+        - livekit.127.0.0.1.nip.io
+      secretName: livekit-dinum-cert
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 5
+  targetCPUUtilizationPercentage: 60
+
+nodeSelector: {}
+resources: {}

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

@@ -0,0 +1,188 @@
+image:
+  repository: localhost:5001/meet-backend
+  pullPolicy: Always
+  tag: "latest"
+
+backend:
+  replicas: 1
+  envVars:
+    DJANGO_CSRF_TRUSTED_ORIGINS: https://meet.127.0.0.1.nip.io,http://meet.127.0.0.1.nip.io
+    DJANGO_CONFIGURATION: Production
+    DJANGO_ALLOWED_HOSTS: meet.127.0.0.1.nip.io
+    DJANGO_SECRET_KEY: {{ .Values.djangoSecretKey }}
+    DJANGO_SETTINGS_MODULE: meet.settings
+    DJANGO_SILENCED_SYSTEM_CHECKS: security.W004, security.W008
+    DJANGO_SUPERUSER_PASSWORD: admin
+    DJANGO_EMAIL_HOST: "mailcatcher"
+    DJANGO_EMAIL_PORT: 1025
+    DJANGO_EMAIL_USE_SSL: False
+    OIDC_OP_JWKS_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/certs
+    OIDC_OP_AUTHORIZATION_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/auth
+    OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/token
+    OIDC_OP_USER_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/userinfo
+    OIDC_OP_LOGOUT_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/session/end
+    OIDC_RP_CLIENT_ID:
+      secretKeyRef:
+        name: backend
+        key: OIDC_RP_CLIENT_ID
+    OIDC_RP_CLIENT_SECRET:
+      secretKeyRef:
+        name: backend
+        key: OIDC_RP_CLIENT_SECRET
+    OIDC_RP_SIGN_ALGO: RS256
+    OIDC_RP_SCOPES: "openid email"
+    OIDC_REDIRECT_ALLOWED_HOSTS: https://meet.127.0.0.1.nip.io
+    OIDC_AUTH_REQUEST_EXTRA_PARAMS: "{'acr_values': 'eidas1'}"
+    OIDC_VERIFY_SSL: False
+    LOGIN_REDIRECT_URL: https://meet.127.0.0.1.nip.io
+    LOGIN_REDIRECT_URL_FAILURE: https://meet.127.0.0.1.nip.io
+    LOGOUT_REDIRECT_URL: https://meet.127.0.0.1.nip.io
+    DB_HOST: postgres-postgresql
+    DB_NAME: meet
+    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 }}
+    {{- range $key, $value := . }}
+    LIVEKIT_API_SECRET: {{ $value }}
+    LIVEKIT_API_KEY: {{ $key }}
+    {{- end }}
+    {{- end }}
+    LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
+    ALLOW_UNREGISTERED_ROOMS: False
+    FRONTEND_SILENCE_LIVEKIT_DEBUG: False
+    FRONTEND_SUPPORT: "{'id': '58ea6697-8eba-4492-bc59-ad6562585041'}"
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_REGION_NAME: local
+    RECORDING_ENABLE: True
+    RECORDING_VERIFY_SSL: False
+    RECORDING_STORAGE_EVENT_ENABLE: True
+    RECORDING_STORAGE_EVENT_TOKEN: password
+    SUMMARY_SERVICE_ENDPOINT: http://meet-summary:80/api/v1/tasks/
+    SUMMARY_SERVICE_API_TOKEN: password
+
+
+  migrate:
+    command:
+      - "/bin/sh"
+      - "-c"
+      - |
+        python manage.py migrate --no-input &&
+        python manage.py create_demo --force
+    restartPolicy: Never
+
+  command:
+    - "gunicorn"
+    - "-c"
+    - "/usr/local/etc/gunicorn/meet.py"
+    - "meet.wsgi:application"
+    - "--reload"
+
+  createsuperuser:
+    command:
+      - "/bin/sh"
+      - "-c"
+      - |
+        python manage.py createsuperuser --email admin@example.com --password admin
+    restartPolicy: Never
+
+frontend:
+  envVars:
+    VITE_PORT: 8080
+    VITE_HOST: 0.0.0.0
+    VITE_API_BASE_URL: https://meet.127.0.0.1.nip.io/
+
+  replicas: 1
+
+  image:
+    repository: localhost:5001/meet-frontend
+    pullPolicy: Always
+    tag: "latest"
+
+ingress:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
+ingressAdmin:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
+posthog:
+  ingress:
+    enabled: false
+
+  ingressAssets:
+    enabled: false
+
+summary:
+  replicas: 1
+  envVars:
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    OPENAI_API_KEY: password
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    AWS_S3_SECURE_ACCESS: False
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+
+  command:
+    - "uvicorn"
+    - "summary.main:app"
+    - "--host"
+    - "0.0.0.0"
+    - "--port"
+    - "8000"
+    - "--reload"
+
+celery:
+  replicas: 1
+  envVars:
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    OPENAI_API_KEY: password
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    AWS_S3_SECURE_ACCESS: False
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+
+  command:
+    - "celery"
+    - "-A"
+    - "summary.core.celery_worker"
+    - "worker"
+    - "--pool=solo"
+    - "--loglevel=info"

src/helm/env.d/dev-keycloak/values.secrets.yaml

@@ -0,0 +1,10 @@
+djangoSecretKey: u!vbjDW71aru&OZA%NZQi0x
+livekit:
+    keys:
+        devkey: secret
+livekitApi:
+    key: devkey
+    secret: secret
+oidc:
+    clientId: meet
+    clientSecret: ThisIsAnExampleKeyForDevPurposeOnly

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

@@ -1,7 +1,7 @@
 image:
   repository: lasuite/meet-backend
   pullPolicy: Always
-  tag: "v0.1.10"
+  tag: "v0.1.12"
 
 backend:
   migrateJobAnnotations:
@@ -116,6 +116,17 @@ backend:
         name: meet-media-storage.bucket.libre.sh
         key: bucket
     AWS_S3_REGION_NAME: local
+    RECORDING_ENABLE: True
+    RECORDING_STORAGE_EVENT_ENABLE: True
+    RECORDING_STORAGE_EVENT_TOKEN:
+        secretKeyRef:
+            name: backend
+            key: RECORDING_STORAGE_EVENT_TOKEN
+    SUMMARY_SERVICE_ENDPOINT: http://meet-summary:80/api/v1/tasks/
+    SUMMARY_SERVICE_API_TOKEN:
+        secretKeyRef:
+            name: summary
+            key: APP_API_TOKEN
 
   createsuperuser:
     command:
@@ -129,7 +140,7 @@ frontend:
   image:
     repository: lasuite/meet-frontend
     pullPolicy: Always
-    tag: "v0.1.10"
+    tag: "v0.1.12"
 
 ingress:
   enabled: true
@@ -167,7 +178,113 @@ posthog:
       nginx.ingress.kubernetes.io/backend-protocol: https
 
 summary:
-  replicas: 0
+  replicas: 1
+  envVars:
+    APP_NAME: summary-microservice
+    APP_API_TOKEN:
+      secretKeyRef:
+        name: summary
+        key: APP_API_TOKEN
+    AWS_S3_ENDPOINT_URL:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: url
+    AWS_S3_ACCESS_KEY_ID:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: accessKey
+    AWS_S3_SECRET_ACCESS_KEY:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: secretKey
+    AWS_STORAGE_BUCKET_NAME:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: bucket
+    AWS_S3_REGION_NAME: local
+    OPENAI_API_KEY:
+      secretKeyRef:
+        name: summary
+        key: OPENAI_API_KEY
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN:
+      secretKeyRef:
+        name: summary
+        key: WEBHOOK_API_TOKEN
+    WEBHOOK_URL: https://docs.numerique.gouv.fr/api/v1.0/documents/create-for-owner/
+    CELERY_BROKER_URL:
+      secretKeyRef:
+        name: redis-summary.redis.libre.sh
+        key: url
+    CELERY_RESULT_BACKEND:
+      secretKeyRef:
+        name: redis-summary.redis.libre.sh
+        key: url
+
+  image:
+    repository: lasuite/meet-summary
+    pullPolicy: Always
+    tag: "v0.1.12"
 
 celery:
-   replicas: 0
+  replicas: 1
+  envVars:
+    APP_NAME: summary-microservice
+    APP_API_TOKEN:
+      secretKeyRef:
+        name: summary
+        key: APP_API_TOKEN
+    AWS_S3_ENDPOINT_URL:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: endpoint
+    AWS_S3_ACCESS_KEY_ID:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: accessKey
+    AWS_S3_SECRET_ACCESS_KEY:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: secretKey
+    AWS_STORAGE_BUCKET_NAME:
+      secretKeyRef:
+        name: meet-media-storage.bucket.libre.sh
+        key: bucket
+    AWS_S3_REGION_NAME: local
+    OPENAI_API_KEY:
+      secretKeyRef:
+        name: summary
+        key: OPENAI_API_KEY
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN:
+      secretKeyRef:
+        name: summary
+        key: WEBHOOK_API_TOKEN
+    WEBHOOK_URL: https://docs.numerique.gouv.fr/api/v1.0/documents/create-for-owner/
+    CELERY_BROKER_URL:
+      secretKeyRef:
+        name: redis-summary.redis.libre.sh
+        key: url
+    CELERY_RESULT_BACKEND:
+      secretKeyRef:
+        name: redis-summary.redis.libre.sh
+        key: url
+    SENTRY_IS_ENABLED: True
+    SENTRY_DSN: https://5aead03f03505da5130af6d642c42faf@sentry.incubateur.net/202
+
+  image:
+    repository: lasuite/meet-summary
+    pullPolicy: Always
+    tag: "v0.1.12"
+
+  command:
+    - "celery"
+    - "-A"
+    - "summary.core.celery_worker"
+    - "worker"
+    - "--pool=solo"
+    - "--loglevel=info"

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

@@ -223,7 +223,7 @@ summary:
       secretKeyRef:
         name: summary
         key: WEBHOOK_API_TOKEN
-    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    WEBHOOK_URL: https://impress-staging.beta.numerique.gouv.fr/api/v1.0/documents/create-for-owner/
     CELERY_BROKER_URL:
       secretKeyRef:
         name: redis-summary.redis.libre.sh
@@ -274,7 +274,7 @@ celery:
       secretKeyRef:
         name: summary
         key: WEBHOOK_API_TOKEN
-    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    WEBHOOK_URL: https://impress-staging.beta.numerique.gouv.fr/api/v1.0/documents/create-for-owner/
     CELERY_BROKER_URL:
       secretKeyRef:
         name: redis-summary.redis.libre.sh

src/helm/helmfile.yaml

@@ -1,4 +1,8 @@
 environments:
+  dev-keycloak:
+    values:
+      - version: 0.0.1
+      - env.d/{{ .Environment.Name }}/values.secrets.yaml
   dev:
     values:
       - version: 0.0.1
@@ -32,7 +36,8 @@ repositories:
 
 releases:
   - name: postgres
-    installed: {{ eq .Environment.Name "dev" | toYaml }}
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    missingFileHandler: Warn
     namespace: {{ .Namespace }}
     chart: bitnami/postgresql
     version: 13.1.5
@@ -45,9 +50,50 @@ releases:
           enabled: true
           autoGenerated: true
 
-  - name: minio
-    installed: {{ eq .Environment.Name "dev" | toYaml }}
+  - name: keycloak
+    installed: {{ eq .Environment.Name "dev-keycloak" | toYaml }}
+    missingFileHandler: Warn
     namespace: {{ .Namespace }}
+    chart: bitnami/keycloak
+    version: 17.3.6
+    values:
+      - postgresql:
+          auth:
+            username: keycloak
+            password: keycloak
+            database: keycloak
+      - extraEnvVars:
+          - name: KEYCLOAK_EXTRA_ARGS
+            value: "--import-realm"
+          - name: KC_HOSTNAME_URL
+            value: https://keycloak.127.0.0.1.nip.io
+      - extraVolumes:
+          - name: import
+            configMap:
+              name: meet-keycloak
+      - extraVolumeMounts:
+          - name: import
+            mountPath: /opt/bitnami/keycloak/data/import/
+      - auth:
+          adminUser: su
+          adminPassword: su
+      - proxy: edge
+      - ingress:
+          enabled: true
+          hostname: keycloak.127.0.0.1.nip.io
+      - extraDeploy:
+        - apiVersion: v1
+          kind: ConfigMap
+          metadata:
+            name: meet-keycloak
+          data:
+            meet.json: |
+{{ readFile "../../docker/auth/realm.json" | replace "http://localhost:3200" "https://meet.127.0.0.1.nip.io" | indent 14 }}
+
+  - name: minio
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    namespace: {{ .Namespace }}
+    missingFileHandler: Warn
     chart: bitnami/minio
     version: 12.10.10
     values:
@@ -75,7 +121,8 @@ releases:
             name: mkcert
 
   - name: redis
-    installed: {{ eq .Environment.Name "dev" | toYaml }}
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    missingFileHandler: Warn
     namespace: {{ .Namespace }}
     chart: bitnami/redis
     version: 18.19.2
@@ -85,7 +132,8 @@ releases:
         architecture: standalone
 
   - name: extra
-    installed: {{ ne .Environment.Name "dev" | toYaml }}
+    installed: {{ not (regexMatch "^dev.*" .Environment.Name) | toYaml }}
+    missingFileHandler: Warn
     namespace: {{ .Namespace }}
     chart: ./extra
     secrets:
@@ -100,26 +148,32 @@ releases:
   - name: meet
     version: {{ .Values.version }}
     namespace: {{ .Namespace }}
+    missingFileHandler: Warn
     chart: ./meet
     values:
       - env.d/{{ .Environment.Name }}/values.meet.yaml.gotmpl
+      - env.d/{{ .Environment.Name }}/values.secrets.yaml
     secrets:
       - env.d/{{ .Environment.Name }}/secrets.enc.yaml
 
   - name: livekit
-    installed: {{ eq .Environment.Name "dev" | toYaml }}
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    missingFileHandler: Warn
     namespace: {{ .Namespace }}
     chart: livekit/livekit-server
     values:
       - env.d/{{ .Environment.Name }}/values.livekit.yaml.gotmpl
+      - env.d/{{ .Environment.Name }}/values.secrets.yaml
     secrets:
       - env.d/{{ .Environment.Name }}/secrets.enc.yaml
 
   - name: livekit-egress
-    installed: {{ eq .Environment.Name "dev" | toYaml }}
+    installed: {{ regexMatch "^dev.*" .Environment.Name | toYaml }}
+    missingFileHandler: Warn
     namespace: {{ .Namespace }}
     chart: livekit/egress
     values:
       - env.d/{{ .Environment.Name }}/values.egress.yaml.gotmpl
+      - env.d/{{ .Environment.Name }}/values.secrets.yaml
     secrets:
       - env.d/{{ .Environment.Name }}/secrets.enc.yaml

src/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "0.1.10",
+      "version": "0.1.12",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.5.4",
@@ -344,8 +344,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "license": "MIT",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",

src/mail/package.json

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

src/summary/summary/core/celery_worker.py

@@ -125,8 +125,10 @@ def process_audio_transcribe_summarize(filename: str, email: str, sub: str):
     summary = summary_response.choices[0].message.content
     logger.debug("Summary: \n %s", summary)
 
+    # fixme - generate a title using LLM
     data = {
-        "summary": summary,
+        "title": "Votre résumé",
+        "content": summary,
         "email": email,
         "sub": sub,
     }