8 files changed, 103 insertions, 70 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 6a5c0f365..ea34e8702 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -11,16 +11,25 @@ const messages = defineMessages({
     id: 'sidebar.settings',
     defaultMessage: '!!!Settings',
   },
+  addNewService: {
+    id: 'sidebar.addNewService',
+    defaultMessage: '!!!Add new service',
+  },
+  mute: {
+    id: 'sidebar.mute',
+    defaultMessage: '!!!Disable audio',
+  },
+  unmute: {
+    id: 'sidebar.unmute',
+    defaultMessage: '!!!Enable audio',
+  },
 });
 
 export default class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
-    isPremiumUser: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    isPremiumUser: false,
+    toggleMuteApp: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
   }
 
   static contextTypes = {
@@ -40,8 +49,9 @@ export default class Sidebar extends Component {
   }
 
   render() {
-    const { openSettings, isPremiumUser } = this.props;
+    const { openSettings, toggleMuteApp, isAppMuted } = this.props;
     const { intl } = this.context;
+
     return (
       <div className="sidebar">
         <Tabbar
@@ -50,21 +60,25 @@ export default class Sidebar extends Component {
           disableToolTip={() => this.disableToolTip()}
         />
         <button
-          onClick={openSettings}
-          className="sidebar__settings-button"
+          onClick={toggleMuteApp}
+          className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+          data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+        >
+          <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
+        </button>
+        <button
+          onClick={() => openSettings({ path: 'recipes' })}
+          className="sidebar__button sidebar__button--new-service"
+          data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+        >
+          <i className="mdi mdi-plus-box" />
+        </button>
+        <button
+          onClick={() => openSettings({ path: 'app' })}
+          className="sidebar__button sidebar__button--settings"
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
         >
-          {isPremiumUser && (
-            <span className="emoji">
-              <img src="./assets/images/emoji/star.png" alt="" />
-            </span>
-          )}
-          <img
-            src="./assets/images/logo.svg"
-            className="sidebar__logo"
-            alt=""
-          />
-          {intl.formatMessage(messages.settings)}
+          <i className="mdi mdi-settings" />
         </button>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index a71017a6e..abbf21dee 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -16,6 +16,7 @@ export default class ServiceWebview extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
     enable: PropTypes.func.isRequired,
   };
 
@@ -58,6 +59,7 @@ export default class ServiceWebview extends Component {
       service,
       setWebviewReference,
       reload,
+      isAppMuted,
       enable,
     } = this.props;
 
@@ -90,31 +92,23 @@ export default class ServiceWebview extends Component {
             enable={enable}
           />
         )}
-        {service.isEnabled && (
-          <div className="services__webview-wrapper">
-            <Webview
-              ref={(element) => { this.webview = element; }}
-
-              autosize
-              src={service.url}
-              preload="./webview/plugin.js"
-              partition={`persist:service-${service.id}`}
-
-              onDidAttach={() => setWebviewReference({
-                serviceId: service.id,
-                webview: this.webview.view,
-              })}
-
-              onUpdateTargetUrl={this.updateTargetUrl}
-
-              useragent={service.userAgent}
-
-              disablewebsecurity
-              allowpopups
-            />
-            {statusBar}
-          </div>
-        )}
+        <Webview
+          ref={(element) => { this.webview = element; }}
+          autosize
+          src={service.url}
+          preload="./webview/plugin.js"
+          partition={`persist:service-${service.id}`}
+          onDidAttach={() => setWebviewReference({
+            serviceId: service.id,
+            webview: this.webview.view,
+          })}
+          onUpdateTargetUrl={this.updateTargetUrl}
+          useragent={service.userAgent}
+          muted={isAppMuted || service.isMuted}
+          disablewebsecurity
+          allowpopups
+        />
+        {statusBar}
       </div>
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 5230508f7..b1322afc2 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,
     update: PropTypes.func.isRequired,
   };
 
@@ -45,6 +46,7 @@ export default class Services extends Component {
       setWebviewReference,
       openWindow,
       reload,
+      isAppMuted,
       update,
     } = this.props;
     const { intl } = this.context;
@@ -78,6 +80,7 @@ export default class Services extends Component {
             setWebviewReference={setWebviewReference}
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
+            isAppMuted={isAppMuted}
             enable={() => update({
               serviceId: service.id,
               serviceData: {
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 3340cbbbb..2daf55676 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,29 +13,25 @@ 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,
     enableService: PropTypes.func.isRequired,
   }
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       services,
       setActive,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
       disableService,
       enableService,
       openSettings,
     } = this.props;
 
-    const { intl } = this.context;
-
     return (
       <ul
         className="tabs"
@@ -58,13 +45,14 @@ 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 })}
             enableService={() => enableService({ serviceId: service.id })}
             openSettings={openSettings}
           />
         ))}
