Add timer alarm sound

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+- Add alarm sound to timers
+  [#1120](https://github.com/nextcloud/cookbook/pull/1120) @MarcelRobitaille
+
 ### Changed
 - Create build script for GitHub pages with GitHub actions to allow for custom building
   [#1203](https://github.com/nextcloud/cookbook/pull/1203) @christianlupus

src/components/RecipeTimer.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { linkTo } from "@nextcloud/router"
+
 import { showSimpleAlertModal } from "cookbook/js/modals"
 
 export default {
@@ -63,6 +65,18 @@ export default {
     },
     mounted() {
         this.resetTimeDisplay()
+        // Start loading the sound early so it's ready to go when we need to
+        // play it
+
+        // Source for the sound https://pixabay.com/sound-effects/alarm-clock-short-6402/
+        // Voted by poll https://nextcloud.christian-wolf.click/nextcloud/apps/polls/s/Wke3s6CscDwQEjPV
+        this.audio = new Audio(
+            linkTo("cookbook", "assets/alarm-continuous.mp3")
+        )
+
+        // For now, the alarm should play continuously until it is dismissed
+        // See https://github.com/nextcloud/cookbook/issues/671#issuecomment-1279030452
+        this.audio.loop = true
     },
     methods: {
         onTimerEnd() {
@@ -71,7 +85,18 @@ export default {
             window.setTimeout(async () => {
                 // The short timeout is needed or Vue doesn't have time to update the countdown
                 //  display to display 00:00:00
+
+                // Ensure audio starts at the beggining
+                // If it's paused midway, by default it will resume from that point
+                this.audio.currentTime = 0
+                // Start playing audio to alert the user that the timer is up
+                this.audio.play()
+
                 await showSimpleAlertModal(t("cookbook", "Cooking time is up!"))
+
+                // Stop audio after the alert is confirmed
+                this.audio.pause()
+
                 // cookbook.notify(t('cookbook', 'Cooking time is up!'))
                 $this.countdown = null
                 $this.showFullTime = false