3 files changed, 104 insertions, 16 deletions

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index e8df58a1e..74d8af0bc 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,8 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { autorun } from 'mobx';
-import { observer } from 'mobx-react';
+import { autorun, reaction } from 'mobx';
+import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
+import ms from 'ms';
 
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
@@ -10,11 +11,11 @@ import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
 import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
-import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
+import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 
-export default @observer class ServiceView extends Component {
+export default @observer @inject('stores') class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
@@ -23,7 +24,9 @@ export default @observer class ServiceView extends Component {
     edit: PropTypes.func.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
-    upgrade: PropTypes.func.isRequired,
+    stores: PropTypes.shape({
+      settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -34,12 +37,20 @@ export default @observer class ServiceView extends Component {
     forceRepaint: false,
     targetUrl: '',
     statusBarVisible: false,
+    hibernate: false,
+    hibernationTimer: null,
   };
 
   autorunDisposer = null;
 
   forceRepaintTimeout = null;
 
+  constructor(props) {
+    super(props);
+
+    this.startHibernationTimer = this.startHibernationTimer.bind(this);
+  }
+
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
       if (this.props.service.isActive) {
@@ -49,6 +60,31 @@ export default @observer class ServiceView extends Component {
         }, 100);
       }
     });
+
+    reaction(
+      () => this.props.service.isActive,
+      () => {
+        if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
+          // Service is inactive - start hibernation countdown
+          this.startHibernationTimer();
+        } else {
+          if (this.state.hibernationTimer) {
+            // Service is active but we have an active hibernation timer: Clear timeout
+            clearTimeout(this.state.hibernationTimer);
+          }
+
+          // Service is active, wake up service from hibernation
+          this.setState({
+            hibernate: false,
+          });
+        }
+      },
+    );
+
+    // Start hibernation counter if we are in background
+    if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
+      this.startHibernationTimer();
+    }
   }
 
   componentWillUnmount() {
@@ -67,6 +103,18 @@ export default @observer class ServiceView extends Component {
     });
   };
 
+  startHibernationTimer() {
+    const hibernationTimer = setTimeout(() => {
+      this.setState({
+        hibernate: true,
+      });
+    }, ms('5m'));
+
+    this.setState({
+      hibernationTimer,
+    });
+  }
+
   render() {
     const {
       detachService,
@@ -75,7 +123,6 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
-      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -142,11 +189,19 @@ export default @observer class ServiceView extends Component {
                 {service.recipe.id === 'franz-custom-website' && (
                   <WebControlsScreen service={service} />
                 )}
-                <ServiceWebview
-                  service={service}
-                  setWebviewReference={setWebviewReference}
-                  detachService={detachService}
-                />
+                {!this.state.hibernate ? (
+                  <ServiceWebview
+                    service={service}
+                    setWebviewReference={setWebviewReference}
+                    detachService={detachService}
+                  />
+                ) : (
+                  <div>
+                    <span role="img" aria-label="Sleeping Emoji">😴</span>
+                    {' '}
+                    This service is currently hibernating. If this page doesn&#x27;t close soon, please try reloading Ferdi.
+                  </div>
+                )}
               </>
             )}
           </>
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 07bd17d9c..03d6d5bcc 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,10 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import { observable, reaction } from 'mobx';
 import ElectronWebView from 'react-electron-web-view';
 
 import ServiceModel from '../../../models/Service';
 
+const debug = require('debug')('Ferdi:Services');
+
 @observer
 class ServiceWebview extends Component {
   static propTypes = {
@@ -13,7 +16,22 @@ class ServiceWebview extends Component {
     detachService: PropTypes.func.isRequired,
   };
 
-  webview = null;
+  @observable webview = null;
+
+  constructor(props) {
+    super(props);
+
+    reaction(
+      () => this.webview,
+      () => {
+        if (this.webview && this.webview.view) {
+          this.webview.view.addEventListener('console-message', (e) => {
+            debug('Service logged a message:', e.message);
+          });
+        }
+      },
+    );
+  }
 
   componentWillUnmount() {
     const { service, detachService } = this.props;
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 73c27bfb6..1afbaabc4 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -13,12 +13,20 @@ import Appear from '../../ui/effects/Appear';
 const messages = defineMessages({
   welcome: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Franz',
+    defaultMessage: '!!!Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
     defaultMessage: '!!!Get started',
   },
+  login: {
+    id: 'services.login',
+    defaultMessage: '!!!Please login to use Ferdi.',
+  },
+  serverInfo: {
+    id: 'services.serverInfo',
+    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.',
+  },
 });
 
 
@@ -86,6 +94,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
     } = this.state;
 
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="services">
@@ -104,14 +113,20 @@ export default @observer @injectSheet(styles) class Services extends Component {
             transitionName="slideUp"
           >
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
+              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
+              { !isLoggedIn && (
+                <>
+                  <p>{intl.formatMessage(messages.login)}</p>
+                  <p>{intl.formatMessage(messages.serverInfo)}</p>
+                </>
+              ) }
               <Appear
                 timeout={300}
                 transitionName="slideUp"
               >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
+                <Link to={isLoggedIn ? '/settings/services' : '/auth/welcome'} className="button">
+                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
                 </Link>
               </Appear>
             </div>