fix: screenshare feature not working on Teams (#1733)

2 files changed, 84 insertions, 0 deletions

diff --git a/src/components/MediaSource.tsx b/src/components/MediaSource.tsx
new file mode 100644
index 000000000..ceb7701b9
--- /dev/null
+++ b/src/components/MediaSource.tsx
@@ -0,0 +1,82 @@
+import { ipcRenderer } from 'electron';
+import { useEffect, useState } from 'react';
+import { SCREENSHARE_CANCELLED_BY_USER } from '../config';
+import type Service from '../models/Service';
+
+export interface IProps {
+  service: Service;
+}
+
+export default function MediaSource(props: IProps) {
+  const { service } = props;
+  const [sources, setSources] = useState<any>([]);
+  const [show, setShow] = useState<boolean>(false);
+  const [trackerId, setTrackerId] = useState<string | null>(null);
+
+  ipcRenderer.on(`select-capture-device:${service.id}`, (_event, data) => {
+    setShow(true);
+    setTrackerId(data.trackerId);
+  });
+
+  useEffect(() => {
+    ipcRenderer
+      .invoke('get-desktop-capturer-sources')
+      .then(sources => setSources(sources));
+  }, []);
+
+  if (sources.length === 0 || !show) {
+    return null;
+  }
+
+  const handleOnClick = (e: any) => {
+    const { id } = e.currentTarget.dataset;
+    window['ferdium'].actions.service.sendIPCMessage({
+      serviceId: service.id,
+      channel: `selected-media-source:${trackerId}`,
+      args: {
+        mediaSourceId: id,
+      },
+    });
+
+    setShow(false);
+    setTrackerId(null);
+  };
+
+  return (
+    <div className="desktop-capturer-selection">
+      <ul className="desktop-capturer-selection__list">
+        {sources.map(({ id, name, thumbnail }) => (
+          <li className="desktop-capturer-selection__item" key={id}>
+            <button
+              type="button" // Add explicit type attribute
+              className="desktop-capturer-selection__btn"
+              data-id={id}
+              title={name}
+              onClick={handleOnClick}
+            >
+              <img
+                alt="Desktop capture preview"
+                className="desktop-capturer-selection__thumbnail"
+                src={thumbnail.toDataURL()}
+              />
+              <span className="desktop-capturer-selection__name">{name}</span>
+            </button>
+          </li>
+        ))}
+        <li className="desktop-capturer-selection__item">
+          <button
+            type="button" // Add explicit type attribute
+            className="desktop-capturer-selection__btn"
+            data-id={SCREENSHARE_CANCELLED_BY_USER}
+            title="Cancel"
+            onClick={handleOnClick}
+          >
+            <span className="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">
+              Cancel
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/services/content/ServiceView.tsx b/src/components/services/content/ServiceView.tsx
index 577473b5d..b7f539a5d 100644
--- a/src/components/services/content/ServiceView.tsx
+++ b/src/components/services/content/ServiceView.tsx
@@ -7,6 +7,7 @@ import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import type ServiceModel from '../../../models/Service';
 import type { RealStores } from '../../../stores';
+import MediaSource from '../../MediaSource';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 import WebviewLoader from '../../ui/WebviewLoader';
 import ServiceDisabled from './ServiceDisabled';
@@ -164,6 +165,7 @@ class ServiceView extends Component<IProps, IState> {
             ) : (
               <>
                 {showNavBar && <WebControlsScreen service={service} />}
+                <MediaSource service={service} />
                 <ServiceWebview
                   service={service}
                   setWebviewReference={setWebviewRef}