1 files changed, 163 insertions, 0 deletions

diff --git a/src/features/webControls/containers/WebControlsScreen.tsx b/src/features/webControls/containers/WebControlsScreen.tsx
new file mode 100644
index 000000000..f6f1cddb8
--- /dev/null
+++ b/src/features/webControls/containers/WebControlsScreen.tsx
@@ -0,0 +1,163 @@
+import { Component, ReactElement } from 'react';
+import { observer, inject } from 'mobx-react';
+import {
+  autorun,
+  action,
+  makeObservable,
+  observable,
+  IReactionDisposer,
+} from 'mobx';
+import ElectronWebView from 'react-electron-web-view';
+import WebControls from '../components/WebControls';
+import Service from '../../../models/Service';
+import { SEARCH_ENGINE_URLS } from '../../../config';
+import { StoresProps } from '../../../@types/ferdium-components.types';
+
+const URL_EVENTS = [
+  'load-commit',
+  'will-navigate',
+  'did-navigate',
+  'did-navigate-in-page',
+];
+
+interface IProps extends Partial<StoresProps> {
+  service: Service;
+}
+
+@inject('stores', 'actions')
+@observer
+class WebControlsScreen extends Component<IProps> {
+  @observable url = '';
+
+  @observable canGoBack = false;
+
+  @observable canGoForward = false;
+
+  webview: ElectronWebView | null = null;
+
+  autorunDisposer: IReactionDisposer | null = null;
+
+  constructor(props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  componentDidMount(): void {
+    const { service } = this.props;
+
+    this.autorunDisposer = autorun(() => {
+      if (service.isAttached) {
+        this.webview = service.webview;
+        this._setUrl(this.webview.getURL());
+
+        for (const event of URL_EVENTS) {
+          this.webview.addEventListener(event, e => {
+            if (!e.isMainFrame) {
+              return;
+            }
+            this._setUrlAndHistory(e.url);
+          });
+        }
+      }
+    });
+  }
+
+  componentWillUnmount(): void {
+    if (this.autorunDisposer) {
+      this.autorunDisposer();
+    }
+  }
+
+  @action
+  _setUrl(value): void {
+    this.url = value;
+  }
+
+  @action
+  _setUrlAndHistory(value): void {
+    this._setUrl(value);
+    this.canGoBack = this.webview.canGoBack();
+    this.canGoForward = this.webview.canGoForward();
+  }
+
+  goHome(): void {
+    if (!this.webview) {
+      return;
+    }
+    this.webview.goToIndex(0);
+  }
+
+  reload(): void {
+    if (!this.webview) {
+      return;
+    }
+
+    this.webview.reload();
+  }
+
+  goBack(): void {
+    if (!this.webview) {
+      return;
+    }
+
+    this.webview.goBack();
+  }
+
+  goForward(): void {
+    if (!this.webview) {
+      return;
+    }
+
+    this.webview.goForward();
+  }
+
+  navigate(url: string): void {
+    if (!this.webview) {
+      return;
+    }
+
+    try {
+      url = new URL(url).toString();
+    } catch {
+      url =
+        /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test(
+          url,
+        )
+          ? `http://${url}`
+          : SEARCH_ENGINE_URLS[this.props.stores!.settings.app.searchEngine]({
+              searchTerm: url,
+            });
+    }
+
+    this.webview.loadURL(url);
+    this._setUrl(url);
+  }
+
+  openInBrowser(): void {
+    const { openExternalUrl } = this.props.actions!.app;
+    if (!this.webview) {
+      return;
+    }
+
+    openExternalUrl({ url: this.url });
+  }
+
+  render(): ReactElement {
+    return (
+      <WebControls
+        goHome={() => this.goHome()}
+        reload={() => this.reload()}
+        openInBrowser={() => this.openInBrowser()}
+        canGoBack={this.canGoBack}
+        goBack={() => this.goBack()}
+        canGoForward={this.canGoForward}
+        goForward={() => this.goForward()}
+        navigate={url => this.navigate(url)}
+        url={this.url}
+      />
+    );
+  }
+}
+
+export default WebControlsScreen;