[MM-46696] Surface screen permissions error coming from global widget…

… desktop window (#337) * Surface screen permissions error in global widget * Bump e2e timeout
mattermost · Feb 16, 2023 · 32749df · 32749df
1 parent ad98e2b
commit 32749df
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
@@ -8,7 +8,7 @@ const config: PlaywrightTestConfig = {
     workers: 4,
     timeout: 30 * 1000,
     expect: {
-        timeout: 10 * 1000,
+        timeout: 20 * 1000,
         toMatchSnapshot: {
             maxDiffPixelRatio: 0.05,
         },

diff --git a/standalone/src/widget/index.tsx b/standalone/src/widget/index.tsx
@@ -47,9 +47,6 @@ async function initWidget(store: Store, theme: Theme, channelID: string) {
         case 'register-desktop':
             window.desktop = ev.data.message;
             break;
-        case 'calls-widget-share-screen':
-            window.callsClient?.shareScreen(ev.data.message.sourceID, ev.data.message.withAudio);
-            break;
         }
     });
     sendDesktopEvent('get-app-version');

diff --git a/webapp/src/components/call_widget/component.tsx b/webapp/src/components/call_widget/component.tsx
@@ -299,14 +299,38 @@ export default class CallWidget extends React.PureComponent<Props, State> {
         this.sendGlobalWidgetBounds();
     }
 
+    private handleDesktopEvents = (ev: MessageEvent) => {
+        if (ev.origin !== window.origin) {
+            return;
+        }
+
+        if (ev.data.type === 'calls-error' && ev.data.message.err === 'screen-permissions') {
+            logDebug('screen permissions error');
+            this.setState({
+                alerts: {
+                    ...this.state.alerts,
+                    missingScreenPermissions: {
+                        ...this.state.alerts.missingScreenPermissions,
+                        active: true,
+                        show: true,
+                    },
+                },
+            });
+        } else if (ev.data.type === 'calls-widget-share-screen') {
+            this.shareScreen(ev.data.message.sourceID, ev.data.message.withAudio);
+        }
+    }
+
     public componentDidMount() {
         if (this.props.global) {
             window.visualViewport.addEventListener('resize', this.onViewportResize);
             this.menuResizeObserver = new ResizeObserver(this.sendGlobalWidgetBounds);
             this.menuResizeObserver.observe(this.menuNode.current!);
+            window.addEventListener('message', this.handleDesktopEvents);
         } else {
             document.addEventListener('mouseup', this.onMouseUp, false);
         }
+
         document.addEventListener('click', this.closeOnBlur, true);
         document.addEventListener('keyup', this.keyboardClose, true);
 
@@ -419,6 +443,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
     public componentWillUnmount() {
         if (this.props.global) {
             window.visualViewport.removeEventListener('resize', this.onViewportResize);
+            window.removeEventListener('message', this.handleDesktopEvents);
         } else {
             document.removeEventListener('mouseup', this.onMouseUp, false);
         }
@@ -544,6 +569,35 @@ export default class CallWidget extends React.PureComponent<Props, State> {
         this.setState({showMenu: false});
     };
 
+    private shareScreen = async (sourceID: string, withAudio: boolean) => {
+        const state = {} as State;
+        const stream = await window.callsClient?.shareScreen(sourceID, hasExperimentalFlag());
+        if (stream) {
+            state.screenStream = stream;
+            state.alerts = {
+                ...this.state.alerts,
+                missingScreenPermissions: {
+                    ...this.state.alerts.missingScreenPermissions,
+                    active: false,
+                    show: false,
+                },
+            };
+        } else {
+            state.alerts = {
+                ...this.state.alerts,
+                missingScreenPermissions: {
+                    ...this.state.alerts.missingScreenPermissions,
+                    active: true,
+                    show: true,
+                },
+            };
+        }
+
+        this.setState({
+            ...state,
+        });
+    }
+
     onShareScreenToggle = async (fromShortcut?: boolean) => {
         if (!this.props.allowScreenSharing) {
             return;
@@ -562,27 +616,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                     this.props.showScreenSourceModal();
                 }
             } else {
-                const stream = await window.callsClient?.shareScreen('', hasExperimentalFlag());
-                if (stream) {
-                    state.screenStream = stream;
-                    state.alerts = {
-                        ...this.state.alerts,
-                        missingScreenPermissions: {
-                            ...this.state.alerts.missingScreenPermissions,
-                            active: false,
-                            show: false,
-                        },
-                    };
-                } else {
-                    state.alerts = {
-                        ...this.state.alerts,
-                        missingScreenPermissions: {
-                            ...this.state.alerts.missingScreenPermissions,
-                            active: true,
-                            show: true,
-                        },
-                    };
-                }
+                await this.shareScreen('', hasExperimentalFlag());
             }
             this.props.trackEvent(Telemetry.Event.ShareScreen, Telemetry.Source.Widget, {initiator: fromShortcut ? 'shortcut' : 'button'});
         }

diff --git a/webapp/src/components/screen_source_modal/component.tsx b/webapp/src/components/screen_source_modal/component.tsx
@@ -191,6 +191,10 @@ export default class ScreenSourceModal extends React.PureComponent<Props, State>
     }
 
     handleDesktopCapturerMessage = (event: MessageEvent) => {
+        if (event.origin !== window.origin) {
+            return;
+        }
+
         if (event.data.type !== 'desktop-sources-result') {
             return;
         }