1 files changed, 192 insertions, 0 deletions

diff --git a/src/components/services/content/ServiceView.tsx b/src/components/services/content/ServiceView.tsx
new file mode 100644
index 000000000..e41184431
--- /dev/null
+++ b/src/components/services/content/ServiceView.tsx
@@ -0,0 +1,192 @@
+import { Component } from 'react';
+import { autorun, IReactionDisposer } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import classnames from 'classnames';
+import TopBarProgress from 'react-topbar-progress-indicator';
+import ServiceModel from '../../../models/Service';
+import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
+import WebviewLoader from '../../ui/WebviewLoader';
+import WebviewCrashHandler from './WebviewCrashHandler';
+import WebviewErrorHandler from './WebviewErrorHandler';
+import ServiceDisabled from './ServiceDisabled';
+import ServiceWebview from './ServiceWebview';
+import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
+import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
+import { RealStores } from '../../../stores';
+
+interface IProps {
+  service: ServiceModel;
+  setWebviewRef: () => void;
+  detachService: () => void;
+  reload: () => void;
+  edit: () => void;
+  enable: () => void;
+  // isActive?: boolean; // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it
+  stores?: RealStores;
+  isSpellcheckerEnabled: boolean;
+}
+
+interface IState {
+  forceRepaint: boolean;
+  targetUrl: string;
+  statusBarVisible: boolean;
+}
+
+@inject('stores', 'actions')
+@observer
+class ServiceView extends Component<IProps, IState> {
+  // hibernationTimer = null; //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
+
+  autorunDisposer: IReactionDisposer | undefined;
+
+  forceRepaintTimeout: NodeJS.Timeout | undefined;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      forceRepaint: false,
+      targetUrl: '',
+      statusBarVisible: false,
+    };
+  }
+
+  componentDidMount() {
+    this.autorunDisposer = autorun(() => {
+      if (this.props.service.isActive) {
+        this.setState({ forceRepaint: true });
+        this.forceRepaintTimeout = setTimeout(() => {
+          this.setState({ forceRepaint: false });
+        }, 100);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.autorunDisposer!();
+    clearTimeout(this.forceRepaintTimeout!);
+    // clearTimeout(this.hibernationTimer); //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
+  }
+
+  render() {
+    const {
+      detachService,
+      service,
+      setWebviewRef,
+      reload,
+      edit,
+      enable,
+      stores,
+      isSpellcheckerEnabled,
+    } = this.props;
+
+    const { navigationBarBehaviour, navigationBarManualActive } =
+      stores!.settings.app;
+
+    const showNavBar =
+      navigationBarBehaviour === 'always' ||
+      (navigationBarBehaviour === 'custom' &&
+        service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID) ||
+      navigationBarManualActive;
+
+    const webviewClasses = classnames({
+      services__webview: true,
+      'services__webview-wrapper': true,
+      'is-active': service.isActive,
+      'services__webview--force-repaint': this.state.forceRepaint,
+    });
+
+    const statusBar = this.state.statusBarVisible ? (
+      <StatusBarTargetUrl text={this.state.targetUrl} />
+    ) : null;
+
+    return (
+      <div
+        className={webviewClasses}
+        data-name={service.name}
+        style={{ order: service.order }}
+      >
+        {service.isActive && service.isEnabled && (
+          <>
+            {service.hasCrashed && (
+              <WebviewCrashHandler
+                name={service.recipe.name}
+                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
+                reload={reload}
+              />
+            )}
+            {service.isEnabled &&
+              service.isLoading &&
+              service.isFirstLoad &&
+              !service.isHibernating &&
+              !service.isServiceAccessRestricted && (
+                <WebviewLoader loaded={false} name={service.name} />
+              )}
+            {service.isProgressbarEnabled &&
+              service.isLoadingPage &&
+              !service.isFirstLoad && <TopBarProgress />}
+            {service.isError && (
+              <WebviewErrorHandler
+                name={service.recipe.name}
+                errorMessage={service.errorMessage}
+                reload={reload}
+                edit={edit}
+              />
+            )}
+          </>
+        )}
+        {!service.isEnabled ? (
+          <>
+            {service.isActive && (
+              <ServiceDisabled
+                name={service.name !== '' ? service.name : service.recipe.name}
+                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
+                enable={enable}
+              />
+            )}
+          </>
+        ) : (
+          <>
+            {!service.isHibernating ? (
+              <>
+                {showNavBar && <WebControlsScreen service={service} />}
+                <ServiceWebview
+                  service={service}
+                  setWebviewReference={setWebviewRef}
+                  detachService={detachService}
+                  isSpellcheckerEnabled={isSpellcheckerEnabled}
+                />
+              </>
+            ) : (
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  textAlign: 'center',
+                }}
+              >
+                <span
+                  role="img"
+                  aria-label="Sleeping Emoji"
+                  style={{ fontSize: 42 }}
+                >
+                  😴
+                </span>
+                <br />
+                <br />
+                This service is currently hibernating.
+                <br />
+                Try switching services or reloading Ferdium.
+              </div>
+            )}
+          </>
+        )}
+        {statusBar}
+      </div>
+    );
+  }
+}
+
+export default ServiceView;