⚡️(frontend) defer loading the Crisp script until idle

Load the Crisp JavaScript module only once the frontend is idle,
instead of during the initial page load.

Keeps the critical path lighter and prevents Crisp from competing
with the app's own bootstrap for network and CPU on slow devices.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 - 📈(frontend) include LiveKit SIDs in the connection analytics event
 - 🔇(backend) silence expected 401 warnings on /me
 - 🔇(backend) silence noisy request summary info logs
+- ⚡️(frontend) defer loading the Crisp script until idle
 
 ### Fixed
 
@@ -259,10 +260,6 @@ and this project adheres to
 - ♿️(frontend) focus side panel container on open #1452
 - 🐛(summary) whisper call error handling
 
-### Added
-
-- ✨(frontend) add screen share zoom controls #1498
-
 ## [1.23.0] - 2026-07-08
 
 ### Added

src/frontend/src/features/participantTile/components/ParticipantTile.tsx

@@ -20,7 +20,6 @@ import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './participantTileFocus/ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
-import { ScreenShareZoomableVideo } from '@/features/rooms/livekit/components/ScreenShareZoomableVideo'
 import { useTranslation } from 'react-i18next'
 import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
@@ -49,8 +48,6 @@ interface ParticipantTileExtendedProps extends ParticipantTileProps {
   disableTileControls?: boolean
 }
 
-const MOUSE_IDLE_TIME = 3000
-
 export const ParticipantTile: (
   props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
@@ -92,8 +89,6 @@ export const ParticipantTile: (
   )
 
   const isScreenShare = trackReference.source != Track.Source.Camera
-  const isRemoteScreenShare =
-    isScreenShare && !trackReference.participant.isLocal
   const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)
 
   const participantColor = getParticipantColor(trackReference.participant)
@@ -103,38 +98,11 @@ export const ParticipantTile: (
   })
   const participantName = name || identity || 'Unknown'
 
-  // Hover + idle tracking for the focus overlay (pin, effects, mute buttons).
-  const [isTileHovered, setIsTileHovered] = React.useState(false)
-  const [isIdle, setIsIdle] = React.useState(false)
-  const idleTimerRef = React.useRef<number | null>(null)
-
-  const handleTileMouseMove = React.useCallback(() => {
-    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
-    idleTimerRef.current = window.setTimeout(
-      () => setIsIdle(true),
-      MOUSE_IDLE_TIME
-    )
-    setIsIdle(false)
-  }, [])
-
-  const isOverlayVisible = hasKeyboardFocus || (isTileHovered && !isIdle)
-
-  // tileRef: fullscreen target. setRefs merges it with the forwarded ref on the same node.
-  const tileRef = React.useRef<HTMLDivElement>(null)
-  const setRefs = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      ;(tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-      if (typeof ref === 'function') ref(node)
-      else if (ref)
-        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
-    },
-    [ref]
-  )
-
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
 
   const interactiveProps = {
     ...elementProps,
+    // Ensure the tile is focusable to expose contextual controls to keyboard users.
     tabIndex: 0,
     'aria-label': t('containerLabel', { name: participantName }),
     onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
@@ -152,60 +120,8 @@ export const ParticipantTile: (
     },
   }
 
