wip poc control bar

only css, need a media query to collapse right items when the screen is small.

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.7"
+version = "0.1.8"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,18 +25,18 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.19",
+    "boto3==1.35.68",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
-    "django-cors-headers==4.4.0",
+    "django-cors-headers==4.6.0",
     "django-countries==7.6.1",
     "django-parler==2.3",
-    "redis==5.0.8",
+    "redis==5.2.0",
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.1",
+    "django==5.1.3",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
@@ -47,17 +47,17 @@ dependencies = [
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.2",
-    "PyJWT==2.9.0",
+    "psycopg[binary]==3.2.3",
+    "PyJWT==2.10.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.14.0",
+    "sentry-sdk==2.19.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
-    "whitenoise==6.7.0",
+    "whitenoise==6.8.2",
     "mozilla-django-oidc==4.0.1",
-    "livekit-api==0.7.0",
-    "aiohttp==3.10.10",
+    "livekit-api==0.8.0",
+    "aiohttp==3.11.7",
 ]
 
 [project.urls]
@@ -69,21 +69,21 @@ dependencies = [
 [project.optional-dependencies]
 dev = [
     "django-extensions==3.2.3",
-    "drf-spectacular-sidecar==2024.7.1",
+    "drf-spectacular-sidecar==2024.11.1",
     "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==8.27.0",
-    "pyfakefs==5.6.0",
-    "pylint-django==2.5.5",
-    "pylint==3.2.7",
-    "pytest-cov==5.0.0",
+    "ipython==8.29.0",
+    "pyfakefs==5.7.1",
+    "pylint-django==2.6.1",
+    "pylint==3.3.1",
+    "pytest-cov==6.0.0",
     "pytest-django==4.9.0",
     "pytest==8.3.3",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.5",
-    "types-requests==2.32.0.20240914",
+    "ruff==0.8.0",
+    "types-requests==2.32.0.20241016",
 ]
 
 [tool.setuptools]

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,48 +13,48 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.6.5",
-    "@livekit/components-styles": "1.1.3",
+    "@livekit/components-react": "2.6.9",
+    "@livekit/components-styles": "1.1.4",
     "@livekit/track-processors": "0.3.2",
-    "@pandacss/preset-panda": "0.46.1",
-    "@react-aria/toast": "3.0.0-beta.16",
-    "@remixicon/react": "4.2.0",
-    "@tanstack/react-query": "5.59.4",
+    "@pandacss/preset-panda": "0.48.0",
+    "@react-aria/toast": "3.0.0-beta.18",
+    "@remixicon/react": "4.5.0",
+    "@tanstack/react-query": "5.61.3",
     "crisp-sdk-web": "1.0.25",
     "hoofd": "1.7.1",
-    "i18next": "23.15.2",
+    "i18next": "24.0.2",
     "i18next-browser-languagedetector": "8.0.0",
     "i18next-parser": "9.0.2",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.5.7",
-    "posthog-js": "1.186.1",
+    "livekit-client": "2.6.3",
+    "posthog-js": "1.188.0",
     "react": "18.3.1",
-    "react-aria-components": "1.4.0",
+    "react-aria-components": "1.5.0",
     "react-dom": "18.3.1",
-    "react-i18next": "15.0.2",
+    "react-i18next": "15.1.1",
     "use-sound": "4.0.3",
-    "valtio": "2.0.0",
+    "valtio": "2.1.2",
     "wouter": "3.3.5"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@tanstack/eslint-plugin-query": "5.59.2",
-    "@tanstack/react-query-devtools": "5.59.4",
-    "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@pandacss/dev": "0.48.0",
+    "@tanstack/eslint-plugin-query": "5.61.3",
+    "@tanstack/react-query-devtools": "5.61.3",
+    "@types/node": "22.9.3",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@typescript-eslint/eslint-plugin": "8.15.0",
+    "@typescript-eslint/parser": "8.15.0",
+    "@vitejs/plugin-react": "4.3.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.12",
-    "postcss": "8.4.47",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.14",
+    "postcss": "8.4.49",
     "prettier": "3.3.3",
-    "typescript": "5.6.3",
-    "vite": "5.4.8",
-    "vite-tsconfig-paths": "5.0.1"
+    "typescript": "5.7.2",
+    "vite": "5.4.11",
+    "vite-tsconfig-paths": "5.1.3"
   }
 }

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

