fix: upgrade posthog-js from 1.404.1 to 1.409.5

Snyk has created this PR to upgrade posthog-js from 1.404.1 to 1.409.5.

See this package in npm:
posthog-js

See this project in Snyk:
https://app.eu.snyk.io/org/lasuite-dinum-default/project/96ea03d8-8d09-493d-86bf-363f274e129e?utm_source=github&utm_medium=referral&page=upgrade-pr

CHANGELOG.md

@@ -8,10 +8,6 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added
-
-- 📈(frontend) track errors when starting or stopping a recording
-
 ### Changed
 
 - ✨(backend) accept form-urlencoded on the user token endpoint
@@ -19,18 +15,12 @@ and this project adheres to
 - ⬆️(frontend) upgrade i18next and react-i18next patch versions
 - ⬆️(frontend) upgrade posthog-js from 1.395.0 to 1.404.1
 - ⬆️(frontend) upgrade livekit-client and @livekit/components-react
-- 💄(frontend) increase the blur intensity
 
 ### Fixed
 
 - 📝(docs) fix minor typos in comments and docstrings
 - ⬆️(backend) bump sqlparse from 0.5.5 to 0.6.0
 - ⬆️(mail) bump @html-to/text-cli from 0.6.0 to 0.6.1
-- 🐛(frontend) treat client-initiated connect aborts as events
-- 🐛(frontend) use state instead of a ref for MoreControls container
-- 🐛(frontend) stop init_virtual_background from firing on blur updates
-- 🐛(frontend) hoist mute confirmation dialog to VideoConference level
-- 🐛(frontend) fix joined notification tile no longer rendering properly
 
 ## [1.27.0] - 2026-08-14
 

src/frontend/package-lock.json

@@ -29,7 +29,7 @@
         "i18next-parser": "9.4.0",
         "i18next-resources-to-backend": "1.2.1",
         "livekit-client": "2.21.0",
-        "posthog-js": "1.404.1",
+        "posthog-js": "^1.409.5",
         "react": "18.3.1",
         "react-aria": "3.50.0",
         "react-aria-components": "1.19.0",
