From ae79dcaeca0491b4f39ff697508d1f30c3b548dc Mon Sep 17 00:00:00 2001
From: pillar <ymblender@gmail.com>
Date: Sat, 14 Oct 2023 15:13:36 -0700
Subject: [PATCH] fix: update lazy audio

---
 src/lib/components/speech.svelte      | 49 +++++++++++++++------------
 src/lib/helpers/loop-play-hooks.ts    | 24 ++++++-------
 src/routes/article/learn/+page.svelte |  5 ++-
 3 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/speech.svelte b/src/lib/components/speech.svelte
index a0a5305..542ee45 100644
--- a/src/lib/components/speech.svelte
+++ b/src/lib/components/speech.svelte
@@ -11,17 +11,7 @@
 
 	const handleSpeech = async (e: { currentTarget: HTMLElement }, connectNext?: boolean) => {
 		const button = e.currentTarget;
-		const nowAudio = button.querySelector('audio');
 
-		if (nowAudio && !connectNext) {
-			if (speechCache.lastAudio === nowAudio) {
-				nowAudio.currentTime = 0.05;
-				nowAudio.pause();
-				speechCache.lastAudio = null;
-				return;
-			}
-			speechCache.lastAudio = nowAudio;
-		}
 		if (text) {
 			audioLoaded = {
 				...audioLoaded,
@@ -32,7 +22,19 @@
 				}).toString()}`,
 			};
 			await tick();
-			nowAudio?.load();
+		}
+
+		const nowAudio = button.querySelector('audio');
+		nowAudio?.load();
+
+		if (nowAudio && !connectNext) {
+			if (speechCache.lastAudio === nowAudio) {
+				nowAudio.currentTime = 0.05;
+				nowAudio.pause();
+				speechCache.lastAudio = null;
+				return;
+			}
+			speechCache.lastAudio = nowAudio;
 		}
 
 		document.querySelectorAll('audio').forEach((audio) => {
@@ -51,11 +53,11 @@
 		}
 	};
 
-	let audio: HTMLAudioElement;
+	let span: HTMLSpanElement;
 	onMount(() => {
-		if (connect >= 0 && audio) {
+		if (connect >= 0 && span) {
 			/* eslint-disable @typescript-eslint/no-explicit-any */
-			(audio as any).nowConnect = connect;
+			(span as any).nowConnect = connect;
 			// (audio as any).handleSpeech = handleSpeech;
 		}
 	});
@@ -63,13 +65,16 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<span on:click={(e) => handleSpeech(e)} class={className}>
-	<audio
-		data-text={text}
-		data-connect-audio={connect}
-		bind:this={audio}
-		class="pointer-events-none"
-		src={audioLoaded[text || '']}
-	/>
+<span
+	bind:this={span}
+	data-text={text}
+	data-connect-audio={connect}
+	on:click={(e) => handleSpeech(e)}
+	class={className}
+>
+	{#if audioLoaded[text]}
+		<audio class="pointer-events-none" src={audioLoaded[text || '']} />
+	{/if}
+
 	<slot />
 </span>
diff --git a/src/lib/helpers/loop-play-hooks.ts b/src/lib/helpers/loop-play-hooks.ts
index 73c6fce..04c100d 100644
--- a/src/lib/helpers/loop-play-hooks.ts
+++ b/src/lib/helpers/loop-play-hooks.ts
@@ -11,30 +11,30 @@ export function loopPlayHooks() {
 
 	onMount(() => {
 		if (browser) {
-			let nextAudio: HTMLAudioElement | null;
+			let nextAudioSpan: HTMLAudioElement | null;
 			loopUpdateTimer = setInterval(() => {
 				if (speechCache.lastAudio?.paused) {
-					scrollToElement(nextAudio?.parentElement?.parentElement);
+					scrollToElement(nextAudioSpan?.parentElement);
 
 					if (get(speechConnect)) {
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-						if ((speechCache.lastAudio as any).nowConnect === void 0) {
+						if ((speechCache.lastAudio?.parentElement as any)?.nowConnect === void 0) {
 							return;
 						}
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-						const connectId = (speechCache.lastAudio as any).nowConnect + 1;
-						if (nextAudio?.parentElement) {
-							nextAudio.parentElement.style.border = 'none';
+						const connectId = (speechCache.lastAudio.parentElement as any).nowConnect + 1;
+						if (nextAudioSpan?.parentElement) {
+							nextAudioSpan.style.border = 'none';
 						}
-						nextAudio = document.querySelector(
+						nextAudioSpan = document.querySelector(
 							`[data-connect-audio="${connectId}"]`,
 						) as HTMLAudioElement;
-						if (nextAudio) {
-							if (nextAudio?.parentElement) {
-								nextAudio.parentElement.style.border = '1px solid #33f';
+						if (nextAudioSpan) {
+							if (nextAudioSpan) {
+								nextAudioSpan.style.border = '1px solid #33f';
 							}
 							const src = `/brain/audio?${new URLSearchParams({
-								text: nextAudio.getAttribute('data-text') || '',
+								text: nextAudioSpan.getAttribute('data-text') || '',
 								people: get(speechPeople),
 								learn: get(user).learn,
 							}).toString()}`;
@@ -42,7 +42,7 @@ export function loopPlayHooks() {
 								return;
 							}
 							// eslint-disable-next-line @typescript-eslint/no-explicit-any
-							(speechCache.lastAudio as any).nowConnect += 1;
+							(speechCache.lastAudio.parentElement as any).nowConnect += 1;
 							speechCache.lastAudio.src = src;
 							speechCache.lastAudio.load();
 							speechCache.lastAudio.playbackRate = get(speedAudio);
diff --git a/src/routes/article/learn/+page.svelte b/src/routes/article/learn/+page.svelte
index 276a645..f85d89d 100644
--- a/src/routes/article/learn/+page.svelte
+++ b/src/routes/article/learn/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { css } from '$lib/components/atom-css';
 	import Goback from '$lib/components/goback.svelte';
-	import LazyShow from '$lib/components/lazy-show.svelte';
 	import SpeechController from '$lib/components/speech-controller.svelte';
 	import Speech from '$lib/components/speech.svelte';
 	import TranslateWord from '$lib/components/translate-word.svelte';
@@ -62,7 +61,7 @@
 
 <main id="setting" aria-label="setting page" class="flex flex-col p-4 min-h-full h-full gap-4">
 	{#each list as item, index}
-		<LazyShow class="flex flex-row gap-2 text-lg min-h-[60px]">
+		<div class="flex flex-row gap-2 text-lg min-h-[60px]">
 			<button class={css.miniCard} on:click={() => translateText(item.text)}>
 				<iconify-icon icon="heroicons-outline:translate" />
 			</button>
@@ -82,7 +81,7 @@
 					<div class="text-sm mt-2 text-gray-500">{$translateSentence[item.text]}</div>
 				{/if}
 			</div>
-		</LazyShow>
+		</div>
 	{/each}
 
 	<div class="h-20" />