From 19b14f5a633d421f574060e31d640d6fb1133477 Mon Sep 17 00:00:00 2001
From: Mau Zsofia Abraham <zsofia.abraham@oeaw.ac.at>
Date: Mon, 3 Feb 2025 16:49:26 +0100
Subject: [PATCH 1/2] Stop button for corpus text audio

---
 components/corpus-text-window-content.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/corpus-text-window-content.vue b/components/corpus-text-window-content.vue
index 26dece4..088f726 100644
--- a/components/corpus-text-window-content.vue
+++ b/components/corpus-text-window-content.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-//@ts-expect-error no types available
 import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
 
-import { Play } from "lucide-vue-next";
+import { Pause, Play } from "lucide-vue-next";
 import InfiniteLoading from "v3-infinite-loading";
 import type { StateHandler } from "v3-infinite-loading/lib/types";
 
@@ -98,9 +97,23 @@ watch(utteranceElements.value, (value) => {
 	if (value.length > 0) {
 		value.forEach((u) => {
 			const playButton = u.querySelector("a.play");
+			const stopButton = u.querySelector("a.stop");
 			const audio = u.querySelector("audio");
 			if (playButton && audio) {
-				playButton!.addEventListener("click", (_e) => audio!.play());
+				playButton!.addEventListener("click", () => {
+					audio!.play();
+					playButton?.classList.add("hidden");
+					stopButton?.classList.remove("hidden");
+				});
+				audio!.addEventListener("ended", () => {
+					stopButton?.classList.add("hidden");
+					playButton?.classList.remove("hidden");
+				});
+				stopButton!.addEventListener("click", () => {
+					audio!.pause();
+					stopButton?.classList.add("hidden");
+					playButton?.classList.remove("hidden");
+				});
 			}
 		});
 	}
@@ -145,6 +158,9 @@ watch(utteranceElements.value, (value) => {
 					<a v-if="u.audio" class="play mt-1"
 						><Play class="size-4" /><span class="hidden">Play</span></a
 					>
+					<a v-if="u.audio" class="stop mt-1 hidden">
+						<Pause class="size-4" /><span class="hidden">Stop</span>
+					</a>
 					<!-- eslint-disable-next-line vuejs-accessibility/media-has-caption -->
 					<audio v-if="u.audio" hidden="hidden">
 						<source :src="u.audio" />

From 4dc59078d9a6e0b32422611c21e4331ac35a723f Mon Sep 17 00:00:00 2001
From: Mau Zsofia Abraham <zsofia.abraham@oeaw.ac.at>
Date: Tue, 4 Feb 2025 10:47:42 +0100
Subject: [PATCH 2/2] Linting

---
 components/corpus-text-window-content.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/corpus-text-window-content.vue b/components/corpus-text-window-content.vue
index 949414d..5d893e1 100644
--- a/components/corpus-text-window-content.vue
+++ b/components/corpus-text-window-content.vue
@@ -164,9 +164,9 @@ watch(utteranceElements.value, (value) => {
 						<a v-if="u.audio" class="play mt-1"
 							><Play class="size-4" /><span class="hidden">Play</span></a
 						>
-            <a v-if="u.audio" class="stop mt-1 hidden">
-              <Pause class="size-4" /><span class="hidden">Stop</span>
-            </a>
+						<a v-if="u.audio" class="stop mt-1 hidden">
+							<Pause class="size-4" /><span class="hidden">Stop</span>
+						</a>
 						<!-- eslint-disable-next-line vuejs-accessibility/media-has-caption -->
 						<audio v-if="u.audio" hidden="hidden">
 							<source :src="u.audio" />