From 8c5668bf1ae1b0df50184f95d7e05ac681fcabf9 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 14 Apr 2026 14:04:29 +0200
Subject: [PATCH] Breaking changes detected by snapshot tests. Add screenshare
 button back to snapshot test. Remove reaction button.

---
 src/components/CallFooter.tsx                   | 2 +-
 src/room/InCallView.test.tsx                    | 5 ++++-
 src/room/InCallView.tsx                         | 9 +++++----
 src/room/__snapshots__/InCallView.test.tsx.snap | 4 ++--
 src/state/CallViewModel/CallViewModel.ts        | 5 ++++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx
index 3bc3e34b..815411a1 100644
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -153,7 +153,7 @@ export const CallFooter: FC<FooterProps> = ({
     );
   }
 
-  if (reactionIdentifier) {
+  if (reactionIdentifier && reactionData) {
     buttons.push(
       <ReactionToggleButton
         size={buttonSize}
diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index e37ad27c..1b5ffd0a 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -121,7 +121,10 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const { vm, rtcSession } = getBasicCallViewModelEnvironment(
     [local, alice],
     undefined,
-    args.callViewModelOptions ?? {},
+    {
+      toggleScreensharing: () => {},
+      ...args.callViewModelOptions,
+    },
     args.mediaDevices,
   );
 
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 5ad1634a..6b1e57f8 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -567,25 +567,26 @@ export const InCallView: FC<InCallViewProps> = ({
   const footer = (
     <CallFooter
       ref={footerRef}
-      asOverlay={windowMode === "flat"}
       hidden={!showFooter}
       hideControls={!showControls}
+      asOverlay={windowMode === "flat"}
+      asPip={layout.type === "pip"}
       // Hide the logo for both embedded solutions. mobile: HeaderStyle.AppBar and desktop: HeaderStyle.None.
       hideLogo={headerStyle !== HeaderStyle.Standard}
-      asPip={layout.type === "pip"}
       layoutMode={gridMode}
       setLayoutMode={setGridMode}
-      openSettings={hideSettings ? undefined : openSettings}
       audioEnabled={audioEnabled}
-      videoEnabled={videoEnabled}
       toggleAudio={toggleAudio ?? undefined}
+      videoEnabled={videoEnabled}
       toggleVideo={toggleVideo ?? undefined}
       sharingScreen={sharingScreen}
       toggleScreenSharing={vm.toggleScreenSharing ?? undefined}
       reactionIdentifier={`${client.getUserId()}:${client.getDeviceId()}`}
       reactionData={supportsReactions ? vm : undefined}
       audioOutputSwitcher={audioOutputSwitcher ?? undefined}
+      openSettings={hideSettings ? undefined : openSettings}
       hangup={vm.hangup}
+      //Debug props
       debugTileLayout={debugTileLayout}
       tileStoreGeneration={tileStoreGeneration}
     />
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 76cd2560..63605d8b 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -412,7 +412,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
       </div>
-      <div
+      <form
         class="toggle layout"
       >
         <input
@@ -452,7 +452,7 @@ exports[`InCallView > rendering > renders 1`] = `
             d="M4 11a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 10V4q0-.424.288-.712A.97.97 0 0 1 4 3h6q.424 0 .713.288Q11 3.575 11 4v6q0 .424-.287.713A.97.97 0 0 1 10 11zm5-2V5H5v4zm5 12a.97.97 0 0 1-.713-.288A.97.97 0 0 1 13 20v-6q0-.424.287-.713A.97.97 0 0 1 14 13h6q.424 0 .712.287.288.288.288.713v6q0 .424-.288.712A.97.97 0 0 1 20 21zm5-2v-4h-4v4zM4 21a.97.97 0 0 1-.712-.288A.97.97 0 0 1 3 20v-6q0-.424.288-.713A.97.97 0 0 1 4 13h6q.424 0 .713.287.287.288.287.713v6q0 .424-.287.712A.97.97 0 0 1 10 21zm5-2v-4H5v4zm5-8a.97.97 0 0 1-.713-.287A.97.97 0 0 1 13 10V4q0-.424.287-.712A.97.97 0 0 1 14 3h6q.424 0 .712.288Q21 3.575 21 4v6q0 .424-.288.713A.97.97 0 0 1 20 11zm5-2V5h-4v4z"
           />
         </svg>
-      </div>
+      </form>
     </div>
   </div>
 </div>
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index fe65b68a..7bfe4630 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -173,6 +173,8 @@ export interface CallViewModelOptions {
   windowSize$?: Behavior<{ width: number; height: number }>;
   /** The version & compatibility mode of MatrixRTC that we should use. */
   matrixRTCMode$?: Behavior<MatrixRTCMode>;
+  /** Optional behavior overriding for the screensharing, for testing */
+  toggleScreensharing?: () => void;
 }
 
 // Do not play any sounds if the participant count has exceeded this
@@ -1506,7 +1508,8 @@ export function createCallViewModel$(
    * Callback to toggle screen sharing. If null, screen sharing is not possible.
    */
   // reassigned here to make it publicly accessible
-  const toggleScreenSharing = localMembership.toggleScreenSharing;
+  const toggleScreenSharing =
+    options.toggleScreensharing ?? localMembership.toggleScreenSharing;
 
   const errors$ = scope.behavior<{
     transportError?: ElementCallError;