-        <li>
+        {/* <li>
           <button
             className="sidebar__add-service"
             onClick={() => openSettings({ path: 'recipes' })}
@@ -72,7 +60,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 638e17d95..a7136c43f 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',
@@ -50,6 +58,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,
@@ -67,6 +76,7 @@ class TabItem extends Component {
       shortcutIndex,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
       disableService,
       enableService,
@@ -96,6 +106,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(service.isEnabled ? messages.disableService : messages.enableService),
       click: () => (service.isEnabled ? disableService() : enableService()),
     }, {
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 5f63aed16..fd4325107 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,
   }
@@ -59,6 +60,7 @@ export default class TabBar extends Component {
       disableToolTip,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
     } = this.props;
 
@@ -71,6 +73,7 @@ export default class TabBar extends Component {
           onSortStart={disableToolTip}
           reload={reload}
           toggleNotifications={toggleNotifications}
+          toggleAudio={toggleAudio}
           deleteService={deleteService}
           disableService={args => this.disableService(args)}
           enableService={args => this.enableService(args)}
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 9b359a78e..753781507 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -61,7 +61,11 @@ const messages = defineMessages({
   },
   indirectMessageInfo: {
     id: 'settings.service.form.indirectMessageInfo',
-    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', // eslint-disable-line
+    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
+  },
+  isMutedInfo: {
+    id: 'settings.service.form.isMutedInfo',
+    defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
 });
 
@@ -231,11 +235,15 @@ export default class EditServiceForm extends Component {
               {recipe.hasIndirectMessages && (
                 <div>
                   <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <p className="settings__indirect-message-help">
+                  <p className="settings__help">
                     {intl.formatMessage(messages.indirectMessageInfo)}
                   </p>
                 </div>
               )}
+              <Toggle field={form.$('isMuted')} />
+              <p className="settings__help">
+                {intl.formatMessage(messages.isMutedInfo)}
+              </p>
               <Toggle field={form.$('isEnabled')} />
             </div>
             {recipe.message && (
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 20d8581d0..9743315b0 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'settings.services.tooltip.notificationsDisabled',
     defaultMessage: '!!!Notifications are disabled',
   },
+  tooltipIsMuted: {
+    id: 'settings.services.tooltip.isMuted',
+    defaultMessage: '!!!All sounds are muted',
+  },
 });
 
 @observer
@@ -66,6 +70,17 @@ export default class ServiceItem extends Component {
           className="service-table__column-info"
           onClick={goToServiceForm}
         >
+          {service.isMuted && (
+            <span
+              className="mdi mdi-bell-off"
+              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
+            />
+          )}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
           {!service.isEnabled && (
             <span
               className="mdi mdi-power"
@@ -85,13 +100,6 @@ export default class ServiceItem extends Component {
           )}
           <ReactTooltip place="top" type="dark" effect="solid" />
         </td>
-        {/* <td className="service-table__column-action">
-          <input
-            type="checkbox"
-            onChange={toggleAction}
-            checked={service.isEnabled}
-          />
-        </td> */}
       </tr>
     );
   }