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>
|
<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>
|
</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<app-toasts></app-toasts>
|
<app-toasts></app-toasts>
|
||||||
|
|
|
||||||
|
|
@ -180,10 +180,23 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
private onPlayerKeydown = (event: KeyboardEvent): void => {
|
private onPlayerKeydown = (event: KeyboardEvent): void => {
|
||||||
if (event.key === 'Escape' && this.playerUrl) {
|
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();
|
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 (媒体库) ----------
|
// ---------- Library (媒体库) ----------
|
||||||
|
|
||||||
setMode(mode: 'downloads' | 'library'): void {
|
setMode(mode: 'downloads' | 'library'): void {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue