fix: 修复播放器快进后原生进度条吞掉 ESC 导致无法关闭的问题
This commit is contained in:
parent
d29639a9c5
commit
e1a2d93b7c
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue