feat: Automatic instruction timers

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -253,6 +253,9 @@
                         :markup="getIngredientByRefId(ing.referenceId)"
                       />
                     </div>
+                    <div>
+                      <RecipePageInstructionsTimer :text="step.text"></RecipePageInstructionsTimer>
+                    </div>
                   </v-card-text>
                 </div>
               </v-expand-transition>
@@ -279,6 +282,7 @@ import {
   nextTick,
 } from "@nuxtjs/composition-api";
 import RecipeIngredientHtml from "../../RecipeIngredientHtml.vue";
+import RecipePageInstructionsTimer from "./RecipePageInstructionsTimer.vue";
 import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset, Recipe } from "~/lib/api/types/recipe";
 import { parseIngredientText } from "~/composables/recipes";
 import { uuid4, detectServerBaseUrl } from "~/composables/use-utils";
@@ -300,6 +304,7 @@ export default defineComponent({
     draggable,
     RecipeIngredientHtml,
     DropZone,
+    RecipePageInstructionsTimer,
   },
   props: {
     value: {

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructionsTimer.vue

@@ -0,0 +1,191 @@
+<template v-if="timers && timers.length">
+  <div @click.stop>
+
+    <v-divider class="mb-2"></v-divider>
+    <div
+      v-for="(timer, i) in timers"
+      :key="i"
+      class="d-flex align-center my-2 justify-center">
+      <v-icon :color="timer.done.value ? 'success' : ''" :class="timer.done.value ? 'shake' : ''">mdi-timer</v-icon>
+      <v-btn
+        icon
+        :disabled="timer.remainingTime.value <= 30"
+        depressed
+        @click="timer.remainingTime.value -= 30"><v-icon>mdi-minus</v-icon></v-btn>
+      {{ timer.hours.value ? timer.hours.value + "h" : "" }} {{ timer.minutes.value ? timer.minutes.value + "m" : "" }}
+      {{ (timer.seconds.value || !timer.minutes.value) ? timer.seconds.value + "s" : "" }}
+      <v-btn
+        icon
+        depressed
+        @click="timer.remainingTime.value += 30"><v-icon>mdi-plus</v-icon></v-btn>
+      <v-btn
+        v-if="!timer.isCounting.value && !timer.hasStarted.value"
+        rounded
+        depressed
+        @click="timer.startAlarm"> {{$t("recipe.timer.start")}} </v-btn>
+      <v-btn
+        v-else-if="(timer.hasStarted.value && timer.isCounting.value)"
+        rounded
+        depressed
+        @click="timer.pauseTimer"> {{$t("recipe.timer.pause")}} </v-btn>
+      </v-btn>
+      <span v-else-if="!timer.done.value">
+        <v-btn
+          rounded
+          depressed
+          @click="timer.startAlarm">
+          {{$t("recipe.timer.continue")}}
+        </v-btn>
+        <v-btn
+          icon
+          @click="timer.resetTimer"><v-icon>mdi-restore</v-icon></v-btn>
+      </span>
+      <span v-else>
+        <v-btn
+          icon
+          @click="timer.resetTimer"><v-icon>mdi-restore</v-icon></v-btn>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, ref, onBeforeUnmount } from "vue";
+import { useContext } from "@nuxtjs/composition-api";
+
+  import { TranslateResult } from "vue-i18n"
+  // @ts-ignore typescript can't find our audio file, but it's there!
+  import timerAlarmAudio from "~/assets/audio/kitchen_alarm.mp3";
+  export default {
+    props: {
+      text: {
+        type: String,
+        default: "",
+      },
+    },
+    setup(props) {
+      const { i18n } = useContext();
+      // Makes regex work with multiple languages via locales
+      const minuetStrings = computed<string[]>(() => {
+        console.log(i18n.availableLocales);
+        const result: TranslateResult[] = [];
+        i18n.availableLocales.forEach((locale) => {
+          result.push(i18n.t("recipe.timer.minute", locale ))
+          result.push(i18n.t("recipe.timer.minutes", locale ))
+        })
+        return result
+      })
+
+      const extractMinutes = (text: string) => {
+        const regexMins = new RegExp(`\\b(\\d+)\\s*(${minuetStrings.value.join("|")})\\b`, "gi");
+        const matchesMin = text.matchAll(regexMins);
+        const timers = [];
+        for (const match of matchesMin) {
+          timers.push(createTimer(Number(match[1]) * 60));
+        }
+        return timers;
+      };
+      const timers = computed(() => {
+        return extractMinutes(props.text as string);
+      });
+
+      const createTimer = (totalSeconds: number) => {
+        const remainingTime = ref(totalSeconds);
+        const hours = computed(() => Math.floor(remainingTime.value / 3600));
+        const minutes = computed(() => Math.floor((remainingTime.value % 3600) / 60));
+        const seconds = computed(() => remainingTime.value % 60);
+        const isCounting = ref(false);
+        const hasStarted = ref(false)
+        const done = ref(false)
+
+        let timer = null;
+
+        const formattedTime = computed(() => {
+          const hrs = Math.floor(remainingTime.value / 3600);
+          const mins = Math.floor((remainingTime.value % 3600) / 60);
+          const secs = remainingTime.value % 60;
+          return `${hrs.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs
+            .toString()
+            .padStart(2, "0")}`;
+        });
+
+        const startAlarm = () => {
+          if (remainingTime.value > 0) {
+            isCounting.value = true;
+            timer = setInterval(updateTimer, 1000);
+            hasStarted.value = true
+          }
+        };
+
+        // ts doesn't recognize timerAlarmAudio because it's a weird import
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        const alarmSound = new Audio(timerAlarmAudio);
+        alarmSound.loop = true;
+        const updateTimer = () => {
+          if (remainingTime.value >= 1) {
+            remainingTime.value--;
+          } else {
+            pauseTimer();
+            alarmSound.play();
+            done.value = true;
+          }
+        };
+
+        const pauseTimer = () => {
+          isCounting.value = false;
+          clearInterval(timer);
+          alarmSound.pause();
+        };
+
+        const resetTimer = () => {
+          clearInterval(timer);
+          remainingTime.value = totalSeconds;
+          isCounting.value = false;
+          hasStarted.value = false;
+          done.value = false;
+          alarmSound.pause();
+        };
+
+        onBeforeUnmount(() => {
+          resetTimer();
+        });
+        return {
+          hours,
+          minutes,
+          seconds,
+          remainingTime,
+          isCounting,
+          formattedTime,
+          startAlarm,
+          resetTimer,
+          pauseTimer,
+          originalTimer: totalSeconds,
+          hasStarted,
+          done
+        };
+      };
+
+      return {
+        timers,
+      };
+    },
+  };
+</script>
+<style scoped>
+  .shake {
+    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
+  }
+  @keyframes shake {
+    10%, 90% {
+      transform: translate3d(-1px, 0, 0);
+    }
+    20%, 80% {
+      transform: translate3d(2px, 0, 0);
+    }
+    30%, 50%, 70% {
+      transform: translate3d(-4px, 0, 0);
+    }
+    40%, 60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+</style>

frontend/lang/messages/af-ZA.json

@@ -571,7 +571,12 @@
       "start-timer": "Begin die kombuis timer",
       "pause-timer": "Onderbreek die kombuis timer",
       "resume-timer": "Hervat kombuis timer",
-      "stop-timer": "Stop die kombuis timer"
+      "stop-timer": "Stop die kombuis timer",
+      "continue": "Gaan voort",
+      "pause": "Pouse",
+      "start": "Begin timer",
+      "minutes": "minute",
+      "minute": "minuut"
     },
     "edit-timeline-event": "Wysig tydlyn gebeurtenis",
     "timeline": "Tydlyn",

frontend/lang/messages/ar-SA.json

@@ -571,7 +571,12 @@
       "start-timer": "Start Timer",
       "pause-timer": "Pause Timer",
       "resume-timer": "Resume Timer",
-      "stop-timer": "Stop Timer"
+      "stop-timer": "Stop Timer",
+      "continue": "يكمل",
+      "pause": "يوقف",
+      "start": "بدء الموقت",
+      "minutes": "دقائق",
+      "minute": "دقيقة"
     },
     "edit-timeline-event": "Edit Timeline Event",
     "timeline": "Timeline",

frontend/lang/messages/bg-BG.json

@@ -571,7 +571,12 @@
       "start-timer": "Стартирай таймера",
       "pause-timer": "Поставяне таймера на пауза",
       "resume-timer": "Възобновяване на таймера",
-      "stop-timer": "Спри таймера"
+      "stop-timer": "Спри таймера",
+      "continue": "Продължи",
+      "pause": "Пауза",
+      "start": "Стартирайте таймера",
+      "minutes": "минути",
+      "minute": "минута"
     },
     "edit-timeline-event": "Редактирай събитие",
     "timeline": "Хронология на събитията",

