Merge pull request #3 from danielabar/feature/2-play-sound-break-start

Feature/2 play sound break start
danielabar · Dec 27, 2016 · 686a5cf · 686a5cf
2 parents 4f5b8d5 + fd8b7ac
commit 686a5cf
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 A port of [EyeLeo](http://eyeleo.com/overview) for the web, but with an owl.
 
-Hoot sound [Attribution 3.0](http://soundbible.com/1851-Horned-Owl.html)
+## Attributions
+
+Tweet sound [Creative Commons](https://notificationsounds.com/message-tones/rvrb2-15)
 
 Ding sound [Sampling Plus 1.0](http://soundbible.com/1424-Air-Plane-Ding.html)
 

diff --git a/docs/bundle-1c4b8d51753f24d37682.js → docs/bundle-0ce165cbc154317bee9d.js b/docs/bundle-1c4b8d51753f24d37682.js → docs/bundle-0ce165cbc154317bee9d.js
diff --git a/docs/bundle-0ce165cbc154317bee9d.js.map b/docs/bundle-0ce165cbc154317bee9d.js.map
diff --git a/docs/bundle-1c4b8d51753f24d37682.js.map b/docs/bundle-1c4b8d51753f24d37682.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -6,7 +6,7 @@
   <title>Eye Hoot</title>
   <link rel="shortcut icon" href="owl.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" integrity="sha256-MSeNrYhmfZbyTUAhVy7w153T7LFxQfCf/DBDjtbvZdg=" crossorigin="anonymous" />
-<link href="/styles-1c4b8d51753f24d37682.css" rel="stylesheet"></head>
+<link href="/styles-0ce165cbc154317bee9d.css" rel="stylesheet"></head>
 <body>
 
   <!-- for testing only -->
@@ -20,6 +20,7 @@
 
   <!-- timer -->
   <div class="clock-container">
+    <audio class="break-start" preload="auto"></audio>
     <audio class="break-over" preload="auto"></audio>
     <div class="clock"></div>
   </div>
@@ -114,5 +115,5 @@
 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js" integrity="sha256-zZFgUYWREnXJDw3PMQASiGmzHVL+VNfcA5eaXhipwag=" crossorigin="anonymous"></script>
-<script type="text/javascript" src="/bundle-1c4b8d51753f24d37682.js"></script></body>
+<script type="text/javascript" src="/bundle-0ce165cbc154317bee9d.js"></script></body>
 </html>
diff --git a/docs/styles-1c4b8d51753f24d37682.css → docs/styles-0ce165cbc154317bee9d.css b/docs/styles-1c4b8d51753f24d37682.css → docs/styles-0ce165cbc154317bee9d.css
diff --git a/docs/styles-1c4b8d51753f24d37682.css.map → docs/styles-0ce165cbc154317bee9d.css.map b/docs/styles-1c4b8d51753f24d37682.css.map → docs/styles-0ce165cbc154317bee9d.css.map
diff --git a/index.template.ejs b/index.template.ejs
@@ -20,6 +20,7 @@
 
   <!-- timer -->
   <div class="clock-container">
+    <audio class="break-start" preload="auto"></audio>
     <audio class="break-over" preload="auto"></audio>
     <div class="clock"></div>
   </div>

diff --git a/js/app.js b/js/app.js
@@ -1,4 +1,5 @@
-import audioFileUrl from '../sounds/ding.mp3';
+import breakStartAudioFile from '../sounds/tweet.mp3';
+import breakOverAudioFile from '../sounds/ding.mp3';
 import owlImage from '../images/owl.png';
 
 var sideToSideButton;
@@ -8,7 +9,8 @@ var blinkButton;
 var longBreakButton;
 
 var messageElement;
-var audioElement;
+var audioBreakStartEl;
+var audioBreakOverEl;
 
 var owlGraphic;
 var owlSvg;
@@ -26,7 +28,7 @@ var animationIndex = 0;
 var timeElapsed = 0;
 var EYE_ANIMATION_INTERVAL = 10;
 var LONG_BREAK_ANIMATION_INTERVAL = 5 * 60;
-var WORK_INTERVAL = 15 * 60;
+var WORK_INTERVAL = DEFAULT_WORK_INTERVAL;
 var TIME_TO_LONG_BREAK = 60 * 60;
 var WORK_MESSAGE = 'Time to work';
 
@@ -37,7 +39,7 @@ export function start() {
 
 var handleNotificationDenied = function() {
   dimBrighten();
-  document.querySelector('.message').innerHTML = 'Please allow notifications to use Eye Hoot.';
+  messageElement.innerHTML = 'Please allow notifications to use Eye Hoot.';
 }
 
 var requestPermission = function() {
@@ -63,8 +65,11 @@ var findElements = function() {
   longBreakButton = document.querySelector('.take-a-break');
 
   messageElement = document.querySelector('.message');
-  audioElement = document.querySelector('.break-over');
-  audioElement.src = audioFileUrl;
+
+  audioBreakOverEl = document.querySelector('.break-over');
+  audioBreakOverEl.src = breakOverAudioFile;
+  audioBreakStartEl = document.querySelector('.break-start');
+  audioBreakStartEl.src = breakStartAudioFile;
 
   owlGraphic = document.querySelector('.owl-graphic');
   owlSvg = document.querySelector('.owl-svg');
@@ -158,8 +163,10 @@ var registerEvents = function() {
 var notify = function() {
   var n = new Notification('Eye hoot', {
     body: 'Time for a break!',
-    icon: owlImage
+    icon: owlImage,
+    requireInteraction: true
   });
+  audioBreakStartEl.play();
   n.onclick = notificationClickedHandler.bind(n);
 };
 
@@ -193,7 +200,7 @@ var stopClockHandler = function() {
     stopBreakAnimation();
     timeElapsed = 0;
   }
-  audioElement.play();
+  audioBreakOverEl.play();
   startWork();
 }
 

diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "description": "A web application that regularly reminds you to take short breaks and do eye exercises for your health.",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --inline --watch -d",
-    "serve-prod": "webpack-dev-server -p",
+    "start": "webpack-dev-server --config webpack-dev.config.js --inline --watch -d",
+    "serve-prod": "webpack-dev-server --config webpack-dev.config.js -p",
     "build-prod": "webpack --config webpack-production.config.js -p -d"
   },
   "repository": {

diff --git a/sounds/tweet.mp3 b/sounds/tweet.mp3
diff --git a/webpack-dev.config.js b/webpack-dev.config.js
@@ -0,0 +1,14 @@
+'use strict';
+
+var path = require('path');
+var webpack = require('webpack');
+var baseConfig = require('./webpack.config.js');
+
+// environment specific config
+var definePlugin = new webpack.DefinePlugin({
+  DEFAULT_WORK_INTERVAL: "10"
+})
+
+baseConfig.plugins.push(definePlugin);
+
+module.exports = baseConfig;
diff --git a/webpack-production.config.js b/webpack-production.config.js
@@ -2,7 +2,8 @@
 
 var path = require('path');
 var CleanWebpackPlugin = require('clean-webpack-plugin');
-var devConfig = require('./webpack.config.js');
+var webpack = require('webpack');
+var baseConfig = require('./webpack.config.js');
 
 var cleanPlugin = new CleanWebpackPlugin(['docs'], {
   root: path.resolve('./'),
@@ -11,6 +12,12 @@ var cleanPlugin = new CleanWebpackPlugin(['docs'], {
   exclude: ['CNAME', 'owl.ico']
 });
 
-devConfig.plugins.push(cleanPlugin);
+// environment specific config
+var definePlugin = new webpack.DefinePlugin({
+  DEFAULT_WORK_INTERVAL: "900"  // 15 * 60
+})
 
-module.exports = devConfig;
+baseConfig.plugins.push(cleanPlugin);
+baseConfig.plugins.push(definePlugin);
+
+module.exports = baseConfig;