1 files changed, 132 insertions, 0 deletions

diff --git a/src/components/services/content/ServiceWebview.jsx b/src/components/services/content/ServiceWebview.jsx
new file mode 100644
index 000000000..835c5125e
--- /dev/null
+++ b/src/components/services/content/ServiceWebview.jsx
@@ -0,0 +1,132 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action, makeObservable, observable, reaction } from 'mobx';
+import ElectronWebView from 'react-electron-web-view';
+import { join } from 'path';
+
+import ServiceModel from '../../../models/Service';
+
+const debug = require('../../../preload-safe-debug')('Ferdium:Services');
+
+class ServiceWebview extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+    detachService: PropTypes.func.isRequired,
+    isSpellcheckerEnabled: PropTypes.bool.isRequired,
+  };
+
+  @observable webview = null;
+
+  constructor(props) {
+    super(props);
+
+    makeObservable(this);
+
+    reaction(
+      () => this.webview,
+      () => {
+        if (this.webview && this.webview.view) {
+          this.webview.view.addEventListener('console-message', e => {
+            debug('Service logged a message:', e.message);
+          });
+          this.webview.view.addEventListener('did-navigate', () => {
+            if (this.props.service._webview) {
+              document.title = `Ferdium - ${this.props.service.name} ${
+                this.props.service.dialogTitle
+                  ? ` - ${this.props.service.dialogTitle}`
+                  : ''
+              } ${`- ${this.props.service._webview.getTitle()}`}`;
+            }
+          });
+        }
+      },
+    );
+  }
+
+  componentWillUnmount() {
+    const { service, detachService } = this.props;
+    detachService({ service });
+  }
+
+  refocusWebview = () => {
+    const { webview } = this;
+    debug('Refocus Webview is called', this.props.service);
+    if (!webview) return;
+    if (this.props.service.isActive) {
+      webview.view.blur();
+      webview.view.focus();
+      window.setTimeout(() => {
+        document.title = `Ferdium - ${this.props.service.name} ${
+          this.props.service.dialogTitle
+            ? ` - ${this.props.service.dialogTitle}`
+            : ''
+        } ${`- ${this.props.service._webview.getTitle()}`}`;
+      }, 100);
+    } else {
+      debug('Refocus not required - Not active service');
+    }
+  };
+
+  @action _setWebview(webview) {
+    this.webview = webview;
+  }
+
+  render() {
+    const { service, setWebviewReference, isSpellcheckerEnabled } = this.props;
+
+    const preloadScript = join(
+      __dirname,
+      '..',
+      '..',
+      '..',
+      'webview',
+      'recipe.js',
+    );
+
+    return (
+      <ElectronWebView
+        ref={webview => {
+          this._setWebview(webview);
+          if (webview && webview.view) {
+            webview.view.addEventListener(
+              'did-stop-loading',
+              this.refocusWebview,
+            );
+          }
+        }}
+        autosize
+        src={service.url}
+        preload={preloadScript}
+        partition={service.partition}
+        onDidAttach={() => {
+          // Force the event handler to run in a new task.
+          // This resolves a race condition when the `did-attach` is called,
+          // but the webview is not attached to the DOM yet:
+          // https://github.com/electron/electron/issues/31918
+          // This prevents us from immediately attaching listeners such as `did-stop-load`:
+          // https://github.com/ferdium/ferdium-app/issues/157
+          setTimeout(() => {
+            setWebviewReference({
+              serviceId: service.id,
+              webview: this.webview.view,
+            });
+          }, 0);
+        }}
+        onUpdateTargetUrl={this.updateTargetUrl}
+        useragent={service.userAgent}
+        disablewebsecurity={
+          service.recipe.disablewebsecurity ? true : undefined
+        }
+        allowpopups
+        nodeintegration
+        webpreferences={`spellcheck=${
+          isSpellcheckerEnabled ? 1 : 0
+        }, contextIsolation=1`}
+      />
+    );
+  }
+}
+
+export default observer(ServiceWebview);