From f01f995d9fb5cf14193e11f770c52d7afea3739f Mon Sep 17 00:00:00 2001 From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com> Date: Wed, 29 Apr 2020 21:22:11 +0200 Subject: [PATCH] Add optionnal desktop notification --- client/src/actions/app.js | 4 + client/src/components/Home/Home.js | 25 +- client/src/components/Home/Home.test.js | 3 + .../Home/WithNewMessageNotification.js | 69 ++++ .../Home/__snapshots__/index.test.js.snap | 299 ++++++++++++++++++ client/src/components/Home/index.js | 8 +- client/src/components/Home/index.test.js | 161 ++++++++++ .../src/components/Settings/Settings.test.js | 91 ++++-- .../__snapshots__/Settings.test.js.snap | 46 ++- client/src/components/Settings/index.js | 15 +- client/src/i18n/de.json | 4 +- client/src/i18n/en.json | 11 +- client/src/i18n/fr.json | 9 +- client/src/i18n/it.json | 2 + client/src/i18n/nl.json | 4 +- client/src/i18n/oc.json | 9 +- client/src/i18n/zh-CN.json | 4 +- client/src/reducers/app.js | 8 +- client/src/reducers/app.test.js | 1 + client/src/utils/notifications.js | 50 +++ 20 files changed, 738 insertions(+), 85 deletions(-) create mode 100644 client/src/components/Home/WithNewMessageNotification.js create mode 100644 client/src/components/Home/__snapshots__/index.test.js.snap create mode 100644 client/src/components/Home/index.test.js create mode 100644 client/src/utils/notifications.js diff --git a/client/src/actions/app.js b/client/src/actions/app.js index ec00465..7e224aa 100644 --- a/client/src/actions/app.js +++ b/client/src/actions/app.js @@ -15,6 +15,10 @@ export const toggleSoundEnabled = payload => async (dispatch) => { dispatch({ type: 'TOGGLE_SOUND_ENABLED', payload }) } +export const toggleNotificationEnabled = payload => async (dispatch) => { + dispatch({ type: 'TOGGLE_NOTIFICATION_ENABLED', payload }) +} + export const toggleSocketConnected = payload => async (dispatch) => { dispatch({ type: 'TOGGLE_SOCKET_CONNECTED', payload }) } diff --git a/client/src/components/Home/Home.js b/client/src/components/Home/Home.js index a96fb65..e31cb6a 100644 --- a/client/src/components/Home/Home.js +++ b/client/src/components/Home/Home.js @@ -11,8 +11,6 @@ import Settings from 'components/Settings' import Welcome from 'components/Welcome' import RoomLocked from 'components/RoomLocked' import { X, AlertCircle } from 'react-feather' -import Tinycon from 'tinycon' -import beepFile from 'audio/beep.mp3' import classNames from 'classnames' import ActivityList from './ActivityList' @@ -81,16 +79,6 @@ class Home extends Component { componentDidMount() { this.bindEvents() - - this.beep = window.Audio && new window.Audio(beepFile) - } - - componentWillReceiveProps(nextProps) { - Tinycon.setBubble(nextProps.faviconCount) - - if (nextProps.faviconCount !== 0 && nextProps.faviconCount !== this.props.faviconCount && this.props.soundIsEnabled) { - this.beep.play() - } } getModal() { @@ -108,7 +96,16 @@ class Home extends Component { } case 'Settings': return { - component: , + component: , title: this.props.translations.settingsHeader, } case 'Welcome': @@ -251,6 +248,8 @@ Home.propTypes = { faviconCount: PropTypes.number.isRequired, soundIsEnabled: PropTypes.bool.isRequired, toggleSoundEnabled: PropTypes.func.isRequired, + notificationIsEnabled: PropTypes.bool.isRequired, + toggleNotificationEnabled: PropTypes.func.isRequired, toggleSocketConnected: PropTypes.func.isRequired, socketConnected: PropTypes.bool.isRequired, sendUnencryptedMessage: PropTypes.func.isRequired, diff --git a/client/src/components/Home/Home.test.js b/client/src/components/Home/Home.test.js index e1ef836..ecd7999 100644 --- a/client/src/components/Home/Home.test.js +++ b/client/src/components/Home/Home.test.js @@ -36,6 +36,7 @@ jest.mock('utils/crypto', () => { }); }); + test('Home component is displaying', async () => { const { asFragment } = render( @@ -60,6 +61,8 @@ test('Home component is displaying', async () => { socketConnected={false} toggleSoundEnabled={() => {}} soundIsEnabled={false} + toggleNotificationEnabled={() => {}} + notificationIsEnabled={false} faviconCount={0} toggleWindowFocus={() => {}} closeModal={() => {}} diff --git a/client/src/components/Home/WithNewMessageNotification.js b/client/src/components/Home/WithNewMessageNotification.js new file mode 100644 index 0000000..a3c21d1 --- /dev/null +++ b/client/src/components/Home/WithNewMessageNotification.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { notify, beep } from 'utils/notifications'; +import Tinycon from 'tinycon'; + +const mapStateToProps = state => { + return { + activities: state.activities.items, + unreadMessageCount: state.app.unreadMessageCount, + windowIsFocused: state.app.windowIsFocused, + soundIsEnabled: state.app.soundIsEnabled, + notificationIsEnabled: state.app.notificationIsEnabled, + room: state.room, + }; +}; + +const WithNewMessageNotification = WrappedComponent => { + return connect(mapStateToProps)( + class WithNotificationHOC extends Component { + state = { lastMessage: null, unreadMessageCount: 0 }; + + static getDerivedStateFromProps(nextProps, prevState) { + const { + room: { id: roomId }, + activities, + notificationIsEnabled, + soundIsEnabled, + unreadMessageCount, + windowIsFocused, + } = nextProps; + + if (activities.length === 0) { + return null; + } + + const lastMessage = activities[activities.length - 1]; + const { username, text } = lastMessage; + + if (lastMessage !== prevState.lastMessage && !windowIsFocused) { + const title = `Message from ${username} (${roomId})`; + if (notificationIsEnabled) notify(title, text); + if (soundIsEnabled) beep.play(); + } + + if (unreadMessageCount !== prevState.unreadMessageCount) { + Tinycon.setBubble(unreadMessageCount); + } + + return { lastMessage, unreadMessageCount }; + } + + render() { + // Filter props + const { + room, + activities, + notificationIsEnabled, + soundIsEnabled, + unreadMessageCount, + windowIsFocused, + ...rest + } = this.props; + return ; + } + }, + ); +}; + +export default WithNewMessageNotification; diff --git a/client/src/components/Home/__snapshots__/index.test.js.snap b/client/src/components/Home/__snapshots__/index.test.js.snap new file mode 100644 index 0000000..119a52d --- /dev/null +++ b/client/src/components/Home/__snapshots__/index.test.js.snap @@ -0,0 +1,299 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Connected Home component should display 1`] = ` + +
+
+
+ + + + + + + + + + Disconnected + +
+ +
+
+ +`; diff --git a/client/src/components/Home/index.js b/client/src/components/Home/index.js index ae7357f..ee0f3d3 100644 --- a/client/src/components/Home/index.js +++ b/client/src/components/Home/index.js @@ -7,12 +7,14 @@ import { closeModal, toggleWindowFocus, toggleSoundEnabled, + toggleNotificationEnabled, toggleSocketConnected, receiveUnencryptedMessage, sendUnencryptedMessage, sendEncryptedMessage, setLanguage } from 'actions' +import WithNewMessageNotification from './WithNewMessageNotification' const mapStateToProps = (state) => { const me = state.room.members.find(m => m.id === state.user.id) @@ -30,6 +32,7 @@ const mapStateToProps = (state) => { iAmOwner: Boolean(me && me.isOwner), faviconCount: state.app.unreadMessageCount, soundIsEnabled: state.app.soundIsEnabled, + notificationIsEnabled: state.app.notificationIsEnabled, socketConnected: state.app.socketConnected, language: state.app.language, translations: state.app.translations, @@ -43,6 +46,7 @@ const mapDispatchToProps = { closeModal, toggleWindowFocus, toggleSoundEnabled, + toggleNotificationEnabled, toggleSocketConnected, receiveUnencryptedMessage, sendUnencryptedMessage, @@ -50,7 +54,7 @@ const mapDispatchToProps = { setLanguage } -export default connect( +export default WithNewMessageNotification(connect( mapStateToProps, mapDispatchToProps -)(Home) +)(Home)) diff --git a/client/src/components/Home/index.test.js b/client/src/components/Home/index.test.js new file mode 100644 index 0000000..ebbe573 --- /dev/null +++ b/client/src/components/Home/index.test.js @@ -0,0 +1,161 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import ConnectedHome from '.'; +import { Provider } from 'react-redux'; +import configureStore from 'store'; +import { toggleWindowFocus, toggleNotificationEnabled, toggleSoundEnabled } from 'actions/app'; +import { receiveEncryptedMessage } from 'actions/encrypted_messages'; +import { notify, beep } from 'utils/notifications'; +import Tinycon from 'tinycon'; +import Modal from 'react-modal'; + +const store = configureStore(); + +jest.useFakeTimers(); + +// We don't test activity list here +jest.mock('./ActivityList', () => { + return jest.fn().mockReturnValue(null); +}); + +jest.mock('react-modal'); // Cant load modal without root app element + +jest.mock('utils/socket', () => { + // Avoid exception + return { + connect: jest.fn().mockImplementation(() => { + return { + on: jest.fn(), + emit: jest.fn(), + }; + }), + getSocket: jest.fn().mockImplementation(() => { + return { + on: jest.fn(), + emit: jest.fn(), + }; + }), + }; +}); + +jest.mock('shortid', () => { + // Avoid exception + return { + generate: jest.fn().mockImplementation(() => { + return 'shortidgenerated'; + }), + }; +}); + +jest.mock('utils/crypto', () => { + // Need window.crytpo.subtle + return jest.fn().mockImplementation(() => { + return { + createEncryptDecryptKeys: () => { + return { + privateKey: { n: 'private' }, + publicKey: { n: 'public' }, + }; + }, + exportKey: () => { + return { n: 'exportedKey' }; + }, + }; + }); +}); + +jest.mock('utils/message', () => { + return { + process: jest.fn(async (payload, state) => ({ + ...payload, + payload: { payload: 'text', username: 'sender', text: 'new message' }, + })), + }; +}); + +jest.mock('utils/notifications', () => { + return { + notify: jest.fn(), + beep: { play: jest.fn() }, + }; +}); + +jest.mock('tinycon', () => { + return { + setBubble: jest.fn(), + }; +}); + +describe('Connected Home component', () => { + it('should display', () => { + const { asFragment } = render( + + + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('should send notifications', async () => { + Modal.prototype.getSnapshotBeforeUpdate = jest.fn().mockReturnValue(null); + const { rerender } = render( + + + , + ); + + // Test with window focused + await receiveEncryptedMessage({ + type: 'TEXT_MESSAGE', + payload: {}, + })(store.dispatch, store.getState); + + rerender( + + + , + ); + + expect(store.getState().app.unreadMessageCount).toBe(0); + expect(notify).not.toHaveBeenCalled(); + expect(beep.play).not.toHaveBeenCalled(); + expect(Tinycon.setBubble).not.toHaveBeenCalled(); + + // Test with window unfocused + await toggleWindowFocus(false)(store.dispatch); + await receiveEncryptedMessage({ + type: 'TEXT_MESSAGE', + payload: {}, + })(store.dispatch, store.getState); + + rerender( + + + , + ); + expect(store.getState().app.unreadMessageCount).toBe(1); + expect(notify).toHaveBeenLastCalledWith('Message from sender ()', 'new message'); + expect(beep.play).toHaveBeenLastCalledWith(); + expect(Tinycon.setBubble).toHaveBeenLastCalledWith(1); + + // Test with sound and notification disabled + await toggleNotificationEnabled(false)(store.dispatch); + await toggleSoundEnabled(false)(store.dispatch); + await receiveEncryptedMessage({ + type: 'TEXT_MESSAGE', + payload: {}, + })(store.dispatch, store.getState); + + rerender( + + + , + ); + + expect(store.getState().app.unreadMessageCount).toBe(2); + expect(notify).toHaveBeenCalledTimes(1); + expect(beep.play).toHaveBeenCalledTimes(1); + expect(Tinycon.setBubble).toHaveBeenLastCalledWith(2); + }); +}); diff --git a/client/src/components/Settings/Settings.test.js b/client/src/components/Settings/Settings.test.js index 8bab556..33bdd0b 100644 --- a/client/src/components/Settings/Settings.test.js +++ b/client/src/components/Settings/Settings.test.js @@ -1,32 +1,32 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import configureStore from 'store'; import Settings from '.'; +const store = configureStore(); + const mockTranslations = { sound: 'soundCheck', }; -jest.mock('components/T', () => { - return jest.fn().mockImplementation(({ path }) => { - return mockTranslations[path] || 'default'; - }); -}); - -// To avoid missing provider -jest.mock('components/T'); jest.mock('components/RoomLink'); describe('Settings component', () => { it('should display', async () => { const { asFragment } = render( - {}} - roomId="roomId" - setLanguage={() => {}} - translations={mockTranslations} - />, + + {}} + notificationIsEnabled={true} + toggleNotificationEnabled={() => {}} + roomId="roomId" + setLanguage={() => {}} + translations={{}} + /> + , ); expect(asFragment()).toMatchSnapshot(); @@ -34,33 +34,62 @@ describe('Settings component', () => { it('should toggle sound', async () => { const toggleSound = jest.fn(); - const { getAllByText } = render( - {}} - translations={mockTranslations} - />, + const { getByText } = render( + + {}} + roomId="roomId" + setLanguage={() => {}} + translations={{}} + /> + , ); //console.log(getAllByText(mockTranslations.sound)[1]); - fireEvent.click(getAllByText(mockTranslations.sound)[1]); + fireEvent.click(getByText('Sound')); expect(toggleSound).toHaveBeenCalledWith(false); }); + it('should toggle notifications', async () => { + const toggleNotifications = jest.fn(); + const { getByText } = render( + + {}} + notificationIsEnabled={true} + toggleNotificationEnabled={toggleNotifications} + roomId="roomId" + setLanguage={() => {}} + translations={{}} + /> + , + ); + + fireEvent.click(getByText('Desktop Notification')); + + expect(toggleNotifications).toHaveBeenCalledWith(false); + }); + it('should change lang', async () => { const changeLang = jest.fn(); const { getByDisplayValue } = render( - {}} - roomId="roomId" - setLanguage={changeLang} - translations={{}} - />, + + {}} + notificationIsEnabled={true} + toggleNotificationEnabled={() => {}} + roomId="roomId" + setLanguage={changeLang} + translations={{}} + /> + , ); fireEvent.change(getByDisplayValue('English'), { target: { value: 'de' } }); diff --git a/client/src/components/Settings/__snapshots__/Settings.test.js.snap b/client/src/components/Settings/__snapshots__/Settings.test.js.snap index d0bb90a..b0e3c81 100644 --- a/client/src/components/Settings/__snapshots__/Settings.test.js.snap +++ b/client/src/components/Settings/__snapshots__/Settings.test.js.snap @@ -7,7 +7,7 @@ exports[`Settings component should display 1`] = ` >

- soundCheck + New message notification

- soundCheck + Sound + +
+
+
@@ -32,14 +48,14 @@ exports[`Settings component should display 1`] = `

- default + This room

- default + Language

- default + Help us translate Darkwire!

- default + Room Ownership

- default + The person who created the room is the room owner and has special privileges, like the ability to lock and unlock the room. If the owner leaves the room, the second person to join assumes ownership. If they leave, the third person becomes owner, and so on. The room owner has a star icon next to their username in the participants dropdown.

- default + Lock Room

- default + If you are the room owner, you can lock and unlock the room by clicking the lock icon in the nav bar. When a room is locked, no other participants will be able to join.

- default + Slash Commands

- default + The following slash commands are available:

  • @@ -123,7 +139,7 @@ exports[`Settings component should display 1`] = ` - default + changes username
  • @@ -131,7 +147,7 @@ exports[`Settings component should display 1`] = ` - default + performs an action
  • @@ -139,7 +155,7 @@ exports[`Settings component should display 1`] = ` - default + clears your message history
  • @@ -147,7 +163,7 @@ exports[`Settings component should display 1`] = ` - default + lists all commands
diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js index 50b27c5..e3b2397 100644 --- a/client/src/components/Settings/index.js +++ b/client/src/components/Settings/index.js @@ -11,6 +11,10 @@ class Settings extends Component { this.props.toggleSoundEnabled(!this.props.soundIsEnabled) } + handleNotificationToggle() { + this.props.toggleNotificationEnabled(!this.props.notificationIsEnabled) + } + handleLanguageChange(evt) { const language = evt.target.value; Cookie.set('language', language); @@ -21,7 +25,7 @@ class Settings extends Component { return (
-

+

+
+ +
+

@@ -78,6 +89,8 @@ class Settings extends Component { Settings.propTypes = { soundIsEnabled: PropTypes.bool.isRequired, toggleSoundEnabled: PropTypes.func.isRequired, + notificationIsEnabled: PropTypes.bool.isRequired, + toggleNotificationEnabled: PropTypes.func.isRequired, roomId: PropTypes.string.isRequired, setLanguage: PropTypes.func.isRequired, translations: PropTypes.object.isRequired, diff --git a/client/src/i18n/de.json b/client/src/i18n/de.json index f1cac6c..b4ceaf7 100644 --- a/client/src/i18n/de.json +++ b/client/src/i18n/de.json @@ -22,6 +22,8 @@ "slashCommandsHeader": "Slash-Befehle", "slashCommandsText": "Die folgenden Schrägstrichbefehle sind verfügbar:", "sound": "Klingen", + "newMessageNotification": "New message notification", + "desktopNotification": "Desktop Notification", "typePlaceholder": "Tippen Sie hier", "unlockedRoom": "{username} hat den Raum freigeschaltet", "userJoined": "{username} ist beigetreten", @@ -30,4 +32,4 @@ "welcomeHeader": "Willkommen bei Darkwire v2.0", "welcomeModalCTA": "OK", "helpTranslate": "Hilf uns, Darkwire zu übersetzen!" -} \ No newline at end of file +} diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json index 4664147..4a8d107 100644 --- a/client/src/i18n/en.json +++ b/client/src/i18n/en.json @@ -25,14 +25,11 @@ "lockRoomText": "If you are the room owner, you can lock and unlock the room by clicking the lock icon in the nav bar. When a room is locked, no other participants will be able to join.", "slashCommandsHeader": "Slash Commands", "slashCommandsText": "The following slash commands are available:", - "slashCommandsBullets": [ - "changes username", - "performs an action", - "clears your message history", - "lists all commands" - ], + "slashCommandsBullets": ["changes username", "performs an action", "clears your message history", "lists all commands"], "sound": "Sound", + "newMessageNotification": "New message notification", + "desktopNotification": "Desktop Notification", "welcomeModalCTA": "Ok", "lockedRoomHeader": "This room is locked", "helpTranslate": "Help us translate Darkwire!" -} \ No newline at end of file +} diff --git a/client/src/i18n/fr.json b/client/src/i18n/fr.json index 33b4e13..c0a56d0 100644 --- a/client/src/i18n/fr.json +++ b/client/src/i18n/fr.json @@ -25,13 +25,10 @@ "lockRoomText": "Si vous êtes le propriétaire du salon, vous pouvez le verrouiller et le déverrouiller en cliquant sur l'icône de cadenas située dans la barre de navigation. Quand un salon est verrouillé, aucun autre participant ne peut rejoindre.", "slashCommandsHeader": "Commandes", "slashCommandsText": "Les commandes suivantes sont disponibles :", - "slashCommandsBullets": [ - "changer de pseudo", - "effectuer une action", - "effacer votre historique de messages", - "lister toutes les commandes" - ], + "slashCommandsBullets": ["changer de pseudo", "effectuer une action", "effacer votre historique de messages", "lister toutes les commandes"], "sound": "Son", + "newMessageNotification": "Notification lors d'un nouveau message", + "desktopNotification": "Notification Système", "welcomeModalCTA": "Ok", "lockedRoomHeader": "Ce salon est verrouillé", "helpTranslate": "Aidez-nous à traduire Darkwire!" diff --git a/client/src/i18n/it.json b/client/src/i18n/it.json index 14d0f02..37a768f 100644 --- a/client/src/i18n/it.json +++ b/client/src/i18n/it.json @@ -22,6 +22,8 @@ "slashCommandsHeader": "Comandi", "slashCommandsText": "Sono disponibili i seguenti comandi:", "sound": "Suono", + "newMessageNotification": "New message notification", + "desktopNotification": "Desktop Notification", "typePlaceholder": "Digitare qui", "unlockedRoom": "{username} ha aperto la stanza", "userJoined": "{username} si è unito", diff --git a/client/src/i18n/nl.json b/client/src/i18n/nl.json index e363e41..04e7121 100644 --- a/client/src/i18n/nl.json +++ b/client/src/i18n/nl.json @@ -22,6 +22,8 @@ "slashCommandsHeader": "Slash-opdrachten", "slashCommandsText": "De volgende slash-opdrachten zijn beschikbaar:", "sound": "Geluid", + "newMessageNotification": "New message notification", + "desktopNotification": "Desktop Notification", "typePlaceholder": "Typ hier", "unlockedRoom": "{username} heeft de kamer ontgrendeld", "userJoined": "{username} is lid geworden", @@ -30,4 +32,4 @@ "welcomeHeader": "Welkom bij Darkwire v2.0", "welcomeModalCTA": "OK", "helpTranslate": "Help ons Darkwire te vertalen!" -} \ No newline at end of file +} diff --git a/client/src/i18n/oc.json b/client/src/i18n/oc.json index 98b3833..c78d2f9 100644 --- a/client/src/i18n/oc.json +++ b/client/src/i18n/oc.json @@ -25,13 +25,10 @@ "lockRoomText": "Se sètz lo proprietari de la sala, podètz clavar e desclavar en clicar l’icòna del cadenat de la barra de navigacion. Quand una sala es clavada, cap de participant pòt pas la rejónher .", "slashCommandsHeader": "Comandas", "slashCommandsText": "Las comandas seguentas son disponiblas :", - "slashCommandsBullets": [ - "càmbia d’escais-nom", - "realiza una accion", - "escafa l’istoric de conversacion", - "lista totas las comandas" - ], + "slashCommandsBullets": ["càmbia d’escais-nom", "realiza una accion", "escafa l’istoric de conversacion", "lista totas las comandas"], "sound": "Son", + "newMessageNotification": "New message notification", + "desktopNotification": "Desktop Notification", "welcomeModalCTA": "D’acòrdi", "lockedRoomHeader": "Aquesta sala es clavada", "helpTranslate": "Ajudatz-nos a traduire Darkwire !" diff --git a/client/src/i18n/zh-CN.json b/client/src/i18n/zh-CN.json index 9af9261..e76aa07 100644 --- a/client/src/i18n/zh-CN.json +++ b/client/src/i18n/zh-CN.json @@ -22,6 +22,8 @@ "slashCommandsHeader": "斜线命令", "slashCommandsText": "可以使用以下斜杠命令：", "sound": "声音", + "newMessageNotification": "New message notification", + "desktopNotification": "Desktop Notification", "typePlaceholder": "在此输入", "unlockedRoom": "{username} 解锁了房间", "userJoined": "{username} 已加入", @@ -30,4 +32,4 @@ "welcomeHeader": "欢迎来到Darkwire v2.0", "welcomeModalCTA": "好", "helpTranslate": "帮助我们翻译Darkwire" -} \ No newline at end of file +} diff --git a/client/src/reducers/app.js b/client/src/reducers/app.js index 557b812..2328dcf 100644 --- a/client/src/reducers/app.js +++ b/client/src/reducers/app.js @@ -1,5 +1,5 @@ import Cookie from 'js-cookie'; -import {getTranslations} from 'i18n'; +import { getTranslations } from 'i18n'; const language = Cookie.get('language') || navigator.language || 'en'; @@ -9,6 +9,7 @@ const initialState = { windowIsFocused: true, unreadMessageCount: 0, soundIsEnabled: true, + notificationIsEnabled: true, socketConnected: false, language, translations: getTranslations(language) @@ -47,6 +48,11 @@ const app = (state = initialState, action) => { ...state, soundIsEnabled: action.payload, } + case 'TOGGLE_NOTIFICATION_ENABLED': + return { + ...state, + notificationIsEnabled: action.payload, + } case 'TOGGLE_SOCKET_CONNECTED': return { ...state, diff --git a/client/src/reducers/app.test.js b/client/src/reducers/app.test.js index 3177f90..b737067 100644 --- a/client/src/reducers/app.test.js +++ b/client/src/reducers/app.test.js @@ -14,6 +14,7 @@ describe('App reducer', () => { modalComponent: null, scrolledToBottom: true, socketConnected: false, + notificationIsEnabled: true, soundIsEnabled: true, translations: { path: 'test' }, unreadMessageCount: 0, diff --git a/client/src/utils/notifications.js b/client/src/utils/notifications.js new file mode 100644 index 0000000..220176a --- /dev/null +++ b/client/src/utils/notifications.js @@ -0,0 +1,50 @@ +import beepFile from 'audio/beep.mp3' + + +const showNotification = (title, message, avatarUrl) => { + const notifBody = { + body: message, + tag: 'darkwire', + silent: true, // we play our own sounds + }; + + const notification = new Notification(title, notifBody); + const handleVisibilityChange = () => { + if (document.visibilityState === 'visible') { + // The tab has become visible so clear the now-stale Notification. + notification.close(); + document.removeEventListener('visibilitychange', handleVisibilityChange); + } + }; + // Focus window on click + notification.onclick = function () { + window.focus(); + notification.close(); + }; + document.addEventListener('visibilitychange', handleVisibilityChange); +}; + +export const notify = (title, content) => { + if (!('Notification' in window)) { + alert('This browser does not support desktop notification'); + } + // Let's check whether notification permissions have already been granted + else if (Notification.permission === 'granted') { + // If it's okay let's create a notification + showNotification(title, content); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied') { + Notification.requestPermission().then(function (permission) { + // If the user accepts, let's create a notification + if (permission === 'granted') { + showNotification(title, content); + } + }); + } +}; + +export const beep = (window.Audio && new window.Audio(beepFile)) || { play: () => { }} + +export default { notify, beep };