frontend/lang/messages/ca-ES.json

@@ -571,7 +571,12 @@
       "start-timer": "Iniciar temporitzador",
       "pause-timer": "Pausa el temporitzador",
       "resume-timer": "Reprèn el temporitzador",
-      "stop-timer": "Atura el temporitzador"
+      "stop-timer": "Atura el temporitzador",
+      "continue": "Continua",
+      "pause": "Pausa",
+      "start": "Inicieu el temporitzador",
+      "minutes": "minuts",
+      "minute": "minut"
     },
     "edit-timeline-event": "Edita l'esdeveniment de la cronologia",
     "timeline": "Cronologia",

frontend/lang/messages/cs-CZ.json

@@ -571,7 +571,12 @@
       "start-timer": "Spustit časovač",
       "pause-timer": "Pozastavit časovač",
       "resume-timer": "Resume Timer",
-      "stop-timer": "Stop Timer"
+      "stop-timer": "Stop Timer",
+      "continue": "Pokračovat",
+      "pause": "Pauza",
+      "start": "Spustit časovač",
+      "minutes": "zápis",
+      "minute": "minuta"
     },
     "edit-timeline-event": "Upravit událost časové osy",
     "timeline": "Časová osa",

frontend/lang/messages/da-DK.json

@@ -571,7 +571,12 @@
       "start-timer": "Start timer",
       "pause-timer": "Sæt timer på pause",
       "resume-timer": "Genoptag Timer",
