[Calling][Bug] Fix the pptlive overlay (#4446)

Author: ShaunaSong

change-beta/@azure-communication-react-df23adda-292c-4c34-b37a-8315971a735f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Remove PPTLive overlay",
+  "comment": "Remove PPTLive overlay",
+  "packageName": "@azure/communication-react",
+  "email": "93549644+ShaunaSong@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-df23adda-292c-4c34-b37a-8315971a735f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Remove PPTLive overlay",
+  "comment": "Remove PPTLive overlay",
+  "packageName": "@azure/communication-react",
+  "email": "93549644+ShaunaSong@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -12,7 +12,7 @@ import {
   Stack,
   Text
 } from '@fluentui/react';
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { ComponentLocale, useLocale } from '../localization';
 import { useTheme } from '../theming';
@@ -296,6 +296,36 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
     return () => currentObserver.disconnect();
   }, [videoTileRef]);
 
+  /* @conditional-compile-remove(ppt-live) */
+  // TODO: Remove after calling sdk fix the keybaord focus
+  useEffect(() => {
+    // PPTLive display name is undefined, return as it is not screen share
+    if (displayName !== undefined) {
+      return;
+    }
+    let observer: MutationObserver | undefined;
+    if (videoTileRef.current) {
+      observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+          if (mutation.type === 'childList') {
+            const iframe = document.querySelector('iframe');
+            if (iframe) {
+              if (!iframe.getAttribute('tabIndex')) {
+                iframe.setAttribute('tabIndex', '-1');
+              }
+            }
+          }
+        }
+      });
+
+      observer.observe(videoTileRef.current, { childList: true, subtree: true });
+    }
+
+    return () => {
+      observer?.disconnect();
+    };
+  }, [displayName, renderElement]);
+
   const useLongPressProps = useMemo(() => {
     return {
       onLongPress: () => {