-  const isVideoTrack =
-    isTrackReference(trackReference) &&
-    (trackReference.publication?.kind === 'video' ||
-      trackReference.source === Track.Source.Camera ||
-      trackReference.source === Track.Source.ScreenShare)
-
-  let trackMedia: React.ReactNode = null
-  if (isVideoTrack) {
-    // Zoom toolbar stays out of picture-in-picture: that window has its own
-    // document and the fullscreen API is off. Follow-up PR can restore zoom
-    // there without the dead fullscreen button.
-    if (isRemoteScreenShare && !disableTileControls) {
-      trackMedia = (
-        <ScreenShareZoomableVideo
-          trackRef={trackReference}
-          tileRef={tileRef}
-          onSubscriptionStatusChanged={handleSubscribe}
-          manageSubscription={autoManageSubscription}
-        />
-      )
-    } else {
-      trackMedia = (
-        <VideoTrack
-          trackRef={trackReference}
-          onSubscriptionStatusChanged={handleSubscribe}
-          manageSubscription={autoManageSubscription}
-        />
-      )
-    }
-  } else if (isTrackReference(trackReference)) {
-    trackMedia = (
-      <AudioTrack
-        trackRef={trackReference}
-        onSubscriptionStatusChanged={handleSubscribe}
-      />
-    )
-  }
-
   return (
-    <div
-      ref={setRefs}
-      style={{ position: 'relative' }}
-      {...interactiveProps}
-      onMouseEnter={() => setIsTileHovered(true)}
-      onMouseLeave={() => {
-        setIsTileHovered(false)
-        setIsIdle(false)
-        if (idleTimerRef.current) {
-          window.clearTimeout(idleTimerRef.current)
-          idleTimerRef.current = null
-        }
-      }}
-      onMouseMove={handleTileMouseMove}
-    >
+    <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
           {trackReference.participant.isLocal && (
@@ -213,7 +129,23 @@ export const ParticipantTile: (
           )}
           {children ?? (
             <>
-              {trackMedia}
+              {isTrackReference(trackReference) &&
+              (trackReference.publication?.kind === 'video' ||
+                trackReference.source === Track.Source.Camera ||
+                trackReference.source === Track.Source.ScreenShare) ? (
+                <VideoTrack
+                  trackRef={trackReference}
+                  onSubscriptionStatusChanged={handleSubscribe}
+                  manageSubscription={autoManageSubscription}
+                />
+              ) : (
+                isTrackReference(trackReference) && (
+                  <AudioTrack
+                    trackRef={trackReference}
+                    onSubscriptionStatusChanged={handleSubscribe}
+                  />
+                )
+              )}
               <div className="lk-participant-placeholder">
                 <ParticipantPlaceholder
                   color={participantColor}
@@ -232,7 +164,7 @@ export const ParticipantTile: (
           {!disableMetadata && !disableTileControls && (
             <ParticipantTileFocus
               trackRef={trackReference}
-              isVisible={isOverlayVisible}
+              hasKeyboardFocus={hasKeyboardFocus}
             />
           )}
         </ParticipantContextIfNeeded>

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

@@ -1,22 +1,44 @@
 import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import { Track } from 'livekit-client'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { FocusButton } from './FocusButton'
 import { EffectsButton } from './EffectsButton'
 import { MuteButton } from './MuteButton'
+import { ZoomButton } from './ZoomButton'
+
+const MOUSE_IDLE_TIME = 3000
 
 type FadeOverlayProps = {
   children: ReactNode
-  isVisible: boolean
+  hasKeyboardFocus: boolean
 }
 
-// Pointer-events none so this overlay doesn't block the zoom surface below.
-// Hover and idle tracking therefore lives on the tile, which still receives
-// the pointer events, and comes back in as isVisible.
-const FadeOverlay = ({ children, isVisible }: FadeOverlayProps) => {
+const FadeOverlay = ({ children, hasKeyboardFocus }: FadeOverlayProps) => {
+  const [active, setActive] = useState(false)
+  const idleTimerRef = useRef<number | null>(null)
+
+  const clearIdleTimer = () => {
+    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
+  }
+
+  const armIdleTimer = () => {
+    clearIdleTimer()
+    idleTimerRef.current = window.setTimeout(() => {
+      setActive(false)
+    }, MOUSE_IDLE_TIME)
+  }
+
+  const handleActivity = () => {
+    setActive(true)
+    armIdleTimer()
+  }
+
+  useEffect(() => clearIdleTimer, [])
+
+  const isVisible = hasKeyboardFocus || active
   return (
     <div
       className={css({
@@ -28,10 +50,15 @@ const FadeOverlay = ({ children, isVisible }: FadeOverlayProps) => {
         alignItems: 'center',
         width: '100%',
         height: '100%',
-        pointerEvents: 'none',
       })}
       data-visible={isVisible || undefined}
       aria-hidden={!isVisible}
+      onMouseEnter={handleActivity}
+      onMouseMove={handleActivity}
+      onMouseLeave={() => {
+        clearIdleTimer()
+        setActive(false)
+      }}
     >
       {isVisible && children}
     </div>
@@ -40,10 +67,10 @@ const FadeOverlay = ({ children, isVisible }: FadeOverlayProps) => {
 
 export const ParticipantTileFocus = ({
   trackRef,
-  isVisible,
+  hasKeyboardFocus,
 }: {
   trackRef: TrackReferenceOrPlaceholder
-  isVisible: boolean
+  hasKeyboardFocus: boolean
 }) => {
   const participant = trackRef.participant
   const isScreenShare = trackRef.source == Track.Source.ScreenShare
@@ -51,7 +78,7 @@ export const ParticipantTileFocus = ({
   const canMute = useCanMute(participant)
 
   return (
-    <FadeOverlay isVisible={isVisible}>
+    <FadeOverlay hasKeyboardFocus={hasKeyboardFocus}>
       <div
         className={css({
           backgroundColor: 'primaryDark.50',
@@ -60,7 +87,6 @@ export const ParticipantTileFocus = ({
           display: 'flex',
           opacity: 0.6,
           animation: 'overlayIn 200ms linear 300ms backwards',
-          pointerEvents: 'auto',
           _hover: {
             opacity: 0.95,
           },
@@ -68,7 +94,7 @@ export const ParticipantTileFocus = ({
       >
         <HStack gap={0.5} padding={0.5}>
           <FocusButton trackRef={trackRef} />
-          {!isScreenShare && (
+          {!isScreenShare ? (
             <>
               {isLocal ? (
                 <EffectsButton />
@@ -76,6 +102,8 @@ export const ParticipantTileFocus = ({
                 canMute && <MuteButton participant={participant} />
               )}
             </>
+          ) : (
+            !isLocal && <ZoomButton trackRef={trackRef} />
           )}
         </HStack>
       </div>

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

@@ -0,0 +1,32 @@
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+import { useFullScreen } from '@/features/rooms/livekit/hooks/useFullScreen'
+import { Button } from '@/primitives'
+import { RiFullscreenLine } from '@remixicon/react'
+
+export const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}

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

@@ -1,26 +0,0 @@
-import { VideoTrack } from '@livekit/components-react'
-import { type TrackReference } from '@livekit/components-core'
-import { memo } from 'react'
-
-interface ScreenShareVideoTrackProps {
-  trackRef: TrackReference
-  onSubscriptionStatusChanged: (subscribed: boolean) => void
-  manageSubscription?: boolean
-}
-
-// Zoom/pan updates the wrapper transform only; skip VideoTrack re-renders.
-export const ScreenShareVideoTrack = memo(
-  ({
-    trackRef,
-    onSubscriptionStatusChanged,
-    manageSubscription,
-  }: ScreenShareVideoTrackProps) => (
-    <VideoTrack
-      trackRef={trackRef}
-      onSubscriptionStatusChanged={onSubscriptionStatusChanged}
-      manageSubscription={manageSubscription}
-    />
-  )
-)
-
-ScreenShareVideoTrack.displayName = 'ScreenShareVideoTrack'

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

@@ -1,223 +0,0 @@
-import { css } from '@/styled-system/css'
-import { Button } from '@/primitives'
-import {
-  RiCollapseDiagonalLine,
-  RiExpandDiagonalLine,
-  RiFullscreenExitLine,
-  RiZoomInLine,
-  RiZoomOutLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { Toolbar } from 'react-aria-components'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { isMacintosh } from '@/utils/livekit'
-import { srOnly } from '@/styles/a11y'
-
-interface ScreenShareZoomControlsProps {
-  containerRef: React.RefObject<HTMLDivElement | null>
-  isZoomed: boolean
-  zoomPercentage: number
-  canZoomIn: boolean
-  canZoomOut: boolean
-  onZoomIn: () => void
-  onZoomOut: () => void
-  onResetZoom: () => void
-}
-
-export const ScreenShareZoomControls = ({
-  containerRef,
-  isZoomed,
-  zoomPercentage,
-  canZoomIn,
-  canZoomOut,
-  onZoomIn,
-  onZoomOut,
-  onResetZoom,
-}: ScreenShareZoomControlsProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
-  const announce = useScreenReaderAnnounce()
-
-  const zoomInButtonRef = useRef<HTMLButtonElement>(null)
-  const hadFocusInCollapsibleRef = useRef(false)
-
-  const [isFullscreen, setIsFullscreen] = useState(false)
-  // Tracks whether this tile's container triggered fullscreen (vs another share's).
-  const wasThisTileFullscreen = useRef(false)
-  const isFullscreenAvailable = document.fullscreenEnabled
-
-  // Covers Esc and browser UI exits, not just the toolbar button.
-  // Only this tile's instance announces to avoid duplicates with multiple shares.
-  useEffect(() => {
-    const onChange = () => {
-      const isThisTileFullscreen =
-        document.fullscreenElement === containerRef.current
-      setIsFullscreen(isThisTileFullscreen)
-
-      if (isThisTileFullscreen) {
-        wasThisTileFullscreen.current = true
-        announce(t('fullScreenEntered'), 'assertive')
-      } else if (wasThisTileFullscreen.current) {
-        wasThisTileFullscreen.current = false
-        announce(t('fullScreenExited'), 'assertive')
-      }
-    }
-    document.addEventListener('fullscreenchange', onChange)
-    return () => document.removeEventListener('fullscreenchange', onChange)
-  }, [announce, t, containerRef])
-
-  // Back at 100 % the collapsible controls are disabled and hidden, which drops
-  // keyboard focus on the body. Hand it to the zoom in button instead, the only
-  // control of that group still reachable.
-  useEffect(() => {
-    if (isZoomed || !hadFocusInCollapsibleRef.current) return
-    hadFocusInCollapsibleRef.current = false
-    zoomInButtonRef.current?.focus()
-  }, [isZoomed])
-
-  const toggleFullScreen = useCallback(async () => {
-    try {
-      if (document.fullscreenElement === containerRef.current) {
-        await document.exitFullscreen()
-      } else {
-        // Tile container so zoom controls stay visible in fullscreen.
-        await containerRef.current?.requestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error toggling fullscreen:', error)
-    }
-  }, [containerRef])
-
-  const wheelShortcut = t(isMacintosh() ? 'wheelShortcutMac' : 'wheelShortcut')
-
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        bottom: '12px',
-        right: '12px',
-        zIndex: 2,
-        pointerEvents: 'auto',
-      })}
-    >
-      {/* react-aria Toolbar: left/right arrows move between the controls and
-          Tab leaves the group as a whole, as the toolbar role implies. */}
-      <Toolbar
-        aria-label={t('toolbarLabel')}
-        className={css({
-          display: 'flex',
-          alignItems: 'center',
-          backgroundColor: 'primaryDark.50',
-          borderRadius: '2rem',
-          padding: '0.5rem',
-          opacity: 0.7,
-          transition: 'opacity 200ms linear',
-          _hover: {
-            opacity: 0.95,
-          },
-        })}
-      >
-        <span className={srOnly}>
-          {t(isMacintosh() ? 'wheelShortcutHintMac' : 'wheelShortcutHint')}
-        </span>
-        {/* Animated wrapper: collapses to 0 when not zoomed. padding/margin
-            trick keeps overflow:hidden from clipping focus rings. */}
-        <div
-          className={css({
-            display: 'flex',
-            alignItems: 'center',
-            overflow: 'hidden',
-            transition: 'max-width 200ms ease-out, opacity 200ms ease-out',
-            padding: '3px',
-            margin: '-3px',
-          })}
-          style={{
-            maxWidth: isZoomed ? '12rem' : '0',
-            opacity: isZoomed ? 1 : 0,
-          }}
-          aria-hidden={!isZoomed}
-          onFocus={() => {
-            hadFocusInCollapsibleRef.current = true
-          }}
-          onBlur={(e) => {
-            // Disabling a focused button blurs it with no relatedTarget, so the
-            // flag must survive that case for the effect above to rescue focus.
-            if (e.relatedTarget) hadFocusInCollapsibleRef.current = false
-          }}
-        >
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={t('fitToWindow')}
-            aria-label={t('fitToWindow')}
-            isDisabled={!isZoomed}
-            onPress={onResetZoom}
-          >
-            <RiFullscreenExitLine size={20} />
-          </Button>
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={t('zoomOutWithShortcut', {
-              shortcut: wheelShortcut,
-            })}
-            aria-label={t('zoomOut')}
-            isDisabled={!isZoomed || !canZoomOut}
-            onPress={onZoomOut}
-          >
-            <RiZoomOutLine size={20} />
-          </Button>
-          {/* Visual only - zoom level is announced via useScreenReaderAnnounce. */}
-          <span
-            aria-hidden="true"
-            className={css({
-              color: 'white',
-              fontSize: '0.8125rem',
-              fontWeight: 500,
-              minWidth: '3.25rem',
-              textAlign: 'center',
-              userSelect: 'none',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '0 0.25rem',
-              whiteSpace: 'nowrap',
-            })}
-          >
-            {zoomPercentage} %
-          </span>
-        </div>
-        <Button
-          ref={zoomInButtonRef}
-          size="sm"
-          variant="primaryTextDark"
-          square
-          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcut })}
-          aria-label={t('zoomIn')}
-          isDisabled={!canZoomIn}
-          onPress={onZoomIn}
-        >
-          <RiZoomInLine size={20} />
-        </Button>
-        {isFullscreenAvailable && (
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
-            aria-label={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
-            onPress={toggleFullScreen}
-          >
-            {isFullscreen ? (
-              <RiCollapseDiagonalLine size={20} />
-            ) : (
-              <RiExpandDiagonalLine size={20} />
-            )}
-          </Button>
-        )}
-      </Toolbar>
-    </div>
-  )
-}

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

@@ -1,106 +0,0 @@
-import { css } from '@/styled-system/css'
-import { type TrackReference } from '@livekit/components-core'
-import { useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { ScreenShareZoomControls } from './ScreenShareZoomControls'
-import { ScreenShareVideoTrack } from './ScreenShareVideoTrack'
-
-interface ScreenShareZoomableVideoProps {
-  trackRef: TrackReference
-  tileRef: React.RefObject<HTMLDivElement | null>
-  onSubscriptionStatusChanged: (subscribed: boolean) => void
-  manageSubscription?: boolean
-}
-
-export const ScreenShareZoomableVideo = ({
-  trackRef,
-  tileRef,
-  onSubscriptionStatusChanged,
-  manageSubscription,
-}: ScreenShareZoomableVideoProps) => {
-  const zoom = useScreenShareZoom()
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
-  const announce = useScreenReaderAnnounce()
-
-  // SR announcement: announce zoom level on change, with a one-time pan hint
-  // on the first zoom above 100 % per session.
-  const prevZoomRef = useRef(zoom.zoomPercentage)
-  const hasAnnouncedPanHint = useRef(false)
-  useEffect(() => {
-    if (prevZoomRef.current === zoom.zoomPercentage) return
-    const wasAtDefault = prevZoomRef.current <= 100
-    prevZoomRef.current = zoom.zoomPercentage
-
-    if (wasAtDefault && zoom.isZoomed && !hasAnnouncedPanHint.current) {
-      hasAnnouncedPanHint.current = true
-      announce(t('panHint', { level: zoom.zoomPercentage }), 'polite')
-    } else {
-      announce(t('currentZoomLevel', { level: zoom.zoomPercentage }), 'polite')
-    }
-
-    if (!zoom.isZoomed) hasAnnouncedPanHint.current = false
-  }, [zoom.zoomPercentage, zoom.isZoomed, announce, t])
-
-  // Attach keyboard listener on the tile container (has tabIndex=0).
-  useEffect(() => {
-    const el = tileRef.current
-    if (!el) return
-    el.addEventListener('keydown', zoom.handleKeyDown)
-    return () => el.removeEventListener('keydown', zoom.handleKeyDown)
-  }, [tileRef, zoom.handleKeyDown])
-
-  // Native wheel listener with { passive: false } so preventDefault works.
-  useEffect(() => {
-    const el = zoom.surfaceElRef.current
-    if (!el) return
-    el.addEventListener('wheel', zoom.handleWheel, { passive: false })
-    return () => el.removeEventListener('wheel', zoom.handleWheel)
-  }, [zoom.handleWheel, zoom.surfaceElRef])
-
-  return (
-    <>
-      <div
-        ref={zoom.surfaceElRef}
-        className={css({
-          width: '100%',
-          height: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          userSelect: 'none',
-          // Leaves the browser's native pinch-zoom available on touch devices
-          // while still routing single-pointer drags to useMove for panning.
-          touchAction: 'pinch-zoom',
-        })}
-        {...zoom.moveProps}
-      >
-        <div
-          ref={zoom.transformElRef}
-          style={{
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none',
-            transformOrigin: 'center center',
-          }}
-        >
-          <ScreenShareVideoTrack
-            trackRef={trackRef}
-            onSubscriptionStatusChanged={onSubscriptionStatusChanged}
-            manageSubscription={manageSubscription}
-          />
-        </div>
-      </div>
-      <ScreenShareZoomControls
-        containerRef={tileRef}
-        isZoomed={zoom.isZoomed}
-        zoomPercentage={zoom.zoomPercentage}
-        canZoomIn={zoom.canZoomIn}
-        canZoomOut={zoom.canZoomOut}
-        onZoomIn={zoom.zoomIn}
-        onZoomOut={zoom.zoomOut}
-        onResetZoom={zoom.resetZoom}
-      />
-    </>
-  )
-}

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

@@ -2,23 +2,23 @@ import { RiQuestionLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { Crisp } from 'crisp-sdk-web'
-import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'
+import {
+  useIsSupportEnabled,
+  openSupportChat,
+} from '@/features/support/hooks/useSupport'
 
 export const SupportMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const isSupportEnabled = useIsSupportEnabled()
 
-  if (!isSupportEnabled || !Crisp) {
+  if (!isSupportEnabled) {
     return
   }
 
   return (
     <MenuItem
       className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => {
-        Crisp?.chat.open()
-      }}
+      onAction={openSupportChat}
     >
       <RiQuestionLine size={20} />
       {t('support')}

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

@@ -1,322 +0,0 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react'
-import { useMove } from 'react-aria'
-import type { MoveMoveEvent } from '@react-types/shared'
-import {
-  FULL_PICTURE_RATIO,
-  MIN_ZOOM,
-  PAN_STEP,
-  WHEEL_ZOOM_SPEED,
-  ZOOM_STEP,
-  type PanOffset,
-  type ZoomSnapshot,
-  buildZoomSnapshot,
-  clampPan,
-  clampZoom,
-  getCursorFromZoomState,
-  getCursorPercentsFromWheelEvent,
-  getPanDeltaPercentsFromMove,
-  getPictureRatio,
-  getWheelPanOffset,
-  getZoomTransform,
-} from '../utils/screenShareZoom'
-
-/**
- * Manages zoom and pan state for a remote screen share.
- *
- * Performance: zoom/pan live in refs and are applied imperatively to the DOM
- * (via transformElRef / surfaceElRef) so the hot path (drag, wheel) never
- * triggers a React re-render. A useSyncExternalStore snapshot is flushed only
- * when the toolbar UI needs to update (zoom level change, drag end).
- *
- * Drag/touch panning is handled by react-aria's useMove (moveProps).
- * The wheel listener (non-passive) zooms on Ctrl/Cmd+scroll and pans on a
- * two-finger trackpad scroll once zoomed.
- * Arrow key panning and +/-/0 zoom are on a keydown listener attached to the
- * tile container (which has tabIndex=0 and focus).
- */
-export const useScreenShareZoom = () => {
-  const zoomRef = useRef(MIN_ZOOM)
-  const panRef = useRef<PanOffset>({ x: 0, y: 0 })
-  const draggingRef = useRef(false)
-
-  // The consumer binds these to the inner transform div and the outer drag surface.
-  const transformElRef = useRef<HTMLDivElement | null>(null)
-  const surfaceElRef = useRef<HTMLDivElement | null>(null)
-
-  // Snapshot store: subscribers are notified only on explicit flush() calls.
-  const snapshotRef = useRef<ZoomSnapshot>(
-    buildZoomSnapshot(MIN_ZOOM, { x: 0, y: 0 }, false)
-  )
-  const listenersRef = useRef(new Set<() => void>())
-
-  const subscribe = useCallback((cb: () => void) => {
-    listenersRef.current.add(cb)
-    return () => {
-      listenersRef.current.delete(cb)
-    }
-  }, [])
-
-  const getSnapshot = useCallback(() => snapshotRef.current, [])
-
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-
-  const flush = useCallback(() => {
-    snapshotRef.current = buildZoomSnapshot(
-      zoomRef.current,
-      panRef.current,
-      draggingRef.current
-    )
-    listenersRef.current.forEach((cb) => cb())
-  }, [])
-
-  const applyTransform = useCallback(() => {
-    const el = transformElRef.current
-    if (!el) return
-    el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
-  }, [])
-
-  // The video is letterboxed inside the surface by object-fit: contain, so the
-  // pan bounds depend on how much of the surface the picture actually covers.
-  // Read live rather than cached: both the tile and the shared resolution can
-  // change at any time.
-  const readPictureRatio = useCallback(() => {
-    const surface = surfaceElRef.current
-    const video = transformElRef.current?.querySelector('video')
-    if (!surface || !video) return FULL_PICTURE_RATIO
-    return getPictureRatio(
-      surface.clientWidth,
-      surface.clientHeight,
-      video.videoWidth,
-      video.videoHeight
-    )
-  }, [])
-
-  const applyCursor = useCallback(() => {
-    const el = surfaceElRef.current
-    if (!el) return
-    el.style.cursor = getCursorFromZoomState(
-      zoomRef.current,
-      draggingRef.current
-    )
-  }, [])
-
-  // After the video moves to the other window, write the current zoom back
-  // on the new nodes (otherwise it looks like 100 % until the next scroll).
-  const resync = useCallback(() => {
-    panRef.current = clampPan(
-      panRef.current,
-      zoomRef.current,
-      readPictureRatio()
-    )
-    applyTransform()
-    applyCursor()
-    flush()
-  }, [applyCursor, applyTransform, flush, readPictureRatio])
-
-  const setZoom = useCallback(
-    (next: number) => {
-      zoomRef.current = next
-      panRef.current =
-        next <= MIN_ZOOM
-          ? { x: 0, y: 0 }
-          : clampPan(panRef.current, next, readPictureRatio())
-      applyTransform()
-      applyCursor()
-      flush()
-    },
-    [applyTransform, applyCursor, flush, readPictureRatio]
-  )
-
-  const zoomIn = useCallback(
-    () => setZoom(clampZoom(zoomRef.current + ZOOM_STEP)),
-    [setZoom]
-  )
-
-  const zoomOut = useCallback(
-    () => setZoom(clampZoom(zoomRef.current - ZOOM_STEP)),
-    [setZoom]
-  )
-
-  const resetZoom = useCallback(() => setZoom(MIN_ZOOM), [setZoom])
-
-  // Must be attached with { passive: false } so preventDefault() blocks
-  // the browser's native Ctrl+scroll page zoom. Trackpad pinch arrives
-  // here as a wheel event with ctrl/cmd already set.
-  const handleWheel = useCallback(
-    (e: WheelEvent) => {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault()
-        e.stopPropagation()
-
-        const target = e.currentTarget as HTMLElement
-        const prev = zoomRef.current
-        const delta = -e.deltaY * WHEEL_ZOOM_SPEED
-        const next = clampZoom(prev + delta)
-
-        if (next <= MIN_ZOOM) {
-          zoomRef.current = MIN_ZOOM
-          panRef.current = { x: 0, y: 0 }
-        } else {
-          const { cursorXPercent, cursorYPercent } =
-            getCursorPercentsFromWheelEvent(e, target)
-          zoomRef.current = next
-          panRef.current = getWheelPanOffset({
-            pan: panRef.current,
-            prevZoom: prev,
-            nextZoom: next,
-            cursorXPercent,
-            cursorYPercent,
-            ratio: readPictureRatio(),
-          })
-        }
-
-        applyTransform()
-        applyCursor()
-        flush()
-        return
-      }
-
-      // Two-finger trackpad scroll: pan only once zoomed, otherwise leave
-      // the event alone so the page can still scroll.
-      if (zoomRef.current <= MIN_ZOOM) return
-
-      const el = surfaceElRef.current
-      if (!el) return
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
-        -e.deltaX,
-        -e.deltaY,
-        el
-      )
-      panRef.current = clampPan(
-        {
-          x: panRef.current.x + deltaXPercent,
-          y: panRef.current.y + deltaYPercent,
-        },
-        zoomRef.current,
-        readPictureRatio()
-      )
-      applyTransform()
-    },
-    [applyTransform, applyCursor, flush, readPictureRatio]
-  )
-
-  // useMove handles mouse drag + touch pan. Keyboard arrows are not handled
-  // here because moveProps is on the zoom surface, while focus is on the tile
-  // container, see handleKeyDown below.
-  const { moveProps } = useMove({
-    onMoveStart() {
-      if (zoomRef.current <= MIN_ZOOM) return
-      draggingRef.current = true
-      applyCursor()
-      flush()
-    },
-    onMove(e: MoveMoveEvent) {
-      if (zoomRef.current <= MIN_ZOOM) return
-
-      const el = surfaceElRef.current
-      if (!el) return
-
-      const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
-        e.deltaX,
-        e.deltaY,
-        el
-      )
-
-      panRef.current = clampPan(
-        {
-          x: panRef.current.x + deltaXPercent,
-          y: panRef.current.y + deltaYPercent,
-        },
-        zoomRef.current,
-        readPictureRatio()
-      )
-
-      applyTransform()
-      // Mouse drag: skip flush (imperative-only) to avoid re-renders per frame.
-      // Keyboard: flush so the toolbar reflects the updated position.
-      if (e.pointerType === 'keyboard') {
-        flush()
-      }
-    },
-    onMoveEnd() {
-      draggingRef.current = false
-      applyTransform()
-      applyCursor()
-      flush()
-    },
-  })
-
-  const panBy = useCallback(
-    (dx: number, dy: number) => {
-      panRef.current = clampPan(
-        { x: panRef.current.x + dx, y: panRef.current.y + dy },
-        zoomRef.current,
-        readPictureRatio()
-      )
-      applyTransform()
-      flush()
-    },
-    [applyTransform, flush, readPictureRatio]
-  )
-
-  // Attached to the tile container (not the zoom surface) where keyboard
-  // focus lives. Arrows pan, +/-/0 zoom.
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      const isZoomed = zoomRef.current > MIN_ZOOM
-      if (!isZoomed && e.key !== '+' && e.key !== '=') return
-
-      if (e.key.startsWith('Arrow') && e.target !== e.currentTarget) return
-
-      switch (e.key) {
-        case 'ArrowLeft':
-          e.preventDefault()
-          panBy(PAN_STEP, 0)
-          break
-        case 'ArrowRight':
-          e.preventDefault()
-          panBy(-PAN_STEP, 0)
-          break
-        case 'ArrowUp':
-          e.preventDefault()
-          panBy(0, PAN_STEP)
-          break
-        case 'ArrowDown':
-          e.preventDefault()
-          panBy(0, -PAN_STEP)
-          break
-        case '+':
-        case '=':
-          e.preventDefault()
-          zoomIn()
-          break
-        case '-':
-          e.preventDefault()
-          zoomOut()
-          break
-        case '0':
-          e.preventDefault()
-          resetZoom()
-          break
-      }
-    },
-    [panBy, zoomIn, zoomOut, resetZoom]
-  )
-
-  return {
-    ...snapshot,
-    transformElRef,
-    surfaceElRef,
-    moveProps,
-    zoomIn,
-    zoomOut,
-    resetZoom,
-    resync,
-    handleWheel,
-    handleKeyDown,
-  }
-}

src/frontend/src/features/rooms/livekit/utils/screenShareZoom.ts

@@ -1,154 +0,0 @@
-export const MIN_ZOOM = 1
-export const MAX_ZOOM = 4
-export const ZOOM_STEP = 0.1
-export const WHEEL_ZOOM_SPEED = 0.002
-export const PAN_STEP = 5
-
-// Half of a 100 % axis. Geometry, not a tunable: it is both the centre the
-// cursor offset is measured from and the half extent the pan is clamped
-// against, so the two stay consistent by construction.
-export const HALF_EXTENT_PERCENT = 50
-
-export interface PanOffset {
-  x: number
-  y: number
-}
-
-// Fraction of the surface each axis of the picture covers, in [0, 1].
-export interface PictureRatio {
-  x: number
-  y: number
-}
-
-export const FULL_PICTURE_RATIO: PictureRatio = { x: 1, y: 1 }
-
-export interface ZoomSnapshot {
-  zoomLevel: number
-  zoomPercentage: number
-  panOffset: PanOffset
-  isZoomed: boolean
-  isDragging: boolean
-  canZoomIn: boolean
-  canZoomOut: boolean
-}
-
-export const clampZoom = (value: number) => {
-  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value))
-}
-
-// Restrict pan so the picture always covers the view. Pan is a % of the
-// surface, in which object-fit: contain letterboxes the picture: its half
-// extent is `ratio * 50` against a view half extent of 50, and scaling by
-// `zoom` must keep `zoom * (ratio * 50 - |pan|) >= 50`. An axis whose picture
-// is still smaller than the view is pinned to 0, keeping the bars symmetric.
-export const clampPan = (
-  pan: PanOffset,
-  zoom: number,
-  ratio: PictureRatio
-): PanOffset => {
-  const maxPanX = Math.max(0, (ratio.x - 1 / zoom) * HALF_EXTENT_PERCENT)
-  const maxPanY = Math.max(0, (ratio.y - 1 / zoom) * HALF_EXTENT_PERCENT)
-  return {
-    x: Math.max(-maxPanX, Math.min(maxPanX, pan.x)),
-    y: Math.max(-maxPanY, Math.min(maxPanY, pan.y)),
-  }
-}
-
-// Per-axis fraction of the surface covered by an object-fit: contain picture.
-export const getPictureRatio = (
-  surfaceWidth: number,
-  surfaceHeight: number,
-  videoWidth: number,
-  videoHeight: number
-): PictureRatio => {
-  if (!surfaceWidth || !surfaceHeight || !videoWidth || !videoHeight) {
-    return FULL_PICTURE_RATIO
-  }
-  const surfaceRatio = surfaceWidth / surfaceHeight
-  const videoRatio = videoWidth / videoHeight
-  return surfaceRatio > videoRatio
-    ? { x: videoRatio / surfaceRatio, y: 1 }
-    : { x: 1, y: surfaceRatio / videoRatio }
-}
-
-export const buildZoomSnapshot = (
-  zoom: number,
-  pan: PanOffset,
-  dragging: boolean
-): ZoomSnapshot => {
-  return {
-    zoomLevel: zoom,
-    zoomPercentage: Math.round(zoom * 100),
-    panOffset: pan,
-    isZoomed: zoom > MIN_ZOOM,
-    isDragging: dragging,
-    canZoomIn: zoom < MAX_ZOOM,
-    canZoomOut: zoom > MIN_ZOOM,
-  }
-}
-
-export const getZoomTransform = (zoom: number, pan: PanOffset) => {
-  return `scale(${zoom}) translate(${pan.x}%, ${pan.y}%)`
-}
-
-export const getCursorFromZoomState = (zoom: number, dragging: boolean) => {
-  if (zoom <= MIN_ZOOM) return 'default'
-  return dragging ? 'grabbing' : 'grab'
-}
-
-// Keep the content point under the cursor anchored while zooming. With
-// `scale(z) translate(pan%)`, a point at `offset` from the center renders at
-// `z * (offset + pan)`, so holding it still gives:
-// pan' = pan + cursor * (1 / zoom' - 1 / zoom).
-export const getWheelPanOffset = ({
-  pan,
-  prevZoom,
-  nextZoom,
-  cursorXPercent,
-  cursorYPercent,
-  ratio,
-}: {
-  pan: PanOffset
-  prevZoom: number
-  nextZoom: number
-  cursorXPercent: number
-  cursorYPercent: number
-  ratio: PictureRatio
-}): PanOffset => {
-  const panShift = 1 / nextZoom - 1 / prevZoom
-  return clampPan(
-    {
-      x: pan.x + cursorXPercent * panShift,
-      y: pan.y + cursorYPercent * panShift,
-    },
-    nextZoom,
-    ratio
-  )
-}
-
-// Convert cursor pixel position to a % offset from the surface center.
-export const getCursorPercentsFromWheelEvent = (
-  e: WheelEvent,
-  target: HTMLElement
-) => {
-  const rect = target.getBoundingClientRect()
-  return {
-    cursorXPercent:
-      ((e.clientX - rect.left) / rect.width) * 100 - HALF_EXTENT_PERCENT,
-    cursorYPercent:
-      ((e.clientY - rect.top) / rect.height) * 100 - HALF_EXTENT_PERCENT,
-  }
-}
-
-// Convert useMove pixel deltas to % of the surface dimensions.
-export const getPanDeltaPercentsFromMove = (
-  deltaX: number,
-  deltaY: number,
-  surface: HTMLElement
-) => {
-  const rect = surface.getBoundingClientRect()
-  return {
-    deltaXPercent: (deltaX / rect.width) * 100,
-    deltaYPercent: (deltaY / rect.height) * 100,
-  }
-}

src/frontend/src/features/shortcuts/catalog.ts

@@ -16,10 +16,6 @@ export type ShortcutId =
   | 'recording'
   | 'reaction'
   | 'fullscreen'
-  | 'zoom-in'
-  | 'zoom-out'
-  | 'zoom-reset'
-  | 'zoom-pan'
 
 export const getShortcutDescriptorById = (id: ShortcutId) =>
   shortcutCatalog.find((item) => item.id === id)
@@ -28,7 +24,7 @@ export type ShortcutDescriptor = {
   id: ShortcutId
   category: ShortcutCategory
   shortcut?: Shortcut
-  kind?: 'press' | 'longPress' | 'arrows'
+  kind?: 'press' | 'longPress'
   code?: string // used when kind === 'longPress' (KeyboardEvent.code)
   description?: string
 }
@@ -90,27 +86,4 @@ export const shortcutCatalog: ShortcutDescriptor[] = [
     category: 'interaction',
     shortcut: { key: 'P', ctrlKey: true, shiftKey: true },
   },
-  // Screen share zoom keys are unmodified, so they are bound on the focused
-  // tile instead of being registered globally. They are listed here so the
-  // shortcuts panel stays exhaustive.
-  {
-    id: 'zoom-in',
-    category: 'interaction',
-    shortcut: { key: '+' },
-  },
-  {
-    id: 'zoom-out',
-    category: 'interaction',
-    shortcut: { key: '-' },
-  },
-  {
-    id: 'zoom-reset',
-    category: 'interaction',
-    shortcut: { key: '0' },
-  },
-  {
-    id: 'zoom-pan',
-    category: 'interaction',
-    kind: 'arrows',
-  },
 ]

src/frontend/src/features/shortcuts/formatLabels.ts

@@ -25,7 +25,6 @@ export const formatShortcutLabelForSR = (
     shiftLabel,
     plusLabel,
     noShortcutLabel,
-    keyLabels,
   }: {
     controlLabel: string
     commandLabel: string
@@ -34,12 +33,10 @@ export const formatShortcutLabelForSR = (
     shiftLabel: string
     plusLabel: string
     noShortcutLabel: string
-    // Spelled-out names for keys screen readers may skip or mispronounce.
-    keyLabels?: Record<string, string>
   }
 ) => {
   if (!shortcut) return noShortcutLabel
-  const key = keyLabels?.[shortcut.key] ?? shortcut.key?.toUpperCase()
+  const key = shortcut.key?.toUpperCase()
   if (!key) return noShortcutLabel
   const ctrlWord = isMacintosh() ? commandLabel : controlLabel
   const altWord = isMacintosh() ? optionLabel : altLabel

src/frontend/src/features/shortcuts/hooks/useShortcutFormatting.ts

@@ -12,9 +12,6 @@ export const useShortcutFormatting = () => {
 
   const formatVisual = useCallback(
     (shortcut?: Shortcut, code?: string, kind?: string) => {
-      if (kind === 'arrows') {
-        return t('shortcutsPanel.visual.arrows')
-      }
       if (code && kind === 'longPress') {
         const label = getKeyLabelFromCode(code)
         return t('shortcutsPanel.visual.hold', { key: label || '?' })
@@ -26,9 +23,6 @@ export const useShortcutFormatting = () => {
 
   const formatForSR = useCallback(
     (shortcut?: Shortcut, code?: string, kind?: string) => {
-      if (kind === 'arrows') {
-        return t('shortcutsPanel.sr.arrows')
-      }
       if (code && kind === 'longPress') {
         const label = getKeyLabelFromCode(code)
         return t('shortcutsPanel.sr.hold', { key: label || '?' })
@@ -41,10 +35,6 @@ export const useShortcutFormatting = () => {
         shiftLabel: t('shortcutsPanel.sr.shift'),
         plusLabel: t('shortcutsPanel.sr.plus'),
         noShortcutLabel: t('shortcutsPanel.sr.noShortcut'),
-        keyLabels: {
-          '+': t('shortcutsPanel.sr.plusKey'),
-          '-': t('shortcutsPanel.sr.minusKey'),
-        },
       })
     },
     [t]

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

@@ -1,20 +1,45 @@
-import { useEffect } from 'react'
-import { Crisp } from 'crisp-sdk-web'
+import { useEffect, useState } from 'react'
 import { type ApiUser } from '@/features/auth/api/ApiUser'
 import { useUser } from '@/features/auth/api/useUser'
 import { useConfig } from '@/api/useConfig'
 
+type CrispSdk = (typeof import('crisp-sdk-web'))['Crisp']
+
+let crisp: CrispSdk | undefined
+let crispPromise: Promise<CrispSdk> | undefined
+
+const loadCrisp = (): Promise<CrispSdk> => {
+  crispPromise ??= import('crisp-sdk-web')
+    .then((module) => {
+      crisp = module.Crisp
+      return module.Crisp
+    })
+    .catch((error) => {
+      crispPromise = undefined
+      throw error
+    })
+
+  return crispPromise
+}
+
+export const openSupportChat = () => {
+  if (!crisp?.isCrispInjected()) return
+  crisp.chat.open()
+}
+
 export const initializeSupportSession = (user: ApiUser) => {
-  if (!Crisp.isCrispInjected()) return
+  if (!crisp?.isCrispInjected()) return
+
   const { id, email } = user
-  Crisp.setTokenId(`meet-${id}`)
-  if (email) Crisp.user.setEmail(email)
+  crisp.setTokenId(`meet-${id}`)
+  if (email) crisp.user.setEmail(email)
 }
 
 export const terminateSupportSession = () => {
-  if (!Crisp.isCrispInjected()) return
-  Crisp.setTokenId()
-  Crisp.session.reset()
+  if (!crisp?.isCrispInjected()) return
+
+  crisp.setTokenId()
+  crisp.session.reset()
 }
 
 export type useSupportProps = {
@@ -22,26 +47,70 @@ export type useSupportProps = {
   isDisabled?: boolean
 }
 
-// Configure Crisp chat for real-time support across all pages.
+const IDLE_TIMEOUT_MS = 10_000
+
+const scheduleWhenIdle = (callback: () => void): (() => void) => {
+  if (typeof window.requestIdleCallback === 'function') {
+    const handle = window.requestIdleCallback(callback, {
+      timeout: IDLE_TIMEOUT_MS,
+    })
+    return () => window.cancelIdleCallback(handle)
+  }
+
+  const handle = window.setTimeout(callback, 1)
+  return () => window.clearTimeout(handle)
+}
+
 export const useSupport = ({ id, isDisabled }: useSupportProps) => {
   const { user } = useUser()
+  const [isInjected, setIsInjected] = useState(
+    () => crisp?.isCrispInjected() ?? false
+  )
 
   useEffect(() => {
-    if (!id || Crisp.isCrispInjected() || isDisabled) return
-    Crisp.configure(id)
-    Crisp.setHideOnMobile(true)
+    if (!id || isDisabled) return
+
+    if (crisp?.isCrispInjected()) {
+      setIsInjected(true)
+      return
+    }
+
+    let cancelled = false
+
+    const cancelIdle = scheduleWhenIdle(() => {
+      void loadCrisp()
+        .then((sdk) => {
+          if (cancelled) return
+
+          if (!sdk.isCrispInjected()) {
+            sdk.configure(id)
+            sdk.setHideOnMobile(true)
+          }
+
+          setIsInjected(true)
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            console.error('Failed to initialize support chat', error)
+          }
+        })
+    })
+
+    return () => {
+      cancelled = true
+      cancelIdle()
+    }
   }, [id, isDisabled])
 
   useEffect(() => {
-    if (!user) return
+    if (!user || !isInjected || isDisabled) return
     initializeSupportSession(user)
-  }, [user])
+  }, [user, isInjected, isDisabled])
 
   return null
 }
 
-// Some users may block Crisp chat widget with browser ad blockers or anti-tracking plugins
-// So we need to safely check if Crisp is available and not blocked
+// Some users block the chat widget, so check its availability safely.
 const isCrispAvailable = () => {
   try {
     return !!window?.$crisp?.is

src/frontend/src/locales/de/rooms.json

@@ -756,24 +756,6 @@
     "muteParticipant": "{{name}} stummschalten",
     "fullScreen": "Vollbild"
   },
-  "screenShareZoom": {
-    "toolbarLabel": "Zoom-Steuerung für Bildschirmfreigabe",
-    "zoomIn": "Vergrößern",
-    "zoomInWithShortcut": "Vergrößern ({{shortcut}})",
-    "zoomOut": "Verkleinern",
-    "zoomOutWithShortcut": "Verkleinern ({{shortcut}})",
-    "wheelShortcut": "Steuerung plus Mausrad",
-    "wheelShortcutMac": "Befehl plus Mausrad",
-    "wheelShortcutHint": "Tastenkürzel: Steuerung plus Mausrad zum Vergrößern oder Verkleinern.",
-    "wheelShortcutHintMac": "Tastenkürzel: Befehl plus Mausrad zum Vergrößern oder Verkleinern.",
-    "fitToWindow": "An Fenster anpassen",
-    "fullScreen": "Vollbild",
-    "exitFullScreen": "Vollbild beenden",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Mit der Maus ziehen oder den Fokus zurück auf die Bildschirmfreigabe setzen und mit den Pfeiltasten im Bild navigieren.",
-    "fullScreenEntered": "Vollbild aktiviert",
-    "fullScreenExited": "Vollbild deaktiviert"
-  },
   "shortcutsPanel": {
     "title": "Tastenkürzel",
     "categories": {
@@ -793,11 +775,7 @@
       "raise-hand": "Hand heben oder senken",
       "toggle-chat": "Chat anzeigen/ausblenden",
       "toggle-participants": "Teilnehmende anzeigen/ausblenden",
-      "open-shortcuts-settings": "Tastenkürzel-Einstellungen öffnen",
-      "zoom-in": "In einen geteilten Bildschirm hineinzoomen",
-      "zoom-out": "Aus einem geteilten Bildschirm herauszoomen",
-      "zoom-reset": "Zoom des geteilten Bildschirms zurücksetzen",
-      "zoom-pan": "Im gezoomten geteilten Bildschirm navigieren"
+      "open-shortcuts-settings": "Tastenkürzel-Einstellungen öffnen"
     },
     "sr": {
       "control": "Steuerung",
@@ -807,14 +785,10 @@
       "shift": "Umschalt",
       "plus": "plus",
       "hold": "Halte {{key}} gedrückt",
-      "arrows": "Pfeiltasten",
-      "plusKey": "Plus-Taste",
-      "minusKey": "Minus-Taste",
       "noShortcut": "Kein Tastenkürzel"
     },
     "visual": {
-      "hold": "Halte {{key}} gedrückt",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Halte {{key}} gedrückt"
     }
   },
   "fullScreenWarning": {

src/frontend/src/locales/en/rooms.json

@@ -756,24 +756,6 @@
     "muteParticipant": "Mute {{name}}",
     "fullScreen": "Full screen"
   },
-  "screenShareZoom": {
-    "toolbarLabel": "Screen share zoom controls",
-    "zoomIn": "Zoom in",
-    "zoomInWithShortcut": "Zoom in ({{shortcut}})",
-    "zoomOut": "Zoom out",
-    "zoomOutWithShortcut": "Zoom out ({{shortcut}})",
-    "wheelShortcut": "Control plus scroll wheel",
-    "wheelShortcutMac": "Command plus scroll wheel",
-    "wheelShortcutHint": "Shortcut: Control plus scroll wheel to zoom in or out.",
-    "wheelShortcutHintMac": "Shortcut: Command plus scroll wheel to zoom in or out.",
-    "fitToWindow": "Fit to window",
-    "fullScreen": "Full screen",
-    "exitFullScreen": "Exit full screen",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Drag with mouse, or move focus back to the screen share and use arrow keys to navigate the picture.",
-    "fullScreenEntered": "Full screen enabled",
-    "fullScreenExited": "Full screen disabled"
-  },
   "shortcutsPanel": {
     "title": "Keyboard shortcuts",
     "categories": {
@@ -793,11 +775,7 @@
       "raise-hand": "Raise or lower hand",
       "toggle-chat": "Toggle chat",
       "toggle-participants": "Toggle participants",
-      "open-shortcuts-settings": "Open shortcuts settings",
-      "zoom-in": "Zoom in on a shared screen",
-      "zoom-out": "Zoom out on a shared screen",
-      "zoom-reset": "Reset the shared screen zoom",
-      "zoom-pan": "Move around a zoomed shared screen"
+      "open-shortcuts-settings": "Open shortcuts settings"
     },
     "sr": {
       "control": "Control",
@@ -807,14 +785,10 @@
       "shift": "Shift",
       "plus": "plus",
       "hold": "Hold {{key}}",
-      "arrows": "Arrow keys",
-      "plusKey": "Plus key",
-      "minusKey": "Minus key",
       "noShortcut": "No shortcut"
     },
     "visual": {
-      "hold": "Hold {{key}}",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Hold {{key}}"
     }
   },
   "fullScreenWarning": {

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

@@ -756,24 +756,6 @@
     "muteParticipant": "Couper le micro de {{name}}",
     "fullScreen": "Plein écran"
   },
-  "screenShareZoom": {
-    "toolbarLabel": "Contrôles de zoom du partage d'écran",
-    "zoomIn": "Zoomer",
-    "zoomInWithShortcut": "Zoomer ({{shortcut}})",
-    "zoomOut": "Dézoomer",
-    "zoomOutWithShortcut": "Dézoomer ({{shortcut}})",
-    "wheelShortcut": "Contrôle plus molette",
-    "wheelShortcutMac": "Commande plus molette",
-    "wheelShortcutHint": "Raccourci : Contrôle plus molette pour zoomer ou dézoomer.",
-    "wheelShortcutHintMac": "Raccourci : Commande plus molette pour zoomer ou dézoomer.",
-    "fitToWindow": "Ajuster à la fenêtre",
-    "fullScreen": "Plein écran",
-    "exitFullScreen": "Quitter le plein écran",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Glissez avec la souris, ou revenez sur le partage d'écran et utilisez les touches fléchées pour naviguer dans l'image.",
-    "fullScreenEntered": "Plein écran activé",
-    "fullScreenExited": "Plein écran désactivé"
-  },
   "shortcutsPanel": {
     "title": "Raccourcis clavier",
     "categories": {
@@ -793,11 +775,7 @@
       "raise-hand": "Lever ou baisser la main",
       "toggle-chat": "Afficher/Masquer le chat",
       "toggle-participants": "Afficher/Masquer les participants",
-      "open-shortcuts-settings": "Ouvrir les réglages des raccourcis",
-      "zoom-in": "Zoomer sur un écran partagé",
-      "zoom-out": "Dézoomer sur un écran partagé",
-      "zoom-reset": "Réinitialiser le zoom de l’écran partagé",
-      "zoom-pan": "Se déplacer dans un écran partagé zoomé"
+      "open-shortcuts-settings": "Ouvrir les réglages des raccourcis"
     },
     "sr": {
       "control": "Contrôle",
@@ -807,14 +785,10 @@
       "shift": "Majuscule",
       "plus": "plus",
       "hold": "Maintenir {{key}}",
-      "arrows": "Touches fléchées",
-      "plusKey": "Touche plus",
-      "minusKey": "Touche moins",
       "noShortcut": "Aucun raccourci"
     },
     "visual": {
-      "hold": "Maintenir {{key}}",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Maintenir {{key}}"
     }
   },
   "fullScreenWarning": {

src/frontend/src/locales/nl/rooms.json

@@ -756,24 +756,6 @@
     "muteParticipant": "Demp {{name}}",
     "fullScreen": "Volledig scherm"
   },
-  "screenShareZoom": {
-    "toolbarLabel": "Zoombediening voor schermdeling",
-    "zoomIn": "Inzoomen",
-    "zoomInWithShortcut": "Inzoomen ({{shortcut}})",
-    "zoomOut": "Uitzoomen",
-    "zoomOutWithShortcut": "Uitzoomen ({{shortcut}})",
-    "wheelShortcut": "Control plus scrollwiel",
-    "wheelShortcutMac": "Command plus scrollwiel",
-    "wheelShortcutHint": "Sneltoets: Control plus scrollwiel om in of uit te zoomen.",
-    "wheelShortcutHintMac": "Sneltoets: Command plus scrollwiel om in of uit te zoomen.",
-    "fitToWindow": "Aanpassen aan venster",
-    "fullScreen": "Volledig scherm",
-    "exitFullScreen": "Volledig scherm verlaten",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Sleep met de muis, of zet de focus terug op de schermdeling en gebruik de pijltjestoetsen om door het beeld te navigeren.",
-    "fullScreenEntered": "Volledig scherm ingeschakeld",
-    "fullScreenExited": "Volledig scherm uitgeschakeld"
-  },
   "shortcutsPanel": {
     "title": "Sneltoetsen",
     "categories": {
@@ -793,11 +775,7 @@
       "raise-hand": "Hand opsteken of laten zakken",
       "toggle-chat": "Chat tonen/verbergen",
       "toggle-participants": "Deelnemers tonen/verbergen",
-      "open-shortcuts-settings": "Sneltoets-instellingen openen",
-      "zoom-in": "Inzoomen op een gedeeld scherm",
-      "zoom-out": "Uitzoomen op een gedeeld scherm",
-      "zoom-reset": "Zoom van het gedeelde scherm herstellen",
-      "zoom-pan": "Navigeren in een ingezoomd gedeeld scherm"
+      "open-shortcuts-settings": "Sneltoets-instellingen openen"
     },
     "sr": {
       "control": "Control",
@@ -807,14 +785,10 @@
       "shift": "Shift",
       "plus": "plus",
       "hold": "Houd {{key}} ingedrukt",
-      "arrows": "Pijltoetsen",
-      "plusKey": "Plus-toets",
-      "minusKey": "Min-toets",
       "noShortcut": "Geen sneltoets"
     },
     "visual": {
-      "hold": "Houd {{key}} ingedrukt",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Houd {{key}} ingedrukt"
     }
   },
   "fullScreenWarning": {

src/frontend/src/utils/auxiliaryWindow.ts

@@ -1,90 +0,0 @@
-// Helpers for a separate window. Not the meeting PiP: that API allows only
-// one window, and it is already used. A blank popup has no CSS, so we copy
-// styles from the meeting.
-
-const AUXILIARY_ROOT_ID = 'root'
-
-export const copyDocumentChrome = (target: Window) => {
-  const { document: targetDoc } = target
-  document.head
-    .querySelectorAll('link[rel="stylesheet"], style')
-    .forEach((node) => {
-      targetDoc.head.appendChild(node.cloneNode(true))
-    })
-
-  targetDoc.documentElement.className = document.documentElement.className
-  targetDoc.documentElement.style.cssText =
-    document.documentElement.style.cssText
-  targetDoc.documentElement.setAttribute(
-    'lang',
-    document.documentElement.lang || 'en'
-  )
-
-  const theme = document.documentElement.dataset.lkTheme
-  if (theme) {
-    targetDoc.documentElement.dataset.lkTheme = theme
-  }
-}
-
-export const ensureAuxiliaryRoot = (
-  target: Window,
-  id = AUXILIARY_ROOT_ID
-) => {
-  const existing = target.document.getElementById(id)
-  if (existing) return existing
-
-  const root = target.document.createElement('div')
-  root.id = id
-  root.style.width = '100%'
-  root.style.height = '100%'
-  target.document.body.appendChild(root)
-  return root
-}
-
-export const initializeAuxiliaryWindow = (
-  target: Window,
-  { title, rootId = AUXILIARY_ROOT_ID }: { title: string; rootId?: string }
-) => {
-  copyDocumentChrome(target)
-  target.document.title = title
-  return ensureAuxiliaryRoot(target, rootId)
-}
-
-// Fill the window and reuse the meeting colors so it does not flash white.
-export const applyAuxiliaryWindowLayout = (target: Window) => {
-  const { document: targetDoc } = target
-  const sourceBody = getComputedStyle(document.body)
-
-  targetDoc.documentElement.style.height = '100%'
-  targetDoc.body.style.margin = '0'
-  targetDoc.body.style.height = '100%'
-  targetDoc.body.style.overflow = 'hidden'
-  targetDoc.body.style.backgroundColor = sourceBody.backgroundColor
-  targetDoc.body.style.color = sourceBody.color
-}
-
-// Match the shared screen size, but keep the window on one display.
-export const getAuxiliaryWindowSize = (
-  video?: Pick<HTMLVideoElement, 'videoWidth' | 'videoHeight'> | null
-) => {
-  const maxWidth = Math.max(320, Math.round(window.screen.availWidth * 0.9))
-  const maxHeight = Math.max(240, Math.round(window.screen.availHeight * 0.9))
-  const videoWidth = video?.videoWidth ?? 0
-  const videoHeight = video?.videoHeight ?? 0
-
-  if (videoWidth > 0 && videoHeight > 0) {
-    const scale = Math.min(maxWidth / videoWidth, maxHeight / videoHeight, 1)
-    return {
-      width: Math.max(320, Math.round(videoWidth * scale)),
-      height: Math.max(240, Math.round(videoHeight * scale)),
-    }
-  }
-
-  return {
-    width: Math.min(1280, maxWidth),
-    height: Math.min(720, maxHeight),
-  }
-}
-
-export const getAuxiliaryWindowFeatures = (width: number, height: number) =>
-  `popup=yes,width=${width},height=${height},resizable=yes,scrollbars=no,status=no,location=no,toolbar=no,menubar=no`