-      "stop-timer": "Stop timer"
+      "stop-timer": "Stop timer",
+      "continue": "Fortsætte",
+      "pause": "Pause",
+      "start": "Start timer",
+      "minutes": "minutter",
+      "minute": "minut"
     },
     "edit-timeline-event": "Rediger tidslinjebegivenhed",
     "timeline": "Tidslinje",

frontend/lang/messages/de-DE.json

@@ -571,7 +571,12 @@
       "start-timer": "Wecker starten",
       "pause-timer": "Wecker pausieren",
       "resume-timer": "Wecker fortsetzen",
-      "stop-timer": "Wecker stoppen"
+      "stop-timer": "Wecker stoppen",
+      "continue": "Weitermachen",
+      "pause": "Pause",
+      "start": "Timer starten",
+      "minutes": "Minuten",
+      "minute": "Minute"
     },
     "edit-timeline-event": "Zeitstrahl-Ereignis bearbeiten",
     "timeline": "Zeitstrahl",

frontend/lang/messages/el-GR.json

@@ -571,7 +571,12 @@
       "start-timer": "Εναρξη χρονομέτρου",
       "pause-timer": "Παύση χρονόμετρου",
       "resume-timer": "Συνέχιση χρονομέτρου",
-      "stop-timer": "Διακοπή χρονόμετρου"
+      "stop-timer": "Διακοπή χρονόμετρου",
+      "continue": "Συνεχίζω",
+      "pause": "Παύση",
+      "start": "Έναρξη χρονοδιακόπτη",
+      "minutes": "πρακτικά",
+      "minute": "λεπτό"
     },
     "edit-timeline-event": "Επεξεργασία συμβάντος χρονοδιαγράμματος",
     "timeline": "Χρονοδιάγραμμα",

frontend/lang/messages/en-GB.json

@@ -571,7 +571,12 @@
       "start-timer": "Start Timer",
       "pause-timer": "Pause Timer",
       "resume-timer": "Resume Timer",
-      "stop-timer": "Stop Timer"
+      "stop-timer": "Stop Timer",
+      "continue": "Continue",
+      "pause": "Pause",
+      "start": "Start timer",
+      "minutes": "minutes",
+      "minute": "minute"
     },
     "edit-timeline-event": "Edit Timeline Event",
     "timeline": "Timeline",

frontend/lang/messages/en-US.json

@@ -571,7 +571,12 @@
       "start-timer": "Start Timer",
       "pause-timer": "Pause Timer",
       "resume-timer": "Resume Timer",
-      "stop-timer": "Stop Timer"
+      "stop-timer": "Stop Timer",
+      "pause": "Pause",
+      "start": "Start timer",
+      "continue": "Continue",
+      "minute": "minute",
+      "minutes": "minutes"
     },
     "edit-timeline-event": "Edit Timeline Event",
     "timeline": "Timeline",

frontend/lang/messages/es-ES.json

@@ -571,7 +571,12 @@
       "start-timer": "Iniciar Temporizador",
       "pause-timer": "Pausar Temporizador",
       "resume-timer": "Reanudar Temporizador",
-      "stop-timer": "Detener temporizador"
+      "stop-timer": "Detener temporizador",
+      "continue": "Continuar",
+      "pause": "Pausa",
+      "start": "Iniciar temporizador",
+      "minutes": "minutos",
+      "minute": "minuto"
     },
     "edit-timeline-event": "Editar evento en la cronología",
     "timeline": "Cronología",

frontend/lang/messages/fi-FI.json

@@ -571,7 +571,12 @@
       "start-timer": "Käynnistä ajastin",
       "pause-timer": "Keskeytä ajastin",
       "resume-timer": "Jatka ajastusta",
-      "stop-timer": "Pysäytä ajastin"
+      "stop-timer": "Pysäytä ajastin",
+      "continue": "Jatkaa",
+      "pause": "Tauko",
+      "start": "Käynnistä ajastin",
+      "minutes": "minuuttia",
+      "minute": "minuutti"
     },
     "edit-timeline-event": "Muokkaa Aikajanan Tapahtumaa",
     "timeline": "Aikajana",

frontend/lang/messages/fr-BE.json

@@ -571,7 +571,12 @@
       "start-timer": "Démarrer le minuteur",
       "pause-timer": "Mettre en pause le minuteur",
       "resume-timer": "Reprendre le minuteur",
-      "stop-timer": "Arrêter le minuteur"
+      "stop-timer": "Arrêter le minuteur",
+      "continue": "Continuer",
+      "pause": "Pause",
+      "start": "Démarrer la minuterie",
+      "minutes": "minutes",
+      "minute": "minute"
     },
     "edit-timeline-event": "Modifier l’événement dans l’historique",
     "timeline": "Historique",