From bb2a6668564f86f08ea35d9e408acc0d9886ac1a Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Jul 2026 15:47:29 +0200
Subject: [PATCH] =?UTF-8?q?fixup!=20=E2=9C=A8(frontend)=20add=20ScreenShar?=
 =?UTF-8?q?eZoomableVideo=20component=20for=20zoomable=20screen=20shares?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ScreenShareVideoTrack.tsx      | 26 +++++++++++++++++++
 .../components/ScreenShareZoomableVideo.tsx   |  4 +--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/ScreenShareVideoTrack.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareVideoTrack.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareVideoTrack.tsx
new file mode 100644
index 00000000..5bafb478
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/ScreenShareVideoTrack.tsx
@@ -0,0 +1,26 @@
+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'
diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx
index bfbf2d77..68ca349a 100644
--- a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx
@@ -1,11 +1,11 @@
 import { css } from '@/styled-system/css'
-import { VideoTrack } from '@livekit/components-react'
 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
@@ -86,7 +86,7 @@ export const ScreenShareZoomableVideo = ({
             transition: zoom.isDragging ? 'none' : 'transform 150ms ease-out',
           }}
         >
-          <VideoTrack
+          <ScreenShareVideoTrack
             trackRef={trackRef}
             onSubscriptionStatusChanged={onSubscriptionStatusChanged}
             manageSubscription={manageSubscription}