feat(App): Add option to mute all services in sidebar

Closes #8 #162

5 files changed, 29 insertions, 18 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index d7e0a4f38..60bdf7e47 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -15,6 +15,7 @@ export default class ServiceWebview extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -56,6 +57,7 @@ export default class ServiceWebview extends Component {
       service,
       setWebviewReference,
       reload,
+      isAppMuted,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -92,7 +94,7 @@ export default class ServiceWebview extends Component {
           })}
           onUpdateTargetUrl={this.updateTargetUrl}
           useragent={service.userAgent}
-          muted={service.isMuted}
+          muted={isAppMuted || service.isMuted}
           disablewebsecurity
           allowpopups
         />
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index bad525d22..55a47cdd3 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -26,6 +26,7 @@ export default class Services extends Component {
     handleIPCMessage: PropTypes.func.isRequired,
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -44,6 +45,7 @@ export default class Services extends Component {
       setWebviewReference,
       openWindow,
       reload,
+      isAppMuted,
     } = this.props;
     const { intl } = this.context;
 
@@ -76,6 +78,7 @@ export default class Services extends Component {
             setWebviewReference={setWebviewReference}
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
+            isAppMuted={isAppMuted}
           />
         ))}
       </div>
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index e5ae36419..0146f5b35 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -2,17 +2,8 @@ import React, { Component } from 'react';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import { SortableContainer } from 'react-sortable-hoc';
-import { defineMessages, intlShape } from 'react-intl';
 
 import TabItem from './TabItem';
-import { ctrlKey } from '../../../environment';
-
-const messages = defineMessages({
-  addNewService: {
-    id: 'sidebar.addNewService',
-    defaultMessage: '!!!Add new service',
-  },
-});
 
 @observer
 class TabBarSortableList extends Component {
@@ -22,27 +13,23 @@ class TabBarSortableList extends Component {
     openSettings: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
   }
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       services,
       setActive,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
       disableService,
       openSettings,
     } = this.props;
 
-    const { intl } = this.context;
-
     return (
       <ul
         className="tabs"
@@ -56,12 +43,13 @@ class TabBarSortableList extends Component {
             shortcutIndex={index + 1}
             reload={() => reload({ serviceId: service.id })}
             toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+            toggleAudio={() => toggleAudio({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
             openSettings={openSettings}
           />
         ))}
-        <li>
+        {/* <li>
           <button
             className="sidebar__add-service"
             onClick={() => openSettings({ path: 'recipes' })}
@@ -69,7 +57,7 @@ class TabBarSortableList extends Component {
           >
             <span className="mdi mdi-plus" />
           </button>
-        </li>
+        </li> */}
       </ul>
     );
   }
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 9e03d2e21..7b001f6ee 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -28,6 +28,14 @@ const messages = defineMessages({
     id: 'tabs.item.enableNotification',
     defaultMessage: '!!!Enable notifications',
   },
+  disableAudio: {
+    id: 'tabs.item.disableAudio',
+    defaultMessage: '!!!Disable audio',
+  },
+  enableAudio: {
+    id: 'tabs.item.enableAudio',
+    defaultMessage: '!!!Enable audio',
+  },
   disableService: {
     id: 'tabs.item.disableService',
     defaultMessage: '!!!Disable Service',
@@ -46,6 +54,7 @@ class TabItem extends Component {
     shortcutIndex: PropTypes.number.isRequired,
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
@@ -62,6 +71,7 @@ class TabItem extends Component {
       shortcutIndex,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
       disableService,
       openSettings,
@@ -90,6 +100,11 @@ class TabItem extends Component {
         : intl.formatMessage(messages.enableNotifications),
       click: () => toggleNotifications(),
     }, {
+      label: service.isMuted
+        ? intl.formatMessage(messages.enableAudio)
+        : intl.formatMessage(messages.disableAudio),
+      click: () => toggleAudio(),
+    }, {
       label: intl.formatMessage(messages.disableService),
       click: () => disableService(),
     }, {
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index fdb2c0a59..e8cd80e33 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -15,6 +15,7 @@ export default class TabBar extends Component {
     reorder: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
   }
@@ -51,6 +52,7 @@ export default class TabBar extends Component {
       disableToolTip,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
     } = this.props;
 
@@ -63,6 +65,7 @@ export default class TabBar extends Component {
           onSortStart={disableToolTip}
           reload={reload}
           toggleNotifications={toggleNotifications}
+          toggleAudio={toggleAudio}
           deleteService={deleteService}
           disableService={this.disableService}
           openSettings={openSettings}