Breaking changes detected by snapshot tests.

Add screenshare button back to snapshot test.
Remove reaction button.

src/components/CallFooter.tsx

@@ -153,7 +153,7 @@ export const CallFooter: FC<FooterProps> = ({
     );
   }
 
-  if (reactionIdentifier) {
+  if (reactionIdentifier && reactionData) {
     buttons.push(
       <ReactionToggleButton
         size={buttonSize}

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,
   );
 

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}
     />

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>

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;