Merge pull request #252 from meetfranz/feature/mute-service

[WIP] Mute services
meetfranz · Nov 11, 2017 · 0643cee · 0643cee
2 parents a6d43cf + 0526bb7
commit 0643cee
Show file tree

Hide file tree

Showing 23 changed files with 259 additions and 107 deletions.
diff --git a/appveyor.yml b/appveyor.yml
@@ -9,13 +9,14 @@ environment:
 version: 5.0.0.{build}
 
 install:
-  - ps: Install-Product node 7
+  - ps: Install-Product node 8
+  - yarn cache clean
   - yarn add global gulp-cli@1.2.2
   - yarn add global gulpjs/gulp#4.0
   - yarn install
 
-cache:
- - "%LOCALAPPDATA%\\Yarn"
+# cache:
+#  - "%LOCALAPPDATA%\\Yarn"
 
 before_build:
   - yarn lint

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   "author": "Stefan Malzner <stefan@adlk.io>",
   "license": "Apache-2.0",
   "dependencies": {
+    "@meetfranz/electron-notification-state": "^1.0.0",
     "@paulcbetts/system-idle-time": "^1.0.4",
     "address-rfc2822": "^2.0.1",
     "auto-launch": "https://github.com/meetfranz/node-auto-launch.git",

diff --git a/src/actions/app.js b/src/actions/app.js
@@ -20,4 +20,8 @@ export default {
   resetUpdateStatus: {},
   installUpdate: {},
   healthCheck: {},
+  muteApp: {
+    isMuted: PropTypes.bool.isRequired,
+  },
+  toggleMuteApp: {},
 };
diff --git a/src/actions/service.js b/src/actions/service.js
@@ -71,6 +71,9 @@ export default {
   toggleNotifications: {
     serviceId: PropTypes.string.isRequired,
   },
+  toggleAudio: {
+    serviceId: PropTypes.string.isRequired,
+  },
   openDevTools: {
     serviceId: PropTypes.string.isRequired,
   },

diff --git 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
@@ -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
@@ -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
@@ -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,21 +45,22 @@ 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' })}
             data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
           >
             <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
@@ -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,
@@ -95,6 +105,11 @@ class TabItem extends Component {
         ? intl.formatMessage(messages.disableNotifications)
         : 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
@@ -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
@@ -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 && (