优化:公屏叫号默认播放并移除声音控制

需求:服务端下发音频已验证可用,公屏无需再显示开启声音按钮和状态提示。

实现:移除声音控制组件与首次点击门槛,新叫号到达后直接播放内置音频队列。

验证:前端 65 项测试通过,生产构建通过。
This commit is contained in:
2026-08-01 11:40:58 +08:00
parent 6d911271e6
commit 01d261e893
7 changed files with 22 additions and 92 deletions

View File

@@ -1,6 +1,5 @@
import { useEffect, useRef } from "react";
import { api } from "../api";
import { AudioControl } from "../components/AudioControl";
import { FeedbackBanner, FreshnessBanner, LoadingState } from "../components/Feedback";
import { useAudioAnnouncements } from "../hooks/useAudioAnnouncements";
import { usePollingResource } from "../hooks/usePollingResource";
@@ -13,7 +12,7 @@ function projectCurrentBatch(value: unknown): CallBatchDto | null {
}
export function PublicDisplayCenterPage() {
const { announce, audioRef, enable: enableAudio, status: audioStatus } = useAudioAnnouncements();
const { announce, audioRef } = useAudioAnnouncements();
const resource = usePollingResource((signal) => api.displayOverview(signal), { intervalMs: 5_000 });
const data = resource.data;
const stale = Boolean(data) && isTimestampStale(resource.lastClientSuccessAt, 30_000);
@@ -38,7 +37,7 @@ export function PublicDisplayCenterPage() {
return (
<div className="app-shell app-shell--admin app-shell--no-primary-action">
<a className="skip-link" href="#main-content"></a>
<AudioControl audioRef={audioRef} status={audioStatus} onEnable={enableAudio} />
<audio ref={audioRef} preload="auto" aria-hidden="true" />
<header className="app-header">
<div className="brand-lockup" aria-label="景区排队叫号系统">
<span className="brand-logo-frame" aria-hidden="true"><img className="brand-logo" src="/xiaoqikong-logo.jpg" alt="" /></span>