infiplot/infiplot-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(loading): slow down teaser typing speed to 65ms and change fallback text to " 请等待\

Browse Source
This commit is contained in:
DESKTOP-I1T6TF3\Q
2026-06-04 15:00:50 +08:00
parent 1ac665ad88
commit 05d9060dc2
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/PlayCanvas.tsx
+6 -5
View File
@@ -35,11 +35,11 @@ const AUDIO_WAIT_TIMEOUT_MS = 2500;
function useTypewriter( function useTypewriter(
text: string, text: string,
resetKey: string, resetKey: string,
opts: { targetDurationMs?: number; waitForAudio: boolean } = { opts: { targetDurationMs?: number; waitForAudio: boolean; defaultCharMs?: number } = {
waitForAudio: false, waitForAudio: false,
}, },
): { shown: string; done: boolean; skip: () => void } { ): { shown: string; done: boolean; skip: () => void } {
const { targetDurationMs, waitForAudio } = opts; const { targetDurationMs, waitForAudio, defaultCharMs } = opts;
const [displayed, setDisplayed] = useState(""); const [displayed, setDisplayed] = useState("");
const [prevKey, setPrevKey] = useState(resetKey); const [prevKey, setPrevKey] = useState(resetKey);
const timer = useRef<ReturnType<typeof setInterval> | null>(null); const timer = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -71,7 +71,7 @@ function useTypewriter(
const speed = const speed =
targetDurationMs && text.length > 0 targetDurationMs && text.length > 0
? Math.max(MIN_CHAR_MS, targetDurationMs / text.length) ? Math.max(MIN_CHAR_MS, targetDurationMs / text.length)
: DEFAULT_CHAR_MS; : (defaultCharMs ?? DEFAULT_CHAR_MS);
let i = 0; let i = 0;
timer.current = setInterval(() => { timer.current = setInterval(() => {
@@ -86,7 +86,7 @@ function useTypewriter(
if (timer.current) clearInterval(timer.current); if (timer.current) clearInterval(timer.current);
timer.current = null; timer.current = null;
}; };
}, [resetKey, text, targetDurationMs, waitForAudio]); }, [resetKey, text, targetDurationMs, waitForAudio, defaultCharMs]);
const skip = useCallback(() => { const skip = useCallback(() => {
if (timer.current) { if (timer.current) {
@@ -211,6 +211,7 @@ export function PlayCanvas({
const { shown: typedTeaser, done: teaserDone } = useTypewriter(teaserText ?? "", "teaser_reset", { const { shown: typedTeaser, done: teaserDone } = useTypewriter(teaserText ?? "", "teaser_reset", {
waitForAudio: false, waitForAudio: false,
defaultCharMs: 65,
}); });
const [pulseActive, setPulseActive] = useState(false); const [pulseActive, setPulseActive] = useState(false);
@@ -526,7 +527,7 @@ export function PlayCanvas({
<div className="flex flex-col items-center justify-center gap-4"> <div className="flex flex-col items-center justify-center gap-4">
<div className="w-1.5 h-1.5 bg-clay-500 rounded-full animate-slow-pulse" /> <div className="w-1.5 h-1.5 bg-clay-500 rounded-full animate-slow-pulse" />
<p className="text-[9px] smallcaps text-clay-500 animate-slow-pulse"> <p className="text-[9px] smallcaps text-clay-500 animate-slow-pulse">
正 · 在 · 绘 · 制 · 第 · 一 · 幕 请 · 等 · 待
</p> </p>
</div> </div>
)} )}