Add indicator for hibernating services

7 files changed, 48 insertions, 2 deletions

diff --git a/src/actions/service.js b/src/actions/service.js
index 68c62d594..99f4b3610 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -91,4 +91,8 @@ export default {
     serviceId: PropTypes.string.isRequired,
   },
   openDevToolsForActiveService: {},
+  setHibernation: {
+    serviceId: PropTypes.string.isRequired,
+    hibernating: PropTypes.bool.isRequired,
+  },
 };
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 041e9941d..664a494c1 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -15,7 +15,7 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_ID } from '../../../features/webControls/constants';
 
-export default @observer @inject('stores') class ServiceView extends Component {
+export default @observer @inject('stores', 'actions') class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
@@ -27,6 +27,11 @@ export default @observer @inject('stores') class ServiceView extends Component {
     stores: PropTypes.shape({
       settings: PropTypes.instanceOf(SettingsStore).isRequired,
     }).isRequired,
+    actions: PropTypes.shape({
+      service: PropTypes.shape({
+        setHibernation: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -77,10 +82,24 @@ export default @observer @inject('stores') class ServiceView extends Component {
           this.setState({
             hibernate: false,
           });
+          this.props.actions.service.setHibernation({
+            serviceId: this.props.service.id,
+            hibernating: false,
+          });
         }
       },
     );
 
+    // Store hibernation status to state, otherwise the webview won't get unloaded correctly
+    reaction(
+      () => this.props.service.isHibernating,
+      () => {
+        this.setState({
+          hibernate: this.props.service.isHibernating,
+        });
+      },
+    );
+
     // Start hibernation counter if we are in background
     if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
       this.startHibernationTimer();
@@ -110,6 +129,10 @@ export default @observer @inject('stores') class ServiceView extends Component {
       this.setState({
         hibernate: true,
       });
+      this.props.actions.service.setHibernation({
+        serviceId: this.props.service.id,
+        hibernating: true,
+      });
     }, timerDuration);
 
     this.setState({
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 8de7dc438..36338a910 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -145,6 +145,11 @@ class TabItem extends Component {
                 •
             </span>
           )}
+          {service.isHibernating && (
+            <span className="tab-item__message-count hibernating">
+              •
+            </span>
+          )}
         </span>
       );
     }
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 39e90cb95..797589e9b 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -43,7 +43,6 @@ const styles = theme => ({
   services: {
     width: '100%',
     maxHeight: '50vh',
-    marginTop: 30,
     overflow: 'scroll',
   },
   service: {
diff --git a/src/models/Service.js b/src/models/Service.js
index ddc169d47..10b54602f 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -36,6 +36,8 @@ export default class Service {
 
   @observable isMuted = false;
 
+  @observable isHibernating = false;
+
   @observable team = '';
 
   @observable customUrl = '';
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 6120ae023..1bf32af9f 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -75,6 +75,7 @@ export default class ServicesStore extends Store {
     this.actions.service.toggleAudio.listen(this._toggleAudio.bind(this));
     this.actions.service.openDevTools.listen(this._openDevTools.bind(this));
     this.actions.service.openDevToolsForActiveService.listen(this._openDevToolsForActiveService.bind(this));
+    this.actions.service.setHibernation.listen(this._setHibernation.bind(this));
 
     this.registerReactions([
       this._focusServiceReaction.bind(this),
@@ -648,6 +649,11 @@ export default class ServicesStore extends Store {
     }
   }
 
+  @action _setHibernation({ serviceId, hibernating }) {
+    const service = this.one(serviceId);
+    service.isHibernating = hibernating;
+  }
+
   // Reactions
   _focusServiceReaction() {
     const service = this.active;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index cbd833f04..ee0858687 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -64,6 +64,13 @@
     right: 8px;
 
     &.is-indirect { padding-top: 0; }
+    &.hibernating { 
+      padding-top: 0; 
+      background: $theme-gray; 
+      font-size: 0px;
+      min-height: 10px;
+      min-width: 10px;
+    }
   }
 
   .tab-item__info-badge {