From 6c370f15c8a490905a7bdae424bbd0ef3b25b27d Mon Sep 17 00:00:00 2001
From: Daniel O'Connor <daniel.oconnor@gmail.com>
Date: Sat, 1 Feb 2025 04:13:35 +0000
Subject: [PATCH] Add first pass of TTS read of steps in cook mode

---
 .../RecipePageInstructionPlayer.vue           | 93 +++++++++++++++++++
 .../RecipePageInstructions.vue                |  5 +-
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructionPlayer.vue

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructionPlayer.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructionPlayer.vue
new file mode 100644
index 000000000..d79964f75
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructionPlayer.vue
@@ -0,0 +1,93 @@
+<template>
+    <span class="v-btn__content">
+        <i v-if="!playing.value" aria-hidden="true" class="v-icon notranslate mdi mdi-play theme--dark" @click.stop="play"></i>
+        <i v-if="playing.value" aria-hidden="true" class="v-icon notranslate mdi mdi-pause theme--dark" @click.stop="pause"></i>
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUnmounted } from "@nuxtjs/composition-api";
+import { RecipeStep } from "~/lib/api/types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+
+export default defineComponent({
+  props: {
+    step: {
+      type: Object as () => NoUndefinedField<RecipeStep>,
+      required: true
+    }
+  },
+  setup() {
+    onUnmounted(() => {
+        speechSynthesis.stop();
+    });
+  },
+  data() {
+    return {
+        playing: false,
+        played: false,
+        utterance: null,
+        currentIndex: {
+            type: Number,
+            default: 0
+        }
+    }
+  },
+  methods: {
+    play() {
+        const self = this;
+        if (this.utterance && this.playing) {
+            speechSynthesis.cancel();
+        }
+
+        this.utterance = new SpeechSynthesisUtterance(this.step.text);
+        this.utterance.onstart = (event) => {
+            self.playing = true;
+            // self.$emit("playing", true); // TODO: Consider if this event should bubble or a proxy of it should.
+
+            console.debug("Now playing: " + this.step.text);
+        };
+        this.utterance.onend = () => {
+            self.playing = false;
+            // self.$emit("playing", false);
+
+            console.debug("Playback complete");
+        };
+
+        this.utterance.onpause = () => {
+            self.playing = false;
+        };
+
+        this.utterance.onresume = () => {
+            self.playing = true;
+        };
+
+        this.utterance.onboundary = (event) => {
+            // Update the start of the current sentence.
+            if (event.name === "sentence") {
+                self.currentIndex = event.charIndex;
+            }
+        };
+        // TODO: Evaluate the usefulness of this event.
+        // this.utterance.onmark = (event) => {
+        //     console.log("mark")
+        //     console.log(event)
+        // };
+        this.utterance.onerror = (event) => {
+            console.error("Error in playback")
+            console.debug(event)
+        };
+
+        speechSynthesis.speak(this.utterance);
+        return true;
+    },
+    pause() {
+        console.log("Stop playing");
+        speechSynthesis.pause();
+    }
+  }
+});
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 171fdaeaa..52a9716de 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -266,6 +266,7 @@
                       <v-divider v-if="isCookMode && step.ingredientReferences && step.ingredientReferences.length > 0 && $vuetify.breakpoint.smAndUp" vertical ></v-divider>
                       <v-col>
                         <SafeMarkdown class="markdown" :source="step.text" />
+                        <RecipePageInstructionPlayer  v-if="isCookMode" :step="step" />
                       </v-col>
                     </v-row>
                   </v-card-text>
@@ -303,6 +304,7 @@ import { useExtractIngredientReferences } from "~/composables/recipe-page/use-ex
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import DropZone from "~/components/global/DropZone.vue";
 import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
+import RecipePageInstructionPlayer from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructionPlayer.vue";
 interface MergerHistory {
   target: number;
   source: number;
@@ -315,7 +317,8 @@ export default defineComponent({
     draggable,
     RecipeIngredientHtml,
     DropZone,
-    RecipeIngredients
+    RecipeIngredients,
+    RecipePageInstructionPlayer
   },
   props: {
     value: {