[Release blocker] local tile switcher fix

change-beta/@azure-communication-react-9de05cab-d5e1-439d-9490-1ccb51ac4000.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Fix local camera switcher blockage with reactions overlay",
+  "comment": "fix local tile switcher action",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-9de05cab-d5e1-439d-9490-1ccb51ac4000.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Fix local camera switcher blockage with reactions overlay",
+  "comment": "fix local tile switcher action",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/MeetingReactionOverlay.tsx

@@ -112,7 +112,7 @@ export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.
 
   if (overlayMode === 'grid-tiles') {
     return (
-      <div ref={videoTileRef} style={{ width: '100%', height: '100%' }}>
+      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>
         <ParticipantVideoTileOverlay
           emojiSize={emojiSizePx}
           reaction={reaction}
@@ -122,7 +122,7 @@ export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.
     );
   } else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {
     return (
-      <div ref={videoTileRef} style={{ width: '100%', height: '100%' }}>
+      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>
         <RemoteContentShareReactionOverlay
           hostDivHeight={divHeight}
           hostDivWidth={divWidth}

packages/react-components/src/components/VideoTile.tsx

@@ -41,8 +41,6 @@ import { moreButtonStyles } from './styles/VideoTile.styles';
 import { raiseHandContainerStyles } from './styles/VideoTile.styles';
 /* @conditional-compile-remove(reaction) */
 import { ReactionResources } from '../types/ReactionTypes';
-/* @conditional-compile-remove(ppt-live) */
-import { pptLiveOverlayStyles } from './styles/VideoGallery.styles';
 
 /**
  * Strings of {@link VideoTile} that can be overridden.
@@ -404,11 +402,6 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
           /* @conditional-compile-remove(reaction) */
           reactionOverlay
         }
-        {
-          /* @conditional-compile-remove(ppt-live) */
-          // TODO Can be removed once the overlay mitigation has been implemented at the SDK layer
-          <Stack className={mergeStyles(videoContainerStyles, pptLiveOverlayStyles)}></Stack>
-        }
         {(canShowLabel || participantStateString) && (
           <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>
             <Stack horizontal className={tileInfoStyle}>

packages/react-components/src/components/styles/VideoGallery.styles.ts

@@ -59,20 +59,3 @@ export const localVideoCameraCycleButtonStyles = (theme: Theme, size?: 'small' |
 export const localVideoTileContainerStyles: IStackStyles = {
   root: { width: '100%', height: '100%' }
 };
-
-/**
- * @private
- */
-//TODO Can be removed once the overlay mitigation has been implemented at the SDK layer
-export const pptLiveOverlayStyles: IStackStyles = {
-  root: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'transparent',
-    pointerEvents: 'none',
-    zIndex: 0
-  }
-};