Add browser notification support to timers

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+- Add browser notification support for timers
+  [1409](https://github.com/nextcloud/cookbook/pull/1409) @MarcelRobitaille
+
 ### Fixed
 - Make "None" category string translatable
   [1323](https://github.com/nextcloud/cookbook/pull/1344) @seyfeb

src/components/RecipeTimer.vue

@@ -16,6 +16,8 @@ import { linkTo } from "@nextcloud/router"
 
 import { showSimpleAlertModal } from "cookbook/js/modals"
 
+import * as browserNotifications from "cookbook/js/browser_notifications"
+
 export default {
     name: "RecipeTimer",
     props: {
@@ -79,6 +81,14 @@ export default {
         this.audio.loop = true
     },
     methods: {
+        onTimerStart() {
+            browserNotifications.requestPermission({
+                justification: [
+                    t("cookbook", "Please enable browser notifications to receive an alert when the timer is over."),
+                    t("cookbook", "You can disable these notifications at any time in the \"Cookbook settings\" dialog."),
+                ],
+            })
+        },
         onTimerEnd() {
             window.clearInterval(this.countdown)
             const $this = this
@@ -92,12 +102,12 @@ export default {
                 // Start playing audio to alert the user that the timer is up
                 this.audio.play()
 
-                await showSimpleAlertModal(t("cookbook", "Cooking time is up!"))
+                const message = t("cookbook", "Cooking time is up!")
+                await browserNotifications.notify(message)
+                await showSimpleAlertModal(message)
 
                 // Stop audio after the alert is confirmed
                 this.audio.pause()
-
-                // cookbook.notify(t('cookbook', 'Cooking time is up!'))
                 $this.countdown = null
                 $this.showFullTime = false
                 $this.resetTimeDisplay()
@@ -126,6 +136,7 @@ export default {
             if (this.countdown === null) {
                 // Pass this to callback function
                 const $this = this
+                $this.onTimerStart()
                 this.countdown = window.setInterval(() => {
                     $this.seconds -= 1
                     if ($this.seconds < 0) {

src/components/SimpleAlertModal.vue

@@ -1,7 +1,8 @@
 <template>
     <NcModal :title="title" @close="$close">
         <div class="modal__wrapper">
-            <div class="modal__content">{{ content }}</div>
+            <div v-if="!multiline" class="modal__content">{{ content }}</div>
+            <p v-else v-for="line in content" class="modal__content">{{ line }}</p>
             <div class="modal__button-bar">
                 <NcButton type="primary" @click="$close">{{
                     t("cookbook", "Dismiss")
@@ -21,6 +22,11 @@ export default {
         NcModal,
         NcButton,
     },
+    computed: {
+        multiline() {
+            return Array.isArray(this.content)
+        },
+    },
 }
 </script>
 

src/js/browser_notifications.js

@@ -0,0 +1,38 @@
+import { showSimpleAlertModal } from "cookbook/js/modals"
+
+export const requestPermission = async ({ justification }) => {
+
+    // Exit early if browser doesn't support notifications
+    if (!("Notification" in window)) {
+        return
+    }
+
+    // Exit early if already granted
+    if (Notification.permission === 'granted') {
+        return
+    }
+
+    await showSimpleAlertModal(justification)
+    await Notification.requestPermission()
+}
+
+export const notify = async (title, options) => {
+
+    // Exit early if browser doesn't support notifications
+    if (!("Notification" in window)) {
+        return
+    }
+
+    // Try one more time to get permission (maybe the caller forgot to call
+    // requestPermission first)
+    // If it's still not granted, exit early
+    if (Notification.permission !== 'granted' && (await Notification.requestPermission() !== 'granted')) {
+        return
+    }
+
+    const notification = new Notification(title, options)
+    notification.addEventListener("error", (error) => {
+        // eslint-disable-next-line no-console
+        console.error("Error showing notification:", error)
+    })
+}