This is an issue to track to work of implementing audio notification sound. This is fairly challenging as the notification API and the audio playing restriction can differ across different browsers.

Details for notification:

• There is no built audio for notification in Safari
• There is a built-in audio for Firefox that cannot be disabled using the Notification API
• There is a built-in audio for Chrome that can be disabled using the Notification API
  Currently, the thought is to disable the option for Firefox to access the audio dropdown or default to no custom sound in the dropdown.

Audio playing:

• There isn't an option to include custom audio in the Notification API

• Simply using Audio in JS cannot be playing on Safari without user interaction first. Chrome will enforce similar rule soon.

• Browser might also stop audio playing request if the page is in background

• A work around was discovered using howler.js with html5 option set to true

• Howler.js internally already has multiple workarounds built-in.

• Add custom notification sound

• Test on Safari (both fg/bg)

• Test on Chrome (both fg/bg)

• Test on Firefox (not showing the option)

• Add text in the UI to explain to quirk for different browser

Currently, notification is triggered every time when a face touching is detected; however, this can be less than ideal and can get annoying. I am proposing to have a configuration for notification.

The configuration is probably going to a dropbox that has roughy the following options:

• No notifications
• Every touch
• At max every 1 minute
• At max every 5 minute
• At max every 10 minute
• At max every 30 minute
• at max every hour

For the options other than no notifications and every touch, the user will at max sees at max one notification every interval if any touch was detected. For example: if a user selected At max every 10 minutes and a user touch his face in the that 10 minute period 3 times, a notification with a message like 'You've touched your face 3 times in the past 10 minutes'.

I am thinking this would be implemented with the setInterval and query the history to get the number of times the user has touch their face in during that period.

Allow the user to see their progress towards touching their face less by showing the duration/frequency of face touches they had on a previous day.

This can run in conjunction with the timeline by counting the total times the user touched their face and its duration, and either updating a cookie or storing said data in a database.

For duration we would need to implement a timer for each time the user touches their face. This could also be added to the timeline feature.

Tested on Firefox on a Windows machine without a webcam. The main.html will stuck at loading screen. The console log only output uncaught exception: Object.

The following items are just the things that I see can be improved

• More graphics on the loading screen and less words
• The sections on the landing page doesn't look like sections
• Use a button with github icon to link back to github instead of a simple. Front awesome can probably help here. For example: the github button in https://lunar.fyi.
• Mention the Apple watch app on this page and link if it is on the Apple Store

There are two large bodies of work included in this issue.

First, implementation the data structure of the timeline should be able to power heatmap, timeline and notification (#7). I am thinking this would utilized the IndexDB in the browser and its ability to query data. Maybe we can utilized Dexie.js wrapper to simplify the access espically it's filter on the date dexie/Dexie.js#748. However, some older browser might not support IndexDB, we can either drop support for those are polyfill an in-memory IndexDB implementation.

Second big body of work is to figure out the UX/UI and implement it. This can largely work in parallel with the first work. I am thinking about the timeline will be scrollable and only show every touches on the timeline in the past hour, and show a aggregated number of touches for the rest of the timeline. A user can scroll/drag a control to change which hour to see all the touches. No matter what we come up, we need to figure out how to facilitate that UX, may that be d3.js or simple DOM element with react.js.

A rough view of that concept:

3h ago       |    53 m ago   30m ago
2 times      |    touch      touch
   |         |     |          |
-------------------------------------
         |               |
     5 times            touch
     2h ago             45m ago

• Implement the structure to facilitate both heatmap and timeline
• Convert the heatmap to use this structure
• Figure out the UX for the timeline
• Implement the timeline UI
• Timeline may have granularity control

This is a issue to track a potentially to switch the UI to React to better control some of the UI flow. This is currently a low priority item.

• Use the create-create-app as template with TypeScript
• User React bootstrap
• Convert the detector to a React Component
• PWA to reduce load time

This is an issue to track the work to convert the current js files to typescript to allows

• Developers to better understand the code
• Better tooling in using intellisense
• Strict null checking and other typically JS issues checks
• Enforcement of code prettifying

The user settings on the detector page are not persistent. We need to figure what mechanism works the best may that be cookies, or local storage. On top of my head, I am thinking cookie should work fine because of the the small configuration. Local storage should also work, however, Apple just announce that a website that hasn't been visit for a period time (like 7 days) will have its local storage removed including indexdb. Different scenarios should be considered when implementing this work.

We need to create a notice for cookies so that users are notified we store them for the following:

• Timeout in ms
• Audio notification choice
• Whether the heatmap is on

We can easily do this using the existing bootstrap notification alert, but have a close button added:

Sample code:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Source