Merge pull request #18 from hovancik/feature/microbreak-sound

microbreak sounds

CHANGELOG.md

@@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
+- sounds at the end of microbreak
+- settings for sounds
 
 ## [0.1.1] - 2016-10-04
 ### Fixed

README.md

@@ -10,6 +10,10 @@ It runs in your tray and shows reminder window every 10 minutes, that is open fo
 
 You can pause/resume reminding of breaks.
 
+You can choose from different color schemes.
+
+You can pick a sound to be played at the end of the break.
+
 ## Install
 
 Latest installers can be found [here](https://github.com/hovancik/stretchly/releases).
@@ -43,6 +47,7 @@ Feel free to join development of this app via Issues and Pull Requests.
 - [ ] start break anytime from menu
 - [ ] create keyboard shortcuts
 - [ ] color-picker for themes
+- [x] sound notification at the end of the break
 - [ ] information about when will be the next break
 
 ### Contributors
@@ -57,5 +62,11 @@ Feel free to join development of this app via Issues and Pull Requests.
  - http://web.stanford.edu/dept/EHS/prod/general/ergo/microbreaks.html
  - http://www.latofonts.com/lato-free-fonts/
 
+#### Sounds credits
+Sounds used in this application are listed [here](http://freesound.org/people/hovancik/bookmarks/category/58865/).
+- `crystal glass` by [mlteenie](http://freesound.org/people/mlteenie/), available under the [Attribution License](http://creativecommons.org/licenses/by/3.0/).
+- `wind chime` by [GnoteSoundz](http://freesound.org/people/GnoteSoundz/), available under the [Creative Commons 0 License](http://creativecommons.org/publicdomain/zero/1.0/).
+- `tic toc` by [magundah14](http://freesound.org/people/magundah14/), available under the [Creative Commons 0 License](http://creativecommons.org/publicdomain/zero/1.0/).
+- `silence` by [parcodeisuoni](http://freesound.org/people/parcodeisuoni/), available under the [Attribution License](http://creativecommons.org/licenses/by/3.0/).
 ## License
 See LICENSE file.

app/css/app.css

@@ -23,11 +23,7 @@ body {
 }
 
 .color-scheme {
-  padding-top: 60px;
-}
-
-.settings {
-  padding-top: 10px;
+  padding-top: 20px;
 }
 
 .scheme {
@@ -37,7 +33,8 @@ body {
   font-size: 20px;
 }
 
-.color {
+.color,
+.audio {
   width: 20px;
   height: 20px;
   margin: 5px auto;

app/main.js

@@ -22,6 +22,7 @@ let microbreakIdeas = new Shuffled([
 ])
 
 let appIcon = null
+let processWin = null
 let microbreakWin = null
 let appStartupWin = null
 let aboutWin = null
@@ -41,6 +42,14 @@ function createTrayIcon () {
   appIcon.setContextMenu(getTrayMenu(false))
 }
 
+function startProcessWin () {
+  const modalPath = path.join('file://', __dirname, 'process.html')
+  processWin = new BrowserWindow({
+    show: false
+  })
+  processWin.loadURL(modalPath)
+}
+
 function showStartUpWindow () {
   const modalPath = path.join('file://', __dirname, 'start.html')
   appStartupWin = new BrowserWindow({
@@ -74,7 +83,10 @@ function startMicrobreak () {
   finishMicrobreakTimer = setTimeout(finishMicrobreak, settings.get('microbreakDuration'))
 }
 
-function finishMicrobreak () {
+function finishMicrobreak (shouldPlaySound = true) {
+  if (shouldPlaySound) {
+    processWin.webContents.send('playSound', settings.get('microbreakAudio'))
+  }
   microbreakWin.close()
   microbreakWin = null
   planMicrobreakTimer = setTimeout(planMicrobreak, 100)
@@ -84,9 +96,9 @@ function planMicrobreak () {
   startMicrobreakTimer = setTimeout(startMicrobreak, settings.get('microbreakInterval'))
 }
 
-ipcMain.on('finish-microbreak', function () {
+ipcMain.on('finish-microbreak', function (event, shouldPlaySound) {
   clearTimeout(finishMicrobreakTimer)
-  finishMicrobreak()
+  finishMicrobreak(shouldPlaySound)
 })
 
 ipcMain.on('save-setting', function (event, key, value) {
@@ -105,6 +117,7 @@ if (shouldQuit) {
   app.quit()
 }
 
+app.on('ready', startProcessWin)
 app.on('ready', loadSettings)
 app.on('ready', createTrayIcon)
 app.on('ready', planMicrobreak)

app/microbreak.js

@@ -1,7 +1,7 @@
 const {ipcRenderer} = require('electron')
 
 document.getElementById('close').addEventListener('click', function (e) {
-  ipcRenderer.send('finish-microbreak')
+  ipcRenderer.send('finish-microbreak', false)
 })
 
 ipcRenderer.on('breakIdea', (event, message) => {

app/process.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>stretchly</title>
+    <link rel="stylesheet" type="text/css" href="css/app.css">
+  </head>
+  <body>
+    <script>
+      require('./process.js')
+    </script>
+  </body>
+</html>

app/process.js

@@ -0,0 +1,6 @@
+const {ipcRenderer} = require('electron')
+
+ipcRenderer.on('playSound', (event, data) => {
+  let audio = new Audio(`audio/${data}.wav`)
+  audio.play()
+})

app/settings.html

@@ -18,9 +18,28 @@ <h2>microbreaks</h2>
           <span id="microbreakIntervalPlus" class="pointer">+</span>
           minutes
         </p>
+        <div class="micreobreak-audio">
+          <h5>audio scheme</h5>
+          <div class="scheme">
+            <div class="audio pointer" data-audio="crystal-glass"></div>
+            crystal glass
+          </div>
+          <div class="scheme">
+            <div class="audio pointer" data-audio="wind-chime"></div>
+            wind chime
+          </div>
+          <div class="scheme">
+            <div class="audio pointer" data-audio="tic-toc"></div>
+            tic toc
+          </div>
+          <div class="scheme">
+            <div class="audio pointer" data-audio="silence"></div>
+            silence
+          </div>
+        </div>
       </div>
       <div class="color-scheme">
-        <h2>color scheme</h2>
+        <h5>color scheme</h5>
         <div class="scheme">
           <div class="color pointer" data-color="#478484"></div>
           green <br/> clouds

app/settings.js

@@ -43,6 +43,22 @@ ipcRenderer.on('renderSettings', (event, data) => {
       document.body.style.background = color
     })
   }
+
+  let audioElements = document.getElementsByClassName('audio')
+  for (var y = 0; y < audioElements.length; y++) {
+    let audioElement = audioElements[y]
+    let audio = audioElement.dataset.audio
+    if (audio === data['microbreakAudio']) {
+      audioElement.style.background = '#777'
+    } else {
+      audioElement.style.background = '#e2e2e2'
+    }
+    audioElement.addEventListener('click', function (e) {
+      new Audio(`audio/${audio}.wav`).play()
+      ipcRenderer.send('save-setting', 'microbreakAudio', audio)
+    })
+  }
+
   microbreakInterval.innerHTML = data['microbreakInterval'] / 1000 / 60
   microbreakDuration.innerHTML = data['microbreakDuration'] / 1000
 })

app/utils/defaultSettings.js

@@ -1,5 +1,6 @@
 module.exports = {
   microbreakDuration: 20000,
   microbreakInterval: 600000,
-  mainColor: '#478484'
+  mainColor: '#478484',
+  microbreakAudio: 'crystal-glass'
 }

package.json

@@ -37,10 +37,10 @@
   "build": {
     "appId": "net.hovancik.stretchly",
     "category": "public.app-category.healthcare-fitness",
+    "productName": "stretchly",
     "dmg": {
-      "title": "stretchly",
       "icon": "build/icon.icns",
-      "icon-size": 128,
+      "iconSize": 128,
       "contents": [
         {
           "x": 355,
@@ -81,7 +81,8 @@
       "it",
       "describe",
       "beforeEach",
-      "afterEach"
+      "afterEach",
+      "Audio"
     ]
   }
 }