feat(Service): Add option to mute service

3 files changed, 26 insertions, 14 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index cd59e0a8a..d7e0a4f38 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -82,21 +82,17 @@ export default class ServiceWebview extends Component {
         )}
         <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={service.isMuted}
           disablewebsecurity
           allowpopups
         />
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>
     );
   }