From 09af058fa1d53a0119781508e364bce8530290d7 Mon Sep 17 00:00:00 2001
From: polv <polv@polv.cc>
Date: Sun, 5 Jul 2026 12:01:32 +0700
Subject: [PATCH] quiz sentence hide details and stop audio before starting
 next

---
 docs/.vitepress/theme/components/AudioButton.vue |  8 ++++++++
 docs/.vitepress/theme/components/TTS.vue         |  4 ++++
 docs/.vitepress/theme/components/VocabQuiz.vue   | 15 ++++++++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/AudioButton.vue b/docs/.vitepress/theme/components/AudioButton.vue
index 4cf926b..d2bf37a 100644
--- a/docs/.vitepress/theme/components/AudioButton.vue
+++ b/docs/.vitepress/theme/components/AudioButton.vue
@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
+import { stop as stopTTS } from "tauri-plugin-tts-api";
 
 const props = defineProps<{
   src: string;
@@ -16,7 +17,14 @@ const audioEl = useTemplateRef("audio");
 
 function playAudio() {
   if (!audioEl.value) return;
+
+  document.querySelectorAll("audio").forEach((el) => {
+    el.pause();
+  });
+  stopTTS();
+
   audioEl.value.src = props.src;
+  audioEl.value.currentTime = 0;
   audioEl.value.play();
 }
 </script>
diff --git a/docs/.vitepress/theme/components/TTS.vue b/docs/.vitepress/theme/components/TTS.vue
index 84f43d2..f6dba37 100644
--- a/docs/.vitepress/theme/components/TTS.vue
+++ b/docs/.vitepress/theme/components/TTS.vue
@@ -30,6 +30,10 @@ async function playAudio() {
   const voices = await getVoices(lang);
   if (!voices.length) return;
 
+  document.querySelectorAll("audio").forEach((el) => {
+    el.pause();
+  });
+
   const v = voices[Math.floor(Math.random() * voices.length)];
   console.log(JSON.stringify(v));
   await speak({
diff --git a/docs/.vitepress/theme/components/VocabQuiz.vue b/docs/.vitepress/theme/components/VocabQuiz.vue
index 6209152..269675b 100644
--- a/docs/.vitepress/theme/components/VocabQuiz.vue
+++ b/docs/.vitepress/theme/components/VocabQuiz.vue
@@ -25,7 +25,7 @@
         <span class="spoiler"> {{ v.en }} </span>
       </div>
 
-      <details v-if="example">
+      <details v-if="example" ref="sdetails">
         <summary>
           <span v-if="example.audio">
             {{ example.ko }}
@@ -69,6 +69,7 @@ const vList = ref<IVoc[]>([]);
 const vIndex = ref(0);
 const vSentAutoplayAudio = ref(true);
 
+const sentenceDetails = useTemplateRef("sdetails");
 const stts = useTemplateRef<InstanceType<typeof TTS>>("stts");
 
 const v = computed(() => vList.value[vIndex.value]);
@@ -99,6 +100,12 @@ vChosenCats.value = [...vCats.value];
 makeVList();
 
 function makeVList() {
+  nextTick(() => {
+    if (sentenceDetails.value) {
+      sentenceDetails.value.open = false;
+    }
+  });
+
   vList.value = Object.entries(vocabulary)
     .filter(([k]) => vChosenCats.value.includes(k))
     .flatMap(([, v]) => v);
@@ -113,6 +120,12 @@ function makeVList() {
 }
 
 function mark(isRight: boolean) {
+  nextTick(() => {
+    if (sentenceDetails.value) {
+      sentenceDetails.value.open = false;
+    }
+  });
+
   if (isRight) {
     vList.value = [...vList.value.filter((_, i) => i !== vIndex.value)];
     if (vList.value.length === 0) {