fix: 修复播放器快进后原生进度条吞掉 ESC 导致无法关闭的问题

This commit is contained in:
tigerenwork 2026-08-15 16:25:07 +08:00
parent d29639a9c5
commit e1a2d93b7c
2 changed files with 16 additions and 1 deletions

View File

@ -216,7 +216,9 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<video class="player-video" [src]="playerUrl" controls autoplay></video>
<video class="player-video" [src]="playerUrl" controls autoplay
(keydown.escape)="closePlayer()"
(focusin)="onVideoFocusIn($event)"></video>
</div>
<app-toasts></app-toasts>

View File

@ -180,10 +180,23 @@ export class AppComponent implements OnInit, OnDestroy {
private onPlayerKeydown = (event: KeyboardEvent): void => {
if (event.key === 'Escape' && this.playerUrl) {
// The native video controls (shadow DOM) would otherwise consume the
// key after a seek — stop it so the player closes cleanly instead of
// only highlighting the progress bar.
event.preventDefault();
event.stopPropagation();
this.closePlayer();
}
};
onVideoFocusIn(event: FocusEvent): void {
// The native media controls live in a closed UA shadow root; once one of
// them (e.g. the progress bar after seeking) holds focus, the browser
// consumes Escape internally and no DOM keydown reaches the page. Blur
// the video so focus returns to the document and Escape can close it.
(event.currentTarget as HTMLVideoElement).blur();
}
// ---------- Library (媒体库) ----------
setMode(mode: 'downloads' | 'library'): void {