Skip to content

Commit

Permalink
Fixes #191 Stop button for corpus text audio (#242)
Browse files Browse the repository at this point in the history
  • Loading branch information
ctot-nondef authored Feb 5, 2025
2 parents fd60910 + 4dc5907 commit 8a7a4cf
Showing 1 changed file with 19 additions and 2 deletions.
21 changes: 19 additions & 2 deletions components/corpus-text-window-content.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
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";
Expand Down Expand Up @@ -101,9 +101,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");
});
}
});
}
Expand Down Expand Up @@ -178,6 +192,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" />
Expand Down

0 comments on commit 8a7a4cf

Please sign in to comment.