[MM-19266] Manually exit html fullscreen on macOS when in fullscreen (#1097)

* manually exit html fullscreen on mac in fullscreen

* Ensure the element that is fullscreen is an iframe

* remove unused import

src/browser/components/MattermostView.jsx

@@ -50,6 +50,7 @@ export default class MattermostView extends React.Component {
     this.getSrc = this.getSrc.bind(this);
     this.handleDeepLink = this.handleDeepLink.bind(this);
     this.handleUserActivityUpdate = this.handleUserActivityUpdate.bind(this);
+    this.handleExitFullscreen = this.handleExitFullscreen.bind(this);
 
     this.webviewRef = React.createRef();
   }
@@ -223,11 +224,13 @@ export default class MattermostView extends React.Component {
 
     // start listening for user status updates from main
     ipcRenderer.on('user-activity-update', this.handleUserActivityUpdate);
+    ipcRenderer.on('exit-fullscreen', this.handleExitFullscreen);
   }
 
   componentWillUnmount() {
     // stop listening for user status updates from main
     ipcRenderer.removeListener('user-activity-update', this.handleUserActivityUpdate);
+    ipcRenderer.removeListener('exit-fullscreen', this.handleExitFullscreen);
   }
 
   reload() {
@@ -300,6 +303,11 @@ export default class MattermostView extends React.Component {
     this.webviewRef.current.send('user-activity-update', status);
   }
 
+  handleExitFullscreen() {
+    // pass exit fullscreen request to the webview
+    this.webviewRef.current.send('exit-fullscreen');
+  }
+
   render() {
     const errorView = this.state.errorInfo ? (
       <ErrorView

src/browser/webview/mattermost.js

@@ -240,6 +240,13 @@ ipcRenderer.on('user-activity-update', (event, {userIsActive, isSystemEvent}) =>
   window.postMessage({type: 'user-activity-update', message: {userIsActive, manual: isSystemEvent}}, window.location.origin);
 });
 
+// exit fullscreen embedded elements like youtube - https://mattermost.atlassian.net/browse/MM-19226
+ipcRenderer.on('exit-fullscreen', () => {
+  if (document.fullscreenElement && document.fullscreenElement.nodeName.toLowerCase() === 'iframe') {
+    document.exitFullscreen();
+  }
+});
+
 // mattermost-webapp is SPA. So cache is not cleared due to no navigation.
 // We needed to manually clear cache to free memory in long-term-use.
 // http://seenaburns.com/debugging-electron-memory-usage/

src/main.js

@@ -458,6 +458,13 @@ function handleAppWebContentsCreated(dc, contents) {
   // implemented to temporarily help solve for https://community-daily.mattermost.com/core/pl/b95bi44r4bbnueqzjjxsi46qiw
   contents.on('before-input-event', (event, input) => {
     if (!input.shift && !input.control && !input.alt && !input.meta) {
+      // hacky fix for https://mattermost.atlassian.net/browse/MM-19226
+      if ((input.key === 'Escape' || input.key === 'f') && input.type === 'keyDown') {
+        // only do this when in fullscreen on a mac
+        if (mainWindow.isFullScreen() && process.platform === 'darwin') {
+          mainWindow.webContents.send('exit-fullscreen');
+        }
+      }
       return;
     }