@@ -1719,6 +1719,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@posthog/browser-common": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@posthog/browser-common/-/browser-common-0.3.1.tgz",
+      "integrity": "sha512-1nhMVY1wnHADTg8tR9yvm+lPAz5ROxznfQlBtLzB2FFo4lp/LU8lk9KyFPsARDkBxCfYachsJfvRjocL1G/AJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@posthog/core": "^1.46.0",
+        "@posthog/types": "^1.399.0"
+      }
+    },
     "node_modules/@posthog/core": {
       "version": "1.48.3",
       "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.48.3.tgz",
@@ -9123,13 +9133,14 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.404.1",
+      "version": "1.409.5",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.404.1.tgz",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.409.5.tgz",
-      "integrity": "sha512-ck/HOMKuZ6yefUk5OX+h2s9mUWBsnu0mGDUAWjIwAmQQrloZPShzOhOWuEuZQuMnCKORBFRVGsBAuzsl66cBJA==",
+      "integrity": "sha512-s1iJz+vq0YAluUD4OwLjUFIJt/9pqiiB6MITvHWIS16a7pqTJqbSLXsd5/8kJcIgfrOSZHe+mdYAXLYcJCS4LQ==",
       "license": "(Apache-2.0 AND MIT)",
       "dependencies": {
-        "@posthog/core": "^1.43.1",
+        "@posthog/browser-common": "^0.3.1",
-        "@posthog/types": "^1.397.0",
+        "@posthog/core": "^1.46.1",
+        "@posthog/types": "^1.399.0",
         "core-js": "^3.49.0",
         "dompurify": "^3.3.2",
         "fflate": "^0.4.8",

src/frontend/package.json

@@ -36,7 +36,7 @@
     "i18next-parser": "9.4.0",
     "i18next-resources-to-backend": "1.2.1",
     "livekit-client": "2.21.0",
-    "posthog-js": "1.404.1",
+    "posthog-js": "1.409.5",
     "react": "18.3.1",
     "react-aria": "3.50.0",
     "react-aria-components": "1.19.0",

src/frontend/src/features/notifications/components/ToastJoined.tsx

@@ -1,5 +1,5 @@
 import { useToast } from 'react-aria'
-import { useMemo, useRef } from 'react'
+import { useRef } from 'react'
 import { Button as RACButton } from 'react-aria-components'
 import { Track } from 'livekit-client'
 import Source = Track.Source
@@ -11,7 +11,6 @@ import { Div } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { StyledToastContainer } from './StyledToastContainer'
 import { setPinnedTrack } from '@/stores/layout'
-import { useParticipantTracks } from '@livekit/components-react'
 
 const ClickableToast = styled(RACButton, {
   base: {
@@ -31,18 +30,14 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
   )
   const participant = props.toast.content.participant
 
-  const [cameraTrack] = useParticipantTracks(
-    [Source.Camera],
-    participant?.identity
-  )
-
-  const trackReference = useMemo(
-    () => cameraTrack ?? { participant, source: Source.Camera },
-    [cameraTrack, participant]
-  )
-
   if (!participant) return
 
+  const trackReference = {
+    participant,
+    publication: participant.getTrackPublication(Source.Camera),
+    source: Source.Camera,
+  }
+
   return (
     <StyledToastContainer {...toastProps} ref={ref}>
       <ClickableToast

src/frontend/src/features/participantTile/components/participantTileFocus/MuteButton.tsx

@@ -1,9 +1,11 @@
 import { Participant, Track } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { useTrackMutedIndicator } from '@livekit/components-react'
+import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
+import { useState } from 'react'
 import { Button } from '@/primitives'
 import { RiMicLine, RiMicOffLine } from '@remixicon/react'
-import { openMuteDialog } from '@/stores/muteDialog'
+import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 
 export const MuteButton = ({ participant }: { participant: Participant }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
@@ -13,18 +15,31 @@ export const MuteButton = ({ participant }: { participant: Participant }) => {
     source: Track.Source.Microphone,
   })
 
+  const { muteParticipant } = useMuteParticipant()
+  const [isAlertOpen, setIsAlertOpen] = useState(false)
+
   const name = participant.name || participant.identity
 
   return (
-    <Button
+    <>
-      isDisabled={isMuted}
+      <Button
-      size={'sm'}
+        isDisabled={isMuted}
-      variant={'primaryTextDark'}
+        size={'sm'}
-      square
+        variant={'primaryTextDark'}
-      onPress={() => openMuteDialog(participant)}
+        square
-      tooltip={t('muteParticipant', { name })}
+        onPress={() => setIsAlertOpen(true)}
-    >
+        tooltip={t('muteParticipant', { name })}
-      {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
+      >
-    </Button>
+        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
+      </Button>
+      <MuteAlertDialog
+        isOpen={isAlertOpen}
+        onSubmit={() =>
+          muteParticipant(participant).then(() => setIsAlertOpen(false))
+        }
+        onClose={() => setIsAlertOpen(false)}
+        name={name}
+      />
+    </>
   )
 }

src/frontend/src/features/participants/components/ParticipantRow.tsx

@@ -19,11 +19,13 @@ import {
 import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
 import { Button } from '@/primitives'
+import { useState } from 'react'
+import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
 import { UnauthenticatedBadge } from './UnauthenticatedBadge'
-import { openMuteDialog } from '@/stores/muteDialog'
+import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 import { ParticipantName } from './ParticipantName'
 
 type MicIndicatorProps = {
@@ -32,6 +34,7 @@ type MicIndicatorProps = {
 
 const MicIndicator = ({ participant }: MicIndicatorProps) => {
   const { t } = useTranslation('rooms')
+  const { muteParticipant } = useMuteParticipant()
   const { isMuted } = useTrackMutedIndicator({
     participant: participant,
     source: Source.Microphone,
@@ -39,6 +42,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
 
   const canMute = useCanMute(participant)
   const isSpeaking = useIsSpeaking(participant)
+  const [isAlertOpen, setIsAlertOpen] = useState(false)
   const name = participant.name || participant.identity
 
   const label = isLocal(participant)
@@ -48,34 +52,46 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
       })
 
   return (
-    <Button
+    <>
-      square
+      <Button
-      variant="greyscale"
+        square
-      size="sm"
+        variant="greyscale"
-      tooltip={label}
+        size="sm"
-      aria-label={label}
+        tooltip={label}
-      isDisabled={isMuted || !canMute}
+        aria-label={label}
-      onPress={async () =>
+        isDisabled={isMuted || !canMute}
-        !isMuted && isLocal(participant)
+        onPress={async () =>
-          ? await (participant as LocalParticipant)?.setMicrophoneEnabled(false)
+          !isMuted && isLocal(participant)
-          : openMuteDialog(participant)
+            ? await (participant as LocalParticipant)?.setMicrophoneEnabled(
-      }
+                false
-      data-attr="participants-mute"
+              )
-    >
+            : setIsAlertOpen(true)
-      {isMuted ? (
+        }
-        <RiMicOffFill color={'gray'} aria-hidden={true} />
+        data-attr="participants-mute"
-      ) : (
+      >
-        <RiMicFill
+        {isMuted ? (
-          className={css({
+          <RiMicOffFill color={'gray'} aria-hidden={true} />
-            color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
+        ) : (
-            animation: isSpeaking
+          <RiMicFill
-              ? 'pulse_background 800ms infinite'
+            className={css({
-              : undefined,
+              color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
-          })}
+              animation: isSpeaking
-          aria-hidden={true}
+                ? 'pulse_background 800ms infinite'
-        />
+                : undefined,
-      )}
+            })}
-    </Button>
+            aria-hidden={true}
+          />
+        )}
+      </Button>
+      <MuteAlertDialog
+        isOpen={isAlertOpen}
+        onSubmit={() =>
+          muteParticipant(participant).then(() => setIsAlertOpen(false))
+        }
+        onClose={() => setIsAlertOpen(false)}
+        name={name}
+      />
+    </>
   )
 }
 

src/frontend/src/features/recording/hooks/useMutateRecording.ts

@@ -1,20 +1,17 @@
 import { useStartRecording, useStopRecording } from '@/features/recording'
 import { recordingStore } from '@/stores/recording'
-import { captureEvent } from '@/features/analytics/telemetry'
 
 export const useMutateRecording = () => {
   const { mutateAsync: startRecording, isPending: isPendingToStart } =
     useStartRecording({
       onError: () => {
         recordingStore.isErrorDialogOpen = 'start'
-        captureEvent('error-starting-recording')
       },
     })
   const { mutateAsync: stopRecording, isPending: isPendingToStop } =
     useStopRecording({
       onError: () => {
         recordingStore.isErrorDialogOpen = 'stop'
-        captureEvent('error-stopping-recording')
       },
     })
 

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

@@ -6,8 +6,6 @@ import {
   usePersistentUserChoices,
 } from '@livekit/components-react'
 import {
-  ConnectionError,
-  ConnectionErrorReason,
   DisconnectReason,
   MediaDeviceFailure,
   Room,
@@ -27,11 +25,7 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import {
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
-  captureEvent,
-  captureMediaEvent,
-  reportError,
-} from '@/features/analytics/telemetry'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
@@ -233,16 +227,6 @@ export const Conference = ({
           onError={(e) => {
             const failure = MediaDeviceFailure.getFailure(e)
             if (failure && failure !== MediaDeviceFailure.Other) return
-
-            // connect() was aborted by a disconnect() before the join completed
-            if (
-              e instanceof ConnectionError &&
-              e.reason === ConnectionErrorReason.Cancelled
-            ) {
-              void captureEvent('connection-cancelled')
-              return
-            }
-
             reportError('livekit_room_error', e, {
               path: 'connect_publish',
             })

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

@@ -1,28 +0,0 @@
-import { useRef } from 'react'
-import { useSnapshot } from 'valtio'
-import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
-import { closeMuteDialog, muteDialogStore } from '@/stores/muteDialog'
-import { MuteAlertDialog } from './MuteAlertDialog'
-
-export const MuteAlertDialogProvider = () => {
-  const { participant } = useSnapshot(muteDialogStore)
-  const { muteParticipant } = useMuteParticipant()
-
-  const lastNameRef = useRef('')
-  if (participant) {
-    lastNameRef.current = participant.name || participant.identity
-  }
-
-  return (
-    <MuteAlertDialog
-      isOpen={!!participant}
-      name={lastNameRef.current}
-      onClose={closeMuteDialog}
-      onSubmit={() => {
-        const target = muteDialogStore.participant
-        if (!target) return
-        muteParticipant(target).then(closeMuteDialog)
-      }}
-    />
-  )
-}

src/frontend/src/features/rooms/livekit/components/blur/BackgroundCustomProcessor.ts

@@ -105,7 +105,9 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
 
   _initVirtualBackgroundImage() {
     if (this.options.type !== 'virtual') {
-      return
+      throw new Error(
+        'Virtual background is only supported for virtual background'
+      )
     }
 
     const needsUpdate =

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

@@ -37,8 +37,8 @@ import { reportError } from '@/features/analytics/telemetry'
 
 enum BlurRadius {
   NONE = 0,
-  LIGHT = 10,
+  LIGHT = 5,
-  NORMAL = 20,
+  NORMAL = 10,
 }
 
 const isSupported = BackgroundProcessorFactory.isSupported()

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

@@ -9,7 +9,7 @@ import { SubtitlesToggle } from '../../components/controls/SubtitlesToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
-import { RefObject, useMemo, useState } from 'react'
+import { useRef } from 'react'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { useFullScreen } from '../../hooks/useFullScreen'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
@@ -21,14 +21,7 @@ export function DesktopControlBar({
   onDeviceError,
 }: Readonly<ControlBarAuxProps>) {
   const browserSupportsScreenSharing = supportsScreenSharing()
-
+  const desktopControlBarEl = useRef<HTMLDivElement>(null)
-  const [controlBarElement, setControlBarElement] =
-    useState<HTMLDivElement | null>(null)
-
-  const desktopControlBarEl = useMemo<RefObject<HTMLDivElement>>(
-    () => ({ current: controlBarElement }),
-    [controlBarElement]
-  )
 
   const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({})
 
@@ -52,7 +45,7 @@ export function DesktopControlBar({
 
   return (
     <div
-      ref={setControlBarElement}
+      ref={desktopControlBarEl}
       className={css({
         width: '100vw',
         display: 'flex',

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

@@ -19,7 +19,6 @@ import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
-import { MuteAlertDialogProvider } from '@/features/rooms/livekit/components/MuteAlertDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
 import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
@@ -145,7 +144,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
         <ConnectionStateToast />
         <RecordingProvider />
         <SettingsDialogProvider />
-        <MuteAlertDialogProvider />
         <ReactionPortals />
       </div>
     </>

src/frontend/src/stores/muteDialog.ts

@@ -1,18 +0,0 @@
-import { proxy, ref } from 'valtio'
-import type { Participant } from 'livekit-client'
-
-type State = {
-  participant: Participant | null
-}
-
-export const muteDialogStore = proxy<State>({
-  participant: null,
-})
-
-export const openMuteDialog = (participant: Participant) => {
-  muteDialogStore.participant = ref(participant)
-}
-
-export const closeMuteDialog = () => {
-  muteDialogStore.participant = null
-}