[Calling][Bug] Disable PPTLive keyboard by adding overlay (#4349)

* Disable keyboard

* Change files

* Duplicate change files for beta release

* remove the pptlive

* refactor style

* Refactor the videoTile logic

* add comments

* format the file

* clean up the feature.js

* Update the commands

---------

Co-authored-by: Donald McEachern <[email protected]>

Author: ShaunaSong

change-beta/@azure-communication-react-5e0dd7b3-75e6-40cb-bbd3-95cbbf2c1b43.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Disbale the PPTLive keyboard navigation",
+  "comment": "Disable keyboard",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-5e0dd7b3-75e6-40cb-bbd3-95cbbf2c1b43.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Disbale the PPTLive keyboard navigation",
+  "comment": "Disable keyboard",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -41,6 +41,8 @@ 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,6 +406,11 @@ 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,3 +59,20 @@ 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
+  }
+};