3 files changed, 102 insertions, 18 deletions

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 3b09518c5..273653ea2 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,7 +1,7 @@
 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 ServiceModel from '../../../models/Service';
@@ -10,12 +10,12 @@ 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';
 import { CUSTOM_WEBSITE_ID } from '../../../features/webControls/constants';
 
-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,
@@ -24,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 = {
@@ -35,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) {
@@ -50,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() {
@@ -68,6 +103,20 @@ export default @observer class ServiceView extends Component {
     });
   };
 
+  startHibernationTimer() {
+    const timerDuration = (Number(this.props.stores.settings.all.app.hibernationStrategy) || 300) * 1000;
+
+    const hibernationTimer = setTimeout(() => {
+      this.setState({
+        hibernate: true,
+      });
+    }, timerDuration);
+
+    this.setState({
+      hibernationTimer,
+    });
+  }
+
   render() {
     const {
       detachService,
@@ -76,7 +125,6 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
-      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -132,13 +180,10 @@ export default @observer class ServiceView extends Component {
           </Fragment>
         ) : (
           <>
-            {service.isServiceAccessRestricted ? (
-              <ServiceRestricted
-                name={service.recipe.name}
-                upgrade={upgrade}
-                type={service.restrictionType}
-              />
-            ) : (
+            {service.recipe.id === 'franz-custom-website' && (
+              <WebControlsScreen service={service} />
+            )}
+            {!this.state.hibernate ? (
               <>
                 {service.recipe.id === CUSTOM_WEBSITE_ID && (
                   <WebControlsScreen service={service} />
@@ -149,6 +194,12 @@ export default @observer class ServiceView extends Component {
                   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 4bab4a964..e6ebb6afb 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 b6291666b..edff29ae8 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.',
+  },
 });
 
 
@@ -94,6 +102,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">
@@ -112,14 +121,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>