@@ -100,57 +100,118 @@ export function ControlBar({
     [saveVideoInputEnabled]
   )
 
-  return (
+  const Square = () => (
     <div
       className={css({
+        height: '46px',
+        width: '46px',
+        backgroundColor: 'black',
+      })}
+    />
+  )
+
+  return (
+    // <div
+    //   className={css({
+    //     display: 'flex',
+    //     gap: '.5rem',
+    //     alignItems: 'center',
+    //     justifyContent: 'center',
+    //     padding: '.75rem',
+    //     borderTop: '1px solid var(--lk-border-color)',
+    //     maxHeight: 'var(--lk-control-bar-height)',
+    //     height: '80px',
+    //
+    //     backgroundColor: '#d1d5db',
+    //   })}
+    // >
+    //   <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 })
+    //       }
+    //     />
+    //   )}
+
+    // </div>
+    <div
+      className={css({
+        width: '100vw',
         display: 'flex',
-        gap: '.5rem',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '.75rem',
-        borderTop: '1px solid var(--lk-border-color)',
-        maxHeight: 'var(--lk-control-bar-height)',
-        height: '80px',
         position: 'absolute',
-        backgroundColor: '#d1d5db',
         bottom: 0,
         left: 0,
         right: 0,
       })}
     >
-      <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 />
-      <ChatToggle />
-      <ParticipantsToggle />
-      <OptionsButton />
-      <LeaveButton />
-      <StartMediaButton />
+      <div
+        className={css({
+          width: '261px',
+          height: '80px',
+          display: 'flex',
+          justifyContent: 'flex-start',
+          flex: '1 1 25%',
+          alignItems: 'center',
+          gap: '0.5rem',
+          marginLeft: '0.5rem',
+        })}
+      >
+        <Square />
+        <Square />
+      </div>
+      <div
+        className={css({
+          width: '576px',
+          height: '80px',
+          flex: '1 1 25%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          gap: '0.5rem',
+        })}
+      >
+        <Square />
+        <Square />
+        <Square />
+        <Square />
+        <Square />
+      </div>
+      <div
+        className={css({
+          width: '261px',
+          height: '80px',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          flex: '1 1 25%',
+          alignItems: 'center',
+          gap: '0.5rem',
+          marginRight: '0.5rem',
+        })}
+      >
+        <Square />
+        <Square />
+        <Square />
+      </div>
     </div>
   )
 }

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

@@ -19,7 +19,7 @@
   },
   "laterMeetingDialog": {
     "heading": "Your connection details",
-    "description": "Send this link to the people you want to invite to the meeting. They will be able to join without Agent Connect.",
+    "description": "Send this link to the people you want to invite to the meeting. They will be able to join without ProConnect.",
     "copy": "Copy the meeting link",
     "copied": "Link copied to clipboard",
     "permissions": "People with this link do not need your permission to join this meeting."

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

@@ -19,7 +19,7 @@
   },
   "laterMeetingDialog": {
     "heading": "Vos informations de connexion",
-    "description": "Envoyez ce lien aux personnes que vous souhaitez inviter à la réunion. Ils pourront la rejoindre sans Agent Connect.",
+    "description": "Envoyez ce lien aux personnes que vous souhaitez inviter à la réunion. Ils pourront la rejoindre sans ProConnect.",
     "copy": "Copier le lien de la réunion",
     "copied": "Lien copié dans le presse-papiers",
     "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."

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

@@ -123,7 +123,7 @@
     "skip": "Passer"
   },
   "confirmationMessage": {
-    "heading": "Merci pour votre submission",
+    "heading": "Merci pour votre retour",
     "body": "Notre équipe produit prend le temps d'analyser attentivement vos réponses. Nous reviendrons vers vous dans les plus brefs délais."
   },
   "participants": {

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

@@ -1,7 +1,7 @@
 image:
   repository: lasuite/meet-backend
   pullPolicy: Always
-  tag: "v0.1.7"
+  tag: "v0.1.8"
 
 backend:
   migrateJobAnnotations:
@@ -128,7 +128,7 @@ frontend:
   image:
     repository: lasuite/meet-frontend
     pullPolicy: Always
-    tag: "v0.1.7"
+    tag: "v0.1.8"
 
 ingress:
   enabled: true

src/mail/package-lock.json

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

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {
@@ -14,7 +14,7 @@
     "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
   },
   "volta": {
-    "node": "20.18.0"
+    "node": "22.11.0"
   },
   "repository": "https://github.com/numerique-gouv/meet",
   "author": "DINUM",