feat(Service): Add option to mute service

Author: adlk

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
         />

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 && (

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
@@ -62,6 +66,17 @@ export default class ServiceItem extends Component {
         >
           {service.name !== '' ? service.name : service.recipe.name}
         </td>
+        <td
+          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}
@@ -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>
     );
   }

src/containers/settings/EditServiceScreen.js

@@ -9,7 +9,6 @@ import ServicesStore from '../../stores/ServicesStore';
 import Form from '../../lib/Form';
 import { gaPage } from '../../lib/analytics';
 
-
 import ServiceError from '../../components/settings/services/ServiceError';
 import EditServiceForm from '../../components/settings/services/EditServiceForm';
 import { required, url, oneRequired } from '../../helpers/validation-helpers';
@@ -27,6 +26,10 @@ const messages = defineMessages({
     id: 'settings.service.form.enableNotification',
     defaultMessage: '!!!Enable Notifications',
   },
+  enableAudio: {
+    id: 'settings.service.form.enableAudio',
+    defaultMessage: '!!!Enable audio',
+  },
   team: {
     id: 'settings.service.form.team',
     defaultMessage: '!!!Team',
@@ -51,11 +54,14 @@ export default class EditServiceScreen extends Component {
     gaPage('Settings/Service/Edit');
   }
 
-  onSubmit(serviceData) {
+  onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
     const { createService, updateService } = this.props.actions.service;
 
+    const serviceData = data;
+    serviceData.isMuted = !serviceData.isMuted;
+
     if (action === 'edit') {
       updateService({ serviceId: services.activeSettings.id, serviceData });
     } else {
@@ -82,6 +88,11 @@ export default class EditServiceScreen extends Component {
           value: service.isNotificationEnabled,
           default: true,
         },
+        isMuted: {
+          label: intl.formatMessage(messages.enableAudio),
+          value: !service.isMuted,
+          default: true,
+        },
       },
     };
 

src/i18n/locales/en-US.json

@@ -106,11 +106,20 @@
   "settings.service.form.customUrlPremiumInfo": "To add self hosted services, you need a Franz Premium Supporter Account.",
   "settings.service.form.customUrlUpgradeAccount": "Upgrade your account",
   "settings.service.form.indirectMessageInfo": "You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
+  "settings.service.form.name": "Name",
+  "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableNotification": "Enable notifications",
+  "settings.service.form.team": "Team",
+  "settings.service.form.customUrl": "Custom server",
+  "settings.service.form.indirectMessages": "Show message badge for all new messages",
+  "settings.service.form.enableAudio": "Enable audio",
+  "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
   "settings.service.error.headline": "Error",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.message": "Could not load service recipe.",
   "settings.services.tooltip.isDisabled": "Service is disabled",
   "settings.services.tooltip.notificationsDisabled": "Notifications are disabled",
+  "settings.services.tooltip.isMuted": "All sounds are muted",
   "settings.services.headline": "Your services",
   "settings.services.noServicesAdded": "You haven't added any services yet.",
   "settings.services.discoverServices": "Discover services",
@@ -133,12 +142,6 @@
   "settings.app.form.language": "Language",
   "settings.app.form.beta": "Include beta versions",
   "settings.app.currentVersion": "Current version:",
-  "settings.service.form.name": "Name",
-  "settings.service.form.enableService": "Enable service",
-  "settings.service.form.enableNotification": "Enable notifications",
-  "settings.service.form.team": "Team",
-  "settings.service.form.customUrl": "Custom server",
-  "settings.service.form.indirectMessages": "Show message badge for all new messages",
   "settings.user.form.firstname": "Firstname",
   "settings.user.form.lastname": "Lastname",
   "settings.user.form.email": "Email",

src/models/Service.js

@@ -18,6 +18,7 @@ export default class Service {
 
   @observable order = 99;
   @observable isEnabled = true;
+  @observable isMuted = false;
   @observable team = '';
   @observable customUrl = '';
   @observable isNotificationEnabled = true;
@@ -54,6 +55,8 @@ export default class Service {
     this.isIndirectMessageBadgeEnabled = data.isIndirectMessageBadgeEnabled !== undefined
       ? data.isIndirectMessageBadgeEnabled : this.isIndirectMessageBadgeEnabled;
 
+    this.isMuted = data.isMuted !== undefined ? data.isMuted : this.isMuted;
+
     this.recipe = recipe;
   }
 

src/stores/ServicesStore.js

@@ -287,7 +287,7 @@ export default class ServicesStore extends Store {
       });
     } else if (channel === 'notification') {
       const options = args[0].options;
-      if (service.recipe.hasNotificationSound) {
+      if (service.recipe.hasNotificationSound || service.isMuted) {
         Object.assign(options, {
           silent: true,
         });

src/styles/settings.scss

@@ -169,7 +169,7 @@
     }
   }
 
-  .settings__indirect-message-help {
+  .settings__help {
     margin: -10px 0 20px 55px;;
     font-size: 12px;
     color: $theme-gray-light;