From b3c3134f3ce2eeecfab313541749c3a639b21fba Mon Sep 17 00:00:00 2001
From: Tarek Mostafa <trkmos@gmail.com>
Date: Wed, 10 Apr 2019 21:49:39 +0200
Subject: [PATCH] add sound effect

---
 package.json                  |  2 +-
 src/components/User.tsx       |  1 +
 src/state/epics/timerEpics.ts | 20 ++++++++++++++++++--
 src/utils/notifications.ts    | 12 ++++++++++++
 yarn.lock                     | 34 +++++++++++++++++++++++++++++++++-
 5 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 199569e..68e8325 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "postcss-loader": "2.1.6",
     "promise": "8.0.1",
     "raf": "3.4.0",
-    "react": "^16.4.1",
+    "react": "^16.8.0",
     "react-dev-utils": "^6.0.0-next.b2fd8db8",
     "react-dnd": "^5.0.0",
     "react-dnd-html5-backend": "^5.0.1",
diff --git a/src/components/User.tsx b/src/components/User.tsx
index 33f7b87..790054d 100644
--- a/src/components/User.tsx
+++ b/src/components/User.tsx
@@ -123,6 +123,7 @@ class DraggableUserComponent extends React.PureComponent<IProps> {
               fontSize: '1.15em',
               cursor: 'grab',
             }}
+            primaryText="What is primary text"
             primaryAction={
               <span
                 style={{
diff --git a/src/state/epics/timerEpics.ts b/src/state/epics/timerEpics.ts
index 1385bc0..2bc60cc 100644
--- a/src/state/epics/timerEpics.ts
+++ b/src/state/epics/timerEpics.ts
@@ -1,12 +1,24 @@
 import { combineEpics, Epic } from 'redux-observable'
 import { interval } from 'rxjs'
-import { filter, flatMap, mapTo, mergeMap, switchMap, takeUntil } from 'rxjs/operators'
+import {
+  filter,
+  flatMap,
+  mapTo,
+  mergeMap,
+  switchMap,
+  takeUntil,
+} from 'rxjs/operators'
 import { isOfType } from 'typesafe-actions'
 
 import { IRootActions, IRootState } from '@state/index'
 import * as timerActions from '@state/actions/timerActions'
 import { setActiveNext } from '@state/actions/usersActions'
-import { COUNT_DOWN_FINISHED, COUNT_DOWN_ONE_SECOND, START_TIMER, STOP_TIMER } from '@state/actions/constants'
+import {
+  COUNT_DOWN_FINISHED,
+  COUNT_DOWN_ONE_SECOND,
+  START_TIMER,
+  STOP_TIMER,
+} from '@state/actions/constants'
 
 import { notify } from '../../utils/notifications'
 import timer from '../../assets/timer.svg'
@@ -14,6 +26,9 @@ import timer from '../../assets/timer.svg'
 type EpicType = Epic<IRootActions, IRootActions, IRootState>
 const { stopTimer, countDownFinished, countDownOneSecond } = timerActions
 
+const SOUND =
+  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3'
+
 export const startTimerEpic: EpicType = action$ =>
   action$.pipe(
     filter(isOfType(START_TIMER)),
@@ -49,6 +64,7 @@ export const alertEpic: EpicType = (action$, state$) =>
           badge: timer,
           icon: timer,
           vibrate: [2000, 2000, 2000],
+          sound: SOUND,
         }),
       ]
     }),
diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
index 56ce554..2ba596a 100644
--- a/src/utils/notifications.ts
+++ b/src/utils/notifications.ts
@@ -9,6 +9,7 @@ interface INotificationOptions {
   lang?: string
   tag?: string
   vibrate?: number[]
+  sound?: string
   onClose?: (e: Event) => any
 }
 
@@ -18,9 +19,20 @@ export function requestPermission() {
     .catch()
 }
 
+const playSound = (soundLink: string) => {
+  const sound = new Audio(soundLink)
+
+  if (sound) {
+    sound.load()
+    sound.play()
+  }
+}
+
 export function notify(title: string, options?: INotificationOptions) {
   const notification = new Notification(title, options)
 
+  playSound((options && options.sound) || '')
+
   notification.onclick = () => {
     notification.close()
   }
diff --git a/yarn.lock b/yarn.lock
index 3c2358d..911149f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4903,7 +4903,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   dependencies:
@@ -6049,6 +6049,15 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8,
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
@@ -6315,6 +6324,11 @@ react-is@^16.3.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
 
+react-is@^16.8.1:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
 react-keydown@^1.9.7:
   version "1.9.7"
   resolved "https://registry.yarnpkg.com/react-keydown/-/react-keydown-1.9.7.tgz#cd168d4b0194b6ef71bca47e5c1cbc5d24ab5498"
@@ -6410,6 +6424,16 @@ react@*, react@^16.4.1:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react@^16.8.0:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -6864,6 +6888,14 @@ sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.0, schema-utils@^0.4.3, schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"